:root {
      --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-accent: 'PT Serif', Georgia, serif;
      --font-head:   'Spectral', Georgia, serif;
      --font-body:   'Onest', var(--font-fallback);
      --nav-w: 250px;
      --radius-card: 22px;
      --radius-pill: 999px;
    }
    [data-theme="day"] {
      --sky-top:#b6d0e8; --sky-mid:#d4e2ef; --sky-low:#eaf1f8; --sky-sun:rgba(120,170,220,0.40);
      --text:#14202e; --text-soft:#3a4856; --text-muted:#6a7783;
      --accent:#1166a8; --accent-ink:#0f5a93;
      --glass-bg:rgba(255,255,255,0.55); --glass-brd:rgba(255,255,255,0.75);
      --glass-line:rgba(20,32,46,0.08); --glass-line2:rgba(20,32,46,0.14);
      --glass-sh:0 24px 60px -24px rgba(31,55,82,0.45), 0 4px 16px -6px rgba(31,55,82,0.20);
      --on-accent:#ffffff; --ink-btn:#14202e;
    }
    [data-theme="night"] {
      --sky-top:#070d18; --sky-mid:#0c1626; --sky-low:#122339; --sky-sun:rgba(90,140,200,0.30);
      --text:#eaf1f8; --text-soft:#b6c4d4; --text-muted:#7d8da0;
      --accent:#E8D58A; --accent-ink:#EFE3A6;
      --glass-bg:rgba(20,34,54,0.55); --glass-brd:rgba(150,180,215,0.22);
      --glass-line:rgba(255,255,255,0.08); --glass-line2:rgba(255,255,255,0.16);
      --glass-sh:0 24px 60px -24px rgba(0,0,0,0.7), 0 4px 16px -6px rgba(0,0,0,0.5);
      --on-accent:#14202e; --ink-btn:#eaf1f8;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin:0; font-family:var(--font-body); font-size:15px; line-height:1.5; color:var(--text);
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      background:
        radial-gradient(120% 80% at 78% 88%, var(--sky-sun), transparent 60%),
        linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-low) 100%);
      background-attachment:fixed; min-height:100vh;
      transition:color 0.4s, background 0.6s;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; cursor:pointer; border:none; background:none; padding:0; color:inherit; }
    img, svg { display:block; max-width:100%; }
    :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
    .skip-link { position:absolute; top:-100px; left:0; z-index:200; background:var(--ink-btn); color:var(--sky-mid); padding:10px 16px; border-radius:0 0 8px 0; font-size:13px; transition:top 0.15s; }
    .skip-link:focus { top:0; }

    body::before {
      content:""; position:fixed; inset:0;
      background:
        radial-gradient(40% 30% at 15% 20%, rgba(255,255,255,0.18), transparent 70%),
        radial-gradient(50% 35% at 85% 30%, rgba(255,255,255,0.12), transparent 70%);
      pointer-events:none; z-index:0;
    }
    [data-theme="night"] body::before { opacity:0.4; }

    .layout {
      position:relative; z-index:1; display:grid;
      grid-template-columns: var(--nav-w) minmax(0, 1fr);
      max-width:1680px; margin:0 auto;
    }

    /* ===== ЛЕВОЕ МЕНЮ ===== */
    .nav { position:sticky; top:0; align-self:start; height:100vh; padding:18px; }
    .nav__card {
      height:100%; display:flex; flex-direction:column; overflow:hidden;
      border-radius:var(--radius-card); background:var(--glass-bg);
      border:1px solid var(--glass-brd); box-shadow:var(--glass-sh);
      backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
    }
    .nav__brand { padding:30px 28px 22px; text-align:center; border-bottom:1px solid var(--glass-line); }
    .nav__logo { display:inline-flex; align-items:center; justify-content:center; width:100%; }
    .nav__logo-img { width:168px; height:auto; }
    .nav__logo-img--night { display:none; }
    [data-theme="night"] .nav__logo-img--day { display:none; }
    [data-theme="night"] .nav__logo-img--night { display:block; }
    .nav__tagline { font-family:var(--font-body); margin-top:10px; font-size:13px; color:var(--text-muted); }

    .nav__menu { flex:1; overflow-y:auto; padding:14px 0; list-style:none; margin:0; }
    .nav__menu::-webkit-scrollbar { width:4px; }
    .nav__menu::-webkit-scrollbar-thumb { background:var(--accent); border-radius:4px; }
    .nav__link {
      display:flex; align-items:center; gap:13px;
      padding:12px 28px; font-size:14px; font-weight:600; color:var(--text-soft);
      position:relative; transition:color 0.15s;
    }
    .nav__link::before {
      content:""; width:6px; height:6px; border-radius:50%; background:var(--text-muted);
      opacity:0.4; transition:opacity 0.15s, background 0.15s, transform 0.15s; flex:none;
    }
    .nav__link:hover { color:var(--text); }
    .nav__link.is-active { color:var(--text); font-weight:700; }
    .nav__link.is-active::before { opacity:1; background:var(--accent); transform:scale(1.4); }

    .nav__foot { border-top:1px solid var(--glass-line); padding:16px 28px 18px; }
    .nav__phone { font-size:16px; font-weight:600; color:var(--text); }
    .nav__contact { display:block; font-size:13px; color:var(--text-soft); margin-top:4px; }
    .nav__loc { font-size:13px; color:var(--text-muted); margin-top:4px; }
    .nav__utils { display:flex; align-items:center; gap:20px; margin-top:14px; }
    .nav__icon {
      display:inline-flex; align-items:center; justify-content:center;
      color:var(--text-soft); transition:color 0.15s;
    }
    .nav__icon:hover { color:var(--accent); }
    .nav__icon svg { width:21px; height:21px; }
    .nav__lang { font-size:13px; font-weight:700; letter-spacing:0.06em; color:var(--text-muted); transition:color 0.15s; }
    .nav__lang:hover { color:var(--accent); }

    /* ===== ОБЩЕЕ ДЛЯ СЕКЦИЙ ===== */
    .main { display:flex; flex-direction:column; }
    section { scroll-margin-top:24px; }
    .sec { padding:64px 60px; border-top:1px solid var(--glass-line); }
    .sec__eyebrow {
      display:inline-flex; align-items:center; gap:9px;
      font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
      color:var(--accent-ink); margin:0 0 20px;
    }
    .sec__eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
    .sec__h {
      font-family:var(--font-head); font-size:38px; line-height:1.08; font-weight:700;
      letter-spacing:-0.02em; margin:0 0 16px; color:var(--text);
    }
    .sec__h em { font-style:normal; color:var(--accent-ink); }
    .sec__lead { font-size:17px; color:var(--text-soft); line-height:1.6; max-width:620px; margin:0 0 40px; }

    .btn-primary {
      display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--on-accent);
      font-size:14px; font-weight:700; letter-spacing:0.04em; padding:15px 26px; border-radius:var(--radius-pill);
      transition:transform 0.12s, filter 0.15s; box-shadow:0 14px 30px -12px var(--accent);
    }
    .btn-primary:hover { transform:translateY(-1px); filter:brightness(1.04); }
    .btn-ghost {
      font-size:14px; font-weight:600; color:var(--text); border-bottom:1.5px solid var(--text);
      padding-bottom:4px; transition:color 0.15s, border-color 0.15s;
    }
    .btn-ghost:hover { color:var(--accent); border-color:var(--accent); }

    /* ===== HERO (центр, SaaS) ===== */
    .hero {
      display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
      padding:120px 60px 96px; min-height:80vh; overflow:hidden;
    }
    .hero .sec__eyebrow { margin-bottom:22px; }
    .hero__h1 { font-family:var(--font-head); font-size:60px; line-height:1.06; font-weight:700; letter-spacing:-0.025em; margin:0 0 26px; color:var(--text); }
    .hero__h1 em { font-style:normal; color:var(--accent-ink); }
    .hero__rot { display:block; margin-top:0.12em; min-height:1.1em; }
    .hero__rot-word {
      display:inline-block; color:var(--accent-ink);
      transition:opacity 0.45s ease, transform 0.45s ease;
    }
    .hero__rot-word.is-out { opacity:0; transform:translateY(0.22em); }
    @media (prefers-reduced-motion: reduce) { .hero__rot-word { transition:none; } }
    .hero__sub { font-size:18px; color:var(--text-soft); line-height:1.6; max-width:560px; margin:0 0 36px; }
    .hero__ctas { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }

    /* ===== КЕЙСЫ ===== */
    .case { display:flex; flex-direction:column; gap:32px; }
    .case + .case { margin-top:64px; padding-top:64px; border-top:1px solid var(--glass-line); }
    .case__media {
      position:relative; border-radius:18px; overflow:hidden;
      border:1px solid var(--glass-brd); box-shadow:var(--glass-sh); background:var(--glass-bg);
    }
    .case__shot { display:block; width:100%; height:auto; position:relative; z-index:1; }
    .case__shot--night { display:none; }
    [data-theme="night"] .case__shot--day { display:none; }
    [data-theme="night"] .case__shot--night { display:block; }
    .case__ph {
      position:absolute; inset:0; z-index:0;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
      background:linear-gradient(160deg, #2a3b52, #0e1a2b);
    }
    .case__ph span { color:rgba(255,255,255,0.55); font-weight:800; letter-spacing:0.18em; font-size:16px; }
    .case__ph small { color:rgba(255,255,255,0.32); font-size:11px; letter-spacing:0.04em; }
    .case__body { max-width:800px; }
    .case__body > :last-child { margin-bottom:0; }
    .case__kicker {
      display:inline-flex; align-items:center; gap:9px;
      font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
      color:var(--accent-ink); margin:0 0 12px;
    }
    .case__kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
    .case__title { font-family:var(--font-head); font-size:32px; font-weight:700; color:var(--text); margin:0 0 8px; letter-spacing:-0.02em; }
    .case__role { font-size:14px; font-weight:600; color:var(--text-muted); margin:0 0 18px; }
    .case__lead { font-size:16.5px; color:var(--text-soft); line-height:1.62; margin:0 0 20px; }
    .case__result {
      font-size:16px; color:var(--text); line-height:1.6; margin:0;
      padding:18px 22px; border-radius:14px; background:var(--glass-bg); border:1px solid var(--glass-line2);
    }
    .case__result b { color:var(--accent-ink); }
    .case__more { margin-top:18px; }
    .case__more > summary {
      list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
      font-size:14px; font-weight:700; color:var(--accent-ink); transition:opacity 0.15s;
    }
    .case__more > summary:hover { opacity:0.75; }
    .case__more > summary::-webkit-details-marker { display:none; }
    .case__more > summary::after { content:"▾"; font-size:12px; transition:transform 0.2s; }
    .case__more[open] > summary::after { transform:rotate(180deg); }
    .case__detail p { font-size:15.5px; color:var(--text-soft); line-height:1.62; margin:16px 0 0; max-width:760px; }
    .case__detail b { color:var(--text); font-weight:700; }
    .case__grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:4px; }
    .case__col {
      display:flex; flex-direction:column; gap:16px;
      padding:22px 24px; border-radius:16px;
      background:var(--glass-bg); border:1px solid var(--glass-line2);
    }
    .case__col p { font-size:15px; color:var(--text-soft); line-height:1.6; margin:0; }
    .case__col p b { display:block; color:var(--accent-ink); font-weight:700; margin-bottom:5px; }

    /* ===== УСЛУГИ ===== */
    .cards3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
    .scard {
      background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:var(--radius-card);
      box-shadow:var(--glass-sh); padding:30px 28px;
      backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    }
    .scard__title { font-family:var(--font-head); font-size:22px; font-weight:600; color:var(--text); margin:0 0 10px; }
    .scard__desc { font-size:14.5px; color:var(--text-soft); line-height:1.55; margin:0 0 18px; }
    .scard__list { list-style:none; margin:0; padding:0; }
    .scard__list li { font-size:14px; color:var(--text-muted); line-height:1.5; padding-left:18px; position:relative; margin-bottom:9px; }
    .scard__list li:last-child { margin-bottom:0; }
    .scard__list li::before { content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--accent); }

    /* ===== РАБОТЫ ===== */
    .filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
    .filter {
      font-size:13.5px; font-weight:600; padding:9px 18px; border-radius:var(--radius-pill);
      border:1px solid var(--glass-line2); color:var(--text-soft); background:var(--glass-bg);
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      transition:background 0.15s, color 0.15s, border-color 0.15s;
    }
    .filter:hover { color:var(--text); border-color:var(--accent); }
    .filter.is-active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
    .filter span { opacity:0.6; font-weight:500; margin-left:5px; }
    .filter.is-active span { opacity:0.85; }
    .grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
    .work {
      display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-card);
      background:var(--glass-bg); border:1px solid var(--glass-brd); box-shadow:var(--glass-sh);
      backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
      transition:transform 0.2s;
    }
    a.work:hover { transform:translateY(-4px); }
    .work.is-hidden { display:none; }
    .work__preview { aspect-ratio:16/9; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
    .work__preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; }
    .work__mono { font-family:var(--font-accent); font-size:60px; font-weight:700; color:rgba(255,255,255,0.85); text-shadow:0 2px 18px rgba(0,0,0,0.25); user-select:none; }
    .work__preview[data-ph="1"] { background:linear-gradient(135deg,#2b6cb0,#0e2a47); }
    .work__preview[data-ph="2"] { background:linear-gradient(135deg,#3a7bd5,#1c4b82); }
    .work__preview[data-ph="3"] { background:linear-gradient(135deg,#5b8db8,#243b53); }
    .work__preview[data-ph="4"] { background:linear-gradient(135deg,#c9a227,#6e5410); }
    .work__preview[data-ph="5"] { background:linear-gradient(135deg,#4a6fa5,#101f33); }
    .work__preview[data-ph="6"] { background:linear-gradient(135deg,#7a93ad,#2a3b52); }
    .work__body { padding:16px 22px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
    .work__meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px; }
    .work__tag { font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--glass-line2); padding:4px 10px; border-radius:999px; }
    .work__metric { font-size:13px; font-weight:700; color:var(--accent-ink); }
    .work__title { font-family:var(--font-head); font-size:20px; font-weight:600; color:var(--text); margin:0; }
    .work__desc { font-size:14px; color:var(--text-soft); line-height:1.5; margin:0; flex:1; }
    .work__foot { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
    .work__cat { font-size:12px; color:var(--text-muted); }
    .work__link { font-size:13px; font-weight:600; color:var(--accent-ink); display:inline-flex; gap:5px; }
    a.work:hover .work__link { gap:9px; }

    /* ===== ОПЫТ ===== */
    .stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; margin-bottom:44px; max-width:980px; background:var(--glass-line2); border:1px solid var(--glass-brd); border-radius:var(--radius-card); overflow:hidden; }
    .stat { background:var(--glass-bg); padding:24px 22px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
    .stat__value { font-family:var(--font-head); font-size:28px; font-weight:700; color:var(--text); }
    .stat__label { font-size:13px; color:var(--text-muted); line-height:1.4; margin-top:6px; }
    .tl { max-width:820px; position:relative; padding-left:30px; }
    .tl::before { content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--glass-line2); }
    .tl-item { position:relative; padding-bottom:34px; }
    .tl-item:last-child { padding-bottom:0; }
    .tl-item::before { content:""; position:absolute; left:-30px; top:5px; width:13px; height:13px; border-radius:50%; background:var(--sky-mid); border:2px solid var(--accent); }
    .tl-period { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:7px; }
    .tl-company { font-family:var(--font-head); font-size:20px; font-weight:600; color:var(--text); margin:0; }
    .tl-role { font-size:13px; color:var(--text-muted); margin:3px 0 10px; }
    .tl-summary { font-size:15.5px; line-height:1.6; color:var(--text-soft); margin:0 0 10px; max-width:680px; }
    .tl-result { display:inline-block; font-size:14px; color:var(--text); border-left:2px solid var(--accent); padding-left:12px; line-height:1.5; }
    .exp-more { margin-top:36px; }

    /* ===== О ВЫСОТЕ / интервью + принципы + мировоззрение ===== */
    .about-lead-card {
      background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:var(--radius-card);
      box-shadow:var(--glass-sh); padding:36px 40px; max-width:820px; margin-bottom:44px;
      backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
      display:flex; align-items:center; gap:34px;
    }
    .about-lead-card__photo {
      flex:none; width:180px; height:180px; object-fit:cover; object-position:center;
      border-radius:20px; border:1px solid var(--glass-brd); box-shadow:var(--glass-sh);
    }
    .about-lead-card__text { flex:1; min-width:0; }
    .about-lead-card p { font-size:17px; line-height:1.7; color:var(--text-soft); margin:0 0 14px; }
    .about-lead-card p:last-child { margin-bottom:0; }
    .about-lead-card em { font-style:normal; color:var(--text); font-weight:600; }
    .subh { font-family:var(--font-head); font-size:24px; font-weight:600; color:var(--text); margin:0 0 22px; letter-spacing:-0.01em; }
    .principles { display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-bottom:48px; max-width:980px; }
    .principle {
      background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:var(--radius-card);
      padding:26px 26px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    }
    .principle__title { font-size:17px; font-weight:700; color:var(--text); margin:0 0 10px; line-height:1.3; }
    .principle__text { font-size:14.5px; color:var(--text-soft); line-height:1.6; margin:0; }
    .worldview { max-width:760px; }
    .worldview p { font-size:17px; line-height:1.75; color:var(--text-soft); margin:0 0 16px; }
    .worldview p:last-child { margin-bottom:0; }

    /* ===== КОНТАКТ ===== */
    .contact-card {
      background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:var(--radius-card);
      box-shadow:var(--glass-sh); padding:48px 48px; max-width:820px;
      backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    }
    .contact-card__h { font-family:var(--font-head); font-size:32px; font-weight:600; color:var(--text); margin:0 0 14px; letter-spacing:-0.02em; }
    .contact-card__p { font-size:16px; color:var(--text-soft); line-height:1.6; margin:0 0 28px; max-width:540px; }
    .contact-card__links { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:30px; font-size:15px; }
    .contact-card__link { color:var(--text); border-bottom:1px solid var(--glass-line2); padding-bottom:2px; transition:opacity 0.15s; }
    .contact-card__link:hover { opacity:0.7; }

    /* ===== MOBILE TOGGLE ===== */
    .navbtn {
      display:none; position:fixed; top:16px; left:16px; z-index:120; width:46px; height:46px; border-radius:13px;
      background:var(--glass-bg); border:1px solid var(--glass-brd); box-shadow:var(--glass-sh);
      backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); align-items:center; justify-content:center;
    }
    .navbtn span, .navbtn span::before, .navbtn span::after { content:""; display:block; width:20px; height:2px; background:var(--text); transition:0.2s; }
    .navbtn span::before { transform:translateY(-6px); }
    .navbtn span::after { transform:translateY(4px); }
    .nav__backdrop { display:none; }

    @media (max-width:1280px) { .grid { grid-template-columns:repeat(2, 1fr); } .cards3 { grid-template-columns:1fr; } }
    @media (max-width:1100px) {
      :root { --nav-w:240px; }
      .hero { padding:88px 40px 64px; min-height:auto; }
      .hero__h1 { font-size:44px; }
      .case + .case { margin-top:48px; padding-top:48px; }
      .case__title { font-size:28px; }
      .sec { padding:56px 40px; }
      .sec__h { font-size:32px; }
      .stats { grid-template-columns:1fr 1fr; }
      .principles { grid-template-columns:1fr; }
    }
    @media (max-width:760px) {
      .layout { grid-template-columns:1fr; }
      .navbtn { display:inline-flex; }
      .nav { position:fixed; top:0; left:0; z-index:130; height:100vh; width:min(86vw, 350px); padding:14px; transform:translateX(-106%); transition:transform 0.3s ease; }
      .nav.is-open { transform:translateX(0); }
      .nav__backdrop { display:block; position:fixed; inset:0; background:rgba(8,16,26,0.4); opacity:0; pointer-events:none; transition:opacity 0.2s; z-index:125; }
      .nav__backdrop.is-open { opacity:1; pointer-events:auto; }
      .main { padding-top:74px; }
      .hero { padding:56px 20px 48px; min-height:auto; }
      .hero__h1 { font-size:32px; }
      .case__title { font-size:24px; }
      .case__grid { grid-template-columns:1fr; }
      .sec { padding:44px 20px; }
      .sec__h { font-size:27px; }
      .grid { grid-template-columns:1fr; }
      .stats { grid-template-columns:1fr 1fr; }
      .contact-card, .about-lead-card { padding:30px 24px; }
      .about-lead-card { flex-direction:column; align-items:flex-start; gap:24px; }
      .about-lead-card__photo { width:140px; height:140px; }
    }