/* ============================================================
   AIZEN - aizenparts.com
   Built to the AIZEN Global Brand Standards Manual
   Colour §21-29 | Typography §31-35 | Graphic language §45-48
   ============================================================ */

:root{
  /* Official HEX standards - Manual §28 (web / UI) */
  --navy:       #0D2B52;
  --navy-deep:  #081B38;   /* darker shade for depth, per LOG-001 §8 */
  --red:        #D62828;
  --steel:      #70777F;
  --light:      #F2F4F6;
  --white:      #FFFFFF;
  --green:      #2E7D32;   /* Success Green - verified/approved only, §24 */

  --ink:   #0D2B52;
  --body:  #3C4654;
  --rule:  #DDE3EA;

  --font-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --wrap: 1140px;
  --gut: 24px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block }

h1,h2,h3,h4{ font-family:var(--font-head); color:var(--ink); line-height:1.15; margin:0 0 .5em; font-weight:700 }
h1{ font-size:clamp(2.1rem,5.2vw,3.5rem); letter-spacing:-.02em }
h2{ font-size:clamp(1.6rem,3.4vw,2.35rem); letter-spacing:-.01em }
h3{ font-size:1.16rem; font-weight:600 }
p{ margin:0 0 1.1em }
a{ color:var(--navy); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--red) }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.eyebrow{
  font-family:var(--font-head); font-weight:600; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin:0 0 .9rem;
}
.lede{ font-size:1.16rem; max-width:62ch }
.center{ text-align:center }
.center .lede{ margin-inline:auto }
.center .rule{ margin-inline:auto }

/* ---------- Blueprint pattern - §47, opacity held 5-15% ---------- */
.blueprint{ position:relative; isolation:isolate; overflow:hidden }
.blueprint::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 78% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image:radial-gradient(ellipse 78% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* ---------- Header ---------- */
.site-head{ background:var(--navy); position:sticky; top:0; z-index:50 }
.site-head .wrap{ display:flex; align-items:center; gap:2rem; min-height:78px }
.brand{ display:flex; align-items:center; flex:0 0 auto; padding:.4rem 0 }
.brand img{ width:132px }
.nav{ margin-left:auto; display:flex; align-items:center; gap:2rem }
.nav a{
  font-family:var(--font-head); font-weight:500; font-size:.83rem; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.86); text-decoration:none; padding:.4rem 0;
  border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--white); border-bottom-color:var(--red) }
.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.35);
  color:#fff; font-family:var(--font-head); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.55rem .9rem; border-radius:2px; cursor:pointer;
}

/* ---------- Buttons - red is accent only, §24 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-head); font-weight:600; font-size:.82rem;
  letter-spacing:.11em; text-transform:uppercase; text-decoration:none;
  padding:.95rem 1.7rem; border-radius:2px; border:2px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--red); color:#fff; border-color:var(--red) }
.btn-primary:hover{ background:#B81F1F; border-color:#B81F1F; color:#fff }
.btn-ghost{ border-color:rgba(255,255,255,.4); color:#fff }
.btn-ghost:hover{ border-color:#fff; color:#fff }
.btn-outline{ border-color:var(--navy); color:var(--navy) }
.btn-outline:hover{ background:var(--navy); color:#fff }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem }

/* ---------- Sections ---------- */
.section{ padding:clamp(3.5rem,7vw,6rem) 0 }
.section-light{ background:var(--light) }
.section-navy{ background:var(--navy); color:rgba(255,255,255,.82) }
.section-navy h1,.section-navy h2,.section-navy h3,.section-navy h4{ color:#fff }
.rule{ width:64px; height:3px; background:var(--red); border:0; margin:0 0 1.6rem }
.stack > * + *{ margin-top:1.5rem }

/* ---------- Hero ---------- */
.hero{ background:var(--navy-deep); color:rgba(255,255,255,.84); padding:clamp(3.5rem,8vw,6.5rem) 0 }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center }
.hero h1{ color:#fff }
.hero-art{ width:100%; max-width:430px; margin-inline:auto }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:1.5rem }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-4{ grid-template-columns:repeat(4,1fr) }

.card{ background:#fff; border:1px solid var(--rule); border-radius:3px; padding:1.9rem 1.7rem }
.card h3{ margin-bottom:.45rem }
.card p{ margin:0; font-size:.96rem }
.card .ico{
  width:34px; height:34px; stroke:var(--red); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; margin-bottom:1.1rem;
}
.section-navy .card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14) }
.section-navy .card p{ color:rgba(255,255,255,.75) }

/* ---------- Spec table - §34 ---------- */
.spec{ width:100%; border-collapse:collapse; font-size:.95rem; background:#fff }
.spec caption{
  text-align:left; font-family:var(--font-head); font-weight:600; color:var(--ink);
  padding:0 0 .9rem; font-size:1.05rem;
}
.spec th,.spec td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--rule) }
.spec th{ font-family:var(--font-head); font-weight:600; color:var(--ink); width:42%; background:var(--light) }
.spec td{ font-variant-numeric:tabular-nums }

/* ---------- Verification page ---------- */
.verify-hero{ background:var(--navy); color:rgba(255,255,255,.84); padding:clamp(3rem,7vw,5rem) 0 }
.verify-hero h1{ color:#fff }
.verify-badge{
  display:flex; align-items:center; gap:1.2rem;
  background:rgba(46,125,50,.14); border:1px solid rgba(46,125,50,.55);
  border-radius:3px; padding:1.5rem 1.75rem; max-width:660px; margin:0 auto 2.2rem;
}
.verify-badge svg{
  width:44px; height:44px; flex:0 0 auto; stroke:#5CBA60;
  fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.verify-badge strong{ font-family:var(--font-head); font-size:1.16rem; color:#fff; display:block; margin-bottom:.15rem }
.verify-badge span{ font-size:.94rem; color:rgba(255,255,255,.78) }

.steps{ counter-reset:step; list-style:none; margin:0; padding:0; display:grid; gap:1.1rem }
.steps li{
  counter-increment:step; position:relative; background:#fff; border:1px solid var(--rule);
  border-left:3px solid var(--red); border-radius:3px; padding:1.4rem 1.6rem 1.4rem 4.4rem;
}
.steps li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:1.5rem; top:1.45rem;
  font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--red);
}
.steps h3{ margin-bottom:.3rem }
.steps p{ margin:0; font-size:.96rem }

.notice{
  background:var(--light); border-left:3px solid var(--steel);
  padding:1.4rem 1.6rem; border-radius:3px; font-size:.96rem;
}
.notice p:last-child{ margin-bottom:0 }
.notice strong{ color:var(--ink); font-family:var(--font-head) }

/* ---------- Forms ---------- */
.field{ display:grid; gap:.4rem; margin-bottom:1.1rem }
.field label{
  font-family:var(--font-head); font-weight:600; font-size:.8rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
}
.field input,.field textarea,.field select{
  font:inherit; font-size:1rem; padding:.8rem .9rem; border:1px solid #C6CFDA;
  border-radius:2px; background:#fff; color:var(--ink); width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);
}
.field .hint{ font-size:.85rem; color:var(--steel) }

/* ---------- Footer ---------- */
.site-foot{
  background:var(--navy-deep); color:rgba(255,255,255,.62);
  font-size:.93rem; padding:clamp(3rem,5vw,4rem) 0 2rem;
}
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem }
.site-foot h4{
  font-family:var(--font-head); font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; margin:0 0 1rem; font-weight:600;
}
.site-foot a{ color:rgba(255,255,255,.72); text-decoration:none }
.site-foot a:hover{ color:#fff }
.site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
.foot-brand img{ width:124px; margin-bottom:1.1rem }
.tagline{
  font-family:var(--font-head); font-weight:600; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.12); padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem;
}

.skip{ position:absolute; left:-9999px }
.skip:focus{
  left:1rem; top:1rem; z-index:100; background:#fff; color:var(--navy);
  padding:.7rem 1rem; border-radius:2px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .grid-3{ grid-template-columns:1fr }
  .hero-grid{ grid-template-columns:1fr }
  .hero-art{ order:-1; max-width:320px }
  .foot-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:680px){
  body{ font-size:16px }
  .nav{
    display:none; position:absolute; top:78px; left:0; right:0; background:var(--navy);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:.5rem var(--gut) 1.2rem; border-top:1px solid rgba(255,255,255,.12);
  }
  .nav.open{ display:flex }
  .nav a{ width:100%; padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.08) }
  .nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:rgba(255,255,255,.08) }
  .nav-toggle{ display:block }
  .grid-2,.grid-4{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr }
  .verify-badge{ flex-direction:column; text-align:center; gap:.8rem }
  .spec th{ width:50% }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }