/*
Theme Name: Spyglaas
Theme URI: https://spyglaas.com
Author: TRILIAN Commerce Management
Author URI: https://trilianpay.com
Description: Clean, modern, minimalist theme for Spyglaas — AI-assisted payment application development. Built for spyglaas.com.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: spyglaas
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --ink:        #0B1020;
  --ink-80:     #2B3042;
  --ink-60:     #585E72;
  --ink-40:     #6B7183;
  --ink-20:     #C8CCD8;   /* decorative only — never text */
  --rule:       #E4E8F0;
  --rule-soft:  #EFF2F7;
  --paper:      #FFFFFF;
  --paper-2:    #F7F9FC;
  --blue:       #084ADA;
  --blue-deep:  #063BAE;
  --blue-pale:  #C0D1F7;
  --blue-wash:  #EDF2FD;

  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1360px;
  --r: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.08;margin:0;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-narrow{width:100%;max-width:880px;margin-inline:auto;padding-inline:var(--gutter);}

/* ============================================================
   3. TYPE SCALE
   ============================================================ */
.t-display{font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.035em;}
.t-h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.03em;}
.t-h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.55rem,2.9vw,2.4rem);line-height:1.12;letter-spacing:-.025em;}
.t-h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.22;letter-spacing:-.018em;}
.t-lead{font-size:clamp(1.03rem,1.35vw,1.26rem);line-height:1.58;color:var(--ink-80);}
.t-body{font-size:1rem;line-height:1.68;color:var(--ink-60);}
.t-small{font-size:.875rem;line-height:1.6;color:var(--ink-60);}

.label{
  font-family:var(--font-ui);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-40);
  display:inline-flex;align-items:center;gap:.6em;
}
.label::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--blue);flex:none;
}
.label--plain::before{display:none;}
.accent{color:var(--blue);}

/* ============================================================
   4. HEADER / FLOATING PILL NAV
   ============================================================ */
.site-header{
  position:fixed;inset:16px 0 auto 0;z-index:900;
  pointer-events:none;
  transition:transform .4s var(--ease);
}
.site-header.is-hidden{transform:none;} /* header stays pinned at all times */
.nav-pill{
  pointer-events:auto;
  width:min(calc(100% - 2*var(--gutter)), var(--maxw));
  margin-inline:auto;
  display:flex;align-items:center;gap:20px;
  padding:10px 10px 10px 20px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(1.7) blur(18px);
  backdrop-filter:saturate(1.7) blur(18px);
  border:1px solid var(--rule);
  border-radius:999px;
  box-shadow:0 1px 2px rgba(11,16,32,.03);
  transition:box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-stuck .nav-pill{
  box-shadow:0 10px 36px -14px rgba(11,16,32,.22);
  border-color:#DDE3EE;
}
.nav-brand{display:flex;align-items:center;flex:none;}
.nav-brand img{height:75px;width:auto;}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto;}
.nav-links a{
  position:relative;
  padding:8px 14px;border-radius:999px;
  font-size:.875rem;font-weight:450;color:var(--ink-80);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{color:var(--ink);background:var(--blue-wash);}
.nav-links a.is-current{color:var(--blue);}
.nav-pill .nav-cta,
.nav-links a.nav-cta{
  flex:none;display:inline-flex;align-items:center;gap:.55em;
  padding:10px 20px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:.875rem;font-weight:500;letter-spacing:-.005em;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.nav-pill .nav-cta:hover,
.nav-links a.nav-cta:hover{background:var(--blue);color:#fff;transform:translateY(-1px);}
.nav-toggle{display:none;flex:none;width:42px;height:42px;border-radius:999px;align-items:center;justify-content:center;background:var(--paper-2);}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:background .2s;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease);}
.nav-toggle span::before{top:-5px;} .nav-toggle span::after{top:5px;}
body.nav-open .nav-toggle span{background:transparent;}
body.nav-open .nav-toggle span::before{transform:translateY(5px) rotate(45deg);}
body.nav-open .nav-toggle span::after{transform:translateY(-5px) rotate(-45deg);}

@media (max-width: 880px){
  .nav-links{
    position:fixed;inset:98px var(--gutter) auto var(--gutter);
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
    padding:12px;margin:0;
    box-shadow:0 24px 60px -24px rgba(11,16,32,.3);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  }
  body.nav-open .nav-links{opacity:1;visibility:visible;transform:none;}
  .nav-links a{padding:13px 16px;border-radius:12px;font-size:1rem;}
  .nav-toggle{display:flex;margin-left:auto;}
  .nav-cta{display:none;}
  .nav-links .nav-cta{display:inline-flex;justify-content:center;margin-top:6px;}
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:14px 26px;border-radius:999px;
  font-size:.9375rem;font-weight:500;letter-spacing:-.005em;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  will-change:transform;
}
.btn svg{flex:none;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px -12px rgba(8,74,218,.7);}
.btn--primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(8,74,218,.75);}
.btn--ink{background:var(--ink);color:#fff;}
.btn--ink:hover{background:var(--blue);transform:translateY(-2px);}
.btn--ghost{border:1px solid var(--rule);color:var(--ink);background:#fff;}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px);}
.btn--light{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);color:#fff;}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45em;min-height:26px;
  font-size:.9375rem;font-weight:500;color:var(--blue);
}
.link-arrow svg{transition:transform .3s var(--ease);}
.link-arrow:hover svg{transform:translateX(4px);}

/* ============================================================
   6. SECTION SHELL
   ============================================================ */
.section{padding-block:clamp(72px,10vw,140px);position:relative;}
.section--tight{padding-block:clamp(56px,7vw,96px);}
.section--paper2{background:var(--paper-2);}
.section--ink{background:var(--ink);color:#fff;}
.section--ink .t-body,.section--ink .t-lead{color:rgba(255,255,255,.66);}
.section--ink .label{color:rgba(255,255,255,.62);}
.section--ink .label::before{background:var(--blue-pale);}
.section-head{max-width:760px;margin-bottom:clamp(36px,5vw,64px);}
.section-head .label{margin-bottom:18px;}
.section-head .t-h1,.section-head .t-h2{margin-bottom:20px;}
.hairline{height:1px;background:var(--rule);border:0;margin:0;}

/* ============================================================
   7. REVEAL ON SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{
  position:relative;
  padding-top:clamp(158px,17vw,214px);
  padding-bottom:clamp(56px,7vw,88px);
  overflow:hidden;
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(120% 75% at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(120% 75% at 50% 0%,#000 25%,transparent 78%);
}
.hero__inner{position:relative;z-index:2;}
.hero__eyebrow{margin-bottom:26px;}
.hero__title{max-width:17ch;margin-bottom:28px;}
.hero__title .ln{display:block;overflow:hidden;}
.hero__title .ln > span{display:block;transform:translateY(100%);transition:transform 1s var(--ease-out);}
.hero.is-ready .hero__title .ln > span{transform:none;}
.hero__title .ln:nth-child(2) > span{transition-delay:.1s}
.hero__title .ln:nth-child(3) > span{transition-delay:.2s}
.hero__lead{max-width:56ch;margin-bottom:36px;}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(52px,7vw,84px);}
.hero__rings{
  position:absolute;right:calc(-1 * clamp(40px,8vw,120px));top:clamp(60px,10vw,110px);
  width:clamp(360px,42vw,620px);aspect-ratio:1;z-index:1;
  opacity:.9;pointer-events:none;
}
.hero__rings circle{fill:none;}
@media (max-width:1080px){ .hero__rings{opacity:.26;right:-18vw;top:auto;bottom:-6vw;} }

.hero__strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
}
.hero__stat{padding:26px 24px 0 0;}
.hero__stat dt{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-40);margin-bottom:10px;font-weight:500;}
.hero__stat dd{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.1vw,1.85rem);letter-spacing:-.025em;line-height:1.1;}
.hero__stat dd small{display:block;font-family:var(--font-ui);font-weight:400;font-size:.8125rem;color:var(--ink-60);letter-spacing:0;margin-top:7px;line-height:1.45;}
@media (max-width:860px){ .hero__strip{grid-template-columns:repeat(2,1fr);gap:0;} .hero__stat{padding-bottom:22px;} }
@media (max-width:460px){ .hero__strip{grid-template-columns:1fr;} }

/* ============================================================
   9. MARQUEE
   ============================================================ */
.marquee{overflow:hidden;border-block:1px solid var(--rule);padding-block:18px;background:var(--paper);}
.marquee__track{display:flex;gap:56px;width:max-content;animation:slide 38s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__item{display:inline-flex;align-items:center;gap:.6em;font-size:.8125rem;color:var(--ink-40);white-space:nowrap;letter-spacing:.02em;}
.marquee__item b{color:var(--ink-80);font-weight:500;}
.marquee__item::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--blue-pale);}
@keyframes slide{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .marquee__track{animation:none;} }

/* ============================================================
   10. ABOUT / STORY
   ============================================================ */
.story{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,6vw,88px);align-items:start;}
@media (max-width:980px){ .story{grid-template-columns:1fr;} }
.story__aside{position:sticky;top:120px;}
@media (max-width:980px){ .story__aside{position:static;} }
.story__body > * + *{margin-top:26px;}
.story__body p{font-size:clamp(1rem,1.22vw,1.16rem);line-height:1.68;color:var(--ink-80);}
.story__body p.is-lead{font-family:var(--font-display);font-weight:500;font-size:clamp(1.22rem,1.95vw,1.6rem);line-height:1.34;letter-spacing:-.02em;color:var(--ink);}
.story__pull{
  border-left:2px solid var(--blue);
  padding:4px 0 4px 24px;margin-block:34px;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.12rem,1.65vw,1.4rem);line-height:1.38;letter-spacing:-.02em;color:var(--ink);
}
.story__facts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:14px;}
.story__fact{background:#fff;padding:20px 22px;}
.story__fact dt{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-40);font-weight:500;margin-bottom:7px;}
.story__fact dd{margin:0;font-size:.9375rem;color:var(--ink-80);line-height:1.5;}

/* ============================================================
   11. ECOSYSTEM MAP  (hub diagram)
   ============================================================ */
.eco{position:relative;}
.eco__stage{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(24px,4vw,56px);align-items:center;
}
@media (max-width:1040px){ .eco__stage{grid-template-columns:1fr;} }
.eco__canvas{position:relative;aspect-ratio:1/.82;min-height:420px;}
.eco__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.eco__svg path{fill:none;stroke:var(--rule);stroke-width:1;transition:stroke .3s var(--ease),stroke-width .3s var(--ease);}
.eco__svg path.is-lit{stroke:var(--blue);stroke-width:1.6;}
.eco__hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(104px,13vw,138px);aspect-ratio:1;border-radius:26px;
  background:var(--ink);display:grid;place-items:center;
  box-shadow:0 22px 50px -20px rgba(11,16,32,.5);
  z-index:3;
}
.eco__hub img{width:62%;}
.eco__node{
  position:absolute;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 9px 11px;border-radius:999px;
  background:#fff;border:1px solid var(--rule);
  font-size:.8125rem;font-weight:500;color:var(--ink-80);
  white-space:nowrap;cursor:pointer;z-index:4;
  box-shadow:0 2px 8px -4px rgba(11,16,32,.12);
  transition:border-color .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
}
.eco__node i{
  width:22px;height:22px;border-radius:7px;flex:none;
  background:var(--blue-wash);color:var(--blue);
  display:grid;place-items:center;
  font-size:.5625rem;font-weight:700;font-style:normal;letter-spacing:.02em;
  transition:background .28s var(--ease),color .28s var(--ease);
}
.eco__node:hover,.eco__node.is-active{
  border-color:var(--blue);color:var(--ink);
  box-shadow:0 14px 30px -14px rgba(8,74,218,.45);
  transform:translate(-50%,-50%) scale(1.045);
}
.eco__node.is-active i{background:var(--blue);color:#fff;}
.eco__node .dot{width:6px;height:6px;border-radius:50%;background:#16A34A;flex:none;margin-left:2px;}
.eco__node .dot--soon{background:var(--ink-20);}

.eco__panel{
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);background:#fff;
  min-height:360px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(11,16,32,.03);
}
.eco__pane{display:none;animation:fadeUp .45s var(--ease-out);}
.eco__pane.is-on{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.eco__pane h3{margin-bottom:8px;}
.eco__pane .eco__host{font-size:.8125rem;color:var(--blue);font-weight:500;margin-bottom:16px;display:block;word-break:break-all;}
.eco__pane p{font-size:.9375rem;line-height:1.68;color:var(--ink-60);margin-bottom:18px;}
.eco__tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;}
.eco__tags span{font-size:.75rem;padding:5px 11px;border-radius:999px;background:var(--paper-2);color:var(--ink-60);border:1px solid var(--rule-soft);}
.eco__pane .eco__status{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.eco__badge{display:inline-flex;align-items:center;gap:.5em;font-size:.75rem;font-weight:500;color:var(--ink-60);}
.eco__badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#16A34A;}
.eco__badge--soon::before{background:var(--ink-20);}

@media (max-width:1040px){
  .eco__canvas{display:none;}
  .eco__nodelist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
  .eco__panel{min-height:0;}
}
@media (min-width:1041px){ .eco__nodelist{display:none;} }
.eco__nodelist .eco__node{position:static;transform:none;}
.eco__nodelist .eco__node:hover,.eco__nodelist .eco__node.is-active{transform:none;}

/* ============================================================
   12. PRODUCT RAIL (horizontal scroll)
   ============================================================ */
.rail{position:relative;overflow:hidden;}
.rail__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap;}
.rail__viewport{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x mandatory;
  /* Snap must respect the track's leading padding, or the first card
     is pulled flush to the window edge and loses the grid alignment. */
  scroll-padding-inline-start:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.rail__viewport::-webkit-scrollbar{display:none;}
.rail__track{
  display:flex;gap:20px;padding-bottom:6px;width:max-content;
  padding-inline:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.card{
  scroll-snap-align:start;
  width:clamp(280px,31vw,392px);flex:none;
  border:1px solid var(--rule);border-radius:var(--r-lg);
  background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .32s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease);
}
.card:hover{border-color:var(--blue-pale);transform:translateY(-4px);box-shadow:0 26px 54px -26px rgba(11,16,32,.3);}
.card__shot{
  aspect-ratio:4/3;background:var(--paper-2);
  border-bottom:1px solid var(--rule);position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.card__shot svg{width:100%;height:100%;}
.card__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;}
.card__kicker{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-40);font-weight:500;margin-bottom:11px;}
.card__body h3{margin-bottom:9px;}
.card__body p{font-size:.875rem;line-height:1.65;color:var(--ink-60);margin-bottom:18px;}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.rail__nav{display:flex;gap:8px;}
.rail__btn{
  width:42px;height:42px;border-radius:999px;border:1px solid var(--rule);
  display:grid;place-items:center;background:#fff;
  transition:border-color .22s var(--ease),background .22s var(--ease),opacity .22s;
}
.rail__btn:hover{border-color:var(--ink);background:var(--ink);color:#fff;}
.rail__btn[disabled]{opacity:.3;pointer-events:none;}
.rail__progress{
  height:2px;background:var(--rule);position:relative;border-radius:2px;overflow:hidden;
  margin:26px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 0;
}
.rail__progress i{position:absolute;inset:0 auto 0 0;background:var(--ink);width:18%;border-radius:2px;transition:transform .12s linear;transform-origin:left;}

/* ============================================================
   13. STICKY PROCESS
   ============================================================ */
.proc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start;}
@media (max-width:980px){ .proc{grid-template-columns:1fr;} }
.proc__sticky{position:sticky;top:124px;}
@media (max-width:980px){ .proc__sticky{position:static;} }
.proc__counter{font-family:var(--font-display);font-weight:600;font-size:clamp(3.4rem,8vw,6rem);line-height:1;letter-spacing:-.04em;color:var(--blue);margin-bottom:10px;}
.proc__steps{counter-reset:s;}
.proc__step{
  border-top:1px solid var(--rule);
  padding:clamp(26px,3.4vw,42px) 0;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,32px);
  transition:opacity .5s var(--ease);
}
.proc__step:last-child{border-bottom:1px solid var(--rule);}
.proc__step .num{
  font-family:var(--font-display);font-weight:600;font-size:.8125rem;
  color:var(--ink-40);padding-top:.35em;letter-spacing:.04em;
  transition:color .4s var(--ease);
}
.proc__step.is-active .num{color:var(--blue);}
.proc__step h3{margin-bottom:10px;}
.proc__step p{font-size:.9375rem;line-height:1.68;color:var(--ink-60);}

/* ============================================================
   14. PARTNERS
   ============================================================ */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;}
.partner{
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px);background:#fff;
  display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.partner:hover{border-color:var(--blue-pale);transform:translateY(-3px);box-shadow:0 22px 46px -24px rgba(11,16,32,.25);}
.partner__logo{
  height:84px;display:flex;align-items:center;margin-bottom:20px;
}
.partner__logo img{max-height:84px;width:auto;}
.partner__logo .wordmark{
  font-family:var(--font-display);font-weight:600;font-size:1.22rem;letter-spacing:-.02em;color:var(--ink);
}
.partner__logo .wordmark em{font-style:normal;color:var(--blue);}
.partner__role{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-40);font-weight:500;margin-bottom:10px;}
.partner h3{margin-bottom:10px;}
.partner p{font-size:.9375rem;line-height:1.66;color:var(--ink-60);margin-bottom:18px;}
.partner__foot{margin-top:auto;}

/* ============================================================
   15. CTA BAND
   ============================================================ */
.cta{position:relative;overflow:hidden;}
.cta__bg{position:absolute;inset:0;pointer-events:none;opacity:.5;}
.cta__inner{position:relative;z-index:2;text-align:center;max-width:720px;margin-inline:auto;}
.cta__inner h2{margin-bottom:18px;}
.cta__inner p{margin-bottom:32px;}
.cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:#fff;padding-block:clamp(56px,7vw,84px) 32px;}
.foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,48px);padding-bottom:48px;}
@media (max-width:900px){ .foot__top{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .foot__top{grid-template-columns:1fr;} }
.foot__brand img{height:30px;margin-bottom:20px;}
.foot__brand p{font-size:.9375rem;line-height:1.66;color:rgba(255,255,255,.6);max-width:36ch;}
.foot__label{
  font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.58);font-weight:500;margin-bottom:16px;
  font-family:var(--font-ui);
}
.foot__col li+li{margin-top:5px;}
.foot__col a{
  font-size:.9375rem;color:rgba(255,255,255,.76);transition:color .2s;
  display:inline-flex;align-items:center;min-height:26px;
}
.foot__col a:hover{color:#fff;}
.foot__bot{
  border-top:1px solid rgba(255,255,255,.1);padding-top:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.8125rem;color:rgba(255,255,255,.58);
}

/* ============================================================
   17. DEMO HUB PAGE
   ============================================================ */
.gate{
  max-width:520px;margin-inline:auto;
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,42px);background:#fff;
  box-shadow:0 1px 2px rgba(11,16,32,.03);
}
.gate__mark{width:46px;margin-bottom:24px;border-radius:12px;}
.gate h1{margin-bottom:12px;}
.gate > p{font-size:.9375rem;line-height:1.66;color:var(--ink-60);margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-80);margin-bottom:7px;}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border-radius:11px;
  border:1px solid var(--rule);background:#fff;
  font-family:var(--font-ui);font-size:.9375rem;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,74,218,.12);
}
.field textarea{resize:vertical;min-height:118px;}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:540px){ .field--row{grid-template-columns:1fr;} }
.form-note{font-size:.75rem;color:var(--ink-40);line-height:1.6;margin-top:14px;}
.notice{padding:14px 16px;border-radius:11px;font-size:.875rem;line-height:1.55;margin-bottom:20px;}
.notice--ok{background:#ECFDF3;color:#05603A;border:1px solid #ABEFC6;}
.notice--err{background:#FEF3F2;color:#912018;border:1px solid #FECDCA;}
.notice--info{background:var(--blue-wash);color:var(--blue-deep);border:1px solid var(--blue-pale);}

.demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:20px;}
.demo{
  border:1px solid var(--rule);border-radius:var(--r-lg);background:#fff;
  padding:24px;display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.demo:hover{border-color:var(--blue-pale);transform:translateY(-3px);box-shadow:0 22px 46px -24px rgba(11,16,32,.25);}
.demo__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}
.demo__mark{width:36px;height:36px;border-radius:10px;background:var(--blue-wash);color:var(--blue);display:grid;place-items:center;font-size:.625rem;font-weight:700;flex:none;}
.demo h3{margin-bottom:8px;}
.demo p{font-size:.875rem;line-height:1.65;color:var(--ink-60);margin-bottom:18px;}
.demo__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pill{font-size:.6875rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--paper-2);color:var(--ink-60);border:1px solid var(--rule-soft);}
.pill--live{background:#ECFDF3;color:#05603A;border-color:#ABEFC6;}
.pill--soon{background:var(--paper-2);color:var(--ink-40);}

/* ============================================================
   18. CONTACT PAGE
   ============================================================ */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,6vw,80px);align-items:start;}
@media (max-width:940px){ .contact{grid-template-columns:1fr;} }
.contact__aside dl{margin:28px 0 0;}
.contact__aside dt{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-40);font-weight:500;margin-bottom:6px;}
.contact__aside dd{margin:0 0 22px;font-size:.9375rem;color:var(--ink-80);line-height:1.6;}
.contact__aside dd a{display:inline-flex;align-items:center;min-height:26px;}
.contact__aside dd a:hover{color:var(--blue);}
.contact__form{border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,38px);background:#fff;}

/* ============================================================
   19. PAGE HEADER (inner pages)
   ============================================================ */
.pagehead{padding-top:clamp(150px,16vw,196px);padding-bottom:clamp(32px,5vw,56px);position:relative;overflow:hidden;}
.pagehead__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(110% 80% at 50% 0%,#000 20%,transparent 75%);
}
.pagehead__inner{position:relative;z-index:2;max-width:780px;margin-inline:0;}
.pagehead .label{margin-bottom:18px;}
.pagehead h1{margin-bottom:18px;}

/* ============================================================
   20. UTILITIES
   ============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 20px;background:var(--ink);color:#fff;border-radius:0 0 10px 0;}
.skip-link:focus{left:0;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ============================================================
   21. HERO RINGS (SVG transform setup)
   ============================================================ */
.hero__rings .ring{
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform;
}
.hero__rings .ring--a{animation:drift 26s ease-in-out infinite;}
.hero__rings .ring--b{animation:drift 22s ease-in-out infinite reverse;}
@keyframes drift{
  0%,100%{opacity:1}
  50%{opacity:.78}
}
@media (prefers-reduced-motion: reduce){
  .hero__rings .ring{animation:none;}
}


/* ============================================================
   22. PROVIDER NETWORK BAND
   ============================================================ */
.netw{border-block:1px solid var(--rule);background:var(--paper);}
.netw__inner{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,72px);align-items:center;}
@media (max-width:980px){ .netw__inner{grid-template-columns:1fr;} }
.netw__lede .t-h2{margin:16px 0 14px;}
.netw__total{
  display:flex;align-items:baseline;gap:.5em;margin-top:22px;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;
}
.netw__total b{font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--blue);}
.netw__total span{font-family:var(--font-ui);font-weight:400;font-size:.9375rem;letter-spacing:0;color:var(--ink-60);}
.netw__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
}
@media (max-width:760px){ .netw__grid{grid-template-columns:repeat(2,1fr);} }
.netw__cell{background:#fff;padding:20px 18px;}
.netw__cell dt{
  font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-40);font-weight:500;margin-bottom:10px;line-height:1.4;min-height:2.8em;
}
.netw__cell dd{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}