/* ============ Design tokens ============ */ :root{ --paper:#F4EFE3; --paper-2:#EDE7D9; --ink:#1F3DF5; --ink-soft:rgba(31,61,245,.5); --ink-hair:rgba(31,61,245,.22); --graphite:#2A2A28; --graphite-soft:#55524b; --accent:#E5392F; --ink-on-dark:#9FB4FF; --paper-on-dark:#ECE7D8; --term-bg:#0B1020; --display:"Anton",Impact,sans-serif; --sans:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --maxw:1120px; --pad:clamp(20px,5vw,64px); --section-y:clamp(64px,9vw,120px); --radius:8px; } /* ============ Base ============ */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--graphite); font-family:var(--sans); font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{max-width:100%; height:auto; display:block;} a{color:var(--ink); text-decoration:none;} a:hover{text-decoration:underline;} :focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px;} h1,h2,h3,p{margin:0;} /* ============ Layout ============ */ .container{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);} .section{padding-block:var(--section-y);} .section--band{background:var(--paper-2);} .marker{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:.75; display:flex; align-items:center; gap:10px; margin-bottom:18px;} .marker::before{content:""; width:26px; height:1px; background:var(--ink); opacity:.6;} /* ============ Typography helpers ============ */ .eyebrow{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:.8;} .display{font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:.9; letter-spacing:-.005em; color:var(--ink);} .h-section{font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:.92; letter-spacing:-.005em; color:var(--ink); font-size:clamp(32px,5vw,60px); margin-bottom:14px;} .subhead{font-size:clamp(16px,2vw,19px); color:var(--graphite); max-width:60ch;} .lead{font-size:clamp(18px,2.4vw,24px); color:var(--graphite); max-width:46ch; line-height:1.4;} .mono{font-family:var(--mono); font-size:13px;} .callout{font-family:var(--mono); font-size:12px; color:var(--ink);} /* ============ Buttons ============ */ .btn-pill{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:14px; color:var(--ink); border:1.5px solid var(--ink); border-radius:40px; padding:10px 24px; background:transparent; cursor:pointer; transition:background .15s,color .15s;} .btn-pill:hover{background:var(--ink); color:var(--paper); text-decoration:none;} .btn-pill--solid{background:var(--ink); color:var(--paper);} .btn-pill--solid:hover{background:#152fd0;} /* ============ Command strip + copy ============ */ .cmd{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--ink); border-radius:var(--radius); padding:10px 12px; font-family:var(--mono); font-size:13px; color:var(--ink); background:transparent; overflow:auto;} .cmd code{font-family:var(--mono); white-space:nowrap;} .cmd__copy{flex:none; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:transparent; border:1px solid var(--ink-hair); border-radius:5px; padding:4px 8px; cursor:pointer;} .cmd__copy:hover{background:var(--ink); color:var(--paper);} .cmd__copy[data-copied="true"]{background:var(--accent); border-color:var(--accent); color:#fff;} /* ============ Cards / grids ============ */ .cards{display:grid; gap:18px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} .card{border:1px solid var(--ink-hair); border-radius:var(--radius); padding:22px; background:var(--paper);} .card__title{font-family:var(--display); text-transform:uppercase; color:var(--ink); font-size:20px; line-height:1; margin-bottom:8px;} .card__meta{font-family:var(--mono); font-size:11px; color:var(--ink); opacity:.7; margin-bottom:10px;} .card p{font-size:14px; color:var(--graphite);} /* ============ Terminal (the one dark panel — deliberate contrast) ============ */ .terminal{background:var(--term-bg); border-radius:var(--radius); overflow:hidden; font-family:var(--mono); font-size:13px;} .terminal__bar{display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08);} .terminal__bar i{width:10px; height:10px; border-radius:50%; background:#33384d; display:inline-block;} .terminal__body{padding:14px 16px; color:var(--ink-on-dark); line-height:1.7;} .terminal__body .ok{color:#6ee7a8;} .terminal__body .file{color:var(--paper-on-dark);} .terminal__body .conf{color:#F2A33C;} /* ============ Tabs ============ */ .tabs{display:flex; gap:4px; border:1px solid var(--ink-hair); border-radius:40px; padding:4px; width:max-content; max-width:100%; overflow:auto;} .tab{font-family:var(--mono); font-size:12px; color:var(--ink); background:transparent; border:0; padding:7px 16px; border-radius:40px; cursor:pointer; white-space:nowrap;} .tab[aria-selected="true"]{background:var(--ink); color:var(--paper);} .tabpanel[hidden]{display:none;} /* ============ Footer ============ */ .footer{border-top:1px solid var(--ink-hair); padding-block:48px; font-family:var(--mono); font-size:13px;} .footer__links{display:flex; flex-wrap:wrap; gap:18px 28px; margin-top:14px;} /* ============ Sticky install CTA ============ */ .sticky-cta{position:fixed; right:18px; bottom:18px; z-index:50; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s;} .sticky-cta.is-shown{opacity:1; transform:none; pointer-events:auto;} /* ============ Reveal-on-scroll ============ */ .js [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;} [data-reveal].is-visible{opacity:1; transform:none;} /* ============ Reduced motion ============ */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none !important; animation:none !important;} .js [data-reveal]{opacity:1; transform:none;} } /* ============ Responsive ============ */ @media (max-width:820px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} } @media (max-width:520px){ .grid-4{grid-template-columns:1fr;} } /* ============ Hero ============ */ .hero{padding-block:clamp(36px,6vw,72px) var(--section-y);} .hero__top{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink); opacity:.75; border-bottom:1px solid var(--ink-hair); padding-bottom:14px; margin-bottom:36px;} .hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;} .hero__grid > *{min-width:0;} .hero__title{font-size:clamp(44px,7.5vw,104px); margin:0 0 18px;} .hero__sub{font-size:clamp(16px,2vw,20px); color:var(--graphite); max-width:42ch; margin-bottom:26px;} .hero__cmd{margin-bottom:22px; max-width:520px;} .hero__cta{display:flex; gap:14px; flex-wrap:wrap;} /* Hero illustration — static placeholder for the looping rotation video. Fades/settles in on load via .engine--assembled (toggled by initEngine()); prefers-reduced-motion users get it immediately, since transitions are disabled globally and the class is added at once. */ .engine{display:flex; justify-content:center;} /* The generated frame's cream is ~4/255 off the page paper, so its square edge is faintly visible on the flat field. Feather the outer edge so the boundary dissolves into the page; the server sits centered with margin, so its solid interior is untouched. (Also applies to the future