:root{
  --ink:#22303c; --ink2:#5a6b78; --paper:rgba(252,250,246,.86); --accent:#2f7fa6; --gold:#d9a13f;
  --fd:"Newsreader",Georgia,serif; --fb:"Inter",system-ui,sans-serif;
  /* precision tokens */
  --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px;
  --rhythm:clamp(120px,20vh,220px); --r1:8px; --r2:18px;
  --t:.45s; --e:cubic-bezier(.2,.9,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#dfe9ef;color:var(--ink);font-family:var(--fb);overflow-x:hidden}
#world{position:fixed;inset:0;z-index:0}

.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:baseline;justify-content:space-between;padding:var(--s3) clamp(20px,4vw,52px)}
.brand{font-family:var(--fd);font-weight:600;font-style:italic;font-size:1.4rem;color:var(--ink);text-decoration:none;text-shadow:0 1px 8px rgba(252,250,246,.8)}
.brand span{color:var(--accent)}
.for{font-size:.78rem;color:var(--ink2);text-shadow:0 1px 8px rgba(252,250,246,.8)}
.for b{color:var(--accent)}

/* journey gauge — the story's telemetry */
.gauge{position:fixed;left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%);z-index:20;display:flex;gap:10px;align-items:stretch;pointer-events:none}
.gauge .line{width:2px;height:46vh;background:rgba(34,48,60,.18);border-radius:2px;position:relative}
#gdrop{position:absolute;left:50%;top:0;width:11px;height:14px;transform:translate(-50%,-50%);
  background:var(--accent);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;box-shadow:0 2px 8px rgba(47,127,166,.5)}
.gauge .stops{display:flex;flex-direction:column;justify-content:space-between;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}

.act{position:relative;z-index:5;min-height:120vh;display:flex;align-items:center;padding:var(--rhythm) clamp(20px,5vw,64px)}
.panel{max-width:34rem;background:var(--paper);backdrop-filter:blur(8px);border-radius:var(--r2);
  padding:clamp(24px,3.4vw,44px);box-shadow:0 18px 50px rgba(34,48,60,.14)}
.panel.right{margin-left:auto}
.panel.center{margin:0 auto;text-align:center;max-width:40rem}
.panel.first{background:transparent;box-shadow:none;backdrop-filter:none;max-width:44rem}
.eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:600}
h1{font-family:var(--fd);font-weight:600;font-size:clamp(2.6rem,6.4vw,5rem);line-height:1.04;margin:var(--s3) 0;letter-spacing:-.01em}
h1 em,.act h2 em{font-style:italic;color:var(--accent)}
.act h2{font-family:var(--fd);font-weight:600;font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.06;margin:var(--s3) 0;letter-spacing:-.01em}
.act p{color:var(--ink2);font-size:1.08rem;line-height:1.75;max-width:52ch}
.act p b{color:var(--ink)}
.cue{display:inline-block;margin-top:var(--s5);font-family:var(--fd);font-style:italic;font-size:1.15rem;color:var(--ink2)}

.cta{margin-top:var(--s5);display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}
.btn{font-family:var(--fb);font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;border:none;
  padding:14px 28px;border-radius:40px;transition:transform .18s var(--e),box-shadow var(--t)}
.btn.solid{background:var(--accent);color:#fdfcf9;box-shadow:0 10px 26px rgba(47,127,166,.35)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(47,127,166,.45)}
.btn.ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fdfcf9}

.finale footer{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(34,48,60,.16);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);color:var(--ink2);font-size:.78rem}

@media(max-width:820px){
  .gauge{display:none}
  .act{min-height:105vh}
  .panel,.panel.right{margin:0 auto}
}