@import url("assets/css/tokens.css");
@import url("assets/css/components.css");

:root {
  --bg-elev: #fafaff;
  --accent: var(--color-primary);
  --card: var(--color-bg);
  --radius: var(--radius-md);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}
.container{max-width:1180px;margin-inline:auto;padding:24px 32px}

.header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:88px}
.header--left{justify-content:flex-start}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.brand-name{font-weight:700;letter-spacing:-.02em;font-size:1.08rem}
.logo{width:28px;height:28px}

.nav{display:flex;align-items:center;gap:30px}
.nav a{color:var(--fg);font-size:.95rem;font-weight:600;text-decoration:none;opacity:.78}
.nav a:hover{color:var(--primary);opacity:1}
/* Details-based Info menu */
.infodrop{position:relative}
.infodrop > summary{
  list-style:none; cursor:pointer; user-select:none;
  background:transparent;border:1px solid var(--border);
  border-radius:10px; padding:6px 10px; display:inline-flex; align-items:center; gap:6px;
}
.infodrop > summary::-webkit-details-marker{display:none}
.infodrop[open] > summary{background:var(--primary-light); border-color:#b9dadd}
.infodrop-content{
  position:absolute; top:calc(100% + 8px); left:0; z-index:10;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; min-width:160px; padding:8px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.infodrop-content a{display:block; padding:8px 10px; border-radius:8px; color:var(--fg); text-decoration:none}
.infodrop-content a:hover{background:var(--primary-light)}
@media (hover:none){
  .infodrop-content{left:auto; right:0;}
}

.hero{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;padding-top:40px;position:relative}
.hero--center{place-items:center;text-align:center;min-height:50vh}
.hero h1{font-size: clamp(28px, 5vw, 48px);line-height:1.15;margin:0 0 12px;max-width:18ch}
.cta{display:flex;gap:12px;margin-top:16px}
.cta--center{justify-content:center}

.card{padding:18px}
.page-hero{padding-top:16px}
.page-hero h1{font-size: clamp(24px, 4.5vw, 40px);margin:0 0 8px}
.center{text-align:center}
.grid1{display:grid;grid-template-columns:1fr;gap:18px;margin-top:10px;max-width:800px}

.doc h1{margin-top:0}
.doc p, .doc ul{max-width:70ch}
.doc ul{padding-left:20px}
.muted{color:var(--muted)}

.form{display:grid;gap:12px;max-width:520px}
label{display:grid;gap:6px;font-weight:600}
input[type="text"], input[type="email"], textarea{
  width:100%;padding:10px 12px;
}

.footer{display:flex;align-items:flex-start;justify-content:space-between;color:var(--muted);border-top:1px solid var(--border);margin-top:80px;padding-top:28px;padding-bottom:42px}
.footer__brand{color:var(--fg);font-weight:700;text-decoration:none}
.footer__meta{display:grid;gap:12px;justify-items:end}
.footer a{color:var(--fg);opacity:.85;text-decoration:none}
.footer a:hover{color:var(--primary);opacity:1}

.footnav{display:flex;gap:8px 18px;flex-wrap:wrap}
.footnav a{color:var(--fg); text-decoration:none; opacity:.9}
.footnav a:hover{opacity:1}
.copyright{color:var(--muted); margin:0}

/* Contact form: force vertical stacking */
.form{
  display:grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  gap:12px;
  max-width:520px;
}
.form label{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:6px;
}
.form label > span{ font-weight:600 }
.form input[type="text"],
.form input[type="email"],
.form textarea{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}

/* Footer links hover to brand blue, plus clear focus state */
.footnav a:hover{ color: var(--primary) !important; opacity:1 }
.footnav a:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }

/* Home */
.eyebrow{color:var(--primary);font-size:.78rem;font-weight:700;letter-spacing:.13em;margin:0 0 20px;text-transform:uppercase}
.home-hero{align-items:center;display:grid;gap:clamp(var(--space-8),6vw,var(--space-12));grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);min-height:500px;padding-bottom:var(--space-12);padding-top:var(--space-12)}
.home-hero h1{font-size:var(--text-h1);font-weight:650;letter-spacing:-.045em;line-height:1.08;margin:0;max-width:16ch}
.home-hero__support{color:var(--muted);font-size:var(--text-lg);line-height:1.65;margin:var(--space-6) 0 0;max-width:57ch}
.node-map{height:auto;max-width:440px;width:100%}
.node-map__lines{stroke:#cde5e7;stroke-width:1.5}
.node-map__nodes{fill:var(--primary-light);stroke:var(--primary);stroke-width:2}
.node-map__center{fill:var(--primary);stroke:#fff;stroke-width:8}
.node-map text{fill:#fff;font-family:inherit;font-size:32px;font-weight:700}
.products{padding-bottom:var(--space-12);padding-top:var(--space-12);scroll-margin-top:var(--space-6)}
.products h2{font-size:var(--text-h2);font-weight:650;letter-spacing:-.035em;line-height:1.12;margin:0 0 var(--space-8);max-width:20ch}
.product-row{align-items:start;border-bottom:1px solid var(--border);border-top:1px solid var(--border);color:var(--fg);display:grid;gap:var(--space-6);grid-template-columns:52px 1fr auto;padding:var(--space-6) 0;text-decoration:none;transition:border-color .2s ease}
.product-row:hover{border-color:var(--primary)}
.product-row__number{color:var(--primary);font-size:.82rem;font-weight:700;padding-top:6px}
.product-row__content{display:grid;gap:14px}
.product-row__heading{align-items:center;display:flex;flex-wrap:wrap;gap:10px 14px}
.product-row__name{font-size:var(--text-h3);font-weight:650;letter-spacing:-.03em}
.product-status{color:var(--primary);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.product-row__description{color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:62ch}
.product-row__arrow{color:var(--primary);font-size:1.8rem;line-height:1}
.contact-context{border-left:3px solid var(--primary);color:var(--fg);font-weight:700;padding-left:12px}
.btn:disabled{cursor:wait;opacity:.7}

/* Privacy Data */
.data-hero{padding-bottom:88px;padding-top:96px}
.data-hero h1{font-size:clamp(42px,6vw,68px);font-weight:650;letter-spacing:-.055em;line-height:1.04;margin:0;max-width:15ch;white-space:pre-line}
.data-hero__support{color:var(--muted);font-size:clamp(18px,2vw,21px);line-height:1.65;margin:28px 0 0;max-width:54ch}
.data-section{border-top:1px solid var(--border);display:grid;gap:40px;grid-template-columns:minmax(190px,.55fr) minmax(0,1.45fr);padding-bottom:80px;padding-top:80px}
.data-section h2{font-size:clamp(27px,3vw,38px);font-weight:650;letter-spacing:-.035em;line-height:1.15;margin:0}
.data-list{display:grid;gap:0;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0}
.data-list li{border-bottom:1px solid var(--border);padding:14px 20px 14px 0}
.data-copy{font-size:1.08rem;max-width:62ch}
.data-copy p{margin:0 0 18px}
.data-callout{border-left:3px solid var(--primary);padding-left:24px}
.data-state{color:var(--primary);font-size:.78rem;font-weight:700;letter-spacing:.12em;margin:0 0 16px;text-transform:uppercase}
.data-cta{margin-top:28px}

@media (max-width:720px){
  .container{padding-left:20px;padding-right:20px}
  .header{min-height:72px}
  .nav{gap:16px}
  .nav a{font-size:.88rem}
  .home-hero{grid-template-columns:1fr;min-height:auto;padding-bottom:var(--space-8);padding-top:var(--space-8)}
  .home-hero h1{font-size:var(--text-h1)}
  .home-hero__support{margin-top:var(--space-4)}
  .node-map{justify-self:center;max-width:330px}
  .products{padding-bottom:var(--space-8);padding-top:var(--space-12)}
  .products h2{margin-bottom:var(--space-6)}
  .product-row{gap:var(--space-4);grid-template-columns:34px 1fr auto;padding:var(--space-6) 0}
  .product-row__description{font-size:.98rem}
  .data-hero{padding-bottom:64px;padding-top:72px}
  .data-hero h1{font-size:clamp(36px,11vw,48px)}
  .data-section{gap:28px;grid-template-columns:1fr;padding-bottom:56px;padding-top:56px}
  .data-list{grid-template-columns:1fr}
  .footer{flex-direction:column;gap:26px;margin-top:52px}
  .footer__meta{justify-items:start}
}

@media (max-width:390px){
  .header{gap:var(--space-2);padding-left:var(--space-3);padding-right:var(--space-3)}
  .brand-name{font-size:1rem}
  .nav{gap:10px}
  .nav a{font-size:.78rem}
}