:root{
      --bg:#0b1a2c; /* app bar - dark blue-black */
      --bg-2:#0f2239; /* hero - slightly lighter blue */
      --card:#1e293b; /* card background - dark slate */
      --text:#f8fafc; /* text - very light gray/white */
      --muted:#94a3b8; /* muted text - light blue-gray */
      --brand:#f59e0b; /* primary brand color - amber */
      --accent:#60a5fa; /* accent - blue */
      --warn:#fbbf24; /* warning - amber lighter */
      --danger:#ef4444; /* danger - red */
      --shadow:0 6px 24px rgba(0,0,0,.35);
      --radius:12px;
      --pad:16px;
      --max:880px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
      color:var(--text);
      background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    .app{
      max-width:var(--max);
      margin:0 auto 72px;
    }
    /* Top App Bar */
    .bar{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px);
      background:color-mix(in srgb, var(--bg-2) 85%, transparent);
      border-bottom:1px solid rgba(255,255,255,0.08);
    }
    .bar .row{
      display:flex; align-items:center; gap:12px; padding:10px var(--pad);
      max-width:var(--max); margin:0 auto;
    }
    .logo{
      display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
      font-weight:800; letter-spacing:.2px;
    }
    .logo-mark{width:34px; height:34px; border-radius:10px; background:var(--brand); box-shadow:var(--shadow)}
    .tag{margin-left:auto; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px}
    .tag .dot{width:8px;height:8px;border-radius:999px;background:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent)}

    /* Hero */
    .hero{padding:18px var(--pad) 8px}
    .hero-card{
      background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,0.08);
    }
    .eyebrow{display:inline-flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.12em}
    .eyebrow .shield{width:16px;height:16px;border-radius:4px;background:var(--brand)}
    h1{font-size:22px; line-height:1.15; margin:10px 0 12px}
    .sub{font-size:14px; color:var(--muted); margin:0 0 14px}

    /* CTA buttons */
    .cta{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px}
    .btn{border:none; border-radius:12px; padding:14px; font-weight:700; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none}
    .btn-primary{background:var(--brand); color:#422006}
    .btn-outline{background:transparent; color:var(--text); outline:2px solid rgba(255,255,255,0.15)}
    .btn small{display:block; font-weight:600; opacity:.8; font-size:11px}

    /* Quick trust row */
    .quick{display:flex; gap:8px; margin:12px 0 0; flex-wrap:wrap}
    .chip{flex:1; min-width:110px; background:color-mix(in srgb, var(--card) 85%, #0000); border-radius:10px; padding:10px 12px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,0.08)}
    .chip b{color:var(--text)}

    /* Industries scroller */
    .rail{padding:12px var(--pad)}
    .rail h2{font-size:14px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin:0 0 8px}
    .scroll {
      display:flex;
      gap:10px;
      overflow-x:auto;
      overflow-y:hidden;
      padding-bottom:2px;
      scroll-snap-type:x mandatory;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .scroll::-webkit-scrollbar {
      display: none;
    }
    .pill{scroll-snap-align:start; white-space:nowrap; border-radius:999px; padding:10px 14px; background:color-mix(in srgb, var(--card) 92%, #0000); border:1px solid rgba(255,255,255,0.1); font-weight:600; font-size:13px}

    /* Proof & compliance */
    .proof{padding:8px var(--pad)}
    .grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
    .card{background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,0.08)}
    .metric{font-size:22px; font-weight:800}
    .caption{font-size:12px; color:var(--muted)}
    .badge{display:inline-flex; align-items:center; gap:8px; font-weight:700; padding:10px 12px; border-radius:10px; border:1px dashed color-mix(in srgb, var(--brand) 40%, transparent); background:color-mix(in srgb, var(--card) 85%, #0000)}

    /* Micro FAQ (collapsible) */
    details{background:var(--card); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,0.08)}
    summary{font-weight:700; cursor:pointer}
    details p{margin:8px 0 0; color:var(--muted); font-size:14px}
    .faq{display:grid; gap:10px; padding:8px var(--pad)}

    /* Form */
    .form{padding:8px var(--pad) 16px}
    form{background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); display:grid; gap:14px; border:1px solid rgba(255,255,255,0.08)}
    .form-intro{margin-bottom:10px; font-size:14px; color:var(--muted); line-height:1.4}
    label{font-size:12px; color:var(--muted); font-weight:700; display:block; margin-bottom:4px}
    input, select, textarea{width:100%; background:color-mix(in srgb, var(--bg) 60%, transparent); border-radius:10px; border:1px solid rgba(255,255,255,0.12); padding:12px; color:var(--text); font-weight:600; font-family:inherit}
    /* Make date/time picker icons white */
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
      cursor: pointer;
    }
    textarea{min-height:80px}
    .form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
    .form-full{grid-column:1/-1}
    .agree{display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--muted)}
    .agree input{margin-top:2px; width:18px; height:18px}
    .form-title{font-size:18px; font-weight:700; margin:0 0 5px; color:var(--text)}

    /* Sticky bottom action dock */
    .dock{
      position:fixed; bottom:0; left:0; right:0; z-index:60; padding:10px; 
      background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-2) 92%, transparent));
      backdrop-filter: blur(10px);
    }
    .dock .row{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
    .dock a{display:flex; gap:8px; align-items:center; justify-content:center; text-decoration:none; padding:12px; font-weight:800; border-radius:12px; background:var(--brand); color:#422006}
    .dock a.alt{background:color-mix(in srgb, var(--card) 90%, #0000); color:var(--text); outline:1px solid rgba(255,255,255,0.15)}

    /* Before/After Section */
    .before-after {
      padding: 40px var(--pad);
      background: linear-gradient(to bottom, var(--bg-2), var(--bg));
      position: relative;
      overflow: hidden;
    }
    .before-after::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(245, 158, 11, 0.3), transparent);
    }
    .before-after-content {
      max-width: var(--max);
      margin: 0 auto;
      text-align: center;
    }
    .before-after-title {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 16px;
      color: var(--brand);
    }
    .before-after-subtitle {
      font-size: 16px;
      color: var(--muted);
      margin-bottom: 30px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    .comparison-container {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 2px solid rgba(245, 158, 11, 0.2);
    }
    .comparison-image {
      width: 100%;
      display: block;
      border-radius: 14px;
    }
    .comparison-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 8px 16px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 600;
      backdrop-filter: blur(4px);
    }
    .comparison-cta {
      margin-top: 30px;
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* Desktop enhancements */
    @media (min-width:740px){
      h1{font-size:28px}
      .grid{grid-template-columns:repeat(4,1fr)}
      .cta{grid-template-columns:1.2fr .8fr .8fr}
      .before-after-title {
        font-size: 32px;
      }
    }

    /* Small utility icons */
    .icon{width:18px;height:18px;border-radius:6px;background:currentColor;opacity:.9}
    .ic-call{mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.56.57 1 1 0 011 1v3.61a1 1 0 01-1 1A17 17 0 013 5a1 1 0 011-1h3.61a1 1 0 011 1 11.36 11.36 0 00.57 3.56 1 1 0 01-.24 1.01l-2.32 2.22z\"/></svg>') center / contain no-repeat}
    .ic-quote{mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M7.17 6A5.17 5.17 0 002 11.17V18h6.83V11.17H6.5A3.33 3.33 0 019.83 7.83 3.33 3.33 0 007.17 6zm10 0A5.17 5.17 0 0012 11.17V18h6.83V11.17h-2.33A3.33 3.33 0 0120.83 7.83 3.33 3.33 0 0017.17 6z\"/></svg>') center/contain no-repeat}
    .ic-check{mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>') center/contain no-repeat}
    .ic-badge{mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M17 5V3H7v2H3v14h18V5h-4zm-2 0H9V4h6v1z\"/></svg>') center/contain no-repeat}
    .ic-map{mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z\"/></svg>') center/contain no-repeat}