/* =====================================================================
   theme.modern.css  — Codreum customer portal redesign (layered override)
   Loads AFTER style.css. Purely additive & reversible: remove the <link>
   to revert. No external fonts/origins. CSP-safe (no inline handlers here).
   v: m1
   ===================================================================== */

:root{
  /* --- new brand palette (anchored to the logo orb) --- */
  --cd-indigo:#5B4BE6;
  --cd-violet:#8B3FD0;
  --cd-magenta:#C13DA6;
  --cd-cyan:#14B8C4;
  --cd-ink:#0E1525;
  --cd-slate:#1B2438;
  --cd-slate-2:#243049;
  --cd-mist:#F7F8FB;
  --cd-surface:#FFFFFF;
  --cd-line:#E6E8F0;
  --cd-text:#10162A;
  --cd-text-soft:#5A6378;
  --cd-success:#16A34A;
  --cd-warn:#D97706;
  --cd-alarm:#DC2626;

  --cd-grad:linear-gradient(95deg,#5B4BE6 0%,#8B3FD0 48%,#C13DA6 100%);
  --cd-grad-soft:linear-gradient(135deg,rgba(91,75,230,.10),rgba(193,61,166,.08));
  --cd-radius:14px;
  --cd-radius-lg:20px;
  --cd-shadow:0 1px 2px rgba(16,22,42,.04),0 10px 30px rgba(16,22,42,.07);
  --cd-shadow-lg:0 24px 60px rgba(16,22,42,.14);
  --cd-ring:0 0 0 3px rgba(91,75,230,.30);

  /* re-point legacy tokens so existing components inherit the new brand */
  --brand:#5B4BE6;
  --ink:#10162A;
}

/* ---- base surface ---- */
body{
  background:
    radial-gradient(1200px 520px at 78% -8%,rgba(193,61,166,.07),transparent 60%),
    radial-gradient(1000px 460px at -6% 4%,rgba(91,75,230,.08),transparent 55%),
    var(--cd-mist);
  color:var(--cd-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  border-radius:12px; font-weight:500; letter-spacing:.1px;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn:focus-visible{ outline:none; box-shadow:var(--cd-ring); }
.btn:active{ transform:translateY(1px); }

.btn.primary,
.home-primary,
.labs-cta .btn.primary,
.plan-actions .btn.primary{
  background:var(--cd-grad); border:none; color:#fff;
  box-shadow:0 8px 22px rgba(123,58,208,.30);
}
.btn.primary:hover,
.home-primary:hover{ box-shadow:0 12px 30px rgba(123,58,208,.42); transform:translateY(-1px); }

.home-secondary,
.btn.ghost{
  background:rgba(255,255,255,.9); border:1px solid var(--cd-line); color:var(--cd-text);
  box-shadow:var(--cd-shadow);
}
.home-secondary:hover,
.btn.ghost:hover{ border-color:rgba(91,75,230,.5); color:var(--cd-indigo); }

/* =====================================================================
   Section rhythm + headers
   ===================================================================== */
.home-section,
.products-portal-feature,
.labs-flagship{ position:relative; }

.home-section__header h2,
.labs-sectionHd,
.labs-title{ letter-spacing:-.02em; }

/* shared "eyebrow" treatment */
.home-proofIntro__eyebrow,
.labs-proofIntro__eyebrow,
.portfolio-spotlight__eyebrow,
.labs-kicker,
.products-portal-feature__badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cd-indigo);
  background:rgba(91,75,230,.09);
  padding:5px 11px; border-radius:999px;
}

/* =====================================================================
   HERO
   ===================================================================== */
.home-hero{
  border-radius:var(--cd-radius-lg);
  background:
    radial-gradient(900px 380px at 88% -10%,rgba(193,61,166,.12),transparent 60%),
    linear-gradient(180deg,#fff,#fbfaff);
  border:1px solid var(--cd-line);
  box-shadow:var(--cd-shadow);
  overflow:hidden;
}
.home-hero__copy h1,
.home-hero__copy .home-title{
  letter-spacing:-.03em; line-height:1.02;
}
.home-heroPill,
.home-pill{
  border-radius:999px; border:1px solid var(--cd-line);
  background:rgba(255,255,255,.7); backdrop-filter:blur(6px);
  font-weight:500; color:var(--cd-text-soft);
}
.home-heroPill .dot-live,
.dot-live{
  background:var(--cd-cyan);
  box-shadow:0 0 0 3px rgba(20,184,196,.22);
}

/* trust pills under hero CTAs */
.home-pill{ transition:border-color .15s ease,color .15s ease; }
.home-pill:hover{ border-color:rgba(91,75,230,.45); color:var(--cd-indigo); }

/* the "browse the product" proof panel */
.home-hero__panel--proof,
.home-proofGallery{
  border-radius:var(--cd-radius-lg);
  border:1px solid var(--cd-line);
  background:var(--cd-surface);
  box-shadow:var(--cd-shadow);
  overflow:hidden;
}
.home-proofStats{ gap:12px; }
.home-proofStat{
  border-radius:var(--cd-radius);
  border:1px solid var(--cd-line);
  background:linear-gradient(180deg,#fff,#fafaff);
  transition:transform .14s ease,box-shadow .18s ease;
}
.home-proofStat:hover{ transform:translateY(-2px); box-shadow:var(--cd-shadow); }

/* =====================================================================
   MISSION / VISION / GOAL cards
   ===================================================================== */
.mission-grid{ gap:16px; }
.mission-card{
  border-radius:var(--cd-radius-lg);
  border:1px solid var(--cd-line);
  background:var(--cd-surface);
  box-shadow:var(--cd-shadow);
  position:relative; overflow:hidden;
  transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;
}
.mission-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--cd-grad);
}
.mission-card:hover{ transform:translateY(-3px); box-shadow:var(--cd-shadow-lg); border-color:rgba(91,75,230,.28); }

/* =====================================================================
   PORTFOLIO BROWSER (tracks + spotlight)
   ===================================================================== */
.portfolio-browser{
  border-radius:var(--cd-radius-lg);
  border:1px solid var(--cd-line);
  background:linear-gradient(180deg,#fff,#fbfbff);
  box-shadow:var(--cd-shadow);
  overflow:hidden;
}
.portfolio-track{
  border-radius:var(--cd-radius);
  border:1px solid var(--cd-line);
  background:var(--cd-surface);
  transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease;
}
.portfolio-track:hover{ transform:translateX(2px); border-color:rgba(91,75,230,.4); box-shadow:var(--cd-shadow); }
.portfolio-track.is-active,
.portfolio-track.is-target{
  border-color:transparent;
  background:var(--cd-grad-soft);
  box-shadow:inset 0 0 0 1.5px rgba(91,75,230,.45);
}
.portfolio-spotlight__visualWrap,
.portfolio-browser__spotlight{
  border-radius:var(--cd-radius-lg);
  overflow:hidden;
}
.portfolio-browser__spotlight{
  background:
    radial-gradient(600px 240px at 100% 0,rgba(20,184,196,.10),transparent 60%),
    linear-gradient(180deg,#fff,#f7f8ff);
  border:1px solid var(--cd-line);
  box-shadow:var(--cd-shadow);
}
.portfolio-spotlight__metric{
  border-radius:var(--cd-radius);
  background:var(--cd-grad-soft);
  border:1px solid rgba(91,75,230,.18);
}
.portfolio-spotlight__chips .chip,
.labs-trust .chip,
.portfolio-spotlight__chips span{
  border-radius:999px; border:1px solid var(--cd-line);
  background:#fff; color:var(--cd-text-soft); font-weight:500;
}

/* track visuals get the signature gradient wash */
.track-visual{
  background:var(--cd-grad)!important;
  position:relative;
}
.track-visual::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 0 0,rgba(255,255,255,.18),transparent 55%);
}

/* =====================================================================
   LIVE PRODUCT CARDS + carousel
   ===================================================================== */
.home-liveCards{ gap:16px; }
.home-liveCard,
.cs{
  border-radius:var(--cd-radius-lg);
  border:1px solid var(--cd-line);
  background:var(--cd-surface);
  box-shadow:var(--cd-shadow);
  transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;
}
.home-liveCard:hover,
.cs:hover{ transform:translateY(-3px); box-shadow:var(--cd-shadow-lg); border-color:rgba(91,75,230,.25); }
.cs-badge,
.home-liveCard__track{
  border-radius:999px; background:rgba(91,75,230,.10); color:var(--cd-indigo);
  font-weight:500; letter-spacing:.04em;
}
.home-liveGallery__pager .home-liveGallery__dot,
.home-liveGallery__dot{ background:var(--cd-line); }
.home-liveGallery__dot.is-active{ background:var(--cd-indigo); }

/* =====================================================================
   PRODUCTS PAGE — flagship hero, feature cards, plans
   ===================================================================== */
.products-portal-feature__hero,
.labs-flagship{
  border-radius:var(--cd-radius-lg);
  background:
    radial-gradient(820px 320px at 92% -12%,rgba(20,184,196,.10),transparent 60%),
    linear-gradient(180deg,#fff,#fbfaff);
  border:1px solid var(--cd-line);
  box-shadow:var(--cd-shadow);
}
.products-portal-feature__side .cs,
.products-portal-feature__side{ border-radius:var(--cd-radius-lg); }

/* dark spotlight column on products page (image 4) reads as premium ink */
.products-portal-feature__side[style],
.products-portal-feature__hero[style]{ /* keep inline bg but soften corners */
  border-radius:var(--cd-radius-lg);
}

.labs-featureGrid{ gap:16px; }
.labs-featureCard{
  border-radius:var(--cd-radius);
  border:1px solid var(--cd-line);
  background:var(--cd-surface);
  box-shadow:var(--cd-shadow);
  transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease;
}
.labs-featureCard:hover{ transform:translateY(-2px); box-shadow:var(--cd-shadow-lg); border-color:rgba(91,75,230,.25); }

.labs-capabilityCard{
  border-radius:var(--cd-radius);
  border:1px solid var(--cd-line);
  background:linear-gradient(180deg,#fff,#fafaff);
}
.labs-capabilityCard--roadmap{
  background:linear-gradient(180deg,#fff,#fdf6fb);
  border-color:rgba(193,61,166,.25);
}

/* =====================================================================
   PRICING — plan cards (image 6)
   ===================================================================== */
.pricing-grid{ gap:18px; }
.plan{
  border-radius:var(--cd-radius-lg);
  border:1px solid var(--cd-line);
  background:var(--cd-surface);
  box-shadow:var(--cd-shadow);
  transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--cd-shadow-lg); }
.plan.is-featured{
  border-color:transparent;
  box-shadow:inset 0 0 0 2px rgba(91,75,230,.55),var(--cd-shadow-lg);
}
.plan.is-featured::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--cd-grad);
  border-radius:var(--cd-radius-lg) var(--cd-radius-lg) 0 0;
}
.plan{ position:relative; overflow:hidden; }
.plan-badge{
  border-radius:999px; font-weight:500; letter-spacing:.04em;
  background:rgba(91,75,230,.10); color:var(--cd-indigo);
}
.plan.is-featured .plan-badge{ background:var(--cd-grad); color:#fff; }
.plan-price-main{ letter-spacing:-.03em; }
.plan-features li::before,
.managed-included-mark{ color:var(--cd-success); }
.plan-actions .btn{ width:100%; border-radius:12px; }

/* managed / selected-tier panels */
.managed-selected-tier,
.managed-card-context,
.products-sharedRoadmap__card{
  border-radius:var(--cd-radius-lg);
  border:1px solid var(--cd-line);
  background:var(--cd-surface);
  box-shadow:var(--cd-shadow);
}
.managed-tier-chip,
.managed-chip-text,
.managed-period-chip{
  border-radius:999px; border:1px solid var(--cd-line); background:#fff;
}
.managed-tier-chip.is-active,
.managed-chip-input:checked + .managed-chip-body{
  border-color:transparent; background:var(--cd-grad-soft);
  box-shadow:inset 0 0 0 1.5px rgba(91,75,230,.45);
}

/* =====================================================================
   PROOF GALLERY + placeholder tiles
   ===================================================================== */
.proof-carousel,
.home-proofGallery{ border-radius:var(--cd-radius-lg); }
.proof-carousel__group{
  border-radius:999px; border:1px solid var(--cd-line); background:#fff;
  color:var(--cd-text-soft); font-weight:500;
}
.proof-carousel__group.is-active{
  background:var(--cd-grad); color:#fff; border-color:transparent;
}
.proof-carousel img,
.home-proofGallery img,
.proof-lightbox__img{
  border-radius:var(--cd-radius);
  background:var(--cd-ink); /* graceful base behind any loading/placeholder image */
}
.proof-lightbox__dialog{ border-radius:var(--cd-radius-lg); }
.proof-lightbox__backdrop{ background:rgba(8,12,24,.62); backdrop-filter:blur(4px); }
.proof-lightbox__nav,
.proof-lightbox__close{
  border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12); color:#fff;
}
.proof-lightbox__nav:hover,
.proof-lightbox__close:hover{ background:rgba(255,255,255,.22); }

/* =====================================================================
   FOOTER — premium ink
   ===================================================================== */
.site-footer{
  background:
    radial-gradient(800px 300px at 90% 0,rgba(91,75,230,.16),transparent 60%),
    var(--cd-ink);
  color:#C7CCDA;
  border-top:1px solid rgba(255,255,255,.06);
}
.site-footer .foot-name{ color:#fff; letter-spacing:.2px; }
.site-footer .foot-h{ color:#fff; }
.site-footer a{ color:#C7CCDA; transition:color .15s ease; }
.site-footer a:hover{ color:#fff; }
.site-footer .social-ic{
  border:1px solid rgba(255,255,255,.16); border-radius:10px;
  color:#C7CCDA; transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.site-footer .social-ic:hover{ color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06); }

/* =====================================================================
   Motion, focus, accessibility
   ===================================================================== */
.cd-reveal{ opacity:0; transform:translateY(14px); }
.cd-reveal.cd-in{ opacity:1; transform:none; transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1); }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{ outline:none; box-shadow:var(--cd-ring); border-radius:8px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; }
  .cd-reveal{ opacity:1; transform:none; }
}

/* =====================================================================
   Responsive niceties
   ===================================================================== */
@media (max-width:860px){
  .topbar .nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .topbar .nav a{ white-space:nowrap; }
  .home-hero{ border-radius:var(--cd-radius); }
}