/* ==========================================================================
   AMRAT CHITS — SHARED DESIGN SYSTEM
   Deep charcoal-navy fintech aesthetic. Plus Jakarta Sans / Inter.
   ========================================================================== */

:root{
  --ink:            #080B11;   /* global background */
  --ink-raised:     #0C1019;   /* alternating section bg, slightly lifted */
  --ink-card:       #10141d;   /* solid card fallback */
  --glass-bg:       rgba(15, 23, 42, 0.40);   /* slate-900/40 */
  --glass-border:   rgba(255, 255, 255, 0.06);
  --glass-border-strong: rgba(255, 255, 255, 0.10);
  --crimson:        #EF4444;
  --crimson-dark:   #DC2626;
  --crimson-darker: #B91C1C;
  --crimson-light:  #F87171;
  --text:           #F8FAFC;
  --text-muted:     rgba(248, 250, 252, 0.62);
  --text-muted-2:   rgba(248, 250, 252, 0.42);
  --text-muted-3:   rgba(248, 250, 252, 0.28);
}

*{ scroll-behavior:smooth; box-sizing:border-box; }
html, body{ background:var(--ink); }
body{
  font-family:'Inter', sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.font-display{ font-family:'Plus Jakarta Sans', sans-serif; }

::selection{ background:var(--crimson); color:#fff; }

a, button{ transition-property: color, background-color, border-color, box-shadow, transform, opacity; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ scroll-behavior:auto; animation-duration: .001ms !important; animation-iteration-count:1 !important; }
}

/* ---------- glass paneling (global) ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius: 1rem;
}
.glass-strong{
  background:var(--glass-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border:1px solid var(--glass-border-strong);
}

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 6px;
}

/* ---------- sticky glass header ---------- */
#site-header{ transition: background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, border-color .35s ease; }
#site-header.glass-on{
  background: rgba(8, 11, 17, 0.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 20px 40px -20px rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-active{ position:relative; color:#fff !important; }
.nav-active::after{
  content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:var(--crimson); border-radius:999px;
}

/* ---------- reveal-on-scroll (a.k.a. fade-up) ---------- */
.reveal, .fade-up{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal.in, .fade-up.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1, .fade-up-delay-1{ transition-delay:.08s; }
.reveal-delay-2, .fade-up-delay-2{ transition-delay:.16s; }
.reveal-delay-3, .fade-up-delay-3{ transition-delay:.24s; }
.reveal-delay-4, .fade-up-delay-4{ transition-delay:.32s; }

/* ---------- pulse / live dot ---------- */
.ticker-dot{ box-shadow: 0 0 0 0 rgba(239,68,68,0.7); animation: pulse-ring 2.2s infinite; }
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(239,68,68,0.55); }
  70%{ box-shadow:0 0 0 10px rgba(239,68,68,0); }
  100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

/* ---------- global live notification toast (bottom-left, slides in from the left) ---------- */
#pulse-toast{ transition:opacity .5s cubic-bezier(.16,.84,.44,1), transform .5s cubic-bezier(.16,.84,.44,1); }
#pulse-toast.toast-hidden{ opacity:0; transform:translateX(-24px); pointer-events:none; }
#pulse-toast.toast-visible{ opacity:1; transform:translateX(0); }

/* ---------- generic hover-lift card ---------- */
.bento-card{ transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease, background-color .35s ease; }
.bento-card:hover{
  transform:translateY(-6px);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55);
  border-color: rgba(239,68,68,0.35);
}

/* ---------- plan / summary cards with crimson glow overlay on hover ---------- */
.glow-card{ position:relative; transition: transform .35s cubic-bezier(.16,.84,.44,1), border-color .35s ease, box-shadow .35s ease; }
.glow-card::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:inherit; overflow:hidden;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(239,68,68,0.22), transparent 65%);
  transition: opacity .4s ease;
}
.glow-card:hover::before{ opacity:1; }
.glow-card:hover{
  transform:translateY(-6px);
  border-color: rgba(239,68,68,0.45);
  box-shadow: 0 24px 55px -22px rgba(239,68,68,0.35), 0 20px 45px -25px rgba(0,0,0,0.6);
}
.glow-card.featured{ border-color: rgba(239,68,68,0.55); box-shadow: 0 0 0 1px rgba(239,68,68,0.25), 0 20px 50px -20px rgba(239,68,68,0.3); }
.glow-card.premium-glow{
  border-color: rgba(239,68,68,0.6);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.35), 0 0 40px rgba(239,68,68,0.25), 0 25px 55px -20px rgba(239,68,68,0.4);
  animation: premium-pulse 3.5s ease-in-out infinite;
}
@keyframes premium-pulse{
  0%,100%{ box-shadow: 0 0 0 1px rgba(239,68,68,0.35), 0 0 30px rgba(239,68,68,0.18), 0 25px 55px -20px rgba(239,68,68,0.35); }
  50%{ box-shadow: 0 0 0 1px rgba(239,68,68,0.5), 0 0 46px rgba(239,68,68,0.32), 0 25px 55px -20px rgba(239,68,68,0.45); }
}

/* ---------- arrow-nudge buttons ---------- */
.arrow-nudge svg, .arrow-nudge .arrow{ display:inline-block; transition: transform .3s cubic-bezier(.16,.84,.44,1); }
.arrow-nudge:hover svg, .arrow-nudge:hover .arrow{ transform:translateX(4px); }

/* ---------- magnetic primary CTAs ---------- */
.magnetic-btn{ transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s cubic-bezier(.16,.84,.44,1), background-color .3s ease; }
.magnetic-btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -10px rgba(239,68,68,0.5);
}

/* ---------- slider styling ---------- */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--crimson) var(--fill,0%), rgba(255,255,255,0.1) var(--fill,0%), rgba(255,255,255,0.1) 100%); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:#fff; border:4px solid var(--crimson); box-shadow:0 4px 14px rgba(239,68,68,0.4); cursor:pointer; transition:transform .15s ease;
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:#fff; border:4px solid var(--crimson); box-shadow:0 4px 14px rgba(239,68,68,0.4); cursor:pointer;
}
input[type=range]::-moz-range-track{ background:transparent; }

/* ---------- chart line draw-in ---------- */
.chart-line{ stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2.2s cubic-bezier(.16,.84,.44,1) forwards .3s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.step-num{ font-variant-numeric: tabular-nums; }

/* ---------- form fields (dark glass inputs) ---------- */
.field-input{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  color:#fff;
}
.field-input::placeholder{ color: rgba(255,255,255,0.32); }
.field-input:focus{ border-color: rgba(239,68,68,0.55); background: rgba(255,255,255,0.06); }

/* ---------- custom dark <select> (native option list styled where browsers allow it) ---------- */
.custom-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color: rgba(255,255,255,0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  color:#fff;
  cursor:pointer;
}
.custom-select option{
  background-color: #0C1019;
  color:#F8FAFC;
}

/* ==========================================================================
   PAGE-SPECIFIC: OUR EDGE — vertical timeline
   ========================================================================== */
.timeline-track{
  position:absolute; left:11px; top:4px; bottom:4px; width:2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
}
.timeline-node{
  box-shadow: 0 0 0 4px var(--ink), 0 0 18px rgba(239,68,68,0.55);
}
.leader-avatar{
  filter: grayscale(1) contrast(1.05);
  transition: filter .4s ease, transform .4s cubic-bezier(.16,.84,.44,1);
}
.leader-avatar-wrap:hover .leader-avatar{ filter: grayscale(0) contrast(1); transform:scale(1.06); }
.compliance-pill{ position:relative; }
.compliance-pill .pill-dot{ box-shadow:0 0 0 0 rgba(239,68,68,0.7); animation: pulse-ring 1.8s infinite; }

/* ==========================================================================
   PAGE-SPECIFIC: PLANS — toggle fade
   ========================================================================== */
.plan-tab[aria-selected="true"]{ background:#fff; color:var(--ink); }
.plan-tab[aria-selected="false"]{ color: var(--text-muted); }
.plan-tab[aria-selected="false"]:hover{ color:#fff; }
#grid-monthly, #grid-daily{ transition: opacity .35s ease, transform .35s ease; }
.grid-fade-out{ opacity:0; transform:translateY(6px); pointer-events:none; position:absolute; }
.grid-fade-in{ opacity:1; transform:translateY(0); }

.faq-item .faq-answer{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s cubic-bezier(.16,.84,.44,1); }
.faq-item .faq-answer-inner{ overflow:hidden; min-height:0; }
.faq-item.open .faq-answer{ grid-template-rows:1fr; }
.faq-chevron{ transition: transform .3s ease; }
.faq-item.open .faq-chevron{ transform: rotate(180deg); }

/* ==========================================================================
   PAGE-SPECIFIC: HOW IT WORKS — video player, stepper, math ledger
   ========================================================================== */
.video-frame{ background: linear-gradient(135deg, #12161f 0%, #080B11 100%); cursor:pointer; }
.play-btn{ box-shadow: 0 0 0 0 rgba(239,68,68,0.55); animation: play-pulse 2.4s infinite; }
@keyframes play-pulse{
  0%{ box-shadow:0 0 0 0 rgba(239,68,68,0.5); }
  70%{ box-shadow:0 0 0 22px rgba(239,68,68,0); }
  100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); }
}
.video-progress-track{ background: rgba(255,255,255,0.15); }
.video-progress-fill{ background: var(--crimson); width:0%; transition: width .2s linear; }
.video-frame.is-playing .video-progress-fill{ width:100%; transition: width 60s linear; }

.stepper-line{
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.18) 0 6px, transparent 6px 12px);
  transition: background 1.2s ease;
}
.stepper-line.filled{ background: var(--crimson); }

.tier-tab[aria-selected="true"]{ background:#fff; color:var(--ink); }
.tier-tab[aria-selected="false"]{ color: var(--text-muted); }
.tier-tab[aria-selected="false"]:hover{ color:#fff; }
#math-panel{ transition: opacity .3s ease; }
#math-panel.switching{ opacity:0; }
.math-row{ border-bottom:1px solid rgba(255,255,255,0.06); }
.math-row:last-child{ border-bottom:none; }
.ledger-num{ font-variant-numeric: tabular-nums; text-align:right; letter-spacing:-0.01em; }

/* ==========================================================================
   PAGE-SPECIFIC: CAREERS — accordions + dropzone
   ========================================================================== */
.dept-trigger .dept-chevron{ transition: transform .3s ease; }
.dept-item.open .dept-chevron{ transform: rotate(180deg); }
.dept-item .dept-panel{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .4s cubic-bezier(.16,.84,.44,1); }
.dept-item.open .dept-panel{ grid-template-rows:1fr; }
.dept-panel-inner{ overflow:hidden; min-height:0; }

.dropzone{
  border:1.5px dashed rgba(255,255,255,0.22);
  background: var(--glass-bg);
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.dropzone:hover, .dropzone.drag-over{
  border-color: rgba(239,68,68,0.55);
  background: rgba(239,68,68,0.06);
  transform: translateY(-2px);
}

/* ==========================================================================
   PAGE-SPECIFIC: CONNECT — dark map filter
   ========================================================================== */
.dark-map-wrap{ position:relative; overflow:hidden; }
.dark-map-wrap iframe{
  filter: grayscale(1) invert(92%) contrast(83%) brightness(94%);
  border:0; width:100%; height:100%; display:block;
}

/* ==========================================================================
   GLOBAL: PREMIUM IMAGE BLENDING
   Desaturates/darkens stock photography so it sits naturally on the dark
   theme; hovering brings the image to full color and life.
   ========================================================================== */
.premium-image-blend{
  filter: grayscale(100%) contrast(110%) brightness(0.8);
  mix-blend-mode: luminosity;
  transition: filter 0.5s ease, mix-blend-mode 0.5s ease;
}
.premium-image-blend:hover{
  filter: none;
  mix-blend-mode: normal;
}