:root {
  --navy-950: #032D49;
  --navy-900: #063B5A;
  --navy-800: #075675;
  --teal-700: #007C87;
  --teal-600: #009B94;
  --green-500: #27C993;
  --green-400: #38D6A0;
  --ink: #113A4C;
  --muted: #637C87;
  --bg: #F6FAFB;
  --surface: #FFFFFF;
  --surface-alt: #EEF7F7;
  --border: #DCEBEC;
  --shadow: 0 24px 70px rgba(5, 59, 90, .12);
  --header: rgba(255,255,255,.94);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  min-height:100vh;
  font-family:"Segoe UI", Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at 80% 5%, rgba(39,201,147,.10), transparent 25%),
    radial-gradient(circle at 10% 22%, rgba(0,124,135,.08), transparent 28%),
    var(--bg);
  color:var(--ink);
}
body.dark {
  --ink:#EDF8F8;
  --muted:#9CB5BC;
  --bg:#052C43;
  --surface:#083B54;
  --surface-alt:#0A455E;
  --border:rgba(159,217,216,.14);
  --header:rgba(5,44,67,.94);
  --shadow:0 24px 70px rgba(0,0,0,.25);
}
a { color:inherit; text-decoration:none; }

.topbar {
  width:min(1180px,calc(100% - 40px));
  height:88px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  position:relative;
  z-index:20;
}
.topbar:before {
  content:"";
  position:fixed;
  left:0; right:0; top:0; height:88px;
  background:var(--header);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(18px);
  z-index:-1;
}
.brand img { display:block; width:218px; height:auto; }
.nav { display:flex; gap:30px; color:var(--muted); font-size:14px; font-weight:600; }
.nav a { padding:10px 0; position:relative; }
.nav a:hover,.nav a.active { color:var(--navy-800); }
body.dark .nav a:hover,body.dark .nav a.active { color:var(--green-400); }
.nav a.active:after {
  content:""; position:absolute; left:0;right:0;bottom:1px;margin:auto;
  width:20px;height:2px;border-radius:4px;background:linear-gradient(90deg,var(--teal-600),var(--green-500));
}
.top-actions { justify-self:end;display:flex;gap:10px;align-items:center; }
.icon-button {
  width:42px;height:42px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);color:var(--ink);cursor:pointer;font-size:18px;
}
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:0 19px;border-radius:12px;border:1px solid transparent;
  font-weight:700;font-size:14px;transition:.2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary {
  color:white;
  background:linear-gradient(135deg,var(--navy-800),var(--teal-600) 58%,var(--green-500));
  box-shadow:0 14px 32px rgba(0,124,135,.20);
}
.btn-outline,.btn-ghost { border-color:var(--border);background:var(--surface); }
.btn-ghost { color:var(--muted); }

.hero {
  width:min(1180px,calc(100% - 40px));
  min-height:650px;margin:0 auto;padding:78px 0 86px;
  display:grid;grid-template-columns:1.08fr .92fr;gap:75px;align-items:center;
}
.eyebrow,.kicker {
  color:var(--teal-700);font-size:11px;letter-spacing:.16em;font-weight:800;
}
.eyebrow { display:flex;align-items:center;gap:9px; }
.pulse { width:8px;height:8px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 6px rgba(39,201,147,.12); }
.hero h1 {
  margin:22px 0 24px;
  font-size:clamp(48px,5.9vw,76px);
  line-height:1.00;letter-spacing:-.055em;
  font-weight:800;color:var(--navy-950);
}
body.dark .hero h1 { color:#F1FBFB; }
.hero h1 span {
  background:linear-gradient(90deg,var(--teal-700),var(--teal-600),var(--green-500));
  -webkit-background-clip:text;color:transparent;
}
.hero-copy > p { max-width:625px;margin:0;color:var(--muted);font-size:18px;line-height:1.72; }
.hero-actions { display:flex;gap:12px;margin-top:32px; }
.hero-metrics { display:flex;gap:52px;margin-top:45px;padding-top:28px;border-top:1px solid var(--border); }
.hero-metrics div { display:grid;gap:4px; }
.hero-metrics strong { color:var(--navy-900);font-size:21px; }
body.dark .hero-metrics strong { color:var(--green-400); }
.hero-metrics span { color:var(--muted);font-size:11px; }

.hero-visual { min-height:460px;position:relative;display:grid;place-items:center; }
.brand-halo {
  position:absolute;width:410px;height:410px;border-radius:50%;
  background:radial-gradient(circle,rgba(39,201,147,.15),rgba(0,124,135,.06) 45%,transparent 70%);
}
.brand-card {
  width:390px;min-height:340px;padding:38px 34px;border-radius:28px;
  background:linear-gradient(145deg,var(--surface),var(--surface-alt));
  border:1px solid var(--border);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;z-index:2;
}
.hero-logo { width:300px;max-width:100%;height:auto; }
.brand-divider { width:82%;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:24px 0 20px; }
.brand-points { width:100%;display:flex;justify-content:space-around;color:var(--muted);font-size:11px; }
.brand-points span { display:flex;align-items:center;gap:6px; }
.brand-points i { width:6px;height:6px;border-radius:50%;background:var(--green-500); }
.floating-card {
  position:absolute;z-index:3;min-width:190px;padding:16px 18px;border:1px solid var(--border);
  border-radius:16px;background:var(--surface);box-shadow:0 14px 36px rgba(5,59,90,.12);
  display:grid;gap:6px;
}
.fc-one { left:-12px;bottom:54px; }
.fc-two { right:-10px;top:60px; }
.small-label { font-size:9px;letter-spacing:.16em;color:var(--muted);font-weight:800; }
.floating-card strong { font-size:13px;color:var(--navy-900); }
body.dark .floating-card strong { color:#fff; }
.online { color:var(--muted);font-size:10px;display:flex;align-items:center;gap:6px; }
.online i,.status-light { width:7px;height:7px;border-radius:50%;background:var(--green-500);box-shadow:0 0 8px rgba(39,201,147,.45); }

.section { width:min(1180px,calc(100% - 40px));margin:0 auto;padding:88px 0; }
.section-heading { display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:34px; }
.section-heading h2,.support-card h2 { margin:7px 0 0;font-size:35px;letter-spacing:-.04em;color:var(--navy-950); }
body.dark .section-heading h2,body.dark .support-card h2 { color:#F1FBFB; }
.section-heading p { max-width:480px;margin:0;color:var(--muted);line-height:1.65; }

.apps-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:17px; }
.app-card {
  min-height:250px;padding:25px;border:1px solid var(--border);border-radius:20px;
  background:var(--surface);box-shadow:0 8px 30px rgba(5,59,90,.045);
  transition:.2s ease;display:flex;flex-direction:column;overflow:hidden;position:relative;
}
.app-card:before {
  content:"";position:absolute;width:150px;height:150px;right:-65px;top:-65px;border-radius:50%;
  background:var(--app-glow);opacity:.18;
}
.app-card:hover { transform:translateY(-4px);border-color:rgba(0,155,148,.32);box-shadow:0 18px 44px rgba(5,59,90,.10); }
.app-icon {
  width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,var(--navy-900),var(--teal-600));
  color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:.03em;
}
.app-card h3 { margin:23px 0 8px;color:var(--navy-900);font-size:20px; }
body.dark .app-card h3 { color:#fff; }
.app-card p { margin:0 0 22px;color:var(--muted);font-size:13px;line-height:1.65; }
.app-footer { margin-top:auto;display:flex;align-items:center;justify-content:space-between; }
.app-status { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px; }
.app-status i { width:7px;height:7px;border-radius:50%;background:var(--green-500); }
.app-link {
  width:38px;height:38px;border:1px solid var(--border);border-radius:11px;display:grid;place-items:center;
  color:var(--teal-700);font-weight:800;
}
.app-link:hover { background:var(--teal-600);color:#fff; }

.platform-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:15px; }
.platform-grid article { padding:25px;border:1px solid var(--border);border-radius:18px;background:var(--surface); }
.feature-icon {
  width:42px;height:42px;border-radius:12px;background:var(--surface-alt);color:var(--teal-700);
  display:grid;place-items:center;font-weight:800;font-size:11px;border:1px solid var(--border);
}
.platform-grid h3 { margin:19px 0 8px;color:var(--navy-900);font-size:16px; }
body.dark .platform-grid h3 { color:#fff; }
.platform-grid p { margin:0;color:var(--muted);font-size:12px;line-height:1.65; }

.status-board { margin-top:22px;border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden; }
.status-heading { display:flex;justify-content:space-between;align-items:center;padding:21px 24px;border-bottom:1px solid var(--border); }
.status-heading > div { display:flex;gap:10px;align-items:center; }
.status-heading span:last-child { color:var(--muted);font-size:10px; }
.status-row { display:grid;grid-template-columns:190px 1fr 110px;gap:24px;align-items:center;padding:15px 24px;border-bottom:1px solid var(--border);font-size:12px; }
.status-row:last-child { border-bottom:0; }
.status-row span { color:var(--muted); }
.status-row i { height:3px;border-radius:4px;background:linear-gradient(90deg,var(--teal-600),var(--green-500)); }
.status-row b { color:var(--green-500);justify-self:end; }

.support-card {
  display:grid;grid-template-columns:110px 1fr auto;gap:28px;align-items:center;
  padding:34px 38px;border-radius:22px;border:1px solid var(--border);
  background:linear-gradient(120deg,var(--surface),var(--surface-alt));
}
.support-card > img { width:92px;height:auto; }
.support-card p { margin:9px 0 0;color:var(--muted);line-height:1.6; }

footer {
  width:min(1180px,calc(100% - 40px));margin:0 auto;padding:30px 0 42px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;
}
footer img { width:190px;height:auto; }

@media(max-width:940px){
  .topbar{grid-template-columns:1fr auto}.nav{display:none}
  .hero{grid-template-columns:1fr;gap:45px}.hero-visual{min-height:430px}
  .apps-grid{grid-template-columns:1fr 1fr}.platform-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .topbar,.hero,.section,footer{width:calc(100% - 28px)}
  .brand img{width:180px}.top-actions .btn{display:none}
  .hero{padding-top:48px}.hero h1{font-size:46px}
  .hero-actions{flex-direction:column}.hero-metrics{gap:18px;justify-content:space-between}
  .brand-card{width:92%;min-height:315px}.floating-card{display:none}
  .apps-grid,.platform-grid{grid-template-columns:1fr}
  .section-heading{display:block}.section-heading p{margin-top:14px}
  .status-row{grid-template-columns:1fr auto}.status-row i{grid-column:1/-1;grid-row:2}
  .support-card{grid-template-columns:1fr}.support-card>img{width:72px}
  footer{flex-direction:column;align-items:flex-start;gap:14px}
}