/* ==========================================================================
   PELOTRIX INNOVATIONS — DESIGN SYSTEM
   Colour derived from the Pelotrix logo:
     navy wordmark  #06183E
     electric blue  #005AFC
     mid blue       #0367E2
   Typography: Calibri (Carlito is the metric-compatible open fallback)
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Brand */
  --ink-900:#06183E;   /* logo navy — darkest surface + headline colour   */
  --ink-800:#0A1F4A;
  --ink-700:#12294F;
  --ink-600:#1C3563;

  --blue-600:#0B4FE0;  /* primary action                                   */
  --blue-500:#005AFC;  /* logo electric blue — accents, never large areas  */
  --blue-400:#3B7DFF;
  --blue-200:#A8C4FF;
  --blue-050:#EDF3FF;

  /* Neutrals */
  --paper:#FFFFFF;
  --paper-alt:#F7F8FA;
  --paper-alt2:#F1F3F7;
  --line:#E2E6ED;
  --line-2:#CBD2DE;
  --text:#1B2436;
  --text-2:#5A6478;
  --text-3:#8C95A6;
  --on-dark:#FFFFFF;
  --on-dark-2:#B9C4DA;
  --on-dark-3:#7E8CAA;
  --line-dark:rgba(255,255,255,.13);

  /* Product accents (used only inside their own product pages) */
  --calypr:#0B4FE0;
  --calypr-warm:#FF7A1A;   /* alert / hazard signal only                   */
  --fin-teal:#0E8C8C;      /* platform data-viz secondary                  */

  /* Type */
  --font: Calibri, Carlito, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.6rem, 5.4vw, 4.6rem);
  --fs-h1: clamp(2.2rem, 4.2vw, 3.5rem);
  --fs-h2: clamp(1.85rem, 3.1vw, 2.75rem);
  --fs-h3: clamp(1.3rem, 1.9vw, 1.6rem);
  --fs-h4: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-small:.9375rem;
  --fs-label:.75rem;

  /* Space */
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1280px;
  --max-narrow: 860px;
  --sec-y: clamp(72px, 9vw, 132px);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.5s;

  --radius:4px;
  --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(6,24,62,.06), 0 4px 14px rgba(6,24,62,.05);
  --shadow-md:0 2px 6px rgba(6,24,62,.07), 0 18px 44px rgba(6,24,62,.09);
  --nav-h:76px;
}

@media (max-width:900px){ :root{ --nav-h:64px; } }

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,h5{margin:0; font-weight:700; line-height:1.12; letter-spacing:-.018em; color:var(--ink-900)}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--blue-500); color:#fff}
:focus-visible{outline:2px solid var(--blue-500); outline-offset:3px; border-radius:2px}

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--max-narrow)}
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(52px,6vw,88px)}
.section--alt{background:var(--paper-alt)}
.section--dark{background:var(--ink-900); color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--on-dark)}
.section--dark p{color:var(--on-dark-2)}

.grid{display:grid; gap:clamp(20px,2.4vw,32px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){ .g-4,.g-5{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .g-2,.g-3{grid-template-columns:1fr} }
@media (max-width:620px){ .g-4,.g-5{grid-template-columns:1fr} }

.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,80px); align-items:center}
.split--wide-right{grid-template-columns:1fr 1.15fr}
@media (max-width:920px){ .split,.split--wide-right{grid-template-columns:1fr; gap:40px} }

.stack-sm > * + *{margin-top:12px}
.stack > * + *{margin-top:20px}
.stack-lg > * + *{margin-top:32px}

/* ---------- 4. TYPE COMPONENTS ------------------------------------------- */
.eyebrow{
  font-size:var(--fs-label); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-600); margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--blue-500); flex:none}
.section--dark .eyebrow{color:var(--blue-400)}
.section--dark .eyebrow::before{background:var(--blue-400)}

.h-hero{font-size:var(--fs-hero); letter-spacing:-.03em; line-height:1.03}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2); letter-spacing:-.024em}
.h3{font-size:var(--fs-h3)}
.h4{font-size:var(--fs-h4); letter-spacing:-.01em}

.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem); line-height:1.62; color:var(--text-2); max-width:62ch}
.section--dark .lead{color:var(--on-dark-2)}
.body-2{color:var(--text-2)}
.section--dark .body-2{color:var(--on-dark-2)}
.muted{color:var(--text-3); font-size:var(--fs-small)}
.section--dark .muted{color:var(--on-dark-3)}
.measure{max-width:64ch}

.sec-head{max-width:760px; margin-bottom:clamp(36px,4.4vw,60px)}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head .h2 + p{margin-top:18px}

.rule{height:1px; background:var(--line); border:0; margin:0}
.section--dark .rule{background:var(--line-dark)}

/* ---------- 5. BUTTONS --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:14px 26px; border-radius:var(--radius); border:1px solid transparent;
  font-size:var(--fs-small); font-weight:700; letter-spacing:.01em;
  cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease),
    border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.btn--primary{background:var(--blue-600); color:#fff; box-shadow:0 6px 20px rgba(11,79,224,.22)}
.btn--primary:hover{background:var(--blue-500); box-shadow:0 10px 28px rgba(0,90,252,.3)}

.btn--dark{background:var(--ink-900); color:#fff}
.btn--dark:hover{background:var(--ink-700)}

.btn--ghost{background:transparent; color:var(--ink-900); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink-900); background:var(--ink-900); color:#fff}

.btn--on-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn--on-dark:hover{background:#fff; color:var(--ink-900); border-color:#fff}

.btn--light{background:#fff; color:var(--ink-900)}
.btn--light:hover{background:var(--blue-050)}

.btn-row{display:flex; flex-wrap:wrap; gap:14px}

.link-arrow{
  display:inline-flex; align-items:center; gap:9px; font-weight:700;
  font-size:var(--fs-small); color:var(--blue-600);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:.25s var(--ease);
}
.link-arrow:hover{border-color:var(--blue-600); gap:14px}
.section--dark .link-arrow{color:var(--blue-400)}
.section--dark .link-arrow:hover{border-color:var(--blue-400)}

/* ---------- 6. TAGS ------------------------------------------------------ */
.tag{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border:1px solid var(--line-2); border-radius:100px;
  font-size:.8125rem; font-weight:600; color:var(--text-2); background:#fff;
  transition:.25s var(--ease);
}
.tag:hover{border-color:var(--blue-400); color:var(--blue-600)}
.tag-row{display:flex; flex-wrap:wrap; gap:9px}
.section--dark .tag{background:transparent; border-color:var(--line-dark); color:var(--on-dark-2)}
.section--dark .tag:hover{border-color:var(--blue-400); color:#fff}

.pill{
  display:inline-block; padding:6px 13px; border-radius:3px;
  background:var(--blue-050); color:var(--blue-600);
  font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.pill--dark{background:rgba(255,255,255,.1); color:var(--blue-200)}
.pill--amber{background:#FFF3E8; color:#B85700}

/* ---------- 7. CARDS ----------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,2.6vw,34px); position:relative;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover{border-color:var(--line-2); box-shadow:var(--shadow-md); transform:translateY(-3px)}
.card__num{
  font-size:.8125rem; font-weight:700; letter-spacing:.14em; color:var(--blue-500);
  display:block; margin-bottom:16px;
}
.card h3{margin-bottom:10px}
.card p{color:var(--text-2); font-size:var(--fs-small); line-height:1.6}
.card__icon{
  width:44px; height:44px; margin-bottom:20px; color:var(--blue-600);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-alt);
  transition:.3s var(--ease);
}
.card:hover .card__icon{background:var(--blue-050); border-color:var(--blue-200); color:var(--blue-500)}
.card--flat:hover{transform:none; box-shadow:none; border-color:var(--blue-200)}

.card--dark{background:rgba(255,255,255,.035); border-color:var(--line-dark)}
.card--dark h3{color:#fff}
.card--dark p{color:var(--on-dark-2)}
.card--dark:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.24); box-shadow:none}
.card--dark .card__icon{background:rgba(255,255,255,.05); border-color:var(--line-dark); color:var(--blue-400)}
.card--dark:hover .card__icon{background:rgba(0,90,252,.16); border-color:transparent; color:#fff}

/* Editorial block — big statement + supporting line */
.ed-block{padding-top:28px; border-top:2px solid var(--ink-900); transition:.3s var(--ease)}
.ed-block:hover{border-top-color:var(--blue-500)}
.ed-block h3{font-size:clamp(1.15rem,1.6vw,1.4rem); letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px}
.ed-block p{color:var(--text-2); font-size:var(--fs-small)}
.section--dark .ed-block{border-top-color:rgba(255,255,255,.5)}
.section--dark .ed-block:hover{border-top-color:var(--blue-400)}

/* Fact / glance grid */
.facts{border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr)}
.facts > div{padding:30px 28px 30px 0; border-bottom:1px solid var(--line)}
.facts dt{font-size:var(--fs-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px}
.facts dd{margin:0; font-size:1.0625rem; font-weight:700; color:var(--ink-900); line-height:1.35}
@media (max-width:1000px){ .facts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .facts{grid-template-columns:1fr} }

/* ---------- 8. NAVIGATION ------------------------------------------------ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s;
}
.nav.is-scrolled{border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(6,24,62,.05)}
.nav__inner{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:32px}
.nav__logo{display:flex; align-items:center; flex:none}
.nav__logo img{height:34px; width:auto}
@media (max-width:900px){ .nav__logo img{height:28px} }

.nav__menu{display:flex; align-items:center; gap:4px}
.nav__link{
  position:relative; padding:9px 14px; font-size:var(--fs-small); font-weight:600;
  color:var(--text-2); border-radius:var(--radius); transition:color .22s var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--ink-900)}
.nav__link.is-active{color:var(--ink-900); font-weight:700}
.nav__link.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:1px; height:2px; background:var(--blue-500);
}
.nav__caret{width:9px; height:9px; transition:transform .25s var(--ease)}
.nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

.has-drop{position:relative}
.drop{
  position:absolute; top:calc(100% + 14px); left:-8px; min-width:340px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:.26s var(--ease);
}
.has-drop.is-open .drop{opacity:1; visibility:visible; transform:translateY(0)}
.drop a{display:block; padding:14px 16px; border-radius:var(--radius); transition:background .2s}
.drop a:hover{background:var(--paper-alt)}
.drop strong{display:block; font-size:.9375rem; color:var(--ink-900); margin-bottom:3px}
.drop span{font-size:.8125rem; color:var(--text-3); line-height:1.45; display:block}

.nav__cta{display:flex; align-items:center; gap:12px; flex:none}
.nav__cta .btn{padding:11px 20px}

.nav__burger{
  display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff;
  border-radius:var(--radius); cursor:pointer; align-items:center; justify-content:center;
}
.nav__burger span{display:block; width:18px; height:1.5px; background:var(--ink-900); position:relative; transition:.3s var(--ease)}
.nav__burger span::before,.nav__burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink-900); transition:.3s var(--ease);
}
.nav__burger span::before{top:-6px} .nav__burger span::after{top:6px}
body.menu-open .nav__burger span{background:transparent}
body.menu-open .nav__burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .nav__burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1080px){
  .nav__menu,.nav__cta .btn{display:none}
  .nav__burger{display:flex}
}

.mobile-nav{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:890; background:#fff;
  padding:28px var(--gutter) 48px; overflow-y:auto;
  transform:translateY(-12px); opacity:0; visibility:hidden; transition:.32s var(--ease);
}
body.menu-open .mobile-nav{transform:none; opacity:1; visibility:visible}
body.menu-open{overflow:hidden}
.mobile-nav a{display:block; padding:16px 0; border-bottom:1px solid var(--line); font-size:1.25rem; font-weight:700; color:var(--ink-900)}
.mobile-nav .sub{padding-left:18px; font-size:1rem; font-weight:600; color:var(--text-2); border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:28px; width:100%}
.mobile-nav .m-label{font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); padding:24px 0 6px; font-weight:700}

/* ---------- 9. HERO ------------------------------------------------------ */
.hero{
  position:relative; background:var(--ink-900); color:#fff; overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(72px,9vw,124px)); padding-bottom:clamp(80px,9vw,132px);
}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.hero__grad{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(0,90,252,.32), transparent 62%),
    radial-gradient(700px 520px at 6% 92%, rgba(11,79,224,.20), transparent 66%),
    linear-gradient(180deg, #06183E 0%, #071B45 55%, #050F2A 100%);
}
.hero__inner{position:relative; z-index:2}
.hero h1{color:#fff}
.hero .lead{color:var(--on-dark-2); margin-top:22px}
.hero__foot{margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; color:var(--on-dark-3); font-size:var(--fs-small)}
.hero--page{padding-top:calc(var(--nav-h) + clamp(56px,7vw,92px)); padding-bottom:clamp(60px,7vw,96px)}
.hero--light{background:var(--paper); color:var(--text)}
.hero--light h1{color:var(--ink-900)}

.hero__split{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,5vw,72px); align-items:center}
@media (max-width:980px){ .hero__split{grid-template-columns:1fr; gap:44px} }

/* ---------- 10. ART DIRECTION (SVG / CSS compositions) ------------------- */
.art{position:relative; border-radius:var(--radius); overflow:hidden}
.art svg{width:100%; height:auto; display:block}
.art--frame{border:1px solid var(--line); background:var(--paper-alt)}
.art--dark-frame{border:1px solid var(--line-dark); background:rgba(255,255,255,.03)}
.art--ratio{aspect-ratio:4/3}
.art--wide{aspect-ratio:16/9}

/* Editorial image slot: geometric brand composition standing in for photography */
.plate{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,#06183E 0%,#0D2A63 48%,#0B4FE0 100%);
}
.plate--light{background:linear-gradient(135deg,#F1F5FD 0%,#E3EBFA 55%,#CFDDF8 100%)}
.plate--teal{background:linear-gradient(135deg,#052E3A 0%,#0B4A54 45%,#0E8C8C 100%)}
.plate::after{
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:44px 44px;
}
.plate__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:20px 22px;
  background:linear-gradient(180deg,transparent,rgba(4,14,36,.82));
  color:#fff; font-size:.8125rem; letter-spacing:.02em;
}
.plate--light .plate__cap{background:linear-gradient(180deg,transparent,rgba(6,24,62,.66))}

/* Animated network field (hero) */
.netfield{position:absolute; inset:0; opacity:.42}
.netfield line{stroke:rgba(120,170,255,.22); stroke-width:1}
.netfield circle{fill:rgba(150,195,255,.55)}
.netfield .pulse{animation:pulse 5.5s ease-in-out infinite}
.netfield .pulse:nth-child(3n){animation-delay:1.4s}
.netfield .pulse:nth-child(3n+1){animation-delay:2.9s}
@keyframes pulse{0%,100%{opacity:.25; r:2}50%{opacity:1; r:3.4}}
@media (prefers-reduced-motion:reduce){ .netfield .pulse{animation:none} }

/* ---------- 11. PROCESS DIAGRAM ----------------------------------------- */
.process{position:relative; display:grid; gap:0; counter-reset:step}
.process--6{grid-template-columns:repeat(6,1fr)}
.process--5{grid-template-columns:repeat(5,1fr)}
.process__track{
  position:absolute; top:23px; left:6%; right:6%; height:2px; background:var(--line); z-index:0;
}
.process__fill{
  position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--blue-600),var(--blue-500));
  transition:width 1.6s var(--ease);
}
.is-visible .process__fill{width:100%}
.step{position:relative; z-index:1; text-align:center; padding:0 10px}
.step__dot{
  width:46px; height:46px; margin:0 auto 20px; border-radius:50%;
  background:#fff; border:2px solid var(--line); color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
  font-size:.8125rem; font-weight:700; letter-spacing:.04em;
  transition:.45s var(--ease); transition-delay:calc(var(--i,0) * .16s);
}
.is-visible .step__dot{border-color:var(--blue-500); background:var(--blue-600); color:#fff;
  box-shadow:0 6px 18px rgba(11,79,224,.26)}
.step h4{font-size:.9375rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px}
.step p{font-size:.875rem; color:var(--text-2); line-height:1.55}
.section--dark .process__track{background:var(--line-dark)}
.section--dark .step__dot{background:var(--ink-800); border-color:var(--line-dark); color:var(--on-dark-3)}
.section--dark .step p{color:var(--on-dark-2)}
.section--dark .is-visible .step__dot{
  background:var(--blue-600); border-color:var(--blue-500); color:#fff;
  box-shadow:0 6px 18px rgba(0,90,252,.3);
}

@media (max-width:1000px){
  .process--6,.process--5{grid-template-columns:1fr; gap:0}
  .process__track{top:0; bottom:0; left:23px; right:auto; width:2px; height:auto}
  .process__fill{inset:0 0 auto 0; width:100%; height:0; transition:height 1.6s var(--ease)}
  .is-visible .process__fill{height:100%; width:100%}
  .step{display:grid; grid-template-columns:46px 1fr; gap:20px; text-align:left; padding:0 0 34px}
  .step__dot{margin:0}
}

/* ---------- 12. PRODUCT PANELS ------------------------------------------ */
.prod{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;
  display:grid; grid-template-columns:1fr 1fr; transition:.35s var(--ease);
}
.prod:hover{box-shadow:var(--shadow-md); border-color:var(--line-2)}
.prod--rev .prod__media{order:2}
.prod__body{padding:clamp(30px,3.6vw,58px); display:flex; flex-direction:column; justify-content:center}
.prod__media{position:relative; min-height:340px; background:var(--ink-900)}
.prod__kicker{font-size:var(--fs-label); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px}
.prod__name{font-size:clamp(1.7rem,2.6vw,2.3rem); letter-spacing:-.02em; margin-bottom:8px}
.prod__tagline{font-size:1.0625rem; font-weight:700; color:var(--blue-600); margin-bottom:16px}
.prod__body p{color:var(--text-2)}
.prod__body .tag-row{margin:26px 0}
@media (max-width:920px){
  .prod,.prod--rev{grid-template-columns:1fr}
  .prod--rev .prod__media{order:0}
  .prod__media{min-height:260px}
}

/* ---------- 13. UI MOCKUPS ---------------------------------------------- */
.ui{
  background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  box-shadow:var(--shadow-md); font-size:.8125rem;
}
.ui__bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--paper-alt)}
.ui__dot{width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.ui__title{margin-left:6px; font-weight:700; color:var(--text-2); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase}
.ui__body{padding:16px}
.ui--dark{background:#0A1B3D; border-color:rgba(255,255,255,.12); color:#fff}
.ui--dark .ui__bar{background:rgba(255,255,255,.05); border-bottom-color:rgba(255,255,255,.1)}
.ui--dark .ui__title{color:var(--on-dark-3)}

.metric{display:flex; align-items:baseline; gap:8px}
.metric b{font-size:1.5rem; letter-spacing:-.02em; color:var(--ink-900)}
.ui--dark .metric b{color:#fff}

/* Alert row (Calypr) */
.alert-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:4px;
  background:#FFF3E8; border-left:3px solid var(--calypr-warm); color:#8A4200; font-weight:700; font-size:.875rem;
}

/* ---------- 14. ECOSYSTEM / TIMELINE ------------------------------------ */
.today-tomorrow{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(24px,3.5vw,52px); align-items:start}
@media (max-width:920px){ .today-tomorrow{grid-template-columns:1fr} .tt-arrow{transform:rotate(90deg); justify-self:center} }
.tt-col{border-top:2px solid var(--blue-500); padding-top:26px}
.tt-col--future{border-top-color:rgba(255,255,255,.28)}
.tt-item{
  padding:18px 20px; border:1px solid var(--line-dark); border-radius:var(--radius);
  background:rgba(255,255,255,.05); font-weight:700; color:#fff;
}
.tt-item small{display:block; font-weight:400; color:var(--on-dark-3); font-size:.8125rem; margin-top:4px}
.tt-item--future{background:transparent; border-style:dashed; border-color:rgba(255,255,255,.22); color:var(--on-dark-2); font-weight:600}
.tt-arrow{color:var(--blue-400); display:flex; align-items:center; padding-top:60px}
/* light-section variant of the today / tomorrow visual */
.section--alt .tt-item,.section:not(.section--dark) .tt-item{
  background:#fff; border-color:var(--line); color:var(--ink-900); box-shadow:var(--shadow-sm);
}
.section--alt .tt-item small,.section:not(.section--dark) .tt-item small{color:var(--text-3)}
.section--alt .tt-item--future,.section:not(.section--dark) .tt-item--future{
  background:transparent; border-style:dashed; border-color:var(--line-2); color:var(--text-2);
  font-weight:600; box-shadow:none;
}
.section--alt .tt-col--future,.section:not(.section--dark) .tt-col--future{border-top-color:var(--line-2)}
.section--alt .tt-arrow,.section:not(.section--dark) .tt-arrow{color:var(--blue-600)}

/* ---------- 15. FORM ----------------------------------------------------- */
.form{display:grid; gap:20px}
.field label{display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-2); margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:#fff; font-size:var(--fs-small); transition:border-color .22s, box-shadow .22s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(0,90,252,.12);
}
.field textarea{min-height:132px; resize:vertical}
.field select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235A6478' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center}
.form-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:680px){ .form-2{grid-template-columns:1fr} }
.form-note{font-size:.8125rem; color:var(--text-3); line-height:1.55}

/* ---------- 16. FOOTER --------------------------------------------------- */
.foot{background:var(--ink-900); color:var(--on-dark-2); padding-top:clamp(56px,6.5vw,84px)}
.foot__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,44px); padding-bottom:52px}
@media (max-width:1000px){ .foot__top{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:640px){ .foot__top{grid-template-columns:1fr 1fr} }
.foot__brand img{height:42px; width:auto; margin-bottom:20px}
.foot__tagline{color:#fff; font-weight:700; letter-spacing:.05em; margin-bottom:8px}
.foot h5{font-size:var(--fs-label); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 18px}
.foot li{margin-bottom:11px}
.foot a{font-size:var(--fs-small); color:var(--on-dark-2); transition:color .2s}
.foot a:hover{color:#fff}
.foot__bottom{border-top:1px solid var(--line-dark); padding:26px 0 34px; display:flex; flex-wrap:wrap;
  gap:14px 28px; justify-content:space-between; align-items:center; font-size:.8125rem; color:var(--on-dark-3)}
.foot__disc{border-top:1px solid var(--line-dark); padding:26px 0; font-size:.78125rem; line-height:1.6; color:var(--on-dark-3); max-width:96ch}

/* ---------- 17. MOTION / REVEAL ----------------------------------------- */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].is-visible{opacity:1; transform:none}
[data-reveal-delay="1"]{transition-delay:.09s}
[data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal-delay="3"]{transition-delay:.27s}
[data-reveal-delay="4"]{transition-delay:.36s}
[data-reveal-delay="5"]{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
  .process__fill{transition:none; width:100%}
  .btn:hover,.card:hover{transform:none}
}

/* ---------- 18. UTILITIES ------------------------------------------------ */
.skip{position:absolute; left:-9999px; top:0; background:#fff; color:var(--ink-900); padding:12px 18px; z-index:1000}
.skip:focus{left:12px; top:12px}
.center{text-align:center}
.mt-0{margin-top:0} .mt-s{margin-top:14px} .mt-m{margin-top:26px} .mt-l{margin-top:44px}
.nowrap{white-space:nowrap}
.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}