:root{
  --cyan:#00e5ff;
  --magenta:#ff2fd4;
  --violet:#a855ff;
  --green:#3aff9a;
  --neon-green:#39FF7A;
  --orange:#ffb63a;
  --neon-orange:#ff7a1a;
  --yellow:#fff03a;
}

/* ---------- Neon animation keyframes ---------- */
@keyframes neonShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes dividerFlow{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}
/* warm neon shift for orange/yellow/green accents */
@keyframes warmShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@media (prefers-reduced-motion:reduce){
  .btn-gradient,.news-btn,.neon-divider::before,.btn-warm,.eyebrow-warm,.eyebrow-purpleblue{ animation:none !important; }
}

*{ -webkit-font-smoothing:antialiased; }
/* J. Global ambient color tint — subtle full-page purple->blue gradient */
html{ background:#0a0518; }
body{
  overflow-x:hidden; max-width:100%;
  background:
    radial-gradient(120% 60% at 80% -5%, rgba(168,85,255,.10), transparent 60%),
    radial-gradient(100% 55% at 0% 105%, rgba(0,229,255,.07), transparent 60%),
    linear-gradient(180deg,#0a0518 0%,#080421 30%,#05071a 70%,#050b18 100%);
  background-attachment:fixed;
}
/* 9. Fixed neon beams at page edges (stay put while scrolling) */
body::before,body::after{
  content:""; position:fixed; z-index:0; pointer-events:none;
  width:70vw; height:70vh; border-radius:50%; filter:blur(120px); opacity:.15;
}
body::before{ top:-20vh; right:-15vw; background:radial-gradient(circle,var(--orange),transparent 65%); }
body::after{ bottom:-20vh; left:-15vw; background:radial-gradient(circle,var(--green),transparent 65%); }
@media (max-width:640px){
  body::before,body::after{ filter:blur(90px); opacity:.12; width:90vw; height:50vh; }
}

/* ---------- Gradient text ---------- */
/* Warm-forward flowing headline gradient. Orange/green/yellow now own the
   sweep, with only a cyan kiss at the start and a magenta kiss at the tail so
   the words visibly fade green -> yellow -> orange as the animation drifts. */
.gradient-text{
  background:linear-gradient(100deg,
    #ff5c00 0%, #ff7a1a 20%, #ff9d2e 40%, #ffb63a 58%, #ffd76a 78%, #00e5ff 100%);
  background-size:320% 100%;
  animation:warmShift 4s ease-in-out infinite;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* Warm-only gradient text variant: pure green -> yellow -> orange fade. */
.gradient-warm{
  background:linear-gradient(100deg,
    #3aff9a 0%, #9dff4a 28%, #fff03a 55%, #ffcf3a 78%, #ffb63a 100%);
  background-size:300% 100%;
  animation:warmShift 3.5s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

/* Per-word two-tone "fade into another color" treatments. Use on individual
   headline words so one word fades green->yellow, the next yellow->orange,
   etc. Each is animated so the fade point drifts subtly. */
.fade-green-yellow{
  background:linear-gradient(100deg,#3aff9a 0%,#c6ff3a 35%,#fff03a 60%,#3aff9a 100%);
  background-size:300% 100%; animation:warmShift 3.5s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.fade-yellow-orange{
  background:linear-gradient(100deg,#fff03a 0%,#ffcf3a 35%,#ffb63a 60%,#fff03a 100%);
  background-size:300% 100%; animation:warmShift 3.5s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.fade-green-orange{
  background:linear-gradient(100deg,#3aff9a 0%,#fff03a 35%,#ffb63a 65%,#3aff9a 100%);
  background-size:300% 100%; animation:warmShift 3.5s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.fade-orange-magenta{
  background:linear-gradient(100deg,#ffb63a 0%,#ff9124 35%,#ff5c00 65%,#ffb63a 100%);
  background-size:300% 100%; animation:warmShift 3.5s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

/* ---------- Logo ---------- */
.logo-lockup{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:.1rem;
  line-height:1;
}
.logo-car{
  height:98px; width:auto; display:block;
  filter:saturate(1.3) contrast(1.14) brightness(1.06)
    drop-shadow(0 0 .8px #4dff8c) drop-shadow(0 0 .8px #4dff8c) drop-shadow(0 0 1.4px rgba(57,255,122,.95))
    drop-shadow(0 0 10px rgba(57,255,122,.7)) drop-shadow(0 0 24px rgba(57,255,122,.45));
}
.logo-word{
  display:flex; flex-direction:column; line-height:.82;
  font-family:"Barlow Condensed",sans-serif; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
}
.logo-w1{ font-size:1.35rem; color:var(--neon-green); text-shadow:0 0 8px rgba(57,255,122,.45); }
.logo-w2{ font-size:1.35rem; color:var(--neon-green); text-shadow:0 0 12px rgba(57,255,122,.6), 0 0 4px rgba(57,255,122,.75); }

/* ---------- Nav ---------- */
/* base bar: always legible over the hero photo, denser once scrolled */
#nav{
  background:linear-gradient(180deg,rgba(5,6,15,.90) 0%,rgba(5,6,15,.66) 70%,rgba(5,6,15,0) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#nav.scrolled{
  background:rgba(5,6,15,.90);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
}
.nav-row{ height:108px; }
#nav.scrolled .nav-row{ height:84px; }
#nav.scrolled .logo-car{ height:72px; }
.nav-row, .logo-car{ transition:height .3s ease; }

/* link row: single line, even rhythm, never wraps */
.nav-links{
  gap:clamp(.9rem,1.55vw,1.75rem);
  font-size:12.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap;
}
.navlink{
  position:relative; white-space:nowrap; padding:.35rem 0;
  color:#cbd5e1; -webkit-text-fill-color:currentColor;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
  transition:color .2s, text-shadow .2s;
}
.navlink:hover{ color:#fff; text-shadow:0 0 12px rgba(0,229,255,.55); }
.navlink.is-active{
  background:linear-gradient(100deg,#3aff9a 0%,#00e5ff 45%,#a855ff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:none;
  animation:navFade 7s ease-in-out infinite;
}
.navlink::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:linear-gradient(100deg,#3aff9a,#00e5ff,#a855ff,#ff2fd4);
  box-shadow:0 0 8px rgba(168,85,255,.75); transition:width .25s ease;
}
.navlink:hover::after,.navlink.is-active::after{ width:100%; }
.mob-link{
  padding:.7rem .25rem; border-bottom:1px solid rgba(255,255,255,.06);
  color:#cbd5e1; transition:color .2s, padding-left .2s;
}
.mob-link:hover,.mob-link:active{ color:#fff; padding-left:.6rem; }
@keyframes navFade{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

/* ---------- Buttons ---------- */
.btn-gradient{
  display:inline-block; padding:.6rem 1.35rem; border-radius:10px;
  font-weight:700; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:#fff;
  /* animated shifting neon gradient (cyan -> purple -> magenta -> cyan) */
  background:linear-gradient(100deg,#00e5ff,#a855ff 30%,#ff2fd4 55%,#a855ff 78%,#00e5ff);
  background-size:280% 100%;
  animation:neonShift 6s ease-in-out infinite;
  box-shadow:0 4px 20px -4px rgba(255,47,212,.6),0 2px 14px -2px rgba(0,229,255,.45);
  transition:transform .2s, box-shadow .2s; white-space:nowrap;
}
.btn-gradient:hover{ transform:translateY(-2px); box-shadow:0 8px 34px -4px rgba(255,47,212,.7),0 4px 20px -2px rgba(0,229,255,.5); }
/* warm neon button: green -> yellow -> orange (dark text for contrast) */
.btn-warm{
  display:inline-block; padding:.6rem 1.35rem; border-radius:10px;
  font-weight:800; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:#12100a;
  background:linear-gradient(100deg,#3aff9a,#fff03a 35%,#ffb63a 60%,#fff03a 80%,#3aff9a);
  background-size:280% 100%;
  animation:warmShift 6s ease-in-out infinite;
  box-shadow:0 4px 20px -4px rgba(255,182,58,.6),0 2px 14px -2px rgba(58,255,154,.45);
  transition:transform .2s, box-shadow .2s; white-space:nowrap;
}
.btn-warm:hover{ transform:translateY(-2px); box-shadow:0 8px 34px -4px rgba(255,182,58,.75),0 4px 20px -2px rgba(58,255,154,.55); }
.btn-outline{
  display:inline-block; padding:.6rem 1.35rem; border-radius:10px;
  font-weight:700; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:#e2e8f0;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.02);
  transition:border-color .2s, color .2s, background .2s; white-space:nowrap;
}
.btn-outline:hover{ border-color:var(--yellow); color:#fff; background:rgba(255,240,58,.06); }
.btn-lg{ padding:.85rem 1.7rem; font-size:.82rem; border-radius:12px; }
/* compact header variants so the CTA pair never crowds the links */
.btn-nav{ padding:.55rem 1.05rem; font-size:.72rem; letter-spacing:.1em; border-radius:9px; }
.glow-strong{ box-shadow:0 0 32px -4px rgba(255,47,212,.6),0 0 22px -6px rgba(0,229,255,.5); }

/* ---------- Hero ---------- */
/* base hero photo: boost saturation & contrast so neon reads */
.hero-img{ filter:saturate(1.5) contrast(1.12) brightness(1.02); }
.hero-overlay{
  background:linear-gradient(100deg,#0a0518 14%,rgba(10,5,24,.82) 40%,rgba(10,5,24,.20) 66%,rgba(10,5,24,.45) 100%);
}
/* 10. force pink/purple onto buildings & scene regardless of source colors */
.hero-tint{
  background:linear-gradient(120deg,rgba(255,182,58,.30) 0%,rgba(58,255,154,.24) 38%,rgba(0,229,255,.22) 70%,rgba(255,47,212,.28) 100%);
  mix-blend-mode:color; pointer-events:none;
}
/* neon punch-up on the car photo (color-dodge for real glow) */
.hero-neon{
  background:
    radial-gradient(60% 55% at 78% 36%,rgba(255,47,212,.50),transparent 68%),
    radial-gradient(62% 66% at 58% 84%,rgba(0,229,255,.44),transparent 72%),
    radial-gradient(46% 46% at 90% 78%,rgba(255,182,58,.42),transparent 70%),
    radial-gradient(42% 44% at 30% 66%,rgba(58,255,154,.36),transparent 72%),
    radial-gradient(34% 34% at 20% 22%,rgba(255,240,58,.30),transparent 70%);
  mix-blend-mode:screen; pointer-events:none;
}
/* B. big blurred neon blobs faking city reflections behind the car */
.hero-blob{ position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:1; }
.hero-blob-mag{ width:480px; height:480px; right:6%; top:18%; background:radial-gradient(circle,rgba(255,182,58,.52),transparent 68%); }
.hero-blob-cyan{ width:440px; height:440px; left:10%; bottom:-8%; background:radial-gradient(circle,rgba(58,255,154,.48),transparent 68%); }
@media (max-width:640px){
  .hero-blob{ filter:blur(60px); }
  .hero-blob-mag{ width:300px; height:300px; }
  .hero-blob-cyan{ width:280px; height:280px; }
}
.check{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;
  background:rgba(0,229,255,.12); border:1px solid rgba(0,229,255,.5);
  position:relative;
}
.check::after{
  content:""; position:absolute; left:6px; top:3px; width:5px; height:9px;
  border:solid var(--cyan); border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* chips overlapping panel inside hero */
.hero-chips{ width:100%; }
.chip-panel{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  border-radius:16px; overflow:hidden;
  background:rgba(8,9,22,.72); backdrop-filter:blur(12px);
  border:1px solid transparent;
  background-image:linear-gradient(rgba(8,9,22,.78),rgba(8,9,22,.78)),linear-gradient(120deg,rgba(0,229,255,.6),rgba(168,85,255,.4),rgba(255,47,212,.6));
  background-origin:border-box; background-clip:padding-box,border-box;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9),0 0 26px -10px rgba(0,229,255,.4);
}
.chip{
  padding:1rem .95rem; text-align:center; position:relative;
  border-right:1px solid rgba(255,255,255,.08);
  transition:background .25s, box-shadow .25s;
}
.chip:last-child{ border-right:none; }
.chip:hover{ background:rgba(255,255,255,.04); }
.chip-ic{ font-size:1.5rem; display:block; margin-bottom:.5rem; font-weight:800; line-height:1; }
/* C. per-chip neon icon color + glow + top accent */
.chip-cyan .chip-ic{ color:var(--cyan); text-shadow:0 0 12px rgba(0,229,255,.9),0 0 24px rgba(0,229,255,.5); }
.chip-green .chip-ic{ color:var(--green); text-shadow:0 0 12px rgba(58,255,154,.9),0 0 24px rgba(58,255,154,.5); }
.chip-orange .chip-ic{ color:var(--orange); text-shadow:0 0 12px rgba(255,182,58,.9),0 0 24px rgba(255,182,58,.5); }
.chip-mag .chip-ic{ color:var(--neon-orange); text-shadow:0 0 12px rgba(255,122,26,.9),0 0 24px rgba(255,122,26,.5); }
.chip::after{ content:""; position:absolute; left:14%; right:14%; top:0; height:2px; border-radius:2px; opacity:.85; }
.chip-cyan::after{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.chip-green::after{ background:var(--green); box-shadow:0 0 10px var(--green); }
.chip-orange::after{ background:var(--orange); box-shadow:0 0 10px var(--orange); }
.chip-mag::after{ background:var(--magenta); box-shadow:0 0 10px var(--magenta); }
.chip-title{ color:#fff; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; }
.chip-sub{ color:#94a3b8; font-size:.72rem; margin-top:.2rem; line-height:1.25; }
@media (max-width:1023px){
  .chip-panel{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chip:nth-child(2){ border-right:none; }
  .chip:nth-child(1),.chip:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.08); }
}

.feat-row{ display:flex; align-items:center; gap:.85rem; color:#e2e8f0; font-weight:500; }

/* ---------- Glow blobs ---------- */
.glow-blob{ position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(110px); z-index:0; pointer-events:none; }
.glow-cyan{ background:rgba(0,229,255,.20); }
.glow-magenta{ background:rgba(255,47,212,.20); }
.glow-violet{ background:rgba(168,85,255,.20); }
.glow-green{ background:rgba(58,255,154,.18); }
.glow-orange{ background:rgba(255,182,58,.17); }
.glow-yellow{ background:rgba(255,240,58,.14); }
.glow-sm{ width:400px; height:400px; }
@media (max-width:640px){
  .glow-blob{ filter:blur(80px); width:340px; height:340px; }
  /* keep mobile GPU happy: hide the 3rd blob per section on small screens */
  .glow-blob.blob-extra{ display:none; }
}

/* 8. Animated neon section divider strips */
.neon-divider{ position:relative; height:2px; width:100%; overflow:hidden; }
.neon-divider::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--green),var(--yellow),var(--orange),var(--magenta),transparent);
  background-size:200% 100%;
  animation:dividerFlow 8s linear infinite;
  opacity:.75;
}

/* ---------- Kanban ---------- */
.kanban{
  border-radius:16px; overflow:hidden; max-width:100%;
  background:linear-gradient(180deg,#0b0d1f,#070813);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 40px -12px rgba(120,60,255,.25);
}
.kanban-bar{
  display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02);
}
.kanban-logo{ font-family:"Barlow Condensed"; font-weight:800; letter-spacing:.08em; color:#fff; font-size:.85rem; white-space:nowrap; }
.kanban-search{
  flex:1; display:flex; align-items:center; gap:.4rem; color:#64748b; font-size:.72rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:8px; padding:.35rem .7rem; max-width:230px;
}
.kanban-newjob{
  font-size:.68rem; font-weight:800; color:#1a1400; white-space:nowrap;
  background:linear-gradient(100deg,#fff03a,#ffb63a); padding:.35rem .7rem; border-radius:7px;
  box-shadow:0 0 14px -2px rgba(255,240,58,.8);
}
.kanban-cols{ display:flex; gap:.6rem; padding:.8rem; overflow-x:auto; max-width:100%; }
.kcol{ flex:0 0 130px; min-width:130px; }
.kcol-head{
  display:flex; align-items:center; gap:.4rem; font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:#cbd5e1; padding:.35rem .5rem; margin-bottom:.5rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:7px; white-space:nowrap;
}
.dot{ width:7px;height:7px;border-radius:50%; flex:0 0 7px; }
/* 7+I. BOLD saturated-neon column-header pills with drop-shadow glow */
.kcol-head{ font-weight:800; color:#050510; }
.kh-cyan{ border-color:transparent; background:linear-gradient(100deg,#00e5ff,#3ad9ff); box-shadow:0 0 16px -2px rgba(0,229,255,.85); }
.kh-violet{ border-color:transparent; background:linear-gradient(100deg,#a855ff,#c77dff); color:#fff; box-shadow:0 0 16px -2px rgba(168,85,255,.85); }
.kh-magenta{ border-color:transparent; background:linear-gradient(100deg,#ff2fd4,#ff6ae0); color:#fff; box-shadow:0 0 16px -2px rgba(255,47,212,.85); }
.kh-amber{ border-color:transparent; background:linear-gradient(100deg,#ffb63a,#fff03a); box-shadow:0 0 16px -2px rgba(255,182,58,.85); }
.kh-emerald{ border-color:transparent; background:linear-gradient(100deg,#3aff9a,#00e5ac); box-shadow:0 0 16px -2px rgba(58,255,154,.85); }
.kh-slate{ border-color:transparent; background:linear-gradient(100deg,#94a3b8,#cbd5e1); color:#0a0f1a; box-shadow:0 0 12px -2px rgba(148,163,184,.6); }
.kcol-head .dot{ display:none; }
.kjob{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:9px; padding:.55rem .6rem; margin-bottom:.5rem;
  transition:border-color .2s, transform .2s;
}
.kjob:hover{ border-color:rgba(0,229,255,.4); transform:translateY(-2px); }
.kjob-t{ color:#fff; font-size:.72rem; font-weight:600; line-height:1.1; }
.kjob-s{ color:#64748b; font-size:.6rem; margin-top:.1rem; }
.kjob-f{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; }
.av{
  width:22px;height:22px;border-radius:9999px; aspect-ratio:1/1; flex:0 0 22px;
  font-size:.58rem; font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.22);
  box-shadow:0 0 8px -2px rgba(0,229,255,.4);
}
.av1{ background:linear-gradient(135deg,#00e5ff,#0088ff); }
.av2{ background:linear-gradient(135deg,#a855ff,#ff2fd4); }
.av3{ background:linear-gradient(135deg,#ff8a3d,#ff2fd4); }
.av4{ background:linear-gradient(135deg,#22d3ee,#a855ff); }
.av5{ background:linear-gradient(135deg,#34d399,#00e5ff); }
.kjob-tag{ font-size:.55rem; font-weight:700; color:#94a3b8; background:rgba(255,255,255,.05); padding:.1rem .4rem; border-radius:5px; }
.kjob-tag.hot{ color:#ff7a1a; background:rgba(255,122,26,.14); }
.kjob-tag.ok{ color:#34d399; background:rgba(52,211,153,.12); }

/* ---------- Stat cards ---------- */
/* D. distinct punchy neon-glow border per card (2px, strong shadow) */
.stat-card{
  padding:1.5rem 1.2rem; border-radius:16px; text-align:center;
  position:relative; border:2px solid;
  background:linear-gradient(180deg,rgba(12,10,28,.92),rgba(8,7,20,.92));
  transition:transform .25s, box-shadow .25s;
}
.stat-card:hover{ transform:translateY(-4px); }
.stat-card-cyan{ border-color:var(--cyan); box-shadow:0 0 26px -6px rgba(0,229,255,.75),0 0 60px -20px rgba(0,229,255,.5); }
.stat-card-mag{ border-color:var(--magenta); box-shadow:0 0 26px -6px rgba(255,47,212,.75),0 0 60px -20px rgba(255,47,212,.5); }
.stat-card-violet{ border-color:var(--violet); box-shadow:0 0 26px -6px rgba(168,85,255,.75),0 0 60px -20px rgba(168,85,255,.5); }
.stat-card-green{ border-color:var(--green); box-shadow:0 0 26px -6px rgba(58,255,154,.75),0 0 60px -20px rgba(58,255,154,.5); }
.stat-card-orange{ border-color:var(--orange); box-shadow:0 0 26px -6px rgba(255,182,58,.75),0 0 60px -20px rgba(255,182,58,.5); }
.stat-card-green:hover{ box-shadow:0 0 40px -4px rgba(58,255,154,.9),0 0 80px -18px rgba(58,255,154,.6); }
.stat-card-orange:hover{ box-shadow:0 0 40px -4px rgba(255,182,58,.9),0 0 80px -18px rgba(255,182,58,.6); }
.stat-card-cyan:hover{ box-shadow:0 0 40px -4px rgba(0,229,255,.9),0 0 80px -18px rgba(0,229,255,.6); }
.stat-card-mag:hover{ box-shadow:0 0 40px -4px rgba(255,47,212,.9),0 0 80px -18px rgba(255,47,212,.6); }
.stat-card-violet:hover{ box-shadow:0 0 40px -4px rgba(168,85,255,.9),0 0 80px -18px rgba(168,85,255,.6); }
.stat-ic{ font-size:1.9rem; display:block; margin-bottom:.6rem; line-height:1; }
.stat-card-cyan .stat-ic{ filter:drop-shadow(0 0 10px rgba(0,229,255,.9)); }
.stat-card-mag .stat-ic{ filter:drop-shadow(0 0 10px rgba(255,47,212,.9)); }
.stat-card-violet .stat-ic{ filter:drop-shadow(0 0 10px rgba(168,85,255,.9)); }
.stat-card-green .stat-ic{ filter:drop-shadow(0 0 10px rgba(58,255,154,.9)); }
.stat-card-orange .stat-ic{ filter:drop-shadow(0 0 10px rgba(255,182,58,.9)); }
/* solid-hue stat numbers so each card reads its color */
.stat-num-cyan{ color:var(--cyan); text-shadow:0 0 14px rgba(0,229,255,.6); }
.stat-num-mag{ color:var(--neon-orange); text-shadow:0 0 14px rgba(255,122,26,.6); }
.stat-num-violet{ color:var(--violet); text-shadow:0 0 14px rgba(168,85,255,.6); }
.stat-num-green{ color:var(--green); text-shadow:0 0 14px rgba(58,255,154,.6); }
.stat-num-orange{ color:var(--orange); text-shadow:0 0 14px rgba(255,182,58,.6); }
.stat-num{ font-family:"Barlow Condensed"; font-weight:800; font-size:1.9rem; text-transform:uppercase; line-height:1; }
.stat-desc{ color:#94a3b8; font-size:.82rem; margin-top:.6rem; line-height:1.35; }

/* ---------- Feature cards ---------- */
/* 3+H. rainbow-neon row: each card a different hue, colored top stripe + hover glow */
.fcard{
  padding:1.6rem 1.5rem 1.6rem; border-radius:16px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(10,9,24,.95),rgba(7,6,18,.95));
  border:1.5px solid rgba(255,255,255,.06);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.fcard::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; }
.fcard:hover{ transform:translateY(-5px); }
.fcard-ic{ font-size:1.9rem; display:block; margin-bottom:.9rem; line-height:1; }
/* color variants */
.fc-cyan::before{ background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.fc-cyan .fcard-ic{ color:var(--cyan); filter:drop-shadow(0 0 10px rgba(0,229,255,.9)); }
.fc-cyan{ border-color:rgba(0,229,255,.35); }
.fc-cyan:hover{ border-color:var(--cyan); box-shadow:0 18px 50px -18px rgba(0,229,255,.55),0 0 26px -8px rgba(0,229,255,.6); }
.fc-mag::before{ background:var(--neon-orange); box-shadow:0 0 12px var(--neon-orange); }
.fc-mag .fcard-ic{ color:var(--neon-orange); filter:drop-shadow(0 0 10px rgba(255,122,26,.9)); }
.fc-mag{ border-color:rgba(255,122,26,.35); }
.fc-mag:hover{ border-color:var(--neon-orange); box-shadow:0 18px 50px -18px rgba(255,122,26,.55),0 0 26px -8px rgba(255,122,26,.6); }
.fc-violet::before{ background:var(--violet); box-shadow:0 0 12px var(--violet); }
.fc-violet .fcard-ic{ color:var(--violet); filter:drop-shadow(0 0 10px rgba(168,85,255,.9)); }
.fc-violet{ border-color:rgba(168,85,255,.35); }
.fc-violet:hover{ border-color:var(--violet); box-shadow:0 18px 50px -18px rgba(168,85,255,.55),0 0 26px -8px rgba(168,85,255,.6); }
.fc-green::before{ background:var(--green); box-shadow:0 0 12px var(--green); }
.fc-green .fcard-ic{ color:var(--green); filter:drop-shadow(0 0 10px rgba(58,255,154,.9)); }
.fc-green{ border-color:rgba(58,255,154,.35); }
.fc-green:hover{ border-color:var(--green); box-shadow:0 18px 50px -18px rgba(58,255,154,.5),0 0 26px -8px rgba(58,255,154,.55); }
.fc-orange::before{ background:var(--orange); box-shadow:0 0 12px var(--orange); }
.fc-orange .fcard-ic{ color:var(--orange); filter:drop-shadow(0 0 10px rgba(255,182,58,.9)); }
.fc-orange{ border-color:rgba(255,182,58,.35); }
.fc-orange:hover{ border-color:var(--orange); box-shadow:0 18px 50px -18px rgba(255,182,58,.5),0 0 26px -8px rgba(255,182,58,.55); }
.fc-pink::before{ background:#ff5c00; box-shadow:0 0 12px #ff5c00; }
.fc-pink .fcard-ic{ color:#ff5c00; filter:drop-shadow(0 0 10px rgba(255,92,0,.9)); }
.fc-pink{ border-color:rgba(255,92,0,.35); }
.fc-pink:hover{ border-color:#ff5c00; box-shadow:0 18px 50px -18px rgba(255,92,0,.55),0 0 26px -8px rgba(255,92,0,.6); }
.fc-yellow::before{ background:var(--yellow); box-shadow:0 0 12px var(--yellow); }
.fc-yellow .fcard-ic{ color:var(--yellow); filter:drop-shadow(0 0 10px rgba(255,240,58,.9)); }
.fc-yellow{ border-color:rgba(255,240,58,.38); }
.fc-yellow:hover{ border-color:var(--yellow); box-shadow:0 18px 50px -18px rgba(255,240,58,.5),0 0 26px -8px rgba(255,240,58,.55); }
.fcard-t{ color:#fff; font-weight:700; font-size:1.05rem; margin-bottom:.5rem; }
.fcard-d{ color:#94a3b8; font-size:.9rem; line-height:1.5; }

/* ---------- Price card ---------- */
.price-card{
  position:relative; border-radius:22px; padding:2.5rem 2rem; overflow:hidden;
  background:rgba(8,9,22,.75); backdrop-filter:blur(10px);
  border:1px solid transparent;
  background-image:linear-gradient(rgba(8,9,22,.9),rgba(8,9,22,.9)),linear-gradient(140deg,#00e5ff,#a855ff,#ff2fd4);
  background-origin:border-box; background-clip:padding-box,border-box;
  box-shadow:0 30px 90px -30px rgba(255,47,212,.4);
}
.price-glow{ position:absolute; inset:-40% 30% auto; height:60%; background:radial-gradient(circle,rgba(0,229,255,.3),transparent 70%); filter:blur(50px); }

/* ---------- Pricing band ---------- */
#pricing-band{ background:#080421; }
/* F. purple neon overlay over pricing-band supercar */
.pband-overlay{
  background:
    linear-gradient(90deg,rgba(10,5,24,.35) 0%,rgba(10,5,24,.7) 38%,rgba(10,5,24,.94) 60%,#080421 100%),
    radial-gradient(55% 95% at 20% 55%,rgba(168,85,255,.45),transparent 70%),
    radial-gradient(48% 85% at 6% 72%,rgba(255,47,212,.32),transparent 72%),
    radial-gradient(40% 70% at 30% 30%,rgba(0,229,255,.20),transparent 72%);
  mix-blend-mode:screen; pointer-events:none;
}
.pband-img{ filter:saturate(1.4) contrast(1.1); }
.tick{ color:var(--green); font-weight:800; text-shadow:0 0 8px rgba(58,255,154,.6); }
@media (max-width:1023px){
  /* darker scrim on mobile so the price copy stays legible over the light car */
  .pband-overlay{
    background:linear-gradient(180deg,rgba(8,4,20,.78),rgba(8,4,20,.9) 55%,#080421 100%);
    mix-blend-mode:normal;
  }
  /* extra purple glow layer, kept behind text via separate element */
  #pricing-band .reveal{
    background:rgba(6,4,18,.5); border-radius:16px; padding:1.25rem 1.1rem;
    backdrop-filter:blur(2px);
  }
}

/* ---------- FAQ ---------- */
.faq-item{ border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(10,11,26,.5); overflow:hidden; }
.faq-q{
  width:100%; text-align:left; padding:1.1rem 1.3rem; color:#fff; font-weight:600; font-size:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; transition:color .2s;
}
.faq-q:hover{ color:var(--cyan); }
.faq-icn{ font-size:1.4rem; color:var(--cyan); transition:transform .3s, color .3s, text-shadow .3s; flex:0 0 auto; line-height:1; }
.faq-item.open .faq-icn{
  transform:rotate(45deg);
  background:linear-gradient(100deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:none;
}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p{ padding:0 1.3rem 1.2rem; color:#cbd5e1; font-size:.92rem; line-height:1.6; }
/* 4. obvious cyan->magenta gradient border when open */
.faq-item.open{
  border-color:transparent;
  background:linear-gradient(rgba(10,11,26,.85),rgba(10,11,26,.85)) padding-box,
            linear-gradient(100deg,var(--cyan),var(--magenta)) border-box;
  box-shadow:0 0 22px -6px rgba(255,47,212,.5),0 0 22px -8px rgba(0,229,255,.4);
}
.faq-item.open .faq-q{ color:#fff; }

/* ---------- Fields ---------- */
.field{
  width:100%; padding:.85rem 1rem; border-radius:10px; color:#e2e8f0; font-size:.92rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); transition:border-color .2s, box-shadow .2s;
}
.field::placeholder{ color:#64748b; }
.field:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.12); }

/* ---------- Footer ---------- */
.soc{
  width:36px;height:36px;border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:#94a3b8; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02); transition:all .2s;
}
.soc:hover{ color:#fff; border-color:var(--cyan); background:rgba(0,229,255,.08); }
.foot-h{ color:#fff; font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; }
.foot-list{ display:flex; flex-direction:column; gap:.65rem; }
.foot-list a{ color:#94a3b8; font-size:.9rem; transition:color .2s; }
.foot-list a:hover{ color:var(--cyan); }
.news-card{
  padding:1.5rem; border-radius:16px;
  background-image:linear-gradient(#06070f,#06070f),linear-gradient(120deg,#00e5ff,#ff2fd4);
  background-origin:border-box; background-clip:padding-box,border-box; border:1px solid transparent;
  box-shadow:0 0 24px -12px rgba(0,229,255,.35);
}
.news-btn{
  width:44px; flex:0 0 44px; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(100deg,#00e5ff,#a855ff 50%,#ff2fd4,#00e5ff); background-size:280% 100%;
  animation:neonShift 6s ease-in-out infinite; transition:transform .2s;
}
.news-btn:hover{ transform:translateX(2px); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* Bright, bold section eyebrows */
.eyebrow{
  font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  background:linear-gradient(100deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(0,229,255,.35));
}
/* warm eyebrow variant: green -> yellow -> orange */
.eyebrow-warm{
  font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  background:linear-gradient(100deg,var(--green),var(--yellow) 50%,var(--orange));
  background-size:200% 100%; animation:warmShift 9s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,182,58,.4));
}
/* Purple -> blue faded eyebrow (used on the "Built by a shop owner..." line) */
.eyebrow-purpleblue{
  font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  background:linear-gradient(100deg,#a855ff,#7c5cff 50%,#2563ff);
  background-size:200% 100%; animation:purpleBlueShift 9s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(120,90,255,.45));
}
@keyframes purpleBlueShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
/* Readability guard: dark card wrapper for body copy over busy backgrounds */
.copy-card{
  background:rgba(6,5,18,.62); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.06); border-radius:16px;
  padding:1.5rem 1.6rem;
}

/* grid/flex children must be allowed to shrink to avoid overflow */
.grid > *{ min-width:0; }

/* scrollbar for kanban */
.kanban-cols::-webkit-scrollbar{ height:6px; }
.kanban-cols::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:3px; }

/* =====================================================================
   ✦ SEXY UPGRADE LAYER — premium motion, glass, glow (overrides above)
   ===================================================================== */

/* ---- keyframes ---- */
@keyframes auroraDrift{
  0%{ transform:translate3d(-6%,-4%,0) rotate(0deg) scale(1.15); }
  50%{ transform:translate3d(6%,4%,0) rotate(180deg) scale(1.3); }
  100%{ transform:translate3d(-6%,-4%,0) rotate(360deg) scale(1.15); }
}
@keyframes shineSweep{
  0%{ background-position:-160% 0; }
  60%,100%{ background-position:260% 0; }
}
/* moves BOTH layers of .gradient-text: [shine band, color gradient] */
@keyframes textShineColor{
  0%{ background-position:-60% 0, 0% 50%; }
  50%{ background-position:160% 0, 100% 50%; }
  100%{ background-position:260% 0, 0% 50%; }
}
@keyframes glowPulse{
  0%,100%{ filter:saturate(1.3) contrast(1.14) brightness(1.05)
    drop-shadow(0 0 .8px #4dff8c) drop-shadow(0 0 .8px #4dff8c) drop-shadow(0 0 1.4px rgba(57,255,122,.95))
    drop-shadow(0 0 9px rgba(57,255,122,.62)) drop-shadow(0 0 20px rgba(57,255,122,.34)); }
  50%{ filter:saturate(1.38) contrast(1.18) brightness(1.1)
    drop-shadow(0 0 1px #6bff9f) drop-shadow(0 0 1px #4dff8c) drop-shadow(0 0 2px rgba(57,255,122,1))
    drop-shadow(0 0 15px rgba(57,255,122,.85)) drop-shadow(0 0 30px rgba(57,255,122,.55)); }
}
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes borderSpin{ to{ transform:rotate(360deg); } }
@keyframes scrollNudge{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(7px); opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .aurora,.logo-car,.gradient-text,.btn-gradient,.btn-warm,.price-card::before,.scroll-cue span{ animation:none !important; }
  .gradient-text{ background-position:0 0, 100% 50% !important; }
}

/* ---- animated aurora backdrop (adds living color behind everything) ---- */
.aurora{ position:fixed; inset:-30% -20%; z-index:0; pointer-events:none; filter:blur(90px); opacity:.5; mix-blend-mode:screen; }
.aurora::before,.aurora::after{ content:""; position:absolute; inset:0; border-radius:50%; }
.aurora::before{
  background:
    radial-gradient(35% 35% at 25% 30%, rgba(58,255,154,.55), transparent 60%),
    radial-gradient(40% 40% at 78% 22%, rgba(255,182,58,.5), transparent 62%),
    radial-gradient(45% 45% at 60% 78%, rgba(255,47,212,.5), transparent 62%),
    radial-gradient(40% 40% at 15% 80%, rgba(0,229,255,.5), transparent 62%);
  animation:auroraDrift 26s ease-in-out infinite;
}
.aurora::after{
  background:
    radial-gradient(30% 30% at 70% 40%, rgba(255,240,58,.4), transparent 60%),
    radial-gradient(34% 34% at 30% 60%, rgba(168,85,255,.45), transparent 62%);
  animation:auroraDrift 34s ease-in-out infinite reverse;
}
@media (max-width:640px){ .aurora{ opacity:.4; filter:blur(70px); } }
/* keep content above the aurora */
header,section,footer{ position:relative; z-index:1; }

/* ---- headline: gradient with a moving white shine band baked into the fill ---- */
.gradient-text{
  position:relative;
  background-image:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%),
    linear-gradient(100deg,#ff5c00 0%,#ff7a1a 30%,#ff9d2e 55%,#ffb63a 78%,#00e5ff 100%);
  background-size:250% 100%, 220% 100%;
  background-repeat:no-repeat;
  animation:textShineColor 9s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* ---- Hero headline "Christmas-lights" color wave ----
   All three lines get the same animated gradient. Each WORD is an inline-block
   with a staggered animation-delay (--i = word index in reading order) so the
   moving color band + shine chases word-by-word from "Shop" through the last
   word, then loops. Longer total cycle keeps the sweep readable. */
.wave-headline .wave-word{
  display:inline-block;
  background-image:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%),
    linear-gradient(100deg,#ff5c00 0%,#ff7a1a 30%,#ff9d2e 55%,#ffb63a 78%,#00e5ff 100%);
  background-size:250% 100%, 220% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:textShineColor 6s ease-in-out infinite;
  animation-delay:calc(var(--i) * -0.55s);
}
@media (prefers-reduced-motion: reduce){
  .wave-headline .wave-word{ animation:none !important; background-position:0 0, 100% 50% !important; }
}

/* ---- logo: gentle living glow ---- */
.logo-car{ animation:glowPulse 5s ease-in-out infinite; }

/* ---- buttons: glossy sheen sweep on hover ---- */
.btn-gradient,.btn-warm{ position:relative; overflow:hidden; }
.btn-gradient::before,.btn-warm::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-180%) skewX(-18deg); transition:transform .7s ease;
}
.btn-gradient:hover::before,.btn-warm:hover::before{ transform:translateX(320%) skewX(-18deg); }
.btn-lg{ letter-spacing:.14em; }

/* ---- glass sheen + animated conic border on feature cards ---- */
.fcard{ backdrop-filter:blur(8px); }
.fcard::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.10),transparent 38%);
  opacity:.7;
}
.fcard:hover{ transform:translateY(-7px) scale(1.015); }

/* ---- stat cards: inner top sheen + stronger lift ---- */
.stat-card{ backdrop-filter:blur(6px); overflow:hidden; }
.stat-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:45%; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent);
}
.stat-card:hover{ transform:translateY(-6px) scale(1.02); }
.stat-num{ font-size:2.05rem; }

/* ---- hero chips: glass sheen + hover glow ---- */
.chip-panel{ position:relative; overflow:hidden; }
.chip-panel::after{
  content:""; position:absolute; left:0; right:0; top:0; height:40%; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent);
}
.chip{ transition:background .25s, box-shadow .25s, transform .25s; }
.chip:hover{ transform:translateY(-3px); }

/* ---- price card: rotating neon halo + pulse ---- */
.price-card{ isolation:isolate; }
.price-card::before{
  content:""; position:absolute; z-index:-1; inset:-2px; border-radius:24px;
  background:conic-gradient(from 0deg, #00e5ff,#3aff9a,#fff03a,#ffb63a,#ff2fd4,#a855ff,#00e5ff);
  filter:blur(14px); opacity:.55; animation:borderSpin 12s linear infinite;
}
.price-card:hover::before{ opacity:.8; }

/* ---- section dividers: thicker, brighter, soft glow ---- */
.neon-divider{ height:3px; }
.neon-divider::before{
  filter:drop-shadow(0 0 6px rgba(255,47,212,.5)) drop-shadow(0 0 6px rgba(0,229,255,.4));
  opacity:.9;
}

/* ---- nav CTA: subtle breathing glow ---- */
#nav .btn-gradient{ box-shadow:0 4px 20px -4px rgba(255,47,212,.6),0 0 18px -2px rgba(0,229,255,.5); }

/* ---- FAQ: warm hover accent ---- */
.faq-q:hover{ color:var(--yellow); }
.faq-icn{ color:var(--green); }

/* ---- kanban: soft hover glow on whole board ---- */
.kanban{ transition:box-shadow .3s, transform .3s; }
.kanban:hover{ transform:translateY(-3px); box-shadow:0 40px 100px -30px rgba(0,0,0,.9),0 0 60px -14px rgba(255,47,212,.35),0 0 50px -18px rgba(0,229,255,.3); }

/* ---- floating scroll cue in hero ---- */
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#cbd5e1; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; pointer-events:none;
}
.scroll-cue .ring{
  width:26px; height:42px; border-radius:14px; border:1.5px solid rgba(255,255,255,.35);
  display:flex; justify-content:center; padding-top:7px;
  box-shadow:0 0 16px -4px rgba(0,229,255,.5);
}
.scroll-cue span{ width:4px; height:8px; border-radius:2px; background:linear-gradient(var(--cyan),var(--magenta)); animation:scrollNudge 1.8s ease-in-out infinite; }
@media (max-width:640px){ .scroll-cue{ display:none; } }

/* ---------- Products: two-app cards (ShopFlow + Title Track) ---------- */
.prod-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:2rem 1.9rem 2rem; border-radius:20px;
  background:linear-gradient(180deg,rgba(10,9,24,.96),rgba(7,6,18,.96));
  border:1.5px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.prod-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; }
.prod-card:hover{ transform:translateY(-6px); }
.prod-green::before{ background:var(--green); box-shadow:0 0 14px var(--green); }
.prod-green{ border-color:rgba(58,255,154,.32); }
.prod-green:hover{ border-color:var(--green); box-shadow:0 20px 55px -20px rgba(58,255,154,.5),0 0 28px -10px rgba(58,255,154,.55); }
.prod-orange::before{ background:var(--neon-orange); box-shadow:0 0 14px var(--neon-orange); }
.prod-orange{ border-color:rgba(255,122,26,.34); }
.prod-orange:hover{ border-color:var(--neon-orange); box-shadow:0 20px 55px -20px rgba(255,122,26,.55),0 0 28px -10px rgba(255,122,26,.6); }

.prod-badge{
  align-self:flex-start; margin-bottom:1.1rem;
  font-family:"Barlow Condensed",sans-serif; font-weight:800;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.34rem .7rem; border-radius:999px; line-height:1;
}
.prod-badge-green{ color:#3aff9a; border:1px solid rgba(58,255,154,.45); background:rgba(58,255,154,.08); }
.prod-badge-orange{ color:#ff9d2e; border:1px solid rgba(255,122,26,.5); background:rgba(255,122,26,.10); }

.prod-ic{ font-size:2.1rem; line-height:1; margin-bottom:.9rem; }
.prod-name{
  font-family:"Barlow Condensed",sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:.02em; line-height:1;
  font-size:2.3rem; color:#fff;
}
.prod-tag{ margin-top:.35rem; color:#94a3b8; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.prod-desc{ margin-top:1rem; color:#cbd5e1; font-size:.95rem; line-height:1.6; }
.prod-list{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.prod-list li{ display:flex; align-items:center; gap:.75rem; color:#e2e8f0; font-size:.92rem; }
.prod-price{
  margin-top:1.5rem; font-family:"Barlow Condensed",sans-serif; font-weight:800;
  font-size:2.4rem; line-height:1; color:#fff;
}
.prod-per{ font-family:Inter,sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#94a3b8; margin-left:.5rem; }
.prod-price-soon{
  font-size:1.35rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--neon-orange); text-shadow:0 0 14px rgba(255,122,26,.5);
}
.prod-actions{ margin-top:auto; padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:.75rem; }
@media (max-width:400px){
  .prod-card{ padding:1.6rem 1.25rem; }
  .prod-name{ font-size:2rem; }
  .prod-actions .btn-lg{ width:100%; text-align:center; }
}

/* ============ Shop Board Showcase (login phone + TV board) ============ */
.board-phone-wrap{ display:flex; flex-direction:column; align-items:center; }
.board-phone-img{
  width:100%; max-width:280px; height:auto; display:block;
  border-radius:32px;
  border:2px solid rgba(0,229,255,.35);
  box-shadow:
    0 0 0 6px rgba(10,11,26,.9),
    0 0 24px -4px rgba(0,229,255,.55),
    0 0 60px -12px rgba(255,47,212,.35),
    0 20px 60px -20px rgba(0,0,0,.8);
}
.board-tv-wrap{ display:flex; flex-direction:column; align-items:center; }
.board-tv-frame{
  position:relative; width:100%; padding:14px 16px 22px;
  border-radius:14px;
  background:linear-gradient(180deg,#0a0b1a 0%,#05060f 100%);
  border:2px solid rgba(168,85,255,.35);
  box-shadow:
    0 0 24px -4px rgba(168,85,255,.55),
    0 0 60px -12px rgba(0,229,255,.35),
    0 24px 70px -20px rgba(0,0,0,.85);
}
.board-tv-frame::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-14px; width:18%; height:6px; border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#0a0b1a,#05060f);
  border:1px solid rgba(168,85,255,.35); border-top:none;
}
.board-tv-img{ width:100%; height:auto; display:block; border-radius:6px; }
@media (max-width:640px){
  .board-phone-img{ max-width:220px; }
  .board-tv-frame{ padding:10px 10px 18px; }
}