/* Layout: full-viewport hero that is itself a CSS 3D window (shallow reveal, photo behind it) whose
   vanishing point follows the pointer → steps → deep green privacy band → edge-to-edge sample cards → footer. */
:root{
  --bg:#0b0b0e;
  --ink:#f3eee6;
  --dim:#a39d94;
  --edge:rgba(243,238,230,.12);
  --jade:#8fdcb8;      /* accent text on the dark background */
  --emerald:#2a8a66;   /* buttons */
  --forest:#123a2e;    /* privacy band */
  --grad:linear-gradient(100deg,#34a57a,#1f6e52);
  --display:"Fraunces",Georgia,serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4vw,56px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body)}
a{color:inherit}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- nav ---------- */
nav{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter)}
.brand{font:600 20px var(--display);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand img{display:block;width:26px;height:26px}
.nav-links{display:flex;gap:24px;align-items:center;font-size:14px}
.nav-links a{text-decoration:none;color:var(--dim)}
.nav-links a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 16px var(--body);text-decoration:none;border-radius:999px;padding:15px 26px;transition:transform .15s,box-shadow .15s,background .15s}
.btn.primary{background:var(--grad);color:#f2fff8;box-shadow:0 10px 40px -12px rgba(52,165,122,.75)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 48px -12px rgba(52,165,122,.9)}
.btn.ghost{border:1px solid rgba(243,238,230,.3);background:rgba(11,11,14,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.small{padding:9px 18px;font-size:14px}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--jade);outline-offset:3px}

/* ---------- hero: CSS 3D tunnel ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
/* moving perspective-origin while the box stays put is exactly an off-axis projection */
.stage{position:absolute;inset:0;perspective:900px;perspective-origin:calc(50% + var(--ex,0) * 45%) calc(50% + var(--ey,0) * 45%)}
/* a shallow window reveal: plain walls from the glass back to the photo, lit from the scene side */
.box{position:absolute;inset:0;transform-style:preserve-3d;--d:120px}
.wall{position:absolute;backface-visibility:visible;background:linear-gradient(to var(--fade),#0d0f0e,#232826)}
.wall.top{left:0;top:0;width:100%;height:var(--d);transform-origin:top;transform:rotateX(-90deg);--fade:bottom}
.wall.bottom{left:0;bottom:0;width:100%;height:var(--d);transform-origin:bottom;transform:rotateX(90deg);--fade:top;filter:brightness(.7)}
.wall.left{left:0;top:0;width:var(--d);height:100%;transform-origin:left;transform:rotateY(90deg);--fade:right;filter:brightness(.85)}
.wall.right{right:0;top:0;width:var(--d);height:100%;transform-origin:right;transform:rotateY(-90deg);--fade:left;filter:brightness(.85)}
.back{position:absolute;inset:0;transform:translateZ(calc(var(--d) * -1));background:#000}
.back img{width:100%;height:100%;object-fit:cover;display:block}
.back::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
/* scrim so the copy reads over the scene */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,14,.95) 0%,rgba(11,11,14,.7) 34%,rgba(11,11,14,.15) 68%,rgba(11,11,14,0) 80%),
             linear-gradient(to right,rgba(11,11,14,.55),rgba(11,11,14,0) 55%),
             linear-gradient(to bottom,rgba(11,11,14,.6),rgba(11,11,14,0) 20%)}
h1{text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero-copy{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:clamp(32px,7vh,72px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end}
.eyebrow{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jade);margin:0 0 18px}
h1{font:600 clamp(46px,8.4vw,132px)/.95 var(--display);letter-spacing:-.025em;margin:0}
h1 em{font-style:italic;font-weight:500;color:var(--jade)}
.hero-side{max-width:380px;display:flex;flex-direction:column;gap:22px;padding-bottom:10px}
.lede{font-size:18px;color:#d8d2c8;margin:0}
.cta{display:flex;gap:12px;flex-wrap:wrap}
/* both actions the same width, side by side or stacked */
.cta .btn{flex:1 1 0;min-width:200px;justify-content:center}
.needs{font-size:13px;line-height:1.5;color:var(--dim);margin:-6px 0 0}
/* only shown on touch-first devices, where head tracking can't match the screen */
.phone-note{display:none;font-size:13px;line-height:1.5;margin:0;padding:10px 12px;border-left:2px solid var(--jade);background:rgba(11,11,14,.55);color:var(--ink)}
@media (pointer:coarse) and (hover:none){.phone-note{display:block}}
.hint{position:absolute;z-index:2;top:50%;right:var(--gutter);transform:translateY(-50%) rotate(90deg);transform-origin:right center;font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,238,230,.55)}

/* ---------- sections ---------- */
section{padding:clamp(64px,10vw,128px) 0}
.kicker{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jade);margin:0 0 14px}
h2{font:600 clamp(32px,4.4vw,60px)/1.02 var(--display);letter-spacing:-.02em;margin:0 0 clamp(36px,5vw,64px);max-width:16ch}
h2 em{font-style:italic;font-weight:500;color:var(--jade)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);list-style:none;margin:0;padding:0}
.steps li{border-top:1px solid var(--edge);padding-top:24px}
.steps .n{display:block;font:500 clamp(48px,5vw,72px)/1 var(--display);font-style:italic;color:var(--jade);margin-bottom:18px}
.steps h3{font:500 20px var(--body);margin:0 0 8px}
.steps p{margin:0;color:var(--dim)}

.band{background:var(--forest);color:var(--ink);padding:clamp(48px,7vw,96px) var(--gutter);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px 64px;align-items:end}
.band h2{color:inherit;margin:0;max-width:14ch}
.band h2 em{color:var(--jade)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:14px;font:500 17px var(--body)}
.facts li{display:flex;gap:12px;align-items:baseline;border-bottom:1px solid rgba(143,220,184,.2);padding-bottom:12px}
.facts li::before{content:"✓";font-weight:600;color:var(--jade)}

.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px)}
.card .tag{position:absolute;z-index:1;top:12px;left:12px;font:500 11px var(--mono);color:#0b1f17;background:var(--jade);border-radius:999px;padding:3px 9px}
.card{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;text-decoration:none;background:#16151a}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0) 45%);transition:opacity .3s}
.card span{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;font:500 16px var(--body);display:flex;justify-content:space-between;align-items:center}
.card span::after{content:"→";color:var(--jade);transform:translateX(-6px);opacity:0;transition:.25s}
.card:hover img,.card:focus-visible img{transform:scale(1.06)}
.card:hover span::after,.card:focus-visible span::after{transform:none;opacity:1}
.callout{margin-top:clamp(28px,4vw,44px);border:1px solid var(--edge);border-radius:14px;padding:22px 24px;display:flex;gap:20px 32px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:rgba(143,220,184,.04)}
.callout .kicker{margin-bottom:6px}
.callout p:last-child{margin:0;max-width:60ch;color:var(--dim)}
.callout b{color:var(--ink);font-weight:500}
kbd{font:12px var(--mono);color:var(--ink);border:1px solid var(--edge);border-bottom-width:2px;border-radius:4px;padding:0 5px;margin-right:2px}
.tips{margin:clamp(28px,4vw,44px) 0 0;color:var(--dim);max-width:72ch}
.tips b{color:var(--ink);font-weight:500}

footer{border-top:1px solid var(--edge);padding:28px var(--gutter) 40px;font-size:14px;color:var(--dim);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

@media (max-width:900px){
  .hero-copy{grid-template-columns:1fr}
  .hint{display:none}
  .steps{grid-template-columns:1fr}
  .band{grid-template-columns:1fr}
  .cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,62%);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);scrollbar-width:none}
  .card{scroll-snap-align:start}
  .box{--d:80px}
  .nav-links a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}