:root{
    --bg:#f5f7fb;
    --card:#ffffff;
    --text:#0b1220;
    --muted:#475569;
    --muted2:#64748b;
    --line:#e6edf7;

    /* Brand palette */
    --brand:#0b5fff;
    --brand2:#22c1ff;
    --brand3:#7c3aed;

    --good:#16a34a;
    --warn:#f97316;
    --danger:#ef4444;

    --shadow: 0 18px 55px rgba(11,18,32,.12);
    --shadow2: 0 12px 30px rgba(11,18,32,.09);

    --radius: 20px;
    --radius2: 16px;
    --pill: 999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
    color:var(--text);
    background:
        radial-gradient(900px 380px at 18% -10%, rgba(11,95,255,.16), transparent 60%),
        radial-gradient(900px 380px at 82% -5%, rgba(34,193,255,.14), transparent 58%),
        radial-gradient(850px 340px at 70% 20%, rgba(124,58,237,.10), transparent 62%),
        var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 18px}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.anchor{scroll-margin-top:84px}

/* ---------- NAV ---------- */
.nav{
    position:sticky;top:0;z-index:10;
    background: rgba(245,247,251,.86);
    backdrop-filter: blur(12px);
    border-bottom:1px solid rgba(230,237,247,.85);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}
.brandMark{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.logo{
    width:38px;height:38px;border-radius:14px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 16px 26px rgba(11,95,255,.22);
    display:grid;place-items:center;
    border: 1px solid rgba(255,255,255,.6);
}
.logo svg{width:22px;height:22px;opacity:.95}
.nav-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links a.small-link{
    font-size:13px;font-weight:900;color:var(--muted);
    padding:10px 10px;border-radius:12px;
    border:1px solid transparent;
}
.nav-links a.small-link:hover{
    background: rgba(255,255,255,.78);
    border-color: rgba(230,237,247,.95);
    box-shadow: 0 10px 18px rgba(11,18,32,.04);
}
.chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 12px;border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.78);
    border-radius: var(--pill);
    font-size:13px;color:var(--muted);
    box-shadow: 0 10px 18px rgba(11,18,32,.04);
    white-space:nowrap;
}
.chip b{color:var(--text)}
.chip .mini-ico{width:16px;height:16px}
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    gap:10px;padding:12px 14px;border-radius:14px;border:1px solid transparent;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color:white;font-weight:950;
    box-shadow: 0 16px 26px rgba(11,95,255,.22);
    cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 18px 30px rgba(11,95,255,.26)}
.btn.secondary{
    background: rgba(255,255,255,.78);
    color:var(--text);
    border-color: rgba(230,237,247,.95);
    box-shadow: 0 12px 22px rgba(11,18,32,.06);
}
.btn.secondary:hover{box-shadow: 0 14px 26px rgba(11,18,32,.08)}
.btn.ghost{
    background: transparent;
    color: var(--text);
    border-color: rgba(230,237,247,.95);
    box-shadow:none;
}
.btn .ico{width:18px;height:18px}

/* ---------- HERO ---------- */
header.hero{padding:46px 0 24px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.hero-copy h1{
    margin:0 0 10px;
    font-size:46px;line-height:1.05;letter-spacing:-1px;
}
.hero-copy p{
    margin:0 0 16px;
    color:var(--muted);
    font-size:16px;line-height:1.65;
    max-width:64ch;
}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.badge{
    display:inline-flex;align-items:center;gap:9px;
    padding:9px 12px;border-radius: var(--pill);
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(230,237,247,.95);
    font-size:13px;color:var(--muted);
    box-shadow: 0 12px 22px rgba(11,18,32,.05);
}
.badge svg{width:16px;height:16px}
.badge.green svg{color:var(--good)}
.badge.blue svg{color:var(--brand)}
.badge.orange svg{color:var(--warn)}

/* ---------- SEARCH CARD ---------- */
.search-card{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(230,237,247,.95);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
}
.tabs{
    display:flex;gap:8px;padding:12px;
    border-bottom:1px solid rgba(230,237,247,.95);
    background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(248,250,252,.6));
}
.tab{
    flex:1;
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 12px;border-radius: var(--pill);
    border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.78);
    font-weight:950;font-size:13px;color:var(--muted);
    cursor:pointer;user-select:none;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.tab:hover{transform: translateY(-1px)}
.tab.active{
    color: var(--text);
    border-color: rgba(11,95,255,.38);
    background: rgba(11,95,255,.10);
}
.pill{
    font-size:11px;font-weight:950;letter-spacing:.3px;
    padding:4px 8px;border-radius: var(--pill);
    border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.78);
    color: var(--muted2);
    white-space:nowrap;
}
.pill.pco{border-color: rgba(249,115,22,.32); background: rgba(249,115,22,.10); color:#9a3412;}
.pill.premium{border-color: rgba(34,193,255,.32); background: rgba(34,193,255,.10); color:#075985;}
.form-wrap{padding:16px}
.info-banner{
    display:none;
    border:1px solid rgba(249,115,22,.22);
    background: rgba(249,115,22,.08);
    border-radius: 14px;
    padding:12px 12px;
    margin-bottom:12px;
}
.info-banner h4{margin:0 0 4px;font-size:14px;display:flex;align-items:center;gap:8px}
.info-banner h4 svg{width:16px;height:16px;color:#9a3412}
.info-banner p{margin:0;color:#7c2d12;font-size:13px;line-height:1.45}

.grid{
    display:grid;
    /* Default: Location Location Date Time (4 columns) */
    grid-template-columns: 1.1fr 1.1fr 1fr 1fr;
    gap:12px;
}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:12px;color:var(--muted2);font-weight:950}
.control{
    display:flex;align-items:center;gap:10px;
    padding:12px 12px;border-radius:14px;
    border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.86);
    box-shadow: 0 10px 18px rgba(11,18,32,.04);
}
.control svg{width:18px;height:18px;color: rgba(15,23,42,.65)}
input, select{
    border:none;background:transparent;outline:none;
    font-size:14px; width:100%;
}
.control:focus-within{
    border-color: rgba(11,95,255,.45);
    box-shadow: 0 0 0 4px rgba(11,95,255,.10), 0 10px 18px rgba(11,18,32,.06);
}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.switch{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:14px;border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.78);
    color:var(--muted);font-size:13px;font-weight:950;
    cursor:pointer;user-select:none;
    box-shadow: 0 12px 22px rgba(11,18,32,.05);
}
.toggle{
    width:40px;height:22px;border-radius: var(--pill);
    background: rgba(148,163,184,.35);
    position:relative;flex:0 0 auto;
    transition: all .18s ease;
}
.toggle:after{
    content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius: var(--pill);
    background:white;box-shadow: 0 6px 12px rgba(15,23,42,.18);
    transition: all .18s ease;
}
.switch.on .toggle{background: rgba(11,95,255,.45)}
.switch.on .toggle:after{left:21px}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.helper{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}

/* ---------- SECTIONS ---------- */
.section{padding:18px 0}
.section h2{margin:0 0 10px;font-size:22px;letter-spacing:-.2px}
.section p.sub{margin:0 0 14px;color:var(--muted);max-width:90ch}

/* Service Cards */
.cards{display:grid;grid-template-columns: repeat(3, 1fr);gap:12px}
.card{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(230,237,247,.95);
    border-radius: var(--radius2);
    box-shadow: var(--shadow2);
    padding:16px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    position:relative;
    overflow:hidden;
}
.card:hover{
    transform: translateY(-2px);
    border-color: rgba(11,95,255,.25);
    box-shadow: 0 16px 38px rgba(11,18,32,.12);
}
.card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.iconWrap{
    width:44px;height:44px;border-radius:16px;
    display:grid;place-items:center;
    background: rgba(11,95,255,.10);
    border:1px solid rgba(11,95,255,.15);
}
.iconWrap.orange{background: rgba(249,115,22,.10);border-color: rgba(249,115,22,.18)}
.iconWrap.cyan{background: rgba(34,193,255,.10);border-color: rgba(34,193,255,.18)}
.iconWrap svg{width:22px;height:22px}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.50}
.cta-link{
    display:inline-flex;align-items:center;gap:8px;
    font-weight:950;font-size:13px;
    color:var(--brand);
    margin-top:12px;
}
.cta-link svg{width:16px;height:16px}

/* How it works */
.steps{display:grid;grid-template-columns: repeat(3, 1fr);gap:12px}
.step{
    padding:16px;border-radius: var(--radius2);
    background: rgba(255,255,255,.92);
    border:1px solid rgba(230,237,247,.95);
    box-shadow: var(--shadow2);
}
.step .n{
    width:34px;height:34px;border-radius:14px;
    display:grid;place-items:center;
    background: rgba(11,95,255,.10);
    border:1px solid rgba(11,95,255,.16);
    font-weight:1000;color:var(--brand);
    margin-bottom:10px;
}
.step h3{margin:0 0 6px;font-size:15.5px}
.step p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.step .mini{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--muted2);font-size:13px;font-weight:850}
.step .mini svg{width:16px;height:16px;color:rgba(11,95,255,.85)}

/* Premium strip */
.premium-strip{
    margin-top:10px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.12);
    background:
        radial-gradient(900px 380px at 20% -10%, rgba(34,193,255,.35), transparent 55%),
        radial-gradient(900px 380px at 90% 0%, rgba(124,58,237,.30), transparent 55%),
        linear-gradient(135deg, #070b14, #101a30);
    box-shadow: 0 22px 60px rgba(7,11,20,.35);
    color:#e5e7eb;
    padding:18px;
    position:relative;
    overflow:hidden;
}
.premium-inner{position:relative;display:grid;grid-template-columns: 1.35fr .65fr;gap:12px;align-items:center}
.premium-strip h2{margin:0 0 6px;font-size:22px;color:white}
.premium-strip p{margin:0;color:#cbd5e1;font-size:13.5px;line-height:1.5}
.ticks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tick{
    display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius: var(--pill);
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    font-size:12px;color:#e2e8f0;font-weight:950;
}
.tick svg{width:14px;height:14px;color: rgba(34,193,255,.95)}
.premium-btn{
    justify-self:end;
    background: linear-gradient(135deg, rgba(34,193,255,.22), rgba(124,58,237,.22));
    border:1px solid rgba(255,255,255,.18);
    padding:12px 14px;border-radius:14px;
    color:white;font-weight:1000;cursor:pointer;
    display:inline-flex;align-items:center;gap:10px;
    box-shadow: 0 16px 36px rgba(0,0,0,.25);
    transition: transform .12s ease, background .12s ease;
}
.premium-btn:hover{transform: translateY(-1px); background: linear-gradient(135deg, rgba(34,193,255,.28), rgba(124,58,237,.28))}
.premium-btn svg{width:18px;height:18px}

/* Offers */
.offer-grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:12px}
.offer{
    padding:16px;border-radius: var(--radius2);
    background: rgba(255,255,255,.92);
    border:1px solid rgba(230,237,247,.95);
    box-shadow: var(--shadow2);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.offer:hover{transform: translateY(-2px);border-color: rgba(11,95,255,.22);box-shadow: 0 16px 38px rgba(11,18,32,.12)}
.offer .meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tag{
    font-size:11px;font-weight:1000;letter-spacing:.25px;
    padding:5px 9px;border-radius: var(--pill);
    border:1px solid rgba(230,237,247,.95);
    color:var(--muted);background: rgba(255,255,255,.78);
    display:inline-flex;align-items:center;gap:6px;
}
.tag svg{width:14px;height:14px}
.tag.hot{border-color: rgba(249,115,22,.30); background: rgba(249,115,22,.12); color:#9a3412;}
.price{font-weight:1000;color:var(--text)}
.offer h4{margin:0 0 6px;font-size:15px}
.offer p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}

/* Trust */
.trust-grid{display:grid;grid-template-columns: repeat(4, 1fr);gap:12px}
.trust{
    padding:14px;border-radius: var(--radius2);
    border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow2);
    display:flex;gap:12px;align-items:flex-start;
}
.trust .ico{
    width:42px;height:42px;border-radius:16px;
    display:grid;place-items:center;
    background: rgba(22,163,74,.10);
    border:1px solid rgba(22,163,74,.18);
    flex: 0 0 auto;
}
.trust .ico.blue{background: rgba(11,95,255,.10);border-color: rgba(11,95,255,.18)}
.trust .ico.orange{background: rgba(249,115,22,.10);border-color: rgba(249,115,22,.18)}
.trust .ico.cyan{background: rgba(34,193,255,.10);border-color: rgba(34,193,255,.18)}
.trust .ico svg{width:20px;height:20px}
.trust h4{margin:0 0 4px;font-size:14px}
.trust p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}

/* Join as business */
.join{
    display:grid;grid-template-columns: 1.25fr .75fr;gap:12px;align-items:start
}
.panel{
    padding:16px;border-radius: var(--radius2);
    background: rgba(255,255,255,.92);
    border:1px solid rgba(230,237,247,.95);
    box-shadow: var(--shadow2);
}
.panel h3{margin:0 0 8px;font-size:16px}
.panel p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.panel ul{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.75}
.kpi{display:grid;grid-template-columns: 1fr 1fr;gap:10px;margin-top:12px}
.kpi .k{
    padding:12px;border-radius: 16px;
    border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.85);
    box-shadow: 0 10px 18px rgba(11,18,32,.04);
}
.kpi .k b{display:block;font-size:14px}
.kpi .k span{color:var(--muted);font-size:13px}
.form-mini{display:grid;grid-template-columns: 1fr;gap:10px;margin-top:10px}
.mini-input{
    display:flex;align-items:center;gap:10px;
    padding:12px 12px;border-radius:14px;
    border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.86);
    box-shadow: 0 10px 18px rgba(11,18,32,.04);
}
.mini-input svg{width:18px;height:18px;color: rgba(15,23,42,.65)}
.mini-input input{
    border:none;background:transparent;outline:none;font-size:14px;width:100%;
}
.note{
    margin-top:10px;
    font-size:12px;color:var(--muted);
    line-height:1.45;
}

/* About */
.about{
    display:grid;grid-template-columns: 1.05fr .95fr;gap:12px;align-items:start
}
.about .values{display:grid;grid-template-columns: 1fr 1fr;gap:10px;margin-top:12px}
.value{
    padding:12px;border-radius:16px;
    border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 18px rgba(11,18,32,.04);
}
.value .top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.value .top svg{width:18px;height:18px;color: rgba(11,95,255,.90)}
.value b{font-size:13.5px}
.value p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}

/* FAQ */
.faq{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
details{
    padding:14px;border-radius: var(--radius2);
    border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow2);
}
summary{
    cursor:pointer;
    font-weight:1000;
    color: var(--text);
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    list-style:none;
}
summary::-webkit-details-marker{display:none}
summary .q{display:flex;align-items:center;gap:10px}
summary svg{width:18px;height:18px;color: rgba(11,95,255,.90)}
details p{margin:10px 0 0;color:var(--muted);font-size:13.5px;line-height:1.55}
.chev{width:18px;height:18px;color: rgba(15,23,42,.55);transition: transform .12s ease}
details[open] .chev{transform: rotate(180deg)}

/* SEO + Locations */
.seo{display:grid;grid-template-columns: 1.25fr .75fr;gap:12px;align-items:start}
.loc-grid{display:grid;grid-template-columns: 1fr;gap:10px}
.loc{
    padding:12px 14px;border-radius: 16px;
    border:1px solid rgba(230,237,247,.95);
    background: rgba(255,255,255,.88);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    box-shadow: 0 10px 18px rgba(11,18,32,.04);
}
.loc b{font-size:13.5px}
.loc span{color:var(--muted);font-size:13px}

/* Footer */
footer{
    padding:28px 0 38px;
    color:var(--muted);
    font-size:13px;
}
.footer-grid{
    display:grid;grid-template-columns: 1.3fr .7fr .7fr;gap:12px;
    padding-top:14px;
    border-top:1px solid rgba(230,237,247,.95);
    margin-top:16px;
}
.footer-col h4{margin:0 0 8px;font-size:13.5px;color:var(--text)}
.footer-col a{
    display:block;
    padding:6px 0;
    color:var(--muted);
    font-weight:850;
}
.footer-col a:hover{color:var(--text)}
.legal{
    margin-top:12px;
    font-size:12px;color:var(--muted2);
    line-height:1.55;
}

/* ---------- RESPONSIVE MEDIA QUERIES (OPTIMIZED) ---------- */
@media (max-width: 980px){
    .hero-grid{grid-template-columns:1fr}
    .hero-copy h1{font-size:40px}
    
    /* Change search grid to 2 columns on tablet/small laptop */
    .grid{grid-template-columns: 1fr 1fr} 

    .cards{grid-template-columns: 1fr}
    .steps{grid-template-columns: 1fr}
    .offer-grid{grid-template-columns: 1fr}
    .trust-grid{grid-template-columns: 1fr 1fr}
    .seo{grid-template-columns: 1fr}
    .premium-inner{grid-template-columns: 1fr}
    .premium-btn{justify-self:start}
    .join{grid-template-columns: 1fr}
    .about{grid-template-columns: 1fr}
    .faq{grid-template-columns: 1fr}
    .footer-grid{grid-template-columns: 1fr}
}
@media (max-width: 520px){
    /* Change search grid to 1 column on phones to stack all fields */
    .grid{grid-template-columns: 1fr} 
    
    .trust-grid{grid-template-columns: 1fr}
    .nav-links{display:none} /* Hides navigation links on small phones */
    .hero-copy h1{font-size:34px}
    
    /* Reduce hero padding for tighter look on small screens */
    header.hero{padding:30px 0 18px} 

    .kpi{grid-template-columns: 1fr}
    .about .values{grid-template-columns: 1fr}
}