/* CLINEXAA Premium UI System v4.1.1 — Fixed */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── Scroll progress ────────────────────────────────────────────────── */
.scroll-prog{position:fixed;top:0;left:0;height:2px;z-index:9999;
  background:linear-gradient(90deg,#2fd089,#35e0d6,#9ad8ff);
  width:0%;box-shadow:0 0 12px rgba(47,208,137,.7);transition:width .06s linear}

/* ── Floating orbs ──────────────────────────────────────────────────── */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(100px);opacity:0;animation:orbIn 2s forwards,orbFloat 15s ease-in-out infinite}
.orb-a{width:600px;height:600px;top:-160px;left:-140px;
  background:radial-gradient(circle,rgba(47,208,137,.13),transparent 70%)}
.orb-b{width:450px;height:450px;top:30%;right:-120px;
  background:radial-gradient(circle,rgba(53,224,214,.09),transparent 70%);animation-delay:6s,6s}
.orb-c{width:380px;height:380px;bottom:8%;left:22%;
  background:radial-gradient(circle,rgba(154,216,255,.06),transparent 70%);animation-delay:10s,10s}
@keyframes orbIn{from{opacity:0}to{opacity:1}}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-40px,50px) scale(1.08)}66%{transform:translate(32px,-30px) scale(.93)}}
@media(max-width:768px){.orb{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   3D BULGE GLASS CARD — exact app formula, NO pseudo-element conflicts
   Mouse glow is handled by .lg-glow child div injected via JS
   ══════════════════════════════════════════════════════════════════════ */
.lg{
  position:relative;
  /* Dark base — same opacity as app */
  background:rgba(7,14,10,.92);
  /* 145° surface gradient = dome/bulge illusion */
  background-image:linear-gradient(145deg,
    rgba(255,255,255,.09) 0%,
    rgba(255,255,255,.03) 55%,
    rgba(255,255,255,.055) 100%);
  /* DIRECTIONAL BORDERS — the core 3D effect
     Bright top/left = light source · Dark right/bottom = shadow */
  border-top:   1px solid rgba(255,255,255,.18);
  border-left:  1px solid rgba(255,255,255,.12);
  border-right: 1px solid rgba(0,0,0,.22);
  border-bottom:1px solid rgba(0,0,0,.26);
  border-radius:20px;
  /* 3-layer deep shadows — makes card float above page */
  box-shadow:
    0 4px 16px rgba(0,0,0,.45),
    0 16px 48px rgba(0,0,0,.58),
    0 48px 96px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  isolation:isolate;
  /* NO overflow:hidden — avoids clipping animations and accordions */
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-top-color .2s,box-shadow .22s;
}
.lg:hover{
  transform:translateY(-5px);
  border-top-color:rgba(255,255,255,.30);
  box-shadow:
    0 6px 20px rgba(0,0,0,.52),
    0 22px 60px rgba(0,0,0,.65),
    0 60px 100px rgba(0,0,0,.68),
    0 0 0 1px rgba(122,242,176,.14),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* Mouse-tracked glow — injected as .lg-glow child by JS (no ::after conflicts) */
.lg-glow{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(
    circle at var(--gx,50%) var(--gy,50%),
    rgba(47,208,137,.18) 0%,
    transparent 62%);
  opacity:0;transition:opacity .3s;
}
.lg:hover .lg-glow{opacity:1}
.lg>*:not(.lg-glow){position:relative;z-index:1}

/* ── Variant overrides ─────────────────────────────────────────────── */
/* Blog cards */
.bcard.lg{background:rgba(6,12,9,.94);border-radius:18px}
.bcard.lg:hover{transform:translateY(-6px) scale(1.008)}

/* Feature glass cards */
.glass-card.lg{background:rgba(7,14,10,.90)}

/* Console — preserve its existing gradient border ::before */
.console.lg{
  /* Keep existing console styling, only upgrade shadows */
  background:unset;background-image:unset;
  border-top:unset;border-left:unset;border-right:unset;border-bottom:unset;
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 16px 48px rgba(0,0,0,.58),0 48px 96px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.16);
}
.console.lg:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 22px rgba(0,0,0,.52),0 22px 60px rgba(0,0,0,.65),0 60px 100px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.22);
}
/* Small inner cards that don't need full bulge */
.phone.lg,.tv.lg{background:rgba(7,14,10,.88);border-radius:16px}

/* ── Scroll stagger ─────────────────────────────────────────────────── */
.sg{opacity:0;transform:translateY(28px);
  transition:opacity .65s cubic-bezier(.2,.8,.2,1) calc(var(--si,0)*.08s),
    transform .65s cubic-bezier(.2,.8,.2,1) calc(var(--si,0)*.08s)}
.sg.vis{opacity:1;transform:none}
.sg-t{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.sg-t.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.sg,.sg-t{opacity:1;transform:none;transition:none}}

/* ── Premium buttons ────────────────────────────────────────────────── */
.btn-v2{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:14px;font-weight:700;font-size:15px;
  background:linear-gradient(145deg,#3ee88a,#26c56e);
  border-top:   1px solid rgba(255,255,255,.35);
  border-left:  1px solid rgba(255,255,255,.22);
  border-right: 1px solid rgba(0,0,0,.18);
  border-bottom:1px solid rgba(0,0,0,.22);
  color:#031208;text-decoration:none;cursor:pointer;
  box-shadow:0 4px 18px rgba(47,208,137,.45),0 12px 36px rgba(47,208,137,.25),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
}
.btn-v2:hover{transform:translateY(-3px);box-shadow:0 6px 28px rgba(47,208,137,.6),0 18px 50px rgba(47,208,137,.3),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-gl{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 24px;border-radius:14px;font-weight:600;font-size:15px;
  background:rgba(8,15,11,.85);
  background-image:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 55%,rgba(255,255,255,.04));
  border-top:   1px solid rgba(255,255,255,.18);
  border-left:  1px solid rgba(255,255,255,.11);
  border-right: 1px solid rgba(0,0,0,.2);
  border-bottom:1px solid rgba(0,0,0,.24);
  color:#e8faf2;text-decoration:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-top-color .2s,box-shadow .22s;
}
.btn-gl:hover{transform:translateY(-3px);border-top-color:rgba(255,255,255,.28);box-shadow:0 6px 22px rgba(0,0,0,.48),0 16px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.18),0 0 24px rgba(122,242,176,.1)}

/* ── Stat card ──────────────────────────────────────────────────────── */
.stat-v2{
  padding:26px;border-radius:18px;text-align:center;
  background:rgba(7,14,10,.92);
  background-image:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 55%,rgba(255,255,255,.055));
  border-top:   1px solid rgba(255,255,255,.18);
  border-left:  1px solid rgba(255,255,255,.11);
  border-right: 1px solid rgba(0,0,0,.22);
  border-bottom:1px solid rgba(0,0,0,.26);
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 16px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.15);
}
.stat-v2 .n{font-family:'Sora',sans-serif;font-size:38px;font-weight:800;line-height:1;
  background:linear-gradient(120deg,#7af2b0,#35e0d6 55%,#9ad8ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(122,242,176,.4))}
.stat-v2 .l{font-size:11.5px;color:#5d7570;margin-top:8px;letter-spacing:.1em;text-transform:uppercase}

/* ── CTA section ────────────────────────────────────────────────────── */
.cta-v2{
  position:relative;overflow:hidden;padding:70px 48px;border-radius:26px;text-align:center;
  background:rgba(7,14,10,.96);
  background-image:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025) 55%,rgba(255,255,255,.05));
  border-top:   1px solid rgba(255,255,255,.18);
  border-left:  1px solid rgba(255,255,255,.11);
  border-right: 1px solid rgba(0,0,0,.2);
  border-bottom:1px solid rgba(0,0,0,.24);
  box-shadow:0 8px 32px rgba(0,0,0,.6),0 32px 80px rgba(0,0,0,.7),0 64px 120px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);
}
.cta-v2::before{content:'';position:absolute;top:-55%;left:-20%;width:70%;height:190%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(47,208,137,.12),transparent 60%)}
.cta-v2::after{content:'';position:absolute;bottom:-55%;right:-15%;width:60%;height:180%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(53,224,214,.08),transparent 60%)}
@media(max-width:768px){.cta-v2{padding:44px 22px}}

/* ── Icon box ───────────────────────────────────────────────────────── */
.ico-v2{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:rgba(7,14,10,.9);background-image:linear-gradient(145deg,rgba(47,208,137,.28),rgba(53,224,214,.14));
  border-top:  1px solid rgba(122,242,176,.35);border-left: 1px solid rgba(122,242,176,.22);
  border-right:1px solid rgba(0,0,0,.2);border-bottom:1px solid rgba(0,0,0,.25);
  box-shadow:0 4px 16px rgba(47,208,137,.2),0 8px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.ico-v2 svg{width:22px;height:22px;stroke:#7af2b0;stroke-width:1.75;fill:none}

/* ── Neon badge ─────────────────────────────────────────────────────── */
.neon-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7af2b0;
  background:rgba(7,14,10,.85);background-image:linear-gradient(145deg,rgba(47,208,137,.15),rgba(47,208,137,.06));
  border-top:  1px solid rgba(122,242,176,.3);border-left: 1px solid rgba(122,242,176,.2);
  border-right:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.2);
  box-shadow:0 0 20px rgba(47,208,137,.14),0 4px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1)}

/* ── Pill tag ───────────────────────────────────────────────────────── */
.pill-v2{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:99px;
  font-size:11px;font-weight:700;background:rgba(47,208,137,.1);
  border-top:  1px solid rgba(122,242,176,.22);border-left: 1px solid rgba(122,242,176,.15);
  border-right:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.15);
  color:#7af2b0;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* ── Filter bar ─────────────────────────────────────────────────────── */
.filt-bar-v2,.filter-bar{
  display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px;border-radius:16px;
  background:rgba(6,12,9,.88);
  background-image:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02) 55%,rgba(255,255,255,.04));
  border-top:   1px solid rgba(255,255,255,.12);border-left:  1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.22);
  box-shadow:0 4px 16px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);margin-bottom:36px;
}
.filt-btn,.filt-v2{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 15px;border-radius:99px;font-size:12.5px;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.04);
  border-top:  1px solid rgba(255,255,255,.1);border-left: 1px solid rgba(255,255,255,.07);
  border-right:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.15);
  color:#7a9990;font-family:'Space Grotesk',sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:all .2s;white-space:nowrap;
}
.filt-btn:hover,.filt-v2:hover,.filt-btn.active,.filt-v2.act,.filt-v2.active{
  background:rgba(47,208,137,.12);border-top-color:rgba(122,242,176,.35);
  border-left-color:rgba(122,242,176,.22);color:#e8faf2;
  box-shadow:0 0 16px rgba(47,208,137,.12),inset 0 1px 0 rgba(255,255,255,.1);
}
.filt-count,.filt-v2-cnt{font-size:11px;padding:1px 7px;border-radius:99px;background:rgba(122,242,176,.12);color:#7af2b0}

/* ── Step row ───────────────────────────────────────────────────────── */
.step-row{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(122,242,176,.07)}
.step-row:last-child{border:none}
.step-n{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  font-family:'Sora',sans-serif;font-weight:800;font-size:14px;
  background:rgba(7,14,10,.9);background-image:linear-gradient(145deg,rgba(47,208,137,.25),rgba(53,224,214,.12));
  border-top:  1px solid rgba(122,242,176,.3);border-left: 1px solid rgba(122,242,176,.18);
  border-right:1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.22);
  color:#7af2b0;box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1)}

/* ── Utilities ──────────────────────────────────────────────────────── */
.grad-v2{background:linear-gradient(120deg,#7af2b0 0%,#35e0d6 55%,#9ad8ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 28px rgba(122,242,176,.3))}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}

/* ── Contact tiles (.contact-tile.lg) ──────────────────────────────── */
.contact-tile.lg{
  display:flex!important;align-items:center;gap:14px;
  padding:18px 22px;border-radius:16px;text-decoration:none;
  background:rgba(7,14,10,.92);
  background-image:linear-gradient(145deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 55%,rgba(255,255,255,.055) 100%);
  border-top:   1px solid rgba(255,255,255,.18);
  border-left:  1px solid rgba(255,255,255,.12);
  border-right: 1px solid rgba(0,0,0,.22);
  border-bottom:1px solid rgba(0,0,0,.26);
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 16px 48px rgba(0,0,0,.58),0 48px 96px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(140%);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-top-color .2s,box-shadow .22s;
}
.contact-tile.lg:hover{
  transform:translateY(-5px);border-top-color:rgba(255,255,255,.30);
  box-shadow:0 6px 20px rgba(0,0,0,.52),0 22px 60px rgba(0,0,0,.65),0 60px 100px rgba(0,0,0,.68),0 0 0 1px rgba(122,242,176,.14),inset 0 1px 0 rgba(255,255,255,.22);
}

/* ── Form card (.form-card.lg) ──────────────────────────────────────── */
.form-card.lg{
  padding:32px;border-radius:22px;
  background:rgba(7,14,10,.92);
  background-image:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.025) 55%,rgba(255,255,255,.05) 100%);
  border-top:   1px solid rgba(255,255,255,.16);
  border-left:  1px solid rgba(255,255,255,.1);
  border-right: 1px solid rgba(0,0,0,.22);
  border-bottom:1px solid rgba(0,0,0,.26);
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 16px 48px rgba(0,0,0,.55),0 48px 96px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(140%);
}

/* ── Pricing plan cards (.pl.lg) ────────────────────────────────────── */
.pl.lg{
  background:rgba(7,14,10,.92)!important;
  background-image:linear-gradient(145deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 55%,rgba(255,255,255,.055) 100%)!important;
  border-top:   1px solid rgba(255,255,255,.18)!important;
  border-left:  1px solid rgba(255,255,255,.12)!important;
  border-right: 1px solid rgba(0,0,0,.22)!important;
  border-bottom:1px solid rgba(0,0,0,.26)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 16px 48px rgba(0,0,0,.58),0 48px 96px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.16)!important;
  backdrop-filter:blur(14px) saturate(140%);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-top-color .2s,box-shadow .22s!important;
}
.pl.lg:hover{
  transform:translateY(-6px)!important;border-top-color:rgba(255,255,255,.30)!important;
  box-shadow:0 6px 22px rgba(0,0,0,.52),0 22px 60px rgba(0,0,0,.65),0 60px 100px rgba(0,0,0,.68),0 0 0 1px rgba(122,242,176,.14),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
/* Popular/highlighted plan — green-tinted glass */
.pl.hot.lg{
  border-top:   1px solid rgba(122,242,176,.45)!important;
  border-left:  1px solid rgba(122,242,176,.28)!important;
  border-right: 1px solid rgba(0,0,0,.2)!important;
  border-bottom:1px solid rgba(0,0,0,.24)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 16px 48px rgba(0,0,0,.55),0 48px 96px rgba(0,0,0,.6),inset 0 1px 0 rgba(122,242,176,.22),0 0 60px rgba(47,208,137,.12)!important;
}
.pl.hot.lg:hover{
  box-shadow:0 6px 22px rgba(0,0,0,.5),0 22px 60px rgba(0,0,0,.62),0 60px 100px rgba(0,0,0,.65),0 0 80px rgba(47,208,137,.2),inset 0 1px 0 rgba(122,242,176,.3)!important;
}

/* ── Investor metric cards (.mv = stat number) ──────────────────────── */
.metric.lg{
  background:rgba(7,14,10,.92);
  background-image:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 55%,rgba(255,255,255,.055));
  border-top:   1px solid rgba(255,255,255,.18);
  border-left:  1px solid rgba(255,255,255,.12);
  border-right: 1px solid rgba(0,0,0,.22);
  border-bottom:1px solid rgba(0,0,0,.26);
  border-radius:20px;
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 16px 48px rgba(0,0,0,.58),0 48px 96px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(140%);
  padding:28px 20px;text-align:center;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-top-color .2s;
}
.metric.lg:hover{transform:translateY(-5px);border-top-color:rgba(255,255,255,.30)}

/* ── Mobile responsiveness ──────────────────────────────────────────── */
@media(max-width:768px){
  .pl.lg,.glass-card.lg,.bcard.lg,.contact-tile.lg,.eco-group.lg{
    border-radius:16px;
  }
  .form-card.lg{padding:22px}
  .contact-tile.lg{padding:14px 16px}
}
@media(max-width:480px){
  .bcard.lg{border-radius:14px}
  .pl.lg{border-radius:14px}
}