:root { --ink:#11120f; --paper:#f3f1e9; --orange:#ff5b35; --blue:#3b82f6; --muted:#66675f; --line:rgba(17,18,15,.16); }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); }
body { font-family:Inter,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.page { width:min(1240px,calc(100% - 64px)); min-height:100svh; margin:auto; display:grid; grid-template-rows:auto 1fr auto; padding:30px 0 26px; }
.topline,.bottomline { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:18px; font-size:30px; font-weight:760; letter-spacing:-.05em; }
.brand-symbol { width:69px; height:69px; margin:-26px 0; }
.brand-name { display:flex; letter-spacing:-.055em; }.brand-cloud { color:#202124; }.brand-swarms { color:#3b82f6; }
.availability { display:flex; align-items:center; gap:8px; color:var(--muted); font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.06em; }
.availability i { width:7px; height:7px; border-radius:50%; background:#6dbb3d; box-shadow:0 0 0 4px rgba(109,187,61,.13); }
.content { align-self:center; padding:3vh 0; }
h1 { margin:0; max-width:1000px; font-size:clamp(52px,7vw,100px); line-height:.91; letter-spacing:-.072em; font-weight:650; }
h1 em { color:var(--blue); font-family:Georgia,serif; font-weight:400; }
.intro { margin:25px 0 0; max-width:610px; color:var(--muted); font-size:clamp(16px,1.5vw,20px); line-height:1.45; letter-spacing:-.025em; }
.offers { display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(36px,5vh,64px); border-top:1px solid var(--line); }
.offers article { position:relative; padding:22px 34px 0 0; }
.offers article+article { padding-left:34px; border-left:1px solid var(--line); }
.offers span { color:var(--blue); font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.offers h2 { margin:10px 0 7px; font-size:18px; letter-spacing:-.03em; }
.offers p { max-width:310px; margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.contact { display:flex; align-items:center; gap:24px; background:var(--ink); color:white; padding:14px 18px; border-radius:2px; font-size:13px; font-weight:650; transition:.2s; }
.contact:hover { background:var(--orange); }.contact b { font-size:17px; }
.footer-meta { display:flex; gap:24px; color:var(--muted); font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; }
summary { cursor:pointer; list-style:none; text-decoration:underline; text-underline-offset:3px; } summary::-webkit-details-marker { display:none; }
.legal-panel { display:none; position:fixed; z-index:20; inset:5vh 5vw; overflow:auto; background:var(--paper); border:1px solid var(--ink); padding:clamp(28px,5vw,64px); box-shadow:0 20px 80px rgba(0,0,0,.24); text-transform:none; font-family:Inter,Arial,sans-serif; }
details[open] .legal-panel { display:block; }
details[open] summary { position:fixed; z-index:30; right:calc(5vw + 20px); top:calc(5vh + 14px); font-size:0; text-decoration:none; }
details[open] summary::after { content:'×'; color:var(--ink); font:400 34px/1 Arial; }
.legal-panel h2 { margin:0 0 30px; font-size:38px; letter-spacing:-.05em; }.legal-panel p { max-width:720px; color:var(--muted); font-size:14px; line-height:1.6; }.legal-panel strong { color:var(--ink); }.legal-panel mark { background:#fff0a8; padding:1px 4px; }
@media(max-width:700px) {
  .page { width:calc(100% - 30px); padding:20px 0; }
  .availability { max-width:120px; text-align:right; line-height:1.3; }
  .brand-symbol { width:59px; height:59px; margin:-22px 0; }
  .brand { font-size:26px; }
  .content { padding:34px 0 25px; }
  h1 { font-size:clamp(45px,14.5vw,68px); }
  .intro { margin-top:18px; font-size:15px; }
  .offers { margin-top:28px; grid-template-columns:1fr; }
  .offers article,.offers article+article { display:grid; grid-template-columns:28px 1fr; padding:10px 0; border-left:0; border-bottom:1px solid var(--line); }
  .offers h2 { margin:0; font-size:15px; }.offers p { display:none; }
  .bottomline { align-items:flex-end; gap:20px; }.contact { padding:12px 14px; gap:12px; }.footer-meta { flex-direction:column; gap:7px; text-align:right; }
}
@media(max-height:720px) and (min-width:701px) { h1{font-size:66px}.offers{margin-top:28px}.content{padding:20px 0}.offers article{padding-top:15px}.intro{margin-top:16px} }
@media(prefers-reduced-motion:reduce){*{transition:none!important}}