:root{
    --base:#0A0A0F;
    --panel:#100E18;
    --panel-2:#15121F;
    --line:rgba(255,255,255,0.08);
    --line-strong:rgba(255,255,255,0.14);
    --purple:#7C3AED;
    --purple-deep:#4C1D95;
    --orange:#FF6A1A;
    --orange-soft:#FFB088;
    --white:#FFFFFF;
    --muted:#9D98A8;
    --muted-2:#6E6A78;
    --maxw:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  body{
    background:var(--base);
    color:var(--white);
    font-family:'Inter',system-ui,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--orange);color:#1a0a00}

  /* ---- ambient purple glow field ---- */
  .glow{position:fixed;inset:0;pointer-events:none;z-index:0}
  .glow::before{
    content:"";position:absolute;top:-15%;left:50%;transform:translateX(-50%);
    width:900px;height:900px;border-radius:50%;
    background:radial-gradient(circle, rgba(124,58,237,0.22) 0%, rgba(76,29,149,0.10) 38%, transparent 68%);
    filter:blur(20px);
  }
  .glow::after{
    content:"";position:absolute;bottom:-25%;right:-10%;
    width:700px;height:700px;border-radius:50%;
    background:radial-gradient(circle, rgba(255,106,26,0.10) 0%, transparent 65%);
    filter:blur(30px);
  }

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}

  /* ---- nav ---- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    backdrop-filter:blur(14px);
    background:linear-gradient(to bottom, rgba(10,10,15,0.85), rgba(10,10,15,0.35));
    border-bottom:1px solid transparent;transition:border-color .3s;
  }
  nav.scrolled{border-bottom:1px solid var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .brand{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:600;font-size:15px;letter-spacing:-0.01em}
  .brand img{width:26px;height:26px;opacity:.95}
  .brand span b{color:var(--orange);font-weight:600}
  .nav-links{display:flex;gap:30px;align-items:center;font-size:14px;color:var(--muted)}
  .nav-links a{transition:color .2s}
  .nav-links a:hover{color:var(--white)}
  .nav-cta{
    font-family:'Space Grotesk';font-size:13.5px;font-weight:600;color:var(--white);
    border:1px solid rgba(255,106,26,0.55);padding:8px 16px;border-radius:8px;
    background:rgba(255,106,26,0.12);transition:all .2s;
  }
  .nav-cta:hover{border-color:var(--orange);background:rgba(255,106,26,0.24);transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,106,26,0.22)}

  /* hamburger — hidden on desktop, shown on mobile */
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:10px;margin-left:6px;background:none;border:none;cursor:pointer}
  .nav-burger span{display:block;height:2px;width:100%;background:var(--white);border-radius:2px;transition:transform .3s,opacity .2s}
  #nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #nav.menu-open .nav-burger span:nth-child(2){opacity:0}
  #nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  @media(max-width:760px){
    .nav-burger{display:flex}
    .brand{margin-right:auto}
    .nav-cta{font-size:12.5px;padding:7px 14px}
    /* nav links become a slide-down panel toggled by the hamburger */
    .nav-links{
      display:flex;flex-direction:column;gap:0;
      position:absolute;top:100%;left:0;right:0;
      background:rgba(10,10,15,0.98);backdrop-filter:blur(14px);
      border-bottom:1px solid var(--line);padding:4px 0;
      max-height:0;overflow:hidden;opacity:0;pointer-events:none;
      transition:max-height .32s ease,opacity .25s ease;
    }
    #nav.menu-open .nav-links{max-height:320px;opacity:1;pointer-events:auto}
    .nav-links a{padding:15px 28px;font-size:16px;color:var(--white);border-top:1px solid var(--line)}
    .nav-links a:first-child{border-top:none}
    .nav-links a:hover{background:rgba(255,255,255,0.04)}
  }

  /* ============================================================
     HERO — rotating headline band, full whiteboard photo, badge,
     shared subhead + fixed CTA. Flow layout (no fragile overlays):
     the headline sits on a dark ground directly above the photo,
     whose top/bottom fade into that same dark so it reads as one piece.
     ============================================================ */
  .hero{position:relative;padding-top:68px}   /* clear the fixed nav */

  /* rotating headline band */
  .hero-head{padding:40px 24px 28px;text-align:center;position:relative;z-index:2}
  .hero-rotator{position:relative;width:100%;max-width:1080px;margin:0 auto;opacity:0;animation:rise .8s .1s forwards}
  .hero-h1{
    position:relative;width:100%;
    font-family:'Space Grotesk';font-weight:700;letter-spacing:-0.025em;line-height:1.08;
    font-size:clamp(30px,5.8vw,66px);   /* scales with viewport width */
    min-height:2.4em;   /* per-breakpoint value set in RESPONSIVE LAYOUT below */
    margin:0;
  }
  .hero-slide{
    position:absolute;left:0;right:0;top:0;color:var(--white);
    text-shadow:0 2px 22px rgba(10,10,15,0.72), 0 1px 3px rgba(10,10,15,0.6);
    opacity:0;transform:translateY(8px);
    transition:opacity .6s ease-out, transform .6s ease-out;pointer-events:none;
  }
  .hero-slide.active{opacity:1;transform:translateY(0);pointer-events:auto}
  .hero-slide.exiting{opacity:0;transform:translateY(-8px)}
  .hero-accent{color:var(--orange)}

  /* the photograph */
  .hero-stage{position:relative;width:100%;height:clamp(360px,50vw,640px);overflow:hidden}
  .hero-photo{
    position:absolute;inset:0;
    background:url("../assets/hero-whiteboard.jpg") center center / cover no-repeat;
    --hero-photo-overlay:0.2;   /* ADJUST ME — flat dark overlay over the hero photo: 0 = none, 1 = fully black */
  }
  /* adjustable flat dark overlay (knob: --hero-photo-overlay above) — sits under the gradient blend below */
  .hero-photo::before{content:"";position:absolute;inset:0;background:var(--base);opacity:var(--hero-photo-overlay);pointer-events:none}
  /* the photo already fades to black at its edges (vignette), so it blends into the
     dark page on its own. A gentle top gradient just steadies the headline over it,
     and a bottom fade blends into the subhead area below. The mid photo stays clear. */
  .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,
    rgba(10,10,15,0.55) 0%, rgba(10,10,15,0.12) 22%, rgba(10,10,15,0) 44%, rgba(10,10,15,0) 72%, rgba(10,10,15,0.9) 100%)}
  /* "FileMaker · Certified Developers" badge, bottom-left over the photo */
  .hero-badge{position:absolute;left:clamp(20px,4vw,72px);bottom:clamp(18px,3vw,44px);z-index:2;display:flex;align-items:center;gap:clamp(12px,1.4vw,20px)}
  .hero-badge-folder{width:clamp(54px,5.8vw,88px);height:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
  .hero-badge-lock{display:flex;flex-direction:column;line-height:1.0;text-align:left}
  .hero-badge-lock b{font-family:'Space Grotesk';font-weight:700;font-size:clamp(26px,3.5vw,50px);color:var(--white);letter-spacing:-0.015em}
  .hero-badge-lock i{font-style:normal;font-family:'Space Grotesk';font-weight:600;font-size:clamp(17px,2.2vw,32px);color:var(--purple);margin-top:2px}

  /* shared subhead + fixed CTA, on the dark ground below the photo */
  .hero-sub{max-width:900px;margin:26px auto 0;padding:0 24px;text-align:center;font-size:clamp(15px,1.5vw,18px);color:var(--white);font-weight:300;line-height:1.55}
  .hero-sub b{color:var(--white);font-weight:500}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px;padding:0 24px}

  /* spinnable 3D folder stage (now lives in the About section) */
  .stage{width:260px;height:260px;margin:0 auto 14px;cursor:grab;touch-action:pan-y;user-select:none;position:relative}
  .stage:active{cursor:grabbing}
  .stage .halo{position:absolute;inset:-30px;border-radius:50%;z-index:-1;background:radial-gradient(circle, rgba(255,61,166,0.30), transparent 62%);filter:blur(22px)}
  #cube{width:260px;height:260px;display:block}
  .cube-fallback{position:absolute;inset:0;width:260px;height:260px;object-fit:contain;filter:drop-shadow(0 8px 30px rgba(255,61,166,0.4));display:none;animation:floaty 6s ease-in-out infinite}
  .cube-fallback.show{display:block}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
  .spin-hint{font-family:'Space Grotesk';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);transition:opacity .4s}
  .spin-hint.gone{opacity:0 !important}
  /* brand-word / values line (Innovation · Information · Integration) */
  .brandwords{display:flex;gap:12px;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:600;font-size:14px;letter-spacing:.04em}
  .brandwords .dotsep{color:var(--muted-2);font-size:12px}
  .brandwords .word{transition:color .5s,opacity .5s;color:var(--muted-2);opacity:.55}
  .brandwords .word.active{opacity:1}
  .brandwords .word.w0.active{color:var(--white)}
  .brandwords .word.w1.active{color:var(--orange)}
  .brandwords .word.w2.active{color:var(--orange-soft)}

  .btn-primary{
    font-family:'Space Grotesk';font-weight:600;font-size:18px;color:#1a0a00;
    background:var(--orange);padding:14px 26px;border-radius:11px;
    box-shadow:0 0 0 1px rgba(255,106,26,.5), 0 8px 30px rgba(255,106,26,0.25);
    transition:transform .2s, box-shadow .2s;display:inline-flex;align-items:center;gap:9px;
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,106,26,.7), 0 12px 40px rgba(255,106,26,0.4)}
  .btn-primary svg{width:16px;height:16px}
  .btn-ghost{
    font-family:'Space Grotesk';font-weight:500;font-size:18px;color:var(--white);
    border:1px solid var(--line-strong);padding:14px 24px;border-radius:11px;transition:all .2s;
  }
  .btn-ghost:hover{border-color:var(--muted);background:rgba(255,255,255,0.03)}

  /* ---- sections ---- */
  section{padding:65px 0;position:relative;z-index:2}
  .sec-eyebrow{font-family:'Space Grotesk';font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
  .sec-title{font-family:'Space Grotesk';font-weight:600;font-size:clamp(28px,4.4vw,42px);letter-spacing:-0.02em;line-height:1.15;margin-bottom:18px;max-width:680px}
  .sec-lead{font-size:18px;color:var(--muted);max-width:620px;margin-bottom:54px}
  .sec-lead b{color:var(--white);font-weight:500}

  /* story / hook band */
  .hook{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(124,58,237,0.05),transparent)}
  .hook-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
  .hook blockquote{
    font-family:'Space Grotesk';font-weight:500;font-size:clamp(22px,3.2vw,30px);line-height:1.35;letter-spacing:-0.01em;
  }
  .hook blockquote .hl{color:var(--orange)}
  .hook .story p{color:var(--muted);font-size:16.5px;margin-bottom:18px}
  .hook .story p b{color:var(--white);font-weight:500}
  @media(max-width:820px){.hook-grid{grid-template-columns:1fr;gap:34px}}

  /* services list */
  .svc{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
  .svc-item{padding:30px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s}
  .svc-item:nth-child(2n){border-right:none}
  .svc-item:hover{background:var(--panel-2)}
  .svc-item .ic{width:34px;height:34px;border-radius:9px;background:rgba(255,106,26,0.12);border:1px solid rgba(255,106,26,0.25);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .svc-item .ic svg{width:17px;height:17px;stroke:var(--orange)}
  .svc-item h4{font-family:'Space Grotesk';font-weight:600;font-size:17px;margin-bottom:8px}
  .svc-item p{color:var(--muted);font-size:14.5px}
  @media(max-width:680px){.svc{grid-template-columns:1fr}.svc-item{border-right:none}}

  /* featured Private Cloud Hosting card (Task 4) */
  .svc-feature{
    display:grid;grid-template-columns:1.05fr 0.95fr;gap:0;margin-top:18px;
    border:1px solid var(--line);border-radius:16px;overflow:hidden;
    background:linear-gradient(180deg,rgba(124,58,237,0.08),var(--panel));
  }
  .svc-feature-body{padding:38px 36px;display:flex;flex-direction:column;justify-content:center}
  .svc-feature-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:'Space Grotesk';font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--orange);margin-bottom:16px;
  }
  .svc-feature-eyebrow .pill{
    font-size:10.5px;font-weight:700;letter-spacing:.1em;color:#1a0a00;background:var(--orange);
    border-radius:100px;padding:3px 10px;
  }
  .svc-feature-body h3{font-family:'Space Grotesk';font-weight:600;font-size:clamp(20px,2.6vw,26px);letter-spacing:-0.01em;margin-bottom:14px}
  .svc-feature-lead{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:20px;max-width:440px}
  .svc-feature-list{list-style:none;display:flex;flex-direction:column;gap:11px}
  .svc-feature-list li{position:relative;padding-left:28px;color:var(--muted);font-size:15px}
  .svc-feature-list li::before{
    content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
    background:rgba(255,106,26,0.12);border:1px solid rgba(255,106,26,0.35);
  }
  .svc-feature-list li::after{
    content:"";position:absolute;left:6px;top:8px;width:7px;height:3.5px;
    border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg);
  }
  /* transparent cloud PNG floats on the card's own gradient (no black box) */
  .svc-feature-media{position:relative;min-height:260px;display:flex;align-items:center;justify-content:center;padding:12px}
  .svc-feature-media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
  @media(max-width:760px){
    .svc-feature{grid-template-columns:1fr}
    .svc-feature-media{min-height:200px;order:-1}
    .svc-feature-body{padding:30px 26px}
  }

  /* CTA */
  .cta-band{text-align:center;border:1px solid var(--line);border-radius:24px;padding:64px 32px;position:relative;overflow:hidden;background:radial-gradient(ellipse at top, rgba(124,58,237,0.16), var(--panel) 70%)}
  .cta-band h2{font-family:'Space Grotesk';font-weight:700;font-size:clamp(28px,4.6vw,44px);letter-spacing:-0.02em;margin-bottom:16px}
  .cta-band h2 .hl{color:var(--orange)}
  .cta-band p{color:var(--muted);font-size:17px;max-width:480px;margin:0 auto 32px}
  .cta-meta{margin-top:20px;font-size:13.5px;color:var(--muted-2);display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
  .cta-meta span{display:inline-flex;align-items:center;gap:7px}
  .cta-meta .d{width:5px;height:5px;border-radius:50%;background:var(--orange)}

  /* footer */
  footer{border-top:1px solid var(--line);padding:48px 0 60px;position:relative;z-index:2}
  .foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
  .foot-brand{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:600}
  .foot-brand img{width:24px;height:24px;opacity:.9}
  footer .muted{color:var(--muted-2);font-size:13.5px}
  .foot-links{display:flex;gap:24px;font-size:14px;color:var(--muted)}
  .foot-links a{transition:color .2s}
  .foot-links a:hover{color:var(--white)}
  @media(max-width:680px){.foot-links{display:none}}

  /* credibility strip */
  .creds{padding:0;position:relative;z-index:2}
  .creds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(124,58,237,0.06),var(--panel));overflow:hidden}
  .cred{padding:30px 26px;text-align:center;border-right:1px solid var(--line)}
  .cred:last-child{border-right:none}
  .cred-num{font-family:'Space Grotesk';font-weight:700;font-size:clamp(26px,3.4vw,36px);letter-spacing:-0.02em;color:var(--white);line-height:1;margin-bottom:10px}
  .cred-num span{color:var(--orange)}
  .cred:nth-child(2) .cred-num,.cred:nth-child(4) .cred-num{color:var(--orange);font-size:clamp(20px,2.6vw,26px)}
  .cred-label{font-size:13.5px;color:var(--muted);letter-spacing:.01em}
  .industries{position:relative;height:2.3em;font-size:clamp(17px,2.2vw,22px)!important;color:var(--white);perspective:600px}
  .industries .ind{
    position:absolute;left:0;right:0;top:0;
    line-height:1.12;font-weight:700;color:var(--white);
    opacity:0;transform:rotateY(90deg);transform-origin:right center;
    transition:opacity .5s,transform .5s ease;backface-visibility:hidden;
  }
  .industries .ind.active{opacity:1;transform:rotateY(0deg)}
  .industries .ind.exiting{opacity:0;transform:rotateY(-90deg)}
  @media(max-width:780px){.creds-grid{grid-template-columns:repeat(2,1fr)}.cred:nth-child(2){border-right:none}.cred:nth-child(1),.cred:nth-child(2){border-bottom:1px solid var(--line)}}

  /* from chaos → to progress (image with overlaid captions + checklist).
     Desktop uses the wide side-by-side photo; phones swap to the vertical
     stacked photo (via <picture>) and the overlays re-flow to match it. */
  .chaos{position:relative;max-width:1120px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000}
  .chaos-img{display:block;width:100%;height:auto}
  /* dark scrim along the bottom so the checklist strip reads clearly over the photo */
  .chaos::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top,rgba(8,8,12,0.95) 0%,rgba(8,8,12,0.72) 44%,transparent 100%);pointer-events:none;z-index:1}
  .chaos-cap{position:absolute;top:5%;text-align:center;line-height:1.2;z-index:2}
  .chaos-cap .t{display:block;font-family:'Space Grotesk';font-weight:600;font-size:clamp(16px,2vw,28px);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 12px rgba(10,10,15,.7)}
  .chaos-cap .s{display:block;margin-top:4px;font-size:clamp(10px,1vw,13px);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-shadow:0 1px 8px rgba(10,10,15,.7)}
  .chaos-from{left:4%;right:56%}
  .chaos-from .t{color:var(--white)}
  .chaos-to{left:56%;right:4%}
  .chaos-to .t{color:var(--orange)}
  /* desktop: horizontal checklist strip along the bottom (over the scrim) */
  .chaos-list{position:absolute;left:4%;right:4%;bottom:6%;z-index:2;list-style:none;display:flex;flex-direction:row;justify-content:space-between;gap:clamp(14px,2.4vw,40px)}
  .chaos-list li{flex:1 1 0;display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:600;font-size:clamp(11px,1.15vw,15px);letter-spacing:.06em;text-transform:uppercase;color:var(--white);line-height:1.2;text-shadow:0 2px 10px rgba(10,10,15,.7)}
  .chaos-list .ci{flex:none;display:inline-flex;align-items:center;justify-content:center;width:clamp(20px,2vw,26px);height:clamp(20px,2vw,26px)}
  .chaos-list .ci svg{width:100%;height:100%;display:block}
  .chaos-list li:nth-child(odd) .ci{color:var(--orange)}
  .chaos-list li:nth-child(even) .ci{color:var(--purple)}

  /* phones — vertical image has the FROM CHAOS / TO PROGRESS titles baked in,
     so the HTML caption overlays are hidden; the checklist flows BELOW the image */
  @media(max-width:767px){
    .chaos::after{display:none}
    .chaos-cap{display:none}
    /* full-bleed: break out of the .wrap 28px padding to span the whole viewport */
    .chaos{max-width:none;width:calc(100% + 56px);margin-left:-28px;margin-right:-28px;border-radius:0;border:none}
    .chaos-list{position:static;flex-direction:column;transform:none;max-width:none;gap:16px;padding:24px 28px 28px}
    .chaos-list li{flex:0 1 auto;font-size:14px;max-width:none;gap:13px;text-shadow:none}
    .chaos-list .ci{width:26px;height:26px}
  }
  /* tighten the gap between the chaos section and Services on desktop */
  @media(min-width:768px){
    #problem{padding-bottom:52px}
    #services{padding-top:60px}
  }

  /* about section — copy on the left, draggable folder on the right */
  .about-sec{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,106,26,0.04),transparent);overflow:hidden}
  .about-grid{display:grid;grid-template-columns:1fr 0.9fr;gap:56px;align-items:center}
  .about-body{color:var(--muted);font-size:16px;line-height:1.7}
  .about-lead-strong{color:var(--white);font-weight:500;font-size:18px;margin-bottom:14px}
  .about-visual{display:flex;flex-direction:column;align-items:center;text-align:center}
  .about-visual .folder-stage{display:flex;align-items:center;justify-content:center;min-height:300px}
  .about-sec .stage{margin:0 auto 20px}
  .about-sec .brandwords{margin:0 0 8px}
  .about-sec .spin-hint{margin:0}
  @media(max-width:820px){
    .about-grid{grid-template-columns:1fr;gap:24px}
    .about-visual .folder-stage{min-height:280px}
  }

  /* the difference — intro + success-stories image, then the numbered grid */
  .diff-sec{border-top:1px solid var(--line)}
  .diff-head{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;margin-bottom:54px}
  .diff-intro .sec-lead{margin-top:18px}
  .diff-media img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line)}
  @media(max-width:820px){.diff-head{grid-template-columns:1fr;gap:28px;margin-bottom:36px}}
  .diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .diff-item{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:28px 26px;position:relative;transition:border-color .3s,transform .3s}
  .diff-item:hover{border-color:var(--line-strong);transform:translateY(-3px)}
  .diff-num{font-family:'Space Grotesk';font-size:13px;font-weight:600;color:var(--orange);letter-spacing:.1em;margin-bottom:14px}
  .diff-item h4{font-family:'Space Grotesk';font-weight:600;font-size:18px;margin-bottom:9px;letter-spacing:-0.01em}
  .diff-item p{color:var(--muted);font-size:15px}
  @media(max-width:680px){.diff-grid{grid-template-columns:1fr}}

  /* contact form */
  .contact-sec{border-top:1px solid var(--line)}
  .contact-form{max-width:640px;margin-top:36px}
  .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .contact-form input,.contact-form textarea{
    width:100%;font-family:'Inter',system-ui,sans-serif;font-size:15px;color:var(--white);
    background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 15px;
    transition:border-color .2s,background .2s;
  }
  .contact-form textarea{resize:vertical;min-height:130px;margin-bottom:16px;line-height:1.5}
  .contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted-2)}
  .contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--orange);background:var(--panel-2)}
  .cf-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
  .cf-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .contact-form button[disabled]{opacity:.6;cursor:default}
  .cf-status{font-size:14px;color:var(--muted)}
  .cf-status.ok{color:var(--orange-soft)}
  .cf-status.err{color:#ff6b6b}
  @media(max-width:560px){.cf-row{grid-template-columns:1fr}}

  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
  .reveal.in{opacity:1;transform:translateY(0)}

  @media(prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
    .reveal{opacity:1;transform:none}
  }
  :focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}


  /* ============================================================
     RESPONSIVE LAYOUT  —  edit hero spacing per device here
     ------------------------------------------------------------
     Three blocks, one per screen size. Portrait phones live in
     MOBILE and portrait tablets in TABLET — there are no separate
     landscape/portrait rules, on purpose, to keep this simple.

     Hero headline behaviour:
       • ALL breakpoints: the headline sits in a band ABOVE the photo (flow layout),
         so we reserve min-height for the TALLEST slide — otherwise a taller slide
         would push the photo (and the page) down on rotation. The reserve also keeps
         the photo sitting comfortably below the headline instead of touching it.
       .hero-sub → on desktop the subhead is UPPERCASE via CSS only (stored JSON
                   text stays sentence case for mobile + screen readers).
     ============================================================ */

  /* ---------- DESKTOP + TABLET (≥768px): photo blends up BEHIND the headline ----------
     The photo (with its black vignette) fills the hero from behind the nav; the headline
     is absolutely positioned over its dark top so the image reads as one piece with the
     header. Slides are absolute, so a taller slide grows down into the photo — no jump. */
  @media (min-width:768px){
    .hero      { padding-top:0; --hero-stage-h:clamp(600px,68vw,940px); }
    .hero-head { position:absolute; top:0; left:0; right:0; z-index:3; padding:104px 24px 0; }
    .hero-h1   { min-height:0; }
    .hero-stage{ height:var(--hero-stage-h); }
    .hero-photo{ background-position:center top; }
    .hero-sub  { text-transform:uppercase; letter-spacing:.05em; font-weight:300; }
    /* CTA overlaid at the photo's bottom-right (mirrors the badge on the left); the
       subhead then flows just below the photo. Anchored to the stage height variable. */
    .hero-actions{ position:absolute; z-index:2; left:auto; right:clamp(24px,4vw,72px); top:calc(var(--hero-stage-h) - 72px); margin:0; padding:0; justify-content:flex-end; }
  }

  /* ---------- DESKTOP spacing tweaks ---------- */
  @media (min-width:768px){
    .hero-photo{ margin-top:125px; }
    .creds     { padding-top:30px; }
    section    { padding:65px 0; }
    .hero-badge{ bottom:clamp(18px,0vw,46px); }
    .hero-sub  { max-width:90%; }
  }

  /* ---------- MOBILE (≤767px): headline band above the photo ---------- */
  @media (max-width:767px){
    .hero      { padding-top:60px; }
    .hero-head { padding:28px 20px 20px; }
    .hero-h1   { min-height:3.9em; }    /* narrow phones wrap the longest slide to ~3 lines */
    .hero-stage{ height:clamp(430px,120vw,540px); margin-top:-78px; }

    /* centred + larger badge on phones */
    .hero-badge{ left:0; right:0; bottom:clamp(24px,7vw,40px); justify-content:center; gap:15px; }
    .hero-badge-folder{ width:74px; }
    .hero-badge-lock b{ font-size:37px; }
    .hero-badge-lock i{ font-size:23px; }
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-actions .btn-primary,.hero-actions .btn-ghost{ justify-content:center; text-align:center; }
    /* seamless mesh: drop the purple top-glow so the headline band is pure page colour,
       and fade the photo's top edge to that exact colour so band → photo is invisible. */
    .glow::before{ display:none; }
    .hero-photo{ --hero-photo-overlay: 0 !important; }
    .hero-photo::after{ background:linear-gradient(to bottom,
      rgba(10,10,15,1) 0%, rgba(10,10,15,0) 16%, rgba(10,10,15,0) 70%, rgba(10,10,15,0.94) 100%); }
  }

  /* ---------- ULTRA-NARROW safety (≤340px) ---------- */
  @media (max-width:340px){
    .hero-h1, .hero-slide{ font-size:26px; }
    .hero-h1{ min-height:4.4em; }
  }