:root { color-scheme:dark; --bg:#070c20; --surface:#0e1730; --surface-2:#0a1228; --border:#24325c; --text:#f3f1ea; --text-2:#c2cbe0; --gold:#bfa063; --ink:#0a1228; --serif:Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-padding-top:calc(var(--site-header-height,88px) + 24px); }
body { margin:0; background:var(--bg); color:var(--text); font:18px/1.65 var(--sans); }
body::before { content:''; position:absolute; inset:0 0 auto auto; width:min(65vw,900px); height:900px; background:url('assets/guilloche.svg') no-repeat 110px -190px/830px; opacity:.19; pointer-events:none; z-index:-1; }
a { color:var(--text-2); text-underline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p,figure,blockquote { margin:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.12; letter-spacing:-.035em; text-wrap:balance; }
h1 { font-size:clamp(48px,6.4vw,88px); }
h2 { font-size:clamp(36px,4.8vw,64px); }
h3 { font-size:clamp(30px,3.5vw,46px); }
p+p { margin-top:18px; }
b,strong { font-weight:600; }
.container { width:min(1200px,calc(100% - 64px)); margin-inline:auto; }
.section { padding-block:96px; border-top:1px solid var(--border); }
.section-intro { margin-bottom:64px; }
.section-intro > * { max-width:820px; }
.section-intro h2 { margin-bottom:24px; }
.chapter-number { font-size:16px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-2); margin-bottom:18px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:99; padding:12px; background:var(--surface); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.site-header { position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--border); }
.header-inner { min-height:88px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; min-height:48px; color:var(--text); text-decoration:none; }
.brand span { font:38px var(--serif); }
.header-inner > .brand { grid-column:1; grid-row:1; }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; grid-column:3; grid-row:1; }
.site-nav { display:flex; align-items:center; justify-content:center; gap:24px; grid-column:2; grid-row:1; }
.site-nav a { min-height:48px; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 25px; border:1px solid var(--border); border-radius:7px; text-decoration:none; font-size:18px; font-weight:600; transition:background-color 180ms,border-color 180ms; }
.button-primary { background:var(--gold); border-color:var(--gold); color:var(--ink); }
.button-primary:hover { background:#cdb17b; border-color:#cdb17b; }
.button-secondary { background:var(--surface); border-color:#66769c; color:var(--text); }
.button-secondary:hover { background:#172342; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:80px; align-items:center; padding-block:72px 96px; }
.hero-description { font-size:clamp(24px,2.3vw,31px); line-height:1.35; color:var(--text-2); margin-top:28px; }
.hero-lede { font-size:23px; margin-top:30px; max-width:520px; }
.hero-actions,.closing-actions { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-top:34px; }
.demo-entry { display:grid; justify-items:center; gap:9px; }
.no-account { font-size:16px; color:var(--text-2); }
.phone-frame { width:min(100%,420px); min-width:0; justify-self:center; padding:8px; border:1px solid #48577e; border-radius:31px; background:var(--surface); box-shadow:0 22px 65px #0004; }
.phone-frame img { width:100%; border-radius:22px; }
.hero-visual { transform:none; }
.sample-note { border-left:2px solid var(--gold); padding:12px 20px; color:var(--text-2); background:var(--surface-2); font-size:16px; }
.story-chapter { padding-top:80px; border-top:1px solid var(--border); }
.chapter-intro { margin-bottom:40px; }
.chapter-intro > * { max-width:900px; }
.chapter-intro h2 { margin-bottom:24px; }
.chapter-intro > p:not(.chapter-number) { color:var(--text-2); }
.method-why { font-size:20px; }
.attack-example { width:min(820px,calc(100% - 64px)); margin:40px auto 64px; padding:24px 28px; border:1px solid #6b6481; border-radius:8px; background:var(--surface); }
.attack-example > p { font-size:16px; color:var(--text-2); }
.attack-example blockquote { font:26px/1.5 var(--serif); margin-block:20px; overflow-wrap:anywhere; }
.sharing-note { padding-block:48px 72px; }
.sharing-note h3 { margin-bottom:24px; }
.sharing-note p { max-width:880px; color:var(--text-2); }
.visual-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); align-items:center; gap:64px; padding-block:80px; }
.visual-copy h3 { margin-bottom:24px; }
.visual-copy p { color:var(--text-2); font-size:20px; }
.native-visual { min-width:0; }
.native-visual img { width:100%; border-radius:20px; border:1px solid var(--border); }
.sharing-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; padding-block:72px; }
.sharing-mark { padding:48px 24px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.sharing-mark img { width:100%; }
.feature-tour { padding-top:96px; }
.feature-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px 36px; }
.feature-gallery > figure { min-width:0; padding:28px 18px; text-align:center; background:var(--surface-2); border:1px solid #36466f; border-radius:22px; box-shadow:0 16px 40px #0002; }
.feature-gallery figcaption { margin-top:20px; font-size:22px; line-height:1.4; }
.feature-gallery figcaption strong { font-weight:700; }
.feature-gallery .phone-frame { width:min(100%,300px); margin-inline:auto; }
.closing-section { text-align:center; }
.closing-actions { justify-content:center; }
.site-footer { border-top:1px solid var(--border); padding-block:48px; font-size:16px; }
.footer-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:36px; color:var(--text-2); }
.footer-groups { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:40px; }
.footer-groups nav { display:flex; flex-direction:column; align-items:flex-start; }
.footer-groups h2 { font:600 18px/1.5 var(--sans); letter-spacing:normal; margin:0 0 12px; }
.footer-groups a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
a:focus-visible,button:focus-visible,[tabindex='-1']:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
@media(max-width:1100px) {
  .feature-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:1050px) {
  .header-inner { gap:16px; }
  .site-nav { gap:16px; }
  .header-actions .button { padding-inline:16px; }
  .hero { grid-template-columns:minmax(0,1fr) 380px; gap:40px; }
}
@media(max-width:850px) {
  .container { width:calc(100% - 40px); }
  .header-inner { grid-template-columns:1fr auto; gap:4px 12px; padding-block:12px; }
  .header-actions { grid-column:2; gap:12px; }
  .site-nav { grid-column:1/-1; grid-row:2; width:100%; gap:20px; }
  .site-nav a { justify-content:center; min-height:44px; font-size:16px; }
  .hero { grid-template-columns:1fr; gap:48px; padding-block:56px 72px; }
  .visual-row,.sharing-panel { grid-template-columns:1fr; gap:36px; padding-block:52px; }
  .visual-row .phone-frame { justify-self:center; }
  .sharing-panel h3 { grid-row:1; }
  .section { padding-block:72px; }
  .section-intro { margin-bottom:48px; }
  .story-chapter { padding-top:56px; }
}
@media(max-width:540px) {
  .container { width:calc(100% - 32px); }
  .feature-gallery { grid-template-columns:1fr; gap:48px; }
  .feature-gallery > figure { padding:24px 0; }
  .feature-gallery .phone-frame { width:min(100%,420px); margin-inline:auto; }
  .sharing-mark { padding:24px 12px; }
  .header-inner .brand { gap:8px; }
  .header-inner .brand img { width:28px; height:28px; }
  .header-inner .brand span { font-size:28px; }
  .header-actions { gap:10px; }
  .header-actions .button { min-height:48px; padding:10px 14px; font-size:16px; }
  .header-actions .button-secondary { padding-inline:0; border:0; background:none; min-height:44px; }
  .site-nav { gap:12px; }
  .site-nav a { flex:1; }
  .hero { padding-top:44px; }
  .hero-lede { font-size:21px; }
  .hero-actions { gap:12px; }
  .hero-actions .button { padding-inline:21px; }
  .section { padding-block:56px; }
  .story-chapter { padding-top:44px; }
  .attack-example { width:calc(100% - 32px); padding:20px; }
  .footer-groups { grid-template-columns:1fr; gap:28px; }
  .footer-heading { align-items:flex-start; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}