/* T-Star Pro — licensed brand typeface (Binnenland / Mika Mischler)
   Official web font kit from the Higge brand assets (Transfonter package).
   Weight mapping per kit: Light=100, Regular=300, Medium=500, Bold=700, Heavy=900.
   Right Grotesk — display headings (Displaay foundry, licensed via Higge assets):
   Spatial Black (900) for H1/H2, Medium (500) as a fallback/complement.
   Weights below are the font-internal classes; 900 renders the Black cut. */
@font-face{
  font-family:'Right Grotesk';
  src:url('fonts/RightGrotesk-CompactBlack.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Right Grotesk';
  src:url('fonts/RightGrotesk-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Right Grotesk';
  src:url('fonts/RightGrotesk-WideMedium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0041-005A,U+0061-007A;
}
@import url('fonts/stylesheet.css');

:root{
    --bg:#f7f7f5;            /* page base — warm light gray */
    --bg-alt:#efeeea;
    --ink:#0b0b0c;           /* primary text — near-black, not pure black */
    --muted:#5c5b57;         /* secondary text */
    --muted2:#8a8985;
    --navy:#0E2A47;          /* Higge brand */
    --navy-2:#173659;
    --orange:#F4551E;        /* Higge accent */
    --orange-2:#ff6d3c;
    --white:#fff;
    --line:#dcdad3;
    --line-2:#2a2a28;
    --sans:'T-Star Pro',Helvetica,Arial,sans-serif;   /* licensed brand typeface */
    --display:'Right Grotesk','T-Star Pro',Helvetica,Arial,sans-serif; /* H1/H2 — Right Grotesk Spatial Black */

    /* 8pt-based spacing scale */
    --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);font-weight:500;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;min-width:0}
  button{font-family:inherit}

  ::selection{background:var(--orange);color:#fff}

  /* ---------- SCROLL PROGRESS ---------- */
  .progress{position:fixed;top:0;left:0;height:3px;background:var(--orange);z-index:200;width:0%;transition:width .1s linear}

  /* ---------- TOP BAR ---------- */
  .bar{background:var(--navy);color:#fff;text-align:center;font-size:13px;padding:11px 20px;letter-spacing:.01em}
  .bar b{color:#ffb493;font-weight:700}
  .bar a{text-decoration:underline;text-underline-offset:2px}

  /* ---------- NAV ---------- */
  .nav{position:sticky;top:0;z-index:100;background:rgba(247,247,245,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:58px;max-width:885px;margin-inline:auto}
  .logo{display:inline-flex;align-items:center;font-size:0;line-height:0}
  .nav-links{display:flex;align-items:center;gap:36px}
  .nav-links a:not(.nav-cta){font-size:14.5px;font-weight:500;color:var(--ink);transition:color .15s;position:relative}
  .nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--orange);transform:scaleX(0);transition:transform .2s}
  .nav-links a:not(.nav-cta):hover,.nav-links a.active:not(.nav-cta){color:var(--orange)}
  .nav-links a:not(.nav-cta):hover::after,.nav-links a.active:not(.nav-cta)::after{transform:scaleX(1)}
  .nav-cta{background:var(--ink);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:700;transition:background .15s,transform .15s}
  .nav-cta:hover,.nav-cta.active{background:var(--orange);transform:translateY(-1px)}
  .hamb{display:none;background:none;border:none;font-size:24px;color:var(--ink);cursor:pointer;line-height:1;padding:10px 6px;min-width:44px;min-height:44px;align-items:center;justify-content:center}

  /* ---------- BUTTONS ---------- */
  .btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:16px 30px;font-size:15px;font-weight:700;border-radius:10px;transition:background .18s,transform .18s;white-space:nowrap;border:none;cursor:pointer}
  .btn:hover{background:var(--orange);transform:translateY(-1px)}
  .btn.outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
  .btn.outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .btn.block{width:100%;justify-content:center}
  .arrow{transition:transform .18s;display:inline-block}
  .btn:hover .arrow{transform:translateX(4px)}

  /* ---------- REVEAL ANIMATION ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:translateY(0)}
  .reveal-stagger.in > *{transition-delay:calc(var(--i, 0) * 70ms)}

  /* ---------- PHONE MOCKUP (Shopify seller dashboard) ---------- */
  .phone{width:282px;margin:0 auto;position:relative}
  .phone::before,.phone::after{content:"";position:absolute;width:110px;height:90px;pointer-events:none;z-index:-1;filter:blur(10px)}
  .phone::before{left:-42px;bottom:-34px;background:radial-gradient(ellipse at center,rgba(11,11,12,.20),transparent 70%)}
  .phone::after{right:-42px;bottom:-34px;background:radial-gradient(ellipse at center,rgba(11,11,12,.20),transparent 70%)}
  .phone-frame{position:relative;width:282px;height:586px;background:#111214;border-radius:46px;padding:12px;box-shadow:inset 0 0 0 2px #000;animation:phoneFloat 5s ease-in-out infinite}
  @keyframes phoneFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
  }
  @media (prefers-reduced-motion:reduce){
    .phone-frame{animation:none}
  }
  .phone-notch{position:absolute;top:26px;left:50%;transform:translateX(-50%);width:79px;height:21px;background:#111214;border-radius:11px;z-index:5}
  .phone-side{position:absolute;right:-2px;top:150px;width:3px;height:34px;background:#3a3b3e;border-radius:2px}
  .phone-side.right{right:-3px}
  .phone-side.left{right:auto;left:-3px;width:3px;border-radius:2px}
  .phone-side.left.mute{top:120px;height:22px}
  .phone-side.left.vol-up{top:170px;height:48px}
  .phone-side.left.vol-down{top:226px;height:48px}

  /* Floating content cards — Grassfeld-style: bigger, tilted, drifting */
  .fc-card{position:absolute;z-index:8;pointer-events:none;background:rgba(255,255,255,.96);border:1px solid #ececef;border-radius:16px;box-shadow:0 18px 40px -14px rgba(11,11,12,.3),0 3px 8px rgba(11,11,12,.06);backdrop-filter:blur(6px);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif}
  .fc-left{top:88px;left:-196px;width:172px;padding:13px 14px;animation:fcDriftA 7s ease-in-out infinite}
  .fc-right{top:300px;right:-184px;width:158px;padding:12px 13px;animation:fcDriftB 7s ease-in-out infinite;animation-delay:1.2s}
  .fc-right2{bottom:64px;right:-164px;width:146px;padding:11px 12px;animation:fcDriftC 7s ease-in-out infinite;animation-delay:2.4s}
  .fc-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .fc-ico{flex:none;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px}
  .fc-ico.navy{background:var(--navy)}
  .fc-ico.orange{background:#fdeee7;color:var(--orange);font-size:11px}
  .fc-ico.lime{background:#f2f8e6;font-size:12px}
  .fc-title{font-size:12.5px;font-weight:700;color:var(--ink);flex:1}
  .fc-pct{font-size:11px;font-weight:700;color:#16a34a}
  .fc-pct.over{color:#d97706}
  .fc-item{display:flex;align-items:center;gap:8px;font-size:11px;color:#4a4a4e;line-height:1.5;padding:3px 0}
  .fc-item .fc-dot{flex:none;width:13px;height:13px;border-radius:50%;border:1.5px solid #c9c9cf}
  .fc-item.new .fc-dot{border-style:dashed;border-color:#9aa3ad}
  .fc-item.new{color:#9aa3ad}
  .fc-bar{height:6px;border-radius:999px;background:#f0f0f2;overflow:hidden;margin-bottom:7px}
  .fc-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--navy),#3d5a80)}
  .fc-bar.over i{background:linear-gradient(90deg,#d97706,#f59e0b)}
  .fc-meta{font-size:10.5px;color:#8a8990}
  @keyframes fcDriftA{
    0%,100%{transform:translateY(0) rotate(-3deg)}
    50%{transform:translateY(-14px) rotate(-1.5deg)}
  }
  @keyframes fcDriftB{
    0%,100%{transform:translateY(0) rotate(3deg)}
    50%{transform:translateY(-12px) rotate(1.5deg)}
  }
  @keyframes fcDriftC{
    0%,100%{transform:translateY(0) rotate(-2.5deg)}
    50%{transform:translateY(-10px) rotate(-1deg)}
  }
  @media (prefers-reduced-motion:reduce){
    .fc-card{animation:none}
  }

  /* Sparkles — floating 4-point stars (Grassfeld-style) */
  .sparkle{position:absolute;z-index:8;pointer-events:none;animation:sparkleFloat 5s ease-in-out infinite}
  .sparkle.sp1{top:-52px;right:-46px;animation-delay:0s}
  .sparkle.sp2{top:-14px;left:-58px;animation-delay:.9s}
  .sparkle.sp3{bottom:96px;left:-64px;animation-delay:1.8s}
  .sparkle.sp4{top:150px;right:-58px;animation-delay:1.9s}
  .sparkle.sp5{bottom:-38px;right:30px;animation-delay:3.6s}
  @keyframes sparkleFloat{
    0%,100%{transform:translateY(0) rotate(0deg) scale(1);opacity:.6}
    50%{transform:translateY(-16px) rotate(20deg) scale(1.15);opacity:1}
  }
  @media (prefers-reduced-motion:reduce){
    .sparkle{animation:none;opacity:.8}
  }
  .phone-screen{position:relative;width:100%;height:100%;background:#f5f5f7;border-radius:36px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Arial,sans-serif}
  .phone-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:110px;height:4px;background:rgba(17,18,20,.5);border-radius:2px;z-index:6}
  .ps-slides{height:100%;display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.4,0,.2,1);padding:2px}
  .ps-slide{flex:none;height:100%;padding:58px 16px 24px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;overflow:hidden;border-radius:34px;background:#f5f5f7}

  /* iOS status bar — content vertically centered with the Dynamic Island (~38px),
     left time at 21px, right icons signal→wifi→battery at 25px, real SF sizes */
  .ps-status{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:flex-start;justify-content:space-between;padding:31px 25px 0 21px;z-index:4;color:#111214;pointer-events:none}
  .st-time{font-size:13.5px;font-weight:600;letter-spacing:-.02em;line-height:12px;margin-top:-1px}
  .st-icons{display:flex;align-items:center;gap:5px;color:#111214;transform:translateY(-1px)}
  .st-sig{color:#111214}
  .st-sig rect{fill:currentColor}
  .st-wifi{color:#111214}
  .st-batt{color:#111214}

  /* Floating Shopify notifications — Grassfeld-style: orbit AROUND the device,
     quick loop (7s total, each card ~1.6s visible). Each card travels along
     one edge of the phone: top (n1), bottom (n2), left (n3), right (n4). */
  .ps-float{position:absolute;top:50%;left:50%;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.96);border:1px solid #ececef;border-radius:14px;padding:9px 13px;box-shadow:0 14px 30px -8px rgba(11,11,12,.28),0 2px 6px rgba(11,11,12,.08);z-index:7;pointer-events:none;opacity:0;white-space:nowrap;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;margin:-22px 0 0 -105px;backdrop-filter:blur(6px)}
  .ps-float .pf-ico{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
  .ps-float .pf-ico.ok{background:#16a34a}
  .ps-float .pf-ico.warn{background:#d97706}
  .ps-float .pf-ico.navy{background:var(--navy)}
  .ps-float .pf-t{display:block;font-size:12px;font-weight:700;color:var(--ink);line-height:1.25}
  .ps-float .pf-s{display:block;font-size:10.5px;color:#6b6a70;line-height:1.3}
  .ps-float svg{flex:none}
  /* n1 — top edge: enters left, sweeps OVER the top of the phone, exits right-down */
  .ps-float.n1{animation:pfOrbitTop 7s ease-in-out infinite;animation-delay:.2s}
  @keyframes pfOrbitTop{
    0%{opacity:0;transform:translate(-200px,-250px) scale(.95)}
    6%{opacity:1;transform:translate(-200px,-250px) scale(1)}
    14%{opacity:1;transform:translate(-70px,-335px) scale(1)}
    22%{opacity:1;transform:translate(80px,-335px) scale(1)}
    30%{opacity:1;transform:translate(200px,-250px) scale(1)}
    38%,100%{opacity:0;transform:translate(265px,-140px) scale(.95)}
  }
  /* n2 — right edge: enters top-right, travels DOWN along the right side */
  .ps-float.n2{animation:pfOrbitRight 7s ease-in-out infinite;animation-delay:1.9s}
  @keyframes pfOrbitRight{
    0%{opacity:0;transform:translate(200px,-250px) scale(.95)}
    6%{opacity:1;transform:translate(200px,-250px) scale(1)}
    14%{opacity:1;transform:translate(265px,-70px) scale(1)}
    22%{opacity:1;transform:translate(265px,80px) scale(1)}
    30%{opacity:1;transform:translate(200px,250px) scale(1)}
    38%,100%{opacity:0;transform:translate(140px,335px) scale(.95)}
  }
  /* n3 — bottom edge: enters right-bottom, travels UNDER the phone to the left */
  .ps-float.n3{animation:pfOrbitBottom 7s ease-in-out infinite;animation-delay:3.6s}
  @keyframes pfOrbitBottom{
    0%{opacity:0;transform:translate(200px,250px) scale(.95)}
    6%{opacity:1;transform:translate(200px,250px) scale(1)}
    14%{opacity:1;transform:translate(70px,335px) scale(1)}
    22%{opacity:1;transform:translate(-80px,335px) scale(1)}
    30%{opacity:1;transform:translate(-200px,250px) scale(1)}
    38%,100%{opacity:0;transform:translate(-265px,140px) scale(.95)}
  }
  /* n4 — left edge: enters bottom-left, travels UP along the left side */
  .ps-float.n4{animation:pfOrbitLeft 7s ease-in-out infinite;animation-delay:5.3s}
  @keyframes pfOrbitLeft{
    0%{opacity:0;transform:translate(-200px,250px) scale(.95)}
    6%{opacity:1;transform:translate(-200px,250px) scale(1)}
    14%{opacity:1;transform:translate(-265px,70px) scale(1)}
    22%{opacity:1;transform:translate(-265px,-80px) scale(1)}
    30%{opacity:1;transform:translate(-200px,-250px) scale(1)}
    38%,100%{opacity:0;transform:translate(-140px,-335px) scale(.95)}
  }
  @media (prefers-reduced-motion:reduce){
    .ps-float{animation:none;opacity:0}
  }
  .ps-top{display:none}
  .ps-store{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
  
  .ps-title{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
  .ps-kpis{display:flex;gap:8px}
  .ps-kpi{flex:1;background:#fff;border-radius:12px;padding:10px;box-shadow:0 1px 3px rgba(11,11,12,.06);border:1px solid #ececef;display:flex;flex-direction:column;gap:2px;min-width:0}
  .ps-kpi .l{font-size:10px;color:#8a8990;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ps-kpi .v{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
  .ps-kpi .d{font-size:10px;font-weight:700;color:#16a34a}
  .ps-chart{background:#fff;border-radius:14px;padding:10px;border:1px solid #ececef;box-shadow:0 1px 3px rgba(11,11,12,.06);flex:none}
  .ps-chart svg{width:100%;height:110px;display:block}
  .ps-line{stroke-dasharray:600;stroke-dashoffset:600;animation:psDraw 2.2s ease forwards}
  .ps-slide.active .ps-line,.ps-slide .ps-line{animation:psDraw 2.2s ease forwards}
  .ps-slide.active .ps-area{opacity:0;animation:psFade 1.4s ease .6s forwards}
  @keyframes psDraw{to{stroke-dashoffset:0}}
  @keyframes psFade{to{opacity:1}}
  .ps-area{opacity:0}
  .ps-recent-h{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px}
  .ps-recent{display:flex;flex-direction:column;gap:6px}
  .ps-order{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #ececef;border-radius:10px;padding:9px 11px;box-shadow:0 1px 2px rgba(11,11,12,.04)}
  .ps-order .o-name{flex:1;font-size:11.5px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ps-order .o-amt{font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
  .ps-order .o-st{font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:999px;background:#f1f0f2;color:#6b6a70;white-space:nowrap}
  .ps-order .o-st.ok{background:#e6f6ec;color:#16a34a}
  .ps-inv{display:flex;flex-direction:column;gap:10px}
  .ps-inv-item{background:#fff;border:1px solid #ececef;border-radius:12px;padding:11px 12px;box-shadow:0 1px 3px rgba(11,11,12,.05)}
  .i-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;gap:8px}
  .i-top span:first-child{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .i-stock{font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
  .i-stock.warn{color:#d97706}
  .i-bar{height:6px;border-radius:999px;background:#f0f0f2;overflow:hidden}
  .i-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--navy),#3d5a80);transition:width 1s ease}
  .i-bar.warn i{background:linear-gradient(90deg,#d97706,#f59e0b)}
  .ps-note{margin-top:auto;font-size:11px;color:#8a8990;text-align:center;padding:8px;background:#fff;border:1px dashed #d8d8dd;border-radius:10px}
  .ps-note b{color:var(--navy);font-weight:700}
  .ps-orders{display:flex;flex-direction:column;gap:7px}
  .ps-camps{display:flex;flex-direction:column;gap:7px;margin-top:2px}
  .ps-camp{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #ececef;border-radius:10px;padding:10px 12px;box-shadow:0 1px 2px rgba(11,11,12,.04);font-size:11.5px;font-weight:600;color:var(--ink)}
  .ps-camp .c-roas{font-size:11px;font-weight:700;color:var(--navy);white-space:nowrap}
  .ps-dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:6}
  .ps-dots span{width:6px;height:6px;border-radius:50%;background:#c9c9cf;transition:all .3s}
  .ps-dots span.active{width:18px;border-radius:999px;background:var(--orange)}

  /* Success overlay — full-screen, slides up from the bottom, holds, slides
     down (Grassfeld "congratulations" motion, adapted for a Shopify order) */
  .ps-success{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,rgba(245,245,247,.97),rgba(250,250,251,.99));z-index:6;pointer-events:none;opacity:0;transform:translateY(100%);animation:psSuccess 10s ease-in-out infinite;animation-delay:1.2s;padding:0 26px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif}
  .ps-success .s-ico{width:74px;height:74px;border-radius:50%;background:#16a34a;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(22,163,74,.5);margin-bottom:6px}
  .ps-success .s-title{font-size:17px;font-weight:700;color:var(--ink);line-height:1.35;letter-spacing:-.01em;max-width:230px}
  .ps-success .s-sub{font-size:13px;color:#4a4a4e;line-height:1.4}
  .ps-success .s-sub b{color:var(--ink)}
  .ps-success .s-actions{display:flex;flex-direction:column;gap:9px;width:100%;max-width:220px;margin-top:10px}
  .ps-success .s-btn{font-family:inherit;font-size:14px;font-weight:600;border-radius:12px;padding:13px 16px;cursor:pointer;transition:transform .12s}
  .ps-success .s-btn.primary{background:var(--ink);color:#fff;border:none}
  .ps-success .s-btn.ghost{background:#fff;color:var(--ink);border:1px solid #d8d8dd}
  .ps-success .s-btn:active{transform:scale(.98)}
  @keyframes psSuccess{
    0%{opacity:0;transform:translateY(100%)}
    5%{opacity:1;transform:translateY(0)}
    14%{opacity:1;transform:translateY(0)}
    20%,100%{opacity:0;transform:translateY(100%)}
  }
  @media (prefers-reduced-motion:reduce){
    .ps-success{animation:none;opacity:0;transform:translateY(100%)}
  }

  /* Confetti — falling colorful pieces (Grassfeld-style) */
  .confetti{position:absolute;z-index:8;pointer-events:none;opacity:0;animation:confettiFall 10s linear both infinite}
  .cf1{left:-30px;top:-16px;width:9px;height:14px;background:#ef4444;border-radius:2px;transform:rotate(24deg);animation-delay:2.3s}
  .cf2{left:40px;top:-22px;width:10px;height:10px;background:#facc15;transform:rotate(45deg);animation-delay:2.9s}
  .cf3{left:120px;top:-18px;width:8px;height:13px;background:#3b82f6;border-radius:2px;transform:rotate(-18deg);animation-delay:3.5s}
  .cf4{left:200px;top:-24px;width:11px;height:11px;background:#22c55e;transform:rotate(45deg);animation-delay:4.2s}
  .cf5{right:40px;top:-14px;width:9px;height:14px;background:#ef4444;border-radius:2px;transform:rotate(30deg);animation-delay:4.8s}
  .cf6{right:110px;top:-20px;width:10px;height:10px;background:#a855f7;transform:rotate(45deg);animation-delay:5.4s}
  .cf7{right:-22px;top:120px;width:9px;height:13px;background:#facc15;border-radius:2px;transform:rotate(-30deg);animation-delay:2.6s}
  .cf8{right:-18px;top:320px;width:10px;height:10px;background:#3b82f6;transform:rotate(45deg);animation-delay:3.8s}
  .cf9{right:-26px;top:470px;width:8px;height:12px;background:#22c55e;border-radius:2px;transform:rotate(20deg);animation-delay:5.1s}
  .cf10{left:-24px;top:260px;width:10px;height:10px;background:#ef4444;transform:rotate(45deg);animation-delay:3.2s}
  .cf11{left:-20px;top:430px;width:9px;height:14px;background:#a855f7;border-radius:2px;transform:rotate(-24deg);animation-delay:4.5s}
  .cf12{left:150px;bottom:-18px;width:10px;height:10px;background:#facc15;transform:rotate(45deg);animation-delay:3.1s}
  .cf13{left:230px;bottom:-22px;width:8px;height:13px;background:#3b82f6;border-radius:2px;transform:rotate(28deg);animation-delay:4.6s}
  .cf14{right:180px;bottom:-16px;width:10px;height:10px;background:#22c55e;transform:rotate(45deg);animation-delay:5.7s}
  .cf15{right:60px;bottom:-20px;width:9px;height:14px;background:#ef4444;border-radius:2px;transform:rotate(-16deg);animation-delay:6.3s}
  .cf16{left:60px;top:-14px;width:8px;height:11px;background:#f97316;border-radius:2px;transform:rotate(22deg);animation-delay:2.8s}
  .cf17{left:-16px;top:560px;width:10px;height:10px;background:#f97316;transform:rotate(45deg);animation-delay:6.0s}
  .cf18{right:-20px;top:200px;width:8px;height:12px;background:#facc15;border-radius:2px;transform:rotate(-22deg);animation-delay:3.4s}
  .cf19{left:200px;top:-20px;width:10px;height:10px;background:#ef4444;transform:rotate(45deg);animation-delay:6.6s}
  .cf20{right:20px;top:-16px;width:8px;height:12px;background:#3b82f6;border-radius:2px;transform:rotate(26deg);animation-delay:7.2s}
  @keyframes confettiFall{
    0%{opacity:0;translate:0 0;rotate:0deg;scale:.2}
    8%{opacity:1;translate:0 0;rotate:24deg;scale:1.25}
    13%{opacity:1;translate:0 0;rotate:24deg;scale:1}
    55%{opacity:1;translate:0 12px;rotate:90deg;scale:1}
    78%{opacity:0;translate:0 74px;rotate:220deg;scale:.4}
    100%{opacity:0;translate:0 74px;rotate:220deg;scale:.4}
  }
  @media (prefers-reduced-motion:reduce){
    .confetti{animation:none;opacity:.75}
  }

  /* Burst — when the success overlay appears, surrounding pieces explode
     outward, spin and fade (celebration pop, Grassfeld-style). Applied via JS
     to .ps-float / .fc-card / .sparkle / .confetti. */
  .burst{animation:burstAnim .7s cubic-bezier(.15,.75,.3,1) forwards !important;visibility:visible !important}
  @keyframes burstAnim{
    0%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
    100%{opacity:0;transform:translate(var(--bx,90px),var(--by,-90px)) rotate(var(--br,220deg)) scale(.35)}
  }
  @media (prefers-reduced-motion:reduce){
    .burst{animation:none !important;opacity:.75 !important}
  }
  /* reduced motion: static first slide */
  @media (prefers-reduced-motion:reduce){
    .ps-slides{transition:none}
    .ps-line{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
    .ps-area{opacity:1;animation:none}
  }

  /* ---------- HERO ---------- */
  .hero{background:
    radial-gradient(700px 480px at 0% 0%,rgba(214,228,246,.07),transparent 60%),
    radial-gradient(920px 600px at 100% 0%,rgba(190,214,241,.32),transparent 62%),
    radial-gradient(720px 500px at 0% 100%,rgba(204,222,244,.20),transparent 62%),
    radial-gradient(820px 540px at 100% 100%,rgba(198,218,243,.20),transparent 62%),
    linear-gradient(180deg,#f6f7fa 0%,#eef3fb 40%,#f6f9fd 72%,var(--white) 88%);
    border-bottom:1px solid var(--line);overflow:hidden;position:relative;border-radius:0 0 28px 28px;margin-bottom:2px}
  .hero-grid{display:grid;grid-template-columns:1.15fr minmax(0,.85fr);gap:var(--s6);align-items:center;padding-block:var(--s8) var(--s7);position:relative;z-index:2}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s3);background:linear-gradient(90deg,#3b82f6 0%,#14b8a6 55%,#7fd6a0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .eyebrow::before{content:"";width:18px;height:18px;flex:none;background:linear-gradient(135deg,#3b82f6,#14b8a6);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 7v10l9 4 9-4V7' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 11v10' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M21 7l-9 4' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 7v10l9 4 9-4V7' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 11v10' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M21 7l-9 4' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
  .hero h1{font-family:var(--display);font-size:clamp(36px,4.6vw,56px);line-height:1.1;font-weight:900;letter-spacing:-.015em;color:var(--ink);max-width:640px}
  .hero h1 .accent{color:var(--orange);font-style:normal}
  .hero .sub{font-size:18px;color:var(--muted);margin-top:var(--s3);max-width:480px;line-height:1.55}
  .hero-cta{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
  .hero-cta .meta{font-size:13.5px;color:var(--muted)}
  .hero-cta .meta b{color:var(--ink);font-weight:700}

  /* hero visual: a concrete "product" panel, not a text void */
  .hero-visual{position:relative}
  .hv-card{background:var(--navy);border-radius:10px;padding:var(--s5) var(--s4);color:#fff;position:relative;box-shadow:0 30px 70px -25px rgba(14,42,71,.45)}
  .hv-card::before{content:"";position:absolute;inset:0;border-radius:10px;background:radial-gradient(420px 220px at 100% 0%,rgba(244,85,30,.22),transparent 60%);pointer-events:none}
  .hv-label{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#ff9a74;font-weight:700;margin-bottom:var(--s3)}
  .hv-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .hv-row:last-of-type{border-bottom:none}
  .hv-row .l{font-size:14.5px;color:#c7d3de}
  .hv-row .v{font-size:15px;font-weight:700;color:#fff}
  .hv-row .v.up{color:#7be0a8}
  .hv-foot{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between}
  .hv-foot .tag{font-size:12.5px;color:#8fa3b8}
  .hv-badge{position:absolute;bottom:-18px;left:-18px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 18px;box-shadow:0 20px 40px -20px rgba(0,0,0,.25)}
  .hv-badge .n{font-size:22px;font-weight:700;color:var(--navy);line-height:1}
  .hv-badge .c{font-size:11.5px;color:var(--muted);margin-top:4px}

  /* ---------- TRUST STRIP ---------- */
  .trust{background:var(--navy);padding:var(--s4) 0}
  .trust-in{display:flex;align-items:center;justify-content:center;gap:var(--s6);flex-wrap:wrap}
  .trust-item{display:flex;align-items:center;gap:10px;color:#dbe4ec;font-size:13.5px;font-weight:700;letter-spacing:.01em}
  .trust-item .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}

  /* ---------- SECTION BASICS ---------- */
  section{padding:var(--s7) 0}
  section.gray{background:var(--bg)}
  section.white{background:var(--white)}
  section.black{background:#0a0a0a;color:#fff}
  .sec-head{max-width:700px;margin-bottom:var(--s6)}
  .sec-head .k{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:var(--s2)}
  .sec-head .k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
  .sec-head h2{font-family:var(--display);font-size:clamp(28px,3.4vw,38px);font-weight:900;line-height:1.16;color:var(--ink);letter-spacing:-.015em}
  .sec-head p{color:var(--muted);font-size:16.5px;margin-top:var(--s2);max-width:600px;line-height:1.6}
  .sec-head a.link{margin-top:var(--s3);display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-size:14.5px;font-weight:700;border-bottom:1.5px solid var(--ink);padding-bottom:2px;transition:color .15s,border-color .15s}
  .sec-head a.link:hover{color:var(--orange);border-color:var(--orange)}

  /* ---------- SERVICES ---------- */
  .svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
  .svc{background:var(--white);padding:var(--s5) var(--s4);transition:background .18s,transform .18s;box-shadow:0 1px 2px rgba(11,11,12,.03)}
  .svc:hover{background:var(--bg);transform:translateY(-2px)}
  .svc .num{font-size:12.5px;letter-spacing:.1em;color:var(--orange);font-weight:700;margin-bottom:var(--s3)}
  .svc h3{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:var(--s1);letter-spacing:-.005em}
  .svc p{color:var(--muted);font-size:14.5px;line-height:1.55}
  .svc a.more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);font-size:13.5px;font-weight:700;color:var(--ink);border-bottom:1.5px solid transparent;padding-bottom:1px;transition:color .15s,border-color .15s}
  .svc a.more:hover{color:var(--orange);border-color:var(--orange)}
  .svc-part{margin-top:var(--s6);display:flex;align-items:baseline;gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s4);flex-wrap:wrap}
  .svc-part h3{font-size:20px;font-weight:700;color:var(--ink)}
  .svc-part p{color:var(--muted);font-size:14.5px}

  /* ---------- PORTFOLIO ---------- */
  .port-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
  .port-card{border-radius:8px;overflow:hidden;border:1px solid var(--line);transition:transform .25s,box-shadow .25s;box-shadow:0 1px 3px rgba(11,11,12,.04)}
  .port-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(11,11,12,.3)}
  .port-img{height:220px;background-size:cover;background-position:top center;background-color:var(--bg-alt)}
  .port-cap{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--white)}
  .port-cap span{font-size:14.5px;font-weight:700;color:var(--ink)}
  .port-cap em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);background:var(--bg);padding:4px 9px;border-radius:999px}
  .port-note{margin-top:var(--s3);font-size:12.5px;color:var(--muted2);text-align:center}

  /* ---------- FULL-FUNNEL (black band) ---------- */
  section.black .sec-head{max-width:640px}
  section.black .sec-head h2{color:#fff}
  section.black .sec-head p{color:#9fa8b3}
  .fflow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:0;align-items:stretch}
  .ff-step{border:1px solid #232323;padding:var(--s4);border-radius:6px;transition:border-color .2s,background .2s,transform .2s}
  .ff-step:hover{border-color:var(--orange);background:#111;transform:translateY(-3px)}
  .ff-step .n{font-size:12px;letter-spacing:.12em;color:var(--orange);font-weight:700;margin-bottom:var(--s2)}
  .ff-step h3{font-size:21px;font-weight:700;color:#fff;margin-bottom:var(--s1)}
  .ff-step p{color:#9fa8b3;font-size:14px;line-height:1.5}
  .ff-arrow{display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:22px;padding:0 var(--s3)}
  .funnel-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#1c1c1c;margin-top:var(--s6)}
  .fp{padding:var(--s4)}
  .fp h4{font-size:15.5px;font-weight:700;color:#fff;margin-bottom:var(--s1)}
  .fp p{color:#7d8894;font-size:13.5px;line-height:1.5}

  /* ---------- STATS ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
  .stat{background:var(--white);padding:var(--s5) var(--s3);box-shadow:0 1px 2px rgba(11,11,12,.03)}
  .stat .num{font-size:clamp(28px,3.2vw,42px);font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1}
  .stat .cap{color:var(--muted);font-size:13.5px;margin-top:var(--s2);line-height:1.4}
  .takeaway{margin-top:var(--s5);background:var(--navy);border-radius:8px;color:#fff;padding:var(--s4) var(--s5);text-align:center}
  .takeaway p{font-size:clamp(16.5px,1.9vw,20px);line-height:1.5}
  .takeaway p b{color:#ff9a74;font-weight:700}
  .src{margin-top:var(--s3);font-size:12px;color:var(--muted2);text-align:center}

  /* ---------- PACKAGES / ENGAGEMENT MODEL ---------- */
  .pkg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .pkg{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:var(--s5);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;min-width:0;box-shadow:0 1px 3px rgba(11,11,12,.04)}
  .pkg:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(11,11,12,.25)}
  .pkg.featured{border-color:var(--navy);position:relative;box-shadow:0 1px 3px rgba(14,42,71,.08)}
  .pkg-tag{position:absolute;top:-13px;left:var(--s5);background:var(--orange);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;white-space:nowrap}
  .pkg h3{font-size:22px;font-weight:700;color:var(--navy)}
  .pkg .desc{color:var(--muted);font-size:14.5px;margin-top:var(--s1);margin-bottom:var(--s4)}
  .pkg ul{list-style:none;flex:1;margin-bottom:var(--s4);min-width:0}
  .pkg li{display:flex;gap:10px;padding:9px 0;font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--line);min-width:0}
  .pkg li:last-child{border-bottom:none}
  .pkg li .chk{flex:none;color:var(--orange);font-weight:700}
  .pkg .best{font-size:12.5px;color:var(--muted2);margin-bottom:var(--s3)}
  .pkg .best b{color:var(--ink)}

  /* ---------- WHY / PROOF ---------- */
  .why-grid{display:grid;grid-template-columns:1.3fr minmax(0,.85fr);gap:1px;background:var(--line)}
  .why-list{background:var(--white);padding:var(--s5)}
  .why-item{display:flex;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  .why-item:first-child{padding-top:0}
  .why-item:last-child{border-bottom:none;padding-bottom:0}
  .why-item .d{flex:none;width:9px;height:9px;border-radius:50%;background:var(--orange);margin-top:8px}
  .why-item h4{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:3px}
  .why-item p{color:var(--muted);font-size:14.5px;line-height:1.5}
  .why-q{background:var(--navy);color:#fff;padding:var(--s5);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
  .why-q::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 220px at 100% 100%,rgba(244,85,30,.18),transparent 60%);pointer-events:none}
  .why-q .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ff9a74;font-weight:700;margin-bottom:var(--s3);position:relative}
  .why-q .big{font-family:var(--display);font-size:clamp(19px,2.3vw,25px);line-height:1.4;font-weight:900;position:relative}
  .why-q .big em{font-style:normal;color:#fff;font-weight:700}
  .why-q .accent{color:#ff9a74;font-weight:700}

  /* ---------- WHO WE ARE ---------- */
  .who-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
  .who-card{background:var(--white);padding:var(--s5);box-shadow:0 1px 2px rgba(11,11,12,.03)}
  .who-avatar{width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin-bottom:var(--s3)}
  .who-card h3{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .who-card .role{color:var(--orange);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin:var(--s1) 0 var(--s3);line-height:1.5}
  .who-card p{color:var(--muted);font-size:15px;line-height:1.6}
  .ops{margin-top:1px;background:var(--white);border-top:1px solid var(--line);padding:var(--s5);display:flex;gap:var(--s3);align-items:flex-start}
  .ops .quote-mark{flex:none;font-size:48px;line-height:.8;color:var(--orange);font-weight:700;font-family:Georgia,serif}
  .ops p{font-family:var(--display);font-size:clamp(17px,2vw,22px);line-height:1.5;font-weight:900;color:var(--ink)}
  .ops p b{color:var(--navy);font-weight:700}

  /* ---------- FAQ ---------- */
  .faq{max-width:820px}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-item:first-child{border-top:1px solid var(--line)}
  .faq-q{width:100%;text-align:left;background:none;border:none;padding:var(--s4) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);cursor:pointer;font-size:17px;font-weight:700;color:var(--ink)}
  .faq-q:hover{color:var(--orange)}
  .faq-q .plus{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:14px;transition:transform .25s,border-color .2s,color .2s;color:var(--ink)}
  .faq-q:hover .plus{border-color:var(--orange);color:var(--orange)}
  .faq-item.open .faq-q .plus{transform:rotate(135deg);border-color:var(--orange);color:var(--orange)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .faq-a p{color:var(--muted);font-size:15px;line-height:1.6;padding-bottom:var(--s4);max-width:680px}
  .faq-item.open .faq-a{max-height:220px}

  /* ---------- CONTACT ---------- */
  .contact{background:#0a0a0a;color:#fff}
  .contact-in{padding-top:0;padding-bottom:var(--s8);max-width:1180px;margin:0 auto;padding-left:32px;padding-right:32px}
  .contact .k{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:var(--s2)}
  .contact .k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
  .contact h2{font-family:var(--display);font-size:clamp(30px,4.2vw,46px);font-weight:900;line-height:1.1;max-width:720px;margin-bottom:var(--s6);letter-spacing:-.015em}
  .contact-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);align-items:start}
  .ccard{border:1px solid #262626;border-radius:8px;padding:var(--s5)}
  .ccard .lbl{color:#7d8894;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s2)}
  .ccard .name{font-size:20px;font-weight:700;margin-bottom:var(--s3)}
  .ccard .cline{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;margin:10px 0}
  .ccard .cline .ic{color:var(--orange)}
  .ccard .cline a{color:#fff;transition:color .15s}
  .ccard .cline a:hover{color:var(--orange)}
  .ccard .loc{color:#7d8894;font-size:13.5px;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid #262626}

  /* contact form */
  .cform{border:1px solid #262626;border-radius:8px;padding:var(--s5)}
  .cform .lbl{color:#7d8894;font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s3)}

  /* Booking (appointment) picker */
  .appt-wrap{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4);padding:var(--s3);background:rgba(255,255,255,.04);border:1px solid #2a2a2a;border-radius:10px}
  .appt-label{font-size:16.5px;font-weight:700;color:#dbe2ea;display:block;margin-bottom:10px}
  .appt-label .tz{font-style:normal;font-weight:500;color:#7d8894;font-size:15px}
  .appt-days,.appt-times{display:flex;flex-wrap:wrap;gap:8px}
  .appt-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .appt-times{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .appt-chip{flex:none;min-width:58px;padding:9px 10px;background:#1a1a1a;border:1px solid #333;border-radius:8px;font-size:16.5px;font-weight:600;color:#e6e9ee;text-align:center;cursor:pointer;transition:all .15s;font-family:var(--sans)}
  .appt-chip small{display:block;font-size:14px;font-weight:500;color:#7d8894;text-transform:uppercase;letter-spacing:.04em}
  .appt-chip:hover{border-color:var(--orange);color:var(--orange)}
  .appt-chip.sel{background:var(--orange);border-color:var(--orange);color:#fff}
  .appt-chip.sel small{color:rgba(255,255,255,.85)}
  .appt-chip.off{opacity:.4;pointer-events:none}
  .appt-sep{margin-top:2px}
  .field{margin-bottom:var(--s3)}
  .field label{display:block;font-size:12.5px;color:#9fa8b3;margin-bottom:6px;font-weight:700}
  .field input,.field textarea{width:100%;background:#141414;border:1px solid #2a2a2a;border-radius:5px;padding:13px 14px;font-size:16px;color:#fff;font-family:inherit;transition:border-color .15s;-webkit-appearance:none;appearance:none}
  /* phone input with US flag prefix */
  .phone-input{display:flex;align-items:stretch;background:#141414;border:1px solid #2a2a2a;border-radius:5px;overflow:hidden;transition:border-color .15s}
  .phone-input:focus-within{border-color:var(--orange)}
  .phone-prefix{flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;background:#1e1e1e;border-right:1px solid #2a2a2a;font-size:15px;font-weight:600;color:#e6e9ee}
  .phone-prefix .flag{font-size:15px;line-height:1}
  .phone-input input{width:100%;background:transparent;border:none;border-radius:0;outline:none}
  .phone-input input:focus{border:none;box-shadow:none}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--orange)}
  .field textarea{resize:vertical;min-height:90px}
  .form-note{font-size:12px;color:#7d8894;margin-top:var(--s2)}
  .form-status{font-size:13.5px;margin-top:var(--s2);display:none}
  .form-status.show{display:block;color:#7be0a8}

  /* ---------- FLOATING CTA ---------- */
  .float-cta{position:fixed;bottom:26px;right:26px;z-index:150;opacity:0;transform:translateY(16px) scale(.95);pointer-events:none;transition:opacity .25s,transform .25s}
  .float-cta.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .float-cta a{box-shadow:0 16px 34px -12px rgba(11,11,12,.45)}

  /* ---------- FOOTER ---------- */
  footer{background:#0a0a0a;border-top:1px solid #1c1c1c;padding:var(--s6) 0 var(--s4)}
  .foot-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:var(--s5);padding-bottom:var(--s5);margin-bottom:var(--s4);border-bottom:1px solid #1c1c1c}
  .foot-brand .logo{color:#fff}
  .foot-brand p{color:#7d8894;font-size:13.5px;margin-top:var(--s2);max-width:260px;line-height:1.6}
  .foot-col h5{color:#fff;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s3);font-weight:700}
  .foot-col a{display:block;color:#9fa8b3;font-size:13.5px;margin-bottom:10px;transition:color .15s}
  .foot-col a:hover{color:var(--orange)}
  .foot-in{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
  .foot-social{display:flex;gap:var(--s3)}
  .foot-social a{color:#9fa8b3;font-size:13.5px;font-weight:500}
  .foot-social a:hover{color:var(--orange)}
  .foot-in .small{color:#6b7580;font-size:13px}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr;gap:var(--s6)}
    .hero-visual{max-width:440px}
    .svc-grid,.stats,.funnel-points,.port-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fflow{grid-template-columns:1fr;gap:1px}
    .ff-arrow{transform:rotate(90deg);padding:var(--s2) 0}
    .why-grid,.who-grid,.contact-wrap,.pkg-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .trust-in{gap:var(--s4)}
    .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--bg);flex-direction:column;align-items:flex-start;padding:var(--s4) 32px;gap:var(--s3);border-bottom:1px solid var(--line)}
    .nav-links.open{display:flex}
    .hamb{display:flex}
  }
  @media (max-width:560px){
    .svc-grid,.stats,.funnel-points,.port-grid{grid-template-columns:1fr}
    section{padding:var(--s6) 0}
    .hero-grid{padding-block:10px calc(var(--s6) * .66)}
    .hero{padding-top:12px}
    .hero-cta{justify-content:center;margin-top:var(--s4)}
    .hero-visual{display:flex;justify-content:center}
    .hero{background:
      radial-gradient(380px 280px at 0% 0%,rgba(214,228,246,.07),transparent 60%),
      radial-gradient(520px 340px at 100% 0%,rgba(190,214,241,.40),transparent 62%),
      radial-gradient(420px 300px at 0% 35%,rgba(204,222,244,.26),transparent 62%),
      radial-gradient(460px 320px at 100% 60%,rgba(198,218,243,.26),transparent 62%),
      linear-gradient(180deg,#f6f7fa 0%,#eef3fb 46%,#f6f9fd 76%,var(--white) 92%)}
    .hv-badge{position:static;margin-top:var(--s3);display:inline-block}
    .foot-grid{grid-template-columns:1fr}
    .float-cta{right:14px;bottom:14px}
    .float-cta .btn{padding:12px 16px;font-size:13.5px}
    .bar{font-size:13px;padding:9px 14px;line-height:1.5}
    .hero h1{font-size:clamp(30px,8.4vw,38px);overflow-wrap:break-word;hyphens:auto}
    .hero .sub{font-size:16.5px}
    .hero-cta .meta{font-size:14.5px}
    .eyebrow{font-size:14.5px}
    .contact-in{padding-top:0;padding-bottom:var(--s7);padding-left:16px;padding-right:16px}
    .cform{padding:var(--s4)}
    .ccard{padding:var(--s4)}
    .who-avatar{width:44px;height:44px;font-size:16px}
    .why-q{padding:var(--s4)}
    .svc{padding:var(--s4)}
    .stat{padding:var(--s4) var(--s3)}
    .pkg{padding:var(--s4)}
    .port-img{height:180px}
    /* Mobile typography floor — nothing below ~13.5px on small screens */
    .sec-head .k,.contact .k,.why-q .k{font-size:13.5px}
    .sec-head p{font-size:16.5px}
    .svc p{font-size:15px}
    .svc a.more,.svc-part p{font-size:14.5px}
    .svc-part h3{font-size:19px}
    .hv-label{font-size:13px}
    .hv-row .l{font-size:15px}
    .hv-foot .tag{font-size:13.5px}
    .hv-badge .c{font-size:13px}
    .trust-item{font-size:14.5px}
    .ff-step p{font-size:15px}
    .fp p{font-size:14.5px}
    .fp h4{font-size:16px}
    .stat .cap{font-size:14.5px}
    .src{font-size:13px}
    .pkg .desc{font-size:15px}
    .pkg li{font-size:15px}
    .pkg .best{font-size:14px}
    .pkg-tag{font-size:12.5px}
    .why-item p{font-size:15px}
    .why-item h4{font-size:17.5px}
    .why-q .big{font-size:clamp(19px,5.5vw,23px)}
    .who-card p{font-size:15.5px}
    .who-card .role{font-size:13px}
    .ops p{font-size:clamp(17px,5vw,20px)}
    .port-cap span{font-size:15px}
    .port-cap em{font-size:12.5px}
    .port-note{font-size:13.5px}
    .faq-q{font-size:17px}
    .faq-a p{font-size:15.5px}
    .ccard .name{font-size:20px}
    .ccard .cline{font-size:17.5px}
    .ccard .lbl{font-size:13px}
    .cform .lbl{font-size:13px}
    .ccard .loc{font-size:14.5px}
    .cform .field label{font-size:13.5px}
    .form-note{font-size:13.5px}
    .foot-col a{font-size:14.5px}
    .foot-col h5{font-size:13px}
    .foot-brand p{font-size:14.5px}
    .foot-in .small{font-size:13.5px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition:none!important}
    .reveal{opacity:1;transform:none}
  }

  /* ---------- SUBPAGE (multi-page) ADDITIONS ---------- */
  /* Page hero (services/portfolio/about) */
  .page-hero{border-bottom:1px solid var(--line)}
  .page-hero-in{padding-block:var(--s7) var(--s6);max-width:860px}
  .page-hero-in h1{font-family:var(--display);font-size:clamp(32px,4vw,48px);font-weight:900;line-height:1.12;letter-spacing:-.015em;color:var(--ink);margin-bottom:var(--s3)}
  .page-hero-in .sub{font-size:18px;color:var(--muted);line-height:1.6;max-width:600px}

  /* Marketplace cards (services) */
  .mk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
  .mk-card{background:var(--white);padding:var(--s5) var(--s4);box-shadow:0 1px 2px rgba(11,11,12,.03)}
  .mk-card .mk-num{font-size:12.5px;letter-spacing:.1em;color:var(--orange);font-weight:700;margin-bottom:var(--s3)}
  .mk-card h3{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:var(--s1);letter-spacing:-.005em}
  .mk-card p{color:var(--muted);font-size:14.5px;line-height:1.55}

  /* Portfolio large cards (portfolio page) */
  .port-large-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
  .port-large{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--white);box-shadow:0 1px 3px rgba(11,11,12,.04)}
  .port-large .port-img{height:240px}
  .port-desc{padding:var(--s3) var(--s4) var(--s4);font-size:14.5px;color:var(--muted);line-height:1.6}

  /* CTA band */
  .contact-short{background:var(--navy);color:#fff;position:relative;overflow:hidden}
  .contact-short::before{content:"";position:absolute;inset:0;background:
    radial-gradient(560px 380px at 0% 100%,rgba(244,85,30,.16),transparent 60%),
    radial-gradient(520px 360px at 100% 0%,rgba(90,130,180,.18),transparent 60%),
    radial-gradient(400px 260px at 100% 100%,rgba(244,85,30,.08),transparent 60%);
    pointer-events:none}
  .cta-band{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;padding-block:var(--s6);position:relative}
  .cta-band h2{font-family:var(--display);font-size:clamp(16px,2.2vw,26px);font-weight:900;line-height:1.2;max-width:640px;letter-spacing:-.01em;color:#fff}
  .cta-sub{margin-top:var(--s2);font-size:15.5px;color:#b8c4d4;max-width:520px;line-height:1.6}
  .cta-band-actions{display:flex;gap:var(--s3);flex-wrap:wrap}
  .cta-schedule{background:var(--orange);border-color:var(--orange);display:inline-flex;align-items:center;gap:9px}
  .cta-schedule:hover{background:#e04a15;border-color:#e04a15;transform:translateY(-1px)}
  .cta-schedule .cal-ico{font-size:16px;line-height:1}
  .cta-band .btn.outline{color:#fff;border-color:#fff}
  .cta-band .btn.outline:hover{background:#fff;color:var(--navy);border-color:#fff}

  /* Responsive for new sections */
  @media (max-width:980px){
    .mk-grid,.port-large-grid{grid-template-columns:1fr}
    .port-large .port-img{height:200px}
  }
  @media (max-width:560px){
    .page-hero-in{padding-block:var(--s6) var(--s5)}
    .page-hero-in h1{font-size:clamp(28px,8vw,36px)}
    .page-hero-in .sub{font-size:16px}
    .cta-band{padding-block:var(--s5);flex-direction:column;align-items:flex-start}
    .mk-card,.port-large .port-img{height:180px}
  }
  /* Phone mockup responsive */
  @media (max-width:980px){
    .phone{transform:scale(.9)}
  }
  @media (max-width:560px){
    .phone{transform:scale(.62);margin-top:-120px;margin-bottom:-40px}
    .phone-frame{height:586px}
    .ps-slide{padding-top:38px}
    /* floating cards stay near the phone on small screens */
    .fc-left{left:-150px;top:70px;transform:scale(.85);transform-origin:right center}
    .fc-right{right:-140px;top:260px;transform:scale(.85);transform-origin:left center}
    .fc-right2{right:-130px;bottom:40px;transform:scale(.85);transform-origin:left center}
    /* orbit notification cards and content cards would push outside the
       390px viewport (phone is scaled down) — hide them on mobile; the phone,
       slider, success overlay, confetti and sparkles keep the scene alive. */
    .ps-float,.fc-card{display:none}
  }