/* assets/css/styles.css */

/* =========================================================
   THEME TOKENS
   ========================================================= */
:root{
  /* core colors */
  --bg:#041423;
  --panel:#0b2138bf;          /* glass panel */
  --panel-strong:#0c223acc;
  --primary:#00b5ff;          /* neon blue */
  --text:#ffffff;             /* PURE WHITE in dark mode */
  --muted:#d6e9f6;            /* light muted for dark bg */
  --ring:#1a476f;
  --aura:#1ad1ff;
  --shadow:#00121f;

  /* accents for glows/gradients */
  --accent-1:#00b5ff;
  --accent-2:#25f0ff;
  --accent-3:#5bffcd;

  /* forms */
  --input-bg-dark: rgba(255,255,255,.08);
  --input-bg-light: rgba(4,20,35,.06);
  --input-border: color-mix(in srgb, var(--ring) 75%, transparent);
  --input-border-focus: var(--primary);
  --input-shadow-focus: color-mix(in srgb, var(--aura) 25%, transparent);

  /* layout */
  --header-offset: calc(env(safe-area-inset-top, 0px) + 72px);
  --radius-1: 10px;
  --radius-2: 14px;
  --radius-3: 18px;
  --radius-4: 22px;

  /* typography scale */
  --fs-1: clamp(.45rem, .45rem + .3vw, 1rem);
  --fs-2: clamp(1rem, .9rem + .4vw, 1.125rem);
  --fs-3: clamp(1.125rem, 1rem + .6vw, 1.25rem);
  --fs-4: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem);
  --fs-5: clamp(2rem, 1.4rem + 2.2vw, 2.8rem);
  --fs-6: clamp(2.4rem, 1.8rem + 3.2vw, 4.6rem);
}
:root[data-theme="light"]{
  --bg:#f2f9ff;
  --panel:#ffffffcc;
  --panel-strong:#ffffffee;
  --primary:#0a8fde;
  --text:#0f2436;
  --muted:#44637a;
  --ring:#bfe2ff;
  --aura:#6ad9ff;
  --shadow:#b6c7d6;
  --accent-1:#0a8fde;
  --accent-2:#31b6ff;
  --accent-3:#6de1ff;

  --input-bg-dark: rgba(255,255,255,.9);  /* not used in light */
  --input-bg-light: rgba(4,20,35,.06);
}

/* =========================================================
   RESET + BASE
   ========================================================= */
*,
*::before,
*::after{ box-sizing:border-box }

html,body{ height:100% }
html{ -webkit-text-size-adjust:100% }

body{
  font-family:'Manrope',system-ui,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(900px 600px at 15% -10%, #0a315a 0, transparent 40%),
    radial-gradient(500px 400px at 90% 120%, #0a315a 0, transparent 40%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* exact offset under the fixed header (no free space) */
  padding-top:var(--header-offset);
  scroll-padding-top:var(--header-offset);
}

img{max-width:100%;height:auto;display:block}
svg{max-width:100%;height:auto;display:block}
*{min-width:0} /* prevent flex children overflow */

a{ color:var(--accent-2); text-decoration:none }
a:hover{ color:#fff }

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; z-index:2000;
  padding:.5rem .75rem; border-radius:10px;
  background:var(--panel-strong); color:var(--text);
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent);
}

/* Background canvas should never block clicks */
#bg-net{ position:fixed; inset:0; z-index:-1; pointer-events:none }

/* =========================================================
   SCROLLBAR PROGRESS
   ========================================================= */
.scrollbar{
  position:fixed; left:0; top:0; height:3px; width:0; z-index:1201;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
  box-shadow: 0 0 12px color-mix(in srgb, var(--aura) 65%, transparent);
}
@supports (backdrop-filter:blur(1px)){
  .scrollbar{ backdrop-filter: blur(2px) }
}

/* =========================================================
   FIXED NAV
   ========================================================= */
.vxp-fixed{
  position:fixed;
  top:0; left:50%;
  transform:translateX(-50%);
  /* WIDER to hold many tabs */
  width:min(1680px, calc(100% - 16px));
  z-index:1040;
  transition:transform .28s ease;
}
.vxp-fixed.is-hidden{
  transform: translate(-50%, -110%);
}
.vxp-fixed + main > section:first-of-type{margin-top:0!important}

/* ---------- Desktop nav layout (grid) ---------- */
@media (min-width: 992px){
  #navContent{
    display:grid !important;
    grid-template-columns: auto 1fr auto;   /* [brand sits outside], [links], [actions] */
    align-items:center;
    gap:.75rem;
    min-width:0; /* allow center column to shrink */
  }
  #navContent > .navbar-nav{
    grid-column:2;
    min-width:0;            /* required so overflow works in grid */
    overflow-x:auto;        /* scroll if many tabs */
    overflow-y:hidden;
    white-space:nowrap;
    scrollbar-width:none;   /* Firefox */
  }
  #navContent > .navbar-nav::-webkit-scrollbar{ display:none } /* Chrome/Safari */
  #authActions{ grid-column:3; justify-self:end }
  /* kill leftover Bootstrap margin utility on grid */
  #navContent .me-lg-auto{ margin-right:0 !important }
}

/* Desktop nav: prevent truncation inside items */
.navbar-nav{flex-wrap:nowrap}
.navbar-nav .nav-item{flex:0 0 auto}            /* do not shrink */
.navbar .nav-link{
  color:var(--text)!important; opacity:.95; position:relative;
  overflow:visible;         /* avoid clipping the text */
  white-space:nowrap;
}
.navbar .nav-link.active,.navbar .nav-link:hover{opacity:1}
.navbar .nav-link .ripple{position:absolute}

/* ---------- Mobile dropdown (opaque; no transparency) ---------- */
@media (max-width: 991.98px){
  .vxp-fixed .navbar .collapse{
    overflow:visible;
    max-height:none;
  }
  .vxp-fixed .navbar .collapse.show{
    position:absolute; top:100%; left:0; right:0;
    background:#0c223a; /* opaque, not transparent */
    background-image:
      radial-gradient(800px 300px at 50% 0%, rgba(0,181,255,.10) 0, transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12));
    border:1px solid color-mix(in srgb, var(--ring) 82%, transparent);
    border-radius:14px; padding:12px; margin-top:.5rem;
    box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,181,255,.08) inset;
    backdrop-filter:none;
  }
  .navbar-nav .nav-link{padding:.55rem .75rem; font-size:0.6rem}
}

/* White hamburger */
.navbar-toggler{border-color:rgba(255,255,255,.7)}
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='3' stroke-linecap='round' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* Navbar look */
.vxp-navbar .logo{
  width:34px;height:34px;border-radius:8px;object-fit:cover;
  border:1px solid color-mix(in srgb, var(--ring) 55%, transparent)
}

/* Language select + auth in header */
#authActions .form-select{
  height:38px; line-height:1.25; padding:.25rem .75rem;
  border-radius:10px;
  background-color:rgba(255,255,255,.06);
  border:1px solid color-mix(in srgb, var(--ring) 80%, transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset, 0 2px 10px rgba(0,0,0,.25) inset;
  color:var(--text);
  appearance:none;
  width:auto; min-width:70px;  /* keeps EN/FR/AR compact on desktop */
}
:root[data-theme="light"] #authActions .form-select{ background-color:rgba(4,20,35,.06) }
#authActions .form-select:focus{
  border-color:var(--input-border-focus)!important;
  box-shadow:0 0 0 .25rem var(--input-shadow-focus)!important;
}

/* =========================================================
   GLASS & GLOW
   ========================================================= */
.glass{
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  background:linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 80%, transparent));
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  border-radius: var(--radius-3);
}
.glass-strong{background:linear-gradient(180deg, var(--panel-strong), var(--panel));}
.glow-soft{
  box-shadow:
    0 10px 50px rgba(0,0,0,.35),
    0 0 0 1px color-mix(in srgb, var(--ring) 50%, transparent),
    0 0 35px color-mix(in srgb, var(--aura) 22%, transparent) inset;
}
.glow-ring{position:relative}
.glow-ring::after{
  content:''; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--aura) 35%, transparent), transparent 70%);
  filter: blur(18px); opacity:.7; z-index:-1;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.display-xl{font-size:var(--fs-6)}
.leading-tight{line-height:1.05}
.opacity-85{opacity:.95}
.text-cyan{color:var(--aura)!important}
.accent{color:#1fd3ff}
.script{font-family:'Oxanium',system-ui; letter-spacing:.6px}

h1{ font-size:var(--fs-5) }
h2{ font-size:var(--fs-4) }
h3{ font-size:var(--fs-3) }
p,li,small,span{ font-size:var(--fs-1) }
.lead{ font-size:var(--fs-2) }

/* =========================================================
   HERO & VISUAL
   ========================================================= */
.hero-neo{
  position:relative; border-radius:22px; min-height:clamp(420px, 60vh, 680px);
  overflow:hidden;
}
.hero-has-bg{isolation:isolate}
.hero-bg-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; opacity:.45;
  filter:saturate(120%) contrast(110%) drop-shadow(0 0 24px rgba(0,181,255,.25));
  z-index:0;
}
/* subtle top-to-bottom darkening for text legibility */
.hero-neo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.0) 30%, rgba(0,0,0,.25));
  pointer-events:none;
}
.hero-neo .bullet{list-style:none; padding-left:0; margin:0; position:relative; z-index:2}
.hero-neo .bullet li{margin:.35rem 0}
.hero-neo .bullet li::before{content:'✦'; color:var(--aura); margin-right:.55rem}

/* Right visual */
.scene{
  --rx:0; --ry:0;
  position:relative; height:clamp(320px, 52vw, 460px); margin-block:6px;
  transform: perspective(900px) rotateX(calc(var(--rx)*1deg)) rotateY(calc(var(--ry)*1deg));
  transform-style: preserve-3d; transition: transform .25s ease;
  z-index:2;
}
.halo{
  position:absolute; inset:0; margin:auto; width:clamp(260px, 42vw, 380px); height:clamp(260px, 42vw, 380px);border-radius:50%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--aura) 28%, transparent), transparent 55%),
    conic-gradient(from 0deg, color-mix(in srgb, var(--aura) 18%, transparent), transparent 30% 70%, color-mix(in srgb, var(--aura) 18%, transparent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aura) 20%, transparent), 0 0 45px color-mix(in srgb, var(--aura) 32%, transparent) inset;
  animation: haloPulse 6s ease-in-out infinite;
}
@keyframes haloPulse{ 0%,100%{filter:drop-shadow(0 0 0 color-mix(in srgb, var(--aura) 40%, transparent))} 50%{filter:drop-shadow(0 0 18px color-mix(in srgb, var(--aura) 70%, transparent))} }

.avatar{
  position:absolute; inset:0; margin:auto; width:clamp(240px, 38vw, 360px); height:clamp(240px, 38vw, 360px); border-radius:50%;
  display:grid; place-items:center; transform: translateZ(40px);
  background:
    radial-gradient(600px 400px at 70% 30%, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(9,34,52,.15));
  border:1px solid rgba(255,255,255,.08);
}
.head{width:62%;height:62%;border-radius:50%; background:linear-gradient(145deg,#d8f3ff,#6bc7ff); position:relative; filter:saturate(.9) brightness(.97)}
.head::after{content:''; position:absolute; inset:12% 10% 8% 8%; border:3px solid rgba(9,34,53,.35); border-radius:50%/46% 54% 56% 44%}
.eye{position:absolute; top:42%; width:14%; height:14%; background:#0e243a; border-radius:50%; box-shadow:0 0 0 3px #0ad1ff inset, 0 0 12px #0ad1ff}
.eye.e1{left:28%}.eye.e2{right:26%}

/* floating labels */
.f-tag{
  position:absolute; padding:.5rem .9rem; border:1px solid color-mix(in srgb, var(--ring) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  border-radius:12px; color:var(--text);
  box-shadow: 0 8px 30px rgba(0,0,0,.25), 0 0 20px color-mix(in srgb, var(--aura) 23%, transparent);
  text-shadow:0 0 10px color-mix(in srgb, var(--aura) 25%, transparent);
  font-size:clamp(.8rem, .6rem + .5vw, 1rem);
  transform: translateZ(80px);
}
.t1{top:3%; left:12%; animation: float1 7s ease-in-out infinite}
.t2{top:33%; left:5%; animation: float2 8s ease-in-out infinite}
.t3{bottom:18%; left:22%; animation: float3 7.7s ease-in-out infinite}
.t4{bottom:2%; left:38%; animation: float1 9s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translateZ(80px) translateY(0)}50%{transform:translateZ(80px) translateY(-10px)}}
@keyframes float2{0,100%{transform:translateZ(80px) translate(0)}50%{transform:translateZ(80px) translate(10px,-8px)}}
@keyframes float3{0,100%{transform:translateZ(80px) translate(0)}50%{transform:translateZ(80px) translate(-8px,10px)}}

/* neon divider */
.neon-divider{
  margin-top:18px; height:2px; width:100%;
  background: linear-gradient(90deg, transparent, var(--accent-1), var(--accent-2), var(--accent-3), transparent);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--aura) 45%, transparent));
  border-radius:2px;
}

/* section title glow underline */
.section-title{
  font-family:'Oxanium', system-ui; font-weight:800; letter-spacing:.4px;
  margin: 0 0 .6rem 0; display:inline-block; position:relative;
}
.section-title::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--aura) 45%, transparent));
}

/* =========================================================
   CARDS / BANNERS
   ========================================================= */
.feature-card{overflow:hidden; transition: transform .18s ease, box-shadow .3s ease}
.feature-card:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(0,0,0,.35)}
.feature-img{
  width:100%; height:clamp(140px, 24vw, 180px); object-fit:cover; display:block;
  border-bottom:1px solid color-mix(in srgb, var(--ring) 70%, transparent)
}

.banner-card{
  position:relative; background: color-mix(in srgb, var(--panel) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent); border-radius:18px; overflow:hidden
}
.banner-img{
  width:100%; height:clamp(180px, 38vw, 320px); object-fit:cover; display:block;
  filter:saturate(110%); transition:transform .35s ease
}
.banner-card:hover .banner-img{transform:scale(1.02)}
.banner-caption{
  position:absolute; left:12px; bottom:10px; background:rgba(0,0,0,.25); backdrop-filter:blur(4px);
  border:1px solid color-mix(in srgb, var(--ring) 65%, transparent); color:#fff; padding:.25rem .5rem;
  border-radius:8px; font-size:.85rem
}

/* Dropzone */
.dropzone{
  min-height:240px; border:1px dashed color-mix(in srgb, var(--ring) 70%, transparent); position:relative; cursor:pointer;
  border-radius: var(--radius-3);
}
.dropzone:hover{border-color: color-mix(in srgb, var(--aura) 60%, transparent)}
.dropzone .file-input{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer}
.dropzone .dz-copy{pointer-events:none}
.dz-icon{font-size:2rem; opacity:.9; margin-bottom:.3rem}
.dz-title{font-weight:800; letter-spacing:.3px}

/* =========================================================
   FORMS  (high-contrast + autofill fixes)
   ========================================================= */
.form-control,
.form-select,
.input-group .form-control{
  background: transparent;
  color: var(--text);
  border-color: var(--input-border);
  caret-color: var(--text);
  -webkit-text-fill-color: var(--text);
  appearance: none;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{
  background-color: var(--input-bg-dark) !important;
}
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select{
  background-color: var(--input-bg-light) !important;
}

/* Placeholder contrast per theme */
[data-theme="dark"] .form-control::placeholder { color: rgba(214,233,246,.85); }
:root[data-theme="light"] .form-control::placeholder { color: rgba(15,36,54,.60); }

/* Focus ring + border */
.form-control:focus,
.form-select:focus{
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 .25rem var(--input-shadow-focus) !important;
  outline: 0;
}

/* Validation */
.form-control.is-invalid,
.was-validated .form-control:invalid { border-color: #ff7070 !important; }
.form-control.is-valid,
.was-validated .form-control:valid   { border-color: #5bffcd !important; }

/* Select caret (keep Bootstrap icon hidden look on glass) */
.form-select{ background-image:none }

/* Disabled / readonly */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled{
  opacity:.85;
  background-color: color-mix(in srgb, currentColor 7%, transparent) !important;
  cursor:not-allowed;
}

/* WebKit Autofill */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
textarea.form-control:-webkit-autofill,
select.form-select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
[data-theme="dark"] input.form-control:-webkit-autofill,
[data-theme="dark"] textarea.form-control:-webkit-autofill,
[data-theme="dark"] select.form-select:-webkit-autofill{
  box-shadow: 0 0 0 1000px var(--input-bg-dark) inset !important;
}
:root[data-theme="light"] input.form-control:-webkit-autofill,
:root[data-theme="light"] textarea.form-control:-webkit-autofill,
:root[data-theme="light"] select.form-select:-webkit-autofill{
  box-shadow: 0 0 0 1000px var(--input-bg-light) inset !important;
}

/* Labels */
.form-label{ color:var(--text); opacity:.95 }

/* Small helpers */
.input-sm{ padding:.4rem .6rem; font-size:.9rem; border-radius:10px }
.input-lg{ padding:.85rem 1rem; font-size:1.05rem; border-radius:14px }

/* Checkboxes / radios on glass */
.form-check-input{
  background-color: color-mix(in srgb, var(--panel) 70%, transparent);
  border-color: var(--input-border);
}
.form-check-input:checked{
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--aura) 25%, transparent);
}

/* Password toggle button */
.pwd-toggle{
  position:absolute; right:.6rem; top:50%; translate:0 -40%;
  font-size:1rem; line-height:1; background:transparent; border:0; color:var(--text);
  opacity:.8; cursor:pointer; padding:.25rem .35rem; border-radius:8px;
}
.pwd-toggle:hover{ opacity:1; background: color-mix(in srgb, var(--aura) 12%, transparent) }

/* =========================================================
   BUTTONS (shiny + interactions)
   ========================================================= */
.btn, .dock-btn{ position:relative; overflow:hidden; will-change: transform; }
.btn-primary{
  --shine: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 20%, transparent 40%);
  background: radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--primary) 85%, #0a3d57 15%), #006eae 60%);
  border-color: color-mix(in srgb, var(--primary) 85%, #0a3d57 15%);
  color:#fff;
  transition: transform .12s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary::after{
  content:''; position:absolute; inset:-120% -30% auto; height:200%;
  background: var(--shine); transform: rotate(20deg); filter: blur(2px);
  animation: sheen 2.4s linear infinite;
}
@keyframes sheen{0%{transform:translateX(-120%) rotate(20deg)}100%{transform:translateX(120%) rotate(20deg)}}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 22px color-mix(in srgb, var(--primary) 35%, transparent)}
.btn-outline-primary{
  color:var(--primary); border-color:color-mix(in srgb, var(--primary) 80%, var(--ring));
  position:relative; overflow:hidden; transition: all .2s ease; background:transparent;
}
.btn-outline-primary:hover{background:color-mix(in srgb, var(--primary) 12%, transparent); color:#fff}
.btn-cta{border-radius:14px; padding:.8rem 1.3rem; font-weight:800; letter-spacing:.3px}
.glow-btn{box-shadow:0 0 0 1px color-mix(in srgb, var(--ring) 55%, transparent), 0 8px 24px color-mix(in srgb, var(--aura) 25%, transparent) inset}
.sheen{position:relative; overflow:hidden}
.sheen::after{
  content:''; position:absolute; top:-150%; left:-50%; width:50%; height:400%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:rotate(20deg); animation: sheen 2.8s linear infinite;
}

/* Press/bounce */
.btn.is-pressing, .dock-btn.is-pressing{ transform: scale(.97); filter: saturate(110%); }
.btn.did-press, .dock-btn.did-press{ animation: popUp .22s ease-out; }
@keyframes popUp { from{ transform: scale(.97) } to{ transform: scale(1) } }

/* magnetic hover baseline */
.magnet-ready{ transition: transform .18s ease; }

/* neon ripple */
.ripple{
  position:absolute; left:calc(var(--x) * 1px); top:calc(var(--y) * 1px);
  width:20px; height:20px; pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:
    radial-gradient(circle, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle, color-mix(in srgb, var(--aura) 60%, transparent) 0%, transparent 70%);
  mix-blend-mode:screen; opacity:.9; filter: blur(.2px);
  animation:ripplePulse .7s ease-out forwards;
}
@keyframes ripplePulse{ to{ transform:translate(-50%,-50%) scale(18); opacity:0; } }

/* Dock & small buttons */
.dock{
  position:fixed; right:16px; bottom:12px; display:flex; gap:.5rem; padding:.35rem .45rem;
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent); border-radius:12px; z-index:1200
}
.dock-btn{
  font-size:18px; width:40px; height:40px; display:grid; place-items:center;
  background: transparent; color:var(--text);
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent);
  border-radius:12px; transition: transform .12s ease, background-color .2s ease;
}
.dock-btn:hover{background:color-mix(in srgb, var(--aura) 14%, transparent); transform:translateY(-1px)}
@media (max-width:575.98px){ .dock{transform:scale(.95); right:10px} }
[dir="rtl"] .dock{left:16px; right:auto}

/* =========================================================
   MODALS (entrance transition)
   ========================================================= */
.modal-content{ border-radius: var(--radius-3) }
.modal.fade .modal-dialog{
  transform: translateY(12px) scale(.96);
  transition: transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
}
.modal.show .modal-dialog{ transform: translateY(0) scale(1) }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal-up{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease}
.reveal-up.reveal-on{opacity:1; transform: translateY(0)}
.reveal-item{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease .05s}
.reveal-item.reveal-on{opacity:1; transform: translateY(0)}

/* Section pulse when anchor-targeted */
.focus-pulse{ animation: pulseOutline 1.2s ease-out 1; }
@keyframes pulseOutline{
  0% { box-shadow: 0 0 0 0 rgba(0,181,255,.25), inset 0 0 0 0 rgba(0,181,255,.15); }
  60%{ box-shadow: 0 0 0 14px rgba(0,181,255,0), inset 0 0 0 6px rgba(0,181,255,.0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,181,255,0), inset 0 0 0 0 rgba(0,181,255,0); }
}

/* =========================================================
   DARK MODE OVERRIDES (force white text)
   ========================================================= */
:root[data-theme="dark"]{
  --text:#ffffff;
  color-scheme: dark;
}
[data-theme="dark"] body,
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6,
[data-theme="dark"] p,[data-theme="dark"] li,[data-theme="dark"] a,
[data-theme="dark"] label,[data-theme="dark"] small,[data-theme="dark"] span,
[data-theme="dark"] .nav-link,[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .card .card-body,[data-theme="dark"] .modal-content,
[data-theme="dark"] .form-label,[data-theme="dark"] .form-control,
[data-theme="dark"] .btn{
  color:var(--text)!important;
}
[data-theme="dark"] .text-muted{color:#d6e9f6!important}
[data-theme="dark"] a:hover,[data-theme="dark"] .nav-link:hover{color:#ffffff!important;opacity:1}

/* =========================================================
   SPLASH
   ========================================================= */
.splash{
  position:fixed; inset:0; display:grid; place-items:center; z-index:2000;
  background:
    radial-gradient(1000px 700px at 20% 10%, rgba(0,181,255,.18), transparent 40%),
    radial-gradient(900px 600px at 85% 120%, rgba(0,181,255,.18), transparent 40%),
    var(--bg);
  transition: opacity .45s ease, visibility .45s ease;
}
.splash.hide{opacity:0; visibility:hidden}
.splash-core{
  position:relative; width:min(420px, 88vw); border-radius:20px; padding:28px 26px 22px;
  text-align:center;
}
.splash-logo{
  width:86px; height:86px; border-radius:18px; object-fit:cover;
  border:1px solid color-mix(in srgb, var(--ring) 60%, transparent);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--aura) 35%, transparent));
  margin: 2px auto 10px;
}
.splash-title{font-size:1.6rem; letter-spacing:.6px}
.splash-sub{opacity:.9; margin-top:-2px; margin-bottom:10px}
.splash-ring{
  position:absolute; inset:-14px; border-radius:24px; pointer-events:none; z-index:-1;
  background: conic-gradient(from 0deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1));
  filter: blur(16px) saturate(120%); opacity:.35; animation: ringSpin 6s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.splash-progress{
  height:6px; background: color-mix(in srgb, var(--panel) 72%, transparent);
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent);
  border-radius:100px; overflow:hidden; margin-top:10px;
}
.splash-progress span{
  display:block; height:100%; width:40%;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--aura) 45%, transparent));
  border-radius:inherit; animation: loadSlide 1.4s ease-in-out infinite;
}
@keyframes loadSlide{ 0%{transform:translateX(-60%)} 50%{transform:translateX(40%)} 100%{transform:translateX(140%)} }

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width:1199.98px){
  .hero-neo{ min-height: clamp(380px, 56vh, 620px) }
}
@media (max-width:991.98px){
  .hero-neo{ min-height: clamp(360px, 52vh, 560px) }
  .scene{ height: clamp(300px, 60vw, 420px) }
}
@media (max-width:575.98px){
  .btn-cta{ width:100% }
  .feature-img{ height: 160px }
  .banner-img{ height: 220px }
}

/* =========================================================
   PRINT (minimal)
   ========================================================= */
@media print{
  .splash, .dock, #bg-net, .navbar, .neon-divider, .scrollbar { display:none !important }
  body{ background:#fff; color:#000; padding-top:0 }
  .glass, .glass-strong, .glow-soft{ box-shadow:none; background:#fff; border:0 }
}

/* =================== Referees Directory (glass neon) =================== */
.refdir-controls .refdir-input,
.refdir-controls .refdir-select{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 70%, transparent),
                                      color-mix(in srgb, var(--panel) 70%, transparent));
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent);
  color: var(--text);
  box-shadow: 0 6px 26px rgba(0,0,0,.25), inset 0 0 24px color-mix(in srgb, var(--aura) 8%, transparent);
}
.refdir-controls .refdir-input:focus,
.refdir-controls .refdir-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--aura) 25%, transparent);
}
.input-wrap{ position:relative; }
.refdir-icon{
  position:absolute; right:.75rem; top:50%; translate:0 -50%;
  pointer-events:none; opacity:.7; font-size:1rem;
}

/* Card */
.refcard{
  border-radius:18px; overflow:hidden; padding:16px 16px 12px;
  transition: transform .22s ease, box-shadow .3s ease, border-color .3s ease, filter .3s ease;
  border:1px solid color-mix(in srgb, var(--ring) 65%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 70%, transparent),
                                      color-mix(in srgb, var(--panel) 70%, transparent));
}
.refcard:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35), 0 0 28px color-mix(in srgb, var(--aura) 18%, transparent) inset;
  border-color: color-mix(in srgb, var(--aura) 45%, transparent);
  filter: saturate(110%);
}
.ref-title{
  font-weight:800; letter-spacing:.3px; margin-bottom:6px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--aura) 18%, transparent);
}
.ref-meta{ opacity:.85; }

/* Role chips */
.role-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .5rem; border-radius:8px; font-size:.8rem; margin:.15rem .25rem .15rem 0;
  background: color-mix(in srgb, var(--panel) 65%, transparent);
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent);
}
.role-var{  color:#d6b6ff; border-color: color-mix(in srgb,#b87dff 50%, transparent); }
.role-ref{  color:#8ec7ff; border-color: color-mix(in srgb,#46a6ff 50%, transparent); }
.role-asst{ color:#99ffc2; border-color: color-mix(in srgb,#3fe08e 50%, transparent); }
.role-rev{  color:#ffd699; border-color: color-mix(in srgb,#ffb347 50%, transparent); }
.role-four{ color:#b0c3ff; border-color: color-mix(in srgb,#7e9bff 50%, transparent); }

/* Small stat pills */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .5rem; border-radius:999px; font-size:.75rem; margin-right:.35rem;
  background: color-mix(in srgb, var(--panel) 65%, transparent);
  border:1px solid color-mix(in srgb, var(--ring) 70%, transparent);
}

/* Skeleton shimmer */
.skeleton .skel{position:relative; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.08)}
.skeleton .skel::after{
  content:''; position:absolute; inset:0 -120%; background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: skelshine 1.6s linear infinite;
}
.skel-title{height:24px; width:70%; margin:4px 0 10px}
.skel-line{height:12px; width:90%; margin:6px 0}
.skel-badges{height:26px; width:60%; margin-top:12px}
@keyframes skelshine{0%{transform:translateX(-30%)}100%{transform:translateX(30%)}}

/* Quick view modal body */
#refModalBody .kv{
  display:grid; grid-template-columns: 140px 1fr; gap:.35rem .75rem; margin-bottom:.35rem;
}
#refModalBody .kv .k{opacity:.85}