:root{color-scheme:light; --bg:#f8fafc; --bg-rgb:248,250,252; --surface:#ffffff; --surface-rgb:255,255,255; --surface-soft:#f1f5f9; --text:#0f172a; --text-soft:#334155; --muted:#64748b; --line:rgba(15,23,42,0.12); --primary:#2563eb; --primary-rgb:37,99,235; --primary-strong:#1d4ed8; --primary-soft:rgba(37,99,235,0.09); --secondary:#0f766e; --secondary-rgb:15,118,110; --secondary-soft:rgba(15,118,110,0.09); --warning:#b45309; --warning-soft:rgba(180,83,9,0.10); --success:#15803d; --success-soft:rgba(21,128,61,0.10); --shadow:0 18px 48px rgba(15,23,42,0.11); --shadow-soft:0 8px 24px rgba(15,23,42,0.07); --radius-lg:24px; --radius-md:16px; --max-width:1180px; --display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif; --sans:Inter,Aptos,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;} html[data-theme="dark"]{color-scheme:dark; --bg:#0f172a; --bg-rgb:15,23,42; --surface:#172033; --surface-rgb:23,32,51; --surface-soft:#1e293b; --text:#f8fafc; --text-soft:#dbe4ef; --muted:#94a3b8; --line:rgba(226,232,240,0.14); --primary:#60a5fa; --primary-rgb:96,165,250; --primary-strong:#93c5fd; --primary-soft:rgba(96,165,250,0.12); --secondary:#2dd4bf; --secondary-rgb:45,212,191; --secondary-soft:rgba(45,212,191,0.11); --warning:#fbbf24; --warning-soft:rgba(251,191,36,0.11); --success:#4ade80; --success-soft:rgba(74,222,128,0.11); --shadow:0 22px 56px rgba(0,0,0,0.34); --shadow-soft:0 10px 30px rgba(0,0,0,0.24);} *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0; color:var(--text); background:radial-gradient(circle at 8% 0%,rgba(var(--primary-rgb),0.07),transparent 25rem),radial-gradient(circle at 96% 18%,rgba(var(--secondary-rgb),0.055),transparent 28rem),var(--bg); font-family:var(--sans); line-height:1.65; overflow-x:hidden;} body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),rgba(var(--primary-rgb),0.025)50%,transparent calc(50%+1px)),linear-gradient(rgba(var(--surface-rgb),0.32),transparent);} a{color:inherit; text-decoration:none;} button{font:inherit;} img{display:block; max-width:100%;} h1,h2,h3,h4,p{margin-top:0;} h1,.section-title,.closing h2{font-family:var(--display);} .container{width:min(calc(100% - 40px),var(--max-width)); margin-inline:auto;} .site-header{position:sticky; top:0; z-index:50; border-bottom:1px solid transparent; background:rgba(var(--bg-rgb),0.84); backdrop-filter:blur(18px); transition:border-color 180ms ease,background 180ms ease,box-shadow 180ms ease;} .site-header.scrolled{border-color:var(--line); background:rgba(var(--bg-rgb),0.96); box-shadow:0 8px 24px rgba(15,23,42,0.07);} .nav-shell{min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px;} .brand{display:flex; align-items:center; gap:12px; font-weight:850; letter-spacing:-0.02em;} .brand-mark{width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); font-size:0.82rem; box-shadow:0 8px 18px rgba(var(--primary-rgb),0.20);} .nav-links{display:flex; align-items:center; gap:22px; color:var(--muted); font-size:0.87rem; font-weight:700;} .nav-links a:hover{color:var(--text);} .header-actions{display:flex; align-items:center; gap:9px;} .lang-switch{display:inline-flex; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(var(--surface-rgb),0.72);} .lang-switch button{border:0; border-radius:999px; padding:7px 11px; color:var(--muted); background:transparent; cursor:pointer; font-size:0.76rem; font-weight:800;} .lang-switch button[aria-pressed="true"]{color:#fff; background:var(--primary);} .theme-toggle,.menu-toggle{width:42px; height:42px; display:inline-grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--text); background:rgba(var(--surface-rgb),0.72); cursor:pointer;} .menu-toggle{display:none;} .hero{padding:88px 0 54px;} .hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr)minmax(320px,0.9fr); gap:70px; align-items:center;} .status-pill{display:inline-flex; align-items:center; gap:9px; margin-bottom:24px; padding:8px 12px; border:1px solid rgba(var(--secondary-rgb),0.22); border-radius:999px; color:var(--secondary); background:var(--secondary-soft); font-size:0.78rem; font-weight:800;} .status-pill::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--secondary);} .hero h1{margin-bottom:22px; font-size:clamp(4rem,9vw,7.6rem); font-weight:600; line-height:0.88; letter-spacing:-0.065em;} .hero h1 span{display:block; color:var(--primary);} .hero-lead{max-width:760px; margin-bottom:30px; color:var(--muted); font-size:clamp(1.05rem,2vw,1.25rem);} .hero-actions{display:flex; flex-wrap:wrap; gap:12px;} .btn{min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 19px; border:1px solid transparent; border-radius:999px; font-weight:800; transition:transform 160ms ease,background 160ms ease;} .btn:hover{transform:translateY(-2px);} .btn-primary{color:#fff; background:var(--primary);} .btn-secondary{border-color:var(--line); background:rgba(var(--surface-rgb),0.70);} .hero-card{padding:28px; border-radius:var(--radius-lg); color:#fff; background:radial-gradient(circle at 92% 8%,rgba(255,255,255,0.10),transparent 13rem),linear-gradient(145deg,#1d4f73,#12243b); box-shadow:0 24px 56px rgba(15,23,42,0.22);} .hero-card-label{margin-bottom:22px; color:rgba(255,255,255,0.62); font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;} .metrics{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;} .metric{padding:17px; border:1px solid rgba(255,255,255,0.13); border-radius:15px; background:rgba(255,255,255,0.055);} .metric strong{display:block; margin-bottom:4px; font-size:1.55rem; line-height:1;} .metric span{color:rgba(255,255,255,0.68); font-size:0.78rem;} .hero-card-note{margin:18px 0 0; color:rgba(255,255,255,0.68); font-size:0.82rem;} section{padding:72px 0; scroll-margin-top:72px;} .section-heading{display:grid; grid-template-columns:0.78fr 1.22fr; gap:48px; align-items:end; margin-bottom:38px;} .eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; color:var(--secondary); font-size:0.72rem; font-weight:850; letter-spacing:0.16em; text-transform:uppercase;} .eyebrow::before{content:""; width:28px; height:2px; border-radius:99px; background:currentColor;} .section-title{margin-bottom:0; font-size:clamp(2.6rem,5vw,4.4rem); font-weight:600; line-height:0.98; letter-spacing:-0.045em;} .section-intro{margin:0; color:var(--muted); font-size:1.02rem;} .infographic-shell{padding:16px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow);} .infographic-button{width:100%; padding:0; border:0; border-radius:17px; background:transparent; cursor:zoom-in; overflow:hidden;} .infographic-button img{width:100%; border-radius:17px;} .caption{margin:13px 4px 0; color:var(--muted); font-size:0.78rem;} .architecture-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;} .architecture-card,.feature-card,.status-card,.tech-card{border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(var(--surface-rgb),0.90); box-shadow:var(--shadow-soft);} .architecture-card{position:relative; padding:24px; overflow:hidden;} .architecture-card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary),var(--secondary));} .architecture-index{display:block; margin-bottom:30px; color:var(--secondary); font-size:0.72rem; font-weight:850; letter-spacing:0.13em;} .architecture-card h3{margin-bottom:10px; font-size:1.2rem;} .architecture-card p{margin-bottom:0; color:var(--muted); font-size:0.92rem;} .flow-arrow{display:none;} .feature-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;} .feature-card{padding:25px;} .feature-icon{width:44px; height:44px; display:grid; place-items:center; margin-bottom:20px; border-radius:14px; color:var(--primary); background:var(--primary-soft); font-size:1.2rem;} .feature-card h3{margin-bottom:9px; font-size:1.18rem;} .feature-card p{margin-bottom:0; color:var(--muted); font-size:0.92rem;} .status-layout{display:grid; grid-template-columns:1fr 1fr; gap:18px;} .status-card{padding:28px;} .status-card.implemented{border-color:rgba(21,128,61,0.22);} .status-card.roadmap{border-color:rgba(180,83,9,0.22);} .status-heading{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px;} .status-heading h3{margin:0; font-size:1.35rem;} .badge{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:0.72rem; font-weight:850; white-space:nowrap;} .badge.success{color:var(--success); background:var(--success-soft);} .badge.warning{color:var(--warning); background:var(--warning-soft);} .check-list{display:grid; gap:11px; margin:0; padding:0; list-style:none;} .check-list li{position:relative; padding-left:24px; color:var(--text-soft); font-size:0.93rem;} .check-list li::before{content:"✓"; position:absolute; left:0; color:var(--success); font-weight:900;} .roadmap .check-list li::before{content:"→"; color:var(--warning);} .api-panel{display:grid; grid-template-columns:minmax(0,0.9fr)minmax(0,1.1fr); gap:18px;} .api-summary{padding:30px; border-radius:var(--radius-lg); color:#fff; background:radial-gradient(circle at 94% 8%,rgba(255,255,255,0.08),transparent 15rem),linear-gradient(145deg,#172554,#0f172a); box-shadow:var(--shadow);} .api-summary h3{margin-bottom:12px; font-size:1.55rem;} .api-summary p{color:rgba(255,255,255,0.72);} .api-summary .metrics{margin-top:24px;} .endpoint-groups{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;} .endpoint-group{padding:20px; border:1px solid var(--line); border-radius:15px; background:rgba(var(--surface-rgb),0.90); box-shadow:var(--shadow-soft);} .endpoint-group h4{margin-bottom:8px; font-size:1rem;} .endpoint-group p{margin-bottom:0; color:var(--muted); font-size:0.86rem;} .stack-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;} .tech-card{padding:21px;} .tech-card strong{display:block; margin-bottom:6px; font-size:1rem;} .tech-card span{color:var(--muted); font-size:0.84rem;} .quality-panel{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;} .quality-card{padding:25px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);} .quality-card h3{margin-bottom:9px; font-size:1.15rem;} .quality-card p{margin-bottom:0; color:var(--muted); font-size:0.91rem;} .closing{margin:10px 0 74px; padding:clamp(34px,6vw,68px); border-radius:var(--radius-lg); color:#fff; background:radial-gradient(circle at 96% 10%,rgba(255,255,255,0.08),transparent 16rem),linear-gradient(135deg,#1e3a5f,#0f172a); box-shadow:var(--shadow);} .closing h2{max-width:800px; margin-bottom:15px; font-size:clamp(2.6rem,5vw,4.5rem); font-weight:600; line-height:0.98; letter-spacing:-0.045em;} .closing p{max-width:760px; color:rgba(255,255,255,0.74);} footer{padding:30px 0 42px; color:var(--muted); font-size:0.82rem;} .footer-row{display:flex; justify-content:space-between; gap:18px; padding-top:24px; border-top:1px solid var(--line);} .lightbox{position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:24px; background:rgba(2,6,23,0.88); backdrop-filter:blur(8px);} .lightbox.open{display:grid;} .lightbox img{max-width:min(96vw,1800px); max-height:92vh; border-radius:16px; box-shadow:0 30px 100px rgba(0,0,0,0.42);} .lightbox-close{position:absolute; top:18px; right:18px; width:44px; height:44px; border:1px solid rgba(255,255,255,0.24); border-radius:50%; color:#fff; background:rgba(255,255,255,0.08); cursor:pointer; font-size:1.2rem;} @media (max-width:1000px){.nav-links{position:absolute; top:72px; left:18px; right:18px; display:none; flex-direction:column; align-items:stretch; padding:16px; border:1px solid var(--line); border-radius:16px; background:rgba(var(--surface-rgb),0.98); box-shadow:var(--shadow);} .nav-links.open{display:flex;} .menu-toggle{display:inline-grid;} .hero-grid,.section-heading,.status-layout,.api-panel{grid-template-columns:1fr;} .architecture-grid,.stack-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .feature-grid,.quality-panel{grid-template-columns:1fr;} } @media (max-width:680px){.container{width:min(calc(100% - 24px),var(--max-width));} .brand span:last-child{display:none;} .hero{padding-top:58px;} .hero-grid{gap:40px;} .hero h1{font-size:clamp(3.7rem,18vw,5.4rem);} section{padding:56px 0;} .section-heading{gap:18px; margin-bottom:30px;} .architecture-grid,.stack-grid,.endpoint-groups{grid-template-columns:1fr;} .metrics{grid-template-columns:1fr 1fr;} .footer-row{flex-direction:column;} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:0.01ms !important;} }