:root { --bg:#05070a; --bg-elevated:#080c12; --surface:#0f1419; --surface-elevated:#161b22; --border:rgba(148,163,184,.22); --border-strong:rgba(148,163,184,.34); --text:#f8fafc; --text-secondary:#cbd5e1; --text-muted:#94a3b8; --green:#10b981; --green-dark:#047857; --green-soft:rgba(16,185,129,.13); --climate:#60a5fa; --market:#34d399; --operation:#fbbf24; --max:1180px; --gutter:clamp(20px,4vw,48px); --radius-sm:12px; --radius-md:20px; --radius-lg:28px; --shadow:0 28px 70px rgba(0,0,0,.28); --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { color-scheme:dark; scroll-behavior:smooth; scroll-padding-top:92px; } body { min-width:0; margin:0; overflow-wrap:break-word; background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } img { display:block; max-width:100%; } a { color:inherit; } button,a.button { min-height:44px; } :focus-visible { outline:3px solid var(--operation); outline-offset:4px; }
.site-shell { width:min(100% - (var(--gutter) * 2),var(--max)); margin-inline:auto; } .skip-link { position:fixed; z-index:100; top:12px; left:12px; transform:translateY(-180%); padding:10px 14px; border-radius:var(--radius-sm); background:var(--text); color:var(--bg); text-decoration:none; transition:transform .18s ease; } .skip-link:focus { transform:translateY(0); } .eyebrow { margin:0 0 12px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.site-header { position:sticky; z-index:20; top:0; border-bottom:1px solid rgba(148,163,184,.14); background:rgba(5,7,10,.88); backdrop-filter:blur(18px); } .header-inner { min-height:76px; display:flex; gap:24px; align-items:center; } .brand { display:inline-flex; flex:0 0 auto; gap:10px; align-items:center; color:var(--text); font-size:18px; font-weight:750; letter-spacing:-.04em; text-decoration:none; } .brand-logo { width:40px; height:40px; object-fit:contain; } .nav { display:flex; gap:24px; align-items:center; margin-left:auto; } .nav a,.site-footer nav a { color:var(--text-secondary); font-size:14px; font-weight:600; text-decoration:none; } .nav a:hover,.site-footer nav a:hover,.text-link:hover { color:var(--green); } .header-cta { margin-left:8px; } .menu-toggle { display:none; }
.button { display:inline-flex; gap:10px; align-items:center; justify-content:center; padding:11px 18px; border:1px solid transparent; border-radius:12px; font:inherit; font-size:15px; font-weight:750; text-align:center; text-decoration:none; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; } .button:hover { transform:translateY(-1px); } .button-primary { background:var(--green-dark); color:white; box-shadow:0 12px 28px rgba(4,120,87,.25); } .button-primary:hover { background:#059669; } .button-secondary { border-color:var(--border-strong); background:transparent; color:var(--text); } .button-secondary:hover { border-color:var(--green); background:var(--green-soft); } .text-link { display:inline-flex; gap:8px; align-items:center; color:var(--text-secondary); font-size:15px; font-weight:700; text-decoration:none; } .text-link span { color:var(--green); font-size:20px; }
.hero { position:relative; isolation:isolate; min-width:0; overflow:clip; padding:clamp(52px,8vw,108px) 0 72px; background:radial-gradient(circle at 70% 28%,rgba(16,185,129,.15),transparent 26rem),linear-gradient(135deg,#05070a 10%,#07150f 100%); } .hero-orbit { position:absolute; z-index:-1; width:min(72vw,760px); aspect-ratio:1; right:-18%; top:-34%; border:1px solid rgba(16,185,129,.18); border-radius:50%; box-shadow:0 0 0 64px rgba(16,185,129,.035),0 0 0 128px rgba(16,185,129,.02); pointer-events:none; } .hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,390px); gap:clamp(32px,7vw,104px); align-items:center; } .hero-copy { max-width:650px; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:24px; font-size:clamp(44px,6vw,80px); line-height:.98; letter-spacing:-.07em; } h1 span,h2 span { color:var(--green); } .hero-lede { max-width:580px; margin-bottom:30px; color:var(--text-secondary); font-size:clamp(18px,2vw,22px); line-height:1.5; } .hero-actions { display:flex; flex-wrap:wrap; gap:18px; align-items:center; } .availability { max-width:510px; margin:26px 0 0; color:var(--text-muted); font-size:13px; } .availability strong { color:var(--text-secondary); } .hero-capture { width:min(100%,286px); margin:0 auto; } .device-frame { padding:7px; border:1px solid rgba(255,255,255,.3); border-radius:40px; background:#020407; box-shadow:var(--shadow),0 0 52px rgba(16,185,129,.1); } .hero-capture img { width:100%; height:auto; border-radius:33px; } .hero-capture figcaption { margin-top:14px; color:var(--text-muted); font-size:12px; line-height:1.45; text-align:center; }
.section { padding:clamp(72px,10vw,128px) 0; } .section-surface { border-block:1px solid rgba(148,163,184,.12); background:var(--bg-elevated); } .section-intro { max-width:650px; margin-bottom:clamp(36px,5vw,62px); } .section-intro h2,.responsibility h2,.final-cta h2 { margin-bottom:18px; font-size:clamp(34px,4.2vw,58px); line-height:1.04; letter-spacing:-.06em; } .section-intro > p:last-child { color:var(--text-secondary); font-size:18px; } .split-intro { max-width:none; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; } .split-intro > p { margin-bottom:6px; } .centered { margin-inline:auto; text-align:center; }
.priority-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .priority-card { min-height:276px; padding:28px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); box-shadow:0 16px 42px rgba(0,0,0,.14); } .priority-number { display:block; margin-bottom:58px; color:var(--text-muted); font-size:13px; font-weight:800; letter-spacing:.1em; } .priority-card h3 { margin-bottom:10px; font-size:28px; letter-spacing:-.04em; } .priority-card p { margin-bottom:0; color:var(--text-secondary); } .tone-climate { border-top:3px solid var(--climate); } .tone-market { border-top:3px solid var(--market); } .tone-operation { border-top:3px solid var(--operation); }
.capture-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; } .capture-card { min-width:0; margin:0; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); box-shadow:0 18px 44px rgba(0,0,0,.18); } .capture-image { padding:14px 14px 0; background:linear-gradient(180deg,rgba(16,185,129,.06),transparent 30%); } .capture-card img { width:100%; height:auto; border:1px solid rgba(255,255,255,.16); border-radius:24px 24px 0 0; background:#020407; } .capture-card figcaption { min-height:112px; padding:16px 18px 18px; } .capture-card strong,.capture-card span { display:block; } .capture-card strong { margin-bottom:5px; font-size:16px; } .capture-card span { color:var(--text-muted); font-size:13px; line-height:1.45; } .capture-missing { grid-column:1 / -1; min-height:auto; padding:28px; border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:rgba(15,20,25,.56); } .capture-missing h3 { margin-bottom:14px; font-size:23px; letter-spacing:-.03em; } .capture-missing ul { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 20px; list-style:none; } .capture-missing li { padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-secondary); font-size:13px; } .capture-missing p:last-child { margin-bottom:0; color:var(--text-muted); font-size:14px; }
.responsibility { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(36px,8vw,112px); } .responsibility-list { display:grid; gap:22px; } .responsibility-list article { padding-bottom:22px; border-bottom:1px solid var(--border); } .responsibility-list h3 { margin-bottom:7px; font-size:21px; letter-spacing:-.03em; } .responsibility-list p { margin-bottom:0; color:var(--text-secondary); }
.plans-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:860px; margin:0 auto; } .plan-card { min-height:290px; display:flex; flex-direction:column; padding:30px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); } .plan-card-pro { border-color:rgba(16,185,129,.5); background:linear-gradient(145deg,rgba(16,185,129,.14),var(--surface) 58%); } .plan-card h3 { margin-bottom:12px; font-size:29px; letter-spacing:-.045em; } .plan-card > p:not(.eyebrow) { margin-bottom:26px; color:var(--text-secondary); } .plan-card .button { margin-top:auto; }
.final-cta { position:relative; overflow:clip; padding:clamp(72px,10vw,126px) 0; border-top:1px solid rgba(16,185,129,.3); background:radial-gradient(circle at 50% 10%,rgba(16,185,129,.18),transparent 29rem),#06110e; } .final-cta-inner { max-width:720px; text-align:center; } .final-cta img { width:64px; height:64px; margin:0 auto 24px; } .final-cta p:not(.eyebrow) { max-width:560px; margin:0 auto 28px; color:var(--text-secondary); } .site-footer { padding:44px 0; border-top:1px solid var(--border); background:#040608; } .footer-grid { display:flex; gap:30px; align-items:start; justify-content:space-between; } .footer-grid p { margin:12px 0 0; color:var(--text-muted); font-size:14px; } .site-footer nav { display:flex; flex-wrap:wrap; gap:12px 22px; justify-content:flex-end; }
.legal-page .site-header { position:relative; } .legal { width:min(100% - (var(--gutter) * 2),780px); margin:0 auto; padding:clamp(56px,8vw,96px) 0; } .legal h1 { font-size:clamp(40px,6vw,62px); } .legal h2 { margin:42px 0 14px; font-size:25px; letter-spacing:-.04em; } .legal h3 { margin:0 0 8px; font-size:18px; } .legal p,.legal li { color:var(--text-secondary); } .legal a:not(.button) { color:var(--green); text-underline-offset:3px; } .legal .meta { color:var(--text-muted); font-size:14px; } .legal-card,.support-card { padding:24px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); } .legal-card { margin:24px 0; } .legal-card p:last-child,.support-card p:last-child { margin-bottom:0; } .support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:32px; } .support-card h2 { margin:0 0 10px; font-size:21px; } .support-card p { font-size:15px; } .support-contact { margin-top:32px; }
.download-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 0,rgba(16,185,129,.18),transparent 27rem),var(--bg); } .download-card { width:min(100%,620px); padding:clamp(28px,6vw,52px); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); text-align:center; } .download-card img { width:70px; height:70px; margin:0 auto 24px; } .download-card h1 { margin-bottom:16px; font-size:clamp(36px,6vw,58px); } .download-card p { color:var(--text-secondary); } .download-card .button { width:min(100%,340px); margin-top:8px; } .download-status { min-height:24px; margin:20px 0 0; color:var(--text-muted) !important; font-size:14px; } .download-back { display:inline-block; margin-top:24px; color:var(--text-muted); font-size:14px; }
@media (max-width:900px) { .header-cta { display:none; } .hero-grid,.responsibility,.split-intro { grid-template-columns:1fr; } .hero-copy { text-align:center; margin-inline:auto; } .hero-actions { justify-content:center; } .availability { margin-inline:auto; } .hero-capture { width:min(100%,270px); } .capture-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .capture-missing { grid-column:1 / -1; } }
@media (max-width:720px) { .legal-page .header-inner { flex-wrap:wrap; padding-block:12px; gap:12px; } .legal-page .nav { width:100%; margin-left:0; flex-wrap:wrap; gap:8px 16px; } html.js .menu-toggle { display:grid; } .menu-toggle { width:44px; padding:0; margin-left:auto; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; } .menu-toggle span { width:18px; height:2px; margin:3px auto; display:block; background:var(--text); transition:transform .18s ease; } .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); } .nav { margin-left:auto; } html.js .nav { position:absolute; top:calc(100% + 1px); right:0; left:0; display:grid; gap:0; max-height:0; overflow:hidden; border-bottom:1px solid transparent; background:var(--bg-elevated); opacity:0; transition:max-height .2s ease,opacity .2s ease; } html.js .nav.is-open { max-height:260px; border-color:var(--border); opacity:1; } html.js .nav a { padding:15px var(--gutter); border-top:1px solid var(--border); } .priority-grid,.plans-grid { grid-template-columns:1fr; } .footer-grid { display:grid; } .site-footer nav { justify-content:flex-start; } }
@media (max-width:520px) { :root { --gutter:20px; } .brand { font-size:16px; } .hero { padding-top:50px; } .hero-actions { display:grid; } .hero-actions .text-link { justify-content:center; } .hero-actions .button { width:100%; } .hero-capture { width:min(100%,250px); } .capture-grid { grid-template-columns:1fr; } .capture-missing { grid-column:auto; } .support-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }