:root{
    --bg:#FAFAF8;
    --panel:#F1EFE8;
    --ink:#14161C;
    --ink-soft:#54565F;
    --navy:#1C2440;
    --navy-2:#262F55;
    --accent:#3652F5;
    --accent-soft:#E7EBFF;
    --line:#DEDDD3;
    --line-dark:#333A5C;
    --paper:#FFFFFF;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Unbounded', sans-serif;
    font-weight:800;
    letter-spacing:-0.01em;
    line-height:1.08;
  }
  a{color:inherit; text-decoration:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 28px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 26px;
    border-radius:2px;
    font-weight:600;
    font-size:15px;
    border:1px solid transparent;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .btn-primary{ background:var(--accent); color:#fff; }
  .btn-primary:hover{ background:#2740D6; }
  .btn-ghost{ border-color:var(--line-dark); color:var(--paper); }
  .btn-ghost:hover{ background:rgba(255,255,255,.08); }
  .btn-dark{ border-color:var(--ink); color:var(--ink); }
  .btn-dark:hover{ background:var(--ink); color:#fff; }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,250,248,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .logo{
    font-family:'Unbounded', sans-serif;
    font-weight:800;
    font-size:22px;
    display:flex; align-items:center; gap:10px;
  }
  .logo-mark{
    width:34px; height:34px;
    background:var(--ink);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
    border-radius:2px;
  }
  .nav-links{
    display:flex; gap:32px; font-size:15px; font-weight:500; color:var(--ink-soft);
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .nav-phone{ font-size:14px; color:var(--ink-soft); display:none; }
  @media(min-width:860px){ .nav-phone{ display:block; } }

  .mobile-toggle{
    display:none; background:none; border:none; cursor:pointer;
    width:32px; height:22px; position:relative; flex-shrink:0;
  }
  .mobile-toggle span{
    position:absolute; left:0; width:100%; height:2px; background:var(--ink);
    transition:transform .2s ease, opacity .2s ease;
  }
  .mobile-toggle span:nth-child(1){ top:0; }
  .mobile-toggle span:nth-child(2){ top:10px; }
  .mobile-toggle span:nth-child(3){ top:20px; }
  .mobile-toggle.is-open span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
  .mobile-toggle.is-open span:nth-child(2){ opacity:0; }
  .mobile-toggle.is-open span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

  @media(max-width:860px){
    .nav-links{ display:none; }
    .nav-cta-btn{ display:none; }
    .mobile-toggle{ display:block; }
  }

  /* ---------- MOBILE DRAWER (шторка) ---------- */
  .drawer-overlay{
    position:fixed; inset:0; background:rgba(20,22,30,.45);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
    z-index:60;
  }
  .drawer-overlay.is-open{ opacity:1; pointer-events:auto; }
  .drawer{
    position:fixed; top:0; right:0; bottom:0;
    width:min(320px,84vw);
    background:var(--navy); color:#fff;
    z-index:70;
    transform:translateX(100%);
    transition:transform .3s ease;
    display:flex; flex-direction:column;
    padding:26px 28px 32px;
  }
  .drawer.is-open{ transform:translateX(0); }
  .drawer-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:44px; }
  .drawer-close{ background:none; border:none; color:#fff; font-size:26px; cursor:pointer; line-height:1; }
  .drawer-section{ margin-bottom:8px; }
  .drawer-label{ font-size:12px; color:#8A90B4; font-weight:600; margin:22px 0 10px; }
  .drawer nav a{
    display:block; padding:13px 0; font-family:'Unbounded'; font-size:19px;
    border-bottom:1px solid var(--line-dark); color:#fff;
  }
  .drawer-foot{ margin-top:auto; padding-top:24px; font-size:13.5px; color:#9198B8; }
  .drawer-foot a{ color:#DEE1F2; }

  /* ---------- HERO ---------- */
  .hero{
    background:var(--navy);
    color:#fff;
    position:relative;
    overflow:hidden;
    padding:96px 0 80px 0;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:56px;
    align-items:center;
  }
  @media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
  .eyebrow{
    font-size:13px;
    color:#9AA6E8;
    font-weight:600;
    margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  /*.eyebrow::before{
    content:''; width:15px; height:1px; background:#9AA6E8;
  }*/
  .hero h1{
    font-size:clamp(34px,5vw,56px);
    color:#fff;
    max-width:640px;
  }
  .hero-sub{
    margin-top:22px;
    font-size:18px;
    color:#C7CBE0;
    max-width:480px;
  }
  .hero-actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
  .hero-stats{
    display:flex; gap:36px; margin-top:64px;
    padding-top:28px; border-top:1px solid var(--line-dark);
    flex-wrap:wrap;
  }
  .stat b{
    font-family:'Unbounded', sans-serif;
    font-size:28px;
    display:block;
    color:#fff;
  }
  .stat span{ font-size:13px; color:#9198B8; }

  /* viewfinder frame motif — used once, tied to production/camera theme */
  .frame{
    position:relative;
    aspect-ratio:4/5;
    border:1px solid var(--line-dark);
    background:linear-gradient(160deg,#232B4E,#171D38);
    display:flex; align-items:center; justify-content:center;
  }
  .frame::before,.frame::after,
  .frame .fc1,.frame .fc2{
    content:''; position:absolute; width:22px; height:22px;
  }
  .frame::before{ top:14px; left:14px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
  .frame::after{ bottom:14px; right:14px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }
  .frame .fc1{ top:14px; right:14px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); }
  .frame .fc2{ bottom:14px; left:14px; border-bottom:2px solid var(--accent); border-left:2px solid var(--accent); }
  .frame-label{
    font-size:13px; color:#7E88B6; text-align:center; padding:0 40px;
  }
  .frame-rec{
    position:absolute; top:32px; left:32px;
    display:flex; align-items:center; gap:8px;
    font-size:12px; color:#C7CBE0; font-weight:500;
  }
  .frame-rec i{ width:8px; height:8px; border-radius:50%; background:var(--accent); }

  /* ---------- SECTION HEADINGS ---------- */
  section{ padding:96px 0; }
  .sec-head{ max-width:620px; margin-bottom:56px; }
  .sec-head h2{ font-size:clamp(26px,3.4vw,38px); color:var(--ink); }
  .sec-head p{ margin-top:16px; font-size:16px; color:var(--ink-soft); }
  .sec-tag{ font-size:13px; color:var(--accent); font-weight:600; margin-bottom:12px; }

  /* ---------- SERVICES ---------- */
  .services{ background:var(--bg); }
  .service-list{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media(max-width:760px){ .service-list{ grid-template-columns:1fr; } }
  .service-item{
    background:var(--bg);
    padding:38px 34px;
  }
  .service-item h3{
    font-size:19px; font-weight:600; font-family:'Inter',sans-serif;
    margin-bottom:10px;
  }
  .service-item p{ color:var(--ink-soft); font-size:15px; }
  .service-num{
    font-size:13px; color:var(--accent); font-weight:600; margin-bottom:16px;
    font-family:'Inter',sans-serif;
  }

  /* ---------- EQUIPMENT STRIP ---------- */
  .equip{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:96px 0; }
  .equip .sec-head{ margin-bottom:0; }

  .gear-marquee-wrap{
    position:relative; width:100%; overflow:hidden; margin-top:56px;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .gear-track{
    display:flex; gap:28px; width:max-content;
    cursor:grab; user-select:none; touch-action:pan-y;
    will-change:transform;
  }
  .gear-track.is-dragging{ cursor:grabbing; }
  .gear-item{
    flex:0 0 auto; width:190px;
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .gear-frame{
    width:190px; height:190px; background:#fff; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; padding:22px;
  }
  .gear-frame img{ max-width:100%; max-height:100%; object-fit:contain; -webkit-user-drag:none; }
  .gear-cap{ margin-top:14px; }
  .gear-cap b{ display:block; font-size:14px; font-weight:600; }
  .gear-cap span{ font-size:12px; color:var(--ink-soft); }

  /* ---------- PROCESS ---------- */
  .process-steps{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    border-top:1px solid var(--line);
  }
  @media(max-width:900px){ .process-steps{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:560px){ .process-steps{ grid-template-columns:1fr; } }
  .step{
    padding:28px 22px 28px 0;
    border-right:1px solid var(--line);
  }
  .process-steps .step:nth-child(4n){ border-right:none; }
  @media(max-width:900px){ .process-steps .step:nth-child(4n){ border-right:1px solid var(--line); } .process-steps .step:nth-child(2n){ border-right:none; } }
  @media(max-width:560px){ .process-steps .step{ border-right:none; } }
  .step-n{ font-family:'Unbounded'; font-size:14px; color:var(--accent); margin-bottom:14px; }
  .step h4{ font-size:15.5px; font-weight:600; margin-bottom:8px; }
  .step p{ font-size:13.5px; color:var(--ink-soft); }

  /* ---------- PACKAGES ---------- */
  .packages{ background:var(--navy); color:#fff; }
  .packages .sec-head h2{ color:#fff; }
  .packages .sec-head p{ color:#B9BEDA; }
  .packages .sec-tag{ color:#9AA6E8; }
  .pkg-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line-dark);
    border:1px solid var(--line-dark);
  }
  @media(max-width:900px){ .pkg-grid{ grid-template-columns:1fr; } }
  .pkg{
    background:var(--navy);
    padding:40px 32px;
    display:flex; flex-direction:column;
  }
  .pkg.is-featured{ background:var(--navy-2); }
  .pkg-name{ font-size:13px; color:#9AA6E8; font-weight:600; margin-bottom:6px; }
  .pkg-title{ font-family:'Unbounded'; font-size:24px; margin-bottom:18px; }
  .pkg-price{ font-family:'Unbounded'; font-size:32px; margin-bottom:4px; }
  .pkg-price span{ font-family:'Inter'; font-size:14px; color:#9198B8; font-weight:400; }
  .pkg-desc{ font-size:13.5px; color:#B9BEDA; margin-bottom:26px; }
  .pkg-features{ list-style:none; margin-bottom:32px; flex:1; }
  .pkg-features li{
    font-size:14.5px; color:#DEE1F2; padding:10px 0;
    border-top:1px solid var(--line-dark);
    display:flex; gap:10px;
  }
  .pkg-features li::before{ content:'—'; color:var(--accent); flex-shrink:0; }
  .pkg-cta{ text-align:center; }
  .pkg-footnote{
    margin-top:28px; font-size:13px; color:#8A90B4; max-width:640px;
  }

  /* ---------- NICHES ---------- */
  .niches{ background:var(--bg); }
  .niche-clusters{ display:flex; flex-direction:column; gap:28px; margin-bottom:36px; }
  .niche-cluster-label{ font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:12px; }
  .niche-tags{ display:flex; flex-wrap:wrap; gap:10px; }
  .niche-tag{ border:1px solid var(--line); padding:10px 16px; font-size:14px; color:var(--ink); }

  /* ---------- BRIEF FORM ---------- */
  .brief{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .brief-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:1px; background:var(--line); border:1px solid var(--line); }
  @media(max-width:900px){ .brief-grid{ grid-template-columns:1fr; } }
  .brief-intro{ background:var(--panel); padding:44px; display:flex; flex-direction:column; justify-content:center; }
  .brief-intro h3{ font-family:'Unbounded'; font-size:26px; margin-bottom:14px; }
  .brief-intro p{ color:var(--ink-soft); font-size:15px; margin-bottom:10px; }
  .brief-intro ul{ list-style:none; margin-top:18px; }
  .brief-intro li{ font-size:14px; color:var(--ink-soft); padding:8px 0; border-top:1px solid var(--line); display:flex; gap:10px; }
  .brief-intro li::before{ content:'—'; color:var(--accent); flex-shrink:0; }
  .brief-form{ background:var(--bg); padding:44px; }
  .brief-field{ margin-bottom:22px; }
  .brief-field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
  .brief-field input[type="text"], .brief-field input[type="tel"], .brief-field select{
    width:100%; border:1px solid var(--line-dark, var(--ink)); border-color:var(--line);
    background:var(--bg); padding:12px 14px; font-family:'Inter'; font-size:14.5px; color:var(--ink);
    border-radius:2px; appearance:none;
  }
  .brief-field select{ background-image:none; }
  .brief-check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media(max-width:480px){ .brief-check-grid{ grid-template-columns:1fr; } }
  .brief-check{
    display:flex; align-items:center; gap:9px; border:1px solid var(--line);
    padding:11px 12px; font-size:13.5px; cursor:pointer; border-radius:2px;
  }
  .brief-check input{ accent-color:var(--accent); width:16px; height:16px; flex-shrink:0; }
  .brief-radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .brief-radio{
    border:1px solid var(--line); padding:10px 16px; font-size:13.5px; border-radius:2px;
    cursor:pointer; display:flex; align-items:center; gap:8px;
  }
  .brief-radio input{ accent-color:var(--accent); }
  .brief-submit{ width:100%; justify-content:center; margin-top:8px; }
  .brief-note{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; text-align:center; }
  .contact{ background:var(--bg); }
  .contact-grid{
    display:grid; grid-template-columns:1.1fr .9fr; gap:56px;
  }
  @media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact h2{ font-size:clamp(28px,4vw,42px); max-width:480px; }
  .contact-sub{ color:var(--ink-soft); margin-top:18px; max-width:440px; font-size:16px; }
  .contact-actions{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
  .contact-info{
    border:1px solid var(--line); padding:32px;
  }
  .contact-row{
    display:flex; justify-content:space-between; padding:16px 0;
    border-bottom:1px solid var(--line);
    font-size:15px;
  }
  .contact-row:last-child{ border-bottom:none; }
  .contact-row span:first-child{ color:var(--ink-soft); }
  .contact-row a:hover{ color:var(--accent); }

  footer{
    border-top:1px solid var(--line);
    padding:32px 0;
  }
  .footer-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:13.5px; color:var(--ink-soft); flex-wrap:wrap; gap:12px;
  }

  /* ---------- BUILDER (конструктор пакета) ---------- */
  .builder{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .builder-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
  @media(max-width:900px){ .builder-grid{ grid-template-columns:1fr; } }
  .builder-options{ background:var(--bg); }
  .builder-base{
    padding:28px 30px; border-bottom:1px solid var(--line);
    background:var(--bg);
  }
  .builder-base-tag{ font-size:12px; color:var(--accent); font-weight:600; margin-bottom:8px; }
  .builder-base h3{ font-family:'Inter'; font-size:18px; font-weight:600; margin-bottom:6px; }
  .builder-base p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:10px; }
  .builder-base .price{ font-family:'Unbounded'; font-size:20px; }
  .builder-row{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:22px 30px; border-bottom:1px solid var(--line); background:var(--bg);
  }
  .builder-row:last-child{ border-bottom:none; }
  .builder-row-copy h4{ font-size:15.5px; font-weight:600; margin-bottom:4px; }
  .builder-row-copy p{ font-size:13px; color:var(--ink-soft); }
  .stepper{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .stepper button{
    width:30px; height:30px; border:1px solid var(--ink); background:var(--bg);
    font-size:16px; cursor:pointer; border-radius:2px; line-height:1;
  }
  .stepper button:hover{ background:var(--ink); color:#fff; }
  .stepper .count{ min-width:16px; text-align:center; font-weight:600; font-size:14.5px; }
  .toggle-pill{
    border:1px solid var(--ink); padding:9px 18px; font-size:13.5px; font-weight:600;
    cursor:pointer; border-radius:2px; background:var(--bg); flex-shrink:0;
    transition:background .15s ease, color .15s ease;
  }
  .toggle-pill.is-on{ background:var(--ink); color:#fff; }
  .builder-summary{
    background:var(--navy); color:#fff; padding:32px 30px;
    display:flex; flex-direction:column; position:sticky; top:96px; align-self:start;
  }
  .builder-summary-tag{ font-size:12px; color:#9AA6E8; font-weight:600; margin-bottom:14px; }
  .builder-list{ list-style:none; margin-bottom:18px; flex:1; min-height:60px; }
  .builder-list li{
    font-size:14px; color:#DEE1F2; padding:9px 0; border-top:1px solid var(--line-dark);
    display:flex; justify-content:space-between; gap:10px;
  }
  .builder-list .empty{ color:#7E88B6; border-top:none; padding-top:0; }
  .builder-total{
    display:flex; justify-content:space-between; align-items:baseline;
    padding-top:16px; border-top:1px solid var(--line-dark); margin-bottom:22px;
  }
  .builder-total b{ font-family:'Unbounded'; font-size:26px; }
  .builder-total span{ font-size:13px; color:#9198B8; }

  /* ---------- GAME (мини-игра) ---------- */
  .game-wrap{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  }
  @media(max-width:900px){ .game-wrap{ grid-template-columns:1fr; } }
  .game-stage{
    background:var(--navy); border:1px solid var(--line-dark); position:relative;
    aspect-ratio:4/5; overflow:hidden; touch-action:none;
  }
  .game-stage canvas{ width:100%; height:100%; display:block; }
  .game-hud{
    position:absolute; top:16px; left:16px; right:16px;
    display:flex; justify-content:space-between; font-size:13px; color:#DEE1F2;
    font-weight:600; pointer-events:none;
  }
  .game-hud span b{ display:block; font-family:'Unbounded'; font-size:17px; color:#fff; }
  .game-overlay{
    position:absolute; inset:0; background:rgba(18,20,32,.82);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    text-align:center; padding:0 30px;
  }
  .game-overlay.is-hidden{ display:none; }
  .game-overlay h4{ font-family:'Unbounded'; color:#fff; font-size:19px; }
  .game-overlay p{ color:#B9BEDA; font-size:13.5px; max-width:260px; }

  /* ---------- FLOATING WHATSAPP BUTTON ---------- */
  .wa-float{
    position:fixed;
    right:20px;
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    z-index:55;
    width:56px; height:56px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 22px rgba(20,22,30,.28);
    transition:transform .15s ease;
  }
  .wa-float:hover{ transform:scale(1.07); }
  .wa-float svg{ width:56px; height:56px; display:block; }
  @media(max-width:480px){
    .wa-float{ width:52px; height:52px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
    .wa-float svg{ width:52px; height:52px; }
  }
  /* ---------- ABOUT READ MORE ---------- */
  .about-more-inline{ display:none; }
  .about-more-block{ display:none; }
  .about-ellipsis{ display:inline; }
  .about-copy.is-expanded .about-more-inline{ display:inline; }
  .about-copy.is-expanded .about-more-block{ display:block; }
  .about-copy.is-expanded .about-ellipsis{ display:none; }
  .about-toggle{
    margin-top:20px; background:none; border:none; padding:0;
    font-family:'Inter', sans-serif; font-size:15px; font-weight:600;
    color:var(--accent); cursor:pointer; text-decoration:underline;
  }