:root{
  --bg:#0d0b08;--bg2:#090806;--panel:rgba(22,18,13,.72);--panel2:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.13);--line2:rgba(255,255,255,.22);--fg:#fff7ed;
  --muted:rgba(255,247,237,.69);--soft:rgba(255,247,237,.47);--accent:#ff6b35;
  --accent2:#ff9a3d;--green:#3ddc84;--red:#ff7168;--blue:#70a7ff;
  --display:'Fraunces',Georgia,serif;--body:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --shell:min(1080px,calc(100vw - 44px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden;background:radial-gradient(1040px 760px at 88% 4%,rgba(255,107,53,.1),transparent 70%),radial-gradient(900px 680px at 3% 34%,rgba(61,220,132,.045),transparent 74%),linear-gradient(180deg,var(--bg),var(--bg2) 64%,var(--bg))}
body[data-accent="blue"]{--accent:#70a7ff;--accent2:#9dc0ff;background:radial-gradient(1040px 760px at 88% 4%,rgba(112,167,255,.1),transparent 70%),radial-gradient(900px 680px at 3% 34%,rgba(61,220,132,.04),transparent 74%),linear-gradient(180deg,var(--bg),var(--bg2) 64%,var(--bg))}
body[data-accent="green"]{--accent:#3ddc84;--accent2:#82e8ad;background:radial-gradient(1040px 760px at 88% 4%,rgba(61,220,132,.09),transparent 70%),radial-gradient(900px 680px at 3% 34%,rgba(255,107,53,.04),transparent 74%),linear-gradient(180deg,var(--bg),var(--bg2) 64%,var(--bg))}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.grid-bg{pointer-events:none;position:fixed;inset:0;opacity:.21;z-index:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,#000,transparent 88%)}
.shell{width:var(--shell);margin:0 auto;position:relative;z-index:1}
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 30px;backdrop-filter:blur(20px);background:rgba(13,11,8,.78);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.brand-mark{width:30px;height:30px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);display:grid;place-items:center;border-radius:9px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 13%,transparent)}
.nav-links{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--fg)}
.nav-cta{padding:9px 16px;border-radius:999px;background:var(--accent);color:#130d08!important;font-weight:700}
.crumbs{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:var(--soft);font-size:13px;padding:26px 0 0}
.crumbs a:hover{color:var(--fg)}
.hero{padding:42px 0 30px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px}
h1{margin:0;font-family:var(--display);font-size:clamp(42px,6.2vw,76px);line-height:.97;letter-spacing:-.045em;font-weight:600;max-width:900px}
h1 em{color:var(--accent);font-style:italic;font-weight:500}
.deck{color:var(--muted);font-size:20px;line-height:1.55;max-width:760px;margin:22px 0 0}
.byline{display:flex;align-items:center;gap:12px;margin-top:24px;color:var(--soft);font-size:13px;line-height:1.5}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--line2)}
.byline strong{color:var(--fg)}
.section{padding:34px 0}
.sec-head{margin-bottom:22px}
.sec-head h2{margin:0;font-family:var(--display);font-size:clamp(29px,3.9vw,44px);line-height:1.02;letter-spacing:-.038em}
.sec-desc{color:var(--muted);font-size:16px;line-height:1.65;max-width:760px;margin:12px 0 0}
.prose{color:var(--muted);font-size:17px;line-height:1.74;max-width:780px}
.prose.wide{max-width:900px}
.prose p{margin:0 0 18px}.prose strong,.prose b{color:var(--fg)}
.prose a,.text-link{color:var(--accent2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.capsule{border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:16px;background:var(--panel);backdrop-filter:blur(20px);padding:26px 28px;margin:2px 0;font-size:19px;line-height:1.62;color:var(--fg);max-width:860px}
.callout{border:1px solid var(--line);border-radius:18px;background:var(--panel2);padding:22px 24px;max-width:820px;color:var(--muted);font-size:15px;line-height:1.65}
.callout strong{color:var(--fg)}
.architecture{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;max-width:900px}
.arch-box{border:1px solid var(--line);border-radius:18px;background:var(--panel2);padding:24px}
.arch-box h3{font-family:var(--display);font-size:22px;margin:0 0 8px;letter-spacing:-.02em}.arch-box p{margin:0;color:var(--muted);line-height:1.6;font-size:14.5px}
.arch-arrow{font-size:24px;color:var(--accent)}
.steps,.cards,.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.step,.tile{border:1px solid var(--line);border-radius:18px;background:var(--panel2);padding:24px}
.step .num{font-family:var(--display);font-size:26px;color:color-mix(in srgb,var(--accent) 65%,transparent);line-height:1}
.step h3,.tile h3{font-family:var(--display);font-size:21px;letter-spacing:-.02em;margin:10px 0 8px;color:var(--fg)}
.step p,.tile p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.62}
.tile{display:block}.tile:hover{border-color:var(--line2);background:rgba(255,255,255,.065)}
.tile .more{display:inline-block;margin-top:12px;color:var(--accent);font-weight:700;font-size:14px}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;max-width:900px}
.field{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);padding:18px}
.field b{display:block;color:var(--fg);margin-bottom:5px;font-size:14px}.field span{color:var(--muted);font-size:13px;line-height:1.5}.field.req{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#ffe5d2;background:#15110d;border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow:auto;white-space:nowrap;font-size:13px;margin:15px 0}
.toc{display:flex;gap:9px;flex-wrap:wrap;max-width:930px;margin-top:24px}.toc a,.pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:rgba(255,255,255,.035);color:var(--muted);font-size:13px}.toc a:hover{color:var(--fg);border-color:var(--line2)}
.quote{max-width:840px;margin:18px 0;border-left:3px solid var(--accent);padding:8px 0 8px 24px;font-family:var(--display);font-size:clamp(23px,3vw,32px);line-height:1.28;letter-spacing:-.02em;color:var(--fg)}
.checklist{display:grid;gap:10px;max-width:840px}.check{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.03);padding:17px 19px}.check .mark{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent);font-weight:800}.check strong{display:block;color:var(--fg);margin-bottom:3px}.check span{color:var(--muted);font-size:14px;line-height:1.55}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.lesson{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--panel2);padding:24px}.lesson .stage{color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.11em}.lesson h3{font-family:var(--display);font-size:23px;line-height:1.08;letter-spacing:-.025em;margin:9px 0}.lesson p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 16px}.lesson .more{margin-top:auto;color:var(--accent2);font-weight:800;font-size:14px}.lesson:hover{border-color:var(--line2);background:rgba(255,255,255,.06)}
.source-note{display:flex;gap:12px;align-items:flex-start;max-width:850px;border:1px dashed var(--line2);border-radius:15px;padding:18px 20px;color:var(--muted);font-size:13.5px;line-height:1.6}.source-note b{color:var(--fg)}
.formula{display:grid;grid-template-columns:minmax(150px,.8fr) 1.7fr;gap:0;max-width:900px;border:1px solid var(--line);border-radius:18px;overflow:hidden}.formula>div{padding:18px 20px;border-bottom:1px solid var(--line)}.formula>div:nth-last-child(-n+2){border-bottom:0}.formula .label{color:var(--fg);font-weight:800;background:rgba(255,255,255,.04)}.formula .meaning{color:var(--muted);line-height:1.55}
.video-wrap{position:relative;aspect-ratio:16/9;max-width:900px;border:1px solid var(--line2);border-radius:20px;overflow:hidden;background:#050505}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mistakes{display:grid;gap:12px;max-width:840px}
.mistake{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.mistake .x{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:#ffb4a9;background:rgba(255,77,77,.1);border:1px solid rgba(255,77,77,.28)}
.mistake strong{display:block;color:var(--fg);font-size:15.5px;margin-bottom:4px}.mistake span{color:var(--muted);font-size:14px;line-height:1.55}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;max-width:960px;background:rgba(255,255,255,.025)}
table{border-collapse:collapse;width:100%;min-width:680px}th,td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55}th{color:var(--fg);font-size:12px;text-transform:uppercase;letter-spacing:.09em;background:rgba(255,255,255,.04)}td{color:var(--muted)}td strong{color:var(--fg)}tr:last-child td{border-bottom:0}
.visual{border:1px solid var(--line2);border-radius:22px;background:#fff;padding:12px;max-width:940px;overflow:hidden}.visual img{width:100%;border-radius:12px}
.resource{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:20px;background:color-mix(in srgb,var(--accent) 7%,var(--panel));padding:26px;max-width:900px}
.resource h3{font-family:var(--display);font-size:24px;letter-spacing:-.02em;margin:0 0 7px}.resource p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 22px;font-weight:800;cursor:pointer;font-size:15px;transition:transform .18s ease}
.button.primary{background:var(--accent);color:#130d08;box-shadow:0 16px 36px color-mix(in srgb,var(--accent) 20%,transparent)}
.button.secondary{background:rgba(255,255,255,.07);color:var(--fg);border:1px solid var(--line2)}.button:hover{transform:translateY(-2px)}
.product{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:center;border:1px solid var(--line2);border-radius:22px;background:var(--panel);padding:28px;max-width:960px}
.product-media{border-radius:15px;background:#fff;padding:8px;overflow:hidden}.product-media img{border-radius:10px;width:100%}
.price{color:var(--accent);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}.product h3{font-family:var(--display);font-size:29px;letter-spacing:-.025em;line-height:1.05;margin:8px 0 10px}.product p{color:var(--muted);font-size:15px;line-height:1.62;margin:0 0 18px}
.product-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel2)}.product-card:hover{border-color:var(--line2)}
.product-card .media{background:#fff;aspect-ratio:4/3;overflow:hidden}.product-card .media img{width:100%;height:100%;object-fit:contain}
.product-card .body{padding:20px}.product-card .cat{color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.product-card h3{font-family:var(--display);font-size:22px;line-height:1.08;letter-spacing:-.02em;margin:8px 0}.product-card p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0}.product-card .foot{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:13px;font-weight:700}.product-card .foot span:last-child{color:var(--accent)}
.faq{display:grid;gap:10px;max-width:840px}.faq details{border:1px solid var(--line);border-radius:16px;background:var(--panel2);overflow:hidden}.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:18px 20px;color:var(--fg);font-weight:800;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';display:grid;place-items:center;width:26px;height:26px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:18px}.faq details[open] summary::after{content:'−'}.faq-body{padding:0 20px 20px;color:var(--muted);font-size:15px;line-height:1.65}.faq-body p{margin:0}.faq-body a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px}
.footer{padding:50px 0 36px;margin-top:30px}.footcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;border-top:1px solid var(--line);padding-top:30px}.foot-brand p{color:var(--soft);font-size:13.5px;line-height:1.6;margin:12px 0 0;max-width:280px}.fcol h4{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--soft)}.fcol a{display:block;color:var(--muted);font-size:14px;margin-bottom:9px}.fcol a:hover{color:var(--fg)}.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;color:var(--soft);font-size:12.5px}
@media(max-width:820px){.footcols{grid-template-columns:1fr 1fr}.product{grid-template-columns:1fr}.architecture{grid-template-columns:1fr}.arch-arrow{transform:rotate(90deg);justify-self:center}}
@media(max-width:720px){.nav-hide{display:none}.resource{grid-template-columns:1fr}.resource .button{justify-self:start}}
@media(max-width:560px){:root{--shell:min(100% - 28px,1080px)}.nav{padding:14px 16px}.nav-links{gap:10px}.hero{padding-top:34px}.section{padding:28px 0}.capsule{padding:22px}.footcols{grid-template-columns:1fr}.product{padding:18px}.byline{align-items:flex-start}.formula{grid-template-columns:1fr}.formula>div{border-bottom:1px solid var(--line)!important}.formula>div:last-child{border-bottom:0!important}}