/* ==========================================================================
   FaasTrader — components.css
   One class per component, named for what it is (BEM-flavoured). No utility
   classes, no framework — every rule here exists because a real element on
   the page needed it, which is what keeps a hand-written system honest.
   ========================================================================== */

/* ---------------------------------- Progress + skip ---------------------------------- */
#progress{
  position:fixed; inset:0 auto auto 0; height:3px; width:0%;
  background: var(--grad-brand); z-index:200;
}

/* ---------------------------------- Nav ---------------------------------- */
.nav{
  position:sticky; top:0; z-index:100;
  background: color-mix(in srgb, var(--bg) 0%, transparent);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out);
}
.nav.is-scrolled{
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
}
.nav__bar{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
}
.nav__logo{ display:flex; align-items:center; gap:.5rem; height:70%; }
.nav__logo img{ height:100%; width:auto; }
.nav__links{ display:none; align-items:center; gap: var(--sp-md); }
.nav__link{
  position:relative; font-size: var(--fs-sm); font-weight:600; color: var(--text-muted);
  padding-block:.4rem;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background: var(--grad-brand); transition: width var(--dur-base) var(--ease-out);
}
.nav__link:hover{ color: var(--text); }
.nav__link:hover::after{ width:100%; }
.nav__actions{ display:none; align-items:center; gap:.6rem; }
.nav__toggle-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--text-muted); border:1px solid var(--border); transition: all var(--dur-fast) var(--ease-out);
}
.nav__toggle-btn:hover{ color: var(--brand-600); border-color: var(--brand-500); transform: rotate(14deg); }
.nav__burger{ display:flex; width:42px; height:42px; align-items:center; justify-content:center; }

.nav__mobile{
  border-top:1px solid transparent;
  max-height:0; overflow:hidden; opacity:0; visibility:hidden;
  transition: max-height var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.nav__mobile.is-open{
  max-height:420px; opacity:1; visibility:visible; border-top-color:var(--border);
  transition: max-height var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s linear;
}
.nav__mobile-inner{ padding-block: var(--sp-sm); display:flex; flex-direction:column; gap:.15rem; }
.nav__mobile .nav__link{ padding-block:.6rem; }
.nav__mobile-cta{ display:flex; gap:.6rem; margin-top:.75rem; }

@media (min-width: 900px){
  .nav__links, .nav__actions{ display:flex; }
  .nav__burger{ display:none; }
}

/* ---------------------------------- Buttons / CTAs ---------------------------------- */
.btn{
  --btn-fg:#fff;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .95em 1.7em; border-radius: var(--r-pill);
  font-weight:700; font-size: var(--fs-sm); white-space:nowrap;
  border:1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  will-change: transform;
}
.btn svg{ width:1em; height:1em; font-size:1.15em; }

.btn--primary{
  background: var(--grad-brand); color:#fff; box-shadow: var(--shadow-glow);
}
.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background: linear-gradient(135deg, var(--accent-teal), var(--brand-500) 130%);
  opacity:0; transition: opacity var(--dur-base) var(--ease-out);
}
.btn--primary:hover::before{ opacity:1; }
.btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(22,163,74,.34); }

.btn--outline{
  background:transparent; border-color: var(--brand-500); color: var(--brand-600);
}
.btn--outline:hover{ background: var(--brand-50); transform: translateY(-3px); }

.btn--ghost-light{ background:transparent; border-color: rgba(255,255,255,.5); color:#fff; }
.btn--ghost-light:hover{ background: rgba(255,255,255,.12); transform: translateY(-3px); }

.btn--white{ background:#fff; color: var(--brand-700); }
.btn--white:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.18); }

.btn--sm{ padding:.7em 1.25em; font-size: var(--fs-xs); }

.btn__ripple{
  position:absolute; border-radius:50%; background: rgba(255,255,255,.55);
  transform: scale(0); pointer-events:none; animation: btn-ripple .6s ease-out forwards;
}

/* ---------------------------------- Badge ---------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:.6em;
  background: var(--brand-50); color: var(--brand-700); border:1px solid color-mix(in srgb, var(--brand-500) 30%, transparent);
  padding:.45em 1em .45em .5em; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight:700;
}
.badge__dot{
  width:8px; height:8px; border-radius:50%; background: var(--brand-500);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-500) 20%, transparent);
}

/* ---------------------------------- Hero ---------------------------------- */
.hero{
  padding-block: var(--sp-xl) var(--sp-md);
  background: var(--grad-mesh), var(--bg);
  position:relative;
}
.hero__grid{
  display:grid; gap: var(--sp-lg); align-items:center;
}
.hero__title{ font-size: var(--fs-3xl); margin-block: .3em .35em; }
.hero__title .is-brand{ color: var(--brand-600); }
.hero__title .word{ display:inline-block; }
.hero__lede{ font-size: var(--fs-md); color: var(--text-muted); max-width:34ch; line-height:1.7; }
.hero__cta{ display:flex; flex-wrap:wrap; gap: .9rem; margin-top: var(--sp-sm); }
.hero__checks{ display:flex; flex-wrap:wrap; gap: 1.6rem .5rem; margin-top: var(--sp-md); font-size: var(--fs-sm); font-weight:600; color: var(--text-muted); }
.hero__checks li{ display:flex; align-items:center; gap:.5em; }
.hero__checks svg{ width:1.1em; height:1.1em; color: var(--brand-600); }

.hero__art{ position:relative; }

/* ---- Hero image slider: real horizontal sliding track (not a crossfade),
   auto-advanced by js/hero-slider.js. Overflow is clipped on the outer box,
   so every floating card must stay within its own slide's 0–100% bounds
   (see the inline offsets in the HTML) rather than poking past the edge. ---- */
.hero-slider{
  position:relative; overflow:hidden; border-radius: var(--r-lg);
  min-height: clamp(320px, 34vw, 440px);
}
.hero-slider__track{
  display:flex; height:100%; min-height:inherit;
  transition: transform .65s var(--ease-out);
}
.hero-slide{
  position:relative; flex:0 0 100%; min-height:inherit;
  display:flex; align-items:center; justify-content:center;
  padding: var(--sp-xs);
}
.hero-slide picture, .hero-slide img{
  max-width:100%; max-height: clamp(300px, 32vw, 420px);
  width:auto; height:auto; margin-inline:auto;
  filter: drop-shadow(0 20px 44px rgba(10,20,15,.18));
}
.hero-slider__arrow{
  position:absolute; top:50%; translate: 0 -50%; z-index:5;
  width:38px; height:38px; border-radius:50%;
  background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.hero-slider__arrow:hover{ background: var(--grad-brand); color:#fff; border-color:transparent; }
.hero-slider__arrow--prev{ left:8px; }
.hero-slider__arrow--next{ right:8px; }
.hero-slider__dots{
  position:absolute; left:50%; bottom:10px; translate: -50% 0; z-index:5;
  display:flex; gap:.4rem;
}
.hero-slider__dots button{
  width:7px; height:7px; border-radius:50%; background: rgba(11,20,36,.22);
  transition: all var(--dur-fast) var(--ease-out);
}
.hero-slider__dots button.is-active{ background: var(--brand-600); width:20px; border-radius:99px; }

.mock{
  border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-lg);
  border:1px solid color-mix(in srgb, var(--surface) 60%, transparent);
  background: var(--ink-900); padding: 14px; max-width:460px; margin-inline:auto;
}
.mock__chrome{ display:flex; gap:6px; margin-bottom:10px; }
.mock__chrome span{ width:9px; height:9px; border-radius:50%; }
.mock__chrome span:nth-child(1){ background:#ef4444; }
.mock__chrome span:nth-child(2){ background:#eab308; }
.mock__chrome span:nth-child(3){ background:#22c55e; }
.mock__screen{ background:#fff; border-radius: var(--r-sm); padding: var(--sp-sm); }
.mock__row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.mock__title{ font-weight:800; font-size: var(--fs-xs); color:var(--ink-900); }
.mock__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.75rem; }
.mock__stat{ border-radius: var(--r-sm); padding:.55rem; }
.mock__stat span{ display:block; }
.mock__stat .label{ font-size:.65rem; color:#8a94a4; }
.mock__stat .value{ font-weight:800; font-size:.8rem; color:var(--ink-900); }
.mock__bars{ display:flex; align-items:flex-end; gap:6px; height:70px; }
.mock__bar{ flex:1; border-radius:6px 6px 2px 2px; background: linear-gradient(180deg, var(--brand-500), var(--brand-700)); }

.float-card{
  position:absolute; background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); border:1px solid var(--border);
  padding: .85rem 1rem; animation: bob 6s ease-in-out infinite;
}
.float-card .label{ font-size:.68rem; color: var(--text-faint); }
.float-card .value{ font-weight:800; font-size: var(--fs-md); }
.float-card .delta{ font-size:.68rem; color: var(--brand-600); font-weight:700; }
.float-card .link{ font-size:.65rem; color: var(--brand-600); font-weight:700; }

/* ---------------------------------- Stats bar ---------------------------------- */
.stats{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-sm);
  display:grid; grid-template-columns:repeat(2,1fr); gap: var(--sp-sm);
}
.stat{ display:flex; align-items:center; gap: .8rem; min-width:0; }
.stat > div{ min-width:0; }
.stat__icon{
  width:44px; height:44px; border-radius: var(--r-sm); background: var(--brand-50);
  color: var(--brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat__value{ font-family: var(--font-display); font-weight:800; font-size: var(--fs-lg); }
.stat__label{ font-size: var(--fs-xs); color: var(--text-faint); }

/* ---------------------------------- Cards (generic surface) ---------------------------------- */
.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  transform-style: preserve-3d;
}
.card:hover{ box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card--pad{ padding: var(--sp-md); }

.tile{
  width:52px; height:52px; border-radius: var(--r-sm); background: var(--brand-50);
  color: var(--brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring), color var(--dur-base) var(--ease-out);
}
.card:hover .tile{ background: var(--grad-brand); color:#fff; transform: scale(1.08) rotate(-4deg); }

/* Why-choose */
.why{ padding-block: var(--sp-xl) var(--sp-sm); }
.why__grid{ display:grid; gap: var(--sp-sm); }
.why__card h3{ font-size: var(--fs-md); margin-block:.9rem .35rem; }
.why__card p{ font-size: var(--fs-sm); line-height:1.65; }

/* Modules grid */
.modules{ padding-block: var(--sp-xl); }
.modules__grid{ display:grid; gap: var(--sp-xs); grid-template-columns: repeat(2,1fr); }
.module{ display:flex; align-items:flex-start; gap:.8rem; padding: var(--sp-sm); min-width:0; }
.module > div{ min-width:0; }
.module h4{ font-size: var(--fs-sm); font-weight:800; margin-bottom:.15rem; }
.module p{ font-size: var(--fs-xs); }
.modules__more{ text-align:center; margin-top: var(--sp-md); }

/* ---------------------------------- Dark dashboard section ---------------------------------- */
.dashboard{
  background: var(--grad-dark); padding-block: var(--sp-2xl); color:#fff;
  position:relative; overflow:hidden;
}
.dashboard__grid{ display:grid; gap: var(--sp-lg); align-items:center; }
.dashboard h2{ color:#fff; font-size: var(--fs-2xl); margin-bottom:.5rem; }
.dashboard p{ color:#9aa7bb; max-width:38ch; font-size: var(--fs-md); line-height:1.7; }

.dashboard__art{ position:relative; min-height:340px; }
.glow-card{
  position:absolute; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px); border-radius: var(--r-md); padding:.85rem 1rem;
}
.glow-card .label{ font-size:.68rem; color:#9aa7bb; }
.glow-card .value{ font-weight:800; font-size: var(--fs-sm); color:#fff; }
.glow-card .delta{ font-size:.68rem; color:#4ade80; }

.dash-mock{ background:#0d1523; border-radius: var(--r-lg); padding: var(--sp-sm); max-width:400px; margin-inline:auto; box-shadow: var(--shadow-lg); border:1px solid rgba(255,255,255,.08); }
.dash-mock__row{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--sp-sm); }
.dash-mock__dot{ width:9px; height:9px; border-radius:50%; background: var(--brand-500); display:inline-block; margin-right:.5em; }
.dash-mock__label{ font-size:.75rem; font-weight:700; color:#e6ebf3; }
.dash-mock__screen{ background:#fff; border-radius: var(--r-sm); padding: var(--sp-sm); }

/* ---------------------------------- Feature carousel ---------------------------------- */
.features{ padding-block: var(--sp-xl) var(--sp-lg); }
.features__head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.features__nav{ display:flex; gap:.5rem; }
.arrow-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background: var(--surface);
  color: var(--text-muted); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: all var(--dur-fast) var(--ease-out);
}
.arrow-btn:hover{ background: var(--grad-brand); border-color: transparent; color:#fff; transform: scale(1.06); }
.arrow-btn--sm{ width:32px; height:32px; }

.feature-track{ display:flex; gap: var(--sp-sm); overflow-x:auto; scroll-snap-type:x mandatory; padding: .25rem .25rem var(--sp-xs); scrollbar-width:none; }
.feature-track::-webkit-scrollbar{ display:none; }
.feature-card{ scroll-snap-align:start; flex:0 0 320px; padding: var(--sp-sm); }
.feature-card h3{ font-size: var(--fs-md); margin-block:.8rem .5rem; }
.feature-card ul{ font-size: var(--fs-sm); color: var(--text-muted); line-height:2; }
.feature-card .learn{ display:inline-flex; align-items:center; gap:.35em; margin-top:.6rem; color: var(--brand-600); font-weight:700; font-size: var(--fs-sm); }
.feature-card .learn svg{ width:1em; height:1em; transition: transform var(--dur-fast) var(--ease-out); }
.feature-card:hover .learn svg{ transform: translateX(3px); }

/* ---------------------------------- Pills (complete feature set) ---------------------------------- */
.pillset{ padding-block: var(--sp-xl); background: var(--bg-alt); }
.pill-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--sp-xs); }
.pill{
  border:1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  padding: var(--sp-sm) var(--sp-2xs); text-align:center;
  transition: all var(--dur-fast) var(--ease-out);
}
.pill:hover{ border-color: var(--brand-500); background: var(--brand-50); transform: translateY(-3px); }
.pill svg{ color: var(--brand-600); margin-inline:auto; margin-bottom:.5rem; }
.pill span{ font-size: var(--fs-xs); font-weight:700; color: var(--text-muted); }

/* ---------------------------------- Industries ---------------------------------- */
.industries{ padding-block: var(--sp-xl); }
.industry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-md); }
.industry{ text-align:center; transition: transform var(--dur-base) var(--ease-out); }
.industry:hover{ transform: translateY(-4px); }
.industry__circ{
  width:64px; height:64px; border-radius:50%; background: var(--brand-50); color: var(--brand-600);
  display:flex; align-items:center; justify-content:center; margin: 0 auto .6rem;
  transition: all var(--dur-base) var(--ease-out);
}
.industry:hover .industry__circ{ background: var(--grad-brand); color:#fff; box-shadow: var(--shadow-glow); }
.industry span{ font-size: var(--fs-xs); font-weight:700; color: var(--text-muted); }

/* ---------------------------------- Insights (reports / hrm / testimonial) ---------------------------------- */
.insights{ padding-block: var(--sp-md) var(--sp-xl); }
.insights__grid{ display:grid; gap: var(--sp-sm); }
.insight h3{ font-size: var(--fs-md); margin-bottom: var(--sp-sm); }
.insight ul{ font-size: var(--fs-sm); color: var(--text-muted); line-height:2.1; margin-bottom: var(--sp-sm); }

.testimonial__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--sp-xs); }
.testimonial__stars{ color: var(--accent-amber); font-size: var(--fs-sm); margin-bottom: var(--sp-xs); letter-spacing:.1em; }
.testimonial__quote{ font-size: var(--fs-sm); color: var(--text-muted); line-height:1.75; margin-bottom: var(--sp-sm); min-height:5.6em; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.testimonial__body{ transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.testimonial__body.is-swapping{ opacity:0; transform: translateY(6px); }
.testimonial__person{ display:flex; align-items:center; gap:.75rem; }
.testimonial__avatar{
  width:38px; height:38px; border-radius:50%; background: var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size: var(--fs-sm); flex-shrink:0;
}
.testimonial__name{ font-weight:800; font-size: var(--fs-sm); }
.testimonial__role{ font-size: var(--fs-xs); color: var(--text-faint); }
.testimonial__dots{ display:flex; gap:.4rem; margin-top: var(--sp-sm); }
.testimonial__dots button{ width:7px; height:7px; border-radius:50%; background: var(--border-strong); transition: all var(--dur-fast) var(--ease-out); }
.testimonial__dots button.is-active{ background: var(--brand-600); width:20px; border-radius:99px; }

/* ---------------------------------- FAQ (visible, for people + GEO) ---------------------------------- */
/* ---------------------------------- Pricing ---------------------------------- */
.pricing{ padding-block: var(--sp-xl); }

.pricing__toggle{ display:flex; align-items:center; justify-content:center; gap: var(--sp-xs); margin-bottom: var(--sp-lg); }
.pricing__toggle-label{ font-size: var(--fs-sm); font-weight:600; color: var(--text-faint); transition: color var(--dur-fast) var(--ease-out); }
.pricing__toggle-label.is-active{ color: var(--text); }
.pricing__save{ display:inline-block; margin-left:.4em; padding:.15em .55em; border-radius:99px; background: var(--brand-50); color: var(--brand-700); font-size: var(--fs-xs); font-weight:700; }
.pricing__switch{
  position:relative; width:48px; height:26px; border-radius:99px; background: var(--border-strong);
  transition: background var(--dur-base) var(--ease-out); flex-shrink:0;
}
.pricing__switch.is-yearly{ background: var(--grad-brand); }
.pricing__switch-knob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-spring);
}
.pricing__switch.is-yearly .pricing__switch-knob{ transform: translateX(22px); }

.pricing__grid{ display:grid; gap: var(--sp-md); grid-template-columns:1fr; align-items:start; }
.pricing-card{ position:relative; text-align:left; }
.pricing-card h3{ font-size: var(--fs-md); margin-bottom:.35rem; }
.pricing-card__desc{ font-size: var(--fs-xs); min-height:2.6em; margin-bottom: var(--sp-sm); }
.pricing-card__price{ display:flex; align-items:baseline; gap:.15rem; margin-bottom:.25rem; }
.pricing-card__currency{ font-size: var(--fs-md); font-weight:700; color: var(--text-muted); }
.pricing-card__amount{ font-family: var(--font-display); font-size: var(--fs-2xl); font-weight:800; }
.pricing-card__amount--text{ font-size: var(--fs-xl); }
.pricing-card__period{ font-size: var(--fs-sm); color: var(--text-faint); }
.pricing-card__features{ display:flex; flex-direction:column; gap:.55rem; font-size: var(--fs-sm); color: var(--text-muted); }
.pricing-card__features li{ display:flex; align-items:center; gap:.55rem; }
.pricing-card__features svg{ width:16px; height:16px; color: var(--brand-600); flex-shrink:0; }
.pricing-card--featured{ border-color: var(--brand-500); box-shadow: var(--shadow-glow); }
.pricing-card__badge{
  position:absolute; top:-13px; left:50%; translate:-50% 0;
  background: var(--grad-brand); color:#fff; font-size: var(--fs-xs); font-weight:700;
  padding:.3em 1em; border-radius:99px; box-shadow: var(--shadow-sm);
}

/* ---------------------------------- Contact ---------------------------------- */
.contact{ padding-block: var(--sp-xl); }
.contact__grid{ display:grid; gap: var(--sp-lg); align-items:start; }
.contact-form{ display:flex; flex-direction:column; gap: var(--sp-sm); }
.contact-form__row{ display:grid; gap: var(--sp-sm); grid-template-columns:1fr; }
.contact-form__field{ display:flex; flex-direction:column; gap:.4rem; font-size: var(--fs-xs); font-weight:700; color: var(--text-muted); }
.contact-form__field input, .contact-form__field textarea{
  border:1px solid var(--border); border-radius: var(--r-sm); padding:.75rem .9rem;
  background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight:400;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  resize:vertical;
}
.contact-form__field input:focus, .contact-form__field textarea:focus{
  outline:none; border-color: var(--brand-500); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
}
.contact-form__status{ font-size: var(--fs-sm); font-weight:600; min-height:1.4em; margin:0; }
.contact-form__status[data-state="success"]{ color: var(--brand-600); }
.contact-form__status[data-state="error"]{ color:#dc2626; }

.faq{ padding-block: var(--sp-xl); background: var(--bg-alt); }
.faq__list{ max-width: var(--container-narrow); margin-inline:auto; display:flex; flex-direction:column; gap: var(--sp-xs); }
.faq-item{ background: var(--surface); border:1px solid var(--border); border-radius: var(--r-md); overflow:hidden; }
.faq-item__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-sm);
  padding: var(--sp-sm); text-align:left; font-weight:700; font-size: var(--fs-sm);
}
.faq-item__q svg{ flex-shrink:0; transition: transform var(--dur-base) var(--ease-out); color: var(--brand-600); }
.faq-item.is-open .faq-item__q svg{ transform: rotate(45deg); }
.faq-item__a{
  max-height:0; overflow:hidden; transition: max-height var(--dur-base) var(--ease-out);
  padding-inline: var(--sp-sm); font-size: var(--fs-sm); color: var(--text-muted); line-height:1.7;
}
.faq-item.is-open .faq-item__a{ max-height:220px; padding-bottom: var(--sp-sm); }

/* ---------------------------------- CTA banner ---------------------------------- */
.cta-banner{
  background: linear-gradient(120deg, var(--brand-700), var(--brand-500) 120%);
  padding-block: var(--sp-md);
}
.cta-banner__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--sp-sm); }
.cta-banner h2{ color:#fff; font-size: var(--fs-lg); margin-bottom:.3rem; }
.cta-banner p{ color: rgba(255,255,255,.85); font-size: var(--fs-sm); }
.cta-banner__btns{ display:flex; gap: .75rem; flex-wrap:wrap; }

/* ---------------------------------- Footer ---------------------------------- */
.footer{ background: var(--ink-950); color:#aab4c4; padding-block: var(--sp-lg) var(--sp-sm); }
.footer a{ color:#aab4c4; transition: color var(--dur-fast) var(--ease-out); }
.footer a:hover{ color:#fff; }
.footer h4{ color:#fff; font-weight:800; font-size: var(--fs-sm); margin-bottom: var(--sp-xs); }
.footer__grid{ display:grid; gap: var(--sp-md); padding-bottom: var(--sp-md); border-bottom:1px solid rgba(255,255,255,.08); }
.footer__brand{ display:flex; align-items:center; gap:.5rem; margin-bottom: var(--sp-2xs); }
.footer__mark{ width:30px; height:30px; border-radius:8px; background: var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.8rem; }
.footer__name{ font-weight:800; font-size: var(--fs-md); color:#fff; }
.footer__tagline{ font-size: var(--fs-xs); max-width:26ch; line-height:1.7; }
.footer__social{ display:flex; gap:.6rem; margin-top: var(--sp-sm); }
.social-icon{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition: all var(--dur-fast) var(--ease-out); }
.social-icon:hover{ background: var(--grad-brand); color:#fff; transform: translateY(-3px); }
.footer__links{ font-size: var(--fs-xs); line-height:2.2; }
.footer__contact{ display:flex; flex-direction:column; gap: .85rem; font-size: var(--fs-xs); }
.footer__contact li{ display:flex; align-items:flex-start; gap:.6rem; }
.footer__contact svg{ width:16px; height:16px; flex-shrink:0; margin-top:.15rem; color: var(--brand-500); }
.footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--sp-xs); padding-top: var(--sp-sm); font-size: var(--fs-xs); }
.footer__bottom span{ display:inline-flex; align-items:center; gap:.4em; }

/* ---------------------------------- Back to top ---------------------------------- */
.to-top{
  position:fixed; right: var(--sp-sm); bottom: var(--sp-sm); width:46px; height:46px; border-radius:50%;
  background: var(--ink-900); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg); z-index:90; opacity:0; pointer-events:none;
  transition: all var(--dur-base) var(--ease-out);
}
.to-top.is-visible{ opacity:1; pointer-events:auto; }
.to-top:hover{ background: var(--grad-brand); }

/* ---------------------------------- Custom cursor (desktop, fine pointer only) ---------------------------------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background: var(--brand-600); }
.cursor-ring{
  width:34px; height:34px; border:1.5px solid color-mix(in srgb, var(--brand-500) 55%, transparent);
  transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.cursor-ring.is-active{ width:52px; height:52px; border-color: var(--brand-600); background: color-mix(in srgb, var(--brand-500) 10%, transparent); }
html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button{ cursor:none; }

/* ---------------------------------- Media placeholder (for images the user will swap in) ---------------------------------- */
.media{
  position:relative; border-radius: var(--r-lg); overflow:hidden;
  background: var(--grad-brand-soft);
  display:flex; align-items:center; justify-content:center;
}
.media img{ width:100%; height:100%; object-fit:cover; }
.media__fallback{ color: var(--brand-600); opacity:.55; }