:root{ --mt-blue:#1f3b63; --mt-light:#38bdf8; --graphite:#334155; --silver:#cbd5e1; --white:#ffffff; --bg:#f3f6fa; --bg-soft:rgba(31,59,99,.06); --ink:#111827; --secondary:#4b5563; --border-color: rgba(148,163,184,.20); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif; background:var(--bg); line-height:1.45; } .shell{width:min(1180px,calc(100% - 2rem));margin:0 auto} .site-header{ position:sticky; top:0; z-index:10; backdrop-filter:blur(18px); background:rgba(243,246,250,.82); border-bottom:1px solid rgba(148,163,184,.18); } .brand-shell{ display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:1rem; } .brand{ display:flex; align-items:center; gap:.75rem; color:var(--ink); text-decoration:none; font-weight:600; } .brand img{border-radius:999px} .brand-kicker{display:block;font-size:.75rem;color:var(--secondary);} .brand-name{display:block;font-size:.95rem} .main-nav{ display:flex; gap:.75rem; align-items:center; font-size:.9rem; color:var(--secondary); } .main-nav a{ color:var(--graphite); text-decoration:none; } .main-nav a:hover{color:var(--mt-blue);} .button{ display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem; border-radius:999px; text-decoration:none; border:1px solid rgba(148,163,184,.22); color:var(--graphite); font-size:.9rem; } .button-primary{ background:var(--mt-blue); color:var(--white); border-color:var(--mt-blue); } .button-secondary{background:rgba(255,255,255,.66);} .hero{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:2rem; padding:4rem 0 2rem; align-items:end; } .hero-main h1{ margin:.35rem 0 .8rem; font-size:3rem; letter-spacing:-.03em; line-height:1.05; } .eyebrow{ font-size:.9rem; color:var(--mt-blue); letter-spacing:.06em; text-transform:uppercase; margin:0; font-weight:700; } .lead{ margin:0; color:var(--secondary); max-width:46rem; font-size:1.05rem; } .hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.2rem} .hero-note{ border:1px solid rgba(148,163,184,.24); background:rgba(255,255,255,.70); border-radius:1.5rem; padding:1.2rem; box-shadow:0 18px 40px rgba(15,23,42,.05); } .section{padding:2.25rem 0} .section-intro{margin-bottom:1rem} .section-intro h2{font-size:1.75rem;letter-spacing:-.02em;margin:0} .section-intro p{margin:.45rem 0 0;color:var(--secondary);} .catalog{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } .model-card{ background:rgba(255,255,255,.78); border:1px solid rgba(148,163,184,.20); border-radius:1.25rem; padding:1rem; box-shadow:0 14px 30px rgba(15,23,42,.045); } .model-card h3{margin:.35rem 0;font-size:1.15rem} .model-card p{margin:.35rem 0 0;color:var(--secondary);font-size:.95rem} .model-card-head{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.25rem; } .model-badge{ font-weight:700; font-size:.85rem; color:var(--graphite); } .status{ border-radius:999px; padding:.22rem .65rem; border:1px solid rgba(148,163,184,.22); font-size:.75rem; color:var(--graphite); } .status-ready{background:rgba(56,189,248,.10);border-color:rgba(56,189,248,.28)} .status-preparing{background:rgba(148,163,184,.10);} dl{margin:.8rem 0 0} dl div{display:flex;gap:.4rem;justify-content:space-between;border-top:1px solid rgba(148,163,184,.12);padding:.35rem 0;font-size:.9rem} dt{color:var(--secondary)} dd{margin:0;text-align:right;color:var(--ink);font-weight:500} .actions{ margin-top:.9rem; display:flex; gap:.5rem; flex-wrap:wrap; } .actions a{ text-decoration:none; border-radius:999px; border:1px solid rgba(148,163,184,.22); padding:.45rem .8rem; color:var(--graphite); font-size:.85rem; } .value-list,.roadmap-grid,.recommendation-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .value-card,.roadmap-card,.recommendation-item{ background:rgba(255,255,255,.74); border:1px solid rgba(148,163,184,.18); border-radius:1.25rem; padding:1.1rem; } .value-card h3,.roadmap-card h3,.recommendation-item h3{margin:0 0 .35rem} .value-card p,.roadmap-card p,.recommendation-item p{margin:0;color:var(--secondary)} .small{font-size:.8rem;color:var(--secondary);} .panel-note{margin:.55rem 0 0;color:var(--secondary);font-size:.9rem} .site-footer{padding:1.4rem 0 1.8rem;color:var(--secondary);border-top:1px solid rgba(148,163,184,.18)} .site-footer p{margin:0;font-size:.85rem} @media (max-width:900px){ .hero{grid-template-columns:1fr;gap:1.25rem} .hero-main h1{font-size:2.35rem} .main-nav{ flex-wrap:wrap; max-width:62%; justify-content:flex-end; gap:.45rem; } } @media (max-width:640px){ .shell{width:min(1180px,calc(100% - 1.25rem))} .hero{padding:2.2rem 0 1rem} .hero-main h1{font-size:2rem} .main-nav{max-width:100%;font-size:.82rem} .brand span{display:block} }