:root { color-scheme:dark; --ink:#f7f9fc; --muted:#a4afc0; --dim:#748197; --bg:#07101d; --panel:#101d2d; --line:rgba(195,215,240,.15); --blue:#62c0ff; --cream:#f2eee5; --max:1160px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; } a { color:inherit; } .wrap { width:min(calc(100% - 48px),var(--max)); margin:0 auto; }
.site-header { padding:22px 0; border-bottom:1px solid var(--line); background:rgba(7,16,29,.78); backdrop-filter:blur(18px); position:relative; z-index:3; } nav,.brand,.links,.actions,.trust-items,.section-heading,.feature-layout,.footer-grid,.scan-top,.window-bar,.collection-title { display:flex; align-items:center; } nav { justify-content:space-between; gap:24px; } .brand { gap:10px; color:var(--ink); text-decoration:none; font-size:.76rem; font-weight:850; letter-spacing:.15em; white-space:nowrap; } .brand i { color:var(--blue); font-style:normal; } .brand-mark { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--blue); border-radius:9px; color:var(--blue); font-size:15px; } .links { gap:22px; flex-wrap:wrap; justify-content:flex-end; } .links a { color:var(--muted); text-decoration:none; font-size:.82rem; transition:color .2s ease; } .links a:hover { color:var(--ink); } main { overflow:hidden; }
.hero-section { background:radial-gradient(circle at 80% 12%,#16466d 0,#0c2038 24%,var(--bg) 63%); } .hero-layout { min-height:650px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:40px; padding:74px 0 90px; } .eyebrow { display:flex; align-items:center; gap:9px; color:var(--blue); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; font-weight:850; } .eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(98,192,255,.12); } h1,h2,h3 { line-height:1.05; letter-spacing:-.045em; } h1 { max-width:720px; margin:20px 0 25px; font-size:clamp(3.1rem,6.5vw,6.5rem); font-weight:750; } h1 em { color:var(--blue); font-style:normal; } h2 { margin:0 0 18px; font-size:clamp(2.2rem,4vw,4rem); font-weight:720; } h3 { margin:0 0 12px; font-size:1.25rem; } .lede { max-width:620px; color:var(--muted); font-size:1.18rem; line-height:1.7; } .actions { gap:23px; flex-wrap:wrap; margin-top:34px; } .button { display:inline-flex; align-items:center; gap:14px; padding:14px 20px; border:1px solid transparent; border-radius:11px; color:#06111d; background:var(--blue); text-decoration:none; font-size:.88rem; font-weight:800; box-shadow:0 12px 28px rgba(33,141,218,.2); transition:transform .2s ease,background .2s ease; } .button:hover { background:#8bd4ff; transform:translateY(-2px); } .button.light { color:#07101d; background:var(--cream); box-shadow:none; } .button.light:hover { background:#fff; } .text-link,.arrow-link { color:var(--ink); text-decoration:none; font-size:.9rem; font-weight:700; } .text-link { color:var(--muted); } .text-link span,.arrow-link span { color:var(--blue); margin-left:7px; } .microcopy { margin-top:18px; color:var(--dim); font-size:.75rem; }
.hero-art { position:relative; min-height:450px; display:grid; place-items:center; } .glow { position:absolute; width:430px; height:430px; border-radius:50%; background:rgba(49,155,222,.16); filter:blur(55px); } .scan-card { position:relative; z-index:1; width:min(100%,390px); padding:20px; border:1px solid rgba(193,227,255,.29); border-radius:18px; background:linear-gradient(145deg,rgba(30,58,87,.93),rgba(8,20,35,.96)); box-shadow:0 35px 70px rgba(0,0,0,.35); transform:rotate(3deg); } .scan-top { gap:8px; color:var(--dim); font-size:.57rem; font-weight:800; letter-spacing:.13em; } .live-dot { width:7px;height:7px;border-radius:50%;background:#69dcaa;box-shadow:0 0 0 4px rgba(105,220,170,.12); } .scan-menu { margin-left:auto; letter-spacing:.1em; } .signature { padding:63px 4px 35px; color:#eef5fb; font-family:"Brush Script MT","Segoe Script",cursive; font-size:3.7rem; letter-spacing:.02em; transform:rotate(-7deg); } .signature span { color:var(--blue); } .scan-rule { height:1px; background:var(--line); } .scan-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px 15px; padding:22px 0; } .scan-grid span { display:block; margin-bottom:5px; color:var(--dim); font-size:.56rem; letter-spacing:.1em; font-weight:800; } .scan-grid strong { font-size:.82rem; } .scan-grid .status { color:#f5cc76; } .scan-footer { padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:.7rem; } .mini-check { display:inline-grid;place-items:center;width:17px;height:17px;margin-right:5px;border-radius:50%;background:rgba(105,220,170,.15);color:#69dcaa; } .orbit { position:absolute; border:1px solid rgba(98,192,255,.19); border-radius:50%; } .orbit-one { width:510px;height:280px; transform:rotate(-28deg); } .orbit-two { width:550px;height:400px; transform:rotate(30deg); border-color:rgba(98,192,255,.09); }
.trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0a1727; } .trust-items { min-height:65px; justify-content:center; gap:25px; color:var(--dim); font-size:.62rem; letter-spacing:.15em; font-weight:800; } .trust-items i { width:4px;height:4px;border-radius:50%;background:var(--blue); } section { padding:105px 0; } .section-light { background:var(--cream); color:#0b1725; } .section-light .eyebrow { color:#267ac8; } .section-light .section-heading p { color:#566272; } .section-heading { justify-content:space-between; gap:60px; margin-bottom:48px; } .section-heading > div { max-width:640px; } .section-heading p { max-width:390px; color:var(--muted); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; } .step-card { min-height:290px; padding:27px; border:1px solid rgba(17,32,49,.14); border-radius:17px; background:rgba(255,255,255,.32); position:relative; } .step-card.featured { color:#f4f8fc; background:#102b45; border-color:#102b45; box-shadow:0 18px 45px rgba(11,30,48,.14); } .step-number { position:absolute; top:27px; right:27px; color:#8390a0; font-size:.67rem; font-weight:800; letter-spacing:.12em; } .step-icon { display:grid;place-items:center;width:43px;height:43px;margin-bottom:57px;border:1px solid currentColor;border-radius:12px;color:#267ac8;font-size:1.25rem; } .featured .step-icon { color:var(--blue); } .step-card p { max-width:260px; color:#687383; } .featured p { color:#b4c3d1; }
.feature-section { background:#0a1726; } .feature-layout { justify-content:space-between; gap:90px; } .feature-visual,.feature-copy { flex:1; } .feature-visual { min-width:0; } .collection-window { overflow:hidden; max-width:520px; border:1px solid rgba(194,220,255,.2); border-radius:15px; background:#0f2034; box-shadow:0 27px 70px rgba(0,0,0,.25); transform:rotate(-2deg); } .window-bar { gap:6px; padding:13px 17px; border-bottom:1px solid var(--line); } .window-bar span { width:7px;height:7px;border-radius:50%;background:#65768d; } .window-bar b { margin-left:auto; color:var(--dim); font-size:.55rem; letter-spacing:.14em; } .collection-content { padding:28px; } .collection-title { justify-content:space-between; margin-bottom:20px; font-size:1.1rem; font-weight:750; } .collection-title strong { color:var(--blue); font-size:.7rem; letter-spacing:.08em; } .collection-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .item-card { min-height:170px; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; border-radius:10px; color:#fff; } .item-blue { background:linear-gradient(145deg,#2e72a7,#112d48); } .item-cream { color:#14202b; background:linear-gradient(145deg,#e5d4b9,#a68a6a); } .item-red { background:linear-gradient(145deg,#a34e4b,#411f2c); } .item-card span { margin-bottom:auto; font-size:.48rem; font-weight:850; letter-spacing:.12em; opacity:.75; } .item-card b { font-size:.76rem; line-height:1.15; } .item-card small { margin-top:6px; color:rgba(255,255,255,.66); font-size:.55rem; } .item-cream small { color:#46515b; } .feature-copy { max-width:470px; } .feature-copy h2 { max-width:440px; } .feature-copy p { color:var(--muted); font-size:1.08rem; } .check-list { display:grid; gap:13px; margin:28px 0; padding:0; list-style:none; color:#d7e2ee; font-size:.9rem; } .check-list span { display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;color:#69dcaa;background:rgba(105,220,170,.12);font-size:.72rem; }
.guides-section { background:#f2eee5; color:#0b1725; } .guides-section .eyebrow { color:#267ac8; } .guides-section .section-heading { align-items:end; } .guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; } .guide-card { min-height:238px; display:flex; flex-direction:column; padding:25px; border:1px solid rgba(17,32,49,.15); border-radius:15px; background:#e7e1d5; text-decoration:none; transition:transform .2s ease,background .2s ease; } .guide-card:hover { transform:translateY(-5px); background:#fffaf0; } .guide-tag { color:#267ac8; font-size:.62rem; font-weight:850; letter-spacing:.15em; } .guide-card h3 { max-width:250px; margin-top:auto; font-size:1.55rem; } .guide-arrow { align-self:flex-end; color:#267ac8; font-size:1.5rem; } .cta-section { padding:48px 0 105px; background:#f2eee5; } .cta-card { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:45px 50px; border-radius:20px; color:#f8fbff; background:linear-gradient(125deg,#163e60,#0d233b); } .cta-card .eyebrow { color:var(--blue); } .cta-card h2 { margin-top:16px; } .cta-card p { margin:0; color:#b9c9d8; } .cta-card .button { flex-shrink:0; }
footer { padding:45px 0 60px; color:var(--muted); background:#07101d; font-size:.82rem; } .footer-grid { align-items:flex-start; justify-content:space-between; gap:40px; } .footer-grid p { max-width:255px; color:var(--dim); } .footer-links { display:grid; gap:9px; } .footer-links a { color:var(--muted); text-decoration:none; } .footer-links a:hover { color:var(--ink); } .footer-note { max-width:270px; font-size:.72rem; } .footer-note small { color:var(--dim); } .article { max-width:790px; padding:75px 0 95px; } .article h1 { font-size:clamp(2.7rem,6vw,5rem); } .article h2 { margin-top:48px; } .article li { margin:11px 0; } .notice { padding:18px 20px; border-left:3px solid var(--blue); background:rgba(98,192,255,.09); color:var(--muted); }
@media (max-width:800px) { .wrap { width:min(calc(100% - 30px),var(--max)); } .site-header nav { align-items:flex-start; flex-direction:column; } .links { gap:13px; justify-content:flex-start; } .hero-layout { grid-template-columns:1fr; padding:65px 0 75px; } .hero-art { min-height:390px; } .section-heading,.feature-layout,.footer-grid,.cta-card { align-items:flex-start; flex-direction:column; } .section-heading { gap:18px; } .steps-grid,.guide-grid { grid-template-columns:1fr; } .step-card { min-height:220px; } .step-icon { margin-bottom:45px; } .feature-layout { gap:60px; } .feature-visual { width:100%; } .collection-cards { gap:6px; } .collection-content { padding:18px; } .item-card { min-height:140px; } .cta-card { padding:32px 25px; } .cta-card .button { width:100%; justify-content:center; } }
@media (max-width:470px) { h1 { font-size:3.1rem; } .hero-art { min-height:330px; } .scan-card { transform:rotate(2deg) scale(.88); } .orbit { transform:rotate(0) scale(.75); } .trust-items { gap:12px; font-size:.5rem; } .trust-items i { display:none; } .collection-cards { grid-template-columns:1fr; } .item-card { min-height:112px; } .item-card span { margin-bottom:5px; } }

/* Defensive layout rules for narrow browsers and legacy guide pages. */
body { overflow-x: hidden; }
.hero-art { isolation: isolate; }
.orbit { pointer-events: none; z-index: -1; }
.button.secondary { color: var(--ink); background: transparent; border-color: var(--line); box-shadow: none; }
.button.secondary:hover { background: rgba(98,192,255,.1); border-color: rgba(98,192,255,.42); }