/* kv_index_v2.css — Koovira guest homepage (v2 trust-radar design).
   Self-contained: includes its own reset (this page does NOT load style.bundle /
   keen_polish), so it is immune to the legacy box-sizing/overflow issues. */
:root{
  --ink:#0b1020; --muted:#5a6379; --hint:#9aa1b4; --line:#ebedf5;
  --blue:#2f6bff; --purple:#6d4bf0; --pink:#e0469a; --green:#10b981; --soft:#f7f7fc;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{touch-action:manipulation}
/* the global dashboard mascot (injected by config/common_includes.php) is for the
   Metronic app pages — hide it on these standalone landing / legal pages */
.kv-app-main-characters,.kv-app-main-character,.kv-page-character{display:none !important}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased}
.kvx a{text-decoration:none; color:inherit}
.kvx svg{display:block}
.kvx .ic{stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; width:18px; height:18px}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}

.kx-header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.logo-img{height:43px; display:block}
.nav-mid{display:flex; gap:4px}
.nav-mid a{display:flex; align-items:center; gap:7px; font-size:14px; color:var(--muted); padding:8px 14px; font-weight:600; border-radius:11px}
.nav-mid a.active{color:var(--purple); background:#f1edff}
.nav-right{display:flex; gap:10px; align-items:center}
.btn{border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; border:1.5px solid transparent; display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.btn-ghost{border-color:var(--line); padding:9px 18px; color:var(--ink); background:#fff}
.btn-grad{background:linear-gradient(92deg,var(--blue),var(--purple)); color:#fff; padding:10px 20px; box-shadow:0 12px 24px -10px rgba(109,75,240,.6)}

.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(44% 48% at 10% 2%, rgba(109,75,240,.12), transparent 60%),radial-gradient(42% 46% at 96% 24%, rgba(224,70,154,.13), transparent 60%),radial-gradient(50% 50% at 60% 104%, rgba(47,107,255,.07), transparent 60%);}
.skyline {
  position: absolute;
  left: 50%;
  bottom: -50px;
  width: 99%;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;

  background-image: url("../media/citybackdrop.png");
  background-repeat: no-repeat;
  background-position: center bottom;
}
.hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:36px; align-items:center; padding:48px 0 56px}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--purple); background:#fff; border:1px solid #e7e1ff; padding:6px 13px; border-radius:999px; margin-bottom:20px; box-shadow:0 8px 20px -14px rgba(109,75,240,.5)}
.kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--green)}
.hero h1{font-size:clamp(30px,5.2vw,44px); line-height:1.08; font-weight:800; letter-spacing:-1.4px}
.hero h1 .grad{background:linear-gradient(92deg,var(--blue),var(--purple),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent}
.subline{font-size:clamp(15.5px,1.6vw,17.5px); color:#3c465c; margin:18px 0 16px; max-width:520px; line-height:1.7; font-weight:500}
.kv-statement{font-size:clamp(19px,1.7vw,21px); font-weight:700; color:var(--ink); margin:4px 0 26px; max-width:540px; line-height:1.55; letter-spacing:-.1px}
.kv-statement .grad{font-weight:800}
.kv-statement .grad{background:linear-gradient(92deg,var(--blue),var(--purple),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent}

.searchcard{background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 60px -30px rgba(28,22,80,.3); padding:9px; max-width:560px}
.tabs{display:flex; gap:4px; background:var(--soft); border-radius:13px; padding:5px; margin-bottom:9px}
.tab{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 4px; border-radius:10px; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s}
.tab.active{background:#fff; color:var(--purple); box-shadow:0 6px 16px -9px rgba(109,75,240,.55)}
.searchrow{display:flex; gap:8px; align-items:stretch; padding:3px}
.locwrap{position:relative; display:flex}
.loc{display:flex; align-items:center; gap:8px; padding:7px 11px; border:none; border-right:1px solid var(--line); background:transparent; cursor:pointer; font-family:inherit; text-align:left; border-radius:8px}
.loc:hover{background:#faf9ff}
.loc .pin{width:30px; height:30px; border-radius:9px; background:#f0edff; color:var(--purple); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.loc small{display:block; font-size:10px; color:var(--hint); font-weight:600} .loc b{font-size:13px; font-weight:700; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.locpop{position:absolute; top:calc(100% + 8px); left:0; z-index:30; width:min(264px,calc(100vw - 40px)); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 26px 54px -24px rgba(28,22,80,.42); padding:12px}
.locpop-detect{width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:#f1edff; color:var(--purple); border:none; border-radius:10px; padding:11px; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit}
.locpop-detect:hover{background:#e7e1ff}
.locpop-h{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--hint); margin:14px 0 8px}
.locpop-cities{display:flex; flex-wrap:wrap; gap:7px}
.locpop-cities button{font-size:12.5px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px; cursor:pointer; font-family:inherit}
.locpop-cities button:hover{border-color:#cdbff8; color:var(--purple)}
.qinput{flex:1; display:flex; align-items:center; color:var(--hint); font-size:14px; font-weight:500; padding-left:3px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.gobtn{background:linear-gradient(92deg,var(--blue),var(--purple)); color:#fff; border:none; border-radius:12px; padding:0 22px; font-size:14.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap}
.hstats{display:inline-flex; gap:0; margin-top:30px; flex-wrap:wrap; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 6px; box-shadow:0 18px 40px -28px rgba(40,30,100,.35)}
.hstats > div{padding:2px 22px; position:relative}
.hstats > div:not(:last-child)::after{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:30px; background:var(--line)}
.hstats .n{font-size:24px; font-weight:800; letter-spacing:-.6px; line-height:1.05; background:linear-gradient(92deg,var(--blue),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hstats .l{font-size:11px; color:var(--muted); font-weight:700; margin-top:4px; text-transform:uppercase; letter-spacing:.5px}

.visual{position:relative}
.radar-intro{text-align:center; max-width:460px; margin:0 auto 16px}
.radar-intro .eyebrow{margin-bottom:8px}
.radar-intro-h{font-size:21px; line-height:1.25; font-weight:800; color:var(--ink); margin:0 0 8px}
.radar-intro-p{font-size:13.5px; line-height:1.6; color:var(--muted); margin:0}
.radar-intro-p b{color:var(--ink); font-weight:700}
@media(max-width:920px){ .radar-intro{margin-bottom:14px} .radar-intro-h{font-size:19px} }
.radarcard{position:relative; height:460px; background:linear-gradient(165deg,#ffffff,#f5f3ff); border:1px solid #efeafc; border-radius:26px; box-shadow:0 40px 80px -42px rgba(40,30,100,.4); overflow:hidden}
.rings{position:absolute; inset:0; width:100%; height:100%}
.you{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; text-align:center}
.you .yc{width:78px; height:78px; border-radius:50%; background:linear-gradient(150deg,var(--purple),var(--blue)); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 18px 40px -16px rgba(109,75,240,.7); margin:0 auto}
.you .yc b{font-size:16px; font-weight:800} .you .yc small{font-size:9.5px; opacity:.86}
.nodes-head{display:none}
.nodes{position:absolute; inset:0; z-index:3}
.node{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px 12px 6px 6px; box-shadow:0 14px 30px -20px rgba(28,22,80,.45); white-space:nowrap}
.node .nt{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.node b{font-size:12.5px; font-weight:800; line-height:1}
.nt-b{background:#e9f0ff; color:#2f6bff} .nt-o{background:#fff0e0; color:#e0871d}
.nt-g{background:#e9faf2; color:#0c8a62} .nt-pk{background:#fdeaf4; color:#d63a8e}
.nt-p{background:#efeaff; color:#6d4bf0} .nt-r{background:#ffe9e7; color:#e0453f}
.nt-rs{background:#ffe9f1; color:#e0457e} .nt-t{background:#e2f6f3; color:#0d9488}
/* scattered (varied radii) — not a perfect circle */
.n1{left:30%;top:20%} .n2{left:60%;top:13%} .n3{left:83%;top:29%} .n4{left:85%;top:62%}
.n5{left:65%;top:85%} .n6{left:36%;top:80%} .n7{left:16%;top:73%} .n8{left:14%;top:42%}

.kx-section{padding:54px 0}
.eyebrow{text-align:center; font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--purple)}
.sec-title{text-align:center; font-size:clamp(24px,3.4vw,30px); font-weight:800; letter-spacing:-1px; margin-top:8px}
.sec-sub{text-align:center; font-size:15px; color:var(--muted); margin-top:9px; font-weight:500}

.proof{background:var(--ink); color:#fff; border-radius:20px; padding:22px 34px; display:flex; align-items:center; justify-content:space-between; gap:22px}
.proof .pi{display:flex; align-items:center; gap:12px}
.proof .pic{width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.1); color:#c9b8ff; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.proof .pn{font-size:16px; font-weight:800} .proof .pl{font-size:12px; color:#9aa1c4; font-weight:600}
.proof .div{width:1px; height:34px; background:rgba(255,255,255,.12)}

/* Benefits tabs */
.bwrap{display:flex; justify-content:center; margin-top:18px}
.benefits-tabs{display:inline-flex; gap:6px; background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:6px}
.bt{padding:11px 24px; border-radius:10px; font-size:14.5px; font-weight:700; color:var(--muted); cursor:pointer; border:none; background:transparent; display:inline-flex; align-items:center; gap:8px; transition:.15s}
.bt.active{background:#fff; color:var(--purple); box-shadow:0 6px 16px -9px rgba(109,75,240,.5)}
.bpanel{display:none}
.bpanel.active{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:16px; margin-top:30px}
.bitem{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; gap:14px; align-items:flex-start; transition:.2s}
.bitem:hover{box-shadow:0 22px 46px -34px rgba(28,22,80,.4); transform:translateY(-2px)}
.bitem .bic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.bitem .bic .ic{width:22px; height:22px}
.bitem h4{font-size:15px; font-weight:800; margin-bottom:5px; line-height:1.25}
.bitem p{font-size:12.5px; color:var(--muted); line-height:1.5; font-weight:500}
.text-white{color:#FFF!important;}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:16px; margin-top:34px}
.card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; transition:.2s}
.card:hover{box-shadow:0 22px 46px -34px rgba(28,22,80,.42); transform:translateY(-2px)}
.ico{width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.ico .ic{width:25px; height:25px; stroke-width:1.7}
.ic-b{background:#e9f0ff; color:#2f6bff} .ic-g{background:#e9faf2; color:#0c8a62}
.ic-o{background:#fff0e0; color:#e0871d} .ic-p{background:#efeaff; color:#6d4bf0}
.card h3{font-size:17px; font-weight:800; margin-bottom:11px}
.card ul{list-style:none; display:flex; flex-direction:column; gap:8px}
.card li{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; font-weight:500}
.card li .ic{width:14px; height:14px; color:var(--green); stroke-width:2.4; flex:0 0 auto}

.allworlds{margin-top:18px; background:var(--soft); border:1px solid var(--line); border-radius:22px; padding:30px 26px; text-align:center}
.chips{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; max-width:99%; margin:16px auto 0}
.chips a{font-size:13px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; display:inline-flex; align-items:center; gap:7px; transition:.16s}
.chips a .cd{width:6px; height:6px; border-radius:50%; background:var(--purple); opacity:.45}
.chips a:hover{border-color:#cdbff8; color:var(--purple); box-shadow:0 8px 16px -10px rgba(109,75,240,.45); transform:translateY(-1px)}
.chips a:hover .cd{opacity:1}

.cta{background:linear-gradient(100deg,#6d4bf0,#a23bd6,#e0469a); border-radius:24px; padding:44px; text-align:center; color:#fff}
.cta h3{font-size:clamp(23px,3.6vw,31px); font-weight:800; letter-spacing:-1px; max-width:680px; margin:0 auto 8px}
.cta p{font-size:15px; color:rgba(255,255,255,.85); margin-bottom:22px; font-weight:500}
.cta-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta .b1{background:#fff; color:#5a33d6; border:none; padding:12px 26px}
.cta .b2{background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.4); padding:12px 26px}

/* ---- YEP banner ---- */
.yep{position:relative; overflow:hidden; border-radius:26px; padding:46px; color:#fff;
  background:linear-gradient(115deg,#0b1020 0%,#3a1f7a 55%,#6d4bf0 100%);
  display:flex; align-items:center; justify-content:space-between; gap:34px}
.yep::after{content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(224,70,154,.4),transparent 70%); pointer-events:none}
.yep-main{position:relative; z-index:1; max-width:620px}
.yep-badge{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#dcd2ff; background:rgba(255,255,255,.12); padding:7px 14px; border-radius:999px}
.yep h3{font-size:clamp(24px,3.4vw,33px); font-weight:800; letter-spacing:-1px; margin:16px 0 10px}
.yep h3 .hl{background:linear-gradient(92deg,#ffd36b,#ff8ac0); -webkit-background-clip:text; background-clip:text; color:transparent}
.yep p{font-size:15px; color:rgba(255,255,255,.82); line-height:1.55; margin-bottom:22px; font-weight:500}
.yep-btns{display:flex; gap:12px; flex-wrap:wrap}
.yep .yb1{background:#fff; color:#3a1f7a; border:none; padding:13px 26px}
.yep .yb2{background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.35); padding:13px 26px}
.yep-stats{position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; flex:0 0 auto}
.yep-stat{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px 22px; min-width:170px}
.yep-stat .yn{font-size:24px; font-weight:800; letter-spacing:-.5px}
.yep-stat .yl{font-size:12.5px; color:rgba(255,255,255,.75); font-weight:600; margin-top:2px}

/* ---- Footer (dark, artistic) ---- */
.kx-footer{background:var(--ink); color:#fff; margin-top:20px}
.foot-cta{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:40px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.foot-cta-card{display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:18px 20px; transition:.18s}
.foot-cta-card:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); transform:translateY(-2px)}
.foot-cta-ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:rgba(109,75,240,.25); color:#c9b8ff}
.foot-cta-card h5{font-size:14.5px; font-weight:800; color:#fff; margin-bottom:2px}
.foot-cta-card p{font-size:12px; color:#9aa1c4; font-weight:500}
.foot-main{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; padding:44px 0 30px}
.foot-brand .logo-img{height:26px}
.foot-brand p{font-size:13px; color:#9aa1c4; margin-top:14px; line-height:1.55; max-width:300px; font-weight:500}
.foot-social{display:flex; gap:10px; margin-top:18px}
.foot-social a{width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#c9c9d6; transition:.16s}
.foot-social a:hover{background:rgba(255,255,255,.12); color:#fff}
.foot-col h5{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-bottom:14px}
.foot-col a, .foot-col button{display:block; font-size:13px; color:#9aa1c4; font-weight:500; margin-bottom:10px; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; text-align:left}
.foot-col a:hover, .foot-col button:hover{color:#fff}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 0 30px; border-top:1px solid rgba(255,255,255,.08); flex-wrap:wrap}
.foot-bottom p{font-size:12.5px; color:#7e859c; font-weight:500}
.foot-bottom .fb-r{display:flex; gap:8px; align-items:center; color:#7e859c; font-size:12.5px; font-weight:500}

/* ---- Modal (policies) ---- */
.kxmodal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(11,16,32,.55); backdrop-filter:blur(5px)}
.kxmodal.open{display:flex}
.kxmodal-box{background:#fff; color:var(--ink); border-radius:20px; width:min(540px,100%); max-height:86vh; overflow:auto; padding:24px; box-shadow:0 50px 100px -30px rgba(0,0,0,.55)}
.kxmodal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px}
.kxmodal-head h3{font-size:20px; font-weight:800; letter-spacing:-.5px}
.kxmodal-head p{font-size:13px; color:var(--muted); margin-top:4px; font-weight:500}
.kxmodal-x{width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--muted)}
.kxmodal-x:hover{background:var(--soft)}
.pollist{margin-top:16px; display:flex; flex-direction:column; gap:9px}
.pollist a{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; font-size:14px; font-weight:600; color:var(--ink); transition:.15s}
.pollist a:hover{border-color:#cdbff8; color:var(--purple); background:#faf9ff}
.pollist a .pa{display:flex; align-items:center; gap:11px}
.pollist a .pdot{width:34px; height:34px; border-radius:10px; background:#f1edff; color:var(--purple); display:flex; align-items:center; justify-content:center; flex:0 0 auto}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:16px; padding:30px 0 40px}
  .hero-grid > div:first-child{display:flex; flex-direction:column; align-items:center; text-align:center}
  .subline{max-width:560px}
  .searchcard{max-width:560px; width:100%; text-align:left}
  .hstats{display:flex; width:100%; max-width:560px; justify-content:space-around}
  .hstats > div{text-align:center}
  .foot-main{grid-template-columns:1fr 1fr}
  .yep{flex-direction:column; align-items:flex-start; text-align:left; padding:34px 26px}
  .yep-stats{flex-direction:row; flex-wrap:wrap; width:100%}
  .yep-stat{flex:1 1 140px; min-width:0}
  .foot-cta{grid-template-columns:1fr}
}
@media (max-width: 860px){
  .nav-mid{display:none}
  .kx-section{padding:42px 0}
  /* keep the radar a real scattered radar on mobile (not a grid) */
  .radarcard{height:min(450px,98vw); max-width:450px; margin:0 auto; padding:0}
  /* mobile-specific scatter (the card is squarer than desktop) — no overlaps */
  .n1{left:27%;top:17%} .n2{left:63%;top:16%} .n3{left:80%;top:35%} .n4{left:81%;top:61%}
  .n5{left:63%;top:85%} .n6{left:31%;top:85%} .n7{left:17%;top:64%} .n8{left:18%;top:37%}
  .you .yc{width:68px; height:68px}
  .node{padding:5px 9px 5px 5px; gap:6px; box-shadow:0 10px 22px -16px rgba(28,22,80,.5)}
  .node .nt{width:26px; height:26px}
  .node .nt .ic{width:15px; height:15px}
  .node b{font-size:11px}
  .proof{flex-direction:column; align-items:flex-start; gap:14px; padding:22px 22px; border-radius:18px}
  .proof .div{display:none}
  .allworlds{padding:26px 18px; border-radius:18px}
  /* denser, professional category cards */
  .cards{grid-template-columns:1fr 1fr; gap:12px}
  .card{padding:16px}
  .ico{width:42px; height:42px; border-radius:12px; margin-bottom:12px}
  .ico .ic{width:21px; height:21px}
  .card h3{font-size:14.5px; margin-bottom:9px}
  .card li{font-size:12px; gap:7px}
}
@media (max-width: 540px){
  .wrap{padding:0 16px}
  /* location + search input stay on ONE row; the Search button wraps full-width below */
  .searchrow{flex-wrap:wrap; gap:8px}
  .locwrap{flex:0 0 auto}
  .loc b{max-width:92px}
  .qinput{flex:1 1 0; min-width:0; white-space:nowrap}
  .gobtn{flex:1 0 100%; padding:12px}
  .cta{padding:30px 20px}
  .hstats{gap:0; padding:12px 2px}
  .hstats > div{padding:2px 10px}
  .hstats .n{font-size:21px}
  .chips a{font-size:12.5px; padding:8px 13px}
  .benefits-tabs{width:100%} .bt{flex:1; justify-content:center; padding:11px 8px}
  .nav-right .btn-ghost{padding:9px 13px}
  .nav-right .btn-grad{padding:9px 14px}
  .foot-main{grid-template-columns:1fr 1fr; gap:22px 18px}
  .foot-brand{grid-column:1 / -1}
  .yep{padding:28px 20px} .yep .yep-btns .btn{flex:1}
  .kxmodal-box{padding:20px}
}
@media (max-width: 380px){
  .node b{font-size:10px} .node .nt{width:23px;height:23px}
}

/* ============================================================
   v3 — search-led hero + action grid (2026-06-27)
   ============================================================ */
.hero-center{position:relative; z-index:2; max-width:780px; margin:0 auto; padding:46px 0 52px; display:flex; flex-direction:column; align-items:center; text-align:center}
.hero-center h1{font-size:clamp(31px,5.4vw,50px); line-height:1.06}
.hero-sub{margin:16px auto 4px; max-width:600px}
.searchcard-hero{margin:24px auto 0; max-width:660px; width:100%; text-align:left}
.qpills{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:18px auto 0; max-width:680px}
.qpills a{font-size:13px; font-weight:700; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 15px; display:inline-flex; align-items:center; gap:7px; transition:.16s}
.qpills a::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--purple); opacity:.5}
.qpills a:hover{border-color:#cdbff8; color:var(--purple); box-shadow:0 8px 16px -10px rgba(109,75,240,.45); transform:translateY(-1px)}
.qpills a:hover::before{opacity:1}
.hero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.hero-ctas .btn{padding:12px 24px; font-size:14.5px}
/* desktop: the wrapper is transparent so the 2 secondary CTAs sit inline as buttons */
.hero-ctas-sub{display:contents}
.btn-soft{background:#f1edff; color:var(--purple); border-color:#e3dbff}
.btn-soft:hover{background:#e7e1ff}

/* action grid — "what do you want to do today?" */
.actiongrid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:34px}
.act{position:relative; display:flex; flex-direction:column; gap:11px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 16px; transition:.2s}
.act:hover{box-shadow:0 22px 46px -34px rgba(28,22,80,.42); transform:translateY(-3px); border-color:#e3dbff}
.act .aic{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.act .aic .ic{width:23px; height:23px; stroke-width:1.7}
.act h4{font-size:14.5px; font-weight:800; line-height:1.2}
.act p{font-size:12px; color:var(--muted); font-weight:500; line-height:1.4}
.act .arrow{position:absolute; top:15px; right:14px; color:var(--hint); opacity:0; transform:translateX(-4px); transition:.2s}
.act .arrow .ic{width:18px; height:18px}
.act:hover .arrow{opacity:1; transform:translateX(0)}

/* relocated radar section */
.radarwrap{max-width:500px; margin:30px auto 0}
.radar-sec .radarcard{margin:0 auto}

@media (max-width:1080px){ .actiongrid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:860px){ .actiongrid{grid-template-columns:repeat(3,1fr)} .hero-center{padding:32px 0 40px} }
@media (max-width:560px){
  .actiongrid{grid-template-columns:1fr 1fr; gap:10px}
  .act{padding:14px 12px; gap:9px}
  .act .aic{width:40px; height:40px; border-radius:11px}
  .act .aic .ic{width:20px; height:20px}
  .act h4{font-size:13.5px}
  /* mobile: Join = full-width button; Explore + List drop below as text links on ONE line */
  .hero-ctas{width:100%; flex-direction:column; align-items:stretch; gap:10px}
  .hero-ctas > .btn-grad{flex:1 1 auto; justify-content:center; width:100%}
  .hero-ctas-sub{display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:20px; width:100%}
  .hero-ctas-sub .btn{flex:0 0 auto; background:none; border:none; box-shadow:none; padding:4px 0; min-width:0; color:var(--purple); font-size:14px; font-weight:700; white-space:nowrap}
  .hero-ctas-sub .btn:hover{background:none; text-decoration:underline}
}