:root {
    --accent: #0f8b8d;
    --accent-strong: #0a6f71;
    --accent-warm: #e86f51;
    --accent-gold: #d99a25;
    --ink: #18212f;
    --muted: #647184;
    --container: 1170px;
    --bg: #ffffff;
    --bg-soft: #f4f8f7;
    --bg-tint: #fff7f1;
    --surface: #ffffff;
    --surface-alt: #eef6f4;
    --text: #243142;
    --text-strong: #111827;
    --text-muted: #667487;
    --border: #dce5e4;
    --header-bg: rgba(255, 255, 255, .96);
    --topbar-bg: #132433;
    --topbar-text: #edf7f6;
    --button-neutral: #24384a;
    --footer-bg: #101923;
    --footer-strip: #0b121a;
    --footer-text: #b4c0cc;
    --footer-heading: #ffffff;
    --focus: rgba(15, 139, 141, .28);
    --shadow: 0 18px 44px rgba(24, 33, 47, .09);
    --soft-shadow: 0 10px 28px rgba(24, 33, 47, .06);
}

html[data-theme="koyu"] {
    --accent: #39c6bd;
    --accent-strong: #7ddbd5;
    --accent-warm: #ff8a65;
    --accent-gold: #f4bf4f;
    --ink: #ecf6fb;
    --muted: #a7b8ca;
    --bg: #071421;
    --bg-soft: #0c2033;
    --bg-tint: #13283b;
    --surface: #10283d;
    --surface-alt: #14334d;
    --text: #dbe7f1;
    --text-strong: #ffffff;
    --text-muted: #a8b8ca;
    --border: #28465f;
    --header-bg: rgba(9, 25, 41, .96);
    --topbar-bg: #06101b;
    --topbar-text: #e7f3f7;
    --button-neutral: #1b3b56;
    --footer-bg: #050c15;
    --footer-strip: #071421;
    --footer-text: #aebed0;
    --footer-heading: #ffffff;
    --focus: rgba(57, 198, 189, .28);
    --shadow: 0 20px 48px rgba(0, 0, 0, .32);
    --soft-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
html[data-theme="koyu"] { color-scheme: dark; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.55;
    transition: background-color .22s ease, color .22s ease;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 18px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.topbar { height: 40px; background: var(--topbar-bg); color: var(--topbar-text); font-size: 13px; }
.topbar__inner { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
.socials { display: flex; gap: 18px; align-items: center; font-weight: 700; }
.topbar__contact { display: flex; align-items: center; gap: 28px; }
.quote { background: var(--accent-warm); color: #fff; padding: 8px 14px; font-weight: 800; border-radius: 4px; box-shadow: 0 8px 18px rgba(232, 111, 81, .24); }
.quote:hover { background: var(--accent); }

.site-header { height: 110px; background: var(--header-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand img { width: 225px; }
.menu { display: flex; align-items: center; gap: 30px; font-weight: 800; font-size: 15px; color: var(--text-strong); }
.menu a, .search, .lang { transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.menu a:hover, .search:hover { color: var(--accent); }
.search { font-size: 26px; line-height: 1; color: var(--accent-warm); }
.lang { border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; background: var(--surface); border-radius: 4px; color: var(--text-strong); }

.theme-toggle {
    margin-left: auto;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-strong);
    border-radius: 999px;
    padding: 7px 10px 7px 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 88px;
    justify-content: center;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--soft-shadow);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.theme-toggle__track { width: 34px; height: 18px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--accent); position: relative; flex: 0 0 auto; }
.theme-toggle__thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); position: absolute; top: 2px; left: 3px; transition: transform .2s ease, background-color .2s ease; }
html[data-theme="koyu"] .theme-toggle__thumb { transform: translateX(15px); background: var(--accent-gold); }
.theme-toggle__label { font-size: 12px; line-height: 1; }

.hero { height: 660px; background: url("hero.png") center top/cover no-repeat; position: relative; }
.hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 16, 27, .22), rgba(255, 255, 255, 0) 48%, rgba(15, 139, 141, .10)); pointer-events: none; }
html[data-theme="koyu"] .hero:after { background: linear-gradient(90deg, rgba(3, 9, 16, .52), rgba(7, 20, 33, .12) 52%, rgba(57, 198, 189, .12)); }
.section { padding: 82px 0; text-align: center; background: var(--bg); }
.section--services { background: var(--bg-soft); padding-top: 42px; }
.section h1, .section h2 { font-size: 28px; margin: 0 0 18px; font-weight: 900; color: var(--text-strong); }
.section h2:after, .section h1:after { content: ""; display: block; width: 46px; height: 3px; background: var(--accent-warm); margin: 15px auto 0; }
.section-kicker { color: var(--text-muted); font-size: 16px; margin: 0 auto 55px; }
.mini-rule { width: 34px; height: 1px; background: var(--border); margin: 18px auto 55px; position: relative; }
.mini-rule:after { content: ""; position: absolute; left: 13px; top: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--accent); }
.cards { display: grid; gap: 34px; text-align: left; }
.cards--three { grid-template-columns: repeat(3, 1fr); }
.cards article { overflow: hidden; color: var(--text); border-radius: 6px; }
.cards img { border-radius: 6px; }
.cards h3 { font-size: 20px; line-height: 1.25; margin: 22px 0 12px; font-weight: 900; color: var(--text-strong); }
.cards p { color: var(--text-muted); margin: 0; }
.compact { max-width: 940px; }
.compact article { background: var(--surface); border: 1px solid var(--border); padding-bottom: 22px; box-shadow: var(--soft-shadow); }
.compact h3, .compact p { padding-left: 18px; padding-right: 18px; }
.compact h3 { font-size: 16px; }
.compact p { font-size: 12px; }
.filters { display: flex; justify-content: center; gap: 34px; align-items: center; margin: 0 0 45px; font-size: 13px; color: var(--text-muted); }
.filters span { background: var(--accent); color: #fff; padding: 12px 16px; border-radius: 4px; box-shadow: 0 10px 22px rgba(15, 139, 141, .22); }
.filters a:hover { color: var(--accent-warm); }
.project-cards article { background: var(--surface); text-align: center; border: 1px solid var(--border); box-shadow: var(--soft-shadow); }
.project-cards h3 { font-size: 14px; margin: 16px 0 18px; }
.brands-strip { padding-top: 35px; background: var(--bg-tint); }
.brand-row { display: flex; justify-content: center; align-items: center; gap: 34px; margin-top: 45px; }
.brand-row img { width: 140px; height: 60px; object-fit: contain; filter: saturate(.9) contrast(1.05); }
.blog-home { background: var(--bg-soft); margin: 0 auto 0; max-width: 1690px; }
.blog-cards img { height: 230px; width: 100%; object-fit: cover; }
.blog-cards article { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--soft-shadow); padding-bottom: 22px; }
.blog-cards h3, .blog-cards p { padding-left: 14px; padding-right: 14px; }
.service-list article { background: var(--surface); border: 1px solid var(--border); padding-bottom: 22px; box-shadow: var(--soft-shadow); }
.service-list h3, .service-list p { padding-left: 18px; padding-right: 18px; }
.newsletter { min-height: 340px; background: url("newsletter.png") center/cover no-repeat; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; }
.newsletter:before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(19, 36, 51, .78), rgba(15, 139, 141, .58)); }
html[data-theme="koyu"] .newsletter:before { background: linear-gradient(135deg, rgba(3, 9, 16, .84), rgba(16, 40, 61, .72)); }
.newsletter > div { position: relative; padding: 0 18px; }
.newsletter h2 { font-size: 30px; margin: 0 0 10px; }
.newsletter p { margin: 0 0 20px; }
.newsletter input { width: 420px; max-width: 70vw; border: 0; border-radius: 28px; padding: 16px 24px; color: #111827; background: #fff; }
.newsletter button { border: 0; background: var(--accent-warm); color: #fff; font-weight: 800; border-radius: 24px; padding: 16px 24px; margin-left: 8px; }
.newsletter button:hover { background: var(--accent); }

.page-title { padding: 42px 0 35px; background: var(--bg); }
.page-title__inner { height: 90px; background: var(--surface-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 175px; border-radius: 6px; box-shadow: var(--soft-shadow); }
.page-title h1 { font-size: 20px; font-weight: 400; margin: 0; color: var(--text-strong); }
.page-title div { font-size: 12px; color: var(--text-muted); }
.page-title strong { color: var(--text-strong); margin: 0 12px; }
.text-page { padding: 55px 18px 120px; max-width: 1200px; color: var(--text-muted); }
.text-page h1 { font-size: 30px; color: var(--text-strong); margin: 0 0 26px; }
.text-page p, .text-page li { font-size: 16px; }
.text-page strong { color: var(--text-strong); }
.listing { padding-top: 45px; padding-bottom: 115px; }
.service-list { max-width: 1120px; }
.pagination { display: inline-block; margin-top: 48px; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 4px; }
.projects-page .project-cards article { background: var(--surface); }
.brands-page { padding-bottom: 110px; }
.brand-grid { display: grid; grid-template-columns: repeat(3, 330px); gap: 32px; justify-content: center; }
.brand-grid div { border: 1px solid var(--border); height: 145px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 6px; box-shadow: var(--soft-shadow); }
.brand-grid img { width: 100%; height: 100%; object-fit: contain; }
.blog-page .blog-cards article { background: var(--surface); padding-bottom: 22px; }
.blog-page h3, .blog-page p, .read-post { padding: 0 12px; }
.read-post { display: inline-block; color: var(--accent-warm); margin-top: 18px; font-weight: 800; }
.contact-map { max-width: 1420px; margin: 0 auto; }
.contact-map img { width: 100%; height: 280px; object-fit: cover; }
.contact-panel { max-width: 1420px; margin: 0 auto; background: var(--bg-soft); text-align: center; padding: 38px 120px 28px; }
.contact-panel h1, .write-us h1 { font-size: 30px; margin: 0 0 55px; color: var(--text-strong); }
.contact-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 55px; }
.contact-icons--two { grid-template-columns: repeat(2, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; }
.contact-icons span { display: block; color: var(--accent-warm); font-size: 26px; margin-bottom: 18px; }
.contact-icons strong { color: var(--text-strong); }
.contact-socials { justify-content: center; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); display: inline-flex; padding: 14px 60px; color: var(--text-strong); }
.write-us { padding: 45px 18px 30px; text-align: center; }
.write-us form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; max-width: 990px; margin: 0 auto; }
.write-us label { color: var(--text-muted); }
.write-us input, .write-us textarea { display: block; width: 100%; border: 1px solid var(--border); border-radius: 4px; margin-top: 8px; padding: 12px; font: inherit; background: var(--surface); color: var(--text); }
.write-us input:focus, .write-us textarea:focus { outline: 3px solid var(--focus); border-color: var(--accent); }
.write-us .wide { grid-column: 1 / -1; }
.call-band { height: 86px; background: linear-gradient(90deg, var(--accent), var(--accent-warm)); color: #fff; display: flex; align-items: center; justify-content: center; gap: 28px; font-size: 24px; letter-spacing: 1px; }
html[data-theme="koyu"] .call-band { background: linear-gradient(90deg, #0b7285, #174463); }
.call-band strong { font-size: 30px; }
.call-icon { font-size: 38px; }
.footer { background: var(--footer-bg); color: var(--footer-text); }
.footer__grid { display: grid; grid-template-columns: 1.35fr 1.25fr .7fr .75fr; gap: 70px; padding: 55px 18px 75px; }
.footer-logo { width: 230px; margin-bottom: 25px; }
.footer p { font-size: 15px; font-weight: 700; }
.footer h3 { color: var(--footer-heading); font-size: 18px; margin: 0 0 25px; }
.footer h4 { color: var(--footer-heading); letter-spacing: 2px; margin: 24px 0 8px; }
.footer a { display: block; margin: 0 0 14px; color: var(--footer-text); }
.footer a:hover { color: var(--accent-warm); }
.read-more { color: var(--accent-gold) !important; font-weight: 800; }
.footer-socials { display: flex; gap: 22px; margin-top: 28px; font-weight: 800; }
.hours { border-top: 1px solid rgba(180, 192, 204, .35); padding-top: 12px; }
.copyright { background: var(--footer-strip); color: #fff; padding: 22px 0; font-size: 15px; }
.copyright b { color: var(--accent-gold); }
.float-actions { position: fixed; left: 16px; bottom: 50px; z-index: 5; display: grid; gap: 10px; }
.float-actions a { min-width: 92px; min-height: 42px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .24); }
.float-actions a:first-child { background: var(--accent); }
.float-actions a:last-child { background: var(--accent-warm); }
.float-actions a:hover { transform: translateY(-1px); }

@media (max-width: 900px) {
    .topbar { height: auto; padding: 8px 0; }
    .topbar__inner, .nav, .topbar__contact { flex-wrap: wrap; gap: 12px; }
    .topbar__inner { justify-content: flex-start; }
    .site-header { height: auto; padding: 18px 0; }
    .nav { align-items: flex-start; }
    .brand img { width: 205px; }
    .theme-toggle { order: 2; margin-left: auto; }
    .menu { order: 3; width: 100%; gap: 14px; flex-wrap: wrap; font-size: 13px; }
    .hero { height: 360px; }
    .cards--three, .brand-grid, .contact-icons, .write-us form, .footer__grid { grid-template-columns: 1fr; }
    .page-title__inner { padding: 0 25px; }
    .brand-grid { display: grid; }
    .call-band { font-size: 16px; gap: 12px; }
    .call-band strong { font-size: 20px; }
    .footer__grid { gap: 28px; }
    .contact-panel { padding: 30px 20px; }
    .filters { flex-wrap: wrap; }
    .brand-row { flex-wrap: wrap; }
    .newsletter form { display: grid; gap: 10px; justify-items: center; }
    .newsletter button { margin-left: 0; }
}

@media (max-width: 520px) {
    .topbar__contact { align-items: flex-start; }
    .theme-toggle { min-width: 82px; padding-right: 8px; }
    .theme-toggle__label { font-size: 11px; }
    .page-title__inner { height: auto; min-height: 90px; gap: 10px; flex-direction: column; align-items: flex-start; justify-content: center; }
    .newsletter input { max-width: 86vw; }
    .contact-socials { padding-left: 30px; padding-right: 30px; }
    .call-band { min-height: 86px; height: auto; padding: 16px 18px; flex-wrap: wrap; }
    .float-actions { left: 10px; bottom: 24px; }
    .float-actions a { min-width: 74px; min-height: 38px; font-size: 12px; }
}
body { overflow-x: hidden; }
.site-header { position: relative; z-index: 20; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--text-strong); transition: .2s; }
@media (max-width: 900px) {
  .nav { align-items: center; position: relative; }
  .menu-toggle { display: block; margin-left: auto; }
  .theme-toggle { margin-left: 0; }
  .menu { display: none; position: absolute; z-index: 30; top: calc(100% + 18px); left: 18px; right: 18px; width: auto; padding: 10px; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
  .menu.is-open { display: grid; }
  .menu a, .menu .lang { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .cards--three, .brand-grid, .contact-icons, .write-us form, .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .topbar__contact > :nth-child(2) { display: none; }
  .brand img { width: 150px; }
  .theme-toggle { min-width: 42px; width: 42px; padding: 7px; }
  .theme-toggle__label { display: none; }
  .hero { height: clamp(230px, 64vw, 320px); }
  .section { padding: 54px 0; }
  .cards--three, .brand-grid, .contact-icons, .contact-icons--two, .write-us form, .footer__grid { grid-template-columns: 1fr; }
  .filters { justify-content: flex-start; gap: 10px; padding: 0 14px; overflow-x: auto; flex-wrap: nowrap; }
  .filters > * { flex: 0 0 auto; }
  .brand-grid { padding: 0 14px; }
  .contact-icons strong { overflow-wrap: anywhere; }
}