/* ============ TOKENS ============ */
:root{
  --navy-900:#081120;
  --navy-800:#0C1930;
  --navy-700:#132443;
  --cyan:#20C7D4;
  --cyan-dim:#1B93A0;
  --gold:#CBA135;
  --gold-dim:#A9822A;
  --paper:#F6F8FB;
  --paper-2:#EEF2F7;
  --ink:#0E1524;
  --slate:#54637A;
  --slate-light:#8B98AC;
  --muted-light: rgba(246,248,251,0.6);
  --white:#FFFFFF;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 14px;
  --wrap: 1180px;
}

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

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  line-height:1.08;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2rem, 4vw + 1rem, 3.4rem); font-weight:700;}
h2{font-size:clamp(1.6rem, 2.4vw + 1rem, 2.4rem); font-weight:600; max-width:26ch;}
h3{font-size:1.05rem; font-weight:600;}
p{margin:0 0 1em; color:var(--slate); line-height:1.6;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}

.eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
  font-weight:600;
  color:var(--cyan);
  margin-bottom:0.9em;
}
.eyebrow-dark{color:var(--gold-dim);}

.section-lead{max-width:58ch; font-size:1.05rem;}
.section-lead.light{color:rgba(246,248,251,0.72);}
.h-compact{max-width:38ch;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.92rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--cyan); color:var(--navy-900);}
.btn-primary:hover{background:#3ad6e2;}
.btn-ghost{border-color:rgba(255,255,255,0.28); color:var(--white);}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan);}
.btn-text{color:var(--ink); font-family:var(--font-display); font-weight:600; padding:13px 6px;}
.btn-text:hover{color:var(--cyan-dim);}
.btn-full{width:100%;}

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,17,32,0.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  overflow-y: scroll;
}
.header-inner{
  display:flex; align-items:center; gap:28px;
  height:74px;
}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto;}
.brand-mark{display:block; height:5rem; object-fit:contain;}
.brand-word{
  font-family:var(--font-display); font-weight:700; letter-spacing:0.02em;
  font-size:1.05rem; color:var(--white); white-space:nowrap;
}
.brand-word-accent{color:var(--cyan);}
.footer-logo{display:block; height:5rem; width:auto; margin-bottom:12px;}
.footer-legal{text-align:right;}
.footer-legal .footer-copy{margin:0 0 2px;}
@media (max-width: 640px){
  .footer-legal{text-align:left;}
  .brand-word{display:none;}
}
.main-nav{display:flex; gap:26px;}
.main-nav a{
  color:rgba(255,255,255,0.78); font-size:0.94rem; font-weight:500;
  transition:color 0.15s ease;
}
.main-nav a:hover{color:var(--cyan);}
.header-cta{white-space:nowrap;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--white); display:block;}

/* ============ HERO ============ */
.grid-glow{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(600px 400px at 85% -5%, rgba(32,199,212,0.10), transparent 60%),
    var(--paper);
}
.hero{
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  padding: 76px 0 90px;
  overflow:hidden;
  position:relative;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.hero-copy h1{color:var(--white);}
.hero-sub{color:rgba(246,248,251,0.72); font-size:1.08rem; max-width:52ch;}
.hero-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:28px 0 40px;}
.hero .btn-text{color:rgba(246,248,251,0.85);}
.hero .btn-text:hover{color:var(--cyan);}

.hero-stats{
  display:flex; gap:34px; flex-wrap:wrap;
  padding-top:26px; margin:0;
  border-top:1px solid rgba(255,255,255,0.12);
}
.hero-stats dt{
  font-family:var(--font-display); font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--gold); margin-bottom:4px;
}
.hero-stats dd{margin:0; color:var(--white); font-size:0.94rem; font-weight:500;}

.hero-visual{display:flex; align-items:center; justify-content:center;}
.circuit-svg{width:100%; max-width:440px; height:auto;}
.node{filter:drop-shadow(0 0 6px currentColor);}
.node-cyan{fill:var(--cyan); color:var(--cyan);}
.node-cyan-lg{fill:var(--cyan); color:var(--cyan);}
.node-gold{fill:var(--gold); color:var(--gold);}
.node-gold-lg{fill:var(--gold); color:var(--gold);}
.node-white{fill:#fff; color:#fff;}
.circuit-lines path, .circuit-lines-gold path{stroke-dasharray:6 6; animation:dash 26s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-600;}}
.circuit-nodes circle{animation:pulse 3.2s ease-in-out infinite;}
.circuit-nodes circle:nth-child(odd){animation-delay:0.6s;}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.55;}
}

/* ============ SECTIONS ============ */
.section{padding:88px 0;}
.section.dark{
  background:var(--navy-900);
  color:var(--white);
}
.section.dark h2, .section.dark h3{color:var(--white);}

/* pain */
.pain-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;
}
.pain-card{
  background:var(--white); border-radius:var(--radius);
  padding:28px; border:1px solid var(--paper-2);
}
.pain-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px;
  background:rgba(203,161,53,0.12); color:var(--gold-dim);
  margin-bottom:16px;
}
.pain-card p{margin:0; font-size:0.94rem;}

/* products */
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;
}
.product-card{
  background:var(--white); border-radius:var(--radius);
  padding:26px; border:1px solid var(--paper-2);
  transition:border-color 0.2s ease, transform 0.2s ease;
  display:block;
}
.product-card:hover{border-color:var(--cyan); transform:translateY(-3px);}
.product-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:10px;
  background:rgba(32,199,212,0.10); color:var(--cyan-dim);
  margin-bottom:16px;
}
.product-card p{margin:0 0 14px; font-size:0.92rem;}
.product-more{
  font-family:var(--font-display); font-size:0.82rem; font-weight:600;
  color:var(--cyan-dim);
}
.product-card:hover .product-more{color:var(--cyan);}

/* ============ CATEGORY PAGES ============ */
.category-hero{
  background:linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  padding:56px 0 60px;
  color:var(--white);
}
.breadcrumb{
  display:flex; gap:8px; align-items:center;
  font-size:0.86rem; color:rgba(246,248,251,0.6); margin-bottom:22px;
}
.breadcrumb a{color:rgba(246,248,251,0.85);}
.breadcrumb a:hover{color:var(--cyan);}
.category-hero h1{color:var(--white); max-width:24ch;}
.category-hero .hero-sub{max-width:56ch;}

.item-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;
}
.item-card{
  background:var(--white); border-radius:var(--radius);
  border:1px solid var(--paper-2); padding:0; overflow:hidden;
  display:flex; flex-direction:column;
}
.item-visual{
  background:var(--paper-2);
  display:flex; align-items:center; justify-content:center;
  padding:32px 0;
}
.item-visual svg{width:76px; height:76px; color:var(--cyan-dim);}
.item-body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.item-body h3{margin:0;}
.item-body p{margin:0; font-size:0.92rem; flex:1;}
.item-cta{
  align-self:flex-start;
  font-family:var(--font-display); font-weight:600; font-size:0.86rem;
  color:var(--cyan-dim); display:inline-flex; align-items:center; gap:6px;
}
.item-cta:hover{color:var(--cyan-dim); text-decoration:underline;}

.category-note{
  margin-top:40px; padding:16px 18px; border-radius:10px;
  background:rgba(203,161,53,0.08); border:1px solid rgba(203,161,53,0.24);
  font-size:0.88rem; color:var(--slate); max-width:70ch;
}

.category-cta{
  background:var(--navy-900); color:var(--white); padding:56px 0; text-align:center;
}
.category-cta h2{color:var(--white); margin:0 auto 20px; max-width:36ch;}

@media (max-width:900px){
  .item-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .item-grid{grid-template-columns:1fr;}
}

/* steps */
.steps-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px;
}
.step-card{
  border-top:1px solid rgba(255,255,255,0.14);
  padding-top:20px;
}
.step-num{
  display:block; font-family:var(--font-display); font-size:1.6rem; font-weight:700;
  color:var(--cyan); margin-bottom:14px;
}
.step-card p{color:rgba(246,248,251,0.68); font-size:0.92rem; margin:0;}

/* brands */
.brands{padding-top:60px; padding-bottom:60px;}
.brand-strip{
  display:flex; flex-wrap:wrap; gap:14px 40px; margin:36px 0 16px;
}
.brand-strip li{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  color:var(--slate-light);
}
.brand-note{font-size:0.8rem; color:var(--slate-light); max-width:60ch;}

/* contact */
.contact-wrap{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:start;
}
.contact-list{margin:26px 0; display:flex; flex-direction:column; gap:16px;}
.contact-list li{display:flex; flex-direction:column; gap:2px; font-size:0.96rem; color:var(--ink);}
.contact-label{
  font-family:var(--font-display); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--gold-dim);
}
.map-embed{border-radius:var(--radius); overflow:hidden; border:1px solid var(--paper-2);}

.contact-form{
  background:var(--white); border:1px solid var(--paper-2); border-radius:var(--radius);
  padding:30px; display:flex; flex-direction:column; gap:16px;
}
.contact-form label{
  display:flex; flex-direction:column; gap:7px; font-size:0.86rem; font-weight:600; color:var(--ink);
}
.contact-form input, .contact-form textarea{
  font-family:var(--font-body); font-size:0.96rem; padding:12px 14px;
  border:1px solid #DDE3EC; border-radius:9px; background:var(--paper);
  color:var(--ink); resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:2px solid var(--cyan); outline-offset:1px; border-color:var(--cyan);
}
.form-note{font-size:0.82rem; color:var(--cyan-dim); background:rgba(32,199,212,0.08); padding:10px 12px; border-radius:8px;}
.form-error{font-size:0.82rem; color:#B4483A; background:rgba(180,72,58,0.08); padding:10px 12px; border-radius:8px;}

/* ============ FOOTER ============ */
.site-footer{background:var(--navy-900); color:rgba(246,248,251,0.7); padding:44px 0;}
.footer-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px;
}
.footer-brand{font-size:1.1rem;}
.footer-tag{max-width:34ch; margin:8px 0 0; font-size:0.86rem; color:rgba(246,248,251,0.55);}
.footer-nav{display:flex; gap:20px;}
.footer-nav a{color:rgba(246,248,251,0.75); font-size:0.9rem;}
.footer-nav a:hover{color:var(--cyan);}
.footer-copy{font-size:0.8rem; color:rgba(246,248,251,0.45); margin:0;}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{order:-1; max-width:320px; margin:0 auto;}
  .pain-grid, .product-grid{grid-template-columns:repeat(2,1fr);}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .contact-wrap{grid-template-columns:1fr;}
  .main-nav{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--navy-900);
    padding:10px 24px 20px; gap:2px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform 0.18s ease, opacity 0.18s ease;
  }
  .main-nav a{padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.06);}
  .main-nav.is-open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-toggle{display:flex;}
  .header-cta{display:none;}
}
@media (max-width: 560px){
  .pain-grid, .product-grid, .steps-grid{grid-template-columns:1fr;}
  .header-inner{height:64px;}
  .brand-word{font-size:0.82rem;}
}