:root{--bg:#f7f7f7;--fg:#111;--card:#fff;--muted:#e5e7eb;--mutedfg:#667085;--primary:#111;--secondary:#555;--accent:#f97316;--border:#d9d9d9;--on-primary:#fff;--on-accent:#fff;--radius:24px;--shadow:0 24px 70px rgba(0,0,0,.12);--display:Georgia,serif;--body:system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.5}a{color:inherit}.atlas-nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--border) 80%,transparent);padding:10px 14px}.atlas-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.atlas-tabs a{white-space:nowrap;text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:9px 12px;font-size:12px;background:color-mix(in srgb,var(--card) 75%,transparent)}.atlas-tabs a.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}.container{width:min(1180px,calc(100% - 34px));margin:auto}.hero{min-height:78vh;display:grid;grid-template-columns:1.02fr .98fr;gap:34px;align-items:center;padding:60px 0}.eyebrow{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:999px;padding:8px 12px;background:color-mix(in srgb,var(--card) 70%,transparent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.title{font-family:var(--display);font-size:clamp(52px,8vw,112px);line-height:.85;letter-spacing:-.075em;margin:18px 0}.lead{font-size:clamp(18px,2vw,23px);color:var(--mutedfg);max-width:62ch}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;padding:12px 18px;background:var(--primary);color:var(--on-primary);font-weight:850;border:2px solid var(--primary);box-shadow:var(--shadow);cursor:pointer}.btn.secondary{background:transparent;color:var(--fg);border-color:var(--border);box-shadow:none}.mock{position:relative;min-height:560px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}.section{padding:74px 0}.section-title{font-family:var(--display);font-size:clamp(34px,5vw,66px);line-height:.95;letter-spacing:-.045em;margin:0 0 20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.panel{border-radius:calc(var(--radius)*.8);background:var(--card);border:1px solid var(--border);padding:22px;box-shadow:0 12px 35px rgba(0,0,0,.07)}.panel h3{font-family:var(--display);font-size:28px;margin:0 0 8px}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatches i{width:42px;height:42px;border-radius:12px;border:1px solid rgba(0,0,0,.12)}.chart-svg{width:100%;height:auto;display:block}.device{position:absolute;inset:28px;border-radius:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 10%,var(--card)),var(--card));border:1px solid var(--border);padding:24px;overflow:hidden}.device-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;height:100%}.stat{border-radius:20px;padding:16px;background:color-mix(in srgb,var(--primary) 9%,var(--card));border:1px solid var(--border)}.big-num{font-family:var(--display);font-size:54px;line-height:1}.visual-orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent),var(--primary));filter:blur(.2px);opacity:.86}.orb1{width:240px;height:240px;right:-65px;top:-65px}.orb2{width:150px;height:150px;left:8%;bottom:10%;background:radial-gradient(circle,var(--secondary),var(--accent))}.bars{display:flex;align-items:end;gap:10px;height:160px}.bars i{flex:1;border-radius:12px 12px 3px 3px;background:linear-gradient(var(--accent),var(--primary));min-height:40px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tile{aspect-ratio:1;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--accent));opacity:.85}.footer{padding:44px 0 70px;color:var(--mutedfg);border-top:1px solid var(--border)}body.glass .mock,body.glass .panel{background:color-mix(in srgb,var(--card) 48%,transparent);backdrop-filter:blur(26px);border-color:rgba(255,255,255,.35)}body.glass{background:radial-gradient(circle at 10% 0,var(--accent),transparent 28%),radial-gradient(circle at 85% 5%,var(--secondary),transparent 34%),var(--bg)}body.glass .mock:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 90deg,var(--primary),transparent,var(--accent),transparent,var(--secondary));filter:blur(30px);opacity:.25;animation:spin 14s linear infinite}body.brutal{--radius:4px;--shadow:9px 9px 0 var(--fg)}body.brutal .panel,body.brutal .mock,body.brutal .btn{border:3px solid var(--fg);box-shadow:8px 8px 0 var(--fg)}body.brutal .title{text-transform:uppercase;font-family:var(--body);font-weight:1000;letter-spacing:-.09em}body.brutal .tile{border:3px solid var(--fg);border-radius:0}body.neumorph{--shadow:18px 18px 38px color-mix(in srgb,var(--fg) 14%,transparent),-18px -18px 38px rgba(255,255,255,.75)}body.neumorph .panel,body.neumorph .mock,body.neumorph .btn.secondary{border:0;box-shadow:var(--shadow)}body.clay .panel,body.clay .mock{border:0;box-shadow:inset 0 -12px 0 rgba(0,0,0,.08),0 25px 60px rgba(0,0,0,.16)}body.clay{--radius:38px}body.clay .visual-orb{filter:none;box-shadow:inset 0 -20px rgba(0,0,0,.12)}body.dark{background:#030407;color:#f8fafc}body.dark .mock,body.dark .panel,body.dark .atlas-nav{background:rgba(10,14,22,.78);border-color:rgba(255,255,255,.14)}body.dark .title{text-shadow:0 0 40px color-mix(in srgb,var(--accent) 55%,transparent)}body.dark .mock{box-shadow:0 0 80px color-mix(in srgb,var(--primary) 28%,transparent)}body.retro{background:linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--accent) 24%,var(--bg)))}body.retro:before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 2px,transparent 2px 5px);pointer-events:none}body.retro .title{text-shadow:4px 4px var(--accent)}body.bento .grid{grid-template-columns:1fr 1fr 1fr}body.bento .panel:nth-child(1){grid-column:span 2}body.bento .panel:nth-child(4){grid-column:span 2}body.organic{--radius:44px}body.organic .mock,body.organic .panel{border-radius:44px 16px 54px 24px}body.organic .visual-orb{border-radius:60% 40% 45% 55%;animation:morph 8s ease-in-out infinite}body.pixel{image-rendering:pixelated;--radius:0;--shadow:10px 10px 0 var(--fg)}body.pixel .mock,body.pixel .panel,body.pixel .btn{border:4px solid var(--fg);border-radius:0}.pixel .visual-orb{border-radius:0;filter:none}body.minimal{--shadow:none;--radius:0}body.minimal .mock,body.minimal .panel{box-shadow:none;background:transparent}.minimal .title{letter-spacing:-.1em}.minimal .tile,.minimal .btn{border-radius:0}body.skeuo .mock{background:linear-gradient(145deg,#fff,var(--muted));box-shadow:inset 0 2px 1px #fff, inset 0 -20px 50px rgba(0,0,0,.08), var(--shadow)}body.skeuo .btn{box-shadow:inset 0 2px rgba(255,255,255,.45),0 12px 26px rgba(0,0,0,.18)}body.expressive .mock:after{content:"";position:absolute;inset:auto 8% 8% auto;width:180px;height:180px;border-radius:40px;background:linear-gradient(135deg,var(--accent),var(--secondary));transform:rotate(18deg);opacity:.28}@keyframes spin{to{transform:rotate(360deg)}}@keyframes morph{50%{border-radius:35% 65% 60% 40%;transform:rotate(12deg)}}@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:36px}.grid{grid-template-columns:1fr}.device-grid{grid-template-columns:1fr}.mock{min-height:640px}.atlas-tabs a{font-size:11px}.section{padding:44px 0}.title{font-size:52px}}