/* GhostInk marketing pages — builds on the tokens in styles.css */
:root{--serif:'Instrument Serif',Georgia,'Times New Roman',serif;--gold:#ffd05a;--uv:#54fbd4}
.skip-link{position:absolute;left:-999px;top:8px;z-index:50;background:var(--violet-2);color:#ffffff;padding:8px 14px;border-radius:10px}
.skip-link:focus{left:12px}

/* serif headlines everywhere (studio hero included) */
.hero h1,.hero-lg h1,.page-hero h1,.section-head h2,.cta-band h2,.prose h2,.statement,.feature-text h3,.steps h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.hero h1{font-size:clamp(46px,7vw,80px);line-height:1.04}

/* sticky glass header + nav */
.topbar{position:sticky;top:0;z-index:30;background:rgba(11,17,28,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);flex-wrap:nowrap}
.site-nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.site-nav a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 14px;border-radius:99px;transition:.2s}
.site-nav a:hover{color:var(--text);background:rgba(70,198,168,.16)}
.site-nav a[aria-current=page]{color:var(--text);background:rgba(70,198,168,.24)}
.site-nav .nav-cta{color:#121e32;background:var(--gold);box-shadow:0 6px 22px rgba(255,208,90,.22)}
.site-nav .nav-cta:hover{background:#ffdb82;color:#121e32}
.topbar .privacy-chip{margin-inline-start:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:99px;font-weight:700;font-size:16px;text-decoration:none;border:1px solid transparent;transition:.2s;cursor:pointer}
.btn-primary{color:#121e32;background:var(--gold);box-shadow:0 12px 34px rgba(255,208,90,.25)}
.btn-primary:hover{background:#ffdb82;transform:translateY(-1px)}
.btn-ghost{color:var(--text);border-color:rgba(128,252,223,.4)}
.btn-ghost:hover{border-color:var(--uv);background:rgba(84,251,212,.12)}
.btn[disabled]{opacity:.65;cursor:progress}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn-block{width:100%}

/* ---------- HOME HERO ---------- */
.hero-lg{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;text-align:start;padding:72px 0 24px}
.hero-lg::before{content:"";position:absolute;inset:-60px -120px auto auto;width:640px;height:520px;z-index:-1;background:radial-gradient(closest-side,rgba(45,229,186,.42),transparent);filter:blur(30px);pointer-events:none}
.hero-lg h1{margin:0;font-size:clamp(46px,6.4vw,86px);line-height:1.02;text-shadow:none}
.hero-lg .lead{margin:22px 0 0;max-width:520px;font-size:18.5px;color:#c2cdda;text-align:start}
.assure{margin:18px 0 0;font-size:14.5px;color:var(--muted)}
.hero-lg .btn-row{justify-content:flex-start}

/* the UV note */
.torch-card{margin:0}
.torch-scene{--hx:50%;--hy:50%;position:relative;padding:34px 30px;border-radius:30px;overflow:hidden;cursor:crosshair;touch-action:pan-y;background:linear-gradient(160deg,#0e1728,#070b13 70%);border:1px solid rgba(106,251,217,.3);box-shadow:0 40px 100px rgba(3,7,14,.65),inset 0 0 0 1px rgba(255,255,255,.03)}
.torch-scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 170px at var(--hx) var(--hy),rgba(84,251,212,.26),transparent 70%);mix-blend-mode:screen}
.uv-note{display:grid;grid-template-rows:repeat(4,58px);align-content:start;font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);line-height:58px;white-space:nowrap}
.uv-note span{display:block;overflow:hidden;text-overflow:clip}
.note-visible{color:#a8ebdb}
.note-visible span:nth-child(even){border-bottom:0}
.note-hidden{position:absolute;inset:34px 30px;color:var(--gold);font-style:italic;text-shadow:0 0 18px rgba(255,208,90,.75),0 0 4px rgba(255,208,90,.9);-webkit-mask-image:radial-gradient(circle 135px at var(--hx) var(--hy),#000000 35%,rgba(0,0,0,.55) 65%,transparent 100%);mask-image:radial-gradient(circle 135px at var(--hx) var(--hy),#000000 35%,rgba(0,0,0,.55) 65%,transparent 100%)}
.torch-card figcaption{margin:14px 6px 0;font-size:13.5px;color:var(--muted)}

/* ---------- SECTIONS ---------- */
.section{padding:100px 0 0}
.section-head{max-width:680px;margin:0 0 40px;text-align:start}
.section-head h2{margin:0;font-size:clamp(34px,4.6vw,56px);line-height:1.08}
.section-head p{margin:12px 0 0;color:#bdc8d5;font-size:17.5px}

/* feature rows */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.feature-row:last-child{border-bottom:1px solid var(--line)}
.feature-row:nth-child(even) .specimen{order:-1}
.feature-text h3{margin:0 0 10px;font-size:clamp(32px,3.6vw,44px);line-height:1.1}
.feature-text p{margin:0 0 14px;color:#c2cdda;font-size:17px;max-width:480px}
.feature-text ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:7px;font-size:15px;color:#abe7d9}
.feature-text li{padding-inline-start:22px;position:relative}
.feature-text li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--uv);box-shadow:0 0 10px var(--uv)}
.text-link{color:var(--gold);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.text-link:hover{color:#ffdb82}

.specimen{position:relative;min-height:250px;border-radius:26px;display:grid;place-items:center;padding:28px;overflow:hidden;border:1px solid rgba(106,251,217,.26);background:radial-gradient(ellipse at 30% 0,rgba(45,229,186,.28),transparent 60%),linear-gradient(160deg,#121d32,#090f1a)}
.specimen small{position:absolute;inset:auto 22px 16px 22px;color:var(--muted);font-size:13px}

/* 1 text */
.spec-text{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);color:#a8ebdb;text-align:center;line-height:1.2;margin:0 0 14px}
.spec-text i{display:inline-block;width:3px;height:.72em;margin:0 1.5px;vertical-align:-.04em;border-radius:2px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
/* 2 pixels */
.pix{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;width:min(100%,360px);margin-bottom:22px}
.pix span{aspect-ratio:1;border-radius:3px;background:#296f5e}
.pix .b{background:#378b78}.pix .c{background:#1e2f4b}.pix .d{background:#41bb9f}
.pix .k{background:var(--gold);box-shadow:0 0 10px rgba(255,208,90,.8)}
/* 3 frames */
.frames{position:relative;width:min(100%,330px);aspect-ratio:16/10;margin-bottom:20px;border-radius:14px;background:linear-gradient(180deg,#297e6a 0%,#44ceae 55%,#f0a46a 100%);box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden}
.frames::before{content:"";position:absolute;inset:auto -10% -18% -10%;height:55%;background:#121d32;border-radius:50% 50% 0 0/100% 100% 0 0}
.frames i{position:absolute;inset:18% 52% 38% 10%;border-radius:8px;border:2px solid var(--cyan);background:linear-gradient(135deg,#70e5ff,#54fbd4);box-shadow:0 0 22px rgba(112,229,255,.6);opacity:.92}
.frames b{position:absolute;inset:auto 8% 10% auto;font:600 12px var(--mono);color:var(--cyan)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;position:relative}
.steps li{counter-increment:s;padding:0 28px 0 0;position:relative}
.steps li::before{content:counter(s);font-family:var(--serif);font-size:72px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(128,252,223,.55);display:block;margin-bottom:6px}
.steps h3{margin:0 0 6px;font-size:28px}
.steps p{margin:0;color:#bdc8d5;font-size:16px}

/* privacy statement */
.statement{margin:0;max-width:900px;font-size:clamp(28px,3.9vw,46px);line-height:1.22;color:#b0fdeb}
.statement em{color:var(--gold)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.facts h3{margin:0 0 4px;font-size:17px}
.facts p{margin:0;color:#bdc8d5;font-size:15px}

/* FAQ */
.faq{max-width:800px;display:grid;gap:0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:18px;padding:20px 0;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px var(--mono);color:var(--gold);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:#ced6e0;font-size:16px;max-width:660px}

/* CTA */
.cta-band{margin:110px 0 0;padding:64px 40px;text-align:start;border-radius:34px;position:relative;overflow:hidden;border:1px solid rgba(106,251,217,.34);background:radial-gradient(ellipse at 85% 0,rgba(255,208,90,.16),transparent 55%),radial-gradient(ellipse at 10% 100%,rgba(45,229,186,.5),transparent 60%),#0e1728}
.cta-band h2{margin:0;font-size:clamp(36px,5vw,64px);line-height:1.04;max-width:640px}
.cta-band p{margin:14px 0 0;max-width:520px;color:#c2cdda;font-size:17.5px}
.cta-band a:not(.btn){color:var(--gold)}

/* ---------- ABOUT / CONTACT ---------- */
.page-hero{text-align:start;padding:80px 0 6px;max-width:820px}
.page-hero h1{margin:0;font-size:clamp(46px,7vw,84px);line-height:1.02;text-shadow:none}
.page-hero p{margin:18px 0 0;max-width:600px;color:#c2cdda;font-size:19px}
.prose{max-width:720px;margin:40px 0 0}
.prose h2{font-size:clamp(30px,3.4vw,40px);line-height:1.1;margin:44px 0 10px}
.prose p,.prose li{color:#abdfd3;font-size:17px}
.prose ul{padding-inline-start:20px}
.prose a{color:var(--gold);text-underline-offset:3px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:6px}
.values .panel-card{padding:20px 0 0;border:0;border-top:2px solid var(--uv);border-radius:0;background:none}
.values .panel-card:nth-child(2){border-top-color:var(--gold)}
.values .panel-card:nth-child(3){border-top-color:var(--cyan)}
.panel-card h3{margin:0 0 6px;font-size:19px}
.panel-card p{margin:0 0 10px;color:#bdc8d5;font-size:15.5px}
.panel-card p:last-child{margin-bottom:0}

.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;margin-top:44px;align-items:start}
.form-card{padding:30px;border:1px solid rgba(106,251,217,.3);border-radius:30px;background:linear-gradient(155deg,rgba(29,43,67,.97),rgba(14,22,37,.98) 72%);box-shadow:0 30px 90px rgba(3,7,14,.5)}
.form-title{margin:0 0 18px;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1}
.form-hint{margin:-6px 0 16px;font-size:13px;color:var(--muted)}
.form-card .field:last-of-type{margin-bottom:20px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:14.5px;border:1px solid var(--line)}
.form-status.ok{color:var(--ok);border-color:rgba(140,240,198,.4);background:rgba(140,240,198,.08)}
.form-status.err{color:var(--bad);border-color:rgba(255,156,171,.4);background:rgba(255,156,171,.08)}
.side-list{display:grid;gap:26px;padding-top:6px}
.side-list .panel-card{padding:0 0 0 18px;border:0;border-left:2px solid var(--uv);border-radius:0;background:none}
.side-list .panel-card:nth-child(2){border-left-color:var(--gold)}
.side-list .panel-card:nth-child(3){border-left-color:var(--cyan)}
.side-list a{color:var(--gold);text-underline-offset:3px}
.req{color:var(--bad)}

/* footer */
.footer{margin-top:90px}
.footer a{text-decoration:none;color:#ced6e0}
.footer a:hover{color:var(--gold);text-decoration:underline}

@media(max-width:900px){
  .hero-lg{grid-template-columns:1fr;gap:34px;padding-top:44px}
  .feature-row{grid-template-columns:1fr;gap:24px}
  .feature-row:nth-child(even) .specimen{order:0}
  .steps,.facts,.values{grid-template-columns:1fr;gap:26px}
  .contact-grid{grid-template-columns:1fr;gap:30px}
  .section{padding-top:72px}
  .cta-band{padding:44px 24px;margin-top:80px}
}
@media(max-width:760px){
  .topbar{height:auto;min-height:64px;padding:10px 0;flex-wrap:wrap}
  .site-nav{margin-inline-start:0;width:100%;overflow-x:auto;gap:2px}
  .site-nav a{padding:7px 12px;font-size:14px;white-space:nowrap}
  .uv-note{font-size:25px;grid-template-rows:repeat(4,50px);line-height:50px}
  .torch-scene{padding:26px 20px}.note-hidden{inset:26px 20px}
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html,body{overflow-x:clip}
.hero-lg>*{min-width:0}
.spec-text{max-width:100%;overflow-wrap:anywhere}
@media(max-width:760px){.hero-lg::before{inset:-40px -40px auto auto;width:360px}.spec-text{font-size:25px}}

/* ===== v3: one typeface (IBM Plex Mono) + polish ===== */
:root{--font:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--serif:var(--font);--mono:var(--font)}
body{font-family:var(--font);font-size:15px;line-height:1.75}
.brand-copy strong{font-weight:700;letter-spacing:-.03em}
.brand-copy small{font-size:11.5px}

/* headlines */
.hero h1,.hero-lg h1,.page-hero h1{font-weight:500;letter-spacing:-.05em}
.hero-lg h1{font-size:clamp(34px,4.8vw,64px);line-height:1.08}
.page-hero h1{font-size:clamp(34px,5.4vw,68px);line-height:1.06}
.hero h1{font-size:clamp(34px,5.4vw,62px);line-height:1.1}
.section-head h2,.cta-band h2,.prose h2,.feature-text h3,.steps h3{font-weight:500;letter-spacing:-.04em}
.section-head h2{font-size:clamp(26px,3.4vw,42px);line-height:1.15}
.cta-band h2{font-size:clamp(28px,3.8vw,48px);line-height:1.1}
.prose h2{font-size:clamp(23px,2.6vw,30px)}
.feature-text h3{font-size:clamp(24px,2.6vw,32px)}
.steps h3{font-size:19px;font-weight:600;letter-spacing:-.03em}
.statement{font-size:clamp(20px,2.7vw,32px);line-height:1.5;font-weight:400;letter-spacing:-.035em}
.statement em{font-style:normal;color:var(--gold);text-shadow:0 0 22px rgba(255,208,90,.45)}
.form-title{font-size:25px;font-weight:500;letter-spacing:-.04em}
.cursor::after{content:"";display:inline-block;width:.5em;height:.09em;margin-inline-start:.12em;background:var(--gold);box-shadow:0 0 14px var(--gold);animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

/* body copy sizes for mono */
.hero-lg .lead{font-size:15.5px;max-width:500px;color:#c2cdda}
.page-hero p{font-size:16px;max-width:560px}
.section-head p{font-size:15px}
.feature-text p{font-size:14.5px}
.feature-text ul{font-size:13px}
.prose p,.prose li{font-size:14.5px}
.steps p,.facts p,.panel-card p,.side-list p{font-size:13.5px}
.faq summary{font-size:15px;font-weight:500}
.faq details p{font-size:14px}
.cta-band p{font-size:15px}
.assure,.torch-card figcaption,.specimen small,.form-hint{font-size:12.5px}
.btn{font-size:14px;font-weight:600;letter-spacing:-.01em}
.site-nav a{font-size:13px;font-weight:500}
.text-link{font-size:14px}
.steps li::before{font-family:var(--font);font-weight:700;font-size:54px;-webkit-text-stroke:1px rgba(128,252,223,.5)}

/* hero atmosphere: dot grid that fades out */
.hero-lg::after{content:"";position:absolute;z-index:-1;top:-76px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;background-image:radial-gradient(rgba(116,251,220,.28) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 60% 35%,#000000 0,transparent 72%);mask-image:radial-gradient(ellipse 70% 80% at 60% 35%,#000000 0,transparent 72%)}

/* UV note: gradient edge + glow */
.torch-scene{border:1px solid transparent;background:linear-gradient(165deg,#0e1728,#060b14 75%) padding-box,linear-gradient(140deg,rgba(84,251,212,.9),rgba(84,251,212,.15) 45%,rgba(255,208,90,.55)) border-box;box-shadow:0 0 0 1px rgba(255,255,255,.02),0 40px 110px rgba(3,7,14,.7),0 0 80px rgba(45,229,186,.22)}
.uv-note{font-size:clamp(15px,1.95vw,22px);grid-template-rows:repeat(4,52px);line-height:52px;letter-spacing:-.04em}
.note-hidden{font-style:normal;font-weight:500}
.note-visible{font-weight:400}
.specimen{border:1px solid transparent;background:radial-gradient(ellipse at 25% 0,rgba(45,229,186,.32),transparent 62%),linear-gradient(160deg,#121d32,#080e19) padding-box,linear-gradient(150deg,rgba(84,251,212,.55),rgba(84,251,212,.08) 50%,rgba(255,208,90,.3)) border-box}
.spec-text{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.04em}
.cta-band{border:1px solid transparent;background:radial-gradient(ellipse at 85% 0,rgba(255,208,90,.18),transparent 55%),radial-gradient(ellipse at 10% 100%,rgba(45,229,186,.5),transparent 60%),linear-gradient(#0e1728,#0e1728) padding-box,linear-gradient(140deg,rgba(84,251,212,.8),rgba(84,251,212,.12) 50%,rgba(255,208,90,.5)) border-box}
.btn-primary{box-shadow:0 10px 40px rgba(255,208,90,.28),inset 0 1px 0 rgba(255,255,255,.5)}

/* decode effect */
.dc-x{color:var(--gold);text-shadow:0 0 14px rgba(255,208,90,.6)}

@media(max-width:760px){
  .uv-note{font-size:clamp(14px,4vw,17px);grid-template-rows:repeat(4,46px);line-height:46px}
  .hero-lg h1{font-size:clamp(30px,8.4vw,40px)}
  .page-hero h1{font-size:clamp(32px,9vw,44px)}
}