@import url('/assets/themes.css');

:root { --bg:#f3f3ee; --fg:#18211e; --muted:#69716c; --line:#d9ddd6; --surface:#fff; --accent:#a9ef79; --accent-ink:#254914; --radius:20px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; color:var(--fg); background:var(--bg); font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--fg); }
body.dark { --bg:#101715; --fg:#f1f5ec; --muted:#a4b0a8; --line:#2e3a34; --surface:#19231e; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
button:disabled { cursor:default; }
svg { display:block; }
.wrap { max-width:1320px; padding-inline:56px; margin-inline:auto; }
.skip { position:fixed; left:20px; top:-100px; padding:12px; background:var(--fg);color:var(--bg);z-index:100; }
.skip:focus { top:20px; }
.topbar { border-bottom:1px solid var(--line); }
.nav { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:24px; font-weight:650; letter-spacing:-1px; }
.brand-mark { width:35px; height:35px; color:var(--fg); }
.navlinks { display:flex; align-items:center; gap:30px; font-size:13px; font-weight:550; }
.navlinks>a:not(.button) { color:var(--muted); }
.navlinks>a:hover { color:var(--fg); }
.button { border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:17px 22px; font-size:14px; line-height:1.1; font-weight:600; border-radius:8px; background:var(--fg); color:var(--bg); transition:transform .18s,background .18s; }
.button:hover { transform:translateY(-2px); }
.button.small { padding:12px 17px; font-size:12px; border-radius:7px; }
.button.accent { background:var(--accent); color:var(--accent-ink); }
.button.ghost { background:transparent; color:var(--fg); border-color:var(--line); }
.arrow { font-size:20px; font-weight:400; line-height:.7; }
.hero { padding-top:76px; padding-bottom:72px; position:relative; }
.eyebrow { text-transform:uppercase; letter-spacing:1.8px; font-size:10px; font-weight:650; display:flex; gap:12px; align-items:center; margin:0 0 24px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent); }
.hero-grid { display:grid; grid-template-columns:1fr .8fr; gap:76px; align-items:center; }
h1 { font-size:clamp(48px,5.8vw,82px); line-height:1.02; letter-spacing:-4.6px; font-weight:560; margin:0; max-width:850px; }
.hero-copy>p { font-size:17px; line-height:1.7; color:var(--muted); margin:27px 0 30px; max-width:480px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.micro { color:var(--muted); font-size:11px; line-height:1.7; margin-top:18px; }
.hero .micro { margin-bottom:0; }
.product-stage { min-height:420px; position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.stage-grid { position:absolute; inset:-20px; z-index:-1; border-radius:50%; background-image:linear-gradient(color-mix(in srgb,var(--fg) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--fg) 6%,transparent) 1px,transparent 1px);background-size:28px 28px; mask-image:radial-gradient(ellipse at center,black 25%,transparent 70%); }
.console { width:100%; background:#17211f; color:#f1f5ed; border:1px solid #3b4842; border-radius:15px; box-shadow:0 24px 70px #09161021; overflow:hidden; transform:rotate(-2deg); }
.console-top { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #344039; font-size:11px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; color:#b0bbb2; }
.console-dots { display:flex; gap:5px; }
.console-dots i { width:5px;height:5px;border-radius:100%;background:#58665e; }
.console-main { padding:26px; }
.console-label { font:10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:1.2px; text-transform:uppercase; color:#9baaa0; }
.console-title { font-size:21px; letter-spacing:-.5px; line-height:1.3; margin:12px 0 25px; }
.sample-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid #344039; font-size:11px; }
.sample-name { color:#a5b4aa; }
.sample-value { text-align:right; color:#e2e9e4; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; }
.sample-value:before { content:''; display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:var(--accent); }
.console-bottom { display:flex; align-items:center; gap:9px; margin-top:18px; color:#99b3a0; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.console-bottom>span:first-child { color:var(--accent); }
.floating-tag { position:absolute; right:-12px; bottom:9px; background:var(--accent); color:var(--accent-ink); padding:17px 22px; border-radius:10px; box-shadow:0 10px 30px #00000015; transform:rotate(3deg); font-size:11px; }
.floating-tag strong { display:block; margin-bottom:5px; font-size:16px; letter-spacing:-.4px; }
.hero-bottom { display:flex; gap:18px; align-items:center; margin-top:64px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.hero-bottom .divider { width:1px; height:12px; background:var(--line); }
.hero-bottom .category { color:var(--fg); font-weight:600; }
.editorial .hero-grid { grid-template-columns:1.15fr .85fr; }
.editorial h1 { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-3px; line-height:1.03; }
.editorial .console { transform:rotate(2deg); }
.editorial .floating-tag { right:auto; left:-20px; transform:rotate(-3deg); }
.technical h1 { font-size:clamp(48px,5.5vw,78px); }
.technical .console { transform:none; border-radius:8px; }
.technical .floating-tag { border-radius:4px; transform:none; right:-16px; bottom:3px; }
.section { border-top:1px solid var(--line); padding-block:75px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:50px; margin-bottom:40px; }
.kicker { font:10px ui-monospace,SFMono-Regular,Consolas,monospace; text-transform:uppercase; letter-spacing:1.8px; color:var(--muted); margin:0 0 20px; }
h2 { font-size:clamp(30px,3.5vw,48px); line-height:1.12; letter-spacing:-1.9px; font-weight:520; margin:0; }
.section-head>p { color:var(--muted); font-size:14px;line-height:1.7; max-width:290px; margin:25px 0 0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:27px; min-height:230px; }
.feature-icon { width:39px; height:39px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:11px; margin-bottom:31px; color:var(--fg); }
.feature h3 { font-size:18px; font-weight:580; letter-spacing:-.45px; margin:0 0 12px; }
.feature p { font-size:13px; line-height:1.75; color:var(--muted);margin:0; }
.workflow { display:grid;grid-template-columns:.75fr 1.25fr; gap:70px; align-items:start; }
.workflow-copy p { color:var(--muted);font-size:14px;line-height:1.7;max-width:315px; }
.step-tabs { display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:14px;margin:0 0 28px; }
.step-tabs button { border:1px solid var(--line); border-radius:6px; background:transparent;color:var(--muted);padding:10px 13px;font:11px ui-monospace,SFMono-Regular,Consolas,monospace; }
.step-tabs button[aria-selected=true] { background:var(--accent);border-color:var(--accent);color:var(--accent-ink); }
.step-panel { min-height:170px; }
.step-panel[hidden] { display:none; }
.step-number { font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);margin-bottom:16px; }
.step-panel h3 { font-size:25px;line-height:1.35;letter-spacing:-.7px;margin:0 0 15px;font-weight:540; }
.step-panel p { color:var(--muted);font-size:13px;line-height:1.8; }
.step-track { display:flex; align-items:center; gap:12px; margin-top:30px; }
.track-node { height:38px;width:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;font:11px ui-monospace,SFMono-Regular,Consolas,monospace; }
.track-node.active { background:var(--accent);border-color:var(--accent);color:var(--accent-ink); }
.track-line { height:1px;background:var(--line);flex:1; }
.faq-layout { display:grid;grid-template-columns:.75fr 1.25fr; gap:70px; }
.faq details { border-bottom:1px solid var(--line); }
.faq details:first-child { border-top:1px solid var(--line); }
.faq summary { list-style:none; padding:23px 30px 23px 0; cursor:pointer;font-size:15px;position:relative;line-height:1.4; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:'+';position:absolute;right:2px;top:23px;font-size:20px;font-weight:300;color:var(--muted); }
.faq details[open] summary:after { content:'−'; }
.faq details p { color:var(--muted);font-size:13px;line-height:1.8;margin:0;padding:0 25px 23px 0; }
.cta-section { padding-block:40px 75px; }
.cta-card { border-radius:22px;padding:52px; background:var(--accent);color:var(--accent-ink);display:flex;justify-content:space-between;align-items:center;gap:50px; }
.cta-card h2 { max-width:590px; }
.cta-card p { font-size:14px;line-height:1.7;max-width:530px;opacity:.8; }
.cta-card .button { background:var(--accent-ink);color:var(--accent);white-space:nowrap; }
.cta-details { display:flex;flex-direction:column;gap:15px;align-items:center;min-width:180px; }
.copy-email { color:inherit;background:none;border:0;padding:4px;font-size:11px;text-decoration:underline;text-underline-offset:3px; }
.copy-status { font-size:10px;min-height:12px;text-align:center; }
.footer { display:flex; align-items:center;justify-content:space-between;gap:25px;padding-block:28px 35px;border-top:1px solid var(--line);font-size:10px;color:var(--muted); }
.footer-links { display:flex;gap:22px; }
.footer a:hover { text-decoration:underline; }
.footer .brand { font-size:18px;color:var(--fg); }
.footer .brand-mark { width:26px;height:26px; }
.portfolio-hero { padding:90px 0 60px;max-width:900px; }
.portfolio-hero h1 { font-size:clamp(45px,6vw,83px); }
.portfolio-hero p { font-size:17px;line-height:1.7;color:var(--muted);max-width:600px; }
.portfolio-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding-bottom:80px; }
.portfolio-card { position:relative;border:1px solid var(--line);border-radius:18px;padding:32px;background:var(--surface);transition:transform .2s,border-color .2s; }
.portfolio-card:hover { transform:translateY(-4px);border-color:var(--fg); }
.portfolio-card .card-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:46px; }
.portfolio-card .card-top>span { font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px; }
.portfolio-card h2 { font-size:33px;letter-spacing:-1px;max-width:400px; }
.portfolio-card p { font-size:13px;line-height:1.7;color:var(--muted);max-width:400px;min-height:65px; }
.portfolio-card .visit { margin-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:11px; }
.document { max-width:780px; padding-block:80px 110px; }
.document h1 { font-size:54px;letter-spacing:-2px; }
.document h2 { font-size:25px;margin-top:42px;letter-spacing:-.7px; }
.document p { font-size:15px;line-height:1.8;color:var(--muted); }
.document a { text-decoration:underline;text-underline-offset:4px; }
@media (min-width:1550px) { .wrap { max-width:1450px; } .hero { padding-block:100px 85px; } h1 { font-size:92px; } }
@media (max-width:1100px) { .wrap { padding-inline:34px; } .hero-grid,.editorial .hero-grid { gap:40px; } h1 { letter-spacing:-3px; } .product-stage { min-height:370px; } .console-main { padding:22px; } .floating-tag { right:-10px;bottom:-8px; } .feature { padding:23px; } .workflow,.faq-layout { gap:40px; } }
@media (max-width:800px) { .nav { min-height:80px; } .navlinks>a:not(.button) { display:none; } .hero { padding-top:45px; } .hero-grid,.editorial .hero-grid { grid-template-columns:1fr;gap:38px; } h1,.technical h1 { font-size:64px;max-width:650px; } .hero-copy>p { max-width:540px; } .product-stage { min-height:390px;max-width:560px;width:100%;margin-inline:auto; } .console { transform:none; } .editorial .console { transform:none; } .hero-bottom { margin-top:46px;flex-wrap:wrap;gap:12px; } .section { padding-block:58px; } .feature-grid { grid-template-columns:1fr;gap:14px; } .feature { min-height:0;display:grid;grid-template-columns:42px 1fr;gap:12px 20px; } .feature-icon { grid-row:1/3;margin:0; } .feature h3 { margin:0; } .workflow,.faq-layout { grid-template-columns:1fr;gap:30px; } .workflow-copy p { max-width:520px; } .section-head { gap:25px; } .section-head>p { max-width:230px; } .cta-card { padding:36px;align-items:start;flex-direction:column;gap:20px; } .cta-details { align-items:start; } .footer { flex-wrap:wrap; } .portfolio-grid { gap:15px; } .portfolio-card { padding:24px; } .portfolio-card h2 { font-size:28px; } }
@media (max-width:520px) { .wrap { padding-inline:22px; } .nav { gap:12px; min-height:76px; } .brand { font-size:22px;gap:9px; } .brand-mark { width:29px;height:29px; } .navlinks { gap:0; } .navlinks .button { font-size:10px;padding:11px 12px;gap:10px; } .eyebrow { font-size:9px;letter-spacing:1.2px; } h1,.technical h1 { font-size:50px;letter-spacing:-2.8px; } .editorial h1 { font-size:52px; } .hero-copy>p { font-size:15px;line-height:1.65;margin-top:23px; } .hero-actions { gap:10px; } .button { padding:16px 18px;font-size:12px;gap:15px; } .hero-actions .ghost { padding:16px 15px; } .hero { padding-bottom:36px; } .product-stage { min-height:350px; } .console-top { padding:15px;font-size:9px; } .console-main { padding:20px; } .console-title { font-size:19px; } .sample-row { font-size:10px;gap:10px; } .sample-value { font-size:9px;max-width:60%;overflow-wrap:anywhere; } .floating-tag { bottom:-10px;right:0;padding:12px 17px; } .floating-tag strong { font-size:14px; } .editorial .floating-tag { left:8px; } .technical .floating-tag { right:0; } .hero-bottom { font-size:10px;line-height:1.4; } .hero-bottom .divider { display:none; } .section-head { flex-direction:column;gap:0; } .section-head>p { margin-top:20px;max-width:100%; } h2 { font-size:34px;letter-spacing:-1.4px; } .section { padding-block:48px; } .feature { padding:22px 19px;gap:8px 15px; } .feature h3 { font-size:17px; } .step-panel h3 { font-size:22px; } .cta-card { padding:30px 24px; } .cta-card h2 { font-size:34px; } .cta-section { padding-block:12px 48px; } .footer { gap:22px; } .footer>span { width:100%;order:3; } .footer-links { margin-left:auto;gap:14px; } .portfolio-hero { padding-block:55px 35px; } .portfolio-hero h1 { font-size:52px; } .portfolio-grid { grid-template-columns:1fr; } .portfolio-card p { min-height:0; } .document { padding-block:50px 75px; } .document h1 { font-size:42px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important;animation:none!important; } }