:root{
  --bg:#08111f;
  --bg-soft:#0f1d34;
  --panel:#0d1728;
  --panel-2:#13223b;
  --ink:#e9eef7;
  --muted:#a7b5c9;
  --line:rgba(255,255,255,.08);
  --accent:#1b76ff;
  --accent-2:#37b9ff;
  --accent-soft:rgba(27,118,255,.16);
  --energy:#2aa84a;
  --energy-2:#7ddc67;
  --white:#ffffff;
  --text:#162236;
  --page:#f5f8fc;
  --card:#ffffff;
  --shadow:0 20px 60px rgba(5,13,25,.12);
  --radius:22px;
  --radius-sm:16px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:var(--page);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(var(--max), calc(100% - 2rem)); margin-inline:auto}
.narrow{max-width:850px}
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(8,17,31,.07);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:86px; gap:1rem;
}
.brand{display:flex; align-items:center; gap:1rem; min-width:0}
.brand-logo{width:134px; height:auto; border-radius:14px; box-shadow:0 10px 30px rgba(14,28,49,.08)}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text strong{font-size:1rem; color:#0d1d33}
.brand-text span{font-size:.82rem; color:#5b6a80}
.site-nav{display:flex; align-items:center; gap:1rem}
.nav-link{
  color:#324258; font-weight:600; font-size:.96rem;
  padding:.65rem .15rem;
  position:relative;
}
.nav-link.active, .nav-link:hover{color:#0f1e34}
.nav-link.active::after, .nav-link:hover::after{
  content:""; position:absolute; left:0; right:0; bottom:.25rem; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:999px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border-radius:999px; font-weight:700;
  padding:.95rem 1.35rem; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  color:var(--white);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 26px rgba(27,118,255,.22);
}
.btn-secondary{
  background:#fff; color:#10213a; border-color:rgba(16,33,58,.12);
  box-shadow:var(--shadow);
}
.btn-sm{padding:.8rem 1.05rem; font-size:.92rem}
.nav-cta{margin-left:.25rem}
.menu-toggle{display:none; border:none; background:transparent; padding:.25rem; cursor:pointer;}
.menu-toggle span{display:block; width:26px; height:2px; background:#0d1d33; margin:6px 0;}
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(55,185,255,.22), transparent 34%),
    radial-gradient(circle at 85% 18%, rgba(27,118,255,.25), transparent 28%),
    linear-gradient(180deg,#08111f 0%, #0f1d34 100%);
  color:var(--ink);
  padding:5.5rem 0 4.6rem;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:50px 50px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 88%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; position:relative; z-index:1;}
.eyebrow{display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:#8ed9ff;}
.hero h1, .page-hero h1{font-size:clamp(2.4rem, 5vw, 4.3rem); line-height:1.05; margin:.8rem 0 1rem; letter-spacing:-.03em;}
.lead{font-size:1.12rem; max-width:62ch}
.hero-copy .lead{color:#d0dcf0}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; margin:1.75rem 0}
.hero-trust{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem;}
.hero-trust span{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#dce7f6; padding:.55rem .85rem; border-radius:999px; font-size:.9rem; font-weight:600;}
.glass-card{background:rgba(9,18,32,.58); border:1px solid rgba(255,255,255,.12); border-radius:30px; padding:1.3rem; box-shadow:0 25px 70px rgba(2,8,18,.35); backdrop-filter:blur(18px);}
.card-header{display:flex; align-items:center; gap:.55rem; color:#dce7f6; font-weight:700; font-size:.95rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.08);}
.status-dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,#42ffb0,#23c9ff); box-shadow:0 0 0 6px rgba(66,255,176,.08);}
.lifecycle{display:grid; gap:.8rem; padding-top:1rem}
.lifecycle div{padding:1rem 1rem 1rem 1.1rem; border-radius:20px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08);}
.lifecycle strong{display:block; color:#fff; margin-bottom:.2rem}
.lifecycle span{display:block; color:#c0cde1; font-size:.95rem}
.page-hero{padding:4.8rem 0 2rem; background:radial-gradient(circle at 20% 15%, rgba(55,185,255,.1), transparent 35%), linear-gradient(180deg,#edf4fb 0%, #f5f8fc 100%);}
.page-hero .lead{max-width:54ch; color:#4b5c72}
.page-hero h1{font-size:clamp(2rem, 4.3vw, 3.5rem); color:#091527}
.section{padding:4.4rem 0}
.section-alt{background:#eef3fa}
.section-heading{max-width:760px; margin-bottom:2rem}
.section-heading h2{font-size:clamp(1.9rem, 3vw, 3rem); line-height:1.12; margin:.4rem 0 .85rem}
.section-heading p{color:#506178}
.cards-grid, .metrics-grid, .diagram-grid, .article-grid{display:grid; gap:1.2rem}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.metrics-grid{grid-template-columns:repeat(4,1fr)}
.metric-card, .service-card, .mini-card, .info-panel, .diagram-card, .article-card{background:var(--card); border:1px solid rgba(15,29,52,.08); border-radius:var(--radius); box-shadow:var(--shadow);}
.metric-card{padding:1.5rem 1.3rem}
.metric-card strong{display:block; font-size:1.1rem; color:#0d1d33; margin-bottom:.35rem}
.metric-card span{color:#53657b}
.service-card{padding:1.55rem}
.service-card h2, .service-card h3, .service-card h4{margin:.1rem 0 .6rem; line-height:1.2; color:#0f1e34}
.service-card p, .article-card p{margin:0; color:#56677c}
.service-card ul{margin:.9rem 0 0; padding-left:1.1rem; color:#516379}
.service-card li + li{margin-top:.35rem}
.mini-card{padding:1.2rem}
.mini-card h3{margin:0 0 .35rem}
.mini-card p{margin:0; color:#56677c}
.split-grid{display:grid; grid-template-columns:1fr .95fr; gap:1.45rem; align-items:start;}
.check-list{list-style:none; padding:0; margin:1.1rem 0 0; display:grid; gap:.7rem;}
.check-list li{position:relative; padding-left:1.65rem; color:#44556a;}
.check-list li::before{content:""; position:absolute; left:0; top:.5rem; width:.8rem; height:.8rem; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 0 5px rgba(27,118,255,.1);}
.info-panel{padding:1.55rem}
.info-panel h3{margin:.1rem 0 1rem}
.stacked-list{display:grid; gap:.85rem}
.stacked-list > div{border:1px solid rgba(15,29,52,.08); border-radius:18px; padding:1rem; background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);}
.stacked-list strong{display:block; color:#0d1d33; margin-bottom:.2rem}
.stacked-list span{color:#58697f}
.icon-pill{display:inline-flex; align-items:center; gap:.45rem; background:#fff; border:1px solid rgba(15,29,52,.08); border-radius:999px; padding:.45rem .75rem; color:#335; font-weight:700; font-size:.9rem; box-shadow:var(--shadow)}
.outcome-list{display:grid; gap:.9rem; margin:1rem 0 0}
.outcome-list div{padding:1rem 1rem 1rem 1.1rem; border-left:4px solid var(--accent); background:#fff; border-radius:18px; box-shadow:var(--shadow); color:#526277}
.process-row{display:grid; grid-template-columns:repeat(6,1fr); gap:1rem}
.process-row article{background:linear-gradient(180deg,#0d1728 0%, #13223b 100%); color:#dce7f6; border-radius:24px; padding:1.4rem 1.2rem; box-shadow:0 20px 60px rgba(9,18,32,.18); min-height:210px; display:flex; flex-direction:column; justify-content:flex-start;}
.process-row span{display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.08); color:#8ed9ff; font-weight:800; margin-bottom:1rem}
.process-row h3{margin:.1rem 0 .45rem; color:#fff; font-size:1rem; min-height:2.6em; display:flex; align-items:flex-end;}
.process-row p{margin:0; color:#b9c7da; font-size:.95rem}
.diagram-grid{grid-template-columns:repeat(3,1fr)}
.diagram-card{padding:1.15rem}
.diagram-card h3{margin:.2rem 0 .55rem; color:#10213a}
.diagram-card p{margin:0; color:#56677c}
.diagram-card svg{width:100%; height:auto; margin:.8rem 0 1rem; background:linear-gradient(180deg,#fbfdff 0%, #f4f8fd 100%); border:1px solid rgba(15,29,52,.08); border-radius:18px; padding:.5rem}
.diagram-caption{font-size:.92rem; color:#5b6a80}
.article-grid{grid-template-columns:repeat(3,1fr)}
.article-card{padding:1.4rem}
.article-card h3{margin:.1rem 0 .6rem; font-size:1.08rem; line-height:1.3}
.note-band{background:linear-gradient(135deg, rgba(27,118,255,.08), rgba(55,185,255,.14)); border:1px solid rgba(27,118,255,.12); border-radius:24px; padding:1.35rem 1.4rem; color:#39506e}
.contact-form{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem; border:1px solid rgba(15,29,52,.08)}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.form-grid label{display:grid; gap:.4rem; color:#11223b; font-weight:700}
.form-grid label span{font-size:.95rem}
.form-grid input, .form-grid select, .form-grid textarea{width:100%; border:1px solid rgba(16,33,58,.12); border-radius:16px; padding:.95rem 1rem; font:inherit; color:#12233d; background:#fbfdff}
.form-grid textarea{resize:vertical; min-height:160px}
.full-width{grid-column:1/-1}
.site-footer{background:#07111f; color:#dce7f6; margin-top:2rem; padding-top:3rem;}
.footer-grid{display:grid; grid-template-columns:1.3fr .8fr .9fr .85fr; gap:1.6rem}
.footer-logo{width:210px; margin-bottom:1rem; background:#fff; border-radius:16px}
.site-footer h4{margin:0 0 .8rem; color:#fff}
.site-footer p{color:#b8c5d8}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.site-footer li, .site-footer a{color:#c4d0e0}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:2rem; padding:1rem 0 1.3rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-bottom p{margin:0}
.footer-meta{display:flex; gap:1rem; flex-wrap:wrap}
.legal-copy h2{margin-top:1.8rem}
.legal-copy p, .legal-copy li{color:#4f6076}
.legal-copy ul{padding-left:1.2rem}
.small-muted{font-size:.92rem; color:#6a7a91}
.tag-list{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.85rem}
.tag-list span{background:#eaf2ff; color:#164aa4; border-radius:999px; padding:.4rem .7rem; font-size:.86rem; font-weight:700}
.energy-tag span{background:#edf9ef; color:#1d7a38}
@media (max-width: 1100px){
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .cards-4,.diagram-grid,.article-grid{grid-template-columns:repeat(2,1fr)}
  .process-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 900px){
  .site-nav{position:fixed; inset:86px 0 auto 0; background:rgba(255,255,255,.98); flex-direction:column; align-items:flex-start; padding:1rem; gap:.2rem; border-bottom:1px solid rgba(8,17,31,.08); box-shadow:0 20px 50px rgba(8,17,31,.08); transform:translateY(-120%); transition:transform .25s ease}
  body.nav-open .site-nav{transform:translateY(0)}
  .menu-toggle{display:block}
  .nav-cta{margin-left:0; margin-top:.5rem}
  .hero-grid, .split-grid, .footer-grid{grid-template-columns:1fr}
  .cards-2,.cards-3,.form-grid,.diagram-grid,.article-grid{grid-template-columns:1fr}
  .process-row{grid-template-columns:repeat(2,1fr)}
  .brand-text span{display:none}
}
@media (max-width: 640px){
  .container{width:min(var(--max), calc(100% - 1.2rem))}
  .hero{padding:4.4rem 0 3.8rem}
  .section{padding:3.6rem 0}
  .metrics-grid,.cards-4,.process-row{grid-template-columns:1fr}
  .brand-logo{width:108px}
  .brand-text strong{font-size:.92rem}
  .header-inner{min-height:78px}
  .site-nav{inset:78px 0 auto 0}
}