/* ============================================================
   YITO — Yoshlar Soʻrovnomasi · Design system
   Premium dark "innovation lab" aesthetic.
   ============================================================ */

/* ---------- Fonts (local Poppins) ---------- */
@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/poppins/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/poppins/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/poppins/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/poppins/poppins-700.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root{
  /* ---- Design system (single source of truth) ---- */
  --bg:#0A0E1F;            /* base background */
  --bg-elev:#111629;       /* card background */
  --bg-elev-2:#161C33;     /* hover / nested */
  --border:rgba(255,255,255,0.06);
  --border-strong:rgba(255,255,255,0.10);
  --text:#EDF1FA;          /* primary text */
  --text-muted:#9AA3B8;    /* secondary text */
  --text-dim:#5E6680;      /* lowest hierarchy */
  --primary:#3B82F6;       /* main blue */
  --accent:#22D3EE;        /* cyan — used very sparingly */
  --radius:14px;
  --radius-sm:10px;
  --danger:#FF5C7A;

  /* ---- Legacy aliases mapped to the new system ---- */
  --bg-900:var(--bg); --bg-800:var(--bg-elev); --brand-navy:#11315E;
  --accent-cyan:var(--accent); --accent-amber:#FFB020;
  --flag-blue:#1EB4E7; --flag-green:#1FA055; --flag-red:#CE1126;
  --glass-bg:var(--bg-elev);
  --glass-brd:var(--border);
  --glass-brd-strong:var(--border-strong);
  --grad:linear-gradient(135deg,var(--primary),var(--accent));
  --grad-soft:rgba(59,130,246,0.12);
  --radius-lg:22px;
  --shadow:0 16px 40px -22px rgba(0,0,0,.7);
  --glow:none;
  --glow-cyan:none;
  --maxw:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; font-family:'Poppins',system-ui,sans-serif;
  color:var(--text); background:var(--bg);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    radial-gradient(900px 600px at 80% -10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(700px 600px at 5% 8%, rgba(34,211,238,.05), transparent 55%);
  background-attachment:fixed;
}
h1,h2,h3{font-weight:600; letter-spacing:-.01em; line-height:1.14; margin:0 0 .4em; color:var(--text)}
p{margin:0 0 1rem; font-weight:400}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
.muted{color:var(--text-muted)}
/* Gradient text is reserved for the hero headline only. */
.grad-text{color:var(--text); -webkit-text-fill-color:currentColor}
.hero-title .grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}

.skip-link{position:absolute; left:-999px; top:0; z-index:999; background:var(--primary); color:#fff; padding:10px 16px; border-radius:0 0 10px 0}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

/* ---------- Surface (card) ---------- */
.glass{
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:none;
}

/* ---------- Buttons ---------- */
.btn-glow{
  position:relative; border:0; cursor:pointer;
  font:500 1rem/1 'Poppins',sans-serif; color:#fff;
  padding:.8rem 1.6rem; border-radius:var(--radius-sm);
  background:var(--primary); display:inline-flex; align-items:center; gap:.55em;
  box-shadow:0 4px 14px rgba(59,130,246,0.25);
  transition:transform .2s var(--ease), background .2s, box-shadow .2s;
}
.btn-glow:hover{transform:translateY(-1px); background:#4d8ff8; box-shadow:0 6px 18px rgba(59,130,246,0.3)}
.btn-glow:active{transform:translateY(0)}
.btn-glow i{font-size:.95em}

.btn-ghost{
  border:1px solid var(--border-strong); background:transparent;
  color:var(--text); padding:.8rem 1.5rem; border-radius:var(--radius-sm); cursor:pointer;
  font:500 1rem/1 'Poppins',sans-serif; display:inline-flex; align-items:center; gap:.55em;
  transition:border-color .2s, background .2s, transform .2s, opacity .2s;
}
.btn-ghost:hover{border-color:var(--border-strong); background:var(--bg-elev-2); transform:translateY(-1px)}
.btn-ghost:disabled{opacity:.35; cursor:not-allowed; transform:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:auto; display:flex; align-items:center; overflow:hidden; isolation:isolate;
  /* 60% transparent base — the full-page background shows through the hero,
     muted by a 40% dark wash; CSS colour glows sit on top. */
  background:
    radial-gradient(55% 52% at 50% 34%, rgba(59,130,246,.22), transparent 70%),
    radial-gradient(42% 46% at 82% 16%, rgba(34,211,238,.16), transparent 72%),
    radial-gradient(46% 52% at 12% 84%, rgba(139,92,246,.16), transparent 72%),
    rgba(10,14,31,.4)}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-2; opacity:.95}
.hero-overlay{position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 60% at 50% 42%, transparent, rgba(10,14,31,.28) 85%), linear-gradient(180deg, rgba(10,14,31,0), rgba(10,14,31,.78));
}
.hero-inner{position:relative; padding-block:7.5rem 4rem; max-width:900px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center}
.hero-badge{
  display:inline-flex; align-items:center; gap:.55em; font-size:.82rem; font-weight:500;
  color:var(--text-muted); padding:7px 15px; border-radius:999px;
  background:var(--bg-elev); border:1px solid var(--border); letter-spacing:.01em;
}
.pulse-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2.4s infinite}
.hero-title{position:relative; font-size:clamp(2.2rem,4.8vw,3.7rem); margin:.35em 0 .35em; font-weight:700; line-height:1.12; letter-spacing:-.02em; max-width:100%; text-wrap:balance;
  /* line 1 gradient — soft white → light blue */
  background:linear-gradient(180deg, #FFFFFF 0%, #CBD8F4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
/* Big soft glow orb behind the headline */
.hero-title::before{content:""; position:absolute; left:50%; top:50%; width:560px; height:300px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(59,130,246,.35), rgba(139,92,246,.18) 55%, transparent 75%);
  filter:blur(20px); z-index:-1; pointer-events:none}
.hero-title .grad-text{
  background:linear-gradient(110deg, var(--primary) 0%, var(--accent) 50%, #8B5CF6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 30px rgba(34,211,238,.35))}
.hero-subtitle{font-size:clamp(1.02rem,2.2vw,1.2rem); color:var(--text-muted); max-width:60ch; margin-inline:auto; line-height:1.65}
.subtitle-accent{color:var(--accent); font-weight:500}

/* Hero stats — separate glassy bordered pills */
.hero-stats{display:inline-flex; flex-wrap:wrap; gap:14px; margin:40px auto 0; justify-content:center}
.stat-pill{position:relative; display:flex; flex-direction:column; align-items:center; padding:16px 26px; min-width:120px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(17,22,41,.55);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s}
/* Gradient hairline border on top edge for a premium accent */
.stat-pill::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(59,130,246,.7), rgba(34,211,238,.5) 60%, transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; pointer-events:none}
.stat-pill:hover{transform:translateY(-3px); border-color:rgba(120,180,255,.5); box-shadow:0 22px 48px -24px rgba(34,211,238,.4)}
.stat-num{font-size:2.1rem; font-weight:700; line-height:1; display:inline-flex; align-items:baseline; gap:.08em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.stat-unit{font-size:.95rem; font-weight:600; -webkit-text-fill-color:var(--text-muted); color:var(--text-muted)}
.stat-label{font-size:.82rem; color:var(--text-muted); margin-top:7px}
@media(max-width:520px){.stat-pill{padding:13px 16px; flex:1 1 40%; min-width:0}}

.hero-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px}
.hero-note{font-size:.85rem; color:var(--text-muted); display:inline-flex; align-items:center; gap:.45em}

.scroll-cue{margin:52px auto 0; width:24px; height:40px; border:2px solid var(--border-strong); border-radius:14px; display:flex; justify-content:center; padding-top:7px}
.scroll-cue span{width:4px; height:8px; border-radius:2px; background:var(--text-dim); animation:scrollcue 1.8s infinite}

/* ============================================================
   SURVEY
   ============================================================ */
.survey-main{position:relative}
.survey-section{padding-block:clamp(40px,8vh,90px) 120px}
.survey-head{text-align:center; margin-bottom:40px}
.eyebrow{display:inline-flex; gap:.5em; align-items:center; color:var(--accent); font-weight:600; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase}
.eyebrow i{display:none} /* premium: simple label, no icon */
.survey-head h2{font-size:clamp(1.8rem,4.5vw,2.7rem); margin:.35em 0 .25em}

/* Sticky progress */
.progress-bar-wrap{position:sticky; top:0; z-index:50; padding:12px 0; background:rgba(7,11,30,.72); backdrop-filter:blur(12px); border-bottom:1px solid var(--glass-brd)}
.progress-meta{display:flex; justify-content:space-between; font-size:.82rem; font-weight:600; color:var(--text-muted); margin-bottom:8px}
.progress-pct{color:var(--accent-cyan)}
.progress-track{height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden}
.progress-fill{height:100%; width:0; border-radius:999px; background:var(--primary); transition:width .6s var(--ease)}

/* Step header */
.step-header{display:flex; gap:18px; align-items:center; margin-bottom:30px}
.step-icon{flex:none; width:62px; height:62px; border-radius:18px; display:grid; place-items:center; font-size:1.5rem; color:#021024; background:var(--grad); box-shadow:var(--glow-cyan)}
.step-kicker{font-size:.8rem; font-weight:600; color:var(--accent-cyan); text-transform:uppercase; letter-spacing:.08em}
.step-title{font-size:clamp(1.4rem,3.4vw,2rem); margin:.1em 0 .15em}
.step-sub{color:var(--text-muted); margin:0; font-size:.95rem}

.step-questions{display:flex; flex-direction:column; gap:20px}

/* Question card */
.q-card{padding:24px 24px 22px}
.q-head{display:flex; gap:14px; margin-bottom:18px}
.q-num{flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:700; font-size:.95rem; color:var(--accent-cyan); background:var(--grad-soft); border:1px solid var(--glass-brd)}
.q-label{font-size:1.12rem; font-weight:600; margin:0; line-height:1.4}
.q-req{color:var(--accent-amber); margin-left:3px}
.q-instruction{font-size:.85rem; color:var(--text-muted); margin:.4em 0 0; display:flex; gap:.4em; align-items:baseline}
.q-error{display:none; color:var(--danger); font-size:.85rem; margin:.9em 0 0}
.q-card.has-error{border-color:rgba(255,92,122,.55); box-shadow:0 0 0 1px rgba(255,92,122,.35)}
.q-card.has-error .q-error{display:flex; align-items:center; gap:.4em}
.q-card.has-error .q-error::before{content:"\f06a"; font-family:"Font Awesome 6 Pro","Font Awesome 6 Free"; font-weight:900}
.q-counter{font-size:.82rem; color:var(--text-muted); margin:.8em 0 0}
.q-counter.warn .counter-text{color:var(--accent-amber)}
.q-counter.ok .counter-text{color:var(--accent-cyan)}

/* Option cards (single + multi) */
.opt-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.opt-card{
  position:relative; display:flex; align-items:center; gap:13px; cursor:pointer;
  padding:16px 18px; border-radius:var(--radius-sm); min-height:58px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  transition:border-color .2s, background .2s, transform .18s var(--ease), box-shadow .25s;
  user-select:none;
}
.opt-card:hover{transform:translateY(-2px); border-color:rgba(120,200,255,.45); background:rgba(255,255,255,.07); box-shadow:0 10px 26px -16px rgba(45,125,255,.7)}
.opt-card input{position:absolute; opacity:0; width:0; height:0}
.opt-check{flex:none; width:24px; height:24px; border-radius:8px; border:1.5px solid rgba(255,255,255,.32); background:rgba(255,255,255,.04); display:grid; place-items:center; color:#021024; font-size:.7rem; box-shadow:inset 0 1px 1px rgba(255,255,255,.06); transition:background .2s, border-color .2s, transform .2s}
/* Single-choice = circular radio indicator; multi (.multi) = rounded square. */
.opt-grid:not(.multi) .opt-check{border-radius:50%}
.opt-check i{opacity:0; transform:scale(.4); transition:opacity .2s, transform .2s}
.opt-text{font-size:.98rem}
.opt-card.selected{border-color:transparent; background:var(--grad-soft); box-shadow:var(--glow)}
.opt-card.selected .opt-check{background:var(--grad); border-color:transparent; transform:scale(1.05)}
.opt-card.selected .opt-check i{opacity:1; transform:scale(1)}
.opt-card.disabled{opacity:.4; pointer-events:none}

/* Scale 5 */
.scale5{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.scale-end{font-size:.8rem; color:var(--text-muted); flex:1 1 110px; min-width:90px}
.scale-end-max,.scale-end-right{text-align:right}
.scale-track{display:flex; gap:8px; flex:0 0 auto}
.scale-pip{position:relative; width:54px; height:54px; border-radius:14px; cursor:pointer; display:grid; place-items:center;
  background:rgba(255,255,255,.04); border:1px solid var(--glass-brd); transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .25s}
.scale-pip input{position:absolute; opacity:0; width:0; height:0}
.pip-num{font-weight:700; font-size:1.1rem; color:var(--text-muted); transition:color .2s}
.scale-pip:hover{transform:translateY(-3px); border-color:var(--glass-brd-strong)}
.scale-pip[data-tone="1"]{box-shadow:inset 0 0 0 0 transparent}
.scale-pip.selected{border-color:transparent; box-shadow:var(--glow)}
.scale-pip.selected .pip-num{color:#021024}
.scale-pip.selected[data-tone="1"]{background:#ff6b6b} .scale-pip.selected[data-tone="2"]{background:#ff9f6b}
.scale-pip.selected[data-tone="3"]{background:var(--accent-amber)} .scale-pip.selected[data-tone="4"]{background:#7fd98a}
.scale-pip.selected[data-tone="5"]{background:var(--flag-green)}
@media(max-width:480px){.scale-pip{width:44px; height:44px} .scale-track{gap:6px}}

/* Scale 10 */
.scale10{padding-top:6px}
.scale10-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.scale-bubble{font-weight:600; font-size:1.3rem; min-width:54px; text-align:center; padding:4px 10px; border-radius:12px; background:var(--primary); color:#fff}
.scale10-range{width:100%; -webkit-appearance:none; appearance:none; height:10px; border-radius:999px; outline:none;
  background:linear-gradient(90deg,#ff6b6b,var(--accent-amber),var(--flag-green))}
.scale10-range::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; cursor:pointer; border:4px solid var(--primary); box-shadow:0 0 14px rgba(45,125,255,.8); transition:transform .15s}
.scale10-range::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:#fff; cursor:pointer; border:4px solid var(--primary); box-shadow:0 0 14px rgba(45,125,255,.8)}
.scale10-range:active::-webkit-slider-thumb{transform:scale(1.15)}
.scale10-ticks{display:flex; justify-content:space-between; margin-top:8px; font-size:.72rem; color:var(--text-muted)}

/* Region map + select */
.region-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:center}
.uz-map{width:100%; border-radius:var(--radius-sm); padding:14px; min-height:240px; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 35%, rgba(45,125,255,.16), rgba(34,224,200,.05) 55%, rgba(255,255,255,.02));
  border:1px solid var(--glass-brd-strong)}
.uz-map svg{width:100%; height:auto; display:block; overflow:visible}
/* Hide simplemaps' city dots & text labels — only the region shapes matter here. */
.uz-map #points, .uz-map #label_points{display:none}
.uz-map path[data-region]{fill:rgba(96,165,255,.30); stroke:rgba(150,225,255,.85); stroke-width:.9; cursor:pointer; transition:fill .2s, stroke .2s, filter .2s}
.uz-map path[data-region]:hover{fill:rgba(34,224,200,.55); stroke:#9af7ea; stroke-width:1.1; filter:drop-shadow(0 0 8px rgba(34,224,200,.8))}
.uz-map path[data-region].active{fill:url(#uzgrad); stroke:#fff; stroke-width:1.4; filter:drop-shadow(0 0 12px rgba(45,125,255,1))}
.region-label{display:block; font-size:.85rem; color:var(--text-muted); margin-bottom:8px; font-weight:500}
.region-chosen{margin:14px 0 0; font-size:.95rem; color:var(--accent-cyan); font-weight:600; min-height:1.4em}
.region-chosen.set::before{content:"\f3c5"; font-family:"Font Awesome 6 Pro","Font Awesome 6 Free"; font-weight:900; margin-right:.5em}
@media(max-width:760px){.region-wrap{grid-template-columns:1fr}}

/* Textarea */
.text-wrap{position:relative}
.text-area{width:100%; resize:vertical; min-height:110px; padding:16px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04); border:1px solid var(--glass-brd); color:var(--text); font:400 1rem 'Poppins',sans-serif; transition:border-color .2s, box-shadow .2s}
.text-area:focus{border-color:var(--accent-cyan); box-shadow:var(--glow-cyan); outline:none}
.char-hint{position:absolute; bottom:10px; right:14px; font-size:.75rem; color:var(--text-muted)}

/* Step nav */
.step-nav{display:flex; justify-content:space-between; gap:14px; margin-top:34px}
.step-nav .nav-next,.step-nav .nav-submit{margin-left:auto}

/* Honeypot */
.hp-field{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}

/* Submit overlay */
.submit-overlay{position:fixed; inset:0; z-index:200; display:grid; place-items:center; gap:16px; background:rgba(7,11,30,.8); backdrop-filter:blur(8px)}
.spinner{width:54px; height:54px; border-radius:50%; border:4px solid rgba(255,255,255,.12); border-top-color:var(--accent-cyan); animation:spin 1s linear infinite}

/* ---------- Tom Select theming ---------- */
.ts-control{background:rgba(255,255,255,.05)!important; border:1px solid var(--glass-brd-strong)!important; border-radius:var(--radius-sm)!important; color:var(--text)!important; padding:12px 14px!important; box-shadow:none!important}
.ts-control.focus{border-color:var(--accent-cyan)!important; box-shadow:var(--glow-cyan)!important}
.ts-control input,.ts-control .item{color:var(--text)!important}
.ts-dropdown{background:#0d1530!important; border:1px solid var(--glass-brd-strong)!important; border-radius:var(--radius-sm)!important; color:var(--text)!important; box-shadow:var(--shadow)!important}
.ts-dropdown .option{padding:11px 14px!important}
.ts-dropdown .active{background:var(--grad-soft)!important; color:var(--text)!important}
.ts-wrapper.single .ts-control{cursor:pointer}

/* ============================================================
   THANK YOU
   ============================================================ */
.thankyou-main{min-height:100svh; display:grid; place-items:center; position:relative; padding:40px 0}
.ty-canvas{position:fixed; inset:0; z-index:0; pointer-events:none}
.ty-card{position:relative; z-index:1; max-width:560px; text-align:center; padding:48px 34px}
.ty-check{margin-bottom:18px}
.ty-title{font-size:clamp(1.6rem,5vw,2.3rem)}
.ty-text{color:var(--text-muted)}
.ty-text strong{color:var(--text)}
.ty-count{margin:26px 0; padding:20px; border-radius:var(--radius); background:var(--grad-soft); border:1px solid var(--glass-brd)}
.ty-count-num{display:block; font-size:2.8rem; font-weight:600; color:var(--text); line-height:1}
.ty-count-label{font-size:.9rem; color:var(--text-muted)}
.ty-actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px}
.ty-anon{margin-top:26px; font-size:.82rem; color:var(--text-muted)}
.ty-ring{stroke-dasharray:276; stroke-dashoffset:276; animation:draw 1s var(--ease) forwards}
.ty-tick{stroke-dasharray:80; stroke-dashoffset:80; animation:draw .6s var(--ease) .6s forwards}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--border); padding:30px 0; margin-top:40px; background:transparent}
.footer-inner{display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between}
.footer-brand{display:flex; align-items:center; gap:12px}
.footer-brand strong{display:block; font-size:1rem; font-weight:600}
.footer-sub{font-size:.78rem; color:var(--text-dim); max-width:340px; display:block}
.footer-meta{display:flex; flex-wrap:wrap; align-items:center; gap:16px; font-size:.85rem; color:var(--text-dim)}
.footer-meta a{color:var(--accent)}
.badge-anon{display:inline-flex; gap:.45em; align-items:center; padding:6px 12px; border-radius:999px; background:rgba(59,130,246,0.10); border:1px solid var(--border); color:var(--text-muted)}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-login-main{min-height:100svh; display:grid; place-items:center; padding:40px 0}
.login-card{max-width:420px; width:100%; padding:40px 32px; text-align:center}
.login-logo{margin-bottom:14px}
.login-card h1{font-size:1.7rem; margin-bottom:.2em}
.login-field{display:block; text-align:left; margin:22px 0}
.login-field span{display:block; font-size:.85rem; color:var(--text-muted); margin-bottom:8px}
.login-field input{width:100%; padding:14px 16px; border-radius:var(--radius-sm); background:rgba(255,255,255,.05); border:1px solid var(--glass-brd-strong); color:var(--text); font:400 1rem 'Poppins',sans-serif}
.login-field input:focus{border-color:var(--accent-cyan); box-shadow:var(--glow-cyan); outline:none}
.login-error{background:rgba(255,92,122,.14); border:1px solid rgba(255,92,122,.5); color:#ffd3dc; padding:12px 14px; border-radius:12px; font-size:.9rem; margin-top:14px}
.login-back{display:inline-block; margin-top:20px; font-size:.85rem; color:var(--text-muted)}

.admin-main{padding-block:36px 80px}
.admin-top{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; margin-bottom:30px}
.admin-top h1{font-size:clamp(1.6rem,4vw,2.4rem); margin:.2em 0 0}
.admin-actions{display:flex; gap:12px; flex-wrap:wrap}
.admin-actions .btn-ghost{padding:11px 18px; font-size:.9rem}

.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:22px}
.kpi{position:relative; padding:22px 24px; overflow:hidden}
.kpi-num{display:block; font-size:2.1rem; font-weight:600; color:var(--text); line-height:1}
.kpi-lbl{font-size:.85rem; color:var(--text-muted)}
.kpi-ic{position:absolute; right:18px; top:18px; font-size:1.6rem; color:rgba(255,255,255,.10)}

.dash-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.dash-card{padding:22px 22px 26px}
.dash-card h3{font-size:1.02rem; margin-bottom:16px; font-weight:600}
.dash-card canvas{max-height:300px}
.dash-card.span-2{grid-column:span 2}
.span-2 canvas{max-height:340px}

.feedback-card{margin-top:18px}
.fb-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; max-height:520px; overflow:auto}
.fb-item{padding:16px; border-radius:var(--radius-sm); background:rgba(255,255,255,.035); border:1px solid var(--glass-brd)}
.fb-text{font-size:.92rem; margin:0 0 10px}
.fb-meta{font-size:.78rem; color:var(--text-muted)}

.empty-state{text-align:center; padding:60px 30px}
.empty-state i{font-size:2.6rem; color:var(--accent-cyan); margin-bottom:14px; display:block}

@media(max-width:820px){
  .dash-grid{grid-template-columns:1fr}
  .dash-card.span-2{grid-column:span 1}
}

@media(max-width:600px){
  .q-card{padding:20px 16px}
  .step-icon{width:52px; height:52px; font-size:1.25rem}
  .opt-grid{grid-template-columns:1fr}
  .hero-stats{gap:10px}
  .stat-pill{flex:1 1 40%; min-width:0; padding:12px 14px}
}

/* ============================================================
   LANDING PAGE (v2) — nav, sections, mission, stats, map, charts, CTA
   ============================================================ */
.btn-glow,.btn-ghost,.nav-cta,.brand,.top-nav-links a{text-decoration:none}
.btn-glow:hover,.btn-ghost:hover,.nav-cta:hover,.brand:hover,.top-nav-links a:hover{text-decoration:none}
.btn-lg{font-size:1.05rem; padding:.95rem 2rem}

/* Top nav */
.top-nav{position:fixed; top:0; left:0; right:0; z-index:200; padding:14px 0; transition:padding .3s var(--ease), background .3s, border-color .3s; border-bottom:1px solid transparent}
.top-nav.scrolled{background:rgba(10,14,31,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--border); padding:10px 0}
.top-nav-inner{display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:flex; align-items:center; gap:11px; min-width:0; font-weight:600; color:var(--text)}
.brand svg{flex:none}
.top-nav-links{flex:none}
.brand-lockup{display:flex; flex-direction:column; justify-content:center}
.brand-full{font-size:.8rem; font-weight:600; line-height:1.22; letter-spacing:.01em; max-width:280px; text-transform:none}
.brand-full .bf-1{display:block; color:#EDF1FA}
.brand-full .bf-2{display:block; font-weight:700;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
@media(max-width:768px){ .brand-full{display:none} }
.top-nav-links{display:flex; align-items:center; gap:28px}
.top-nav-links a{color:var(--text-muted); font-weight:500; font-size:.92rem; transition:color .2s}
.top-nav-links a:hover{color:var(--text)}
.nav-cta{padding:.6rem 1.3rem; border-radius:var(--radius-sm); background:var(--primary); color:#fff !important; font-weight:500; box-shadow:0 4px 14px rgba(59,130,246,0.25); transition:transform .2s, background .2s}
.nav-cta:hover{transform:translateY(-1px); background:#4d8ff8}

/* Hero accents */
.hero-grid-accent{position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(120,180,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(circle at 50% 26%, #000, transparent 55%); mask:radial-gradient(circle at 50% 26%, #000, transparent 55%)}

/* Sections */
.section{position:relative; padding-block:clamp(5rem,9vw,8rem); overflow:hidden}
.section-head{text-align:center; max-width:780px; margin:0 auto 3rem; position:relative; z-index:1}
.section-head h2{font-size:clamp(1.9rem,3.5vw,2.6rem); margin:.4em 0 .3em; letter-spacing:-.01em}
.section-head .eyebrow{justify-content:center}
.lead{font-size:1.05rem; color:var(--text-muted); max-width:60ch; margin:.6em auto 0; line-height:1.65}

/* Floating orbs (ambient coloured light) */
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.42; z-index:0; pointer-events:none}
.orb-1{width:420px; height:420px; background:radial-gradient(circle,rgba(59,130,246,.7),transparent 70%); top:-120px; right:-90px; animation:floaty 10s ease-in-out infinite}
.orb-2{width:480px; height:480px; background:radial-gradient(circle,rgba(34,211,238,.55),transparent 70%); bottom:-150px; left:-120px; animation:floaty 13s ease-in-out infinite}

/* Mission feature cards */
.feature-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:20px; position:relative; z-index:1}
.feature{padding:1.75rem; transition:transform .2s ease, border-color .2s}
.feature:hover{transform:translateY(-2px); border-color:var(--border-strong)}
.feature-ic{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-size:1.1rem; color:var(--accent); background:rgba(59,130,246,0.10); margin-bottom:1.1rem}
.feature h3{font-size:1.05rem; margin-bottom:.5em}
.feature p{color:var(--text-muted); margin:0; font-size:.95rem; line-height:1.65}

/* Big stats band */
.bigstat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,1fr)); gap:20px; position:relative; z-index:1}
.bigstat{position:relative; padding:1.75rem; text-align:center; overflow:hidden; transition:transform .2s ease, border-color .2s}
.bigstat:hover{transform:translateY(-2px); border-color:var(--border-strong)}
.bigstat-ic{position:absolute; right:-6px; top:-4px; font-size:3.4rem; color:rgba(255,255,255,.05)}
.bigstat-num{display:block; font-size:2.2rem; font-weight:600; color:var(--text); line-height:1}
.bigstat-num small{font-size:1rem; color:var(--text-dim); font-weight:400}
.bigstat-lbl{color:var(--text-muted); font-size:.92rem; margin-top:6px; display:block}

/* Results map */
.map-layout{display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:stretch; position:relative; z-index:1}
.map-canvas{padding:22px; position:relative; display:flex; flex-direction:column}
.uz-map.results{background:radial-gradient(120% 120% at 50% 35%, rgba(45,125,255,.10), rgba(34,224,200,.03) 55%, transparent); min-height:320px; flex:1; display:grid; place-items:center; border-radius:var(--radius-sm)}
.uz-map.results svg{width:100%; height:auto; display:block; overflow:visible}
.uz-map.results .result-region{transition:fill .25s, stroke .2s, filter .2s; outline:none}
.uz-map.results .result-region:hover,.uz-map.results .result-region.hover,.uz-map.results .result-region:focus-visible{stroke:#fff !important; stroke-width:1.3 !important; filter:drop-shadow(0 0 6px rgba(34,211,238,.5))}
.map-legend{display:flex; align-items:center; gap:10px; justify-content:center; margin-top:14px; font-size:.78rem; color:var(--text-dim)}
.legend-bar{width:150px; height:8px; border-radius:999px; background:linear-gradient(90deg, rgba(120,150,200,.15), var(--primary), var(--accent))}

.region-panel{padding:28px 26px; display:flex; flex-direction:column}
.rp-eyebrow{font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; color:var(--accent-cyan); font-weight:600}
#rp-name{font-size:1.5rem; margin:.25em 0 0; line-height:1.2}
.rp-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0}
.rp-metric{text-align:center; padding:16px 8px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--glass-brd)}
.rp-val{display:block; font-size:1.5rem; font-weight:600; color:var(--text); line-height:1}
.rp-lbl{font-size:.72rem; color:var(--text-muted); margin-top:5px; display:block}
.rp-bar-wrap{margin-top:auto}
.rp-bar-label{display:flex; justify-content:space-between; font-size:.82rem; color:var(--text-muted); margin-bottom:8px}
.rp-bar{height:8px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden}
.rp-bar-fill{height:100%; border-radius:999px; background:var(--primary); transition:width .6s var(--ease)}
.rp-hint{font-size:.8rem; color:var(--text-dim); margin:18px 0 0; text-align:center}

/* Charts */
.charts-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; position:relative; z-index:1}
.chart-card{padding:1.75rem}
.chart-card h3{font-size:1.05rem; font-weight:600; margin-bottom:1.25rem; display:flex; gap:.5em; align-items:center; color:var(--text)}
.chart-card h3 i{color:var(--accent); font-size:.9em}
.chart-card.span-2{grid-column:span 2}
.chart-card canvas{max-height:300px}

/* CTA */
.cta-card{position:relative; text-align:center; padding:clamp(2.5rem,7vw,4.5rem) 30px; overflow:hidden}
.cta-glow{position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(59,130,246,.12), transparent 62%); z-index:0}
.cta-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; pointer-events:none}
.cta-card > *{position:relative; z-index:1}
/* Keep the decor layers out of flow (the rule above would otherwise force them
   position:relative and the canvas would take layout height, leaving a big gap). */
.cta-card > .cta-canvas,.cta-card > .cta-glow{position:absolute; z-index:0}
.cta-card h2{font-size:clamp(1.9rem,3.5vw,2.6rem); margin-bottom:.3em}

/* ============================================================
   SURVEY PAGE (standalone)
   ============================================================ */
.survey-page{position:relative; padding-block:88px 100px; min-height:100vh}
.survey-aurora{position:fixed; inset:0; z-index:-1;
  background:radial-gradient(720px 520px at 80% 0%, rgba(59,130,246,.08), transparent 60%), radial-gradient(620px 520px at 0% 28%, rgba(34,211,238,.05), transparent 55%)}
.survey-back-link{display:inline-flex; gap:.5em; align-items:center; color:var(--text-muted); font-size:.9rem; margin-bottom:22px}
.survey-back-link:hover{color:var(--accent); text-decoration:none}
.survey-intro{text-align:center; max-width:720px; margin:0 auto 44px}
.survey-intro h1{font-size:clamp(2rem,5.2vw,3.2rem); margin:.35em 0 .3em}
#survey-form{max-width:840px; margin-inline:auto}

@media(max-width:900px){
  .map-layout{grid-template-columns:1fr}
  .charts-grid{grid-template-columns:1fr}
  .chart-card.span-2{grid-column:span 1}
  /* Collapse menu to just the CTA; brand stays on the left. */
  .top-nav-links{gap:0}
  .top-nav-links a:not(.nav-cta){display:none}
}
@media(max-width:600px){
  .bigstat-num{font-size:2.3rem}
  .rp-metrics{grid-template-columns:repeat(3,1fr)}
  .rp-val{font-size:1.2rem}
  /* Tighter nav on phones; smaller logo + CTA so nothing overflows. */
  .top-nav{padding:10px 0}
  .top-nav.scrolled{padding:8px 0}
  .brand svg{width:30px; height:30px}
  .nav-cta{padding:.55rem 1rem; font-size:.88rem}
}

/* ============================================================
   DATA STORY (v3) — chart context, region analysis, rich panel
   ============================================================ */
.bigstat-num small{color:var(--text-muted); font-weight:400; margin-left:.1em}

/* Chart cards as equal-height flex with header + insight + body */
.charts-grid{align-items:stretch}
.chart-card{display:flex; flex-direction:column; padding:2rem}
.chart-head{margin-bottom:1.25rem}
.chart-head h3{margin-bottom:.35rem}
.chart-insight{font-size:.88rem; color:var(--text-muted); margin:0; line-height:1.5}
.chart-body{position:relative; flex:1; min-height:220px}
.chart-body.tall{min-height:300px}
.chart-body.xtall{min-height:360px}
.chart-body canvas{position:absolute; inset:0; width:100% !important; height:100% !important}

/* Highlight KPI cards */
.highlight-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:30px; position:relative; z-index:1}
.highlight-card{display:flex; flex-direction:column; padding:1.5rem; transition:transform .2s ease, border-color .2s}
.highlight-card:hover{transform:translateY(-2px); border-color:var(--border-strong)}
.hl-ic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-size:1rem; color:var(--accent); background:rgba(59,130,246,0.10); margin-bottom:14px}
.hl-lbl{font-size:.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em}
.hl-name{font-size:1.12rem; font-weight:600; color:var(--text); margin-top:8px; line-height:1.25}
.hl-val{font-size:.9rem; color:var(--accent); font-weight:500; margin-top:4px}

/* Numbered "most active" rank list */
.rank-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.rank-item{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--bg-elev-2); border:1px solid var(--border)}
.rank-pos{flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-weight:600; font-size:.9rem; color:var(--text-muted); background:rgba(255,255,255,.04)}
.rank-pos.rank-1{background:rgba(34,211,238,.16); color:var(--accent)}
.rank-pos.rank-2{background:rgba(59,130,246,.16); color:#7fb0ff}
.rank-pos.rank-3{background:rgba(99,102,241,.16); color:#a5a8ff}
.rank-name{flex:1; font-size:.95rem; color:var(--text)}
.rank-count{font-weight:600; color:var(--text); font-variant-numeric:tabular-nums}

/* Enriched region panel */
.rp-val small{font-size:.7em; color:var(--text-muted); font-weight:500}
.rp-compare{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-radius:var(--radius-sm); background:var(--bg-elev-2); border:1px solid var(--border); margin-bottom:20px}
.rp-compare-lbl{font-size:.82rem; color:var(--text-muted)}
.rp-compare-val{font-weight:600; font-size:.95rem; color:var(--text-muted)}
.rp-compare-val.up{color:#4ade80}
.rp-compare-val.down{color:#fb7185}
.rp-bar-wrap{display:flex; flex-direction:column; gap:16px; margin-top:auto}
.rp-bar-block{display:flex; flex-direction:column; gap:8px}
.rp-bar-label i{color:var(--text-dim); margin-right:.3em}
.rp-bar-fill.alt{background:var(--accent)}

@media(max-width:900px){ .highlight-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .highlight-grid{grid-template-columns:1fr} }

/* ============================================================
   AMBIENT SECTION DECOR (v4)
   Theme: "youth voice / data platform" — connected nodes, rising
   particles, subtle grids, wireframe shapes. Everything here is
   decorative: pointer-events:none, sits below content (z-index:0),
   opacity kept in the 0.04–0.2 range so content always leads.
   ============================================================ */
.sec-decor{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.sec-decor *{pointer-events:none}
/* Content inside sections must always sit above the decor layer. */
.mission .container,.stats-band .container,.map-section .container,
.charts-section .container,.regions-analysis .container,.cta-section .container{position:relative; z-index:1}

/* Extra soft ambient orb variant (paired with .orb) */
.orb-soft{position:absolute; border-radius:50%; filter:blur(110px); opacity:.16; z-index:0; pointer-events:none}
.orb-a{width:300px; height:300px; background:radial-gradient(circle,rgba(59,130,246,.5),transparent 70%); top:8%; left:-110px; animation:floatOrb 18s ease-in-out infinite}
.orb-b{width:340px; height:340px; background:radial-gradient(circle,rgba(34,211,238,.4),transparent 70%); bottom:-120px; right:-100px; animation:floatOrb 22s ease-in-out infinite reverse}

/* ---- Connected-node network (SVG) ---- */
.net-svg{position:absolute; width:min(640px,60%); height:auto; opacity:.5}
.net-svg.net-tl{top:-2%; left:-4%}
.net-svg.net-br{bottom:-4%; right:-3%; transform:scaleX(-1)}
.net-line{fill:none; stroke:var(--primary); stroke-width:1; opacity:.18;
  stroke-dasharray:5 9; animation:dashflow 4.5s linear infinite}
.net-line.accent{stroke:var(--accent); opacity:.22}
.net-node{fill:var(--accent); animation:netpulse 4s ease-in-out infinite}
.net-node.p{fill:var(--primary)}

/* ---- Dotted-grid corner accent ---- */
.dots-accent{position:absolute; width:160px; height:120px; opacity:.5;
  background-image:radial-gradient(rgba(120,180,255,.4) 1.3px, transparent 1.4px);
  background-size:18px 18px;
  -webkit-mask:linear-gradient(135deg,#000,transparent 75%); mask:linear-gradient(135deg,#000,transparent 75%)}
.dots-tl{top:24px; left:24px}
.dots-br{bottom:24px; right:24px; transform:rotate(180deg)}

/* ---- Plus-sign micro grid (header accent) ---- */
.plus-accent{position:absolute; width:130px; height:90px; opacity:.4;
  background-image:
    linear-gradient(var(--accent) 1.4px, transparent 1.4px),
    linear-gradient(90deg,var(--accent) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask:radial-gradient(circle,#000 1.6px,transparent 2px) 0 0/26px 26px;
  mask:radial-gradient(circle,#000 1.6px,transparent 2px) 0 0/26px 26px}

/* ---- Floating wireframe geometric shapes ---- */
.float-shape{position:absolute; opacity:.16; will-change:transform}
.fs-triangle{width:0; height:0; border-left:24px solid transparent; border-right:24px solid transparent;
  border-bottom:42px solid rgba(34,211,238,.4); animation:floatRot 26s linear infinite}
.fs-ring{width:60px; height:60px; border:1.5px solid rgba(34,211,238,.5); border-radius:50%; animation:floatY 14s ease-in-out infinite}
.fs-square{width:46px; height:46px; border:1.5px solid rgba(59,130,246,.5); border-radius:8px; animation:floatRot 30s linear infinite}
.fs-hex{width:54px; height:54px; border:1.5px solid rgba(99,102,241,.5);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); animation:floatRot 34s linear infinite}

/* ---- Results: horizontal data-flow lines with travelling packets ---- */
.flow-deco{position:absolute; inset:0; opacity:.55}
.flow-row{position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(120,180,255,.16),transparent)}
.flow-row .packet{position:absolute; top:-2px; left:0; width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px 2px rgba(34,211,238,.55);
  animation:packetmove linear infinite}
.flow-row:nth-child(1){top:18%} .flow-row:nth-child(1) .packet{animation-duration:9s}
.flow-row:nth-child(2){top:38%} .flow-row:nth-child(2) .packet{animation-duration:13s; animation-delay:-4s; background:var(--primary); box-shadow:0 0 8px 2px rgba(59,130,246,.5)}
.flow-row:nth-child(3){top:58%} .flow-row:nth-child(3) .packet{animation-duration:11s; animation-delay:-7s}
.flow-row:nth-child(4){top:78%} .flow-row:nth-child(4) .packet{animation-duration:15s; animation-delay:-2s; background:var(--primary); box-shadow:0 0 8px 2px rgba(59,130,246,.5)}

/* ---- Map: radar ping + faint dot grid ---- */
.map-decor .dot-grid{position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(120,180,255,.18) 1px, transparent 1.4px);
  background-size:30px 30px;
  -webkit-mask:radial-gradient(circle at 30% 60%, #000, transparent 70%); mask:radial-gradient(circle at 30% 60%, #000, transparent 70%)}
.radar{position:absolute; top:30%; left:22%; width:10px; height:10px}
.radar i{position:absolute; inset:0; margin:auto; width:140px; height:140px;
  border:1.5px solid rgba(34,211,238,.5); border-radius:50%; opacity:0; transform:scale(.2);
  animation:radarping 4.2s ease-out infinite}
.radar i:nth-child(2){animation-delay:1.4s} .radar i:nth-child(3){animation-delay:2.8s}
.radar .core{position:absolute; inset:0; margin:auto; width:7px; height:7px; border:0; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px 3px rgba(34,211,238,.6); animation:netpulse 3s ease-in-out infinite; transform:none}

/* ---- Charts: very faint animated grid backdrop ---- */
.charts-grid-bg{position:absolute; inset:0; opacity:1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px,60px 60px;
  -webkit-mask:radial-gradient(circle at 50% 50%, #000, transparent 85%); mask:radial-gradient(circle at 50% 50%, #000, transparent 85%);
  animation:gridDrift 28s linear infinite}

/* ---- Reusable section 3D-figure canvas ---- */
.sec-canvas{position:absolute; top:0; bottom:0; width:60%; height:100%; z-index:0; opacity:.7; pointer-events:none}
.sec-canvas.pos-right{right:0; -webkit-mask:linear-gradient(90deg,transparent,#000 60%); mask:linear-gradient(90deg,transparent,#000 60%)}
.sec-canvas.pos-left{left:0; -webkit-mask:linear-gradient(-90deg,transparent,#000 60%); mask:linear-gradient(-90deg,transparent,#000 60%)}

/* ============================================================
   FULL-PAGE AURORA — colour depth behind every section
   (only rendered on the landing page, which is where it lives)
   ============================================================ */
.page-aurora{position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none}
/* Full-page Three.js wave-field — fills the fixed aurora layer */
.bg-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.95; pointer-events:none}
/* Bright drifting colour orbs — the page "breathes" */
.aura{position:absolute; border-radius:50%; filter:blur(100px); opacity:.55; will-change:transform; mix-blend-mode:screen}
.aura-1{width:640px; height:640px; top:-180px; left:-120px;
  background:radial-gradient(circle,rgba(59,130,246,.85),transparent 66%); animation:auraDrift 22s ease-in-out infinite}
.aura-2{width:560px; height:560px; top:24vh; right:-160px;
  background:radial-gradient(circle,rgba(34,211,238,.8),transparent 66%); animation:auraDrift 28s ease-in-out infinite reverse}
.aura-3{width:680px; height:680px; bottom:-200px; left:8vw;
  background:radial-gradient(circle,rgba(139,92,246,.7),transparent 66%); animation:auraDrift 32s ease-in-out infinite}
.aura-4{width:520px; height:520px; top:52%; left:44%;
  background:radial-gradient(circle,rgba(34,211,238,.55),transparent 66%); animation:auraDrift 25s ease-in-out infinite reverse}
.aura-5{width:560px; height:560px; top:6vh; left:46%;
  background:radial-gradient(circle,rgba(139,92,246,.6),transparent 66%); animation:auraDrift 36s ease-in-out infinite}
/* faint global dot-grid texture so the dark areas never read as flat black */
.aura-grid{position:absolute; inset:0; opacity:.6;
  background-image:radial-gradient(rgba(120,180,255,.09) 1px, transparent 1.4px);
  background-size:26px 26px}

/* ---- Floating glowing geometric shapes (fixed, full-page edges) ---- */
.float-field{position:absolute; inset:0; pointer-events:none}
.fl{position:absolute; pointer-events:none; will-change:transform}
.fl.glow{filter:drop-shadow(0 0 12px rgba(34,211,238,.7))}
.fl-ring{width:78px; height:78px; border:2px solid rgba(34,211,238,.65); border-radius:50%; animation:floatA 16s ease-in-out infinite}
.fl-hex{width:74px; height:74px; border:2px solid rgba(59,130,246,.65);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); animation:floatB 20s linear infinite}
.fl-tri{width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent;
  border-bottom:52px solid rgba(139,92,246,.6); animation:floatC 18s linear infinite}
.fl-square{width:60px; height:60px; border:2px solid rgba(34,211,238,.6); border-radius:10px; animation:floatB 22s linear infinite}
.fl-dot{width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.95),rgba(59,130,246,.2) 70%); animation:floatA 12s ease-in-out infinite}

/* ---- Section colour separators (no section stays pure black) ---- */
[data-page="landing"] .section{
  background:linear-gradient(180deg, rgba(59,130,246,.04), transparent 18%, transparent 82%, rgba(34,211,238,.04));
}
[data-page="landing"] .stats-band{background:linear-gradient(180deg, rgba(34,211,238,.05), rgba(59,130,246,.03) 60%, transparent)}
[data-page="landing"] .cta-section{background:radial-gradient(60% 100% at 50% 100%, rgba(59,130,246,.10), transparent 70%)}

/* ---- Glassmorphism cards (landing only) — frosted glass over the bright bg ---- */
[data-page="landing"] .container{max-width:1200px}
[data-page="landing"] .glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(13,18,38,.55);
  border:1px solid rgba(255,255,255,.10); border-radius:16px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
[data-page="landing"] .feature:hover,[data-page="landing"] .bigstat:hover,[data-page="landing"] .highlight-card:hover,[data-page="landing"] .chart-card:hover{
  transform:translateY(-4px); border-color:rgba(34,211,238,.5);
  box-shadow:0 28px 64px -26px rgba(34,211,238,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Brand-tinted icon chips pop a little more */
[data-page="landing"] .feature-ic,[data-page="landing"] .hl-ic{
  background:var(--grad-soft); color:var(--accent); box-shadow:inset 0 0 0 1px rgba(34,211,238,.25);
}

/* ---- Lively bigstat cards (#results) ---- */
[data-page="landing"] .bigstat{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(13,18,38,.55);
  border:1px solid transparent; border-radius:16px; overflow:hidden;
}
[data-page="landing"] .bigstat::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(59,130,246,.8), rgba(34,211,238,.55) 55%, rgba(99,102,241,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.65; pointer-events:none; transition:opacity .25s}
/* glowing accent bar that sweeps across the top */
[data-page="landing"] .bigstat::after{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), var(--primary), transparent);
  opacity:.55; transition:opacity .25s}
[data-page="landing"] .bigstat:hover{transform:translateY(-4px);
  box-shadow:0 26px 60px -28px rgba(34,211,238,.45), inset 0 1px 0 rgba(255,255,255,.06)}
[data-page="landing"] .bigstat:hover::before{opacity:1}
[data-page="landing"] .bigstat:hover::after{opacity:1}
[data-page="landing"] .bigstat-num{font-weight:700; font-size:2.5rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
[data-page="landing"] .bigstat-num small{-webkit-text-fill-color:var(--text-muted); color:var(--text-muted)}

/* ---- Brighter, larger floating wireframe shapes (more visible 3D accents) ---- */
.float-shape{opacity:.6; filter:drop-shadow(0 0 12px rgba(34,211,238,.55))}
.fs-ring{width:90px; height:90px; border-width:2px; border-color:rgba(34,211,238,.75)}
.fs-square{width:66px; height:66px; border-width:2px; border-color:rgba(59,130,246,.75)}
.fs-hex{width:80px; height:80px; border-width:2px; border-color:rgba(139,92,246,.7)}
.fs-triangle{border-left-width:34px; border-right-width:34px; border-bottom-width:60px; border-bottom-color:rgba(34,211,238,.6)}
.orb-soft{opacity:.5}

/* ---- Responsive / performance trims ---- */
@media(max-width:768px){
  /* Lighten the DOM on small screens, but keep the bright gradient bg alive. */
  .net-svg,.flow-deco,.radar,.charts-grid-bg,.float-shape,.dots-accent,.plus-accent,.sec-canvas{display:none}
  #cta-canvas{display:none}
  /* Thin out the floating-shape field — keep a few, drop the rest. */
  .fl:nth-child(n+6){display:none}
  .orb-soft{opacity:.4}
  .aura{filter:blur(80px); opacity:.5}
}
@media (prefers-reduced-motion: reduce){
  .net-line,.net-node,.packet,.radar i,.radar .core,.float-shape,.charts-grid-bg,
  .orb-soft,.orb,.aura,.fl{animation:none!important}
  .radar i{display:none}
  .packet{display:none}
}