/* =========================================================================
   DXPAY — Design System & Site Stylesheet
   Brand: Indigo Ink / Emerald Teal / Vivid Violet on Soft Lavender-White
   ========================================================================= */

/* ---------- Fonts (Google Fonts) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Design Tokens ---------- */
:root{
  /* Color — brand */
  --c-primary:      #1E1B4B;   /* Indigo Ink — headings, nav, footer */
  --c-primary-600:  #171340;
  --c-secondary:    #0D9488;   /* Emerald Teal — links, secondary accents */
  --c-secondary-600:#0B7A70;
  --c-accent:       #6D4AFF;   /* Vivid Violet — primary CTAs, focus */
  --c-accent-600:   #5433DB;
  --c-accent-100:   #EDE9FF;

  /* Color — semantic */
  --c-success:      #12A472;
  --c-warning:      #C98A12;
  --c-error:        #E23F5C;

  /* Color — violet glow (accent sections & footer) */
  --c-sky-1:        #8B7CFA;
  --c-sky-2:        #5B3FE0;
  --c-sky-3:        #14103A;

  /* Color — surfaces & text */
  --c-bg:           #FFFFFF;   /* Pure white */
  --c-surface:      #FFFFFF;
  --c-surface-alt:  #F4F2FC;   /* Mist Lavender */
  --c-surface-dark: #14103A;   /* used for dark bands (footer, security) */
  --c-border:       #E6E1F5;
  --c-border-dark:  rgba(255,255,255,0.12);
  --c-text:         #1E1B4B;
  --c-text-soft:    #55516E;
  --c-text-muted:   #8B87A3;
  --c-text-inverse: #F7F5FF;

  /* Typography */
  --f-heading: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-xs:  0.75rem;   --lh-xs:  1.1rem;
  --fs-sm:  0.875rem;  --lh-sm:  1.35rem;
  --fs-base:1rem;      --lh-base:1.65rem;
  --fs-md:  1.125rem;  --lh-md:  1.75rem;
  --fs-lg:  1.25rem;   --lh-lg:  1.9rem;
  --fs-xl:  1.5rem;    --lh-xl:  2rem;
  --fs-2xl: 1.875rem;  --lh-2xl: 2.3rem;
  --fs-3xl: 2.375rem;  --lh-3xl: 2.7rem;
  --fs-4xl: 3rem;      --lh-4xl: 3.3rem;
  --fs-5xl: 3.75rem;   --lh-5xl: 4rem;

  /* Spacing (4px base) */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* Radius */
  --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px;

  /* Shadow (violet-tinted) */
  --sh-sm: 0 1px 2px rgba(30,27,75,0.06), 0 1px 1px rgba(30,27,75,0.04);
  --sh-md: 0 8px 24px rgba(30,27,75,0.10);
  --sh-lg: 0 20px 48px rgba(30,27,75,0.16);

  /* Motion */
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms;
  --ease: cubic-bezier(.4,0,.2,1);

  /* Layout */
  --container: 1200px;
  --header-h: 80px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
h1,h2,h3,h4{ font-family:var(--f-heading); font-weight:600; line-height:1.15; letter-spacing:-0.01em; color:var(--c-primary); }

/* Focus visibility — accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--c-accent);
  outline-offset:2px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:1rem; top:-60px;
  background:var(--c-primary); color:var(--c-text-inverse);
  padding:0.75rem 1.25rem; border-radius:var(--r-sm); z-index:999;
  transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{ top:1rem; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Type scale utility classes ---------- */
.h1{ font-size:var(--fs-5xl); line-height:var(--lh-5xl); font-weight:600; }
.h2{ font-size:var(--fs-4xl); line-height:var(--lh-4xl); font-weight:600; }
.h3{ font-size:var(--fs-3xl); line-height:var(--lh-3xl); font-weight:600; }
.h4{ font-size:var(--fs-2xl); line-height:var(--lh-2xl); font-weight:500; }
.eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--f-body); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--c-accent-600);
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--c-accent); border-radius:2px; }
.lead{ font-size:var(--fs-md); line-height:var(--lh-md); color:var(--c-text-soft); }

@media (max-width:980px){
  .h1{ font-size:var(--fs-4xl); line-height:var(--lh-4xl); }
  .h2{ font-size:var(--fs-3xl); line-height:var(--lh-3xl); }
  .h3{ font-size:var(--fs-2xl); line-height:var(--lh-2xl); }
}
@media (max-width:560px){
  .h1{ font-size:var(--fs-3xl); line-height:var(--lh-3xl); }
  .h2{ font-size:var(--fs-2xl); line-height:var(--lh-2xl); }
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-5); }
.section{ padding-block:var(--sp-9); }
.section-tight{ padding-block:var(--sp-7); }
@media (max-width:768px){
  .section{ padding-block:var(--sp-7); }
  .container{ padding-inline:var(--sp-4); }
}
.section-head{ max-width:640px; margin-bottom:var(--sp-7); }
.section-head.center{ margin-inline:auto; text-align:center; }
.surface-alt{ background:var(--c-surface-alt); }
.surface-dark{ background:var(--c-surface-dark); color:var(--c-text-inverse); }
.surface-dark h2,.surface-dark h3,.surface-dark h4{ color:var(--c-text-inverse); }

.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.85rem 1.5rem; border-radius:var(--r-pill);
  font-family:var(--f-body); font-weight:700; font-size:var(--fs-sm);
  border:1.5px solid transparent; white-space:nowrap;
  transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-accent{ background:var(--c-accent); color:#fff; box-shadow:var(--sh-sm); }
.btn-accent:hover{ background:var(--c-accent-600); box-shadow:var(--sh-md); }
.btn-primary{ background:var(--c-primary); color:var(--c-text-inverse); }
.btn-primary:hover{ background:var(--c-primary-600); }
.btn-outline{ background:transparent; border-color:var(--c-border); color:var(--c-text); }
.btn-outline:hover{ border-color:var(--c-primary); }
.btn-ghost-inverse{ background:transparent; border-color:rgba(247,245,255,0.35); color:var(--c-text-inverse); }
.btn-ghost-inverse:hover{ border-color:var(--c-text-inverse); }
.btn-lg{ padding:1rem 1.9rem; font-size:var(--fs-base); }
.btn-sm{ padding:0.6rem 1.1rem; font-size:var(--fs-xs); }
.btn svg{ width:16px; height:16px; }

.link-arrow{ display:inline-flex; align-items:center; gap:0.4rem; font-weight:700; color:var(--c-secondary); font-size:var(--fs-sm); }
.link-arrow svg{ width:14px; height:14px; transition:transform var(--dur-2) var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Header / Nav — floating pill ---------- */
.site-header{
  position:sticky; top:14px; z-index:100; height:68px;
  display:flex; align-items:center;
  width:calc(100% - 32px); max-width:1180px; margin-inline:auto;
  background:rgba(255,255,255,0.78); backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:var(--r-pill);
  box-shadow:0 1px 2px rgba(30,27,75,0.05), 0 12px 32px rgba(30,27,75,0.10);
  transition:box-shadow var(--dur-3) var(--ease), background var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
}
.site-header.is-scrolled{ background:rgba(255,255,255,0.94); box-shadow:0 1px 2px rgba(30,27,75,0.06), 0 18px 38px rgba(30,27,75,0.16); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); max-width:none; padding-inline:0.5rem 0.6rem; }
.brand{ display:flex; align-items:center; gap:0.6rem; font-family:var(--f-heading); font-weight:700; font-size:var(--fs-md); letter-spacing:-0.01em; color:var(--c-primary); flex-shrink:0; transition:opacity var(--dur-2) var(--ease); }
.brand:hover{ opacity:0.85; }
.brand-mark{
  width:36px; height:36px; flex-shrink:0; object-fit:contain; border-radius:50%;
  background:#FFFFFF; padding:2px;
  box-shadow:0 0 0 1.5px rgba(30,27,75,0.1), 0 2px 8px rgba(30,27,75,0.12);
  transition:box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.brand:hover .brand-mark{ box-shadow:0 0 0 1.5px var(--c-accent-600), 0 4px 12px rgba(30,27,75,0.18); transform:scale(1.04); }

.nav-primary{ display:flex; align-items:center; gap:var(--sp-4); }
.nav-primary > ul{
  display:flex; align-items:center; gap:0.15rem;
  background:rgba(30,27,75,0.05); border-radius:var(--r-pill); padding:0.3rem;
}
.nav-item{ position:relative; }
.nav-link{
  position:relative; display:flex; align-items:center; gap:0.3rem; padding:0.55rem 1.1rem;
  font-weight:600; font-size:var(--fs-sm); color:var(--c-text-soft); border-radius:var(--r-pill);
  transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.nav-link:hover{ color:var(--c-primary); }
.nav-link[aria-current="page"]{ color:#FFFFFF; background:var(--c-accent); box-shadow:0 4px 14px rgba(109,74,255,0.4); }
.nav-item.has-dropdown > .nav-link svg{ width:11px; height:11px; margin-top:1px; transition:transform var(--dur-2) var(--ease); }
.nav-item.is-open > .nav-link svg{ transform:rotate(180deg); }
.nav-item.is-open > .nav-link{ color:var(--c-primary); background:rgba(30,27,75,0.08); }

.dropdown{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:300px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:var(--sp-3); opacity:0; visibility:hidden;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
  display:grid; gap:2px;
}
.nav-item.is-open .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown a{ display:flex; gap:0.7rem; align-items:flex-start; padding:0.65rem 0.7rem; border-radius:var(--r-sm); transition:background var(--dur-2) var(--ease); }
.dropdown a:hover{ background:var(--c-surface-alt); }
.dropdown a:hover .d-ic{ background:var(--c-accent); color:#fff; }
.dropdown .d-ic{ width:34px; height:34px; flex-shrink:0; border-radius:9px; background:var(--c-accent-100); color:var(--c-accent-600); display:flex; align-items:center; justify-content:center; transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.dropdown .d-ic svg{ width:18px; height:18px; }
.dropdown strong{ display:block; font-size:var(--fs-sm); font-weight:700; }
.dropdown span{ display:block; font-size:var(--fs-xs); color:var(--c-text-muted); margin-top:2px; }

.nav-actions{ display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; padding-left:var(--sp-4); border-left:1px solid rgba(30,27,75,0.1); }
.nav-actions .btn{ padding:0.6rem 1.3rem; }
@media (max-width:980px){ .nav-actions{ border-left:none; padding-left:0; } }
.nav-actions .nav-login{ font-weight:700; font-size:var(--fs-sm); padding:0.6rem 0.2rem; transition:color var(--dur-2) var(--ease); }
.nav-actions .nav-login:hover{ color:var(--c-accent-600); }

.nav-toggle{ display:none; width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex-shrink:0; }
.nav-toggle .bar{ display:block; width:22px; height:2px; border-radius:2px; background:var(--c-primary); transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.nav-toggle.is-open .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2){ opacity:0; }
.nav-toggle.is-open .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Header: dark-glass pill over a hero-bg section, light glass once scrolled ---------- */
.site-header.nav-over-hero:not(.is-scrolled){
  position:absolute; top:14px; left:0; right:0;
  background:rgba(20,16,50,0.38); border-color:rgba(255,255,255,0.18); box-shadow:0 12px 32px rgba(6,4,20,0.3);
  color:#FFFFFF;
}
.site-header.nav-over-hero:not(.is-scrolled) .brand{ color:#FFFFFF; }
.site-header.nav-over-hero:not(.is-scrolled) .nav-primary > ul{ background:rgba(255,255,255,0.1); }
.site-header.nav-over-hero:not(.is-scrolled) .nav-link{ color:rgba(255,255,255,0.85); }
.site-header.nav-over-hero:not(.is-scrolled) .nav-link:hover{ color:#FFFFFF; }
.site-header.nav-over-hero:not(.is-scrolled) .nav-item.is-open > .nav-link{ color:#FFFFFF; background:rgba(255,255,255,0.14); }
.site-header.nav-over-hero:not(.is-scrolled) .nav-actions .nav-login{ color:rgba(255,255,255,0.9); }
.site-header.nav-over-hero:not(.is-scrolled) .nav-actions .nav-login:hover{ color:#FFFFFF; }
.site-header.nav-over-hero:not(.is-scrolled) .btn-outline{ border-color:rgba(255,255,255,0.5); color:#FFFFFF; }
.site-header.nav-over-hero:not(.is-scrolled) .nav-toggle .bar{ background:#FFFFFF; }
.site-header.nav-over-hero:not(.is-scrolled) .nav-actions{ border-left-color:rgba(255,255,255,0.3); }
@media (max-width:980px){
  .site-header.nav-over-hero:not(.is-scrolled){ position:sticky; background:rgba(255,255,255,0.94); color:inherit; }
  .site-header.nav-over-hero:not(.is-scrolled) .brand,
  .site-header.nav-over-hero:not(.is-scrolled) .nav-toggle .bar{ color:inherit; }
  .site-header.nav-over-hero:not(.is-scrolled) .nav-primary > ul{ background:rgba(30,27,75,0.05); }
  .site-header.nav-over-hero:not(.is-scrolled) .nav-toggle .bar{ background:var(--c-primary); }
}

@media (max-width:980px){
  .nav-toggle{ display:flex; }
  .nav-primary{
    position:fixed; inset:96px 16px auto 16px; background:var(--c-surface);
    border-radius:var(--r-lg); box-shadow:var(--sh-lg); border:1px solid var(--c-border);
    flex-direction:column; align-items:stretch; padding:var(--sp-5); max-height:calc(100vh - 116px); overflow-y:auto;
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), visibility var(--dur-3);
  }
  .nav-primary.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav-primary > ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; background:none; padding:0; }
  .nav-item{ border-bottom:1px solid var(--c-border); }
  .nav-link{ padding:1rem 0.2rem; width:100%; justify-content:space-between; border-radius:0; color:var(--c-text); }
  .nav-link:hover{ background:none; }
  .nav-link[aria-current="page"]{ background:none; box-shadow:none; color:var(--c-accent-600); }
  .nav-item.is-open > .nav-link{ background:none; }
  .dropdown{ position:static; transform:none; box-shadow:none; border:none; opacity:1; visibility:visible; display:none; width:100%; padding:0 0 0.75rem; }
  .nav-item.is-open .dropdown{ display:grid; transform:none; }
  .nav-actions{ flex-direction:column; align-items:stretch; margin-top:var(--sp-5); gap:var(--sp-3); border-left:none; padding-left:0; }
  .nav-actions .btn{ width:100%; }
}

/* ---------- Footer (faint black) ---------- */
.site-footer{
  position:relative; color:rgba(255,255,255,0.88); padding-block:var(--sp-7) var(--sp-6);
  background:#17161C;
}
.site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--c-accent), var(--c-sky-1) 55%, var(--c-secondary)); }

.footer-newsletter{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; margin-bottom:var(--sp-7); }
.footer-newsletter input::placeholder{ color:rgba(255,255,255,0.55); }

.footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--sp-6); padding-bottom:var(--sp-7); }
.footer-brand p{ color:rgba(255,255,255,0.68); margin-top:var(--sp-3); max-width:30ch; }
.footer-social{ display:flex; gap:0.6rem; margin-top:var(--sp-5); }
.footer-social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,0.25); border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.85); transition:border-color var(--dur-2), color var(--dur-2), background var(--dur-2); }
.footer-social a:hover{ border-color:var(--c-accent); color:#fff; background:rgba(109,74,255,0.35); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h5{ position:relative; display:inline-block; font-family:var(--f-body); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#FFFFFF; padding-bottom:0.7rem; margin-bottom:var(--sp-4); }
.footer-col h5::after{ content:""; position:absolute; left:0; bottom:0; width:20px; height:2px; border-radius:2px; background:var(--c-accent); }
.footer-col ul{ display:grid; gap:0.7rem; }
.footer-col a{ display:inline-flex; color:rgba(255,255,255,0.7); font-size:var(--fs-sm); transition:color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.footer-col a:hover{ color:#FFFFFF; transform:translateX(3px); }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,0.15); font-size:var(--fs-xs); color:rgba(255,255,255,0.55); }
.footer-bottom-links{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.footer-bottom-links a:hover{ color:#FFFFFF; }
@media (max-width:640px){ .footer-newsletter{ flex-direction:column; align-items:flex-start; } .footer-newsletter form{ width:100%; } .footer-newsletter input{ flex:1; } }
@media (max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .footer-top{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:var(--sp-9) var(--sp-8); overflow:hidden; }
.hero .container{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--sp-8); align-items:center; }
.hero-copy p.lead{ margin-top:var(--sp-4); max-width:46ch; }
.hero h1{ margin-top:var(--sp-4); }
.hero-cta{ display:flex; gap:var(--sp-4); margin-top:var(--sp-6); flex-wrap:wrap; }
.hero-meta{ display:flex; gap:var(--sp-6); margin-top:var(--sp-7); }
.hero-meta div strong{ display:block; font-family:var(--f-heading); font-size:var(--fs-xl); }
.hero-meta div span{ font-size:var(--fs-xs); color:var(--c-text-muted); }
.hero-art{ position:relative; aspect-ratio:1/1; }

/* ---------- Hero: section-scoped background image (does NOT trigger transparent nav) ---------- */
.about-hero-media{ position:absolute; inset:0; z-index:0; }
.about-hero-media img{ width:100%; height:100%; object-fit:cover; }
.about-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(18,14,48,0.90) 0%, rgba(30,27,75,0.78) 48%, rgba(30,27,75,0.4) 100%);
}
.about-hero .container{ position:relative; z-index:1; }
.about-hero .eyebrow{ color:#C9BBFF; }
.about-hero .eyebrow::before{ background:#C9BBFF; }
.about-hero h1{ color:#FFFFFF; }
.about-hero .hero-copy p.lead{ color:rgba(255,255,255,0.86); }
.about-hero .hero-meta div strong{ color:#FFFFFF; }
.about-hero .hero-meta div span{ color:rgba(255,255,255,0.65); }
.about-hero .btn-outline{ border-color:rgba(255,255,255,0.55); color:#FFFFFF; }
.about-hero .btn-outline:hover{ background:rgba(255,255,255,0.12); }
.about-hero .float-card{ background:rgba(255,255,255,0.96); }
.about-hero .hero-photo-blob path{ fill:rgba(255,255,255,0.14); }

/* ---------- Hero: full-bleed background image + glass content ---------- */
.hero-bg{ position:relative; min-height:660px; display:flex; align-items:center; overflow:hidden; padding-block:var(--sp-9); }
.hero-bg-media{ position:absolute; inset:0; z-index:0; }
.hero-bg-media img{ width:100%; height:100%; object-fit:cover; }
.hero-bg-overlay{
  position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(18,14,48,0.92) 0%, rgba(30,27,75,0.8) 45%, rgba(30,27,75,0.28) 100%);
}
.hero-bg-content{ position:relative; z-index:1; max-width:620px; }
.hero-bg-content .eyebrow{ color:#C9BBFF; }
.hero-bg-content .eyebrow::before{ background:#C9BBFF; }
.hero-bg-content h1{ color:#FFFFFF; margin-top:var(--sp-4); }
.hero-bg-content p.lead{ color:rgba(255,255,255,0.85); margin-top:var(--sp-4); max-width:48ch; }
.hero-bg-content .hero-cta{ margin-top:var(--sp-6); }

.glass-stats{ display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-7); }
.glass-card{
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:var(--r-md);
  padding:0.9rem 1.15rem;
  color:#FFFFFF;
  box-shadow:0 12px 32px rgba(20,14,58,0.28);
  display:flex; align-items:center; gap:0.7rem;
}
.glass-card .fc-icon{ background:rgba(255,255,255,0.18); color:#FFFFFF; }
.glass-card strong{ display:block; font-family:var(--f-heading); font-size:var(--fs-sm); color:#FFFFFF; }
.glass-card span{ display:block; font-size:var(--fs-xs); color:rgba(255,255,255,0.72); }
@media (max-width:640px){ .glass-stats{ flex-direction:column; } }

/* ---------- Sky-blue accent sections with glass tiles ---------- */
.surface-sky{
  position:relative; color:#FFFFFF;
  background:linear-gradient(135deg, var(--c-sky-3) 0%, var(--c-sky-2) 55%, var(--c-sky-1) 130%);
}
.surface-sky h2, .surface-sky h3, .surface-sky h4{ color:#FFFFFF; }
.surface-sky .eyebrow{ color:#C9BBFF; }
.surface-sky .eyebrow::before{ background:#C9BBFF; }
.surface-sky .lead{ color:rgba(255,255,255,0.8); }
.glass-tile{
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  text-align:center;
}
.glass-tile strong{ display:block; font-family:var(--f-heading); font-size:var(--fs-4xl); color:#FFFFFF; }
.glass-tile span{ font-size:var(--fs-sm); color:rgba(255,255,255,0.72); }

/* ---------- Hero photo + floating cards (image-driven hero) ---------- */
.hero-photo{ position:relative; }
.hero-photo-blob{ position:absolute; inset:-8% -10% -10% -6%; z-index:0; }
.hero-photo-frame{
  position:relative; z-index:1; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-lg); aspect-ratio:4/5; border:1px solid var(--c-border);
}
.hero-photo-frame img{ width:100%; height:100%; object-fit:cover; }
.float-card{
  position:absolute; z-index:2; display:flex; align-items:center; gap:0.7rem;
  background:var(--c-surface); border-radius:var(--r-md); box-shadow:var(--sh-lg);
  padding:0.85rem 1.1rem; border:1px solid var(--c-border); max-width:230px;
}
.fc-icon{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fc-icon svg{ width:18px; height:18px; }
.float-card .fc-icon.success{ background:rgba(30,142,90,0.14); color:var(--c-success); }
.float-card .fc-icon.accent{ background:var(--c-accent-100); color:var(--c-accent-600); }
.float-card strong{ display:block; font-size:var(--fs-sm); font-family:var(--f-heading); }
.float-card span{ display:block; font-size:var(--fs-xs); color:var(--c-text-muted); }
.float-card--top{ top:-6%; left:-12%; }
.float-card--bottom{ bottom:8%; right:-14%; }
.float-card--avatars{ display:flex; align-items:center; gap:0.6rem; top:38%; right:-16%; }
.avatar-stack{ display:flex; }
.avatar-stack .avatar{ width:28px; height:28px; font-size:10px; border:2px solid var(--c-surface); margin-left:-8px; }
.avatar-stack .avatar:first-child{ margin-left:0; }
@media (max-width:1180px){
  .float-card--top{ left:0; }
  .float-card--bottom{ right:0; }
  .float-card--avatars{ right:0; }
}
@media (max-width:980px){
  .hero-photo-frame{ aspect-ratio:16/11; }
  .float-card{ padding:0.65rem 0.85rem; max-width:190px; }
  .float-card--top{ top:-5%; left:4%; }
  .float-card--bottom{ bottom:-6%; right:4%; }
  .float-card--avatars{ display:none; }
}
@media (max-width:520px){
  .float-card{ position:static; margin-top:0.75rem; max-width:none; }
  .float-card--top, .float-card--bottom{ position:static; }
}

/* ---------- Real-photo section media ---------- */
.media-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); border:1px solid var(--c-border); }
.media-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-thumb img, .resource-thumb img{ width:100%; height:100%; object-fit:cover; }
.page-hero{ padding-block:var(--sp-8) var(--sp-7); text-align:center; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero .lead{ margin-inline:auto; margin-top:var(--sp-4); max-width:60ch; }
.page-hero h1{ margin-top:var(--sp-4); }

@media (max-width:980px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:420px; margin-inline:auto; }
  .hero-photo{ order:-1; max-width:420px; margin-inline:auto; }
}

@media (max-width:640px){
  .hero-bg{ min-height:auto; padding-block:var(--sp-8); }
  .hero-bg-content{ max-width:none; }
}

/* ---------- Trust / logo bar ---------- */
.trust-bar{ padding-block:var(--sp-6); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.trust-bar .container{ display:flex; align-items:center; gap:var(--sp-7); flex-wrap:wrap; justify-content:space-between; }
.trust-bar p{ font-size:var(--fs-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-text-muted); white-space:nowrap; }
.logo-row{ display:flex; gap:var(--sp-7); flex-wrap:wrap; align-items:center; }
.logo-row svg{ height:22px; width:auto; color:var(--c-text-soft); }

/* ---------- Cards ---------- */
.card{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-6); transition:transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:transparent; }
.card-icon{ width:52px; height:52px; border-radius:var(--r-md); background:var(--c-accent-100); color:var(--c-accent-600); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-5); }
.card-icon svg{ width:26px; height:26px; }
.card h3{ font-size:var(--fs-lg); margin-bottom:var(--sp-2); }
.card p{ color:var(--c-text-soft); font-size:var(--fs-sm); }
.card .link-arrow{ margin-top:var(--sp-4); }

/* ---------- Animated service cards (home) ---------- */
.svc-card{ position:relative; overflow:hidden; }
.svc-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--c-accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-3) var(--ease);
}
.svc-card:hover{ transform:translateY(-8px) scale(1.015); box-shadow:var(--sh-lg); border-color:transparent; }
.svc-card:hover::before{ transform:scaleX(1); }
.svc-card .card-icon{ transition:transform var(--dur-3) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.svc-card:hover .card-icon{ transform:scale(1.12) rotate(-6deg); }
.svc-card .link-arrow{ transition:gap var(--dur-2) var(--ease); }
.svc-card:hover .link-arrow{ color:var(--c-accent-600); }
.svc-card:hover .link-arrow svg{ transform:translateX(4px); }

.svc-grid .svc-card:nth-child(3n+1){ transition-delay:0s; }
.svc-grid .svc-card:nth-child(3n+2){ transition-delay:0.1s; }
.svc-grid .svc-card:nth-child(3n){ transition-delay:0.2s; }

.svc-grid .svc-card:nth-child(4n+1)::before{ background:var(--c-accent); }
.svc-grid .svc-card:nth-child(4n+1):hover .card-icon{ background:var(--c-accent-100); color:var(--c-accent-600); }
.svc-grid .svc-card:nth-child(4n+2)::before{ background:var(--c-secondary); }
.svc-grid .svc-card:nth-child(4n+2):hover .card-icon{ background:rgba(31,111,99,0.14); color:var(--c-secondary); }
.svc-grid .svc-card:nth-child(4n+3)::before{ background:var(--c-sky-2); }
.svc-grid .svc-card:nth-child(4n+3):hover .card-icon{ background:rgba(91,156,251,0.16); color:var(--c-sky-2); }
.svc-grid .svc-card:nth-child(4n)::before{ background:var(--c-primary); }
.svc-grid .svc-card:nth-child(4n):hover .card-icon{ background:rgba(30,27,75,0.08); color:var(--c-primary); }

@media (prefers-reduced-motion: reduce){
  .svc-card, .svc-card .card-icon, .svc-card::before{ transition:none; }
}

.product-card{ display:flex; flex-direction:column; gap:var(--sp-4); }
.product-card .tag{ align-self:flex-start; }

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.75rem; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700; }
.badge-teal{ background:rgba(31,111,99,0.12); color:var(--c-secondary); }
.badge-copper{ background:var(--c-accent-100); color:var(--c-accent-600); }
.badge-success{ background:rgba(30,142,90,0.12); color:var(--c-success); }
.badge-outline{ border:1px solid var(--c-border); color:var(--c-text-soft); }
.endpoint-badge{ display:inline-flex; align-items:center; padding:0.35rem 0.75rem; border-radius:var(--r-sm); background:var(--c-primary); color:#DCD9F0; font-family:'SFMono-Regular',Consolas,monospace; font-size:var(--fs-xs); font-weight:600; letter-spacing:0.01em; }

/* ---------- Steps / Journey timeline ---------- */
.timeline{ position:relative; display:grid; gap:var(--sp-7); grid-template-columns:repeat(4,1fr); counter-reset:step; }
.timeline::before{ content:""; position:absolute; top:26px; left:0; right:0; height:2px; background:var(--c-border); }
.timeline-step{ position:relative; padding-top:var(--sp-8); }
.timeline-step::before{ counter-increment:step; content:counter(step); position:absolute; top:0; left:0; width:52px; height:52px; border-radius:50%; background:var(--c-surface); border:2px solid var(--c-accent); color:var(--c-accent-600); font-family:var(--f-heading); font-weight:700; display:flex; align-items:center; justify-content:center; z-index:1; }
.timeline-step h4{ font-size:var(--fs-md); margin-bottom:var(--sp-2); }
.timeline-step p{ color:var(--c-text-soft); font-size:var(--fs-sm); }
@media (max-width:980px){
  .timeline{ grid-template-columns:1fr 1fr; }
  .timeline::before{ display:none; }
}
@media (max-width:560px){ .timeline{ grid-template-columns:1fr; } }

/* Vertical timeline (About / Careers) */
.v-timeline{ position:relative; padding-left:var(--sp-6); border-left:2px solid var(--c-border); display:grid; gap:var(--sp-7); }
.v-timeline-item{ position:relative; }
.v-timeline-item::before{ content:""; position:absolute; left:-31px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--c-accent); border:3px solid var(--c-bg); box-shadow:0 0 0 2px var(--c-accent); }
.v-timeline-item .year{ font-family:var(--f-heading); font-weight:600; color:var(--c-accent-600); }

/* ---------- Stats ---------- */
.stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); text-align:center; }
.stat strong{ display:block; font-family:var(--f-heading); font-size:var(--fs-4xl); color:var(--c-text-inverse); }
.stat span{ font-size:var(--fs-sm); color:rgba(247,245,255,0.65); }
@media (max-width:768px){ .stats-band{ grid-template-columns:1fr 1fr; } }

/* ---------- Accordion (FAQ) ---------- */
.accordion{ display:grid; gap:var(--sp-3); max-width:820px; margin-inline:auto; }
.accordion-item{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; }
.accordion-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:1.25rem 1.5rem; text-align:left; font-family:var(--f-heading); font-weight:600; font-size:var(--fs-md); }
.accordion-trigger svg{ width:20px; height:20px; flex-shrink:0; transition:transform var(--dur-2) var(--ease); color:var(--c-accent); }
.accordion-item.is-open .accordion-trigger svg{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height var(--dur-3) var(--ease); }
.accordion-panel-inner{ padding:0 1.5rem 1.25rem; color:var(--c-text-soft); font-size:var(--fs-sm); }

/* ---------- Founder quote & team ---------- */
.founder-quote{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-6); align-items:center; max-width:840px; margin-inline:auto; }
.founder-quote img{ width:104px; height:104px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.founder-quote blockquote{ font-family:var(--f-heading); font-size:var(--fs-lg); font-weight:500; line-height:1.5; color:var(--c-text); }
.founder-quote cite{ display:block; font-style:normal; margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--c-text-muted); }
.founder-quote cite strong{ color:var(--c-text); }
@media (max-width:640px){ .founder-quote{ grid-template-columns:1fr; text-align:center; } .founder-quote img{ margin-inline:auto; } }

.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.team-card{ text-align:center; }
.team-card img{ width:112px; height:112px; border-radius:50%; object-fit:cover; margin-inline:auto; }
.team-card strong{ display:block; margin-top:var(--sp-4); font-family:var(--f-heading); font-size:var(--fs-md); }
.team-card span{ display:block; font-size:var(--fs-sm); color:var(--c-text-muted); margin-top:0.2rem; }
@media (max-width:640px){ .team-grid{ grid-template-columns:1fr; max-width:280px; margin-inline:auto; } }

/* ---------- Testimonials ---------- */
.testimonial-card{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-5); height:100%; }
.testimonial-card .quote{ font-family:var(--f-heading); font-size:var(--fs-lg); font-weight:500; color:var(--c-text); }
.testimonial-person{ display:flex; align-items:center; gap:0.75rem; margin-top:auto; }
.avatar{ width:42px; height:42px; border-radius:50%; background:var(--c-secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-heading); font-weight:600; font-size:var(--fs-sm); flex-shrink:0; }
.testimonial-person strong{ display:block; font-size:var(--fs-sm); }
.testimonial-person span{ font-size:var(--fs-xs); color:var(--c-text-muted); }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); align-items:stretch; }
.price-card{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-6); display:flex; flex-direction:column; }
.price-card.featured{ border-color:var(--c-accent); box-shadow:var(--sh-lg); position:relative; }
.price-card .price{ font-family:var(--f-heading); font-size:var(--fs-4xl); margin:var(--sp-4) 0 var(--sp-2); }
.price-card .price span{ font-size:var(--fs-sm); color:var(--c-text-muted); font-family:var(--f-body); }
.price-card ul{ display:grid; gap:0.7rem; margin:var(--sp-6) 0; }
.price-card li{ display:flex; gap:0.6rem; font-size:var(--fs-sm); color:var(--c-text-soft); align-items:flex-start; }
.price-card li svg{ width:18px; height:18px; color:var(--c-success); flex-shrink:0; margin-top:2px; }
.price-card .btn{ margin-top:auto; }
@media (max-width:980px){ .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--c-border); border-radius:var(--r-md); }
table{ width:100%; border-collapse:collapse; min-width:640px; }
thead th{ background:var(--c-surface-alt); text-align:left; font-family:var(--f-heading); font-size:var(--fs-sm); padding:1rem 1.25rem; }
tbody td{ padding:1rem 1.25rem; font-size:var(--fs-sm); color:var(--c-text-soft); border-top:1px solid var(--c-border); }
tbody tr:hover{ background:var(--c-surface-alt); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; gap:var(--sp-5); min-width:0; }
.field{ display:grid; gap:0.5rem; min-width:0; }
.field label{ font-size:var(--fs-sm); font-weight:700; }
.field input, .field textarea, .field select{
  width:100%; min-width:0; box-sizing:border-box;
  padding:0.85rem 1rem; border:1.5px solid var(--c-border); border-radius:var(--r-sm);
  background:var(--c-surface); font-size:var(--fs-base); transition:border-color var(--dur-2) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--c-accent); }
.field input[readonly]{ background:var(--c-surface-alt); color:var(--c-text-soft); font-family:'SFMono-Regular',Consolas,monospace; font-size:var(--fs-sm); }
.field .hint{ font-size:var(--fs-xs); color:var(--c-text-muted); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); min-width:0; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.form-status{ padding:1rem 1.25rem; border-radius:var(--r-sm); font-size:var(--fs-sm); display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:rgba(30,142,90,0.12); color:var(--c-success); }
.form-status.err{ background:rgba(209,67,67,0.12); color:var(--c-error); }

/* ---------- Segmented toggle (partner type) ---------- */
.seg-toggle{ display:inline-flex; background:var(--c-surface-alt); border:1px solid var(--c-border); border-radius:var(--r-pill); padding:4px; gap:4px; }
.seg-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.seg-toggle label{ padding:0.7rem 1.6rem; border-radius:var(--r-pill); font-weight:700; font-size:var(--fs-sm); color:var(--c-text-soft); cursor:pointer; transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.seg-toggle input:checked + label{ background:var(--c-accent); color:#fff; }
.seg-toggle input:focus-visible + label{ outline:3px solid var(--c-accent); outline-offset:2px; }

/* ---------- Auth pages ---------- */
.auth-shell{ display:flex; align-items:center; justify-content:center; min-height:calc(100vh - var(--header-h) - 260px); padding-block:var(--sp-8); }
.auth-card{ width:100%; max-width:440px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-xl); padding:var(--sp-7); box-shadow:var(--sh-md); }
.auth-card .brand{ justify-content:center; margin-bottom:var(--sp-5); }
.auth-card h1{ font-size:var(--fs-2xl); text-align:center; }
.auth-card p.lead{ text-align:center; font-size:var(--fs-sm); margin-top:0.5rem; }
.auth-card form{ margin-top:var(--sp-6); }
.auth-check{ display:flex; align-items:center; gap:0.5rem; font-size:var(--fs-sm); color:var(--c-text-soft); }
.auth-foot{ text-align:center; font-size:var(--fs-sm); color:var(--c-text-soft); margin-top:var(--sp-6); }
.auth-foot a{ color:var(--c-secondary); font-weight:700; }
.auth-divider{ display:flex; align-items:center; gap:0.75rem; margin:var(--sp-6) 0; color:var(--c-text-muted); font-size:var(--fs-xs); }
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:var(--c-border); }
.dashboard-shell{ padding-block:var(--sp-8); }
.dashboard-card{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-6); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--c-primary); border-radius:var(--r-xl); padding:var(--sp-8); text-align:center; color:var(--c-text-inverse); position:relative; overflow:hidden; }
.cta-band h2{ color:var(--c-text-inverse); }
.cta-band p{ color:rgba(247,245,255,0.72); max-width:52ch; margin:var(--sp-4) auto var(--sp-6); }
.cta-actions{ display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; }

/* ---------- Compact service chips ---------- */
.chip-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-4); }
.service-chip{ display:flex; flex-direction:column; align-items:flex-start; gap:0.75rem; padding:var(--sp-5); background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md); transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.service-chip:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); border-color:transparent; }
.service-chip .chip-icon{ width:40px; height:40px; border-radius:10px; background:var(--c-accent-100); color:var(--c-accent-600); display:flex; align-items:center; justify-content:center; }
.service-chip .chip-icon svg{ width:20px; height:20px; }
.service-chip span{ font-size:var(--fs-sm); font-weight:700; color:var(--c-text); }
@media (max-width:980px){ .chip-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .chip-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Rotating tagline strip ---------- */
.tagline-strip{ background:var(--c-surface-alt); border-bottom:1px solid var(--c-border); padding-block:0.9rem; }
.tagline-strip .container{ display:flex; justify-content:center; }
.tagline-rotator{ position:relative; height:1.4rem; width:100%; max-width:640px; }
.tagline-rotator span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .7s ease; font-size:var(--fs-sm); font-weight:600; color:var(--c-text-soft); text-align:center; white-space:nowrap; }
.tagline-rotator span.is-active{ opacity:1; }
@media (max-width:560px){ .tagline-rotator span{ white-space:normal; font-size:var(--fs-xs); } }

/* ---------- Carousel ---------- */
.carousel{ position:relative; }
.carousel-viewport{ overflow:hidden; }
.carousel-track{ display:flex; transition:transform var(--dur-3) var(--ease); }
.carousel-track > *{ min-width:100%; }
.carousel-controls{ display:flex; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-6); }
.carousel-controls button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--c-border); display:flex; align-items:center; justify-content:center; transition:border-color var(--dur-2); }
.carousel-controls button:hover{ border-color:var(--c-accent); color:var(--c-accent); }
.carousel-controls svg{ width:18px; height:18px; }

/* ---------- Blog ---------- */
.blog-card{ display:flex; flex-direction:column; gap:var(--sp-4); }
.blog-thumb{ aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden; }
.blog-meta{ display:flex; gap:var(--sp-4); font-size:var(--fs-xs); color:var(--c-text-muted); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Utilities ---------- */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-2{ gap:var(--sp-2);} .gap-3{ gap:var(--sp-3);} .gap-4{ gap:var(--sp-4);} .gap-5{ gap:var(--sp-5);}
.mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)} .mt-7{margin-top:var(--sp-7)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.text-center{ text-align:center; }
.text-muted{ color:var(--c-text-muted); }
.max-w-prose{ max-width:70ch; }
.divider{ height:1px; background:var(--c-border); border:none; margin:var(--sp-7) 0; }

/* ---------- Back to top ---------- */
.back-to-top{ position:fixed; right:var(--sp-5); bottom:var(--sp-5); width:48px; height:48px; border-radius:50%; background:var(--c-primary); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:all var(--dur-2) var(--ease); z-index:90; box-shadow:var(--sh-md); }
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top svg{ width:20px; height:20px; }

/* ---------- Legal pages ---------- */
.legal-body h2{ font-size:var(--fs-xl); margin-top:var(--sp-7); margin-bottom:var(--sp-3); }
.legal-body h3{ font-size:var(--fs-md); margin-top:var(--sp-6); margin-bottom:var(--sp-2); }
.legal-body p, .legal-body li{ color:var(--c-text-soft); font-size:var(--fs-sm); margin-bottom:var(--sp-3); }
.legal-body ul{ list-style:disc; padding-left:1.4rem; }
.legal-toc{ background:var(--c-surface-alt); border-radius:var(--r-md); padding:var(--sp-5); position:sticky; top:calc(var(--header-h) + 16px); }
.legal-toc a{ display:block; padding:0.4rem 0; font-size:var(--fs-sm); color:var(--c-text-soft); }
.legal-toc a:hover{ color:var(--c-accent-600); }
.legal-layout{ display:grid; grid-template-columns:260px 1fr; gap:var(--sp-8); align-items:start; }
@media (max-width:860px){ .legal-layout{ grid-template-columns:1fr; } .legal-toc{ position:static; } }