:root {
  /* Bright & fun: sunshine yellow, hot coral, electric blue on deep ink */
  --ink:#1b1530; --navy:#1b1530; --navy2:#2a2145; --muted:#5f5876;
  --yellow:#ffd028; --coral:#ff5941; --blue:#2d5bff; --mint:#2fd48e;
  --amber:#ffd028; --amber-dark:#c47f00; --teal:#2d5bff;
  --cream:#f4f6fb; --line:#e2e7f2; --white:#fff; --green:#16a34a; --red:#dc2626;
  --pop:5px 5px 0 rgba(27,21,48,.95);
  --pop-soft:7px 7px 0 rgba(27,21,48,.08);
}
* { box-sizing:border-box; margin:0; }
html, body { overflow-x:clip; }
body { font-family:'Inter',-apple-system,sans-serif; color:var(--ink); background:var(--cream); line-height:1.6; }
h1,h2,h3 { font-family:'Outfit',sans-serif; line-height:1.15; }
a { text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }

/* ── Buttons: chunky, popped ── */
.btn { display:inline-block; font-family:'Outfit',sans-serif; font-weight:700; border-radius:14px;
       padding:14px 26px; font-size:16px; border:2.5px solid var(--ink);
       transition:transform .12s ease, box-shadow .12s ease; }
.btn-amber { background:var(--coral); color:#fff; box-shadow:var(--pop); }
.btn-amber:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(27,21,48,.95); }
.btn-amber:active { transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(27,21,48,.95); }
.btn-ghost { color:var(--ink); border-color:var(--ink); background:var(--white); box-shadow:var(--pop); }
.btn-ghost:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(27,21,48,.95); }
.btn-navy { background:var(--blue); color:var(--white); box-shadow:var(--pop); }
.btn-navy:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(27,21,48,.95); }

/* ── Nav + logo: floating pill bar ── */
nav { position:sticky; top:10px; z-index:50; padding:0 14px; margin-bottom:-72px; }
nav .wrap { display:flex; align-items:center; height:62px; gap:24px;
            background:rgba(27,21,48,.97); backdrop-filter:blur(8px);
            border:2.5px solid #0d0a18; border-radius:18px; padding:0 22px;
            box-shadow:5px 5px 0 rgba(27,21,48,.28); }
.brand { display:inline-flex; align-items:center; font-family:'Outfit',sans-serif;
         font-weight:800; font-size:23px; color:var(--white); letter-spacing:-.02em; }
.brand img, .brand svg { width:40px; height:40px; margin-right:10px; transform:rotate(-4deg);
                         transition:transform .2s ease; }
.brand:hover img, .brand:hover svg { transform:rotate(8deg) scale(1.1); }
.brand span { color:var(--yellow); }
nav .links { margin-left:auto; display:flex; gap:22px; align-items:center; }
nav .links a { color:#cfc8e4; font-size:15px; font-weight:500; }
nav .links a:not(.btn) { position:relative; padding-bottom:2px; }
nav .links a:not(.btn)::after { content:''; position:absolute; left:0; right:0; bottom:-3px;
  height:3px; border-radius:3px; background:var(--yellow);
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
nav .links a:not(.btn):hover::after { transform:scaleX(1); }
nav .links a:hover { color:var(--yellow); }
nav .links .btn { padding:9px 18px; font-size:14px; box-shadow:3px 3px 0 rgba(0,0,0,.55); }

/* ── Hero: big, yellow, loud ── */
.hero { background:var(--yellow); color:var(--ink); padding:122px 0 96px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; width:420px; height:420px; border-radius:50%;
                background:rgba(255,255,255,.35); top:-160px; right:-120px; }
.hero::after { content:''; position:absolute; inset:auto -10% -55% -10%; height:120px;
               background:var(--cream); transform:rotate(-2deg); }
.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;
              position:relative; z-index:1; }
.kicker { display:inline-block; background:var(--ink); color:var(--yellow); border:2px solid var(--ink);
          font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
          padding:6px 16px; border-radius:99px; margin-bottom:20px; transform:rotate(-1.5deg);
          box-shadow:3px 3px 0 rgba(27,21,48,.25); }
.hero h1 { font-size:54px; font-weight:800; margin-bottom:18px; }
.hero h1 em { font-style:normal; color:var(--coral); position:relative;
              text-shadow:2px 2px 0 rgba(255,255,255,.6); }
.hero h1 em::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 12 2, 24 7 T 46 7 T 68 7 T 90 7 T 118 6' fill='none' stroke='%232d5bff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; }
.hero p.lead { font-size:19px; color:#463d63; max-width:480px; margin-bottom:30px; font-weight:500; }
.hero .ctas { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.trades { display:flex; gap:8px; flex-wrap:wrap; }
.trades span { border:2px solid var(--ink); background:rgba(255,255,255,.55); color:var(--ink);
               border-radius:99px; padding:5px 14px; font-size:13px; font-weight:600; }

/* ── Phone demo: an actual phone ── */
.phone { background:var(--white); border-radius:36px; border:3px solid var(--ink);
         box-shadow:12px 12px 0 rgba(27,21,48,.9); padding:34px 20px 26px; color:var(--ink);
         max-width:390px; justify-self:end; width:100%; position:relative; transform:rotate(2deg); }
.phone::before { content:''; position:absolute; top:13px; left:50%; transform:translateX(-50%);
                 width:86px; height:9px; border-radius:99px; background:#e8ebf4; }
.phone .ph-top { display:flex; align-items:center; gap:10px; border-bottom:2px dashed #eceef2;
                 padding-bottom:14px; margin-bottom:14px; }
.ph-dot { width:40px; height:40px; border-radius:50%; background:var(--mint); color:#fff;
          border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
          font-size:17px; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(47,212,142,.45);} 50%{box-shadow:0 0 0 9px rgba(47,212,142,0);} }
.ph-top strong { font-size:15px; display:block; }
.ph-top small { color:var(--muted); font-size:12px; }
.msg { max-width:85%; padding:9px 14px; border-radius:16px; font-size:13.5px; margin:8px 0;
       opacity:0; animation:pop-in .45s ease forwards; }
.msg.caller { background:#f2f0fa; border:1.5px solid #e2ddf2; border-bottom-left-radius:4px; }
.msg.bot { background:var(--blue); color:#f0f4ff; margin-left:auto; border-bottom-right-radius:4px; }
.msg.alert { background:#fff1ef; border:2px solid var(--coral); color:#c2311c; font-weight:700;
             max-width:100%; text-align:center; font-size:12.5px; border-radius:12px; }
@keyframes pop-in { from{opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1; transform:none;} }
.msg:nth-child(2){animation-delay:.4s} .msg:nth-child(3){animation-delay:1.2s}
.msg:nth-child(4){animation-delay:2.2s} .msg:nth-child(5){animation-delay:3.2s}
.msg:nth-child(6){animation-delay:4.2s}

/* ── Sections ── */
section { padding:76px 0; }
.sec-title { text-align:center; font-size:36px; font-weight:800; margin-bottom:10px; }
.sec-sub { text-align:center; color:var(--muted); font-size:17px; max-width:560px; margin:0 auto 46px; }

.stats { background:var(--cream); padding-top:90px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.stat { border:2.5px solid var(--ink); border-radius:20px; padding:28px 26px; box-shadow:var(--pop); }
.stat:nth-child(1) { background:#e2eaff; transform:rotate(-1deg); }
.stat:nth-child(2) { background:#ffe3de; transform:rotate(.8deg); }
.stat:nth-child(3) { background:#dcf7ea; transform:rotate(-.6deg); }
.stat b { font-family:'Outfit',sans-serif; font-size:30px; color:var(--ink); display:block; margin-bottom:6px; }
.stat p { color:#463d63; font-size:15px; }

.steps { background:var(--white); }
.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step { position:relative; background:var(--cream); border:2.5px solid var(--ink);
        border-radius:20px; padding:30px 26px 26px; box-shadow:var(--pop-soft); }
.step .n { font-family:'Outfit',sans-serif; font-weight:800; font-size:16px;
           color:var(--white); border:2.5px solid var(--ink); width:38px; height:38px; border-radius:12px;
           display:flex; align-items:center; justify-content:center; margin-bottom:14px;
           transform:rotate(-6deg); box-shadow:3px 3px 0 rgba(27,21,48,.9); }
.step:nth-child(1) .n { background:var(--coral); }
.step:nth-child(2) .n { background:var(--blue); }
.step:nth-child(3) .n { background:var(--mint); }
.step h3 { font-size:19px; margin-bottom:8px; }
.step p { color:var(--muted); font-size:15px; }

.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feat { background:var(--white); border:2.5px solid var(--ink); border-radius:20px; padding:24px;
        transition:transform .15s ease, box-shadow .15s ease; box-shadow:var(--pop-soft); }
.feat:hover { transform:translate(-3px,-3px) rotate(-.5deg); box-shadow:10px 10px 0 rgba(255,208,40,.9); }
.feat .ico { width:48px; height:48px; border-radius:14px;
             border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
             font-size:23px; margin-bottom:12px; transform:rotate(-4deg); }
.feat:nth-child(1) .ico { background:#ffe3de; }
.feat:nth-child(2) .ico { background:#e2eaff; }
.feat:nth-child(3) .ico { background:#e2eaff; }
.feat:nth-child(4) .ico { background:#dcf7ea; }
.feat:nth-child(5) .ico { background:#dcf7ea; }
.feat:nth-child(6) .ico { background:#ffe3de; }
.feat h3 { font-size:17px; margin-bottom:6px; }
.feat p { color:var(--muted); font-size:14px; }

.paths { background:var(--white); }
.path-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:820px; margin:0 auto; }
.path { border-radius:22px; padding:34px 30px; border:2.5px solid var(--ink); box-shadow:var(--pop); }
.path.a { background:var(--blue); color:var(--white); transform:rotate(-.8deg); }
.path.a p { color:#d6e0ff; }
.path.b { background:var(--yellow); transform:rotate(.8deg); }
.path.b p { color:#463d63; }
.path h3 { font-size:22px; margin-bottom:10px; }
.path p { font-size:15px; margin-bottom:20px; }
.path .tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.05em;
             text-transform:uppercase; color:var(--ink); margin-bottom:10px; }
.path.a .tag { color:var(--yellow); }
.path.b .btn-navy { background:var(--ink); }
.path.a .btn-amber { background:var(--yellow); color:var(--ink); }

.cta-band { background:var(--coral); color:var(--white); text-align:center; padding:80px 24px;
            border-top:3px solid var(--ink); }
.cta-band h2 { font-size:38px; font-weight:800; margin-bottom:12px; }
.cta-band h2 em { font-style:normal; color:var(--yellow); }
.cta-band p { color:#ffe0da; font-size:17px; margin-bottom:30px; }
.cta-band .btn-amber { background:var(--yellow); color:var(--ink); }

footer { background:var(--ink); color:#9c93b8; padding:34px 0; font-size:14px; }
footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
footer a { color:#cfc8e4; }

@media (max-width:860px) {
  nav .links a:not(.btn) { display:none; }
  .hero .wrap { grid-template-columns:1fr; gap:40px; }
  .phone { justify-self:center; transform:none; }
  .hero h1 { font-size:38px; }
  .stat-grid, .step-grid, .feat-grid, .path-grid { grid-template-columns:1fr; }
  .stat, .path { transform:none !important; }
  .sec-title { font-size:29px; }
  .cta-band h2 { font-size:29px; }
}

/* ── FAQ (shared) ── */
.faq { max-width:720px; margin:0 auto; }
.faq details { background:var(--white); border:2px solid var(--ink); border-radius:14px;
               padding:16px 20px; margin-bottom:12px; box-shadow:var(--pop-soft); }
.faq summary { font-family:'Outfit',sans-serif; font-weight:700; font-size:16px; cursor:pointer; }
.faq p { color:var(--muted); font-size:15px; margin-top:10px; }