@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800&family=IBM+Plex+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@500&display=swap");

:root{
  --navy:#0C2B4A;
  --deep:#071A2C;
  --sheet:#D9EAF7;
  --ink:#071A2C;
  --lamp:#F6D35B;
  --wash:#163E66;
  --mute:#4A6A86;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--navy);color:var(--sheet);font-family:"IBM Plex Sans",system-ui,sans-serif;line-height:1.5}
img{max-width:100%;display:block}
a{color:var(--lamp);text-decoration:none}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:800;letter-spacing:-.03em;line-height:.95;color:#fff}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--lamp);color:var(--deep);padding:8px}

/* crop marks — unique print-shop chrome */
.crop{position:fixed;z-index:40;width:28px;height:28px;pointer-events:none;border-color:var(--lamp)}
.crop.tl{top:10px;left:10px;border-top:2px solid;border-left:2px solid}
.crop.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid}
.crop.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid}
.crop.br{bottom:10px;right:10px;border-bottom:2px solid;border-right:2px solid}

/* sprocket gutter */
.sprock{
  position:fixed;top:0;bottom:0;left:0;width:42px;z-index:5;
  background:repeating-radial-gradient(circle at 21px 18px, var(--sheet) 0 5px, transparent 6px 36px);
  opacity:.35;pointer-events:none;animation:cx-roll 18s linear infinite;
}
.sprock.r{left:auto;right:0}
@keyframes cx-roll{to{background-position:0 72px}}

.bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 56px;background:rgba(7,26,44,.92);
  border-bottom:1px solid rgba(246,211,91,.25);
}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.logo small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--lamp);text-transform:uppercase}
.logo strong{font-family:Fraunces,serif;font-size:18px}
.nav{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--sheet);font-size:13px}
.nav a[aria-current=page],.nav a:hover{color:var(--lamp)}
.end{display:flex;gap:8px;align-items:center}
.en,.ghost{
  border:1px solid var(--lamp);color:var(--lamp);background:transparent;
  padding:8px 12px;font:600 12px/1 "IBM Plex Sans",sans-serif;cursor:pointer;
}
.cta,.pill,button.cta{
  background:var(--lamp);color:var(--deep);border:0;padding:10px 16px;
  font:700 13px/1 "IBM Plex Sans",sans-serif;cursor:pointer;
  background-image:linear-gradient(110deg,var(--lamp) 0 40%,#fff3b0 50%,var(--lamp) 60% 100%);
  background-size:220% 100%;animation:cx-shine 2.8s linear infinite;
}
@keyframes cx-shine{to{background-position:200% 0}}
.menu{display:none;background:transparent;border:0;color:var(--lamp);font-size:22px}
@media(max-width:980px){.nav{display:none}.menu{display:block}.bar{padding:12px 18px}.sprock{display:none}}
.drawer{display:none;background:var(--deep);padding:16px 24px}
.drawer a{display:block;padding:10px 0;border-bottom:1px solid rgba(217,234,247,.12);color:var(--sheet)}

.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  min-height:86vh;position:relative;overflow:hidden;
  background:
    linear-gradient(118deg, var(--navy) 0 54%, var(--wash) 54% 100%);
}
.hero-copy{padding:72px 8vw 64px;position:relative;z-index:2}
.k{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lamp);border:1px solid var(--lamp);display:inline-block;padding:6px 10px;
  animation:cx-pulse 3s ease-in-out infinite;
}
@keyframes cx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(246,211,91,.35)}50%{box-shadow:0 0 18px rgba(246,211,91,.28)}}
.hero h1{font-size:clamp(40px,6.4vw,86px);margin:18px 0 16px;max-width:14ch}
.lead{font-size:18px;max-width:42ch;color:var(--sheet)}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}
.plate{
  margin:48px 6vw 48px 0;border:1px dashed rgba(246,211,91,.55);
  padding:18px;position:relative;animation:cx-float 6s ease-in-out infinite;
}
@keyframes cx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.plate img{width:100%;height:min(58vh,560px);object-fit:cover;filter:contrast(1.15) saturate(.7)}
.plate b{
  position:absolute;left:28px;bottom:28px;background:var(--lamp);color:var(--deep);
  font-family:"IBM Plex Mono",monospace;font-size:12px;padding:8px 12px;
}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}.plate{margin:0 18px 32px}}

.tape{overflow:hidden;border-top:1px solid rgba(246,211,91,.3);border-bottom:1px solid rgba(246,211,91,.3);padding:12px 0;background:var(--deep)}
.tape b{display:inline-block;white-space:nowrap;color:var(--lamp);letter-spacing:.16em;text-transform:uppercase;font-size:12px;animation:cx-marq 22s linear infinite}
@keyframes cx-marq{from{transform:translateX(6%)}to{transform:translateX(-50%)}}

.wrap{width:min(1120px,92vw);margin:0 auto;padding:72px 0}
.sheet{
  background:var(--sheet);color:var(--ink);padding:56px 8vw;
}
.sheet h2,.sheet h3{color:var(--navy)}
.sheet p,.sheet li{color:#234}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:800px){.grid3,.grid2{grid-template-columns:1fr}}
.card{
  background:rgba(7,26,44,.55);border:1px dashed rgba(246,211,91,.35);padding:22px;
  animation:cx-glow 5s ease-in-out infinite;
}
.sheet .card{background:#fff;border:1px dashed #0c2b4a55;color:var(--ink)}
@keyframes cx-glow{0%,100%{box-shadow:0 0 0 rgba(246,211,91,0)}50%{box-shadow:0 0 22px rgba(246,211,91,.16)}}
.card:hover{transform:translateY(-6px);transition:transform .3s}
.num{font-family:"IBM Plex Mono",monospace;color:var(--lamp);font-size:28px}
.sheet .num{color:var(--navy)}
.amt{font-family:Fraunces,serif;font-size:42px;color:var(--lamp);margin:8px 0}
.sheet .amt{color:var(--navy)}

.specs{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(246,211,91,.25)}
.specs div{padding:22px;border-right:1px solid rgba(246,211,91,.25)}
.specs div:last-child{border:0}
.specs b{display:block;font-family:Fraunces,serif;font-size:28px;color:var(--lamp)}
@media(max-width:800px){.specs{grid-template-columns:1fr 1fr}.specs div{border-bottom:1px solid rgba(246,211,91,.25)}}

.ph{padding:120px 8vw 40px}
.ph h1{font-size:clamp(36px,6vw,72px)}
.sub{max-width:48ch;color:var(--sheet)}

footer.colo{padding:64px 8vw 100px;border-top:8px solid var(--lamp);background:var(--deep)}
.colo h2{font-size:clamp(36px,8vw,92px);margin:0 0 12px}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0}
.cols a{display:block;color:var(--sheet);margin:6px 0;font-size:14px}
.cols a:hover{color:var(--lamp)}
.keys{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lamp)}
@media(max-width:800px){.cols{grid-template-columns:1fr 1fr}}

.lamp{
  position:fixed;right:16px;bottom:16px;z-index:50;
  background:var(--lamp);color:var(--deep);padding:12px 14px;font-weight:800;font-size:13px;
  animation:cx-pulse 2.4s ease-in-out infinite;
}

.gt-wrap{position:fixed;left:16px;bottom:16px;z-index:50;background:var(--deep);border:1px solid var(--lamp);padding:8px 10px;font-size:12px}
.goog-te-banner-frame,.skiptranslate iframe{display:none!important}
body{top:0!important}

.co{padding-top:40px}
.steps{display:flex;gap:18px;list-style:none;padding:0}
.steps li{opacity:.55}
.steps li.on,.steps li.done{opacity:1;color:var(--lamp)}
.cog{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media(max-width:900px){.cog{grid-template-columns:1fr}}
.switch{display:flex;margin-bottom:12px}
.switch button{flex:1;background:transparent;color:var(--sheet);border:1px solid rgba(246,211,91,.3);padding:10px;cursor:pointer}
.switch button.on{background:var(--lamp);color:var(--deep)}
.prow{display:flex;border:1px dashed rgba(246,211,91,.3);padding:12px;margin:8px 0;cursor:pointer;gap:10px;align-items:center}
.prow[hidden]{display:none!important}
.prow-in{display:flex;justify-content:space-between;width:100%}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px}
input,select,textarea{background:var(--deep);color:var(--sheet);border:1px solid rgba(246,211,91,.35);padding:10px;font:inherit}
.err{display:none;color:#ffb4a2}
.err.show{display:block}
.addr{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
code{background:var(--deep);padding:8px;font-size:12px;word-break:break-all}
.ring{width:140px;margin:12px auto;position:relative}
.ring svg{width:140px;height:140px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:rgba(246,211,91,.2);stroke-width:8}
.ring .bar{stroke:var(--lamp);stroke-linecap:butt}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;color:var(--lamp)}

.faq details{border:1px dashed rgba(246,211,91,.3);padding:12px 16px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:700}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
}