:root{
  --bg:#0A0F1C;
  --bg-alt:#0D1526;
  --panel:#101A2E;
  --panel-border:#1E2A44;
  --cyan:#22D3EE;
  --cyan-dim:#0E7490;
  --amber:#F5A524;
  --text:#E7ECF3;
  --text-dim:#8B9AB3;
  --line:#1B2740;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.logo{font-family:'Space Grotesk',sans-serif;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* ---------- NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,15,28,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo{font-size:1.3rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}
.logo span{color:var(--cyan);}
.nav-links{display:flex;align-items:center;gap:8px;list-style:none;}
.nav-links a{
  padding:8px 16px;border-radius:6px;font-size:0.95rem;color:var(--text-dim);
  transition:color .2s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-links .cta-btn{
  background:var(--amber);color:#1A1200;font-weight:600;padding:9px 18px;border-radius:6px;
}
.nav-links .cta-btn:hover{background:#ffb63d;color:#1A1200;}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
.burger span{width:24px;height:2px;background:var(--text);display:block;}

/* ---------- PAGE HEADER (about/services/contact) ---------- */
.page-header{
  padding:150px 0 60px;
  background:
    radial-gradient(circle at 85% 20%, rgba(34,211,238,0.10), transparent 45%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.section-tag{color:var(--amber);font-size:0.85rem;font-weight:600;margin-bottom:10px;}
.page-header h1{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;margin-bottom:14px;max-width:640px;}
.page-header p{color:var(--text-dim);max-width:560px;}

/* ---------- HERO (home only) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:72px;
  background:
    radial-gradient(circle at 78% 30%, rgba(34,211,238,0.12), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(245,165,36,0.08), transparent 40%),
    var(--bg);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;width:100%;}
.eyebrow{color:var(--cyan);font-size:0.85rem;letter-spacing:0.02em;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);}
.hero h1{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:700;line-height:1.15;margin-bottom:20px;max-width:620px;}
.hero h1 em{color:var(--cyan);font-style:normal;}
.hero p{color:var(--text-dim);font-size:1.08rem;max-width:520px;margin-bottom:32px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary{
  background:var(--amber);color:#1A1200;font-weight:600;padding:14px 26px;border-radius:8px;
  display:inline-flex;align-items:center;gap:8px;transition:transform .2s ease, background .2s ease;
}
.btn-primary:hover{background:#ffb63d;transform:translateY(-2px);}
.btn-secondary{
  border:1px solid var(--panel-border);color:var(--text);padding:14px 26px;border-radius:8px;
  transition:border-color .2s ease, background .2s ease;
}
.btn-secondary:hover{border-color:var(--cyan);background:rgba(34,211,238,0.06);}

.network-art{position:relative;height:420px;}
.network-art svg{width:100%;height:100%;}
.n-line{stroke:var(--cyan-dim);stroke-width:1.4;fill:none;stroke-dasharray:6 460;stroke-dashoffset:0;animation:draw 2.6s ease forwards;}
.n-line.delay1{animation-delay:.15s;}
.n-line.delay2{animation-delay:.3s;}
.n-line.delay3{animation-delay:.45s;}
.n-node{fill:var(--bg-alt);stroke:var(--cyan);stroke-width:2;}
.n-node.pulse{animation:pulse 2.6s ease-in-out infinite;}
.n-node.amber{stroke:var(--amber);}
@keyframes draw{from{stroke-dasharray:6 900;stroke-dashoffset:0;opacity:0;}to{stroke-dasharray:900 0;opacity:1;}}
@keyframes pulse{0%,100%{r:5;}50%{r:8;}}

.stat-row{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap;}
.stat-row div p:first-child{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:700;color:var(--text);}
.stat-row div p:last-child{color:var(--text-dim);font-size:0.85rem;}

/* ---------- HOME: highlight strip ---------- */
.highlight-strip{padding:90px 0;background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.highlight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.highlight-card{
  background:var(--panel);border:1px solid var(--panel-border);border-left:3px solid var(--cyan);
  border-radius:6px;padding:26px;
  transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease;
}
.highlight-card.amber{border-left-color:var(--amber);}
.highlight-card:hover{box-shadow:0 20px 40px -20px rgba(0,0,0,0.6);}
.highlight-card svg{width:30px;height:30px;color:var(--cyan);margin-bottom:16px;}
.highlight-card.amber svg{color:var(--amber);}
.highlight-card h3{font-size:1.1rem;margin-bottom:8px;}
.highlight-card p{color:var(--text-dim);font-size:0.92rem;margin-bottom:14px;}
.highlight-card a{color:var(--cyan);font-size:0.88rem;font-weight:600;}

.home-cta{padding:90px 0;text-align:center;}
.home-cta h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px;}
.home-cta p{color:var(--text-dim);max-width:480px;margin:0 auto 28px;}

/* ---------- SECTION generic ---------- */
.section{padding:90px 0;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;margin-bottom:14px;}
.section-head p{color:var(--text-dim);}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start;}
.about-photo{
  width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  border:1px solid var(--panel-border);background:var(--panel);
  display:flex;align-items:center;justify-content:center;
}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about-photo .placeholder{color:var(--text-dim);text-align:center;font-size:0.85rem;padding:20px;}
.about-photo .placeholder svg{width:64px;height:64px;color:var(--cyan-dim);margin-bottom:10px;}
.about-text h3{font-size:1.3rem;margin-bottom:16px;}
.about-text p{color:var(--text-dim);margin-bottom:16px;max-width:640px;}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.badge{border:1px solid var(--panel-border);color:var(--text-dim);font-size:0.8rem;padding:6px 12px;border-radius:20px;}

/* ---------- SERVICES ---------- */
.service-group{margin-bottom:64px;}
.service-group-head{display:flex;align-items:baseline;gap:14px;margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:16px;flex-wrap:wrap;}
.service-group-head h3{font-size:1.3rem;}
.service-group-head span{color:var(--text-dim);font-size:0.85rem;}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.card{
  background:var(--panel);border:1px solid var(--panel-border);border-left:3px solid var(--cyan);
  border-radius:6px;padding:24px;
  transform-style:preserve-3d;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  will-change:transform;
}
.card.amber{border-left-color:var(--amber);}
.card:hover{box-shadow:0 20px 40px -20px rgba(0,0,0,0.6);}
.card svg{width:30px;height:30px;color:var(--cyan);margin-bottom:16px;}
.card.amber svg{color:var(--amber);}
.card h4{font-size:1.05rem;margin-bottom:8px;}
.card p{color:var(--text-dim);font-size:0.92rem;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.contact-info{display:flex;flex-direction:column;gap:22px;}
.contact-row{display:flex;align-items:center;gap:14px;}
.contact-row .icon-box{
  width:42px;height:42px;border-radius:8px;background:var(--panel);border:1px solid var(--panel-border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-row .icon-box svg{width:20px;height:20px;color:var(--cyan);}
.contact-row p{color:var(--text-dim);font-size:0.8rem;}
.contact-row a,.contact-row span.value{color:var(--text);font-weight:500;}
.whatsapp-panel{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:36px;text-align:center;
}
.whatsapp-panel h3{margin-bottom:10px;font-size:1.3rem;}
.whatsapp-panel p{color:var(--text-dim);margin-bottom:24px;font-size:0.92rem;}
.btn-whatsapp{
  background:#25D366;color:#052E14;font-weight:700;padding:15px 28px;border-radius:8px;
  display:inline-flex;align-items:center;gap:10px;font-size:1rem;transition:transform .2s ease;
}
.btn-whatsapp:hover{transform:translateY(-2px);}
.btn-whatsapp svg{width:22px;height:22px;}

footer{padding:30px 0;text-align:center;color:var(--text-dim);font-size:0.85rem;border-top:1px solid var(--line);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .network-art{height:260px;order:-1;}
  .about-grid{grid-template-columns:1fr;}
  .about-photo{width:180px;}
  .contact-grid{grid-template-columns:1fr;}
  .nav-links{
    position:fixed;top:72px;right:0;left:0;background:var(--bg);
    flex-direction:column;align-items:stretch;padding:16px;border-bottom:1px solid var(--line);
    transform:translateY(-150%);transition:transform .25s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links a{padding:14px 16px;border-bottom:1px solid var(--line);border-radius:0;}
  .burger{display:flex;}
}
@media (prefers-reduced-motion:reduce){
  .n-line,.n-node.pulse{animation:none;}
  html{scroll-behavior:auto;}
}