:root{
  --bg:#eef6fb;
  --white:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --muted-2:#64748b;
  --line:#dbe5ee;
  --card:#ffffff;
  --cyan:#0f766e;
  --cyan-bright:#0891b2;
  --sky:#e0f2fe;
  --amber:#fef3c7;
  --dark:#020617;
  --dark-2:#0f172a;
  --shadow:0 18px 60px rgba(15,23,42,.10);
  --shadow-strong:0 30px 90px rgba(15,23,42,.16);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(8,145,178,.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(245,158,11,.10), transparent 20%),
    linear-gradient(to bottom, #fff, #eef6fb);
}
a{text-decoration:none;color:inherit}
.container{width:min(1180px, calc(100% - 48px)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(18px);
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(219,229,238,.9);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:76px;
}
.brand{
  font-size:13px; letter-spacing:.24em; font-weight:700; color:#334155;
}
.navlinks{display:flex; gap:26px; align-items:center}
.navlinks a{
  font-size:14px; color:#334155;
}
.navlinks a.active{color:#0f172a; font-weight:700}
.menu-btn{
  display:none; border:1px solid #bae6fd; background:#fff; color:#0f172a;
  padding:10px 14px; border-radius:999px; font-weight:600;
}
.mobile-menu{
  display:none; padding:0 0 18px;
}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block; padding:13px 16px; background:#fff; border:1px solid var(--line);
  border-radius:16px; margin-top:10px;
}
.mobile-menu a.active{background:linear-gradient(135deg,var(--dark),#083344); color:#fff}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px; border-radius:999px; font-size:14px; font-weight:700;
  transition:.28s ease; cursor:pointer;
}
.btn-primary{
  background:linear-gradient(90deg, #0f172a, #083344, #0f172a);
  color:#fff; box-shadow:0 12px 30px rgba(8,47,73,.18);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(8,47,73,.24)}
.btn-secondary{
  background:#fff; color:var(--text); border:1px solid #bae6fd;
}
.btn-secondary:hover{transform:translateY(-2px); background:#ecfeff}
.hero{
  padding:76px 0 64px;
  display:grid; gap:52px; grid-template-columns:1.1fr .9fr; align-items:center;
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid #bae6fd; background:rgba(255,255,255,.95);
  border-radius:999px; padding:10px 16px; font-size:14px; color:#334155;
  box-shadow:0 8px 20px rgba(15,23,42,.04)
}
.hero h1{
  margin:18px 0 0; font-size:clamp(46px,7vw,78px); line-height:1.02; letter-spacing:-.04em;
}
.accent{
  background:linear-gradient(90deg,#0e7490,#0f766e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{font-size:19px; line-height:1.8; color:#334155; max-width:780px}
.actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:34px}
.stat-grid{display:grid; gap:14px; grid-template-columns:repeat(3,1fr); margin-top:38px}
.stat-card{
  border:1px solid var(--line); border-radius:22px; padding:18px;
  background:linear-gradient(135deg,#fff,var(--sky)); box-shadow:var(--shadow);
}
.stat-card:nth-child(2){background:linear-gradient(135deg,#fff,var(--amber)); animation:floatSlow 7s ease-in-out infinite}
.stat-card:nth-child(3){background:linear-gradient(135deg,#fff,#f0f9ff)}
.stat-card .label{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#64748b}
.stat-card .value{margin-top:8px; font-size:14px; font-weight:700}
.hero-panel{
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,#020617,#0f172a,#083344);
  color:#fff; border-radius:32px; padding:28px;
  box-shadow:var(--shadow-strong);
  overflow:hidden;
  animation:floatMedium 9s ease-in-out infinite;
}
.hero-panel:before{
  content:""; position:absolute; width:180px; height:180px; right:-40px; top:-30px;
  border-radius:50%; background:rgba(34,211,238,.10); filter:blur(40px);
}
.panel-box{
  margin-top:28px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06); border-radius:28px; padding:24px;
}
.panel-box .eyebrow{font-size:14px; color:#cbd5e1}
.panel-box h3{margin:8px 0 0; font-size:31px; line-height:1.2}
.tick-list{display:grid; gap:12px; margin-top:18px}
.tick{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,255,255,.05); border-radius:16px; padding:14px 16px;
  font-size:14px; color:#f8fafc
}
.panel-grid{display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-top:18px}
.panel-grid > div:first-child{
  background:#fff; color:#0f172a;
}
.panel-grid > div{
  border-radius:18px; padding:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.10)
}
.panel-grid .label{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#94a3b8}
.panel-grid .value{margin-top:8px; font-size:19px; font-weight:700; line-height:1.4}

.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(236,254,255,.9), rgba(255,251,235,.7), rgba(239,246,255,.9));
  overflow:hidden; white-space:nowrap;
}
.ticker-track{
  display:flex; width:max-content; gap:24px; padding:16px 0;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.22em;
  color:#334155; animation:slideTicker 28s linear infinite;
}

.page-hero{
  padding:68px 0 54px;
}
.page-hero.dark{
  background:linear-gradient(135deg,#020617,#0f172a,#083344);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.page-hero .eyebrow{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.24em}
.page-hero .eyebrow.dark{color:#a5f3fc}
.page-hero .eyebrow.light{color:#0e7490}
.page-hero h1{margin:14px 0 0; font-size:clamp(36px,4.8vw,56px); line-height:1.08; letter-spacing:-.03em}
.page-hero p{max-width:860px; font-size:18px; line-height:1.9; margin-top:18px}
.page-hero.dark p{color:#cbd5e1}
.page-hero.light{background:linear-gradient(to bottom, #f8fafc, rgba(236,254,255,.72))}
.page-hero.light p{color:#334155}

.section{
  padding:68px 0;
}
.section.light{
  background:linear-gradient(to bottom,#fff,rgba(248,250,252,.92));
}
.section.soft{
  background:linear-gradient(to bottom,#f8fafc,rgba(236,254,255,.65));
}
.section-grid-2{
  display:grid; gap:28px; grid-template-columns:1fr 1fr;
}
.card{
  border:1px solid var(--line); border-radius:30px; padding:30px;
  background:#fff; box-shadow:var(--shadow);
}
.card.gradient-cyan{background:linear-gradient(135deg,#fff,rgba(236,254,255,.9))}
.card.gradient-amber{background:linear-gradient(135deg,#fff,rgba(255,251,235,.9))}
.card.gradient-sky{background:linear-gradient(135deg,#fff,rgba(240,249,255,.9))}
.card.dark{
  background:linear-gradient(135deg,#020617,#0f172a,#083344); color:#fff;
  box-shadow:var(--shadow-strong)
}
.card.dark p{color:#cbd5e1}
.card h2,.card h3{margin:0; line-height:1.2}
.card p{color:#334155; line-height:1.85; font-size:17px}
.card .meta{font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#0e7490}
.card.dark .meta{color:#a5f3fc}

.value-grid,.service-grid,.price-grid,.work-grid{display:grid; gap:24px}
.value-grid{grid-template-columns:repeat(3,1fr)}
.service-grid,.price-grid,.work-grid{grid-template-columns:1fr}
.service-card{
  display:grid; gap:28px; grid-template-columns:.9fr 1.1fr;
  border:1px solid var(--line); border-radius:30px; padding:30px;
  background:linear-gradient(135deg,#fff,rgba(236,254,255,.82)); box-shadow:var(--shadow)
}
.service-card.alt-amber{background:linear-gradient(135deg,#fff,rgba(255,251,235,.82))}
.service-card.alt-sky{background:linear-gradient(135deg,#fff,rgba(240,249,255,.82))}
.service-symbol{
  width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0f172a,#083344); color:#fff; font-size:24px; font-weight:700
}
.bullets{display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-top:20px}
.bullet{
  border:1px solid var(--line); border-radius:16px; padding:13px 15px;
  background:linear-gradient(90deg,#fff,#f8fafc); font-size:14px; font-weight:600; color:#1e293b
}

.price-grid{grid-template-columns:repeat(3,1fr)}
.price-card{
  border:1px solid var(--line); border-radius:30px; padding:30px;
  background:linear-gradient(135deg,#fff,rgba(236,254,255,.72)); box-shadow:var(--shadow)
}
.price-card:last-child{background:linear-gradient(135deg,#fff,rgba(255,251,235,.75))}
.price-card.featured{
  background:linear-gradient(135deg,#020617,#0f172a,#083344); color:#fff;
  box-shadow:var(--shadow-strong);
}
.price-card .name{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:#64748b}
.price-card.featured .name{color:#a5f3fc}
.price-card .price{font-size:34px; font-weight:700; margin-top:16px}
.price-card .fit{margin-top:14px; line-height:1.8; color:#334155}
.price-card.featured .fit{color:#cbd5e1}
.price-points{display:grid; gap:12px; margin-top:22px}
.price-points div{
  border:1px solid var(--line); border-radius:16px; background:#fff; padding:13px 15px; font-size:14px; font-weight:600
}
.price-card.featured .price-points div{
  border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.06); color:#f8fafc
}
.price-card .action{margin-top:26px}

.work-grid{grid-template-columns:repeat(2,1fr)}
.work-card{
  border:1px solid var(--line); border-radius:28px; padding:28px;
  background:linear-gradient(135deg,#fff,rgba(236,254,255,.8)); box-shadow:var(--shadow)
}
.work-card.alt{background:linear-gradient(135deg,#fff,rgba(255,251,235,.8))}
.tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.tag{
  border:1px solid #bae6fd; background:#ecfeff; color:#155e75;
  border-radius:999px; padding:8px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em
}
.wide-panel{
  margin-top:28px; border:1px solid var(--line); border-radius:30px; padding:30px;
  background:linear-gradient(135deg,#fff,rgba(240,249,255,.88)); box-shadow:var(--shadow)
}
.wide-panel .grid{display:grid; gap:24px; grid-template-columns:.9fr 1.1fr}

.faq-layout{display:grid; gap:28px; grid-template-columns:1.1fr .9fr}
.faq-item{
  border:1px solid var(--line); border-radius:24px; background:linear-gradient(135deg,#fff,rgba(236,254,255,.45));
  box-shadow:var(--shadow); overflow:hidden
}
.faq-question{
  width:100%; background:none; border:0; padding:24px; display:flex; justify-content:space-between; align-items:center;
  font-size:19px; font-weight:700; text-align:left; color:#0f172a; cursor:pointer
}
.faq-answer{
  display:none; padding:0 24px 24px; color:#334155; line-height:1.85; font-size:16px
}
.faq-item.open .faq-answer{display:block}
.side-panel{
  border:1px solid var(--line); border-radius:30px; padding:30px;
  background:linear-gradient(135deg,#020617,#0f172a,#083344); color:#fff; box-shadow:var(--shadow-strong)
}
.side-panel p{color:#cbd5e1; line-height:1.85}
.side-list{display:grid; gap:12px; margin-top:24px}
.side-list div{
  border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.06);
  padding:14px 16px; font-size:14px
}

.contact-layout{display:grid; gap:28px; grid-template-columns:1fr .9fr}
.contact-cards{display:grid; gap:16px; grid-template-columns:repeat(2,1fr); margin-top:28px}
.contact-cards .full{grid-column:1/-1}
.contact-card{
  border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:var(--shadow)
}
.contact-card.cyan{background:linear-gradient(135deg,#fff,rgba(236,254,255,.78))}
.contact-card.amber{background:linear-gradient(135deg,#fff,rgba(255,251,235,.78))}
.contact-card.sky{background:linear-gradient(135deg,#fff,rgba(240,249,255,.78))}
.contact-card .label{font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#64748b}
.contact-card .value{margin-top:12px; font-size:19px; font-weight:700}
.contact-form{
  border:1px solid var(--line); border-radius:30px; padding:30px;
  background:linear-gradient(135deg,#020617,#0f172a,#083344); color:#fff; box-shadow:var(--shadow-strong)
}
.contact-form p{color:#cbd5e1; line-height:1.85}
.form-grid{display:grid; gap:14px; margin-top:22px}
.input, .textarea{
  width:100%; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); color:#fff;
  border-radius:16px; padding:14px 16px; font-size:15px; outline:none
}
.input::placeholder,.textarea::placeholder{color:#94a3b8}
.textarea{min-height:150px; resize:vertical}

.footer{
  border-top:1px solid var(--line);
  background:linear-gradient(to bottom, rgba(255,255,255,1), rgba(236,254,255,.65), rgba(255,251,235,.45));
}
.footer-grid{
  display:grid; gap:28px; grid-template-columns:1.1fr .9fr .9fr 1fr;
  padding:48px 0;
}
.footer h4{margin:0; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#64748b}
.footer p, .footer a, .footer div{font-size:14px; color:#334155; line-height:1.8}
.footer-list{display:grid; gap:10px; margin-top:14px}

.float-slow{animation:floatSlow 7s ease-in-out infinite}
.float-medium{animation:floatMedium 9s ease-in-out infinite}
.pulse-glow{animation:pulseGlow 7s ease-in-out infinite}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatMedium{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-16px) translateX(8px)}}
@keyframes pulseGlow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.08)}}
@keyframes slideTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@media (max-width: 1050px){
  .hero,.section-grid-2,.service-card,.wide-panel .grid,.faq-layout,.contact-layout{grid-template-columns:1fr}
  .value-grid,.price-grid,.work-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 860px){
  .navlinks{display:none}
  .menu-btn{display:inline-flex}
  .hero{padding-top:48px}
  .stat-grid,.bullets,.contact-cards{grid-template-columns:1fr}
  .contact-cards .full{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .container{width:min(1180px, calc(100% - 32px))}
  .hero h1{font-size:44px}
  .page-hero h1{font-size:34px}
}