/* Landing page only. Loaded after styles.css. Pure CSS: no JavaScript, no remote fonts.
   Scroll effects use CSS scroll-driven animations. Browsers without them get the same page, static. */

:root{--ring:rgba(208,176,130,.22);--gold-deep:#8c7344;--ease:cubic-bezier(.2,.7,.2,1)}
body{overflow-x:clip}

/* ---------- header: sticky glass ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(12,14,13,.72);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}

/* ---------- phone frame ---------- */
.ph{--w:260px;position:relative;width:var(--w);aspect-ratio:640/1396;padding:calc(var(--w)*.022);border-radius:calc(var(--w)*.125);
  background:linear-gradient(150deg,#ecd5a5 0%,#8a7243 22%,#171410 46%,#6e5a35 74%,#d8bd88 100%);
  box-shadow:0 calc(var(--w)*.16) calc(var(--w)*.3) calc(var(--w)*-.1) rgba(0,0,0,.75),0 0 calc(var(--w)*.35) rgba(208,176,130,.10)}
.ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--w)*.105);background:#0a0c0b}
.ph::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 22%,transparent 70%,rgba(255,255,255,.05))}

/* ---------- hero ---------- */
.lh{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) 0 0}
.lh-arcs{position:absolute;z-index:0;right:-16%;top:-22%;width:min(1100px,110vw);aspect-ratio:1;pointer-events:none;opacity:.9}
.lh-arcs svg{width:100%;height:100%;overflow:visible}
.lh-arcs circle{fill:none;stroke:var(--gold);stroke-linecap:round;vector-effect:non-scaling-stroke}
.lh-arcs .a1{stroke-width:1.6;stroke-opacity:.5;stroke-dasharray:1;stroke-dashoffset:0}
.lh-arcs .a2{stroke-width:1;stroke-opacity:.28}
.lh-arcs .a3{stroke-width:1;stroke-opacity:.16}
.lh-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,4vw,56px);align-items:center}
.lh-copy{padding-bottom:clamp(24px,5vw,72px)}
.lh h1{font-size:clamp(50px,7.1vw,104px);font-weight:500;letter-spacing:-.075em;line-height:1.02;margin:26px 0 28px}
.lh h1 .ln{display:block}
.lh h1 em{color:var(--gold);font-family:var(--serif);font-weight:400;letter-spacing:-.06em}
.lh-lead{font-size:clamp(15px,1.25vw,17px);color:#b4b5ad;line-height:1.9;max-width:520px;margin-bottom:34px}
.lh-actions{display:flex;gap:23px;align-items:center;flex-wrap:wrap}
.lh-proof{display:flex;align-items:center;gap:17px;color:#93978e;font-size:11px;letter-spacing:.05em;margin-top:44px;flex-wrap:wrap}

.lh-stage{position:relative;container-type:inline-size;width:100%;aspect-ratio:1/1.12;max-width:620px;margin-inline:auto}
.slot{position:absolute}
.slot-c{left:50%;top:2%;translate:-50% 0;z-index:3}
.slot-l{left:-1%;top:17%;rotate:-8deg;z-index:2}
.slot-r{right:-1%;top:13%;rotate:7deg;z-index:1}
.slot-c .ph{--w:47cqw}
.slot-l .ph,.slot-r .ph{--w:36cqw}
.slot-l .ph img,.slot-r .ph img{filter:brightness(.82)}
.slot-c .ph{box-shadow:0 8cqw 14cqw -6cqw rgba(0,0,0,.85),0 0 16cqw rgba(208,176,130,.16)}

/* entrance on load, settles to normal style so nothing stays hidden */
.rise{animation:rise 1s var(--ease) backwards}
.slot-c .rise{animation-delay:.25s}.slot-l .rise{animation-delay:.45s}.slot-r .rise{animation-delay:.6s}
.lh-copy>*{animation:rise .9s var(--ease) backwards}
.lh-copy>:nth-child(1){animation-delay:.05s}.lh-copy>:nth-child(2){animation-delay:.15s}.lh-copy>:nth-child(3){animation-delay:.3s}
.lh-copy>:nth-child(4){animation-delay:.42s}.lh-copy>:nth-child(5){animation-delay:.54s}
@keyframes rise{from{opacity:0;transform:translateY(34px)}}
.lh-arcs .a1{animation:draw 2.4s var(--ease) .2s backwards}
@keyframes draw{from{stroke-dashoffset:1}}

.scroll-cue{position:relative;z-index:1;display:flex;justify-content:center;padding:6px 0 30px;color:#7e8379;font-size:10px;letter-spacing:.3em}
.scroll-cue span{display:flex;flex-direction:column;align-items:center;gap:12px}
.scroll-cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- trust ticker ---------- */
.ticker{border-block:1px solid rgba(255,255,255,.075);background:#0a0c0b;overflow:hidden}
.ticker-track{display:flex;gap:56px;width:max-content;padding:22px 0;white-space:nowrap;font-size:12px;letter-spacing:.22em;color:#aaa99f}
.ticker-track span{display:inline-flex;align-items:center;gap:56px}
.ticker-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ---------- feature scenes ---------- */
.scenes-intro{padding:clamp(72px,10vw,140px) 0 clamp(8px,2vw,24px);text-align:center}
.scenes-intro h2{font-size:clamp(38px,5.6vw,76px);font-weight:500;letter-spacing:-.07em;line-height:1.05;margin:20px auto 0;max-width:15ch}
.scenes-intro .serif-italic{color:var(--gold);font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.05em}
.scenes-intro p{max-width:520px;margin:24px auto 0;color:#a9aaa1;line-height:1.9}

.scene{position:relative}
.scene-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,5vw,80px);padding-block:clamp(56px,9vw,120px)}
.scene.flip .txt{order:2}
.scene.flip .vis{order:1}
.txt{max-width:500px}
.scene.flip .txt{justify-self:start}
.txt .kicker{display:block;margin-bottom:18px}
.txt h2{font-size:clamp(40px,5vw,72px);font-weight:500;letter-spacing:-.07em;line-height:1.04;margin:0 0 20px}
.txt h2 em{display:block;color:var(--gold);font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.055em}
.txt>p{color:#b4b5ad;font-size:clamp(15px,1.3vw,18px);line-height:1.8;margin:0 0 28px;max-width:44ch}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.chips li{font-size:12px;letter-spacing:.04em;color:var(--gold-light);border:1px solid rgba(208,176,130,.32);border-radius:99px;padding:8px 15px;background:rgba(208,176,130,.05)}
.txt .text-link{margin-top:30px}
.vis{position:relative;display:grid;place-items:center;min-height:0}
.vis .ph{--w:min(310px,33vh);position:relative;z-index:1}
.vis .ring{position:absolute;z-index:0;width:min(640px,125%);aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;pointer-events:none}
.vis .ring svg{width:100%;height:100%;overflow:visible}
.vis .ring circle{fill:none;stroke:var(--gold);vector-effect:non-scaling-stroke}
.vis .ring .r1{stroke-width:1.4;stroke-opacity:.38;stroke-dasharray:2 7 90 7 2 14;stroke-dashoffset:0}
.vis .ring .r2{stroke-width:1;stroke-opacity:.18}
.vis .halo{position:absolute;z-index:0;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(190,145,80,.20),transparent 66%);filter:blur(10px)}
.sample-note{margin:0;text-align:center;color:#6f746a;font-size:10px;letter-spacing:.16em;padding-bottom:40px}

/* ---------- privacy scene extras ---------- */
.checks{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:14px}
.checks li{display:flex;align-items:center;gap:14px;font-size:15px;color:#e6e0d3}
.checks i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#17140f;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800}

/* ---------- closing ---------- */
.fin{position:relative;overflow:hidden;text-align:center;padding:clamp(100px,14vw,200px) 0;border-top:1px solid rgba(255,255,255,.07);background:radial-gradient(ellipse at 50% 100%,rgba(162,117,64,.14),transparent 60%)}
.fin .arcs{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(1300px,170vw);aspect-ratio:1;pointer-events:none}
.fin .arcs svg{width:100%;height:100%}
.fin .arcs circle{fill:none;stroke:var(--gold);vector-effect:non-scaling-stroke}
.fin-in{position:relative;z-index:1}
.fin h2{font-size:clamp(46px,8vw,120px);font-weight:500;letter-spacing:-.08em;line-height:1;margin:22px 0 26px}
.fin h2 em{display:block;color:var(--gold);font-family:var(--serif);font-weight:400;letter-spacing:-.06em}
.fin p{color:#aeb0a7;max-width:480px;margin:0 auto 38px;line-height:1.9}
.fin .btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* =====================================================
   Scroll-driven motion. Only when supported and allowed.
   ===================================================== */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){

  /* hero parallax tied to page scroll */
  .lh-arcs{animation:spin linear both;animation-timeline:scroll(root);animation-range:0 120vh}
  @keyframes spin{to{rotate:34deg;scale:1.12;translate:-4% 6%}}
  .slot-c .ph{animation:pc linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .slot-l .ph{animation:pl linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .slot-r .ph{animation:pr linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes pc{to{translate:0 -9%}}
  @keyframes pl{to{translate:-12% -26%;rotate:-5deg}}
  @keyframes pr{to{translate:10% -17%;rotate:5deg}}
  .lh-copy{animation:copyaway linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  @keyframes copyaway{to{opacity:.0;translate:0 -40px}}
  .scroll-cue{animation:copyaway linear both;animation-timeline:scroll(root);animation-range:0 25vh}

  /* ticker drifts sideways as it passes */
  .ticker-track{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes drift{from{translate:0 0}to{translate:-34% 0}}

  /* pinned scenes */
  .scene{height:210vh;view-timeline:--sc block}
  .scene-in{position:sticky;top:0;height:100vh;padding-block:92px 24px;box-sizing:border-box}
  .scene .vis .ph{animation:phone linear both;animation-timeline:--sc;animation-range:cover 0% cover 100%}
  @keyframes phone{
    0%{opacity:0;translate:0 140px;rotate:7deg;scale:.9}
    26%{opacity:1;translate:0 0;rotate:0deg;scale:1}
    70%{opacity:1;translate:0 0;rotate:0deg;scale:1}
    100%{opacity:0;translate:0 -110px;rotate:-5deg;scale:.96}
  }
  .scene.flip .vis .ph{animation-name:phoneflip}
  @keyframes phoneflip{
    0%{opacity:0;translate:0 140px;rotate:-7deg;scale:.9}
    26%{opacity:1;translate:0 0;rotate:0deg;scale:1}
    70%{opacity:1;translate:0 0;rotate:0deg;scale:1}
    100%{opacity:0;translate:0 -110px;rotate:5deg;scale:.96}
  }
  .scene .ring{animation:ringspin linear both;animation-timeline:--sc}
  @keyframes ringspin{from{rotate:-50deg;scale:.8;opacity:.0}25%{opacity:1}75%{opacity:1}to{rotate:60deg;scale:1.05;opacity:0}}
  .scene .halo{animation:halo linear both;animation-timeline:--sc}
  @keyframes halo{from{opacity:0;scale:.6}30%{opacity:1;scale:1}70%{opacity:1;scale:1}to{opacity:0;scale:1.2}}
  .scene .txt{animation:txtout linear both;animation-timeline:--sc;animation-range:cover 66% cover 94%}
  @keyframes txtout{to{opacity:0;translate:0 -50px}}
  .scene .txt>*{animation:txtin ease-out both;animation-timeline:--sc}
  .scene .txt>:nth-child(1){animation-range:cover 6% cover 22%}
  .scene .txt>:nth-child(2){animation-range:cover 9% cover 26%}
  .scene .txt>:nth-child(3){animation-range:cover 13% cover 30%}
  .scene .txt>:nth-child(4){animation-range:cover 17% cover 34%}
  .scene .txt>:nth-child(5){animation-range:cover 20% cover 38%}
  @keyframes txtin{from{opacity:0;translate:0 46px}}

  /* mobile: shorter pin, stacked */
  @media (max-width:860px){
    .scene{height:190vh}
    .scene-in{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:18px;align-content:start;padding-block:84px 18px}
    .scene.flip .txt,.scene.flip .vis{order:initial}
    .txt h2{font-size:clamp(34px,10vw,48px);margin-bottom:12px}
    .txt>p{margin-bottom:16px;font-size:15px;line-height:1.6}
    .txt .kicker{margin-bottom:10px}
    .chips li{padding:6px 12px;font-size:11px}
    .scene-in{grid-template-rows:auto minmax(0,1fr)}
    .vis{align-self:stretch;align-items:start;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
    .vis .ph{--w:min(64vw,290px)}
    .vis .ring{width:150%;top:34%}
    .checks{gap:9px}
    .checks li{font-size:14px}
  }

  /* closing */
  .fin .arcs{animation:finspin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes finspin{from{rotate:-40deg;scale:.7}to{rotate:50deg;scale:1.1}}
  .fin-in{animation:finin ease-out both;animation-timeline:view();animation-range:entry 10% entry 90%}
  @keyframes finin{from{opacity:0;translate:0 80px;scale:.96}}
}
}

/* ---------- mobile static layout ---------- */
@media (max-width:860px){
  .lh-grid{grid-template-columns:1fr}
  .lh-copy{padding-bottom:8px}
  .lh h1{font-size:clamp(50px,13vw,76px)}
  .lh-stage{max-width:460px}
  .lh-arcs{right:-45%;top:-8%}
  .scene-in{grid-template-columns:1fr;text-align:left}
  .scene.flip .txt,.scene.flip .vis{order:initial}
  .vis .ph{--w:min(62vw,300px)}
  .ticker-track{font-size:11px;gap:36px}
  .ticker-track span{gap:36px}
}

@media (prefers-reduced-motion:reduce){
  .lh-copy>*,.rise,.lh-arcs .a1,.scroll-cue i{animation:none!important}
}