/* ==========================================================================
   PHOENIX DIGI MARKETING — Design System v2 "Ember"
   Single source of truth: tokens, primitives, components.
   Loaded before pages.css on every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Surfaces — blue-black reads more premium than pure #000 */
  --ink-900:#05060A;
  --ink-850:#080A10;
  --ink-800:#0B0E16;
  --ink-700:#11141E;
  --ink-600:#171B27;
  --ink-500:#1F2432;

  /* Brand — flame */
  --flame-600:#E25A00;
  --flame-500:#FF6A00;
  --flame-400:#FF8A2B;
  --flame-300:#FFA84D;
  --flame-200:#FFC98C;
  --flame-grad:linear-gradient(135deg,#FF8A2B 0%,#FF6A00 55%,#E25A00 100%);
  --flame-grad-soft:linear-gradient(135deg,rgba(255,138,43,.18),rgba(226,90,0,.06));

  /* Support accents — used sparingly for data + trust cues */
  --ice-400:#4DA3FF;
  --mint-400:#2ED9A0;

  /* Text */
  --text-1:#F6F7F9;
  --text-2:rgba(246,247,249,.68);
  --text-3:rgba(246,247,249,.44);
  --text-4:rgba(246,247,249,.26);

  /* Lines */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --line-hot:rgba(255,106,0,.24);

  /* Glow + depth */
  --glow-sm:0 8px 24px -10px rgba(255,106,0,.45);
  --glow-md:0 18px 50px -14px rgba(255,106,0,.5);
  --shadow-1:0 2px 8px -2px rgba(0,0,0,.5);
  --shadow-2:0 16px 44px -18px rgba(0,0,0,.75);
  --shadow-3:0 34px 90px -30px rgba(0,0,0,.85);

  /* Radii */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:36px;
  --r-pill:999px;

  /* Motion */
  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --t-fast:.18s;
  --t-med:.34s;
  --t-slow:.6s;

  /* Layout */
  --container:1240px;
  --container-wide:1440px;
  --container-narrow:820px;
  --gutter:clamp(20px,4vw,40px);
  --nav-h:76px;

  /* Fluid type scale */
  --fs-xs:.78rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-md:1.0625rem;
  --fs-lg:clamp(1.1rem,.4vw + 1rem,1.25rem);
  --fs-h4:clamp(1.15rem,.6vw + 1rem,1.4rem);
  --fs-h3:clamp(1.35rem,1vw + 1.05rem,1.85rem);
  --fs-h2:clamp(1.95rem,2.6vw + 1rem,3.1rem);
  --fs-h1:clamp(2.4rem,4.4vw + .8rem,4.4rem);
  --fs-display:clamp(2.9rem,6vw + .6rem,5.6rem);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--ink-900);
  color:var(--text-1);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-base);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv02','cv03','cv04','ss01';
}

h1,h2,h3,h4,h5,h6{
  font-family:'Sora','Poppins',system-ui,sans-serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}

p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img,svg,video{max-width:100%;display:block}
img{height:auto}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

::selection{background:var(--flame-500);color:#0A0A0A}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-850)}
::-webkit-scrollbar-thumb{background:var(--ink-500);border-radius:var(--r-pill);border:2px solid var(--ink-850)}
::-webkit-scrollbar-thumb:hover{background:var(--flame-600)}

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--flame-400);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

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

/* Screen-reader only — used for SEO-meaningful headings that stay visually hidden */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Skip link — accessibility + a real UX signal */
.skip-link{
  position:absolute;top:-100px;left:16px;z-index:2000;
  background:var(--flame-500);color:#0A0A0A;
  padding:12px 22px;border-radius:var(--r-sm);font-weight:600;
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:16px}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-wide{max-width:var(--container-wide)}
.container-narrow{max-width:var(--container-narrow)}

.section{padding-block:clamp(64px,8vw,124px);position:relative}
.section-tight{padding-block:clamp(48px,5vw,80px)}
.section-flush{padding-block:0}

/* Alternating surface bands give long pages rhythm and improve dwell time */
.band{background:var(--ink-850);border-block:1px solid var(--line)}
.band-2{background:var(--ink-800);border-block:1px solid var(--line)}

.stack{display:flex;flex-direction:column}
.stack-sm{gap:10px}.stack-md{gap:20px}.stack-lg{gap:34px}
.row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}

.grid{display:grid;gap:clamp(16px,2vw,26px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
@media(max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
}

/* Bento — the signature layout of the redesign */
.bento{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.bento > *{grid-column:span 2}
.b-2{grid-column:span 2!important}
.b-3{grid-column:span 3!important}
.b-4{grid-column:span 4!important}
.b-6{grid-column:span 6!important}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento > *,.b-2,.b-3,.b-4,.b-6{grid-column:span 2!important}
}
@media(max-width:560px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento > *,.b-2,.b-3,.b-4,.b-6{grid-column:span 1!important}
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--flame-400);
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';width:24px;height:2px;
  background:var(--flame-grad);border-radius:2px;
}
.eyebrow.center{justify-content:center}

.section-head{max-width:720px;margin-bottom:clamp(36px,4vw,60px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin-bottom:18px}
.section-head p{color:var(--text-2);font-size:var(--fs-lg)}

.lede{font-size:var(--fs-lg);color:var(--text-2);max-width:62ch}
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}
.hot{color:var(--flame-400)}
.center-text{text-align:center}

/* Gradient text — reserved for one phrase per heading, never a whole heading */
.grad{
  background:linear-gradient(120deg,#FFC98C,#FF8A2B 45%,#FF6A00);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Prose block for blog / legal / long-form — critical for content SEO */
.prose{max-width:74ch;color:var(--text-2);font-size:var(--fs-md)}
.prose > * + *{margin-top:1.15em}
.prose h2{color:var(--text-1);font-size:var(--fs-h3);margin-top:2em;margin-bottom:.2em}
.prose h3{color:var(--text-1);font-size:var(--fs-h4);margin-top:1.6em;margin-bottom:.1em}
.prose a{color:var(--flame-400);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--flame-300)}
.prose strong{color:var(--text-1);font-weight:600}
.prose ul,.prose ol{padding-left:1.2em}
.prose ul li{list-style:disc;margin-bottom:.5em}
.prose ol li{list-style:decimal;margin-bottom:.5em}
.prose ul li::marker,.prose ol li::marker{color:var(--flame-500)}
.prose blockquote{
  border-left:3px solid var(--flame-500);
  padding:6px 0 6px 22px;color:var(--text-1);font-size:var(--fs-lg);
}
.prose code{
  background:var(--ink-700);border:1px solid var(--line);
  padding:2px 7px;border-radius:6px;font-size:.9em;color:var(--flame-300);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-py:15px;--btn-px:30px;
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--btn-py) var(--btn-px);
  border-radius:var(--r-pill);
  font-weight:600;font-size:var(--fs-sm);letter-spacing:.01em;
  white-space:nowrap;border:1px solid transparent;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),
             background var(--t-med) var(--ease),border-color var(--t-med) var(--ease),
             color var(--t-med) var(--ease);
}
.btn i,.btn svg{font-size:.9em;transition:transform var(--t-med) var(--ease)}
.btn:hover i.fa-arrow-right{transform:translateX(4px)}

.btn-primary{background:var(--flame-grad);color:#120800;box-shadow:var(--glow-sm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow-md)}

.btn-outline{border-color:var(--line-2);color:var(--text-1);background:rgba(255,255,255,.02)}
.btn-outline:hover{border-color:var(--flame-500);color:var(--flame-400);transform:translateY(-2px)}

.btn-ghost{background:var(--ink-700);border-color:var(--line);color:var(--text-1)}
.btn-ghost:hover{border-color:var(--line-hot);background:var(--ink-600);transform:translateY(-2px)}

.btn-sm{--btn-py:11px;--btn-px:22px;font-size:var(--fs-xs)}
.btn-lg{--btn-py:18px;--btn-px:38px;font-size:var(--fs-base)}
.btn-block{width:100%}

/* On narrow phones `white-space:nowrap` makes long CTA labels wider than the
   viewport, which forces the whole page to scroll sideways. Below 430px let
   the label wrap and give stacked CTA pairs the full width instead. */
@media(max-width:430px){
  .btn{white-space:normal;text-align:center;--btn-px:22px}
  .btn-lg{--btn-px:26px}
  .hero-actions .btn,
  .cta-band .row .btn,
  .page-hero .row .btn{width:100%}
  .hero-actions,.cta-band .row,.page-hero .row{width:100%}
}

/* Inline text link with arrow — used heavily for internal linking */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--flame-400);font-weight:600;font-size:var(--fs-sm);
  transition:gap var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.link-arrow:hover{gap:13px;color:var(--flame-300)}

.ripple{
  position:absolute;border-radius:50%;transform:scale(0);
  background:rgba(255,255,255,.32);pointer-events:none;
  animation:ripple .62s var(--ease-out);z-index:-1;
}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* --------------------------------------------------------------------------
   6. CHIPS / PILLS / BADGES
   -------------------------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-hot);
  background:rgba(255,106,0,.08);
  font-size:var(--fs-xs);font-weight:600;color:var(--flame-300);
  letter-spacing:.02em;
}
.pill-neutral{border-color:var(--line-2);background:rgba(255,255,255,.04);color:var(--text-2)}
.pill-mint{border-color:rgba(46,217,160,.28);background:rgba(46,217,160,.09);color:var(--mint-400)}

.badge-dot{
  width:7px;height:7px;border-radius:50%;background:var(--mint-400);
  box-shadow:0 0 0 3px rgba(46,217,160,.18);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{50%{opacity:.45}}

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card{
  position:relative;
  background:var(--ink-700);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,32px);
  transition:transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease),
             background var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--line-hot);
  background:var(--ink-600);
  box-shadow:var(--shadow-2);
}
.card h3{margin-bottom:10px}
.card p{color:var(--text-2);font-size:var(--fs-sm)}

/* Top hairline that lights up on hover */
.card-lit::before{
  content:'';position:absolute;inset:0 auto auto 0;
  height:1px;width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,transparent,var(--flame-500),transparent);
  opacity:0;transition:opacity var(--t-med) var(--ease);
}
.card-lit:hover::before{opacity:1}

.card-glass{
  background:rgba(23,27,39,.55);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-2);
}

.card-feature{
  background:
    radial-gradient(420px 240px at 100% 0%,rgba(255,106,0,.12),transparent 65%),
    var(--ink-700);
  border-color:var(--line-hot);
}

/* --------------------------------------------------------------------------
   8. ICON TILES
   -------------------------------------------------------------------------- */
.icon-tile{
  width:54px;height:54px;flex-shrink:0;
  border-radius:16px;
  display:grid;place-items:center;
  background:var(--flame-grad-soft);
  border:1px solid var(--line-hot);
  color:var(--flame-400);
  font-size:1.3rem;
  margin-bottom:20px;
  transition:background var(--t-med) var(--ease),color var(--t-med) var(--ease),
             transform var(--t-med) var(--ease);
}
.card:hover .icon-tile{
  background:var(--flame-grad);color:#120800;transform:scale(1.06) rotate(-5deg);
}
.icon-tile-sm{width:40px;height:40px;border-radius:12px;font-size:1rem;margin-bottom:0}

/* --------------------------------------------------------------------------
   9. NAVBAR
   -------------------------------------------------------------------------- */
.navbar{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  height:var(--nav-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--t-med) var(--ease),border-color var(--t-med) var(--ease),
             height var(--t-med) var(--ease),backdrop-filter var(--t-med) var(--ease);
}
.navbar.scrolled{
  background:rgba(5,6,10,.82);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom-color:var(--line);
  height:64px;
}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:20px}

.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark{width:40px;height:40px;flex-shrink:0}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-name{display:flex;flex-direction:column;line-height:1.06}
.brand-name b{font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.01em}
.brand-name span{font-size:.58rem;letter-spacing:.22em;color:var(--flame-400);font-weight:700}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links > li{position:relative}
.nav-links > li > a{
  display:flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav-links > li > a:hover{color:var(--text-1);background:rgba(255,255,255,.05)}
.nav-links > li > a[aria-current="page"]{color:var(--flame-400)}
.nav-links .caret{font-size:.6rem;opacity:.6;transition:transform var(--t-fast) var(--ease)}
.nav-links > li:hover .caret{transform:rotate(180deg)}

/* Mega menu — the main internal-linking surface for service pages */
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;
  width:min(760px,88vw);
  background:var(--ink-800);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  padding:24px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease),visibility var(--t-med);
}
.nav-links > li:hover .mega,.nav-links > li:focus-within .mega{
  opacity:1;visibility:visible;transform:translateY(0);
}
.mega-col-head{
  grid-column:1/-1;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
  padding:0 12px 8px;
}
.mega a{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 12px;border-radius:var(--r-sm);
  transition:background var(--t-fast) var(--ease);
}
.mega a:hover{background:rgba(255,255,255,.05)}
.mega a i{color:var(--flame-400);font-size:.95rem;margin-top:3px;width:18px;flex-shrink:0}
.mega a b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-1);font-family:inherit}
.mega a small{display:block;font-size:var(--fs-xs);color:var(--text-3);line-height:1.4}
.mega-footer{
  grid-column:1/-1;margin-top:10px;padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}

.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  width:40px;height:40px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;
  border:1px solid var(--line-2);
}
.nav-toggle span{
  height:2px;width:17px;background:var(--text-1);border-radius:2px;
  transition:transform var(--t-med) var(--ease),opacity var(--t-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1100px){
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;inset:0 0 0 auto;
    width:min(400px,86vw);
    background:var(--ink-850);
    border-left:1px solid var(--line);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;padding:calc(var(--nav-h) + 24px) 20px 40px;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform var(--t-slow) var(--ease);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links > li > a{padding:14px 16px;font-size:var(--fs-md)}
  .mega{
    position:static;width:auto;translate:none;opacity:1;visibility:visible;
    transform:none;background:transparent;border:none;box-shadow:none;
    padding:0 0 10px 12px;grid-template-columns:1fr;gap:0;
    max-height:0;overflow:hidden;
    transition:max-height var(--t-slow) var(--ease);
  }
  .nav-links > li:hover .mega{max-height:0}
  .nav-links > li.open .mega{max-height:900px}
  .mega-col-head{display:none}
  .mega a small{display:none}
  .nav-actions .btn span{display:none}
  .nav-actions .btn{--btn-px:16px}
}

.nav-scrim{
  position:fixed;inset:0;z-index:999;
  background:rgba(5,6,10,.7);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility var(--t-med);
}
.nav-scrim.show{opacity:1;visibility:visible}

/* --------------------------------------------------------------------------
   10. PAGE HERO (inner pages)
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(48px,7vw,96px)) clamp(48px,6vw,84px);
  border-bottom:1px solid var(--line);
  background:var(--ink-850);
}
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 82% -10%,rgba(255,106,0,.17),transparent 68%),
    radial-gradient(560px 360px at 6% 110%,rgba(77,163,255,.07),transparent 68%);
}
.page-hero > .container{position:relative;z-index:1}
.page-hero h1{max-width:17ch;margin-bottom:20px}
.page-hero .lede{max-width:60ch}

.breadcrumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--text-3);margin-bottom:20px;
}
.breadcrumb a{transition:color var(--t-fast)}
.breadcrumb a:hover{color:var(--flame-400)}
.breadcrumb i{font-size:.55rem;opacity:.5}
.breadcrumb [aria-current]{color:var(--text-2)}

/* --------------------------------------------------------------------------
   11. STATS
   -------------------------------------------------------------------------- */
.stats-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--ink-700);overflow:hidden;
}
.stat-item{padding:clamp(20px,2.4vw,30px);text-align:center;border-right:1px solid var(--line)}
.stat-item:last-child{border-right:none}
.stat-item .num{
  font-family:'Sora',sans-serif;font-weight:700;
  font-size:clamp(1.7rem,3vw,2.4rem);
  background:linear-gradient(120deg,#FFC98C,#FF6A00);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  line-height:1.1;
}
.stat-item .label{color:var(--text-3);font-size:var(--fs-xs);margin-top:8px;letter-spacing:.04em}
@media(max-width:760px){
  .stats-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-item{border-bottom:1px solid var(--line)}
  .stat-item:nth-child(2n){border-right:none}
  .stat-item:nth-last-child(-n+2){border-bottom:none}
}

/* --------------------------------------------------------------------------
   12. FAQ ACCORDION  (pairs with FAQPage schema)
   -------------------------------------------------------------------------- */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:900px;margin-inline:auto}
.faq-item{
  background:var(--ink-700);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--t-med) var(--ease),background var(--t-med) var(--ease);
}
.faq-item[open]{border-color:var(--line-hot);background:var(--ink-600)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px clamp(18px,2vw,26px);
  font-family:'Sora',sans-serif;font-weight:600;font-size:var(--fs-md);
  cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'\002B';flex-shrink:0;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-hot);color:var(--flame-400);
  display:grid;place-items:center;font-size:1.15rem;font-weight:400;
  transition:transform var(--t-med) var(--ease),background var(--t-med) var(--ease);
}
.faq-item[open] summary::after{
  content:'\2212';transform:rotate(180deg);
  background:var(--flame-grad);color:#120800;border-color:transparent;
}
.faq-item .faq-body{
  padding:0 clamp(18px,2vw,26px) 22px;
  color:var(--text-2);font-size:var(--fs-sm);max-width:78ch;
}
.faq-item .faq-body > * + *{margin-top:.9em}

/* --------------------------------------------------------------------------
   13. PROCESS RAIL
   -------------------------------------------------------------------------- */
.rail{position:relative;display:grid;gap:0}
.rail::before{
  content:'';position:absolute;left:23px;top:26px;bottom:26px;width:2px;
  background:linear-gradient(180deg,var(--flame-500),rgba(255,106,0,.06));
}
.rail-step{display:grid;grid-template-columns:48px 1fr;gap:22px;padding-block:20px;position:relative}
.rail-num{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink-700);border:1px solid var(--line-hot);
  font-family:'Sora',sans-serif;font-weight:700;color:var(--flame-400);
  position:relative;z-index:1;
}
.rail-step h3{font-size:var(--fs-h4);margin-bottom:6px}
.rail-step p{color:var(--text-2);font-size:var(--fs-sm);max-width:70ch}

/* --------------------------------------------------------------------------
   14. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative;overflow:hidden;
  border:1px solid var(--line-hot);border-radius:var(--r-xl);
  padding:clamp(34px,5vw,64px);
  background:
    radial-gradient(620px 320px at 88% 0%,rgba(255,106,0,.2),transparent 68%),
    radial-gradient(520px 300px at 0% 100%,rgba(255,106,0,.1),transparent 68%),
    var(--ink-800);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cta-band h2{font-size:var(--fs-h2);margin-bottom:12px;max-width:20ch}
.cta-band p{color:var(--text-2);max-width:52ch}
.cta-band .row{flex-shrink:0}

/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:var(--fs-xs);font-weight:600;color:var(--text-2);letter-spacing:.03em}
.field label .req{color:var(--flame-500)}
.input,.field input,.field textarea,.field select{
  width:100%;
  background:var(--ink-800);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  padding:14px 16px;
  font-size:var(--fs-sm);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:130px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23FF8A2B' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:11px;
  padding-right:42px;
}
.input:focus,.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--flame-500);background:var(--ink-700);
  box-shadow:0 0 0 3px rgba(255,106,0,.14);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-4)}
.field-error{font-size:var(--fs-xs);color:#FF6B6B;display:none}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#FF6B6B}
.field.invalid .field-error{display:block}

.form-note{font-size:var(--fs-xs);color:var(--text-3);line-height:1.55}
.form-status{
  padding:14px 18px;border-radius:var(--r-sm);font-size:var(--fs-sm);
  display:none;align-items:center;gap:10px;
}
.form-status.show{display:flex}
.form-status.ok{background:rgba(46,217,160,.1);border:1px solid rgba(46,217,160,.3);color:var(--mint-400)}
.form-status.err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);color:#FF8B8B}

/* Honeypot — spam trap, must stay visually hidden but present in DOM */
.hp-field{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0;pointer-events:none}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer{background:var(--ink-850);border-top:1px solid var(--line);padding-top:clamp(52px,6vw,84px)}
.footer-grid{
  display:grid;
  grid-template-columns:1.7fr repeat(4,1fr);
  gap:clamp(24px,3vw,44px);
  padding-bottom:clamp(36px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.footer h3{
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:18px;font-weight:700;
}
.footer li{margin-bottom:11px}
.footer li a{color:var(--text-2);font-size:var(--fs-sm);transition:color var(--t-fast),padding-left var(--t-fast)}
.footer li a:hover{color:var(--flame-400);padding-left:4px}
.footer-about p{color:var(--text-2);font-size:var(--fs-sm);margin:16px 0 20px;max-width:34ch}
.footer-contact{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.footer-contact a,.footer-contact span{
  display:flex;gap:11px;align-items:flex-start;
  font-size:var(--fs-sm);color:var(--text-2);transition:color var(--t-fast);
}
.footer-contact a:hover{color:var(--flame-400)}
.footer-contact i{color:var(--flame-500);margin-top:4px;width:15px;flex-shrink:0}

.social-row{display:flex;gap:10px}
.social-row a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;
  color:var(--text-2);
  transition:background var(--t-med) var(--ease),color var(--t-med) var(--ease),
             border-color var(--t-med) var(--ease),transform var(--t-med) var(--ease);
}
.social-row a:hover{background:var(--flame-grad);color:#120800;border-color:transparent;transform:translateY(-3px)}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:24px;font-size:var(--fs-xs);color:var(--text-3);
}
.footer-bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.footer-bottom a:hover{color:var(--flame-400)}

@media(max-width:1000px){.footer-grid{grid-template-columns:repeat(3,1fr)}.footer-about{grid-column:1/-1}}
@media(max-width:600px){.footer-grid{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------------------
   17. FLOATING UI
   -------------------------------------------------------------------------- */
.float-stack{
  position:fixed;right:18px;bottom:18px;z-index:900;
  display:flex;flex-direction:column;gap:10px;
}
.float-btn{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font-size:1.3rem;color:#fff;
  box-shadow:var(--shadow-2);
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
.float-btn:hover{transform:scale(1.08)}
.float-btn.wa{background:#25D366;box-shadow:0 10px 26px -8px rgba(37,211,102,.6)}
.float-btn.call{background:var(--flame-grad);color:#120800;box-shadow:var(--glow-sm)}

.back-top{
  position:fixed;left:18px;bottom:18px;z-index:900;
  width:44px;height:44px;border-radius:50%;
  background:var(--ink-700);border:1px solid var(--line-hot);
  display:grid;place-items:center;color:var(--flame-400);
  opacity:0;pointer-events:none;translate:0 10px;
  transition:opacity var(--t-med) var(--ease),translate var(--t-med) var(--ease);
}
.back-top.show{opacity:1;pointer-events:auto;translate:0 0}

.scroll-progress{
  position:fixed;inset:0 auto auto 0;height:3px;width:0;z-index:1200;
  background:var(--flame-grad);transition:width .1s linear;
}

/* --------------------------------------------------------------------------
   18. LOADER
   -------------------------------------------------------------------------- */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--ink-900);display:grid;place-items:center;
  transition:opacity var(--t-slow) var(--ease),visibility var(--t-slow) var(--ease);
}
.loader.hide{opacity:0;visibility:hidden}
.loader-mark{width:70px;height:70px;animation:pulse 1.5s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.65}}

/* --------------------------------------------------------------------------
   19. REVEAL (no-library scroll animation — replaces the AOS CDN)
   -------------------------------------------------------------------------- */
[data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-26px)}
[data-reveal="right"]{transform:translateX(26px)}
[data-reveal="zoom"]{transform:scale(.94)}

/* --------------------------------------------------------------------------
   20. UTILITIES
   -------------------------------------------------------------------------- */
.divider{height:1px;background:var(--line);width:100%}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:26px}.mt-4{margin-top:40px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:26px}.mb-4{margin-bottom:40px}
.full{width:100%}
.hide{display:none!important}
@media(max-width:768px){.hide-mobile{display:none!important}}
@media(min-width:769px){.hide-desktop{display:none!important}}