/* =================================================================== GovAssetOS — shared "Laravel-style" design system Consistent typography & spacing across every page. Per-page accent: set --accent (+ --accent-ink) on . =================================================================== */ :root{ --bg:#080a0f; --bg-2:#0c0f16; --panel:rgba(255,255,255,.022); --panel-2:rgba(255,255,255,.04); --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --ink:#f3f5f8; --ink-dim:#a3adbd; --ink-faint:#697486; --grid:rgba(255,255,255,.028); --radius:3px; --maxw:1120px; --font:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --grad-hi:#ffffff; --code-bg:#06080c; /* Default accent (overridden per page) */ --accent:#22d3c5; --accent-ink:#04120f; --accent-2:#f5a524; } /* Light theme overrides */ html[data-theme="light"]{ --bg:#f6f8fb; --bg-2:#eef1f6; --panel:rgba(12,22,42,.025); --panel-2:rgba(12,22,42,.05); --line:rgba(12,22,42,.1); --line-2:rgba(12,22,42,.17); --ink:#0d1622; --ink-dim:#495a70; --ink-faint:#7b8798; --grid:rgba(12,22,42,.045); --grad-hi:#0d1622; --code-bg:#0b0f17; } /* Keep light sections visually continuous across pages */ html[data-theme="light"] .section-slate{background:#f6f8fb} html[data-theme="light"] .section-dark{background:linear-gradient(180deg,#f6f8fb,#f6f8fb)} html[data-theme="light"] .feature-icon.navy{color:#334867;background:rgba(51,72,103,.08);border-color:rgba(51,72,103,.2)} html[data-theme="light"] .hero-visual,html[data-theme="light"] .stage{background:linear-gradient(180deg,rgba(12,22,42,.02),transparent)} /* Code / arch block adapts to light mode */ html[data-theme="light"] .arch-block{background:#fff;border-color:rgba(12,22,42,.1);color:#334155;box-shadow:0 1px 2px rgba(12,22,42,.05)} html[data-theme="light"] .arch-block .comment{color:#94a3b8} html[data-theme="light"] .arch-block .key{color:#2563eb} html[data-theme="light"] .arch-block .val{color:#0d9488} /* derived accent tints */ :root{ --accent-soft:color-mix(in srgb,var(--accent) 10%,transparent); --accent-soft-2:color-mix(in srgb,var(--accent) 16%,transparent); --accent-line:color-mix(in srgb,var(--accent) 32%,transparent); --accent-glow:color-mix(in srgb,var(--accent) 16%,transparent); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font);font-feature-settings:"ss01","cv01";background:var(--bg);color:var(--ink); line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} .wrap,.container{max-width:var(--maxw);margin:0 auto;padding:0 24px} /* Background */ .aura{position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(48% 42% at 12% 0%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 62%), radial-gradient(44% 40% at 88% 6%, color-mix(in srgb,var(--accent-2) 16%,transparent), transparent 62%), radial-gradient(60% 55% at 55% 100%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 66%);} .grid-bg{display:none} .scene-bg{ position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden; -webkit-mask-image:radial-gradient(ellipse 110% 82% at 50% 0%,#000 32%,transparent 88%); mask-image:radial-gradient(ellipse 110% 82% at 50% 0%,#000 32%,transparent 88%); } .scene-orb{ position:absolute;border-radius:50%;filter:blur(64px);opacity:.42; background:color-mix(in srgb,var(--accent) 50%,transparent); animation:sceneDrift 20s ease-in-out infinite; } .scene-orb--a{width:min(44vw,540px);height:min(44vw,540px);top:-10%;left:-8%} .scene-orb--b{ width:min(30vw,400px);height:min(30vw,400px);top:8%;right:-6%; background:color-mix(in srgb,var(--accent-2) 42%,transparent); animation-duration:24s;animation-delay:-7s; } .scene-orb--c{ width:min(24vw,320px);height:min(24vw,320px);bottom:6%;left:42%; opacity:.28;animation-duration:28s;animation-delay:-14s; } .scene-ring{ position:absolute;width:min(72vw,660px);height:min(72vw,660px);top:4%;right:6%; border:1px dashed color-mix(in srgb,var(--accent) 32%,transparent);border-radius:50%; opacity:.34;animation:sceneSpin 52s linear infinite; } .scene-ring::before{ content:"";position:absolute;inset:20%; border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:50%; animation:sceneSpin 36s linear infinite reverse; } .scene-diamond{ position:absolute;width:110px;height:110px;top:20%;left:54%;border-radius:3px; border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); transform:rotate(45deg);opacity:.28; animation:sceneFloat 16s ease-in-out infinite; } html[data-theme="dark"] .scene-orb{opacity:.5} html[data-theme="dark"] .scene-ring,html[data-theme="dark"] .scene-diamond{opacity:.4} html.page-domains .scene-orb--a{background:color-mix(in srgb,#6d28d9 50%,transparent)} html.page-domains .scene-orb--b{background:color-mix(in srgb,#5b21b6 44%,transparent)} html.page-domains .scene-orb--c{background:color-mix(in srgb,#7c3aed 40%,transparent)} html.page-domains .scene-ring{border-color:color-mix(in srgb,#6d28d9 30%,transparent)} html.page-domains .scene-ring::before{border-color:color-mix(in srgb,#5b21b6 20%,transparent)} html.page-domains .scene-diamond{border-color:color-mix(in srgb,#7c3aed 24%,transparent)} html.page-arch .scene-orb--b{right:2%} html.page-arch .scene-diamond{left:48%;top:24%} @keyframes sceneDrift{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(22px,16px) scale(1.05)} 66%{transform:translate(-16px,26px) scale(.96)} } @keyframes sceneSpin{to{transform:rotate(360deg)}} @keyframes sceneFloat{ 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(52deg) translateY(-18px)} } @media(prefers-reduced-motion:reduce){ .scene-orb,.scene-ring,.scene-ring::before,.scene-diamond{animation:none!important} } /* Reveal animation */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* Nav */ nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px} .nav-logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink)} .nav-logo .pin{width:26px;height:26px} .nav-logo b,.nav-logo span{color:var(--accent)} .nav-links{display:flex;align-items:center;gap:24px;font-size:.9rem} .nav-links>a{color:var(--ink-dim);font-weight:500;transition:color .2s} .nav-links>a:hover,.nav-links>a.active{color:var(--ink)} .nav-cta{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:3px; background:var(--accent);color:var(--accent-ink) !important;font-weight:600;font-size:.86rem;transition:transform .15s,box-shadow .2s} .nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 16px var(--accent-glow)} .nav-toggle{ display:none;width:36px;height:36px;border:1px solid var(--line-2);background:var(--panel); border-radius:3px;place-items:center;color:var(--ink);cursor:pointer;padding:0; transition:color .2s,border-color .2s,background .2s; } .nav-toggle:hover{color:var(--ink);border-color:var(--accent)} .nav-toggle svg{width:18px;height:18px} .nav-toggle .nav-toggle-close{display:none} body.nav-open .nav-toggle .nav-toggle-open{display:none} body.nav-open .nav-toggle .nav-toggle-close{display:block} .nav-mobile-backdrop{ display:none;position:fixed;inset:0;z-index:98;background:rgba(8,10,15,.45); opacity:0;transition:opacity .22s ease;pointer-events:none; } body.nav-open .nav-mobile-backdrop{display:block;opacity:1;pointer-events:auto} .nav-mobile-panel{ position:fixed;left:0;right:0;top:62px;z-index:99; background:color-mix(in srgb,var(--bg) 96%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); padding:12px 24px 20px; display:grid;gap:2px; transform:translateY(-8px);opacity:0;pointer-events:none; transition:transform .22s ease,opacity .22s ease; } body.nav-open .nav-mobile-panel{transform:none;opacity:1;pointer-events:auto} .nav-mobile-panel a{ display:block;padding:12px 4px;font-size:.95rem;font-weight:500;color:var(--ink-dim); border-bottom:1px solid var(--line); } .nav-mobile-panel a:last-child{border-bottom:none} .nav-mobile-panel a:hover,.nav-mobile-panel a.active{color:var(--ink)} body.nav-open{overflow:hidden} @media(max-width:900px){ .nav-links>a.hide-sm{display:none} .nav-toggle{display:inline-grid} .nav-links{gap:10px} } .theme-toggle{width:36px;height:36px;border:1px solid var(--line-2);background:var(--panel);border-radius:3px; display:inline-grid;place-items:center;color:var(--ink-dim);cursor:pointer;transition:color .2s,border-color .2s,background .2s} .theme-toggle:hover{color:var(--ink);border-color:var(--accent)} .theme-toggle svg{width:17px;height:17px} .theme-toggle .i-sun{display:none} html[data-theme="light"] .theme-toggle .i-sun{display:block} html[data-theme="light"] .theme-toggle .i-moon{display:none} /* Hero */ .hero{position:relative;padding:70px 0 30px} .hero.simple{padding:82px 0 26px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} @media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:38px}} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:600;letter-spacing:.05em; color:var(--accent);border:1px solid var(--accent-line);background:var(--accent-soft); padding:6px 13px;border-radius:3px;margin-bottom:22px} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:ping 2.4s ease-out infinite} @keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} h1{font-size:clamp(2.4rem,5.4vw,3.7rem);font-weight:500;letter-spacing:-.035em;line-height:1.05;margin-bottom:18px} .grad{background:linear-gradient(100deg,var(--accent),color-mix(in srgb,var(--accent) 42%,var(--grad-hi)) 130%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hero p.lede,.hero>.container>p{color:var(--ink-dim);font-size:1.12rem;max-width:640px} .hero p.lede{margin-bottom:30px} /* Buttons */ .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .btn,.btn-primary,.btn-secondary{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 17px;border-radius:3px; font-weight:600;font-size:.9rem;transition:transform .16s,box-shadow .22s,background .2s,border-color .2s;cursor:pointer} .btn svg,.btn-primary svg,.btn-secondary svg{width:16px;height:16px} .btn-primary{background:var(--accent);color:var(--accent-ink)} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 20px var(--accent-glow)} .btn-secondary,.btn-ghost{border:1px solid var(--line-2);color:var(--ink);background:var(--panel)} .btn-secondary:hover,.btn-ghost:hover{border-color:var(--accent);color:var(--accent)} /* Sections */ .section{padding:72px 0} .section.tight{padding:48px 0} .section-title,h2{font-size:clamp(1.8rem,3.6vw,2.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.1} .section-title{text-align:center;margin-bottom:12px} .section-sub{text-align:center;color:var(--ink-dim);font-size:1.05rem;max-width:640px;margin:0 auto 8px} .sec-tag{display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .sec-head{max-width:680px;margin-bottom:8px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head p{color:var(--ink-dim);font-size:1.05rem;margin-top:14px} html[data-theme="light"] .sec-head p, html[data-theme="light"] .section-sub{color:#586b84} /* Hero dashboard visual */ .hero-visual{position:relative;border:1px solid var(--line);border-radius:3px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006)); box-shadow:0 0 34px var(--accent-glow)} .dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:0 4px} .dash-title{font-size:.84rem;font-weight:600;color:var(--ink-dim)} .dash-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.7rem;color:var(--accent);border:1px solid var(--accent-line);border-radius:3px;padding:4px 10px} .dash-live .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 1.4s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} .dash-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px} .metric{border:1px solid var(--line);border-radius:3px;background:var(--bg-2);padding:15px} .metric-label{font-size:.74rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em} .metric-value{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin:4px 0} .metric-value.teal{color:var(--accent)}.metric-value.amber{color:var(--accent-2)} .metric-trend{font-size:.72rem;color:var(--ink-faint);font-family:var(--mono)} .dash-map{height:120px;border-radius:3px;margin-top:12px;border:1px solid var(--line); background: radial-gradient(circle at 30% 40%,var(--accent-soft-2),transparent 40%), radial-gradient(circle at 70% 65%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 42%), repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 22px), repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 22px),var(--bg-2)} .alert-bar{margin-top:12px;display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--accent-2); border:1px solid color-mix(in srgb,var(--accent-2) 30%,transparent);background:color-mix(in srgb,var(--accent-2) 8%,transparent); border-radius:3px;padding:11px 13px} /* Stats bar */ .section-dark{background:linear-gradient(180deg,var(--bg-2),var(--bg))} .section-slate{background:var(--bg-2)} .stats-bar,.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:720px){.stats-bar,.stats{grid-template-columns:1fr 1fr}} .stats-bar>div,.stat{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:24px 20px} .stat-num,.stat .n{font-size:2rem;font-weight:700;letter-spacing:-.03em; background:linear-gradient(120deg,var(--grad-hi),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat-label,.stat .l{font-size:.82rem;color:var(--ink-dim);margin-top:5px} /* Feature grid / cards */ .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:900px){.feature-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.feature-grid{grid-template-columns:1fr}} .feature-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius); background:var(--panel);padding:26px 24px;overflow:hidden;transition:border-color .3s,transform .3s} .feature-card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none; background:radial-gradient(120% 90% at 100% 0%,var(--accent-glow),transparent 60%)} .feature-card:hover{transform:translateY(-4px);border-color:var(--line-2)} html[data-theme="light"] .feature-card:hover{box-shadow:0 8px 22px rgba(12,22,42,.08)} .feature-card:hover::after{opacity:1} .feature-icon{width:46px;height:46px;border-radius:3px;display:flex;align-items:center;justify-content:center; margin-bottom:18px;font-size:1.2rem;font-family:var(--mono);font-weight:700;color:var(--accent); background:var(--accent-soft);border:1px solid var(--accent-line)} .feature-icon svg{width:23px;height:23px;stroke-width:1.8;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round} .feature-icon.teal{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)} .feature-icon.amber{color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 12%,transparent);border-color:color-mix(in srgb,var(--accent-2) 30%,transparent)} .feature-icon.navy{color:#9db4d6;background:rgba(157,180,214,.1);border-color:rgba(157,180,214,.25)} .feature-card h3{font-size:1.08rem;font-weight:600;margin-bottom:8px;letter-spacing:-.01em} .feature-card p{color:var(--ink-dim);font-size:.92rem;margin:0} .feature-card .cap-tags{margin-top:auto;padding-top:16px} /* Capability numbered cards */ .cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:820px){.cap-grid{grid-template-columns:1fr}} .cap-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:30px 28px; transition:border-color .3s,transform .3s;overflow:hidden} .cap-card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none; background:radial-gradient(120% 90% at 100% 0%,var(--accent-glow),transparent 60%)} .cap-card:hover{transform:translateY(-3px);border-color:var(--line-2)} html[data-theme="light"] .cap-card:hover{box-shadow:0 8px 22px rgba(12,22,42,.08)} .cap-card:hover::after{opacity:1} .cap-card .num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:3px;font-family:var(--mono); font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);margin-bottom:16px} .cap-card h3{font-size:1.2rem;font-weight:600;margin-bottom:10px;letter-spacing:-.015em} .cap-card p{color:var(--ink-dim);font-size:.94rem} .cap-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .cap-tag{font-family:var(--mono);font-size:.72rem;padding:4px 11px;border-radius:3px; background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)} /* Domain grid */ .domain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:820px){.domain-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.domain-grid{grid-template-columns:1fr}} .domain-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel); padding:22px;transition:border-color .3s,transform .3s} .domain-card:hover{transform:translateY(-3px);border-color:var(--line-2)} .domain-card .icon{width:42px;height:42px;border-radius:3px;display:flex;align-items:center;justify-content:center;margin-bottom:14px; color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line)} .domain-card .icon svg{width:22px;height:22px;stroke-width:1.8;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round} .domain-card h4{font-size:1rem;font-weight:600;margin-bottom:6px} .domain-card p{color:var(--ink-dim);font-size:.85rem;margin:0} /* Arch code block */ .arch-block{ position:relative; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:3px; background: radial-gradient(120% 85% at 100% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 65%), linear-gradient(180deg,#0b1224,#0a1020 52%,#090f1d); padding:22px 24px; overflow:auto; font-family:var(--mono); font-size:.8rem; line-height:1.9; color:#c1cad8; box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.03) inset } .arch-block::before{ content:""; position:absolute; left:0;right:0;top:0; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 45%,#fff),transparent); opacity:.7; pointer-events:none } .arch-block .comment{color:#8f9aaf} .arch-block .key{color:#4cc3ff} .arch-block .val{color:#ffb85c} /* Compare table */ .compare-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem; border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--bg-2)} .compare-table th,.compare-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle} .compare-table thead th{font-weight:600;color:var(--ink-dim);background:rgba(255,255,255,.02);font-size:.82rem} .compare-table th.gov,.compare-table td.gov{background:var(--accent-soft)} .compare-table thead th.gov{color:var(--accent)} .compare-table tbody tr:last-child td{border-bottom:none} .compare-table td:first-child{color:var(--ink);font-weight:500} .compare-table .check{color:var(--accent);font-weight:600;white-space:nowrap} .compare-table .partial{color:var(--accent-2)} .compare-table .cross{color:#8792a3} /* Pricing */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px} @media(max-width:900px){.pricing-grid{grid-template-columns:1fr}} .price-card{position:relative;border:1px solid var(--line);border-radius:3px;background:var(--panel);padding:34px 30px; transition:border-color .3s,transform .3s} .price-card:hover{transform:translateY(-4px);border-color:var(--line-2)} .price-card.featured{border-color:var(--accent-line);background:linear-gradient(170deg,var(--accent-soft),transparent 60%); box-shadow:0 0 26px var(--accent-glow)} .price-card .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink); padding:4px 16px;border-radius:3px;font-size:.72rem;font-weight:700;font-family:var(--mono);letter-spacing:.05em} .price-name{font-size:1.2rem;font-weight:600;margin-bottom:8px} .price-amount{font-size:2.4rem;font-weight:700;font-family:var(--mono);letter-spacing:-.02em} .price-period{font-size:.88rem;color:var(--ink-dim);margin-top:2px} .price-features{margin-top:22px;list-style:none;display:grid;gap:0} .price-features li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ink-dim);display:flex;gap:9px;align-items:flex-start} .price-features li:last-child{border:none} .price-features .check{color:var(--accent);font-weight:700;flex-shrink:0} /* CTA box */ .cta-box{position:relative;border:1px solid var(--accent-line);border-radius:3px;overflow:hidden;text-align:center;padding:52px 30px; background:radial-gradient(100% 140% at 50% 0%,var(--accent-soft-2),transparent 60%),var(--bg-2)} .cta-box h2{margin-bottom:12px} .cta-box p{color:var(--ink-dim);font-size:1.04rem;max-width:600px;margin:0 auto 24px} .cta-box .hero-actions{justify-content:center;margin-top:0} /* Footer */ .footer{border-top:1px solid var(--line);padding:44px 0 34px;margin-top:40px} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px} @media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}} .footer-grid h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px;font-weight:600} .footer-grid a{display:block;color:var(--ink-dim);font-size:.9rem;margin-bottom:9px;transition:color .2s} .footer-grid a:hover{color:var(--ink)} .footer-grid>div:first-child p{color:var(--ink-dim);font-size:.9rem;max-width:300px;margin-top:12px} .footer-bottom{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:.82rem} /* Comparison — Laravel Forge pricing style */ html.page-comparison{--accent:#15803d;--accent-ink:#fff;--accent-2:#166534} html.page-comparison .aura,html.page-comparison .scene-bg{display:none} .cmp-page{background:#fff} html[data-theme="dark"] .cmp-page{background:var(--bg)} .cmp-hero{padding:64px 0 36px;text-align:center} .cmp-hero h1{ font-size:clamp(2rem,4.6vw,3.2rem);font-weight:500;letter-spacing:-.035em;line-height:1.08; max-width:18ch;margin:0 auto 16px; } .cmp-lede{font-size:1.05rem;color:var(--ink-dim);max-width:520px;margin:0 auto 28px;line-height:1.6} .cmp-billing-toggle{ display:inline-flex;gap:2px;padding:3px;border:1px solid rgba(12,22,42,.14); border-radius:999px;background:#eef1f6; } html[data-theme="dark"] .cmp-billing-toggle{background:#141820;border-color:rgba(255,255,255,.12)} .cmp-toggle-btn{ border:1px solid transparent;background:transparent;color:#64748b; font:inherit;font-size:.88rem;font-weight:500; padding:8px 22px;border-radius:999px;cursor:pointer; transition:background .2s,color .2s,border-color .2s,box-shadow .2s; min-width:128px; } .cmp-toggle-btn:hover:not(.active){color:#334155} .cmp-toggle-btn.active{ background:#fff;color:#0d1622;font-weight:500; border-color:rgba(12,22,42,.12);box-shadow:0 1px 3px rgba(12,22,42,.1); } html[data-theme="dark"] .cmp-toggle-btn{color:#94a3b8} html[data-theme="dark"] .cmp-toggle-btn:hover:not(.active){color:#cbd5e1} html[data-theme="dark"] .cmp-toggle-btn.active{ background:#1a2030;color:#f1f5f9;border-color:rgba(255,255,255,.14);box-shadow:0 2px 8px rgba(0,0,0,.28); } .cmp-cards-section{padding-top:8px} .cmp-plans{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch; } @media(max-width:1024px){.cmp-plans{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cmp-plans{grid-template-columns:1fr}} .cmp-plan{ position:relative;display:flex;flex-direction:column;border:1px solid rgba(12,22,42,.1); border-radius:3px;background:#fff;padding:28px 22px 22px; } html[data-theme="dark"] .cmp-plan{background:var(--bg-2);border-color:rgba(255,255,255,.1)} .cmp-plan--featured{ border-color:rgba(21,128,61,.28); background:linear-gradient(180deg,rgba(21,128,61,.05),#fff 42%); box-shadow:0 12px 32px rgba(21,128,61,.06); } html[data-theme="dark"] .cmp-plan--featured{background:linear-gradient(180deg,rgba(21,128,61,.1),var(--bg-2) 42%)} .cmp-plan-badge{ position:absolute;top:-11px;left:50%;transform:translateX(-50%); font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.04em; padding:4px 12px;border-radius:3px;background:var(--accent);color:var(--accent-ink); } .cmp-plan h3{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;margin-bottom:6px} .cmp-plan-tag{font-size:.78rem;font-weight:500;color:#15803d;margin-bottom:8px} html[data-theme="dark"] .cmp-plan-tag{color:#4ade80} .cmp-plan-note{font-size:.84rem;line-height:1.55;color:var(--ink-dim);margin-bottom:16px;min-height:2.8em} .cmp-plan-list{ list-style:none;margin:0 0 20px;padding:0;display:grid;gap:0;flex:1; border-top:1px solid rgba(12,22,42,.08); } html[data-theme="dark"] .cmp-plan-list{border-color:rgba(255,255,255,.08)} .cmp-plan-list li{ padding:10px 0;border-bottom:1px solid rgba(12,22,42,.07); font-size:.82rem;color:var(--ink-dim);line-height:1.45; } html[data-theme="dark"] .cmp-plan-list li{border-color:rgba(255,255,255,.07)} .cmp-plan-list li:last-child{border-bottom:none} .cmp-plan-cta{width:100%;justify-content:center;margin-top:auto} .cmp-matrix-section{padding-top:24px} .cmp-panel{display:none} .cmp-panel.active{display:block} .cmp-matrix-wrap{overflow-x:auto;margin-top:8px;border:1px solid rgba(12,22,42,.1);border-radius:3px;background:#fff} html[data-theme="dark"] .cmp-matrix-wrap{background:var(--bg-2);border-color:rgba(255,255,255,.1)} .cmp-matrix{width:100%;border-collapse:collapse;font-size:.84rem;min-width:760px} .cmp-matrix th,.cmp-matrix td{padding:13px 14px;text-align:left;border-bottom:1px solid rgba(12,22,42,.08);vertical-align:middle} html[data-theme="dark"] .cmp-matrix th,html[data-theme="dark"] .cmp-matrix td{border-color:rgba(255,255,255,.08)} .cmp-matrix thead th{font-size:.78rem;font-weight:600;color:var(--ink-faint);background:#f8fafc} html[data-theme="dark"] .cmp-matrix thead th{background:rgba(255,255,255,.03)} .cmp-matrix td:first-child{font-weight:500;color:var(--ink);min-width:200px} .cmp-matrix .cmp-col-gov{background:rgba(21,128,61,.05)} .cmp-matrix thead .cmp-col-gov{color:#15803d;font-weight:500;background:rgba(21,128,61,.08)} .cmp-matrix .check{color:#15803d;font-weight:500;white-space:nowrap} html[data-theme="dark"] .cmp-matrix thead .cmp-col-gov{color:#4ade80} html[data-theme="dark"] .cmp-matrix .check{color:#4ade80} .cmp-matrix .partial{color:#b45309;font-weight:500;white-space:nowrap} .cmp-matrix .cross{color:#94a3b8} .cmp-section-row td{ padding:16px 14px 10px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-faint);background:#fafbfc;border-bottom:1px solid rgba(12,22,42,.1); } html[data-theme="dark"] .cmp-section-row td{background:rgba(255,255,255,.02)} .cmp-section-row span{ display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:3px; font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);border:1px solid rgba(12,22,42,.12);vertical-align:middle; } .cmp-callout{padding-top:16px} .cmp-callout-box{ border:1px solid rgba(12,22,42,.1);border-radius:3px;padding:36px 32px;background:#f8fafc;text-align:left; } html[data-theme="dark"] .cmp-callout-box{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)} .cmp-callout-box h2{font-size:clamp(1.35rem,2.5vw,1.75rem);margin-bottom:10px} .cmp-callout-box p{color:var(--ink-dim);max-width:640px;margin-bottom:22px;line-height:1.6} .cmp-callout-box .hero-actions{justify-content:flex-start;margin-top:0} .cmp-faq{padding-top:32px} .cmp-faq-list{max-width:720px;margin:32px auto 0;display:grid;gap:10px} .cmp-faq-item{ border:1px solid rgba(12,22,42,.1);border-radius:3px;background:#fff;padding:0; } html[data-theme="dark"] .cmp-faq-item{background:var(--bg-2);border-color:rgba(255,255,255,.1)} .cmp-faq-item summary{ cursor:pointer;list-style:none;padding:16px 18px;font-weight:600;font-size:.95rem;color:var(--ink); } .cmp-faq-item summary::-webkit-details-marker{display:none} .cmp-faq-item p{padding:0 18px 16px;margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-dim)} /* Architecture hero — Laravel Cloud network style (animated) */ html.page-arch .aura{ background: radial-gradient(48% 42% at 12% 0%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 62%), radial-gradient(60% 55% at 55% 100%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 66%); } .hero.arch-hero{ --arch-accent:#f5a524; --arch-accent-soft:rgba(245,165,36,.12); --arch-accent-ring:rgba(245,165,36,.38); padding:78px 0 54px; } .hero.arch-hero .hero-copy .lede{max-width:34rem;margin-bottom:0} .hero.arch-hero .hero-actions{margin-top:28px} .arch-stage{ position:relative;min-height:480px;display:flex;align-items:center;justify-content:center; padding:12px 0 28px;overflow:visible; } @media(min-width:941px){ .arch-stage{justify-content:flex-end;padding-right:4px} .arch-stack{margin-left:36px;margin-right:-12px} .arch-dots{inset:8% 0 8% 2%} } .arch-dots{ position:absolute;inset:8% 0 8% 10%;pointer-events:none;opacity:.55; background-image:radial-gradient(circle,rgba(12,22,42,.14) 1px,transparent 1px); background-size:18px 18px; -webkit-mask-image:radial-gradient(ellipse 90% 80% at 55% 45%,#000 35%,transparent 78%); mask-image:radial-gradient(ellipse 90% 80% at 55% 45%,#000 35%,transparent 78%); } html[data-theme="dark"] .arch-dots{background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px)} .arch-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .arch-line{stroke:rgba(12,22,42,.12);stroke-width:1.2;stroke-dasharray:5 6;animation:archLineDash 3.2s linear infinite} .arch-line--b{animation-delay:1.1s} html[data-theme="dark"] .arch-line{stroke:rgba(255,255,255,.1)} @keyframes archLineDash{to{stroke-dashoffset:-22}} .arch-stack{ position:relative;width:min(100%,500px);min-height:440px; perspective:1800px;perspective-origin:42% 38%; z-index:1; } @media(max-width:940px){.arch-stack{perspective:none;min-height:auto;margin:0 auto}} .arch-perspective{ display:flex;flex-direction:column;gap:20px;align-items:flex-start; transform:rotateX(16deg) rotateY(-24deg) rotateZ(-1.5deg); transform-style:preserve-3d; transform-origin:50% 50%; } @media(max-width:940px){.arch-perspective{transform:none;gap:14px}} .arch-perspective-item{ position:relative;width:min(100%,340px);transform-style:preserve-3d; } .arch-perspective-item--back{ align-self:flex-end;width:min(100%,280px); transform:translate3d(24px,-8px,-50px);opacity:.78; } .arch-perspective-item--main{ transform:translate3d(0,0,30px);z-index:3; } .arch-perspective-item:not(.arch-perspective-item--back):not(.arch-perspective-item--main){ transform:translate3d(8px,0,-10px);z-index:2; } @media(max-width:940px){ .arch-perspective-item,.arch-perspective-item--back,.arch-perspective-item--main{ width:100%;transform:none;opacity:1;align-self:stretch; } } .arch-plate{ position:absolute;left:12px;right:-12px;top:10px;bottom:-12px;border-radius:3px;z-index:0; border:1px solid transparent; } .arch-plate--amber{ background: repeating-linear-gradient(-52deg,rgba(245,165,36,.22) 0,rgba(245,165,36,.22) 1px,transparent 1px,transparent 9px), linear-gradient(145deg,rgba(245,165,36,.28),rgba(245,165,36,.1)); border-color:rgba(245,165,36,.22); box-shadow:0 18px 36px rgba(245,165,36,.16); } .arch-plate--teal{ background: repeating-linear-gradient(-52deg,rgba(34,211,197,.18) 0,rgba(34,211,197,.18) 1px,transparent 1px,transparent 9px), linear-gradient(145deg,rgba(34,211,197,.22),rgba(34,211,197,.08)); border-color:rgba(34,211,197,.2); box-shadow:0 18px 36px rgba(34,211,197,.12); } .arch-plate--dim{ background: repeating-linear-gradient(-52deg,rgba(100,116,139,.12) 0,rgba(100,116,139,.12) 1px,transparent 1px,transparent 9px), linear-gradient(145deg,rgba(148,163,184,.16),rgba(148,163,184,.06)); border-color:rgba(100,116,139,.14); } .arch-card{ position:relative;z-index:1;width:100%;border:1px solid rgba(12,22,42,.09);border-radius:3px;background:#fff; box-shadow:0 24px 48px rgba(12,22,42,.1),0 1px 0 rgba(255,255,255,.85) inset; transform:translateZ(0); } html[data-theme="dark"] .arch-card{background:#11151d;border-color:rgba(255,255,255,.1);box-shadow:0 24px 48px rgba(0,0,0,.38)} .arch-card--main{padding:16px 16px 14px} .arch-card--domains{padding:14px 16px} .arch-card--back{padding:14px 16px} @media(max-width:940px){.arch-card--back{display:block}} .arch-card-title{ display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:12px; } .arch-card-title svg{width:15px;height:15px;color:var(--ink-faint);flex-shrink:0} .arch-feature-list{list-style:none;margin:0;padding:0;display:grid;gap:9px} .arch-feature-list li{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px; font-size:.8rem;color:var(--ink-dim); } .arch-ico{ width:28px;height:28px;border-radius:3px;display:grid;place-items:center; background:#f8fafc;border:1px solid rgba(12,22,42,.07);color:#64748b; } .arch-ico svg{width:14px;height:14px} html[data-theme="dark"] .arch-ico{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#94a3b8} .arch-label{font-weight:500;color:var(--ink)} .arch-status{ display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;color:#b45309;white-space:nowrap; } .arch-status--sm{font-size:.68rem} .arch-dot{ width:7px;height:7px;border-radius:50%;background:var(--arch-accent);flex-shrink:0; box-shadow:0 0 0 0 var(--arch-accent-ring); animation:archDotPulse 2s ease-out infinite; } .arch-feature-list li:nth-child(2) .arch-dot{animation-delay:.35s} .arch-feature-list li:nth-child(3) .arch-dot{animation-delay:.7s} .arch-feature-list li:nth-child(4) .arch-dot{animation-delay:1.05s} @keyframes archDotPulse{ 0%{box-shadow:0 0 0 0 var(--arch-accent-ring)} 70%{box-shadow:0 0 0 9px rgba(245,165,36,0)} 100%{box-shadow:0 0 0 0 rgba(245,165,36,0)} } .arch-domain-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8rem;font-weight:500;color:var(--ink)} .arch-domain-url{ margin-top:6px;font-family:var(--mono);font-size:.68rem;color:var(--ink-faint); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .arch-mini-list{list-style:none;margin:0;padding:0;display:grid;gap:8px} .arch-mini-list li{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--ink-dim)} .arch-mini-list svg{width:14px;height:14px;color:#94a3b8;flex-shrink:0} .arch-float{ position:absolute;top:18%;right:-18%;z-index:5;min-width:172px;padding:7px;border-radius:3px; background:#111318;border:1px solid rgba(255,255,255,.1); box-shadow:0 20px 44px rgba(0,0,0,.32); transform:translateZ(48px); } .arch-float-item{ display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:3px; font-size:.76rem;font-weight:500;color:#f8fafc; } .arch-float-item svg{width:15px;height:15px;color:var(--arch-accent);flex-shrink:0} .arch-float-item+.arch-float-item{border-top:1px solid rgba(255,255,255,.08)} /* Staggered float + entrance animations */ .arch-perspective-item.arch-anim{animation:archCardIn .9s cubic-bezier(.22,.61,.36,1) both,archFloat 5.5s ease-in-out infinite} .arch-anim--1{animation-delay:0s,.2s} .arch-anim--2{animation-delay:.12s,.8s} .arch-anim--3{animation-delay:.22s,1.4s} .arch-perspective-item--main .arch-float.arch-anim{animation:archCardIn .9s cubic-bezier(.22,.61,.36,1) .34s both,archFloat 5.5s ease-in-out 2s infinite} @keyframes archCardIn{ from{opacity:0;transform:translateY(28px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes archFloat{ 0%,100%{translate:0 0} 50%{translate:0 -7px} } @media(max-width:940px){ .arch-plate{display:none} .arch-lines{display:none} .arch-float{position:relative;right:auto;top:auto;margin-top:12px;width:100%;transform:none} .arch-stack{height:auto} } @media(prefers-reduced-motion:reduce){ .arch-anim,.arch-dot,.arch-line,.principles-step.is-active .principles-step-dot{animation:none!important} } /* Principles — Laravel Forge 2×3 bento */ .principles-forge-section{background:#fff} html[data-theme="dark"] .principles-forge-section{background:var(--bg)} .principles-forge-section .section-sub{margin-top:10px} .principles-bento{ display:grid;grid-template-columns:repeat(2,1fr);margin-top:2.5rem; border:1px solid rgba(12,22,42,.1);border-radius:3px;overflow:hidden; background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.04); } html[data-theme="dark"] .principles-bento{background:var(--bg-2);border-color:rgba(255,255,255,.1);box-shadow:none} @media(max-width:900px){.principles-bento{grid-template-columns:1fr}} .principles-cell{ display:flex;flex-direction:column;padding:2rem 1.75rem 1.75rem; border-left:1px solid rgba(12,22,42,.1);border-bottom:1px solid rgba(12,22,42,.1); background:#fff; } html[data-theme="dark"] .principles-cell{background:var(--bg-2);border-color:rgba(255,255,255,.1)} .principles-cell:nth-child(odd){border-left:none} @media(min-width:901px){.principles-cell:nth-last-child(-n+2){border-bottom:none}} @media(max-width:900px){.principles-cell{border-left:none!important}.principles-cell:last-child{border-bottom:none}} .principles-cell h3{ font-size:clamp(1.15rem,2vw,1.35rem);font-weight:600;letter-spacing:-.02em; line-height:1.25;color:var(--ink);margin-bottom:.625rem; } .principles-cell p{font-size:.92rem;line-height:1.62;color:var(--ink-dim);margin:0 0 1.25rem;max-width:28rem} .principles-art{ margin-top:auto;background:#f8fafc;border:1px solid rgba(12,22,42,.08); border-radius:3px;padding:1rem;min-height:168px; } html[data-theme="dark"] .principles-art{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)} .principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .principles-tile{ display:grid;place-items:center;min-height:52px;padding:.5rem .35rem;border-radius:3px; border:1px solid rgba(12,22,42,.1);background:#fff;font-size:.68rem;font-weight:600;color:#475569;text-align:center; } .principles-tile.is-active{border-color:rgba(245,165,36,.45);background:rgba(245,165,36,.08);color:#b45309;box-shadow:inset 0 0 0 1px rgba(245,165,36,.15)} html[data-theme="dark"] .principles-tile{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#94a3b8} html[data-theme="dark"] .principles-tile.is-active{color:#f5a524;border-color:rgba(245,165,36,.35);background:rgba(245,165,36,.1)} .principles-stepper{display:grid;gap:.5rem} .principles-step{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.625rem; padding:.625rem .75rem;border-radius:3px;border:1px solid rgba(12,22,42,.08);background:#fff; font-size:.78rem;color:var(--ink-dim); } .principles-step em{font-style:normal;font-size:.68rem;font-weight:600;color:#94a3b8} .principles-step.is-done .principles-step-dot{background:#0f172a} .principles-step.is-done em{color:#64748b} .principles-step.is-active{border-color:rgba(245,165,36,.35);background:rgba(245,165,36,.06)} .principles-step.is-active em{color:#b45309} .principles-step-dot{ width:10px;height:10px;border-radius:50%;background:#cbd5e1;flex-shrink:0; } .principles-step.is-active .principles-step-dot{ background:#f5a524;box-shadow:0 0 0 0 rgba(245,165,36,.4); animation:archDotPulse 2s ease-out infinite; } html[data-theme="dark"] .principles-step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} html[data-theme="dark"] .principles-step.is-done .principles-step-dot{background:#e2e8f0} .principles-log{display:grid;gap:.45rem;font-family:var(--mono);font-size:.72rem} .principles-log-row{ display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center; padding:.55rem .65rem;border-radius:3px;border:1px solid rgba(12,22,42,.08);background:#fff;color:#475569; } .principles-log-row.is-active{border-color:rgba(245,165,36,.3);background:rgba(245,165,36,.06)} .principles-log-hash{color:#94a3b8} .principles-log-row em{font-style:normal;font-size:.66rem;font-weight:600;color:#b45309} html[data-theme="dark"] .principles-log-row{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#cbd5e1} .principles-status-list{display:grid;gap:.45rem} .principles-status-row{ display:flex;align-items:center;justify-content:space-between;gap:.75rem; padding:.6rem .7rem;border-radius:3px;border:1px solid rgba(12,22,42,.08);background:#fff;font-size:.78rem;color:var(--ink); } html[data-theme="dark"] .principles-status-row{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} .principles-pill{ font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.04em; padding:.2rem .45rem;border-radius:3px;border:1px solid transparent; } .principles-pill.is-live{color:#047857;background:#ecfdf5;border-color:#a7f3d0} .principles-pill.is-stale{color:#b45309;background:#fff7ed;border-color:#fed7aa} .principles-pill.is-ok{color:#0f766e;background:#ecfdf5;border-color:#99f6e4} .principles-standards{display:grid;gap:.4rem} .principles-standard{ display:flex;align-items:center;gap:.625rem;padding:.55rem .65rem;border-radius:3px; border:1px solid rgba(12,22,42,.08);background:#fff;font-size:.78rem;font-weight:500;color:var(--ink); } .principles-standard.is-active{border-color:rgba(245,165,36,.35);background:rgba(245,165,36,.06)} .principles-standard-mark{ display:grid;place-items:center;min-width:2rem;height:1.5rem;padding:0 .35rem;border-radius:3px; font-family:var(--mono);font-size:.62rem;font-weight:700;color:#fff; } .principles-standard-mark.ogc{background:#2563eb} .principles-standard-mark.tak{background:#0f766e} .principles-standard-mark.niem{background:#7c3aed} .principles-standard-mark.esri{background:#ea580c} html[data-theme="dark"] .principles-standard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} /* Domains — dark purple gradient theme */ html.page-domains .aura{ background: radial-gradient(52% 44% at 14% 0%, rgba(91,33,182,.24), transparent 62%), radial-gradient(48% 40% at 88% 8%, rgba(124,58,237,.18), transparent 60%), radial-gradient(58% 52% at 50% 100%, rgba(76,29,149,.14), transparent 66%); } html.page-domains .grad{ background:linear-gradient(100deg,#4c1d95,#7c3aed 115%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } html.page-domains .domains-hero{ background:linear-gradient(180deg,rgba(245,243,255,.55) 0%,transparent 42%); } html.page-domains[data-theme="dark"] .domains-hero{ background:linear-gradient(180deg,rgba(91,33,182,.12) 0%,transparent 48%); } .domains-hero{padding-bottom:48px} .domains-hero-head{max-width:720px;margin:0 auto;text-align:center} .domains-hero-head .lede{margin:0 auto 28px} .domains-hero-head .hero-actions{justify-content:center} .domains-flow{ margin-top:48px;background:transparent;border:none;box-shadow:none;overflow:visible; } .domains-flow-stage{ position:relative;min-height:400px;padding:28px 8px 12px;background:transparent; } .domains-flow-svg{position:absolute;inset:28px 8px 12px;width:calc(100% - 16px);height:calc(100% - 40px);pointer-events:none} .domains-flow-path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .domains-flow-path--primary{stroke:#8b5cf6;stroke-dasharray:6 0;animation:domainsFlowDash 28s linear infinite} .domains-flow-path--hit{stroke:#7c3aed;stroke-width:2;stroke-dasharray:7 6} .domains-flow-path--return{stroke:#94a3b8;stroke-width:1.5;stroke-dasharray:5 7;opacity:.65} .domains-flow-dot{fill:#8b5cf6} .domains-flow-dot--b{fill:#6366f1} @keyframes domainsFlowDash{to{stroke-dashoffset:-120}} .domains-flow-node,.domains-flow-diamond{ position:absolute;z-index:2;text-align:left;box-shadow:none; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .domains-flow-node{ width:min(168px,22vw);padding:11px 12px;border-radius:3px; border:1px solid rgba(12,22,42,.09); background:color-mix(in srgb,var(--bg) 55%,transparent); } .domains-flow-diamond{ width:118px;height:118px;display:grid;place-items:center; border:1px solid rgba(99,102,241,.2); background:color-mix(in srgb,var(--bg) 50%,rgba(99,102,241,.06)); transform:rotate(45deg); } .domains-flow-diamond-inner{transform:rotate(-45deg);text-align:center;width:92px} html[data-theme="dark"] .domains-flow-node,html[data-theme="dark"] .domains-flow-diamond{ background:color-mix(in srgb,var(--bg) 65%,transparent);border-color:rgba(255,255,255,.1); } html[data-theme="dark"] .domains-flow-diamond{background:color-mix(in srgb,var(--bg) 60%,rgba(99,102,241,.14))} .domains-flow-node b,.domains-flow-diamond b{display:block;font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:3px} .domains-flow-node span,.domains-flow-diamond span{display:block;font-size:.66rem;line-height:1.35;color:var(--ink-faint)} .pos-foundation{left:3%;top:6%} .pos-rls{left:26%;top:6%} .pos-route{left:46.5%;top:11%} .pos-domain{left:64%;top:6%} .pos-cop{left:83%;top:6%} .pos-signal{left:3%;bottom:14%} .pos-response{left:83%;bottom:14%} .pos-foundation{border-top:2px solid #6d28d9} .pos-rls{border-top:2px solid #7c3aed} .pos-domain{border-top:2px solid #5b21b6} .pos-cop{border-top:2px solid #8b5cf6} .pos-signal{border-top:2px solid #4c1d95} .pos-response{border-top:2px solid #6d28d9} .domains-flow-diamond{border-top:none} .domains-flow-badge{ position:absolute;z-index:3;font-family:var(--mono);font-size:.62rem;font-weight:700; letter-spacing:.03em;padding:.22rem .5rem;border-radius:3px;border:1px solid transparent; } .domains-flow-badge--miss{left:47%;top:54%;color:#6d28d9;background:#f5f3ff;border-color:#ddd6fe} .domains-flow-badge--hit{left:58%;top:62%;color:#5b21b6;background:#f5f3ff;border-color:#ddd6fe} .domains-flow-legend{ display:flex;flex-wrap:wrap;justify-content:center;gap:28px 36px; padding:14px 18px;margin-top:4px; border-top:1px solid rgba(91,33,182,.1); background-color:rgba(245,243,255,.55); background-image:linear-gradient(rgba(91,33,182,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,33,182,.05) 1px,transparent 1px); background-size:22px 22px; font-size:.8rem;font-weight:400;color:#94a3b8; } .domains-flow-legend span{display:inline-flex;align-items:center;gap:10px} .domains-flow-legend .lg{display:inline-block;width:28px;height:0;border-top:2px solid;flex-shrink:0} .domains-flow-legend .lg-primary{border-color:#8b5cf6} .domains-flow-legend .lg-hit{border-top-style:dashed;border-color:#7c3aed} .domains-flow-legend .lg-return{border-top-style:dashed;border-color:#94a3b8} @media(max-width:900px){ .domains-flow-stage{min-height:0;padding:20px 16px 8px;display:flex;flex-direction:column;gap:10px} .domains-flow-svg{display:none} .domains-flow-node,.domains-flow-diamond,.domains-flow-badge{ position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; width:100%;max-width:100%;margin:0;transform:none; } .domains-flow-diamond{height:auto;min-height:0;padding:12px 14px;border-radius:3px} .domains-flow-diamond-inner{transform:none;width:auto} .domains-flow-badge{display:inline-flex;align-self:flex-start} .flow-i-1{order:1}.flow-i-2{order:2}.flow-i-3{order:3}.flow-i-4{order:4} .flow-i-5{order:5}.flow-i-6{order:6}.flow-i-7{order:7}.flow-i-8{order:8}.flow-i-9{order:9} } @media(prefers-reduced-motion:reduce){.domains-flow-path--primary{animation:none}} .domains-pill{ font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.03em; padding:.28rem .55rem;border-radius:3px;border:1px solid transparent; } .domains-pill.is-live{color:#5b21b6;background:rgba(91,33,182,.12);border-color:rgba(91,33,182,.3)} .domains-pill.is-cyan{color:#6d28d9;background:rgba(109,40,217,.1);border-color:rgba(109,40,217,.28)} .domains-pill.is-emerald{color:#5b21b6;background:rgba(91,33,182,.1);border-color:rgba(91,33,182,.28)} .domains-pill.is-on{color:#4c1d95;background:rgba(76,29,149,.1);border-color:rgba(76,29,149,.28)} .domains-pill.is-muted{color:#64748b;background:#fff;border-color:rgba(12,22,42,.1)} html[data-theme="dark"] .domains-pill.is-muted{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#94a3b8} .domains-intro{padding-top:24px;padding-bottom:16px} /* Forge-style numbered section rails */ .domains-rail{ display:grid;grid-template-columns:52px 1fr;align-items:stretch; border-top:1px solid rgba(91,33,182,.1);border-bottom:1px solid rgba(91,33,182,.1); margin-bottom:28px; background-color:rgba(245,243,255,.62); background-image:linear-gradient(rgba(91,33,182,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,33,182,.05) 1px,transparent 1px); background-size:22px 22px; } .domains-rail-num{ display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;font-weight:500; color:#94a3b8;border-right:1px solid rgba(12,22,42,.1);padding:12px 0; } .domains-rail-body{ display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:11px 18px; } .domains-rail-label{ font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#5b21b6; } .domains-rail-meta{font-size:.8rem;font-weight:400;color:#94a3b8} .domains-spot-wrap{border-top:1px solid var(--line)} .domains-spot{padding:56px 0 72px;border-bottom:1px solid var(--line)} .domains-spot .domains-rail{margin-bottom:32px} .domains-spot-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .domains-spot:nth-child(even) .domains-spot-art{order:-1} @media(max-width:900px){ .domains-spot{padding:48px 0} .domains-spot-grid{grid-template-columns:1fr;gap:32px} .domains-spot:nth-child(even) .domains-spot-art{order:0} } .domains-spot-copy h3{ font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:600;letter-spacing:-.025em; line-height:1.2;margin-bottom:14px;color:var(--ink); } .domains-spot-copy p{font-size:.98rem;line-height:1.65;color:var(--ink-dim);margin-bottom:22px;max-width:34rem} .domains-spot-list{display:grid;gap:0} .domains-spot-item{padding:13px 0 13px 18px;border-left:2px solid var(--line)} .domains-spot-item.is-hi{border-left-color:var(--tone)} .domains-spot-item b{display:block;font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:3px} .domains-spot-item p{margin:0;font-size:.84rem;color:var(--ink-faint);line-height:1.5} .domains-spot.tone-cyan{--tone:#5b21b6;--tone-bg:rgba(91,33,182,.1);--tone-border:rgba(91,33,182,.26)} .domains-spot.tone-amber{--tone:#6d28d9;--tone-bg:rgba(109,40,217,.1);--tone-border:rgba(109,40,217,.26)} .domains-spot.tone-indigo{--tone:#4c1d95;--tone-bg:rgba(76,29,149,.1);--tone-border:rgba(76,29,149,.26)} .domains-spot.tone-violet{--tone:#7c3aed;--tone-bg:rgba(124,58,237,.1);--tone-border:rgba(124,58,237,.26)} .domains-spot.tone-emerald{--tone:#5b21b6;--tone-bg:rgba(91,33,182,.1);--tone-border:rgba(91,33,182,.26)} .domains-spot.tone-rose{--tone:#6d28d9;--tone-bg:rgba(109,40,217,.1);--tone-border:rgba(109,40,217,.26)} .domains-viz{ border:1px solid rgba(12,22,42,.09);border-radius:3px;padding:1rem; background:linear-gradient(180deg,var(--tone-bg),transparent); box-shadow:0 12px 32px rgba(12,22,42,.07); } html[data-theme="dark"] .domains-viz{border-color:rgba(255,255,255,.08);box-shadow:0 12px 32px rgba(0,0,0,.28)} .domains-viz-row{ display:flex;align-items:center;justify-content:space-between;gap:.75rem; padding:.7rem .8rem;border-radius:3px;border:1px solid rgba(12,22,42,.08);background:#fff; font-size:.8rem;color:var(--ink);margin-bottom:.45rem; } .domains-viz-row:last-child{margin-bottom:0} .domains-viz-row.is-active{border-color:var(--tone-border);background:var(--tone-bg)} html[data-theme="dark"] .domains-viz-row{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} .domains-tag{ font-family:var(--mono);font-size:.64rem;font-weight:600;border-radius:3px;padding:.15rem .4rem; color:var(--tag-ink);background:var(--tag-bg);border:1px solid var(--tag-border); } .domains-tag.tag-cyan{--tag-ink:#5b21b6;--tag-bg:#f5f3ff;--tag-border:#ddd6fe} .domains-tag.tag-sky{--tag-ink:#6d28d9;--tag-bg:#f5f3ff;--tag-border:#e9d5ff} .domains-tag.tag-amber{--tag-ink:#6d28d9;--tag-bg:#faf5ff;--tag-border:#e9d5ff} .domains-tag.tag-emerald{--tag-ink:#5b21b6;--tag-bg:#f5f3ff;--tag-border:#ddd6fe} .domains-tag.tag-indigo{--tag-ink:#4c1d95;--tag-bg:#ede9fe;--tag-border:#ddd6fe} .domains-tag.tag-violet{--tag-ink:#6d28d9;--tag-bg:#f5f3ff;--tag-border:#ddd6fe} .domains-tag.tag-rose{--tag-ink:#7c3aed;--tag-bg:#faf5ff;--tag-border:#e9d5ff} html[data-theme="dark"] .domains-tag.tag-cyan{--tag-bg:rgba(91,33,182,.14);--tag-border:rgba(91,33,182,.32)} html[data-theme="dark"] .domains-tag.tag-sky{--tag-bg:rgba(109,40,217,.14);--tag-border:rgba(109,40,217,.32)} html[data-theme="dark"] .domains-tag.tag-amber{--tag-bg:rgba(109,40,217,.14);--tag-border:rgba(109,40,217,.32)} html[data-theme="dark"] .domains-tag.tag-emerald{--tag-bg:rgba(91,33,182,.14);--tag-border:rgba(91,33,182,.32)} html[data-theme="dark"] .domains-tag.tag-indigo{--tag-bg:rgba(76,29,149,.14);--tag-border:rgba(76,29,149,.32)} html[data-theme="dark"] .domains-tag.tag-violet{--tag-bg:rgba(124,58,237,.14);--tag-border:rgba(124,58,237,.32)} html[data-theme="dark"] .domains-tag.tag-rose{--tag-bg:rgba(109,40,217,.14);--tag-border:rgba(109,40,217,.32)} .domains-catalog{background:transparent} .domains-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2.5rem; border:none;border-radius:0;overflow:visible;background:transparent; } html[data-theme="dark"] .domains-grid{background:transparent;border:none} @media(max-width:900px){.domains-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.domains-grid{grid-template-columns:1fr}} .domains-card{ padding:1.5rem 1.35rem;border-radius:3px; border:1px solid rgba(12,22,42,.09); background:color-mix(in srgb,var(--bg) 58%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } html[data-theme="dark"] .domains-card{ background:color-mix(in srgb,var(--bg) 68%,transparent); border-color:rgba(255,255,255,.1); } .domains-card-head{display:flex;align-items:center;gap:.625rem;margin-bottom:.625rem} .domains-id{ font-family:var(--mono);font-size:.64rem;font-weight:700;border-radius:3px;padding:.18rem .38rem; color:var(--tone-ink);background:var(--tone-bg);border:1px solid var(--tone-border); } .domains-card.tone-cyan{--tone:#5b21b6;--tone-ink:#5b21b6;--tone-bg:#f5f3ff;--tone-border:#ddd6fe} .domains-card.tone-amber{--tone:#6d28d9;--tone-ink:#6d28d9;--tone-bg:#faf5ff;--tone-border:#e9d5ff} .domains-card.tone-indigo{--tone:#4c1d95;--tone-ink:#4c1d95;--tone-bg:#ede9fe;--tone-border:#ddd6fe} .domains-card.tone-emerald{--tone:#5b21b6;--tone-ink:#5b21b6;--tone-bg:#f5f3ff;--tone-border:#ddd6fe} .domains-card.tone-violet{--tone:#7c3aed;--tone-ink:#6d28d9;--tone-bg:#f5f3ff;--tone-border:#ddd6fe} .domains-card.tone-rose{--tone:#6d28d9;--tone-ink:#6d28d9;--tone-bg:#faf5ff;--tone-border:#e9d5ff} .domains-card.tone-sky{--tone:#7c3aed;--tone-ink:#6d28d9;--tone-bg:#f5f3ff;--tone-border:#ddd6fe} html[data-theme="dark"] .domains-card.tone-cyan{--tone-bg:rgba(91,33,182,.14);--tone-border:rgba(91,33,182,.32)} html[data-theme="dark"] .domains-card.tone-amber{--tone-bg:rgba(109,40,217,.14);--tone-border:rgba(109,40,217,.32)} html[data-theme="dark"] .domains-card.tone-indigo{--tone-bg:rgba(76,29,149,.14);--tone-border:rgba(76,29,149,.32)} html[data-theme="dark"] .domains-card.tone-emerald{--tone-bg:rgba(91,33,182,.14);--tone-border:rgba(91,33,182,.32)} html[data-theme="dark"] .domains-card.tone-violet{--tone-bg:rgba(124,58,237,.14);--tone-border:rgba(124,58,237,.32)} html[data-theme="dark"] .domains-card.tone-rose{--tone-bg:rgba(109,40,217,.14);--tone-border:rgba(109,40,217,.32)} html[data-theme="dark"] .domains-card.tone-sky{--tone-bg:rgba(124,58,237,.14);--tone-border:rgba(124,58,237,.32)} .domains-card h4{font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0} .domains-card p{font-size:.84rem;line-height:1.58;color:var(--ink-dim);margin:0 0 .75rem} .domains-ns{ font-family:var(--mono);font-size:.66rem;color:#64748b; background:color-mix(in srgb,var(--bg) 40%,transparent); border:1px solid rgba(12,22,42,.08);border-radius:3px;padding:.2rem .45rem; } html[data-theme="dark"] .domains-ns{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#94a3b8} /* Domains — dark mode readability */ html.page-domains[data-theme="dark"]{ --ink:#eef2f7; --ink-dim:#b4c0d0; --ink-faint:#8d9aad; --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.16); } html.page-domains[data-theme="dark"] .aura, html.page-domains[data-theme="dark"] .scene-bg{display:block} html.page-domains[data-theme="dark"] .aura{ background: radial-gradient(52% 44% at 14% 0%, rgba(167,139,250,.18), transparent 62%), radial-gradient(48% 40% at 88% 8%, rgba(34,211,238,.1), transparent 58%), radial-gradient(58% 52% at 50% 100%, rgba(139,92,246,.14), transparent 66%); } html.page-domains[data-theme="dark"] .grad{ background:linear-gradient(100deg,#ddd6fe,#c4b5fd 55%,#a5b4fc 115%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } html.page-domains[data-theme="dark"] .domains-hero{ background:linear-gradient(180deg,rgba(139,92,246,.1) 0%,transparent 46%); } html.page-domains[data-theme="dark"] body, html.page-domains[data-theme="dark"]{background:#080a0f} html.page-domains[data-theme="dark"] .domains-flow-node, html.page-domains[data-theme="dark"] .domains-flow-diamond{ background:rgba(17,21,29,.92);border-color:rgba(255,255,255,.12); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 8px 24px rgba(0,0,0,.32); } html.page-domains[data-theme="dark"] .domains-flow-diamond{ background:rgba(22,18,40,.88);border-color:rgba(167,139,250,.35); } html.page-domains[data-theme="dark"] .domains-flow-node b, html.page-domains[data-theme="dark"] .domains-flow-diamond b{color:#f1f5f9} html.page-domains[data-theme="dark"] .domains-flow-node span, html.page-domains[data-theme="dark"] .domains-flow-diamond span{color:#a8b4c8} html.page-domains[data-theme="dark"] .domains-flow-path--primary{stroke:#c4b5fd} html.page-domains[data-theme="dark"] .domains-flow-path--hit{stroke:#34d399} html.page-domains[data-theme="dark"] .domains-flow-path--return{stroke:#64748b;opacity:.75} html.page-domains[data-theme="dark"] .domains-flow-dot{fill:#c4b5fd} html.page-domains[data-theme="dark"] .domains-flow-dot--b{fill:#67e8f9} html.page-domains[data-theme="dark"] .pos-foundation{border-top-color:#22d3ee} html.page-domains[data-theme="dark"] .pos-rls{border-top-color:#a5b4fc} html.page-domains[data-theme="dark"] .pos-domain{border-top-color:#fbbf24} html.page-domains[data-theme="dark"] .pos-cop{border-top-color:#c4b5fd} html.page-domains[data-theme="dark"] .pos-signal{border-top-color:#34d399} html.page-domains[data-theme="dark"] .pos-response{border-top-color:#fb7185} html.page-domains[data-theme="dark"] .domains-flow-badge--miss{ color:#e9d5ff;background:rgba(139,92,246,.22);border-color:rgba(196,181,253,.45); } html.page-domains[data-theme="dark"] .domains-flow-badge--hit{ color:#a7f3d0;background:rgba(16,185,129,.18);border-color:rgba(52,211,153,.4); } html.page-domains[data-theme="dark"] .domains-flow-legend{ color:#9aa8ba;background-color:rgba(14,17,24,.85); background-image:linear-gradient(rgba(167,139,250,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.08) 1px,transparent 1px); border-color:rgba(167,139,250,.18); } html.page-domains[data-theme="dark"] .domains-flow-legend .lg-primary{border-color:#c4b5fd} html.page-domains[data-theme="dark"] .domains-flow-legend .lg-hit{border-color:#34d399} html.page-domains[data-theme="dark"] .domains-flow-legend .lg-return{border-color:#64748b} html.page-domains[data-theme="dark"] .domains-rail{ background-color:rgba(14,17,24,.88); background-image:linear-gradient(rgba(167,139,250,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.07) 1px,transparent 1px); border-color:rgba(167,139,250,.16); } html.page-domains[data-theme="dark"] .domains-rail-num{color:#7c8798;border-color:rgba(255,255,255,.1)} html.page-domains[data-theme="dark"] .domains-rail-label{color:#c4b5fd} html.page-domains[data-theme="dark"] .domains-rail-meta{color:#8d9aad} html.page-domains[data-theme="dark"] .domains-flow .domains-rail-label{color:#ddd6fe} html.page-domains[data-theme="dark"] .domains-spot.tone-cyan .domains-rail-label{color:#67e8f9} html.page-domains[data-theme="dark"] .domains-spot.tone-amber .domains-rail-label{color:#fcd34d} html.page-domains[data-theme="dark"] .domains-spot.tone-indigo .domains-rail-label{color:#a5b4fc} html.page-domains[data-theme="dark"] .domains-spot.tone-violet .domains-rail-label{color:#ddd6fe} html.page-domains[data-theme="dark"] .domains-spot.tone-emerald .domains-rail-label{color:#6ee7b7} html.page-domains[data-theme="dark"] .domains-spot.tone-rose .domains-rail-label{color:#fda4af} html.page-domains[data-theme="dark"] .domains-flow-legend{color:#9aa8ba} html.page-domains[data-theme="dark"] .domains-spot-copy p{color:#b4c0d0} html.page-domains[data-theme="dark"] .domains-spot-item p{color:#8d9aad} html.page-domains[data-theme="dark"] .section-sub{color:#9aa8ba} html.page-domains[data-theme="dark"] .domains-viz{ background:linear-gradient(180deg,rgba(139,92,246,.08),rgba(17,21,29,.95)); border-color:rgba(167,139,250,.2);box-shadow:0 10px 28px rgba(0,0,0,.28); } html.page-domains[data-theme="dark"] .domains-viz-row{ background:rgba(12,15,22,.9);border-color:rgba(255,255,255,.1);color:#eef2f7; } html.page-domains[data-theme="dark"] .domains-viz-row.is-active{ background:color-mix(in srgb,var(--tone-bg) 70%,transparent); border-color:var(--tone-border); } html.page-domains[data-theme="dark"] .domains-tag.tag-cyan{--tag-ink:#67e8f9;--tag-bg:rgba(6,182,212,.18);--tag-border:rgba(6,182,212,.35)} html.page-domains[data-theme="dark"] .domains-tag.tag-sky{--tag-ink:#7dd3fc;--tag-bg:rgba(14,165,233,.18);--tag-border:rgba(14,165,233,.35)} html.page-domains[data-theme="dark"] .domains-tag.tag-amber{--tag-ink:#fcd34d;--tag-bg:rgba(245,158,11,.18);--tag-border:rgba(245,158,11,.35)} html.page-domains[data-theme="dark"] .domains-tag.tag-emerald{--tag-ink:#6ee7b7;--tag-bg:rgba(16,185,129,.18);--tag-border:rgba(16,185,129,.35)} html.page-domains[data-theme="dark"] .domains-tag.tag-indigo{--tag-ink:#a5b4fc;--tag-bg:rgba(99,102,241,.18);--tag-border:rgba(99,102,241,.35)} html.page-domains[data-theme="dark"] .domains-tag.tag-violet{--tag-ink:#c4b5fd;--tag-bg:rgba(139,92,246,.18);--tag-border:rgba(139,92,246,.35)} html.page-domains[data-theme="dark"] .domains-tag.tag-rose{--tag-ink:#fda4af;--tag-bg:rgba(244,63,94,.18);--tag-border:rgba(244,63,94,.35)} html.page-domains[data-theme="dark"] .domains-card{ background:#11151d;border-color:rgba(255,255,255,.12); backdrop-filter:none;-webkit-backdrop-filter:none; } html.page-domains[data-theme="dark"] .domains-card p{color:#b4c0d0} html.page-domains[data-theme="dark"] .domains-card.tone-cyan{--tone-ink:#67e8f9;--tone-bg:rgba(6,182,212,.18);--tone-border:rgba(6,182,212,.35)} html.page-domains[data-theme="dark"] .domains-card.tone-amber{--tone-ink:#fcd34d;--tone-bg:rgba(245,158,11,.18);--tone-border:rgba(245,158,11,.35)} html.page-domains[data-theme="dark"] .domains-card.tone-indigo{--tone-ink:#a5b4fc;--tone-bg:rgba(99,102,241,.18);--tone-border:rgba(99,102,241,.35)} html.page-domains[data-theme="dark"] .domains-card.tone-emerald{--tone-ink:#6ee7b7;--tone-bg:rgba(16,185,129,.18);--tone-border:rgba(16,185,129,.35)} html.page-domains[data-theme="dark"] .domains-card.tone-violet{--tone-ink:#c4b5fd;--tone-bg:rgba(139,92,246,.18);--tone-border:rgba(139,92,246,.35)} html.page-domains[data-theme="dark"] .domains-card.tone-rose{--tone-ink:#fda4af;--tone-bg:rgba(244,63,94,.18);--tone-border:rgba(244,63,94,.35)} html.page-domains[data-theme="dark"] .domains-card.tone-sky{--tone-ink:#7dd3fc;--tone-bg:rgba(14,165,233,.18);--tone-border:rgba(14,165,233,.35)} html.page-domains[data-theme="dark"] .domains-ns{color:#9aa8ba;background:#0c0f16} html.page-domains .domains-flow .domains-rail-label{color:#7c3aed} html.page-domains .domains-spot.tone-cyan .domains-rail-label{color:#0891b2} html.page-domains .domains-spot.tone-amber .domains-rail-label{color:#d97706} html.page-domains .domains-spot.tone-indigo .domains-rail-label{color:#4f46e5} html.page-domains .domains-spot.tone-violet .domains-rail-label{color:#7c3aed} html.page-domains .domains-spot.tone-emerald .domains-rail-label{color:#059669} html.page-domains .domains-spot.tone-rose .domains-rail-label{color:#e11d48} html.page-domains[data-theme="dark"] .domains-spot.tone-cyan{--tone:#22d3ee;--tone-bg:rgba(6,182,212,.16);--tone-border:rgba(34,211,238,.38)} html.page-domains[data-theme="dark"] .domains-spot.tone-amber{--tone:#fbbf24;--tone-bg:rgba(245,158,11,.16);--tone-border:rgba(251,191,36,.38)} html.page-domains[data-theme="dark"] .domains-spot.tone-indigo{--tone:#818cf8;--tone-bg:rgba(99,102,241,.16);--tone-border:rgba(129,140,248,.38)} html.page-domains[data-theme="dark"] .domains-spot.tone-violet{--tone:#c4b5fd;--tone-bg:rgba(139,92,246,.16);--tone-border:rgba(196,181,253,.38)} html.page-domains[data-theme="dark"] .domains-spot.tone-emerald{--tone:#34d399;--tone-bg:rgba(16,185,129,.16);--tone-border:rgba(52,211,153,.38)} html.page-domains[data-theme="dark"] .domains-spot.tone-rose{--tone:#fb7185;--tone-bg:rgba(244,63,94,.16);--tone-border:rgba(251,113,133,.38)} html.page-domains[data-theme="dark"] .cta-box{ background:#11151d;border-color:rgba(139,92,246,.3); box-shadow:0 8px 24px rgba(0,0,0,.3); } html.page-domains[data-theme="dark"] .cta-box p{color:#b4c0d0} /* Platform page — Laravel Private Cloud style */ html.page-platform{--accent:#2563eb;--accent-ink:#fff;--accent-2:#dc2626} html.page-platform .aura,html.page-platform .scene-bg{display:none} .plat-page{background:#fff} html[data-theme="dark"] .plat-page{background:var(--bg)} .plat-hero{ position:relative;overflow:hidden;padding:72px 0 48px;text-align:center; background: radial-gradient(44% 42% at 82% 12%,rgba(220,38,38,.08),transparent 70%), linear-gradient(180deg,rgba(37,99,235,.06) 0%,transparent 72%); } html[data-theme="dark"] .plat-hero{ background: radial-gradient(46% 40% at 84% 12%,rgba(220,38,38,.14),transparent 70%), linear-gradient(180deg,rgba(37,99,235,.14) 0%,transparent 68%); } .plat-hero .container{position:relative;z-index:1} .plat-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden} .plat-hero-glow{ position:absolute;border-radius:50%;filter:blur(72px);opacity:.55; animation:platHeroDrift 18s ease-in-out infinite alternate; } .plat-hero-glow--a{ width:min(52vw,420px);height:min(52vw,420px);left:-8%;top:-18%; background:radial-gradient(circle,rgba(59,130,246,.28),transparent 68%); } .plat-hero-glow--b{ width:min(44vw,360px);height:min(44vw,360px);right:-6%;top:8%; background:radial-gradient(circle,rgba(220,38,38,.24),transparent 70%); animation-duration:22s;animation-delay:-4s; } .plat-hero-glow--c{ width:min(38vw,300px);height:min(38vw,300px);left:38%;bottom:-22%; background:radial-gradient(circle,rgba(96,165,250,.22),transparent 72%); animation-duration:26s;animation-delay:-8s; } @keyframes platHeroDrift{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(18px,-14px) scale(1.06)} } .plat-hero-emblem-bg{ position:absolute;left:50%;top:52%;width:min(58vw,380px);height:auto; transform:translate(-50%,-50%);color:#3b82f6;opacity:.14; animation:platHeroEmblem 20s ease-in-out infinite alternate; } .plat-hero-shield{stroke-dasharray:4 6;animation:platHeroShield 24s linear infinite} @keyframes platHeroEmblem{ 0%{transform:translate(-50%,-50%) scale(1) rotate(0deg)} 100%{transform:translate(-50%,-52%) scale(1.03) rotate(1.5deg)} } @keyframes platHeroShield{to{stroke-dashoffset:-40}} .plat-hero-stripes{ position:absolute;inset:0;opacity:.045; background:repeating-linear-gradient( 90deg, rgba(30,64,175,.55) 0 1px, transparent 1px 20px, rgba(185,28,28,.45) 20px 21px, transparent 21px 40px ); mask-image:radial-gradient(ellipse 70% 55% at 50% 45%,#000 20%,transparent 72%); -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 45%,#000 20%,transparent 72%); } html[data-theme="dark"] .plat-hero-emblem-bg{color:#60a5fa;opacity:.12} html[data-theme="dark"] .plat-hero-stripes{opacity:.06} html[data-theme="dark"] .plat-hero-glow{opacity:.45} @media(prefers-reduced-motion:reduce){ .plat-hero-glow,.plat-hero-emblem-bg,.plat-hero-shield{animation:none} } .plat-hero h1{ font-size:clamp(2.1rem,5vw,3.5rem);font-weight:500;letter-spacing:-.04em;line-height:1.06; max-width:16ch;margin:0 auto 18px; } .plat-lede{ font-size:clamp(1rem,1.8vw,1.12rem);color:var(--ink-dim);max-width:560px;margin:0 auto 28px;line-height:1.65; } .plat-badges-label{ font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px; } .plat-badges{ display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:32px; } .plat-badges span{ font-size:.76rem;font-weight:500;padding:6px 12px;border-radius:999px; border:1px solid rgba(12,22,42,.1);background:#f8fafc;color:var(--ink-dim); } html[data-theme="dark"] .plat-badges span{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#b4c0d0} .plat-hero .hero-actions{justify-content:center} .plat-gov-emblem{ display:inline-flex;align-items:center;gap:10px;margin-bottom:22px; padding:7px 14px 7px 10px;border-radius:999px; border:1px solid rgba(59,130,246,.24);background:rgba(59,130,246,.07); color:#1d4ed8;font-size:.78rem;font-weight:600;letter-spacing:.02em; } .plat-gov-emblem svg{width:28px;height:28px;flex-shrink:0} html[data-theme="dark"] .plat-gov-emblem{color:#93c5fd;background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.36)} .plat-gov-trust{ padding:0 0 40px;border-bottom:1px solid var(--line); } .plat-gov-trust-label,.plat-gov-sectors-label{ text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-faint);margin:0 0 18px; } .plat-gov-badges{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-width:1120px;margin:0 auto; } .plat-gov-badge{ display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:3px; border:1px solid rgba(12,22,42,.09);background:#fafbfc;min-width:0; } html[data-theme="dark"] .plat-gov-badge{background:#11151d;border-color:rgba(255,255,255,.1)} .plat-gov-badge-icon{ display:grid;place-items:center;width:40px;height:40px;border-radius:3px;flex-shrink:0; } .plat-gov-badge-icon svg{width:28px;height:28px} .plat-gov-badge-icon--fed{color:#1d4ed8;background:rgba(37,99,235,.1)} .plat-gov-badge-icon--aws{color:#b91c1c;background:rgba(220,38,38,.12)} .plat-gov-badge-icon--nist{color:#1d4ed8;background:rgba(37,99,235,.12)} .plat-gov-badge-icon--niem{color:#b91c1c;background:rgba(220,38,38,.1)} .plat-gov-badge-icon--fips{color:#1d4ed8;background:rgba(37,99,235,.1)} .plat-gov-badge-icon--ics{color:#be123c;background:rgba(244,63,94,.1)} html[data-theme="dark"] .plat-gov-badge-icon--fed{color:#93c5fd;background:rgba(59,130,246,.18)} html[data-theme="dark"] .plat-gov-badge-icon--aws{color:#fca5a5;background:rgba(220,38,38,.22)} html[data-theme="dark"] .plat-gov-badge-icon--nist{color:#93c5fd;background:rgba(37,99,235,.2)} html[data-theme="dark"] .plat-gov-badge-icon--niem{color:#fda4af;background:rgba(220,38,38,.2)} html[data-theme="dark"] .plat-gov-badge-icon--fips{color:#93c5fd;background:rgba(37,99,235,.2)} html[data-theme="dark"] .plat-gov-badge-icon--ics{color:#fda4af;background:rgba(244,63,94,.18)} .plat-gov-badge-text{display:grid;gap:1px;line-height:1.2} .plat-gov-badge-text b{font-size:.82rem;font-weight:600;color:var(--ink)} .plat-gov-badge-text small{font-size:.68rem;color:var(--ink-faint);font-weight:500} .plat-gov-sectors{padding:36px 0 44px;border-bottom:1px solid var(--line)} .plat-gov-sector-grid{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:920px;margin:0 auto; } .plat-gov-sector{ display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px; border:1px solid rgba(12,22,42,.1);background:#fff; font-size:.8rem;font-weight:500;color:var(--ink-dim); } html[data-theme="dark"] .plat-gov-sector{background:#0c0f16;border-color:rgba(255,255,255,.1);color:#b4c0d0} .plat-gov-sector-icon{ display:grid;place-items:center;width:22px;height:22px;color:var(--accent);flex-shrink:0; } .plat-gov-sector-icon svg{width:18px;height:18px} @media(max-width:640px){ .plat-gov-badges{grid-template-columns:1fr 1fr} .plat-gov-badge{min-width:0} .plat-gov-sector{font-size:.76rem;padding:8px 12px} } @media(max-width:1024px){ .plat-gov-badges{grid-template-columns:repeat(3,minmax(0,1fr))} } .plat-gov-iso{padding:44px 0 48px;border-bottom:none;background:transparent} .plat-pricing-block{background:transparent} html[data-theme="dark"] .plat-pricing-block{background:transparent} .plat-gov-iso-card{ display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:start; border:none;border-radius:0;padding:0;background:transparent; } html[data-theme="dark"] .plat-gov-iso-card{background:transparent;border:none} .plat-gov-iso-kicker{ font-family:var(--mono);font-size:.69rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:#3b82f6;margin:0 0 10px; } .plat-pricing-title{ font-family:var(--font); font-size:37.6px; font-weight:500; font-style:normal; font-feature-settings:"cv01","ss01"; color:#0d1622; letter-spacing:-.03em; line-height:1.12; text-align:left; margin:0 0 16px; background:transparent; } html[data-theme="dark"] .plat-pricing-title{color:#e8edf4} .plat-pricing-lede{ margin:0 0 16px; color:var(--ink-dim); font-size:16px; line-height:1.62; max-width:42ch; } .plat-gov-iso-copy p:not(.plat-gov-iso-kicker){margin:0 0 16px;color:var(--ink-dim);font-size:16px;line-height:1.62;max-width:42ch} .plat-pricing-points{ margin:0 0 20px;padding:0;list-style:none;display:grid;gap:8px; } .plat-pricing-points li{ font-size:16px;color:var(--ink-dim);padding-left:14px;position:relative;line-height:1.45; } .plat-pricing-points li::before{ content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#3b82f6; } .plat-gov-iso-actions{justify-content:flex-start;margin-top:0;gap:10px;flex-wrap:wrap} .plat-gov-iso-actions .btn-primary,.plat-gov-iso-actions .btn-secondary{font-size:.84rem;padding:10px 16px} html[data-theme="dark"] .plat-pricing-points li{color:#b4c0d0} .plat-gov-iso-art{ position:relative;min-height:420px;border:none;border-radius:0; background:transparent;overflow:visible;padding:4px 0 8px; } html[data-theme="dark"] .plat-gov-iso-art{background:transparent;box-shadow:none} .iso-stage{ position:relative;min-height:400px;display:grid;grid-template-columns:1fr 210px;gap:14px; transform-style:preserve-3d; transform:perspective(1100px) rotateX(20deg) rotateY(-20deg) rotateZ(-1deg); transform-origin:50% 52%; } .iso-stage::before{display:none} .iso-main{display:grid;gap:16px;transform:translateZ(28px)} .iso-section{display:grid;gap:6px} .iso-heading{ margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:#64748b;display:flex;align-items:center;gap:6px; } .iso-heading-ic{font-size:.82rem;line-height:1} .iso-sub{margin:0 0 4px;font-size:.72rem;color:#64748b;line-height:1.45} .iso-region-row{display:flex;gap:8px;flex-wrap:wrap} .iso-region{ display:flex;align-items:center;justify-content:space-between;gap:10px; min-width:148px;padding:9px 12px;border-radius:3px;background:#fff; border:1px solid rgba(12,22,42,.12);font-size:.74rem;font-weight:500;color:#334155; box-shadow:0 4px 14px rgba(15,23,42,.06); } .iso-region.is-active{border:2px solid #3b82f6;box-shadow:0 8px 20px rgba(59,130,246,.14)} .iso-region.is-muted{background:transparent;color:#94a3b8;opacity:.85;border-style:dashed} .iso-region-label{white-space:nowrap} .iso-plan-card{ position:relative;max-width:100%;padding:14px 14px 12px;border-radius:3px; border:1px solid rgba(12,22,42,.12);background:#fff; box-shadow:0 14px 30px rgba(15,23,42,.12); transform-style:preserve-3d; } .iso-plan-topline{ position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px 3px 0 0; background:#22c55e;opacity:.85; } .iso-plan-head{display:flex;align-items:center;gap:8px;margin:6px 0 8px} .iso-plan-check{ width:20px;height:20px;border-radius:50%;display:grid;place-items:center; background:#3b82f6;color:#fff;font-size:.62rem;font-weight:700; } .iso-plan-head strong{font-size:.92rem;font-weight:700;color:#0f172a} .iso-plan-price{margin:0 0 8px;font-size:.76rem;font-weight:600;color:#1e293b} .iso-plan-list{margin:0;padding:0;list-style:none;display:grid;gap:6px} .iso-plan-list li{ font-size:.68rem;line-height:1.45;color:#475569;padding-left:10px;position:relative; } .iso-plan-list li::before{content:"•";position:absolute;left:0;color:#64748b} .iso-plan-cta{ display:inline-flex;width:100%;justify-content:center;margin-top:10px; font-size:.72rem;padding:8px 12px; } .iso-estimate{ border:1px solid rgba(12,22,42,.1);border-radius:3px;background:#fff;padding:14px; box-shadow:0 20px 44px rgba(15,23,42,.16); transform:translateZ(28px); align-self:start; } .iso-estimate h4{margin:0 0 12px;font-size:1rem;font-weight:700;color:#0f172a} .iso-est-block{margin-bottom:10px} .iso-est-kicker{ display:block;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:#94a3b8;margin-bottom:2px; } .iso-est-block b{font-size:.82rem;color:#1e293b} .iso-est-chip{ font-size:.72rem;font-weight:600;color:#475569;background:transparent; border:1px dashed rgba(12,22,42,.14);border-radius:3px;padding:8px 10px;margin-bottom:10px; } .iso-est-cta{ display:inline-flex;width:100%;justify-content:center;margin-top:12px; font-size:.72rem;padding:8px 12px; } .iso-est-group{padding-top:8px;margin-top:8px;border-top:1px solid rgba(12,22,42,.08)} .iso-est-title{margin:0 0 4px;font-size:.74rem;font-weight:600;color:#1e293b} .iso-est-group p{margin:0 0 2px;font-size:.68rem;font-style:italic;color:#94a3b8} .iso-region[data-iso-tab="1"]{animation:isoTab1 8s ease infinite} .iso-region[data-iso-tab="2"]{animation:isoTab2 8s ease infinite} .iso-plan-card[data-iso-tab="3"]{animation:isoTab3 8s ease infinite} .iso-estimate[data-iso-tab="4"]{animation:isoTab4 8s ease infinite} .iso-flag{ flex-shrink:0;display:block;width:30px;height:20px;border-radius:2px;overflow:hidden; filter:drop-shadow(0 1px 2px rgba(15,23,42,.14)); shape-rendering:geometricPrecision; } html[data-theme="dark"] .iso-flag{filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))} .iso-cursor{ position:absolute;left:0;top:0;z-index:30;width:24px;height:24px; filter:drop-shadow(0 2px 5px rgba(15,23,42,.4)); animation:isoCursorMove 8s ease-in-out infinite; pointer-events:none; } html[data-theme="dark"] .iso-cursor path{fill:#f8fafc;stroke:#0f172a} html[data-theme="dark"] .iso-heading{color:#94a3b8} html[data-theme="dark"] .iso-sub{color:#8d9aad} html[data-theme="dark"] .iso-region{background:#0f1628;border-color:rgba(255,255,255,.12);color:#cbd5e1} html[data-theme="dark"] .iso-region.is-active{border-color:rgba(96,165,250,.65);box-shadow:0 8px 22px rgba(2,6,23,.45)} html[data-theme="dark"] .iso-region.is-muted{background:transparent;color:#64748b} html[data-theme="dark"] .iso-plan-card{background:#0f1628;border-color:rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(2,6,23,.5)} html[data-theme="dark"] .iso-plan-head strong,html[data-theme="dark"] .iso-plan-price{color:#e2e8f0} html[data-theme="dark"] .iso-plan-list li{color:#9fb1c8} html[data-theme="dark"] .iso-estimate{background:#0f1628;border-color:rgba(255,255,255,.12);box-shadow:0 20px 44px rgba(2,6,23,.55)} html[data-theme="dark"] .iso-estimate h4,html[data-theme="dark"] .iso-est-block b,html[data-theme="dark"] .iso-est-title{color:#e2e8f0} html[data-theme="dark"] .iso-est-chip{background:transparent;border-color:rgba(255,255,255,.14);color:#9fb1c8} html[data-theme="dark"] .iso-est-group{border-color:rgba(255,255,255,.1)} html[data-theme="dark"] .iso-est-group p{color:#7c8ea8} @media(max-width:900px){ .plat-gov-iso-card{grid-template-columns:1fr} .plat-pricing-title{font-size:clamp(1.75rem,6.5vw,37.6px)} .plat-gov-iso-art{min-height:auto;padding:0} .iso-stage{min-height:auto;grid-template-columns:1fr;transform:none} .iso-stage::before{display:none} .iso-main,.iso-estimate{transform:none} .plat-gov-iso-actions{flex-direction:column;align-items:stretch} .plat-gov-iso-actions .btn-primary,.plat-gov-iso-actions .btn-secondary{width:100%;justify-content:center} .iso-cursor{display:none} .iso-region[data-iso-tab],.iso-plan-card[data-iso-tab],.iso-estimate[data-iso-tab]{animation:none} } @keyframes isoCursorMove{ 0%,18%{transform:translate(24px,72px)} 22%,40%{transform:translate(188px,72px)} 44%,62%{transform:translate(34px,214px)} 66%,84%{transform:translate(292px,36px)} 88%,100%{transform:translate(24px,72px)} } @keyframes isoTab1{ 0%,18%{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.2),0 8px 20px rgba(59,130,246,.14)} 19%,100%{border-color:rgba(12,22,42,.12);box-shadow:0 4px 14px rgba(15,23,42,.06)} } @keyframes isoTab2{ 0%,21%{border-color:rgba(12,22,42,.12);background:#f1f5f9;box-shadow:none} 22%,40%{border-color:#3b82f6;background:#eff6ff;box-shadow:0 0 0 2px rgba(59,130,246,.18)} 41%,100%{border-color:rgba(12,22,42,.12);background:#f1f5f9;box-shadow:none} } @keyframes isoTab3{ 0%,62%{border-color:rgba(12,22,42,.12);box-shadow:0 14px 30px rgba(15,23,42,.12)} 44%,62%{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.22),0 16px 34px rgba(59,130,246,.16)} 63%,100%{border-color:rgba(12,22,42,.12);box-shadow:0 14px 30px rgba(15,23,42,.12)} } @keyframes isoTab4{ 0%,84%{border-color:rgba(12,22,42,.1);box-shadow:0 20px 44px rgba(15,23,42,.16)} 66%,84%{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.22),0 22px 48px rgba(37,99,235,.2)} 85%,100%{border-color:rgba(12,22,42,.1);box-shadow:0 20px 44px rgba(15,23,42,.16)} } html[data-theme="dark"] .iso-region[data-iso-tab="1"]{animation-name:isoTab1Dark} html[data-theme="dark"] .iso-region[data-iso-tab="2"]{animation-name:isoTab2Dark} html[data-theme="dark"] .iso-plan-card[data-iso-tab="3"]{animation-name:isoTab3Dark} html[data-theme="dark"] .iso-estimate[data-iso-tab="4"]{animation-name:isoTab4Dark} @keyframes isoTab1Dark{ 0%,18%{border-color:rgba(96,165,250,.7);box-shadow:0 0 0 2px rgba(96,165,250,.25),0 8px 22px rgba(2,6,23,.45)} 19%,100%{border-color:rgba(255,255,255,.12);box-shadow:none} } @keyframes isoTab2Dark{ 0%,21%{border-color:rgba(255,255,255,.12);background:#0c1018} 22%,40%{border-color:rgba(96,165,250,.65);background:rgba(37,99,235,.22)} 41%,100%{border-color:rgba(255,255,255,.12);background:#0c1018} } @keyframes isoTab3Dark{ 0%,62%{border-color:rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(2,6,23,.5)} 44%,62%{border-color:rgba(96,165,250,.7);box-shadow:0 0 0 2px rgba(96,165,250,.24),0 18px 38px rgba(2,6,23,.55)} 63%,100%{border-color:rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(2,6,23,.5)} } @keyframes isoTab4Dark{ 0%,84%{border-color:rgba(255,255,255,.12);box-shadow:0 20px 44px rgba(2,6,23,.55)} 66%,84%{border-color:rgba(96,165,250,.7);box-shadow:0 0 0 2px rgba(96,165,250,.24),0 22px 48px rgba(2,6,23,.6)} 85%,100%{border-color:rgba(255,255,255,.12);box-shadow:0 20px 44px rgba(2,6,23,.55)} } @media(prefers-reduced-motion:reduce){ .iso-cursor,.iso-region[data-iso-tab],.iso-plan-card[data-iso-tab],.iso-estimate[data-iso-tab]{animation:none} } .plat-section{padding:72px 0;border-top:1px solid var(--line)} .plat-section--isolated{background:linear-gradient(180deg,rgba(59,130,246,.05),transparent 42%)} html[data-theme="dark"] .plat-section--isolated{background:linear-gradient(180deg,rgba(59,130,246,.1),transparent 48%)} .plat-section-head{max-width:640px;margin:0 auto 48px;text-align:center} .plat-section-head h2{ font-size:clamp(1.65rem,3.2vw,2.35rem);font-weight:500;letter-spacing:-.03em;line-height:1.12;margin-bottom:14px; } .plat-section-head p{font-size:.98rem;line-height:1.65;color:var(--ink-dim);margin:0} .plat-diagram{ max-width:880px;margin:0 auto 40px;padding:28px 24px;border:1px solid rgba(12,22,42,.1); border-radius:3px;background:#fafbfc;display:grid;gap:14px; } html[data-theme="dark"] .plat-diagram{background:#11151d;border-color:rgba(255,255,255,.1)} .plat-diagram-lane{ display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;border-radius:3px; border:1px solid rgba(12,22,42,.08);background:#fff; } html[data-theme="dark"] .plat-diagram-lane{background:#0c0f16;border-color:rgba(255,255,255,.08)} .plat-diagram-lane--shield{border-color:rgba(59,130,246,.28);background:rgba(59,130,246,.06)} html[data-theme="dark"] .plat-diagram-lane--shield{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.35)} .plat-diagram-lane--core{border-color:rgba(59,130,246,.22);background:rgba(59,130,246,.04)} html[data-theme="dark"] .plat-diagram-lane--core{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3)} .plat-diagram-node{ font-size:.78rem;font-weight:500;padding:6px 12px;border-radius:3px; border:1px solid rgba(12,22,42,.1);background:#fff;color:var(--ink); } html[data-theme="dark"] .plat-diagram-node{background:#1a2030;border-color:rgba(255,255,255,.12);color:#e8edf4} .plat-diagram-node.is-accent{border-color:rgba(59,130,246,.35);color:#1d4ed8;background:rgba(59,130,246,.1)} html[data-theme="dark"] .plat-diagram-node.is-accent{color:#93c5fd;background:rgba(59,130,246,.2)} .plat-diagram-node.is-core{border-color:rgba(59,130,246,.3);color:#2563eb;background:rgba(59,130,246,.08)} html[data-theme="dark"] .plat-diagram-node.is-core{color:#93c5fd;background:rgba(59,130,246,.15)} .plat-diagram-arrow{font-family:var(--mono);font-size:.8rem;color:var(--ink-faint)} .plat-diagram-meta{font-size:.72rem;color:var(--ink-faint);margin-left:auto} .plat-pillars{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:960px;margin:0 auto; } @media(max-width:900px){.plat-pillars{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.plat-pillars{grid-template-columns:1fr}} .plat-pillars article h3{font-size:.95rem;font-weight:600;margin-bottom:8px;letter-spacing:-.01em} .plat-pillars article p{margin:0;font-size:.84rem;line-height:1.55;color:var(--ink-dim)} .plat-metric{max-width:640px;margin:0 auto 56px;text-align:center} .plat-metric-chart{display:grid;gap:12px;margin-bottom:14px} .plat-metric-bar{ display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:3px; border:1px solid rgba(12,22,42,.1);font-size:.88rem;font-weight:500; } .plat-metric-bar em{font-style:normal;font-size:.78rem;color:var(--ink-faint);font-weight:500} .plat-metric-bar--before{background:#f1f5f9;width:88%} html[data-theme="dark"] .plat-metric-bar--before{background:#1a2030} .plat-metric-bar--after{ background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);width:52%;margin:0 auto; } html[data-theme="dark"] .plat-metric-bar--after{background:rgba(59,130,246,.22)} .plat-metric-caption{font-size:.84rem;color:var(--ink-faint);margin:0} .plat-spot{ display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; padding:48px 0;border-top:1px solid var(--line);max-width:960px;margin:0 auto; } .plat-spot--flip .plat-spot-art{order:-1} @media(max-width:860px){ .plat-spot{grid-template-columns:1fr;gap:28px;padding:36px 0} .plat-spot--flip .plat-spot-art{order:0} } .plat-spot-copy h3{ font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:500;letter-spacing:-.02em;margin-bottom:12px;line-height:1.2; } .plat-spot-copy p{font-size:.95rem;line-height:1.65;color:var(--ink-dim);margin-bottom:18px;max-width:34rem} .plat-spot-list{ list-style:none;margin:0;padding:0;display:grid;gap:0; } .plat-spot-list li{ padding:11px 0 11px 16px;border-left:2px solid rgba(59,130,246,.38); font-size:.84rem;color:var(--ink-faint);line-height:1.5; } .plat-spot-art{ border:1px solid rgba(12,22,42,.1);border-radius:3px;padding:20px;background:#fafbfc; } html[data-theme="dark"] .plat-spot-art{background:#11151d;border-color:rgba(255,255,255,.1)} .plat-ui{display:grid;gap:8px} .plat-ui-row{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 14px;border-radius:3px;border:1px solid rgba(12,22,42,.08);background:#fff; font-size:.82rem;color:var(--ink-dim); } html[data-theme="dark"] .plat-ui-row{background:#0c0f16;border-color:rgba(255,255,255,.08);color:#b4c0d0} .plat-ui-row.is-live{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.06)} .plat-ui-row.is-active{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.08)} .plat-ui-pill{ font-family:var(--mono);font-size:.68rem;font-weight:600;padding:3px 8px;border-radius:999px; background:rgba(16,185,129,.12);color:#059669; } .plat-ui-pill.is-amber{background:rgba(245,158,11,.14);color:#d97706} .plat-ui-pill.is-teal{background:rgba(6,182,212,.14);color:#0891b2} html[data-theme="dark"] .plat-ui-pill{color:#6ee7b7} html[data-theme="dark"] .plat-ui-pill.is-amber{color:#fcd34d} html[data-theme="dark"] .plat-ui-pill.is-teal{color:#67e8f9} .plat-ui--mono{font-family:var(--mono);font-size:.78rem} .plat-ui-k{color:#3b82f6;font-weight:600;margin-right:8px} html[data-theme="dark"] .plat-ui-k{color:#93c5fd} .plat-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .plat-stat-grid div{ padding:16px;border-radius:3px;border:1px solid rgba(12,22,42,.08);background:#fff;text-align:center; } html[data-theme="dark"] .plat-stat-grid div{background:#0c0f16;border-color:rgba(255,255,255,.08)} .plat-stat-grid strong{display:block;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin-bottom:4px;color:var(--ink)} .plat-stat-grid span{font-size:.72rem;color:var(--ink-faint)} .plat-platform-list{ max-width:820px;margin:0 auto;display:grid;gap:0;border:1px solid rgba(12,22,42,.1);border-radius:3px;overflow:hidden; } html[data-theme="dark"] .plat-platform-list{border-color:rgba(255,255,255,.1)} .plat-platform-row{ display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:start; padding:24px 28px;border-bottom:1px solid rgba(12,22,42,.08);background:#fff; transition:background .2s; } .plat-platform-row:last-child{border-bottom:none} .plat-platform-row:hover{background:#fafbfc} html[data-theme="dark"] .plat-platform-row{background:var(--bg-2);border-color:rgba(255,255,255,.08)} html[data-theme="dark"] .plat-platform-row:hover{background:#141820} .plat-platform-num{ font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--ink-faint); padding-top:3px;min-width:28px; } .plat-platform-row h3{font-size:1rem;font-weight:600;margin-bottom:6px;letter-spacing:-.01em} .plat-platform-row p{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-dim);max-width:36rem} .plat-platform-tag{ font-family:var(--mono);font-size:.68rem;font-weight:600;padding:5px 10px;border-radius:999px; border:1px solid rgba(59,130,246,.25);color:#1d4ed8;background:rgba(59,130,246,.1);white-space:nowrap; } html[data-theme="dark"] .plat-platform-tag{color:#93c5fd;background:rgba(59,130,246,.18)} @media(max-width:640px){ .plat-platform-row{grid-template-columns:1fr;gap:8px;padding:20px} .plat-platform-tag{justify-self:start} } .plat-support-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:960px;margin:0 auto; } @media(max-width:900px){.plat-support-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.plat-support-grid{grid-template-columns:1fr}} .plat-support-grid article{ padding:22px;border:1px solid rgba(12,22,42,.1);border-radius:3px;background:#fafbfc; } html[data-theme="dark"] .plat-support-grid article{background:#11151d;border-color:rgba(255,255,255,.1)} .plat-support-grid h3{font-size:.92rem;font-weight:600;margin-bottom:8px} .plat-support-grid p{margin:0;font-size:.84rem;line-height:1.55;color:var(--ink-dim)} .plat-faq{padding-top:48px;padding-bottom:56px} .plat-faq-list{max-width:720px;margin:0 auto;display:grid;gap:10px} .plat-faq-item{ border:1px solid rgba(12,22,42,.1);border-radius:3px;background:#fff;padding:0; } html[data-theme="dark"] .plat-faq-item{background:var(--bg-2);border-color:rgba(255,255,255,.1)} .plat-faq-item summary{ cursor:pointer;list-style:none;padding:16px 18px;font-weight:600;font-size:.95rem;color:var(--ink); } .plat-faq-item summary::-webkit-details-marker{display:none} .plat-faq-item p{padding:0 18px 16px;margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-dim)} html.page-platform[data-theme="dark"] .plat-section-head p, html.page-platform[data-theme="dark"] .plat-spot-copy p, html.page-platform[data-theme="dark"] .plat-pillars article p, html.page-platform[data-theme="dark"] .plat-platform-row p, html.page-platform[data-theme="dark"] .plat-support-grid p{color:#b4c0d0} html.page-platform[data-theme="dark"] .plat-spot-list li{color:#8d9aad} html.page-platform[data-theme="dark"] .plat-diagram-meta{color:#8d9aad} html.page-platform[data-theme="dark"] .cta-box{ background:#11151d;border-color:rgba(59,130,246,.3);box-shadow:0 8px 24px rgba(0,0,0,.3); } html.page-platform[data-theme="dark"] .cta-box p{color:#b4c0d0}