:root{
  --ink:#0ea5b7;
  --glass-bg: rgba(255,255,255,.06);
  --glass-brd: rgba(255,255,255,.18);
  --hero-grad: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,183,.22), transparent 60%),
               radial-gradient(900px 500px at 90% 10%, rgba(60,145,75,.18), transparent 55%),
               linear-gradient(180deg, #0b1020 0%, #0f1630 60%, #101528 100%);
  --page-bg:#0c1226;
  --text-strong:#e8eef7;
  --text-soft:#d7e2ff;
  --card-text:#17212e;
  --card-heading:#2a3646;
  --accent:#e04372;
}

/* Base */
body{ background:var(--page-bg); color:var(--text-strong); }
.section{ padding:24px 16px 48px; }
.section p{ color:var(--text-soft); }
a{ color:#8ad6ff; } a:hover{ color:#a8e4ff; }
.accent{ color:var(--accent); }

/* Modern Hero */
.hero.hero--modern{
  position:relative; overflow:hidden; padding:72px 20px 36px; text-align:center;
  background:var(--hero-grad); isolation:isolate;
}
.hero.hero--modern::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.08;
  background-image: radial-gradient(1px 1px at 8px 8px, rgba(255,255,255,.35) 0, transparent 60%);
  background-size: 18px 18px; animation: texMove 30s linear infinite;
}
@keyframes texMove { from{transform:translateX(0)} to{transform:translateX(-60px)} }
.hero .eyebrow{ color:#66e5f0; letter-spacing:.12em; margin-bottom:6px; font-size:.95rem }
.hero h1{ font-size:clamp(30px,4.6vw,50px); margin:0 0 8px; }
.hero .subtitle{ color:#9fb6ff; margin:0; font-size:clamp(15px,1.8vw,19px) }

/* Divider */
.section-title-divider{
  position:relative; display:inline-block; padding:10px 16px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass-brd);
  color:var(--text-strong);
  margin:14px 0 18px;
}

/* Cards */
.layout_box.responsive{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:16px; margin-top:18px; max-width:1120px; margin-left:auto; margin-right:auto;
}
.float_item{
  border-radius:16px; padding:16px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  animation: fadeUp .9s ease forwards; opacity:0; will-change: transform;
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
}
.float_item:nth-child(1){ animation-delay:.12s; }
.float_item:nth-child(2){ animation-delay:.24s; }
.float_item:nth-child(3){ animation-delay:.36s; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }
.float_item:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.float_item h6{ margin:.3rem 0 .5rem; font-size:1.05rem; color:var(--card-heading); }
.float_item p{ margin:0; color:var(--card-text); }
.icon{ width:44px; height:44px; margin-bottom:8px; fill:#0ea5b7; display:block; }

/* Metrics */
.metrics-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:10px; max-width:1120px; margin:6px auto 0;
}
.metric{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--glass-brd); border-radius:14px; padding:14px; text-align:center; }
.metric__num{ font-size:clamp(24px,4.6vw,40px); font-weight:800; letter-spacing:.03em; }
.metric__label{ opacity:.9; }
.note{ opacity:.75; font-size:.9rem; margin-top:10px; }

/* Process */
.process-steps{
  counter-reset: step; list-style:none; padding:0; margin:6px auto 0; max-width:900px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px;
}
.process-steps li{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass-brd); border-radius:12px; padding:12px 12px 12px 44px; position:relative;
}
.process-steps li::before{
  counter-increment: step; content: counter(step); position:absolute; left:12px; top:10px;
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:#0ea5b7; color:#061824; font-weight:800;
}
.step__title{ display:block; font-weight:700; color:#eef3ff; margin-bottom:2px; }
.step__desc{ display:block; color:#d7e2ff; }

/* Capabilities */
.cap-grid{
  list-style: none; padding:0; margin:6px auto 0; max-width:900px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:8px;
}
.cap-grid li{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass-brd); border-radius:12px; padding:10px 12px;
}

/* FAQ */
.faq details{ max-width:900px; margin:0 auto 8px; border:1px solid var(--glass-brd); border-radius:10px; padding:10px 12px; background:rgba(255,255,255,.03); }
.faq summary{ cursor:pointer; font-weight:700; color:#eef3ff; }
.faq details[open]{ background:rgba(255,255,255,.05); }
.faq p{ margin:8px 0 0; }

/* CTA */
.cta-rail{ margin:20px auto 28px; text-align:center; display:flex; gap:10px; justify-content:center; }
.cta{ padding:10px 14px; border-radius:10px; background:#0ea5b7; color:#06202a; text-decoration:none; font-weight:700; cursor:pointer; }
.cta.ghost{ background:transparent; border:1px solid #62d3e2; color:#cbeff4; }

/* Footer */
.site-footer{ background:var(--page-bg); padding:12px 0; text-align:center; }
.site-footer .copyright{ margin:0; font-size:10px; color:#ffffff; }

/* Print */
@media print{
  @page{ size:A4; margin:16mm; }
  body{ background:#fff; color:#000; }
  .hero{ background:#fff !important; padding:8mm 0; }
  a[href]::after{ content:" (" attr(href) ")"; font-size:10pt; color:#444; }
  .float_item{ break-inside:avoid; }
}