/* =========================================================
   BYNSH — Building Your Next Smart Hub
   Design tokens
   ========================================================= */
:root{
  --navy-deep:   #0A1428;
  --navy-panel:  #0F1F3D;
  --navy-panel-2:#122548;
  --navy-line:   #1E3358;

  --gold-dim:    #8A6E2F;
  --gold:        #D4AF6A;
  --gold-bright: #F1D98B;

  --paper:       #F4F1E8;
  --slate:       #7C8AA3;
  --slate-dim:   #4E5C78;

  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --radius: 4px;
  --max-w: 1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body.bynsh{
  margin:0;
  background:var(--navy-deep);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size:48px 48px;
  background-attachment:fixed;
  background-position:center top;
}

/* Circuit-grid is intentionally faint — panels sit above it */
body.bynsh::before{
  content:"";
  position:fixed; inset:0;
  background:radial-gradient(ellipse at top, rgba(212,175,106,0.07), transparent 60%),
             radial-gradient(ellipse at bottom, rgba(10,20,40,0.9), var(--navy-deep) 70%);
  pointer-events:none;
  z-index:0;
}

a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-bright); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
  color:var(--paper);
}

.container{ max-width:var(--max-w); margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* ---------- Metallic gold text treatment ---------- */
.gold-metal{
  background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 45%, var(--gold-dim) 55%, var(--gold) 75%, var(--gold-bright) 100%);
  background-size:100% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:metal-sheen 7s ease-in-out infinite;
}
@keyframes metal-sheen{
  0%,100%{ background-position:0 0%; }
  50%{ background-position:0 100%; }
}
@media (prefers-reduced-motion: reduce){
  .gold-metal{ animation:none; background-position:0 30%; }
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:20px; height:1px;
  background:var(--gold-dim);
  display:inline-block;
}

/* ---------- Header ---------- */
.bynsh-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,20,40,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--navy-line);
}
.bynsh-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.bynsh-logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  letter-spacing:0.02em;
  display:flex; align-items:center; gap:10px;
}
.bynsh-logo .node-mark{ width:22px; height:22px; }

.bynsh-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.bynsh-nav a{
  color:var(--paper);
  font-size:14px;
  font-weight:500;
  letter-spacing:0.01em;
}
.bynsh-nav a:hover{ color:var(--gold); }

.bynsh-nav-toggle{
  display:none;
  background:none; border:1px solid var(--navy-line); color:var(--paper);
  border-radius:var(--radius); padding:8px 12px; font-family:var(--font-mono); font-size:12px;
}

/* ---------- Hero ---------- */
.bynsh-hero{
  padding:120px 0 100px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.bynsh-hero h1{
  font-size:clamp(36px, 6vw, 68px);
  line-height:1.05;
  margin-bottom:20px;
}
.bynsh-hero p.lead{
  max-width:620px;
  margin:0 auto 36px;
  color:var(--slate);
  font-size:18px;
}
.bynsh-hero .eyebrow{ margin-bottom:22px; justify-content:center; }

/* ---------- Signature element: the Hub Node ---------- */
.hub-node-wrap{
  width:280px; height:280px;
  margin:0 auto 48px;
  position:relative;
}
.hub-node-wrap svg{ width:100%; height:100%; overflow:visible; }
.hub-core{
  fill:var(--navy-panel);
  stroke:url(#hub-gold-grad);
  stroke-width:1.5;
}
.hub-pulse{
  fill:none;
  stroke:var(--gold);
  stroke-width:1;
  opacity:0.5;
  transform-origin:center;
  animation:hub-ping 3s ease-out infinite;
}
.hub-pulse.delay1{ animation-delay:1s; }
.hub-pulse.delay2{ animation-delay:2s; }
@keyframes hub-ping{
  0%{ transform:scale(0.6); opacity:0.6; }
  100%{ transform:scale(1.35); opacity:0; }
}
.hub-line{ stroke:var(--gold-dim); stroke-width:1; opacity:0.6; }
.hub-satellite{ fill:var(--navy-deep); stroke:var(--gold); stroke-width:1.5; }
.hub-satellite-dot{ fill:var(--gold); }
@media (prefers-reduced-motion: reduce){
  .hub-pulse{ animation:none; opacity:0.15; }
}

/* CTA buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
  padding:14px 26px;
  border-radius:var(--radius);
  border:1px solid var(--gold-dim);
  transition:all .2s ease;
}
.btn-primary{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:var(--navy-deep);
  font-weight:700;
  border-color:transparent;
}
.btn-primary:hover{ filter:brightness(1.08); color:var(--navy-deep); transform:translateY(-1px); }
.btn-ghost{ color:var(--paper); background:transparent; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- Sections / panels ---------- */
.bynsh-section{ padding:90px 0; position:relative; }
.bynsh-panel{
  background:var(--navy-panel);
  border:1px solid var(--navy-line);
  border-radius:8px;
  padding:36px;
}
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-head h2{ font-size:clamp(28px,4vw,40px); }
.section-head p{ color:var(--slate); font-size:16px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

.spec-card{
  background:var(--navy-panel);
  border:1px solid var(--navy-line);
  border-radius:8px;
  padding:28px;
  transition:border-color .2s ease, transform .2s ease;
}
.spec-card:hover{ border-color:var(--gold-dim); transform:translateY(-2px); }
.spec-card .spec-index{ font-family:var(--font-mono); color:var(--gold-dim); font-size:12px; letter-spacing:0.1em; }
.spec-card h3{ font-size:19px; margin:10px 0 8px; }
.spec-card p{ color:var(--slate); font-size:15px; margin:0; }

.readout{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--gold);
  background:var(--navy-deep);
  border:1px solid var(--navy-line);
  border-radius:var(--radius);
  padding:16px 18px;
  white-space:pre-wrap;
}

/* ---------- Footer ---------- */
.bynsh-footer{
  border-top:1px solid var(--navy-line);
  padding:56px 0 40px;
  color:var(--slate);
  font-size:14px;
}
.bynsh-footer .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.bynsh-footer a{ color:var(--slate); }
.bynsh-footer a:hover{ color:var(--gold); }

/* ---------- Elementor compatibility ---------- */
.elementor-widget-heading .elementor-heading-title{ color:var(--paper); font-family:var(--font-display); }
.elementor-widget-text-editor{ color:var(--paper); }
.elementor-section{ position:relative; }

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  .bynsh-nav{ display:none; }
  .bynsh-nav-toggle{ display:inline-flex; }
  .bynsh-hero{ padding:90px 0 70px; }
}