
:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#6b7280;
  --accent:#d2544a;          /* Palette 2 accent red-orange */
  --primary:#1c375b;         /* Palette 2 dark blue */
  --pill:#f5f5f5;
  --ring: #fde68a;
  --brand:#1c375b;
  --trust:#003b70;           /* Palette 1 blue for inner pages */
  --teal:#00b388;            /* Palette 1 accent */
}

/* Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary); text-decoration:none}
a:hover{opacity:.92}
.container{width:min(1120px,92%); margin:0 auto}
.section{padding:64px 0}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:900px){ .grid,.grid-2,.grid-3{grid-template-columns:1fr} }

.badges{display:flex; flex-wrap:wrap; gap:8px}
.badge{background:var(--pill); border:1px solid #e7e7e7; padding:8px 12px; border-radius:999px; font-size:.85rem}

/* Buttons */
.btn{display:inline-block; border-radius:999px; padding:12px 18px; font-weight:700; border:0; background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(210,84,74,.25)}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:#fff; color:var(--primary); border:1px solid #e5e7eb}

/* Cards */
.card{border:1px solid #eef0f3; background:#fff; border-radius:20px; padding:20px; box-shadow:0 10px 30px rgba(17,24,39,.06)}

/* Header */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #f1f5f9}
.nav .container{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.1rem; color:var(--brand)}
.brand img{display:none} /* remove GM ICON */
.nav .links{display:flex; align-items:center; gap:22px}
.nav .links ul{display:flex; list-style:none; margin:0; padding:0; gap:18px}
.nav .links li a{padding:8px 6px; border-radius:10px}
.nav .links li a:hover{background:#f5f7fb}
.nav .links .cta{margin-left:8px}

/* Hero (half banner with right image) */
.hero{
  background: radial-gradient(1200px 400px at 10% 0%, #ffe5ec 0%, #f7e8ff 50%, #fff 100%);
  padding:72px 0 48px;
}
.hero .container{display:grid; grid-template-columns: 1.3fr 1fr; gap:36px; align-items:center}
@media (max-width:900px){ .hero .container{grid-template-columns:1fr} }
.hero h1{font-family:Poppins,Inter,sans-serif; font-weight:800; line-height:1.1; margin:.35rem 0 1rem; color:#0c2640}
.hero .illustration{position:relative; isolation:isolate}
.hero .illustration:before{
  content:""; position:absolute; inset:auto -24px -24px -24px; height:58%; background:linear-gradient(180deg,#fff0 0,#fff .5%,#fff 100%); z-index:2;
}

/* Fun bubble behind image */
.hero .bubble{position:absolute; inset:auto 0 0 0; height:80%; transform:translateY(10%); background: radial-gradient(220px 220px at 80% 30%, #ffd6ea 0,#ffecf5 35%,#eaeaff 65%,#ffffff 100%); filter:blur(0px); border-radius:40px; z-index:0}
.hero .imgwrap{position:relative; z-index:1; border-radius:24px; overflow:hidden; box-shadow:0 18px 40px rgba(28,55,91,.25)}

/* Section headings */
h1,h2,h3{margin:0 0 .5rem}
h2{font-size:1.6rem; font-weight:800}
h3{font-size:1.1rem; font-weight:800}

/* Inner pages palette (trust) */
.theme-inner .hero, .theme-inner .section.headerband{background:linear-gradient(180deg,#eef6ff,#ffffff)}
.theme-inner a.btn{background:var(--teal)}
.theme-inner .brand{color:var(--trust)}

/* Footer */
.footer{background:#0b1a2f; color:#e6eef6}
.footer a{color:#cde3ff}
.footer .container{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px}
@media(max-width:900px){ .footer .container{grid-template-columns:1fr} }

/* Tables (pricing) */
table{width:100%; border-collapse:separate; border-spacing:0 10px}
td{background:#fff; padding:12px 16px}
table tr td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
table tr td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
