/* ==========================================================================
   Hiindsight Technology — Design System
   Enterprise engineering / PLM / digital transformation B2B site
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Color: brand core (from Hiindsight mark) ---- */
  --hi-navy-950:#0a1626;
  --hi-navy-900:#0d1e33;
  --hi-navy-800:#132842;
  --hi-navy-700:#1c3a5e;
  --hi-cyan-600:#0e8fb8;
  --hi-cyan-500:#17a8d6;
  --hi-cyan-400:#3dc3ea;
  --hi-lime-500:#8dc63f;
  --hi-lime-600:#6fae23;

  /* ---- Neutrals ---- */
  --ink-900:#0f1720;
  --ink-800:#1b2733;
  --ink-700:#33404c;
  --ink-600:#5b6873;
  --ink-500:#7c8891;
  --ink-300:#c3cad0;
  --ink-200:#dde2e6;
  --ink-100:#eef1f3;
  --surface-0:#ffffff;
  --surface-50:#f7f9fa;
  --surface-100:#f0f3f5;

  /* ---- Semantic ---- */
  --color-bg:var(--surface-0);
  --color-bg-alt:var(--surface-50);
  --color-text:var(--ink-900);
  --color-text-muted:var(--ink-600);
  --color-border:var(--ink-200);
  --color-accent:var(--hi-cyan-600);
  --color-accent-2:var(--hi-lime-500);
  --color-dark:var(--hi-navy-900);
  --color-dark-2:var(--hi-navy-950);
  --focus-ring: 0 0 0 3px rgba(23,168,214,0.38);

  /* ---- Typography ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --step-caption: 0.8125rem;
  --step-body: 1.0625rem;
  --step-body-lg: 1.1875rem;
  --step-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  --step-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --step-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --step-display: clamp(2.75rem, 1.6rem + 4.8vw, 5rem);
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

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

  /* ---- Radius / shadow / motion ---- */
  --radius-sm:3px; --radius-md:5px; --radius-lg:8px; --radius-full:999px;
  --shadow-sm: 0 1px 2px rgba(15,23,32,0.06), 0 1px 1px rgba(15,23,32,0.04);
  --shadow-md: 0 8px 24px rgba(15,23,32,0.08), 0 2px 6px rgba(15,23,32,0.04);
  --shadow-lg: 0 20px 48px rgba(15,23,32,0.12), 0 6px 16px rgba(15,23,32,0.06);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 640ms;
  --container-max: 1280px;
  --header-h: 96px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--step-body);
  line-height:var(--lh-normal);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto;}
svg{display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure{margin:0;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}

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

:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--hi-cyan-500);outline-offset:2px;}

.skip-link{
  position:absolute;left:8px;top:-48px;background:var(--color-dark);color:#fff;
  padding:10px 16px;border-radius:var(--radius-sm);z-index:1000;transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:8px;}

/* ---- Typography helpers ---- */
h1,.h1{font-size:var(--step-h1);line-height:var(--lh-tight);font-weight:700;letter-spacing:-0.02em;}
h2,.h2{font-size:var(--step-h2);line-height:var(--lh-tight);font-weight:700;letter-spacing:-0.015em;}
h3,.h3{font-size:var(--step-h3);line-height:var(--lh-snug);font-weight:600;letter-spacing:-0.01em;}
.display{font-size:var(--step-display);line-height:1.05;font-weight:800;letter-spacing:-0.03em;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--step-caption);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--hi-cyan-600);
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--hi-lime-500);border-radius:2px;}
.lede{font-size:var(--step-body-lg);color:var(--color-text-muted);line-height:var(--lh-normal);}
.text-muted{color:var(--color-text-muted);}
.section-head{max-width:680px;display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-8);}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center;}

/* ---- Layout ---- */
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--sp-6);}
@media (max-width:640px){.container{padding:0 var(--sp-4);}}
.section{padding:var(--sp-11) 0;}
@media (max-width:768px){.section{padding:var(--sp-9) 0;}}
.section-alt{background:var(--color-bg-alt);}
.section-dark{background:linear-gradient(160deg,var(--hi-navy-900),var(--hi-navy-950));color:#fff;}
.section-dark .text-muted{color:rgba(255,255,255,0.68);}
.grid{display:grid;gap:var(--sp-6);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-sm);font-weight:600;font-size:0.9375rem;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  min-height:48px;white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--hi-navy-900);color:#fff;}
.btn-primary:hover{background:var(--hi-cyan-600);}
.btn-accent{background:var(--hi-cyan-600);color:#fff;}
.btn-accent:hover{background:var(--hi-navy-900);}
.btn-ghost{background:transparent;color:var(--color-text);border:1.5px solid var(--color-border);}
.btn-ghost:hover{border-color:var(--hi-cyan-600);color:var(--hi-cyan-600);}
.section-dark .btn-ghost{border-color:rgba(255,255,255,0.32);color:#fff;}
.section-dark .btn-ghost:hover{border-color:var(--hi-lime-500);color:var(--hi-lime-500);}
.btn-arrow{transition:transform var(--dur-fast) var(--ease-out);}
.btn:hover .btn-arrow{transform:translateX(3px);}
.cta-row{display:flex;gap:var(--sp-4);flex-wrap:wrap;}

/* ---- Header ---- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.98);
  border-bottom:1px solid var(--color-border);height:var(--header-h);
  display:flex;align-items:center;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);width:100%;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:72px;width:auto;border-radius:10px;}
@media (max-width:640px){
  .brand img{height:56px;}
}
.main-nav{display:flex;align-items:center;gap:var(--sp-6);}
.main-nav ul{display:flex;gap:var(--sp-5);}
.main-nav a{
  font-size:0.9375rem;font-weight:600;color:var(--ink-700);padding:8px 2px;position:relative;
}
.main-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hi-cyan-600);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease-out);
}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.main-nav a[aria-current="page"]{color:var(--hi-navy-900);}
.main-nav .cta-row{display:none;}
.header-actions{display:flex;align-items:center;gap:var(--sp-4);}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-sm);}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:22px;height:2px;background:var(--ink-900);position:relative;transition:all var(--dur-fast) var(--ease-out);
}
.nav-toggle span::before{position:absolute;top:-7px;}
.nav-toggle span::after{position:absolute;top:7px;}

@media (max-width:960px){
  .main-nav{position:fixed;inset:var(--header-h) 0 0 0;background:#fff;flex-direction:column;align-items:stretch;
    padding:var(--sp-6);transform:translateX(100%);transition:transform var(--dur-med) var(--ease-out);overflow-y:auto;}
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;gap:0;}
  .main-nav a{display:block;padding:18px 4px;font-size:1.125rem;border-bottom:1px solid var(--color-border);}
  .main-nav .cta-row{display:flex;margin-top:var(--sp-6);flex-direction:column;}
  .main-nav .btn{width:100%;}
  .header-actions .btn-accent{display:none;}
  .nav-toggle{display:flex;}
  body.nav-is-open{overflow:hidden;}
}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:var(--color-dark);color:#fff;padding:var(--sp-12) 0 var(--sp-11);}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(23,168,214,0.28), transparent 60%),
    radial-gradient(700px 420px at 100% 100%, rgba(141,198,63,0.16), transparent 60%);
  pointer-events:none;
}
.hero-grid-lines{position:absolute;inset:0;opacity:0.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:56px 56px; mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
}
.hero .container{position:relative;display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--sp-9);align-items:center;}
@media (max-width:960px){.hero .container{grid-template-columns:1fr;}}
.hero-copy{max-width:620px;}
.hero h1{margin-bottom:var(--sp-5);}
.hero .lede{color:rgba(255,255,255,0.78);max-width:540px;margin-bottom:var(--sp-7);}
.hero-eyebrow{color:var(--hi-lime-500);}
.hero-eyebrow::before{background:var(--hi-cyan-500);}
.hero-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,0.12);}
.hero-visual img{width:100%;height:100%;object-fit:cover;}
.hero-stats{display:flex;gap:var(--sp-7);margin-top:var(--sp-8);flex-wrap:wrap;}
.hero-stats div{border-left:2px solid var(--hi-cyan-500);padding-left:14px;}
.hero-stats strong{display:block;font-size:1.5rem;font-weight:700;}
.hero-stats span{font-size:0.8125rem;color:rgba(255,255,255,0.65);}

/* ---- Page hero (inner pages) ---- */
.page-hero{background:linear-gradient(160deg,var(--hi-navy-900),var(--hi-navy-950));color:#fff;padding:var(--sp-9) 0 var(--sp-8);position:relative;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 85% 0%, rgba(23,168,214,0.25), transparent 60%);}
.page-hero .container{position:relative;max-width:820px;}
.page-hero .lede{color:rgba(255,255,255,0.78);margin-top:var(--sp-4);}
.breadcrumb{font-size:0.8125rem;color:rgba(255,255,255,0.55);margin-bottom:var(--sp-4);}
.breadcrumb a:hover{color:#fff;}

/* ---- Logo strip ---- */
.logo-strip{padding:var(--sp-8) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.logo-strip .strip-label{font-size:var(--step-caption);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:700;margin-bottom:var(--sp-6);text-align:center;}
.logo-marquee{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-7) var(--sp-8);}
.logo-marquee span{font-weight:700;font-size:1.0625rem;color:var(--ink-500);letter-spacing:0.01em;}

/* ---- Cards ---- */
.card{
  background:var(--surface-0);border:1px solid var(--color-border);border-radius:var(--radius-md);
  overflow:hidden;transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  display:flex;flex-direction:column;height:100%;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent;}
.card-media{aspect-ratio:16/9;overflow:hidden;background:var(--surface-100);}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.card:hover .card-media img{transform:scale(1.04);}
.card-body{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);flex:1;}
.card-body h3{font-size:1.1875rem;}
.card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:var(--sp-2);}
.tag{font-size:0.75rem;font-weight:600;color:var(--hi-navy-800);background:var(--ink-100);padding:5px 10px;border-radius:var(--radius-full);}
.card-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--hi-cyan-600);font-size:0.9375rem;margin-top:var(--sp-2);}
.card-link .btn-arrow{transition:transform var(--dur-fast) var(--ease-out);}
.card:hover .card-link .btn-arrow{transform:translateX(3px);}

.icon-card{padding:var(--sp-6);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--surface-0);
  transition:box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);}
.icon-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.icon-badge{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--hi-navy-900);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);}
.icon-badge svg{width:24px;height:24px;stroke:currentColor;fill:none;}

/* ---- Numbered process ---- */
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);counter-reset:step;}
@media (max-width:900px){.process-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.process-row{grid-template-columns:1fr;}}
.process-step{position:relative;padding-top:var(--sp-6);border-top:2px solid var(--color-border);}
.process-step .step-num{font-size:2rem;font-weight:800;color:var(--hi-cyan-600);opacity:0.9;display:block;margin-bottom:var(--sp-2);}

/* ---- Stat counters ---- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);text-align:center;}
@media (max-width:768px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-item strong{display:block;font-size:2.5rem;font-weight:800;color:var(--hi-navy-900);}
.section-dark .stat-item strong{color:#fff;}
.stat-item span{color:var(--color-text-muted);font-size:0.9375rem;}

/* ---- Split feature ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-9);align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--sp-7);}}
.split.reverse .split-media{order:2;}
.split-media{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);}
.split-media img{width:100%;}
.check-list{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5);}
.check-list li{display:flex;gap:10px;align-items:flex-start;color:var(--color-text-muted);}
.check-list svg{flex:none;width:20px;height:20px;color:var(--hi-lime-600);margin-top:2px;}

/* ---- Timeline / accordion ---- */
.accordion-item{border-bottom:1px solid var(--color-border);}
.accordion-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);padding:var(--sp-5) 0;text-align:left;font-weight:600;font-size:1.0625rem;}
.accordion-trigger .chev{transition:transform var(--dur-fast) var(--ease-out);flex:none;}
.accordion-item[data-open="true"] .chev{transform:rotate(180deg);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height var(--dur-med) var(--ease-out);}
.accordion-panel-inner{padding-bottom:var(--sp-5);color:var(--color-text-muted);max-width:70ch;}

/* ---- CTA band ---- */
.cta-band{background:linear-gradient(135deg,var(--hi-navy-900),var(--hi-navy-950));color:#fff;border-radius:var(--radius-lg);padding:var(--sp-9);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 90% 10%, rgba(141,198,63,0.22), transparent 60%);}
.cta-band .cta-copy{position:relative;max-width:560px;}
.cta-band .cta-row{position:relative;}
@media (max-width:768px){.cta-band{flex-direction:column;align-items:flex-start;padding:var(--sp-7);}}

/* ---- Footer ---- */
.site-footer{background:var(--hi-navy-950);color:rgba(255,255,255,0.72);padding:var(--sp-10) 0 var(--sp-6);}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--sp-7);padding-bottom:var(--sp-8);}
@media (max-width:900px){.footer-top{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-brand p{margin-top:var(--sp-4);max-width:320px;color:rgba(255,255,255,0.55);font-size:0.9375rem;}
.footer-logo{height:180px;width:180px;border-radius:var(--radius-sm);object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,0.14);}
@media (max-width:560px){.footer-logo{height:140px;width:140px;}}

/* ---- Top banner (site-wide, above page content) ---- */
.top-banner{width:100%;overflow:hidden;line-height:0;}
.top-banner img{width:100%;height:280px;object-fit:cover;object-position:center;display:block;}
@media (max-width:900px){.top-banner img{height:200px;}}
@media (max-width:640px){.top-banner img{height:150px;}}
@media (max-width:400px){.top-banner img{height:120px;}}
.footer-col h4{color:#fff;font-size:0.875rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--sp-4);}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12);padding-top:var(--sp-5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);font-size:0.8125rem;color:rgba(255,255,255,0.5);}
.social-row{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.social-row a{width:36px;height:36px;border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:border-color var(--dur-fast), background var(--dur-fast);}
.social-row a:hover{border-color:var(--hi-cyan-500);background:rgba(23,168,214,0.15);}
.social-row .icon-badge{width:100%;height:100%;margin:0;background:transparent;box-shadow:none;border-radius:50%;}
.social-row .icon-badge svg{width:17px;height:17px;}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:0.875rem;font-weight:600;color:var(--ink-700);}
.field input,.field textarea,.field select{
  border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:12px 14px;background:var(--surface-0);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--hi-cyan-600);}
.field small{color:var(--color-text-muted);font-size:0.8125rem;}

/* ---- Contact form validation + status ---- */
.form-note{color:var(--hi-cyan-600);}
.form-note.error{color:#d64545;}
.field-error{display:block;color:#d64545;font-family:var(--font-mono);font-size:0.72rem;text-transform:none;letter-spacing:0.01em;margin-top:2px;}
.field-error:empty{display:none;}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#d64545;}
.field.invalid input:focus,.field.invalid textarea:focus,.field.invalid select:focus{border-color:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,0.18);}

.contact-info-list{display:flex;flex-direction:column;gap:var(--sp-6);}
.contact-info-item{display:flex;gap:var(--sp-4);align-items:flex-start;}
.contact-info-item .icon-badge{margin-bottom:0;flex:none;}
a.contact-info-item{transition:transform var(--dur-fast) var(--ease-out);}
a.contact-info-item:hover{transform:translateX(2px);}
a.contact-info-item:hover strong{color:var(--hi-cyan-600);}
a.contact-info-item:hover .icon-badge{box-shadow:inset 0 0 0 1px var(--hi-cyan-400);}

/* ---- Utilities ---- */
.mt-0{margin-top:0;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
.reveal.in-view{opacity:1;transform:translateY(0);}
.badge-pill{display:inline-flex;align-items:center;gap:6px;background:var(--ink-100);color:var(--hi-navy-800);border-radius:var(--radius-full);padding:6px 14px;font-size:0.8125rem;font-weight:600;}
.section-dark .badge-pill{background:rgba(255,255,255,0.1);color:#fff;}
hr.divider{border:none;border-top:1px solid var(--color-border);margin:var(--sp-8) 0;}
.two-col-text{display:grid;grid-template-columns:280px 1fr;gap:var(--sp-8);}
@media (max-width:768px){.two-col-text{grid-template-columns:1fr;gap:var(--sp-4);}}

/* ==========================================================================
   INDUSTRIAL / ENGINEERED REFRESH
   Bold, technical, high-contrast pass — restyles typography, labels, cards,
   hero, banners and dark bands site-wide. Appended so it overrides the base.
   ========================================================================== */

:root{
  --hi-cyan-700:#0b7599;
  --grid-line:rgba(15,23,32,0.05);
  --grid-line-dark:rgba(255,255,255,0.06);
  --hi-navy-975:#070f1c;
}

/* ---- Display typography: engineered grotesk for headings ---- */
h1,.h1,h2,.h2,h3,.h3,.display{font-family:var(--font-display);}
h1,.h1{font-weight:700;letter-spacing:-0.025em;}
h2,.h2{font-weight:700;letter-spacing:-0.02em;}
h3,.h3{font-weight:600;letter-spacing:-0.015em;}
.display{font-weight:700;letter-spacing:-0.035em;}

/* ---- Technical eyebrow / kicker: monospace tag with hollow tick ---- */
.eyebrow{
  font-family:var(--font-mono);font-weight:600;font-size:0.78rem;
  letter-spacing:0.16em;color:var(--hi-cyan-700);gap:10px;
}
.eyebrow::before{width:9px;height:9px;background:transparent;border:2px solid var(--hi-lime-600);border-radius:0;}
.hero-eyebrow{color:var(--hi-cyan-400);}
.hero-eyebrow::before{border-color:var(--hi-lime-500);}
.section-dark .eyebrow{color:var(--hi-cyan-400);}

/* ---- Buttons: squared, uppercase, technical ---- */
.btn{
  font-family:var(--font-mono);font-weight:600;text-transform:uppercase;
  letter-spacing:0.09em;font-size:0.8rem;border-radius:2px;padding:15px 28px;
}
.btn-accent{background:var(--hi-cyan-600);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);}
.btn-accent:hover{background:var(--hi-navy-900);}
.btn-ghost{border-width:1.5px;}
.card-link{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.07em;
  font-size:0.76rem;font-weight:600;
}

/* ---- Header: branded accent rail across the top ---- */
.site-header{box-shadow:0 1px 0 rgba(15,23,32,0.04);}
.site-header::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--hi-cyan-600) 0%,var(--hi-cyan-500) 55%,var(--hi-lime-500) 100%);
}

/* ---- Hero: dark command-console with denser grid + corner brackets ---- */
.hero{background:var(--hi-navy-975);}
.hero h1{font-size:var(--step-display);letter-spacing:-0.03em;line-height:1.04;}
.hero-grid-lines{opacity:0.65;background-size:46px 46px;}
.hero-visual{border-radius:4px;border-color:rgba(23,168,214,0.4);box-shadow:0 32px 64px rgba(0,0,0,0.5);}
.hero-visual::before,.hero-visual::after{
  content:"";position:absolute;width:26px;height:26px;z-index:2;pointer-events:none;
}
.hero-visual::before{top:12px;left:12px;border-top:2px solid var(--hi-lime-500);border-left:2px solid var(--hi-lime-500);}
.hero-visual::after{bottom:12px;right:12px;border-bottom:2px solid var(--hi-lime-500);border-right:2px solid var(--hi-lime-500);}
.hero-stats div{border-left:2px solid var(--hi-lime-500);}
.hero-stats strong{font-family:var(--font-display);font-weight:700;}
.hero-stats span{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;font-size:0.7rem;}

/* ---- Inner page hero: blueprint grid overlay + mono breadcrumb ---- */
.page-hero{background:var(--hi-navy-975);}
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.85),transparent 82%);mask-image:linear-gradient(180deg,rgba(0,0,0,0.85),transparent 82%);
}
.page-hero .container{position:relative;z-index:1;}
.breadcrumb{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.06em;font-size:0.72rem;}

/* ---- Top banner: branded scrim + accent rule ---- */
.top-banner{position:relative;border-bottom:3px solid var(--hi-cyan-600);}
.top-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,15,28,0.62) 0%,rgba(7,15,28,0.20) 42%,rgba(7,15,28,0) 68%);
}

/* ---- Cards / icon panels: crisp corners + engineered hover ---- */
.card,.icon-card{border-radius:4px;}
.icon-card{position:relative;overflow:hidden;}
.icon-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--hi-cyan-500),var(--hi-lime-500));
  transition:transform var(--dur-med) var(--ease-out);
}
.icon-card:hover::before{transform:scaleX(1);}
.icon-card:hover{border-color:var(--hi-navy-800);}
.icon-badge{border-radius:3px;background:var(--hi-navy-950);box-shadow:inset 0 0 0 1px rgba(23,168,214,0.45);}
.tag{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;
  font-size:0.68rem;border-radius:2px;
}

/* ---- Process + stats: engineered numerals ---- */
.process-step{border-top:2px solid var(--hi-navy-900);}
.process-step .step-num,.stat-item strong{font-family:var(--font-display);font-weight:700;}
.stat-item span{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;font-size:0.78rem;}

/* ---- Logo strip: mono technical labels with slash dividers ---- */
.logo-strip .strip-label{font-family:var(--font-mono);letter-spacing:0.14em;}
.logo-marquee{gap:var(--sp-5) var(--sp-6);align-items:center;}
.logo-marquee span{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.05em;
  font-size:0.88rem;font-weight:500;color:var(--ink-600);display:inline-flex;align-items:center;
}
.logo-marquee span:not(:last-child)::after{content:"/";margin-left:var(--sp-6);color:var(--hi-cyan-500);font-weight:600;}

/* ---- Dark bands, CTA, footer: subtle blueprint grid ---- */
.section-dark,.cta-band,.site-footer{position:relative;}
.section-dark::after,.cta-band::after,.site-footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px);
  background-size:46px 46px;opacity:0.7;
}
.section-dark .container,.site-footer .container{position:relative;z-index:1;}
.cta-band{border-radius:8px;}
.cta-band .cta-copy,.cta-band .cta-row{z-index:1;}
.footer-col h4{font-family:var(--font-mono);letter-spacing:0.12em;}

/* ---- Section-alt: faint measurement grid ---- */
.section-alt{position:relative;}
.section-alt::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 75%);
}
.section-alt > .container{position:relative;z-index:1;}

/* ---- Forms: crisp technical inputs ---- */
.field input,.field textarea,.field select{border-radius:3px;}
.field label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.05em;font-size:0.74rem;}

/* ---- Badges ---- */
.badge-pill{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.05em;font-size:0.72rem;border-radius:2px;}

/* ==========================================================================
   ENGINEERED ENHANCEMENTS
   Section index numbers, hero scan line, stat counters, animated blueprint
   grid + corner crosshairs. Motion is disabled under prefers-reduced-motion.
   ========================================================================== */

:root{
  --cross:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Cpath%20d='M8%201v14M1%208h14'%20stroke='%2317a8d6'%20stroke-width='1'%20opacity='0.55'/%3E%3C/svg%3E");
}

/* ---- 1. Section index numbers (01 / 02 / ...) on centered section heads ---- */
main{counter-reset:sect;}
.section-head{counter-increment:sect;}
.section-head .eyebrow::before{
  content:counter(sect,decimal-leading-zero) " /";
  width:auto;height:auto;border:0;background:none;border-radius:0;
  color:var(--hi-lime-600);font-weight:700;letter-spacing:0.08em;
}
.section-dark .section-head .eyebrow::before{color:var(--hi-lime-500);}

/* ---- 2. Hero: slow scan-line sweep (behind the copy) ---- */
.hero .container{position:relative;z-index:3;}
.hero-grid-lines{z-index:0;}
.hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(23,168,214,0.7),rgba(141,198,63,0.4),transparent);
  animation:hero-scan 8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes hero-scan{
  0%{top:-2px;opacity:0;}
  8%{opacity:0.65;}
  92%{opacity:0.65;}
  100%{top:100%;opacity:0;}
}

/* ---- 3. Stat counters: engineered numerals with lime tick underline ---- */
.stat-item strong{
  font-family:var(--font-display);font-weight:700;position:relative;
  display:inline-block;padding-bottom:12px;
}
.stat-item strong::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:28px;height:3px;background:var(--hi-lime-500);
}
.stat-item span{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.05em;font-size:0.74rem;}

/* ---- 4a. Blueprint grid drift (subtle, continuous) ---- */
@keyframes grid-drift{from{background-position:0 0;}to{background-position:46px 46px;}}
@keyframes grid-drift-40{from{background-position:0 0;}to{background-position:40px 40px;}}
.hero-grid-lines{animation:grid-drift 24s linear infinite;}
.page-hero::after{animation:grid-drift 26s linear infinite;}
.section-dark::after,.site-footer::after,.cta-band::after{animation:grid-drift 30s linear infinite;}
.section-alt::before{animation:grid-drift-40 34s linear infinite;}

/* ---- 4b. Corner crosshairs on dark blueprint surfaces + hero ---- */
.hero-grid-lines::before,.section-dark::before,.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    var(--cross) top 16px left 16px no-repeat,
    var(--cross) top 16px right 16px no-repeat,
    var(--cross) bottom 16px left 16px no-repeat,
    var(--cross) bottom 16px right 16px no-repeat;
}