*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;background:#0B0C10;color:#F1F5F9;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit}

/* ── Navbar (class selector only, NEVER bare nav) ── */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(11,12,16,0.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #1E2030;padding:0 24px;height:68px;display:flex;align-items:center}
.site-nav .nav-inner{max-width:1240px;margin:0 auto;width:100%;display:flex;justify-content:space-between;align-items:center}
.site-nav .logo{font-size:1.5rem;font-weight:800;color:#22D3EE;text-decoration:none;letter-spacing:-0.5px}
.site-nav .logo span{color:#A78BFA}
.site-nav .nav-links{display:flex;gap:36px;list-style:none;align-items:center}
.site-nav .nav-links a{color:#94A3B8;text-decoration:none;font-weight:500;font-size:0.938rem;transition:color 0.25s;position:relative}
.site-nav .nav-links a:hover{color:#22D3EE}
.site-nav .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#22D3EE;transition:width 0.25s}
.site-nav .nav-links a:hover::after{width:100%}
.mobile-toggle{display:none;background:none;border:none;color:#F1F5F9;font-size:1.625rem;cursor:pointer;padding:4px;line-height:1}

/* ── Hero (split layout) ── */
.hero-section{padding:180px 24px 120px;position:relative;overflow:hidden}
.hero-section::before{content:'';position:absolute;top:-50%;right:-20%;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,0.12) 0%,transparent 70%);pointer-events:none}
.hero-section::after{content:'';position:absolute;bottom:-30%;left:-15%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,0.06) 0%,transparent 70%);pointer-events:none}
.hero-section .hero-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.1fr 0.9fr;gap:72px;align-items:center;position:relative;z-index:1}
.hero-section .hero-text h1{font-size:clamp(2.25rem,4.5vw,3.75rem);font-weight:800;line-height:1.08;margin-bottom:24px;letter-spacing:-1px}
.hero-section .hero-text h1 .accent{color:#22D3EE}
.hero-section .hero-text h1 .accent2{color:#A78BFA}
.hero-section .hero-text p{font-size:1.125rem;color:#94A3B8;max-width:520px;margin-bottom:36px;line-height:1.7}
.hero-section .hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero-abstract{width:100%;aspect-ratio:1;max-width:440px;background:linear-gradient(135deg,rgba(34,211,238,0.08),rgba(167,139,250,0.08));border-radius:24px;border:1px solid #1E2030;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-abstract .glow-circle{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,0.2),transparent 65%);position:absolute;top:20%;right:20%}
.hero-abstract .inner-box{width:160px;height:160px;border-radius:20px;background:linear-gradient(135deg,#22D3EE,#A78BFA);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800;color:#0B0C10}
.hero-abstract .accent-dot{position:absolute;bottom:25%;left:20%;width:24px;height:24px;border-radius:50%;background:#FBBF24}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:10px;font-weight:600;text-decoration:none;transition:all 0.3s;cursor:pointer;border:none;font-size:1rem;font-family:inherit}
.btn-primary{background:#22D3EE;color:#0B0C10}
.btn-primary:hover{background:#06B6D4;transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,211,238,0.25)}
.btn-secondary{background:transparent;color:#22D3EE;border:2px solid #1E2030}
.btn-secondary:hover{background:rgba(34,211,238,0.08);border-color:#22D3EE;transform:translateY(-2px)}
.btn-amber{background:#FBBF24;color:#0B0C10}
.btn-amber:hover{background:#F59E0B;transform:translateY(-2px);box-shadow:0 8px 24px rgba(251,191,36,0.3)}

/* ── Stats Band ── */
.stats-band{padding:64px 24px;background:#111318;border-top:1px solid #1E2030;border-bottom:1px solid #1E2030}
.stats-band .stats-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.stat-item .stat-number{font-size:clamp(2rem,3.5vw,3.125rem);font-weight:800;color:#22D3EE;display:block;margin-bottom:4px}
.stat-item .stat-label{color:#64748B;font-size:0.813rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:500}

/* ── Capabilities (bento grid) ── */
.capabilities-section{padding:100px 24px}
.capabilities-section .section-inner{max-width:1240px;margin:0 auto}
.section-header{margin-bottom:64px}
.section-header .section-tag{color:#22D3EE;font-weight:600;font-size:0.813rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;display:block}
.section-header h2{font-size:clamp(1.75rem,3.5vw,2.625rem);font-weight:700;margin-bottom:16px;letter-spacing:-0.5px}
.section-header .section-desc{color:#64748B;max-width:560px;line-height:1.7}
.capabilities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cap-card{background:#111318;border:1px solid #1E2030;border-radius:14px;padding:28px;transition:border-color 0.3s,transform 0.3s}
.cap-card:hover{border-color:#22D3EE;transform:translateY(-3px)}
.cap-card .cap-icon{width:44px;height:44px;border-radius:10px;background:rgba(34,211,238,0.08);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:16px;color:#22D3EE}
.cap-card h3{font-size:1.063rem;font-weight:600;margin-bottom:6px}
.cap-card p{color:#64748B;font-size:0.875rem;line-height:1.6}
.cap-card.wide{grid-column:span 2;background:linear-gradient(135deg,#111318,#181C27);display:flex;align-items:flex-start;gap:28px;padding:36px}
.cap-card.wide .cap-icon{margin-bottom:0;flex-shrink:0}

/* ── Approach (numbered steps) ── */
.approach-section{padding:100px 24px;background:#0D0E13;position:relative}
.approach-section .section-inner{max-width:1240px;margin:0 auto}
.approach-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.approach-steps::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(90deg,#22D3EE,#A78BFA);z-index:0}
.step-card{text-align:center;position:relative;z-index:1;padding:0 16px}
.step-number{width:56px;height:56px;border-radius:50%;background:#0D0E13;border:2px solid #22D3EE;color:#22D3EE;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;margin:0 auto 20px;transition:all 0.3s}
.step-card:hover .step-number{background:#22D3EE;color:#0D0E13}
.step-card h4{font-size:1.125rem;font-weight:600;margin-bottom:8px}
.step-card p{color:#64748B;font-size:0.875rem;line-height:1.6}

/* ── Why Us (alternating rows) ── */
.why-us-section{padding:100px 24px}
.why-us-section .section-inner{max-width:1240px;margin:0 auto}
.why-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:88px}
.why-row:last-child{margin-bottom:0}
.why-row.reversed .why-visual{order:1}
.why-row.reversed .why-text{order:0}
.why-visual{background:#111318;border-radius:18px;min-height:320px;display:flex;align-items:center;justify-content:center;border:1px solid #1E2030;position:relative;overflow:hidden}
.why-visual .vis-icon{font-size:4rem}
.why-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(34,211,238,0.04),transparent 70%)}
.why-text h3{font-size:1.625rem;font-weight:700;margin-bottom:16px;color:#A78BFA}
.why-text p{color:#94A3B8;margin-bottom:12px;line-height:1.7;font-size:1rem}

/* ── Testimonials ── */
.testimonials-section{padding:100px 24px;background:#0D0E13}
.testimonials-section .section-inner{max-width:1240px;margin:0 auto}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{background:#111318;border:1px solid #1E2030;border-radius:14px;padding:28px}
.testimonial-card .quote{color:#94A3B8;font-size:0.938rem;line-height:1.7;margin-bottom:20px;position:relative;padding-left:20px;border-left:3px solid #22D3EE}
.testimonial-card .author{color:#22D3EE;font-weight:600;font-size:0.875rem}
.testimonial-card .role{color:#64748B;font-size:0.813rem}

/* ── Contact ── */
.contact-section{padding:100px 24px}
.contact-section .section-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact-info h3{font-size:1.625rem;font-weight:700;margin-bottom:16px}
.contact-info > p{color:#94A3B8;margin-bottom:28px;line-height:1.7}
.contact-detail{display:flex;align-items:center;gap:14px;margin-bottom:20px;color:#94A3B8;font-size:0.938rem}
.contact-detail .detail-icon{width:42px;height:42px;border-radius:10px;background:rgba(34,211,238,0.08);display:flex;align-items:center;justify-content:center;color:#22D3EE;font-size:1.125rem;flex-shrink:0}
.contact-detail a{color:#22D3EE;text-decoration:none}
.contact-form{display:flex;flex-direction:column;gap:16px}
.contact-form input,.contact-form textarea{background:#111318;border:1px solid #1E2030;border-radius:10px;padding:15px 18px;color:#F1F5F9;font-size:0.938rem;font-family:inherit;transition:border-color 0.3s;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#22D3EE;box-shadow:0 0 0 3px rgba(34,211,238,0.1)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-status{padding:12px 16px;border-radius:8px;font-size:0.875rem;display:none}
.form-status.success{display:block;background:rgba(16,185,129,0.1);color:#34D399;border:1px solid rgba(16,185,129,0.2)}
.form-status.error{display:block;background:rgba(239,68,68,0.1);color:#F87171;border:1px solid rgba(239,68,68,0.2)}

/* ── CTA Banner ── */
.cta-banner{padding:100px 24px;background:linear-gradient(135deg,#111318,#181C27);text-align:center}
.cta-banner .section-inner{max-width:700px;margin:0 auto}
.cta-banner h2{font-size:clamp(1.75rem,3.5vw,2.625rem);font-weight:700;margin-bottom:16px}
.cta-banner p{color:#94A3B8;margin-bottom:36px;font-size:1.063rem;line-height:1.7}

/* ── Footer ── */
.site-footer{background:#06070A;border-top:1px solid #1E2030;padding:36px 24px}
.site-footer .footer-inner{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.site-footer p{color:#64748B;font-size:0.813rem}
.site-footer .footer-links{display:flex;gap:28px}
.site-footer .footer-links a{color:#94A3B8;text-decoration:none;font-size:0.813rem;transition:color 0.25s}
.site-footer .footer-links a:hover{color:#22D3EE}

/* ── Scroll Reveal ── */
.fade-up{opacity:0;transform:translateY(32px);transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1),transform 0.6s cubic-bezier(0.22,1,0.36,1)}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── Responsive ── */
@media(max-width:1024px){
  .capabilities-grid{grid-template-columns:repeat(2,1fr)}
  .cap-card.wide{grid-column:span 1}
  .approach-steps{grid-template-columns:repeat(2,1fr);gap:40px 20px}
  .approach-steps::before{display:none}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .site-nav .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(11,12,16,0.98);backdrop-filter:blur(16px);flex-direction:column;padding:24px;gap:18px;border-bottom:1px solid #1E2030}
  .site-nav .nav-links.open{display:flex}
  .mobile-toggle{display:block}
  .hero-section .hero-inner{grid-template-columns:1fr;gap:48px}
  .hero-abstract{max-width:320px;margin:0 auto}
  .stats-band .stats-inner{grid-template-columns:repeat(2,1fr);gap:24px}
  .capabilities-grid{grid-template-columns:1fr}
  .approach-steps{grid-template-columns:1fr;gap:36px}
  .why-row,.why-row.reversed{grid-template-columns:1fr}
  .why-row.reversed .why-visual{order:0}
  .testimonials-grid{grid-template-columns:1fr}
  .contact-section .section-inner{grid-template-columns:1fr}
  .contact-form .form-row{grid-template-columns:1fr}
  .section-header h2{font-size:1.75rem}
}
@media(max-width:480px){
  .hero-section .hero-text h1{font-size:1.875rem}
  .hero-section .hero-buttons{flex-direction:column}
  .hero-section .hero-buttons .btn{justify-content:center}
  .footer-inner{flex-direction:column;text-align:center}
}