/* ===========================================================
   HC Distributors - homepage mockup
   Sutera Sites, 2026
   =========================================================== */

:root{
  --blue:        #0B41C9;
  --blue-deep:   #072C8E;
  --blue-ink:    #041B5C;
  --blue-press:  #0937A8;
  --ink:         #060B1B;
  --ink-soft:    #101A33;
  --paper:       #F5F7FC;
  --paper-2:     #EAEEF8;
  --line:        #DCE3F1;
  --text:        #10182B;
  --muted:       #5B6784;
  --white:       #fff;

  --wrap: 1240px;
  --pad: clamp(1.5rem, 4vw, 3.5rem);
  --r: 10px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-0.035em; line-height:1.04; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--white); color:var(--blue); padding:.75rem 1.25rem; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:4px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.9rem;
  padding:.55rem .55rem .55rem 1.35rem;
  border:0; border-radius:var(--r);
  font-size:.95rem; font-weight:500; letter-spacing:-0.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s;
}
.btn__ico{
  display:grid; place-items:center;
  width:2.1rem; height:2.1rem; border-radius:6px; flex:none;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background .2s;
}
.btn__ico svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.btn--white{ background:var(--white); color:var(--blue-ink); }
.btn--white .btn__ico{ background:var(--blue); color:#fff; }
.btn--blue{ background:var(--blue); color:#fff; }
.btn--blue .btn__ico{ background:rgba(255,255,255,.16); color:#fff; }

.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(4,20,70,.22); }
.btn:hover .btn__ico{ transform:translate(2px,-2px); }
.btn--blue:hover{ background:var(--blue-press); }

.btn--sm{ padding:.4rem .4rem .4rem 1.1rem; font-size:.9rem; }
.btn--sm .btn__ico{ width:1.85rem; height:1.85rem; }
.btn--lg{ padding:.7rem .7rem .7rem 1.6rem; font-size:1.02rem; }
.btn--lg .btn__ico{ width:2.5rem; height:2.5rem; }

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1rem,3vw,2rem);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), background .35s, backdrop-filter .35s, box-shadow .35s;
  will-change:transform;
}
/* hidden on scroll down, restored on scroll up */
.nav.is-hidden{ transform:translateY(-115%); }
/* never trap a keyboard user in a hidden bar, and never hide behind the open drawer */
.nav:focus-within,
body.drawer-open .nav{ transform:none; }
.nav.is-stuck{
  background:rgba(6,22,74,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
/* once past the blue hero the nav flips to a light treatment */
.nav.is-light{
  background:rgba(255,255,255,.9);
  box-shadow:0 1px 0 var(--line);
}

.nav__brand{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav__mark{ width:auto; height:26px; flex:none; }
.nav__mark--dark{ display:none; }
.nav.is-light .nav__mark--light{ display:none; }
.nav.is-light .nav__mark--dark{ display:block; }
.nav__word{
  font-family:var(--sans); font-weight:600; font-size:1.05rem;
  letter-spacing:-.01em; color:#fff; line-height:1;
  display:flex; align-items:baseline; gap:.4em;
}
.nav__word em{ font-style:normal; font-weight:300; font-size:.92em; letter-spacing:.06em; opacity:.9; }

.nav.is-light .nav__word{ color:var(--blue-ink); }

.nav__pill{
  display:flex; align-items:center; gap:.15rem;
  background:rgba(3,18,66,.5);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:.28rem;
}
.nav__pill--center{
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav__pill a{
  padding:.5rem .95rem; border-radius:9px;
  font-size:.93rem; font-weight:450; color:rgba(255,255,255,.82);
  transition:background .2s, color .2s;
}
.nav__pill a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav__pill a.is-active{ background:#fff; color:var(--blue); font-weight:500; }

.nav.is-light .nav__pill{ background:var(--paper-2); border-color:var(--line); }
.nav.is-light .nav__pill a{ color:var(--muted); }
.nav.is-light .nav__pill a:hover{ color:var(--blue-ink); background:rgba(11,65,201,.08); }
.nav.is-light .nav__pill a.is-active{ background:var(--blue); color:#fff; }
.nav.is-light .btn--white{ background:var(--blue); color:#fff; }
.nav.is-light .btn--white .btn__ico{ background:rgba(255,255,255,.18); }

.nav__right{ display:flex; align-items:center; gap:.6rem; flex:none; }

.nav__burger{
  display:none; width:44px; height:38px; padding:0;
  background:rgba(3,18,66,.5); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; cursor:pointer;
}
.nav__burger span{ display:block; width:18px; height:1.6px; margin:4px auto; background:#fff; transition:transform .3s, opacity .2s; }
.nav.is-light .nav__burger{ background:var(--paper-2); border-color:var(--line); }
.nav.is-light .nav__burger span{ background:var(--blue-ink); }
body.drawer-open .nav__burger span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
body.drawer-open .nav__burger span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ---------- drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--blue); opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
  display:grid; place-items:center;
}
body.drawer-open .drawer{ opacity:1; visibility:visible; }
.drawer__panel{ display:flex; flex-direction:column; gap:.25rem; text-align:center; }
.drawer__panel a{
  font-size:clamp(1.6rem,7vw,2.2rem); font-weight:500; letter-spacing:-.03em; color:#fff;
  padding:.35rem 1rem;
}
.drawer__cta{ margin-top:1.25rem; background:#fff; color:var(--blue) !important; border-radius:var(--r); }

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:8rem var(--pad) clamp(2.5rem,5vh,4rem);
  background:var(--blue);
  overflow:hidden;
}
/* depth: slight vignette so the white type sits cleanly */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 42%, transparent 40%, rgba(4,20,80,.42) 100%),
    linear-gradient(to top, rgba(4,20,80,.5) 0%, transparent 45%);
}

.hero__canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
}

.hero__labels{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.lbl{
  position:absolute;
  font-family:var(--mono); font-size:.7rem; font-weight:400;
  letter-spacing:.14em; color:rgba(255,255,255,.72); white-space:nowrap;
  animation:lblIn .9s cubic-bezier(.2,.7,.3,1) both;
}
.lbl--1{ top:23%;  left:63.5%; animation-delay:.5s; }
.lbl--2{ top:53%;  left:24.5%; animation-delay:.65s; }
.lbl--3{ top:64%;  left:27.5%; animation-delay:.8s; }
@keyframes lblIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

.hero__inner{ position:relative; z-index:3; max-width:min(56rem,92%); }
.hero__h1{
  font-size:clamp(2.7rem, 7.2vw, 6.1rem);
  font-weight:400; color:#fff; letter-spacing:-.042em; line-height:1.02;
  margin-bottom:clamp(1.75rem,3.5vh,2.5rem);
  animation:heroIn 1s cubic-bezier(.2,.7,.3,1) both .15s;
}
.hero__cta{ animation:heroIn 1s cubic-bezier(.2,.7,.3,1) both .3s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none; } }

/* ===========================================================
   STATS
   =========================================================== */
.stats{ background:var(--blue-ink); color:#fff; padding:clamp(2.5rem,5vw,3.5rem) 0; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem clamp(1rem,3vw,2.5rem); }
.stat{ display:flex; flex-direction:column; gap:.5rem; }
.stat + .stat{ position:relative; }
.stat + .stat::before{
  content:""; position:absolute; left:calc(-1 * clamp(.5rem,1.5vw,1.25rem)); top:.2rem; bottom:.2rem;
  width:1px; background:rgba(255,255,255,.14);
}
.stat b{ font-size:clamp(2.4rem,4.6vw,3.4rem); font-weight:400; letter-spacing:-.045em; line-height:1; }
.stat b sup{ font-size:.42em; top:-.9em; font-weight:400; opacity:.85; }
.stat span{ font-size:.86rem; line-height:1.45; color:rgba(255,255,255,.66); }

/* ===========================================================
   SECTION SHELL
   =========================================================== */
.sec{ padding:clamp(4.5rem,9vw,8rem) 0; }
.sec--light{ background:var(--paper); }
.sec--dark{ background:var(--ink); color:#fff; }
.sec--blue{ background:var(--blue); color:#fff; }

.sec__head{ max-width:46rem; margin:0 auto clamp(2.75rem,5vw,4rem); text-align:center; }
.sec__head--left{ margin-inline:0; text-align:left; }

.eyebrow{
  display:inline-block; margin-bottom:1.1rem;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
}
.eyebrow--on-dark{ color:rgba(255,255,255,.6); }

.sec__h2{ font-size:clamp(1.9rem,4.1vw,3.1rem); font-weight:400; }
.sec__lede{ margin-top:1.25rem; font-size:clamp(1rem,1.4vw,1.1rem); color:var(--muted); }
.sec--dark .sec__lede,
.sec--blue .sec__lede{ color:rgba(255,255,255,.68); }

/* ---------- brands ---------- */
.brands{
  display:grid; grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--white);
}
.brands li{
  display:grid; place-items:center; min-height:132px; padding:1.5rem 1.25rem;
  box-shadow:inset -1px -1px 0 var(--line);
  transition:background .25s;
}
.brands li:hover{ background:var(--paper); }
/* logos are pre-normalised onto a uniform 600x200 canvas, so one width rule balances them all */
.brands img{ width:100%; max-width:172px; height:auto; }
/* swap to .brands img{ filter:grayscale(1) opacity(.6); } for a muted wall */
.brands__note{
  margin-top:1.1rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.08em; color:var(--muted); text-align:center;
}

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; }
.card{ background:var(--ink); padding:clamp(1.75rem,3vw,2.4rem); transition:background .3s; }
.card:hover{ background:var(--ink-soft); }
.card__n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:rgba(255,255,255,.4); }
.card h3{ margin:1.5rem 0 .8rem; font-size:1.28rem; font-weight:500; }
.card p{ font-size:.95rem; color:rgba(255,255,255,.62); }

/* ---------- sectors ---------- */
.sectors__wrap{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.sectors__wrap .sec__head{ margin-bottom:0; position:sticky; top:6.5rem; }
.sectors{ border-top:1px solid var(--line); }
.sectors li{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:1rem 2rem;
  padding:1.5rem 0; border-bottom:1px solid var(--line);
  transition:padding-left .3s;
}
.sectors li:hover{ padding-left:.6rem; }
.sectors b{ font-size:1.14rem; font-weight:500; letter-spacing:-.02em; color:var(--blue-ink); }
.sectors span{ font-size:.95rem; color:var(--muted); }

/* ---------- network ---------- */
.net__wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.net__copy .sec__lede{ margin-bottom:2rem; }
.ticks{ margin-bottom:2.25rem; display:grid; gap:.85rem; }
.ticks li{ position:relative; padding-left:1.9rem; font-size:1rem; color:rgba(255,255,255,.85); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:9px; height:9px; border-radius:50%; background:#fff;
}
.net__viz{ position:relative; aspect-ratio:1; }
.net__viz canvas{ width:100%; height:100%; }
.net__cap{
  position:absolute; left:50%; bottom:-.25rem; transform:translateX(-50%);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; color:rgba(255,255,255,.55);
}

/* ===========================================================
   CONTACT
   =========================================================== */
.cta{ background:var(--blue-ink); color:#fff; padding:clamp(4.5rem,9vw,8rem) 0; }
.cta__wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.cta__h2{ font-size:clamp(1.9rem,4.1vw,3.1rem); font-weight:400; }
.cta__copy p{ margin-top:1.25rem; color:rgba(255,255,255,.68); max-width:34rem; }
.cta__details{ margin-top:2.5rem; display:grid; gap:1.15rem; }
.cta__details div{ display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; align-items:baseline; }
.cta__details dt{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.cta__details dd{ margin:0; font-size:1rem; }
.cta__details a:hover{ text-decoration:underline; }

.form{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:clamp(1.5rem,3vw,2.25rem); display:grid; gap:1.1rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form label{ display:grid; gap:.5rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.form input,.form select,.form textarea{
  width:100%; padding:.8rem .9rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:8px;
  color:#fff; font-family:var(--sans); font-size:.98rem; letter-spacing:normal; text-transform:none;
  transition:border-color .2s, background .2s;
}
.form textarea{ resize:vertical; }
.form select option{ color:#111; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.1); }
.form .btn{ justify-self:start; margin-top:.35rem; }
.form__note{ font-size:.88rem; color:#9EC3FF; min-height:1.2em; }

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{ background:var(--ink); color:#fff; padding:clamp(3.5rem,6vw,5rem) 0 2rem; }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:2.5rem; padding-bottom:3rem; }
.foot__mark{ width:auto; height:62px; margin-bottom:1.25rem; }
.foot__brand p{ font-size:.92rem; color:rgba(255,255,255,.55); max-width:26rem; }
.foot__col h4{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:1.1rem; font-weight:500; }
.foot__col a{ display:block; padding:.34rem 0; font-size:.94rem; color:rgba(255,255,255,.78); transition:color .2s; }
.foot__col a:hover{ color:#fff; }
.foot__base{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.84rem; color:rgba(255,255,255,.45);
}
.foot__legal{ display:flex; gap:1.5rem; }
.foot__legal a:hover{ color:#fff; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1180px){
  .nav__pill--center{ display:none; }
}

@media (max-width:1080px){
  .brands{ grid-template-columns:repeat(4,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .nav__right{ display:none; }
  .nav__burger{ display:block; }
  .sectors__wrap,
  .net__wrap,
  .cta__wrap{ grid-template-columns:1fr; }
  .sectors__wrap .sec__head{ position:static; }
  .net__viz{ max-width:26rem; margin-inline:auto; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:2.25rem 1.5rem; }
  .stat:nth-child(3)::before{ display:none; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .hero{ min-height:92svh; padding-top:7rem; }
  .hero__h1{ font-size:clamp(2.3rem,10vw,3.2rem); }
  .lbl{ font-size:.6rem; }
  .lbl--1{ left:58%; } .lbl--2{ left:6%; } .lbl--3{ left:9%; }
  .brands{ grid-template-columns:repeat(2,1fr); }
  .brands li{ min-height:92px; }
  .cards{ grid-template-columns:1fr; }
  .sectors li{ grid-template-columns:1fr; gap:.35rem; }
  .form__row{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .stat::before{ display:none !important; }
  .foot__grid{ grid-template-columns:1fr; gap:2rem; }
  .cta__details div{ grid-template-columns:1fr; gap:.2rem; }
}

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