@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#0b1f3a; --muted:#63748a; --line:#dce4e8; --paper:#f6f8fb; --white:#fff; --teal:#178a53; --teal-dark:#0b6b4a; --mint:#e4f5ec; --blue:#e8efff; --amber:#fff2d6; --royal:#1d4ed8; --lime:#b8d334; --shadow:0 24px 65px rgba(11,31,58,.11); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 'DM Sans',sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.shell { max-width:1440px; margin:auto; overflow:hidden; background:var(--paper); }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 6vw; background:rgba(247,250,248,.88); border-bottom:1px solid rgba(223,231,230,.78); position:sticky; top:0; z-index:5; backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; }
.brand-logo { display:block; width:174px; height:56px; object-fit:contain; object-position:left center; mix-blend-mode:multiply; }
.brand strong,.brand small { display:block; line-height:1.05; }.brand strong { font:700 17px 'Space Grotesk',sans-serif; }.brand small { margin-top:4px; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
nav { display:flex; align-items:center; gap:27px; color:#5b6b73; font-size:13px; font-weight:600; } nav a:hover { color:var(--teal-dark); }.nav-button { padding:10px 16px; border:1px solid #b9d9d2; border-radius:10px; color:var(--teal-dark); background:#effaf6; }
.hero { padding:100px 9vw 116px; background:linear-gradient(145deg,#f6f8fb 0%,#eef5ff 58%,#e9f5ee 100%); }.section-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:8vw; align-items:center; }.eyebrow { color:var(--teal); font-size:11px; font-weight:700; letter-spacing:.16em; margin:0 0 20px; }.hero h1 { max-width:700px; margin:0; font:600 clamp(42px,5.4vw,78px)/.98 'Space Grotesk',sans-serif; letter-spacing:-.065em; }.lead { max-width:585px; margin:28px 0 0; color:#5c6d75; font-size:18px; line-height:1.62; }.hero-actions { display:flex; gap:13px; margin-top:34px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:11px; padding:13px 18px; font-weight:700; cursor:pointer; transition:.2s ease; }.button:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,31,58,.13); }.primary { background:var(--ink); color:white; }.secondary { border:1px solid #b8cbe3; background:transparent; color:var(--ink); }.compact { padding:10px 14px; font-size:13px; }.trust-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:32px; color:#71847f; font-size:12px; }
.hero-card { width:min(100%,410px); justify-self:end; padding:24px; border:1px solid rgba(255,255,255,.9); border-radius:22px; background:rgba(255,255,255,.78); box-shadow:var(--shadow); transform:rotate(1.4deg); }.card-topline { display:flex; gap:8px; align-items:center; color:#83908e; font-size:10px; font-weight:700; letter-spacing:.13em; }.muted { margin-left:auto; font-weight:500; letter-spacing:0; }.status-dot { width:8px; height:8px; display:inline-block; border-radius:50%; background:#55ba87; box-shadow:0 0 0 4px rgba(85,186,135,.13); }.metric-main { display:grid; grid-template-columns:1fr auto; margin-top:29px; align-items:end; }.metric-main span { color:#71807e; font-size:12px; }.metric-main strong { font:600 48px/1 'Space Grotesk',sans-serif; letter-spacing:-.08em; }.metric-main em { grid-column:1; color:#3ca176; font-size:11px; font-style:normal; margin-top:3px; }.mini-chart { display:flex; align-items:end; gap:7px; height:82px; padding:13px 0 10px; border-bottom:1px solid var(--line); }.mini-chart span { flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#63c8a1,#bde6d7); }.hero-list { display:flex; align-items:center; justify-content:space-between; padding:15px 0 3px; }.hero-list div { display:grid; gap:4px; }.hero-list strong { font-size:13px; }.hero-list small { color:var(--muted); font-size:11px; }.hero-list b { color:#8b9c98; font-weight:500; }.badge { width:max-content; padding:3px 7px; border-radius:5px; font-size:9px; font-weight:700; letter-spacing:.06em; }.blue { color:#4174b8; background:var(--blue); }.amber { color:#a2751d; background:var(--amber); }
.section { padding:100px 9vw; }.intro-section { background:var(--white); display:grid; grid-template-columns:1fr .68fr; gap:30px; }.section h2 { max-width:600px; margin:0; font:600 clamp(30px,3.5vw,50px)/1.03 'Space Grotesk',sans-serif; letter-spacing:-.05em; }.section-note { align-self:end; color:var(--muted); max-width:330px; margin:0; }.feature-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:52px; }.feature { min-height:205px; padding:25px; border:1px solid var(--line); border-radius:14px; }.feature-number { color:#8ba39d; font:600 12px 'Space Grotesk',sans-serif; }.feature h3 { margin:40px 0 8px; font:600 20px 'Space Grotesk',sans-serif; letter-spacing:-.03em; }.feature p { color:var(--muted); margin:0; font-size:13px; }
.admin-section { padding:88px 6vw 110px; background:#eef4f1; }.admin-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:26px; }.admin-heading h2 { font-size:42px; }.admin-layout { display:grid; grid-template-columns:220px 1fr; gap:18px; }.admin-sidebar { min-height:610px; display:flex; flex-direction:column; padding:15px 12px; border:1px solid var(--line); border-radius:15px; background:#0b1f3a; color:#e7f3f1; }.account-card { display:flex; align-items:center; gap:9px; padding:8px 7px 24px; border-bottom:1px solid rgba(255,255,255,.13); }.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--royal); font-size:11px; font-weight:700; }.account-card strong,.account-card small { display:block; }.account-card strong { font-size:12px; }.account-card small { color:#9cb1b2; font-size:10px; margin-top:3px; }.online-dot { width:6px; height:6px; margin-left:auto; border-radius:50%; background:#83dbac; }.side-item { display:flex; justify-content:space-between; margin-top:9px; padding:11px 10px; border:0; border-radius:8px; color:#b7cbca; background:transparent; cursor:pointer; text-align:left; font-size:12px; }.side-item:hover,.side-item.active { color:#fff; background:rgba(255,255,255,.12); }.side-item b { color:#98b5b3; font-size:10px; }.sidebar-bottom { margin-top:auto; padding:17px 8px 5px; border-top:1px solid rgba(255,255,255,.13); }.sidebar-bottom small { display:block; color:#799795; font-size:9px; letter-spacing:.1em; }.sidebar-bottom strong { display:flex; gap:8px; align-items:center; margin-top:7px; font-size:11px; font-weight:500; }
.admin-content { min-width:0; }.dashboard-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }.dashboard-summary>div { padding:19px; border:1px solid var(--line); border-radius:13px; background:white; }.dashboard-summary span,.dashboard-summary small { display:block; color:var(--muted); font-size:11px; }.dashboard-summary strong { display:block; margin:9px 0 2px; font:600 31px/1 'Space Grotesk',sans-serif; letter-spacing:-.06em; }.dashboard-summary small { color:#3d9d79; font-size:10px; }.table-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:white; }.table-toolbar { display:flex; align-items:center; justify-content:space-between; padding:20px 21px; border-bottom:1px solid var(--line); }.table-toolbar h3 { margin:0; font:600 17px 'Space Grotesk',sans-serif; }.table-toolbar p { margin:4px 0 0; color:var(--muted); font-size:11px; }.search { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:#97aaa6; }.search input { width:145px; border:0; outline:0; color:var(--ink); font-size:11px; }.table-wrap { overflow:auto; } table { width:100%; min-width:700px; border-collapse:collapse; } th { padding:12px 20px; color:#8a9a98; font-size:10px; font-weight:600; text-align:left; text-transform:uppercase; letter-spacing:.08em; background:#fbfdfc; } td { padding:15px 20px; border-top:1px solid #edf2f0; color:#566a68; font-size:12px; } td strong,td small { display:block; } td strong { color:var(--ink); font-size:12px; } td small { margin-top:3px; color:#9aa9a6; font-size:10px; }.row-action { color:var(--teal-dark); font-weight:700; cursor:pointer; }.bottom-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; margin-top:15px; }.tip-card,.security-card { display:flex; gap:13px; padding:20px; border-radius:13px; }.tip-card { background:#fff6df; }.security-card { background:#e6f3f0; }.tip-icon,.security-card>span { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.7); color:#b3892d; }.security-card>span { color:var(--teal); }.tip-card strong,.security-card strong { display:block; font:600 13px 'Space Grotesk',sans-serif; }.tip-card p,.security-card p { margin:5px 0 7px; color:#7b7c6c; font-size:11px; }.security-card p { color:#65817d; }.text-button { padding:0; border:0; color:#a87a1c; background:transparent; cursor:pointer; font-size:11px; font-weight:700; }
.pilot-case-card { display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:17px 19px; border:1px solid #cfe5d9; border-radius:13px; background:linear-gradient(110deg,#f5fffa,#fffdf4); }.pilot-case-icon { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:11px; color:white; background:var(--teal-dark); font:700 18px 'Space Grotesk',sans-serif; }.pilot-case-copy { min-width:0; flex:1; }.pilot-case-copy .eyebrow { margin:0 0 4px; font-size:9px; }.pilot-case-copy h3 { margin:0; font:600 16px 'Space Grotesk',sans-serif; }.pilot-case-copy p { margin:4px 0 9px; color:var(--muted); font-size:11px; }.pilot-case-tags { display:flex; flex-wrap:wrap; gap:6px; }.pilot-case-card > .text-button { white-space:nowrap; color:var(--teal-dark); }
footer { display:flex; justify-content:space-between; padding:24px 6vw; color:#92a09e; background:#18313a; font-size:11px; }
.toast { position:fixed; left:50%; bottom:25px; z-index:10; padding:12px 16px; border-radius:9px; color:white; background:#18313a; box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translate(-50%,15px); transition:.22s ease; font-size:12px; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:900px) { .topbar { padding:0 5vw; }.brand-logo { width:155px; }.topbar nav a:not(.nav-button) { display:none; }.hero { padding:72px 7vw 85px; }.section-grid { grid-template-columns:1fr; gap:50px; }.hero-card { justify-self:start; }.intro-section { grid-template-columns:1fr; padding:78px 7vw; }.section-note { align-self:start; }.feature-grid { grid-template-columns:1fr; margin-top:24px; }.admin-section { padding:70px 5vw; }.admin-layout { grid-template-columns:1fr; }.admin-sidebar { min-height:0; }.side-item { display:inline-flex; width:48%; }.sidebar-bottom { margin-top:20px; }.dashboard-summary { grid-template-columns:1fr; }.bottom-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .hero h1 { font-size:44px; }.lead { font-size:16px; }.trust-row { gap:9px; flex-direction:column; }.admin-heading { align-items:start; gap:20px; flex-direction:column; }.table-toolbar { align-items:start; gap:15px; flex-direction:column; }.search,.search input { width:100%; } footer { gap:8px; flex-direction:column; } }
