/* AdForge Secure Intake - "The Seal"
   Self-hosted. No third-party requests. Warm-dark luxury, gold hairlines. */

@font-face{
  font-family:"Playfair Display";
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url("fonts/playfair-italic.woff2") format("woff2");
}

:root{
  --ink:#14110D;          /* warm near-black */
  --ink-2:#1c1813;        /* raised warm black */
  --gold:#B8945A;         /* AdForge gold */
  --gold-soft:#c9a96e;
  --cream:#F5F0E8;        /* text */
  --cream-dim:#b8b0a2;    /* muted text */
  --hair:rgba(184,148,90,.22);   /* gold hairline */
  --hair-2:rgba(184,148,90,.12);
  --serif:"Didot","Bodoni 72","Playfair Display","Hoefler Text",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Helvetica Neue",Arial,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* atmosphere */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.05;mix-blend-mode:overlay;
  background-image:url("grain.png");background-size:180px}
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60vmax 60vmax at 50% 38%, rgba(184,148,90,.14), rgba(184,148,90,0) 60%),
    radial-gradient(90vmax 70vmax at 50% 120%, rgba(184,148,90,.06), rgba(20,17,13,0) 55%),
    linear-gradient(180deg,#14110D 0%, #16130E 55%, #120F0A 100%);}

.stage{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:7vh 24px 0;}

.hero{width:100%;max-width:660px;text-align:center;display:flex;flex-direction:column;align-items:center}

/* ---- handshake channel (intro only) ---- */
.channel{position:absolute;top:calc(50% - 210px);left:0;right:0;display:none;flex-direction:column;
  align-items:center;pointer-events:none}
.channel .rule{display:block;height:1px;width:0;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.log{list-style:none;margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream-dim);min-height:96px}
.log li{opacity:0;transform:translateY(6px);margin:5px 0;transition:opacity .5s ease,transform .5s ease}
.log li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;
  background:var(--cream-dim);vertical-align:middle;transform:translateY(-1px)}
.log li.ok{color:var(--gold-soft)}
.log li.ok::before{background:var(--gold)}
.log li.in{opacity:1;transform:none}

/* ---- the seal ---- */
.seal{position:relative;width:170px;height:170px;display:grid;place-items:center;margin-bottom:34px}
.seal::before{content:"";position:absolute;width:270px;height:270px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(184,148,90,.16),rgba(184,148,90,0) 62%);
  animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
.mark{width:164px;height:164px;object-fit:contain;filter:drop-shadow(0 8px 26px rgba(0,0,0,.55))}
.bloom{position:absolute;width:220px;height:220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(184,148,90,.42), rgba(184,148,90,0) 62%);opacity:0}

/* ---- copy ---- */
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:22px}
.eyebrow .bar,.foot .bar{color:var(--hair);margin:0 .35em;font-weight:300}
.headline{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:.01em;
  font-size:clamp(34px,7vw,56px);line-height:1.04;color:var(--cream);margin-bottom:18px}
.subline{font-size:clamp(15px,2.6vw,17px);color:var(--cream-dim);max-width:46ch;margin:0 auto 34px;line-height:1.65}

.cta{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:2px;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border:1px solid rgba(245,240,232,.15);box-shadow:0 10px 30px rgba(184,148,90,.28),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s ease,box-shadow .25s ease;font-weight:600}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(184,148,90,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.cta svg{transition:transform .25s ease}
.cta:hover svg{transform:translateX(4px)}
.cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:40px auto 0;max-width:560px}
.trust li{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);
  padding:4px 16px;position:relative}
.trust li+li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:var(--hair)}

.how{list-style:none;counter-reset:s;margin:54px auto 0;max-width:520px;text-align:left;
  border-top:1px solid var(--hair-2);padding-top:26px}
.how li{display:flex;gap:16px;align-items:baseline;font-size:14px;color:var(--cream-dim);padding:9px 0;line-height:1.55}
.how .n{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.1em;flex:0 0 auto;padding-top:2px}

/* ---- footer ---- */
.foot{margin-top:clamp(52px,9vh,110px);padding:0 24px 44px;text-align:center;opacity:.8}
.wordmark{height:22px;width:auto;opacity:.85;margin-bottom:12px}
.foot p{font-size:11px;letter-spacing:.06em;color:var(--cream-dim);max-width:44ch;margin:0 auto}

/* ============ animated intro (only when html.anim) ============ */
html.anim .channel{display:flex}
html.anim .seal .mark{opacity:0;transform:scale(.86)}
html.anim .copy,html.anim .foot{opacity:0;transform:translateY(14px)}

/* seal strike */
html.anim.seal-in .mark{transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.4,.5,1);opacity:1;transform:scale(1)}
html.anim.seal-in .bloom{animation:bloom 1s ease-out .12s 1}
@keyframes bloom{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.15)}}

/* copy reveal */
html.anim.copy-in .channel{opacity:0;transition:opacity .6s ease}
html.anim.copy-in .copy,html.anim.copy-in .foot{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);opacity:1;transform:none}
html.anim.copy-in .headline{animation:none}

@media (prefers-reduced-motion: reduce){
  html.anim .channel{display:none}
  html.anim .seal .mark,html.anim .copy,html.anim .foot{
    opacity:1!important;transform:none!important;transition:none!important}
  .seal::before{animation:none;opacity:.7}
}

/* ---- responsive ---- */
@media (max-width:560px){
  .stage{padding-top:9vh}
  .seal{width:132px;height:132px;margin-bottom:26px}
  .mark{width:128px;height:128px}
  .trust li{padding:4px 11px}
  .how{margin-top:44px}
  .channel{top:calc(50% - 180px)}
}