/* Base */
:root{
  --bg:#f8fafc;
  --panel:#ffffff;
  --muted:#64748b;
  --text:#0f172a;
  --primary:#0ea5e9;
  --accent:#16a34a;
  --ring: rgba(14,165,233,.35);
  --radius:14px;
  --container:1152px;
}
/* Dark theme */
[data-theme="dark"]{
  --bg:#0b1020;
  --panel:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --ring: rgba(14,165,233,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:radial-gradient(1200px 600px at 80% -10%, rgba(14,165,233,.10), transparent 60%),
                     radial-gradient(700px 400px at 10% 10%, rgba(22,163,74,.08), transparent 60%),
                     var(--bg);
  line-height:1.6;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{max-width:var(--container); margin-inline:auto; padding:0 20px}
.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));}
.center{text-align:center}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.8); border-bottom:1px solid rgba(100,116,139,.2)}
[data-theme="dark"] .site-header{background:rgba(11,16,32,.6); border-bottom-color:rgba(148,163,184,.1)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{font-weight:700; letter-spacing:.4px}
.site-nav ul{display:flex; gap:20px; list-style:none; padding:0; margin:0}
.site-nav a{padding:10px 12px; border-radius:10px; color:var(--muted)}
.site-nav a:hover{color:var(--text); background:rgba(148,163,184,.12)}
.menu-toggle{display:none; width:42px; height:42px; align-items:center; justify-content:center; background:rgba(255,255,255,.55); backdrop-filter:saturate(180%) blur(10px); border:1px solid rgba(100,116,139,.25); border-radius:50%; color:var(--text); box-shadow:0 8px 22px rgba(2,6,23,.12); transition:background .25s ease, border-color .25s ease, box-shadow .25s ease}
.menu-toggle:hover{box-shadow:0 10px 26px rgba(2,6,23,.16)}
[data-theme="dark"] .menu-toggle{background:rgba(17,24,39,.55); border-color:rgba(148,163,184,.2); box-shadow:0 6px 18px rgba(0,0,0,.4)}
.menu-toggle .bar{display:block; width:18px; height:2px; background:currentColor; margin:3px 0; border-radius:2px; transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, width .28s cubic-bezier(.4,0,.2,1)}
.menu-toggle .bar:nth-child(2){width:14px}
.menu-toggle:hover .bar:nth-child(2){width:18px}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.theme-toggle{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid rgba(148,163,184,.15); border-radius:10px; color:var(--text); margin-left:10px}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:inline}

/* Floating action button for theme toggle */
.theme-toggle.fab{position:fixed; right:18px; bottom:18px; z-index:60; width:48px; height:48px; border-radius:14px; background:var(--panel); border:1px solid rgba(100,116,139,.25); box-shadow:0 10px 30px rgba(2,6,23,.15)}
[data-theme="dark"] .theme-toggle.fab{background:rgba(17,24,39,.8); border-color:rgba(148,163,184,.2); box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* Hero */
.hero{padding:100px 0 80px}
.hero-inner{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center}
.hero-content h1{font-size:44px; line-height:1.15; margin:0 0 10px}
.hero-ctas{display:flex; gap:12px; margin-top:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid rgba(100,116,139,.25); background:var(--panel); color:var(--text)}
.btn.primary{background:linear-gradient(180deg, rgba(14,165,233,.2), rgba(14,165,233,.1)); border-color:rgba(14,165,233,.35)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.hero-visual{position:relative; min-height:260px}
.hero-svg{position:absolute; inset:0; filter:drop-shadow(0 30px 80px rgba(14,165,233,.3))}
.orb{position:absolute; inset:auto -40px 40px auto; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(14,165,233,.7), rgba(14,165,233,.15)); filter:blur(12px);}

/* Two columns */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.col{}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(148,163,184,.15); border-radius:var(--radius); padding:20px}
.card.highlight{border-color:rgba(14,165,233,.45); box-shadow:0 0 0 3px var(--ring) inset}
.grid.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px}
.card .icon{width:36px; height:36px; color:var(--primary)}
.card h3{margin:10px 0 6px}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px}
.stat{background:rgba(148,163,184,.06); border:1px solid rgba(148,163,184,.12); border-radius:12px; padding:14px}
.stat .num{font-weight:700}
.stat .label{color:var(--muted); font-size:13px}

/* Lists */
.checklist{padding:0; margin:12px 0; list-style:none}
.checklist li{position:relative; padding-left:22px; margin:8px 0}
.checklist li:before{content:""; position:absolute; left:0; top:10px; width:10px; height:10px; border-radius:50%; background:linear-gradient(180deg, var(--primary), var(--accent)); box-shadow:0 0 0 3px rgba(14,165,233,.18)}

/* Contact */
.contact{list-style:none; padding:0; margin:12px 0}
.contact li{display:flex; align-items:center; gap:10px; margin:8px 0}
.ci{display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.2); border-radius:6px}

/* CTA card */
.cta-card{background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.8)); border:1px solid rgba(100,116,139,.2); border-radius:20px; padding:28px; box-shadow:0 20px 60px rgba(2,6,23,.08)}
.cta-card h2{margin:0 0 6px}
.cta-card .muted{margin:0 0 10px}
.contact-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
[data-theme="dark"] .cta-card{background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.86)); border-color:rgba(148,163,184,.2); box-shadow:0 20px 60px rgba(0,0,0,.45)}

/* Footer */
.site-footer{border-top:1px solid rgba(100,116,139,.2); padding:24px 0; background:rgba(248,250,252,.7)}
[data-theme="dark"] .site-footer{background:rgba(0,0,0,.2); border-top-color:rgba(148,163,184,.1)}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.to-top{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; background:rgba(148,163,184,.1); border:1px solid rgba(148,163,184,.2); border-radius:10px}

/* Slider */
.slider{position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(148,163,184,.25); background:var(--panel); box-shadow:0 20px 60px rgba(2,6,23,.06); margin-top:18px}
.slides{display:flex; width:100%; height:340px; transition:transform .5s ease}
.slide{flex:0 0 calc(100% / 3); position:relative}
.slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.dots{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:8px}
.dot{width:8px; height:8px; border-radius:50%; background:rgba(148,163,184,.5); border:1px solid rgba(148,163,184,.6)}
.dot.active{background:var(--primary); border-color:rgba(14,165,233,.8)}
[data-theme="dark"] .slider{background:rgba(17,24,39,.7); border-color:rgba(148,163,184,.2); box-shadow:0 20px 60px rgba(0,0,0,.35)}

/* Slider nav */
.slider .nav{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:10px; border:1px solid rgba(100,116,139,.25); background:rgba(255,255,255,.6); backdrop-filter:blur(6px); color:var(--text)}
.slider .nav.prev{left:10px}
.slider .nav.next{right:10px}
[data-theme="dark"] .slider .nav{background:rgba(17,24,39,.6); border-color:rgba(148,163,184,.2); color:#e2e8f0}

/* Lightbox */
.lightbox{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:70}
.lightbox[hidden]{display:none}
.lb-img{max-width:92vw; max-height:82vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close,.lb-prev,.lb-next{position:fixed; top:18px; background:rgba(17,24,39,.6); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:10px; width:40px; height:40px}
.lb-close{right:18px}
.lb-prev,.lb-next{top:50%; transform:translateY(-50%)}
.lb-prev{left:18px}
.lb-next{right:18px}

/* Reveal animation base (paired with GSAP) */
.reveal{opacity:0; transform:translateY(14px)}

/* Responsive */
@media (max-width: 1024px){
  .grid.cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px){
  .hero-inner{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .site-nav{position:fixed; inset:64px 0 auto 0; background:rgba(255,255,255,.98); border-bottom:1px solid rgba(100,116,139,.2); transform:translateY(-120%); transition:transform .35s ease}
  [data-theme="dark"] .site-nav{background:rgba(11,16,32,.98); border-bottom-color:rgba(148,163,184,.12)}
  .site-nav.open{transform:translateY(0)}
  .site-nav ul{flex-direction:column; padding:10px}
  .menu-toggle{display:inline-flex}
  .grid.cards{grid-template-columns:1fr}
  .contact-actions{flex-direction:column}
}
@media (max-width: 480px){
  .hero-content h1{font-size:32px}
  .slides{height:260px}
}