/* ================================================================
   RITVIK ENTERPRISES — style.css v4.0
   Mobile-Optimized · SEO-Enhanced · AI-Powered
================================================================ */

/* ── CSS VARIABLES ── */
:root {
  --navy:#080e1a; --navy2:#0d1829; --navy3:#0f2035;
  --cyan:#00d4ff; --electric:#4f8eff; --purple:#7c3aed;
  --green:#10b981; --orange:#f59e0b; --red:#ef4444;
  --white:#fff; --gray2:#64748b;
  --glass:rgba(255,255,255,.04); --glass-border:rgba(255,255,255,.08);
  --glass-hover:rgba(255,255,255,.07);
  --text:#e2e8f0; --text2:#94a3b8;
  --shadow:0 8px 32px rgba(0,0,0,.4);
  --glow-cyan:0 0 20px rgba(0,212,255,.3);
  --radius:16px; --radius-sm:10px;
  --tr:.3s cubic-bezier(.4,0,.2,1);
  --font-d:'Montserrat',sans-serif;
  --font-b:'Poppins',sans-serif;
  --font-m:'Space Mono',monospace;
  /* Touch target minimum */
  --touch-min:44px;
}

[data-theme="light"] {
  --navy:#f0f4ff; --navy2:#e8edf8; --navy3:#dce4f5;
  --glass:rgba(0,0,0,.03); --glass-border:rgba(0,0,0,.08);
  --glass-hover:rgba(0,0,0,.05);
  --text:#1e293b; --text2:#475569;
  --shadow:0 8px 32px rgba(0,0,0,.12);
}

/* ── BASE RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body {
  font-family:var(--font-b);
  background:var(--navy);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.7;
  transition:background var(--tr),color var(--tr);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a { text-decoration:none; color:inherit }
img { max-width:100%; height:auto; display:block }
button { font-family:var(--font-b); cursor:pointer }
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--navy2) }
::-webkit-scrollbar-thumb { background:var(--cyan); border-radius:3px }

/* ── ACCESSIBILITY ── */
.skip-nav {
  position:absolute; top:-100%; left:0; z-index:100001;
  background:var(--cyan); color:var(--navy); padding:12px 24px;
  font-weight:700; border-radius:0 0 8px 0; transition:top .2s;
}
.skip-nav:focus { top:0 }
.visually-hidden {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px }

/* ── PAGE LOADER ── */
#pageLoader {
  position:fixed; inset:0; background:var(--navy);
  z-index:99999; display:flex; align-items:center;
  justify-content:center; transition:opacity .5s,visibility .5s;
}
#pageLoader.hidden { opacity:0; visibility:hidden; pointer-events:none }
.loader-inner { text-align:center }
.loader-logo-pulse {
  width:80px; height:80px; border-radius:20px;
  background:linear-gradient(135deg,var(--cyan),var(--electric));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-size:1.8rem; font-weight:900;
  color:var(--navy); margin:0 auto 20px;
  animation:pulseGlow 1.5s ease-in-out infinite;
}
.loader-bar { width:200px; height:3px; background:var(--glass-border); border-radius:3px; overflow:hidden; margin:0 auto 12px }
.loader-fill { height:100%; background:linear-gradient(90deg,var(--cyan),var(--electric)); animation:loadFill 1.8s ease forwards }
.loader-text { font-family:var(--font-m); font-size:.7rem; color:var(--cyan); letter-spacing:2px; text-transform:uppercase; animation:blink 1s infinite }
@keyframes loadFill { from{width:0} to{width:100%} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes pulseGlow { 0%,100%{filter:drop-shadow(0 0 8px rgba(0,212,255,.6))} 50%{filter:drop-shadow(0 0 20px rgba(0,212,255,.9))} }

/* ── COOKIE ── */
.cookie-consent { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:9990; width:min(600px,95vw) }
.cookie-inner { background:var(--navy2); border:1px solid var(--glass-border); border-radius:50px; padding:12px 20px; display:flex; align-items:center; gap:12px; backdrop-filter:blur(20px); flex-wrap:wrap }
.cookie-inner a { color:var(--cyan) }
.btn-cookie-accept { background:linear-gradient(135deg,var(--cyan),var(--electric)); border:none; padding:8px 20px; border-radius:50px; color:var(--navy); font-weight:700; font-size:.85rem; cursor:pointer; white-space:nowrap; transition:var(--tr); min-height:var(--touch-min) }

/* ── NAVBAR ── */
.glass-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(8,14,26,.75); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--glass-border); transition:all var(--tr);
}
.glass-nav.scrolled { background:rgba(8,14,26,.97); box-shadow:0 4px 30px rgba(0,0,0,.4) }
.nav-inner { max-width:1400px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:16px }

/* Logo */
.brand-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; min-height:var(--touch-min); text-decoration:none }
.nav-logo-text {
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg,var(--cyan),var(--electric));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-size:1rem; font-weight:900;
  color:var(--navy); flex-shrink:0;
}
.nav-brand-name { font-family:var(--font-d); font-weight:700; font-size:.95rem; color:var(--white); white-space:nowrap }

/* Desktop nav */
.desktop-nav { display:flex; list-style:none; margin:0 auto; padding:0; gap:2px; align-items:center }
.desktop-nav li { position:relative }
.nav-link {
  color:var(--text2)!important; font-weight:500; font-size:.88rem;
  padding:10px 13px; border-radius:var(--radius-sm); transition:var(--tr);
  display:block; white-space:nowrap; background:none; border:none; cursor:pointer;
  min-height:var(--touch-min); display:flex; align-items:center;
}
.nav-link:hover,.nav-link.active { color:var(--cyan)!important }

/* Mega menu */
.has-mega:hover .mega-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.mega-menu {
  position:fixed; left:50%; top:68px; transform:translateX(-50%) translateY(-10px);
  width:min(900px,95vw); background:rgba(8,14,26,.98);
  border:1px solid var(--glass-border); border-radius:var(--radius);
  backdrop-filter:blur(30px); padding:28px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transition:opacity var(--tr),transform var(--tr),visibility var(--tr); z-index:1001;
}
.mega-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.mega-col { padding:0 20px; border-right:1px solid var(--glass-border) }
.mega-col:last-child { border-right:none }
.mega-head { font-family:var(--font-d); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray2); margin-bottom:14px }
.mega-head i { color:var(--cyan) }
.mega-link { display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:8px; color:var(--text2); font-size:.87rem; transition:var(--tr); margin-bottom:4px; min-height:var(--touch-min) }
.mega-link:hover { background:var(--glass); color:var(--cyan); transform:translateX(4px) }
.mega-cta-col { border-right:none }
.mega-cta-box { background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(79,142,255,.08)); border:1px solid rgba(0,212,255,.2); border-radius:var(--radius-sm); padding:18px }
.mega-cta-icon { font-size:1.4rem; color:var(--cyan); margin-bottom:6px }
.mega-cta-title { font-family:var(--font-d); font-weight:700; color:var(--white); margin-bottom:6px; font-size:.95rem }
.mega-cta-box p { font-size:.82rem; color:var(--text2); margin-bottom:12px }
.btn-mega-cta { background:linear-gradient(135deg,var(--cyan),var(--electric)); color:var(--navy); padding:10px 16px; border-radius:8px; font-weight:700; font-size:.83rem; display:inline-block; transition:var(--tr) }
.btn-mega-cta:hover { color:var(--navy); transform:translateY(-2px) }

/* Nav right */
.nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.btn-nav-cta {
  background:linear-gradient(135deg,var(--cyan),var(--electric));
  color:var(--navy)!important; padding:10px 20px; border-radius:50px;
  font-weight:700; font-size:.87rem; transition:var(--tr); white-space:nowrap;
  min-height:var(--touch-min); display:flex; align-items:center; gap:6px;
}
.btn-nav-cta:hover { transform:translateY(-2px); box-shadow:var(--glow-cyan); color:var(--navy)!important }
.theme-toggle {
  background:var(--glass); border:1px solid var(--glass-border);
  width:var(--touch-min); height:var(--touch-min); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--cyan); font-size:1rem; transition:var(--tr); flex-shrink:0;
}
.theme-toggle:hover { border-color:var(--cyan); transform:rotate(20deg) }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; flex-shrink:0; min-width:var(--touch-min); min-height:var(--touch-min); align-items:center; justify-content:center }
.hamburger span { display:block; width:24px; height:2px; background:var(--cyan); border-radius:2px; transition:var(--tr) }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* ── MOBILE DRAWER ── */
.mobile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1099; backdrop-filter:blur(4px) }
.mobile-overlay.open { display:block }
.mobile-drawer { position:fixed; top:0; right:-320px; width:min(300px,90vw); height:100dvh; background:var(--navy2); border-left:1px solid var(--glass-border); z-index:1100; transition:right .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch }
.mobile-drawer.open { right:0 }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--glass-border); flex-shrink:0 }
.drawer-logo-text { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--cyan),var(--electric)); display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:1rem; font-weight:900; color:var(--navy) }
.drawer-close { background:var(--glass); border:1px solid var(--glass-border); width:var(--touch-min); height:var(--touch-min); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); font-size:.9rem; transition:var(--tr) }
.drawer-close:hover { color:var(--cyan); border-color:var(--cyan) }
.drawer-nav { flex:1; padding:12px 0 }
.drawer-link { display:flex; align-items:center; gap:12px; padding:15px 22px; color:var(--text2); font-size:.95rem; font-weight:500; transition:var(--tr); border-left:3px solid transparent; min-height:var(--touch-min) }
.drawer-link:hover,.drawer-link.active { color:var(--cyan); background:rgba(0,212,255,.05); border-left-color:var(--cyan) }
.drawer-link i { font-size:1rem; width:20px; text-align:center; flex-shrink:0 }
.drawer-group { border-left:3px solid transparent }
.drawer-group-btn { width:100%; display:flex; align-items:center; justify-content:space-between; padding:15px 22px; background:none; border:none; color:var(--text2); font-size:.95rem; font-weight:500; cursor:pointer; transition:var(--tr); font-family:var(--font-b); min-height:var(--touch-min) }
.drawer-group-btn:hover { color:var(--cyan) }
.drawer-group-btn>span { display:flex; align-items:center; gap:12px }
.drawer-group-btn i.bi-chevron-down { transition:transform var(--tr); font-size:.8rem }
.drawer-group-btn.open i.bi-chevron-down { transform:rotate(180deg) }
.drawer-group-items { display:none; padding:4px 0 8px; background:rgba(0,0,0,.15) }
.drawer-group-items.open { display:block }
.drawer-sub-link { display:flex; align-items:center; gap:10px; padding:13px 22px 13px 44px; color:var(--text2); font-size:.87rem; transition:var(--tr); min-height:var(--touch-min) }
.drawer-sub-link:hover { color:var(--cyan) }
.drawer-footer { padding:20px; border-top:1px solid var(--glass-border); flex-shrink:0 }
.drawer-wa-btn { background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.3); color:#25d366; padding:14px; border-radius:10px; font-weight:600; font-size:.9rem; transition:var(--tr); display:block; text-align:center; min-height:var(--touch-min) }
.drawer-wa-btn:hover { background:rgba(37,211,102,.2); color:#25d366 }

/* ── MOBILE BOTTOM NAV ── */
.mobile-bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:999;
  background:rgba(8,14,26,.97); backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  justify-content:space-around; align-items:center;
  padding:6px 0 max(6px,env(safe-area-inset-bottom));
  height:calc(60px + env(safe-area-inset-bottom));
}
.mob-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--text2); font-size:.6rem; font-weight:600;
  letter-spacing:.3px; text-transform:uppercase;
  padding:6px 12px; border-radius:12px; transition:var(--tr);
  min-width:var(--touch-min); min-height:var(--touch-min); justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.mob-nav-item i { font-size:1.1rem; display:block }
.mob-nav-item.active,.mob-nav-item:hover { color:var(--cyan) }
.mob-nav-item.active { background:rgba(0,212,255,.1) }

/* ── BUTTONS ── */
.btn-primary-glow {
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--cyan),var(--electric));
  color:var(--navy); padding:13px 28px; border-radius:50px;
  font-weight:700; font-size:.92rem; transition:var(--tr);
  border:none; cursor:pointer; gap:8px; min-height:var(--touch-min);
  text-decoration:none;
}
.btn-primary-glow:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,212,255,.4); color:var(--navy) }
.btn-ghost-glow {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--white); padding:12px 26px;
  border-radius:50px; font-weight:600; font-size:.92rem;
  border:1px solid rgba(255,255,255,.2); transition:var(--tr);
  gap:8px; min-height:var(--touch-min); text-decoration:none;
}
.btn-ghost-glow:hover { background:rgba(255,255,255,.05); border-color:var(--cyan); color:var(--cyan); transform:translateY(-3px) }

/* ── HERO ── */
.hero-section { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:100px 20px 120px }
#heroCanvas { position:absolute; inset:0; width:100%; height:100% }
.hero-grid-overlay { position:absolute; inset:0; background-image:linear-gradient(rgba(0,212,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.025) 1px,transparent 1px); background-size:60px 60px }
.hero-orbs { position:absolute; inset:0; pointer-events:none }
.orb { position:absolute; border-radius:50%; filter:blur(80px); animation:orbFloat 8s ease-in-out infinite }
.orb1 { width:min(400px,80vw); height:min(400px,80vw); background:radial-gradient(circle,rgba(0,212,255,.1),transparent 70%); top:-100px; right:-100px }
.orb2 { width:min(300px,60vw); height:min(300px,60vw); background:radial-gradient(circle,rgba(79,142,255,.08),transparent 70%); bottom:-50px; left:-80px; animation-delay:3s }
.orb3 { width:min(200px,40vw); height:min(200px,40vw); background:radial-gradient(circle,rgba(124,58,237,.07),transparent 70%); top:50%; left:50%; animation-delay:6s }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }
.hero-content { position:relative; z-index:2; width:100% }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.2); padding:8px 18px; border-radius:50px; font-size:.78rem; font-weight:600; color:var(--cyan); letter-spacing:1px; text-transform:uppercase; margin-bottom:24px }
.badge-dot { width:8px; height:8px; background:var(--cyan); border-radius:50%; animation:pulseGlow 1.5s infinite; flex-shrink:0 }
.hero-title { font-family:var(--font-d); font-size:clamp(1.9rem,5vw,3.8rem); font-weight:900; color:var(--white); line-height:1.15; margin-bottom:20px }
.gradient-text { background:linear-gradient(135deg,var(--cyan),var(--electric),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:200%; animation:gradShift 4s ease infinite }
@keyframes gradShift { 0%,100%{background-position:0%} 50%{background-position:100%} }
.hero-subtitle { font-size:clamp(.88rem,2vw,1.05rem); color:var(--text2); margin-bottom:36px; line-height:1.8 }
.hero-ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:52px }
.hero-stats { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 }
.hero-stat { text-align:center; padding:0 20px }
.hero-stat .stat-num { font-family:var(--font-d); font-size:1.8rem; font-weight:900; color:var(--white) }
.hero-stat>span { font-size:1.1rem; color:var(--cyan); font-weight:900 }
.hero-stat>div { font-size:.72rem; color:var(--text2); text-transform:uppercase; letter-spacing:1px }
.hero-stat-divider { width:1px; height:40px; background:var(--glass-border) }
.hero-scroll-hint { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text2); font-size:.72rem; letter-spacing:2px; text-transform:uppercase; z-index:2 }
.scroll-line { width:1px; height:36px; background:linear-gradient(to bottom,var(--cyan),transparent); animation:scrollPulse 1.5s infinite }
@keyframes scrollPulse { 0%,100%{opacity:1;height:36px} 50%{opacity:.3;height:18px} }

/* MARQUEE */
.tech-marquee { overflow:hidden; padding:14px 0; background:linear-gradient(135deg,rgba(0,212,255,.03),rgba(79,142,255,.03)); border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border) }
.marquee-track { display:flex; width:max-content; animation:marqueeAnim 35s linear infinite; gap:0 }
.marquee-track span { padding:0 16px; font-family:var(--font-m); font-size:.75rem; color:var(--text2); font-weight:500; letter-spacing:1px; white-space:nowrap }
.marquee-track .dot { color:var(--cyan); padding:0 4px }
@keyframes marqueeAnim { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce) { .marquee-track { animation:none } }

/* SECTIONS */
.section-pad { padding:88px 0 }
.bg-alt { background:var(--navy2) }
.section-label { font-family:var(--font-m); font-size:.68rem; text-transform:uppercase; letter-spacing:3px; color:var(--cyan); margin-bottom:12px; display:block }
.section-title { font-family:var(--font-d); font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800; color:var(--white); margin-bottom:16px; line-height:1.25 }
.section-desc { color:var(--text2); font-size:.93rem }
[data-theme="light"] .section-title,[data-theme="light"] .hero-title { color:#1e293b }

/* GLASS CARD */
.glass-card { background:var(--glass); backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:var(--radius); transition:var(--tr) }
.glass-card:hover { background:var(--glass-hover); border-color:rgba(0,212,255,.2); box-shadow:0 8px 40px rgba(0,0,0,.3) }

/* ABOUT */
.about-visual { position:relative; height:340px }
.about-hex-grid { display:grid; grid-template-columns:repeat(3,88px); gap:14px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) }
.hex { width:88px; height:88px; background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:var(--cyan); transition:var(--tr) }
.hex:hover { background:rgba(0,212,255,.1); border-color:var(--cyan); transform:scale(1.08) }
.about-features { display:flex; flex-direction:column; gap:10px; margin-top:22px }
.about-feat { display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--text2) }

/* SERVICES */
.service-card { padding:28px; height:100%; display:flex; flex-direction:column; gap:14px }
.service-icon { width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); transition:var(--tr) }
.service-icon i { background:linear-gradient(135deg,var(--c,#00d4ff),rgba(255,255,255,.7)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.service-card:hover .service-icon { transform:scale(1.1) rotate(5deg) }
.service-card h3 { font-family:var(--font-d); font-weight:700; font-size:1rem; color:var(--white); margin:0 }
.service-card p { color:var(--text2); font-size:.85rem; flex:1; margin:0 }
.service-link { display:inline-flex; align-items:center; gap:6px; font-size:.84rem; font-weight:600; color:var(--cyan); transition:var(--tr); min-height:var(--touch-min); padding:4px 0 }
.service-link:hover { gap:10px }

/* AI SECTION */
.ai-section { position:relative; overflow:hidden }
.ai-bg-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(124,58,237,.05),transparent 70%); pointer-events:none }
.ai-neural-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.25; pointer-events:none }
.ai-badges { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; margin-top:20px }
.ai-badge { background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.2); color:var(--cyan); padding:6px 14px; border-radius:50px; font-size:.76rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition:var(--tr); min-height:36px }
.ai-badge:hover { background:rgba(0,212,255,.14); transform:translateY(-2px) }

/* AI Tabs */
.ai-tabs { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); overflow:hidden }
.ai-tab-btns { display:flex; background:var(--navy2); border-bottom:1px solid var(--glass-border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.ai-tab-btns::-webkit-scrollbar { display:none }
.ai-tab-btn { flex:1; min-width:max-content; padding:13px 10px; background:none; border:none; border-bottom:2px solid transparent; color:var(--text2); font-size:.82rem; font-weight:600; cursor:pointer; transition:var(--tr); font-family:var(--font-b); white-space:nowrap; min-height:var(--touch-min) }
.ai-tab-btn.active,.ai-tab-btn:hover { color:var(--cyan); border-bottom-color:var(--cyan) }
.ai-tab-content { padding:22px }
.ai-tab-panel { display:none }
.ai-tab-panel.active { display:block }
.ai-feat-item { display:flex; gap:14px; margin-bottom:18px; align-items:flex-start }
.ai-feat-item:last-child { margin-bottom:0 }
.ai-feat-icon { width:42px; height:42px; background:rgba(0,212,255,.09); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; color:var(--aic,var(--cyan)); border:1px solid rgba(0,212,255,.18) }
.ai-feat-item strong { display:block; color:var(--white); font-size:.88rem; margin-bottom:3px }
.ai-feat-item p { color:var(--text2); font-size:.82rem; margin:0 }

/* AI Dashboard */
.ai-dashboard { background:var(--navy3); border:1px solid var(--glass-border); border-radius:var(--radius); overflow:hidden }
.ai-dash-header { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--glass-border); background:var(--navy2) }
.ai-dash-dots { display:flex; gap:5px }
.ai-dash-dots span { width:10px; height:10px; border-radius:50% }
.ai-dash-dots span:nth-child(1) { background:#ef4444 }
.ai-dash-dots span:nth-child(2) { background:#f59e0b }
.ai-dash-dots span:nth-child(3) { background:#10b981 }
.ai-dash-title { font-family:var(--font-m); font-size:.78rem; color:var(--text2); flex:1 }
.ai-dash-status { font-size:.73rem; color:var(--green); display:flex; align-items:center }
.ai-dash-body { padding:18px }
.ai-metric { display:flex; align-items:center; gap:10px; margin-bottom:12px }
.ai-metric-label { font-size:.74rem; color:var(--text2); min-width:110px; font-family:var(--font-m) }
.ai-metric-bar { flex:1; height:5px; background:var(--glass-border); border-radius:3px; overflow:hidden }
.ai-metric-fill { height:100%; background:linear-gradient(90deg,var(--c,var(--cyan)),var(--electric)); border-radius:3px }
.ai-metric-val { font-family:var(--font-m); font-size:.74rem; color:var(--cyan); min-width:38px; text-align:right }
.ai-dash-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px }
.ai-dash-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; padding:12px; text-align:center; transition:var(--tr) }
.ai-dash-card:hover { border-color:rgba(0,212,255,.3) }
.ai-dash-card i { font-size:1.1rem; margin-bottom:4px; display:block }
.ai-dash-card strong { display:block; font-size:.9rem; color:var(--white); font-family:var(--font-d); font-weight:700 }
.ai-dash-card small { font-size:.68rem; color:var(--text2) }

/* AI Timeline */
.ai-process-timeline { padding:22px }
.timeline-item { display:flex; gap:12px; margin-bottom:16px; align-items:flex-start }
.timeline-item:last-child { margin-bottom:0 }
.tl-dot { width:13px; height:13px; border-radius:50%; background:var(--dc,var(--cyan)); flex-shrink:0; margin-top:4px; box-shadow:0 0 8px var(--dc,var(--cyan)) }
.tl-body strong { display:block; color:var(--white); font-size:.86rem; margin-bottom:2px }
.tl-body p { color:var(--text2); font-size:.78rem; margin:0 }

/* Chat */
.ai-chat-window { overflow:hidden; display:flex; flex-direction:column }
.chat-header { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--glass-border); background:var(--navy2) }
.chat-avatar { width:38px; height:38px; background:linear-gradient(135deg,var(--cyan),var(--electric)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--navy); flex-shrink:0 }
.chat-header strong { display:block; color:var(--white); font-size:.88rem }
.chat-status { font-size:.72rem; color:var(--green); display:flex; align-items:center; gap:4px }
.status-dot { width:6px; height:6px; background:#10b981; border-radius:50%; animation:pulseGlow 2s infinite; flex-shrink:0 }
.chat-actions { display:flex; gap:6px }
.chat-action-btn { background:var(--glass); border:1px solid var(--glass-border); width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); font-size:.8rem; transition:var(--tr) }
.chat-action-btn:hover { color:var(--cyan); border-color:var(--cyan) }
.chat-messages { overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; min-height:200px; max-height:260px; -webkit-overflow-scrolling:touch }
.chat-msg { display:flex; flex-direction:column; gap:3px }
.user-msg { align-items:flex-end }
.ai-msg { align-items:flex-start }
.msg-bubble { max-width:88%; padding:11px 15px; border-radius:16px; font-size:.84rem; line-height:1.6 }
.ai-msg .msg-bubble { background:var(--navy2); border:1px solid var(--glass-border); color:var(--text); border-bottom-left-radius:4px }
.user-msg .msg-bubble { background:linear-gradient(135deg,var(--cyan),var(--electric)); color:var(--navy); font-weight:500; border-bottom-right-radius:4px }
.msg-time { font-size:.64rem; color:var(--gray2) }
.typing-dots { display:flex; gap:4px; align-items:center; padding:4px 0 }
.typing-dots span { width:7px; height:7px; background:var(--text2); border-radius:50%; animation:typingBounce 1.2s infinite }
.typing-dots span:nth-child(2) { animation-delay:.2s }
.typing-dots span:nth-child(3) { animation-delay:.4s }
@keyframes typingBounce { 0%,80%,100%{transform:scale(.8);opacity:.5} 40%{transform:scale(1);opacity:1} }
.chat-suggestions { display:flex; gap:6px; padding:8px 14px; flex-wrap:wrap; border-top:1px solid var(--glass-border) }
.suggestion-btn { background:var(--glass); border:1px solid var(--glass-border); color:var(--text2); padding:6px 13px; border-radius:50px; font-size:.78rem; font-weight:500; cursor:pointer; transition:var(--tr); min-height:34px; -webkit-tap-highlight-color:transparent }
.suggestion-btn:hover { color:var(--cyan); border-color:var(--cyan) }
.chat-input-area { display:flex; gap:8px; align-items:center; padding:12px 14px; border-top:1px solid var(--glass-border) }
.chat-input { flex:1; background:var(--glass); border:1px solid var(--glass-border); border-radius:50px; padding:12px 18px; color:var(--text); font-size:.87rem; outline:none; transition:var(--tr); font-family:var(--font-b); min-height:var(--touch-min) }
.chat-input:focus { border-color:var(--cyan) }
.chat-input::placeholder { color:var(--text2) }
.chat-send-btn { width:44px; height:44px; flex-shrink:0; background:linear-gradient(135deg,var(--cyan),var(--electric)); border:none; border-radius:50%; color:var(--navy); font-size:.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--tr) }
.chat-send-btn:hover { transform:scale(1.1); box-shadow:var(--glow-cyan) }

/* WHY */
.why-icon { width:60px; height:60px; background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(0,212,255,.05)); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--wc,var(--cyan)); margin:0 auto 18px; transition:var(--tr) }
.why-card:hover .why-icon { transform:scale(1.1) rotate(5deg) }
.why-card { padding:28px 22px }
.why-card h4 { font-family:var(--font-d); font-weight:700; font-size:.98rem; color:var(--white); margin-bottom:8px }
.why-card p { color:var(--text2); font-size:.85rem }

/* STATS */
.stats-section { padding:56px 0; background:linear-gradient(135deg,var(--navy3),var(--navy2)); border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border) }
.stat-item { padding:16px }
.big-num { font-family:var(--font-d); font-size:2.4rem; font-weight:900; background:linear-gradient(135deg,var(--cyan),var(--electric)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1 }
.stat-label { font-size:.76rem; color:var(--text2); text-transform:uppercase; letter-spacing:1.5px; margin-top:6px }

/* PORTFOLIO */
.portfolio-filters { display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.pf-btn { background:var(--glass); border:1px solid var(--glass-border); color:var(--text2); padding:9px 18px; border-radius:50px; font-size:.83rem; font-weight:600; cursor:pointer; transition:var(--tr); min-height:var(--touch-min); -webkit-tap-highlight-color:transparent }
.pf-btn.active,.pf-btn:hover { background:rgba(0,212,255,.12); color:var(--cyan); border-color:var(--cyan) }
.pf-item.hidden { display:none }
.portfolio-card { overflow:hidden }
.portfolio-img { height:185px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden }
.portfolio-overlay { position:absolute; inset:0; background:rgba(8,14,26,.85); display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--tr) }
.portfolio-card:hover .portfolio-overlay { opacity:1 }
.btn-view { background:linear-gradient(135deg,var(--cyan),var(--electric)); color:var(--navy); padding:10px 20px; border-radius:8px; font-weight:700; font-size:.83rem; display:inline-flex; align-items:center; gap:7px; min-height:var(--touch-min) }
.portfolio-icon { font-size:2.6rem; color:rgba(255,255,255,.12) }
.portfolio-info { padding:18px }
.portfolio-tag { background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.2); color:var(--cyan); font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:50px; letter-spacing:1px; text-transform:uppercase }
.portfolio-info h4 { font-family:var(--font-d); font-weight:700; font-size:.95rem; color:var(--white); margin:8px 0 6px }
.portfolio-info p { font-size:.82rem; color:var(--text2); margin:0 }

/* TESTIMONIALS */
.testi-card { padding:24px }
.testi-stars { color:#f59e0b; font-size:.95rem; margin-bottom:12px; letter-spacing:2px }
.testi-card p { color:var(--text2); font-size:.85rem; line-height:1.7; margin-bottom:18px; font-style:italic }
.testi-author { display:flex; align-items:center; gap:10px }
.testi-avatar { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; flex-shrink:0 }
.testi-author strong { display:block; font-size:.86rem; color:var(--white) }
.testi-author small { color:var(--text2); font-size:.76rem }
.featured-testi { border-color:rgba(0,212,255,.3); background:rgba(0,212,255,.03) }

/* PRICING */
.pricing-card { padding:32px 24px; position:relative; text-align:center }
.pricing-featured { border-color:rgba(0,212,255,.35); background:rgba(0,212,255,.04); transform:translateY(-8px) }
.pricing-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--cyan),var(--electric)); color:var(--navy); padding:4px 16px; border-radius:50px; font-size:.72rem; font-weight:700; letter-spacing:1px; white-space:nowrap }
.pricing-tier { font-family:var(--font-d); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:2px; color:var(--text2); margin-bottom:8px }
.pricing-price { font-family:var(--font-d); font-size:2rem; font-weight:900; color:var(--white); margin-bottom:8px }
.pricing-price span { font-size:.95rem; color:var(--text2); font-weight:400 }
.pricing-desc { font-size:.83rem; color:var(--text2); margin-bottom:22px }
.pricing-features { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:26px; text-align:left }
.pricing-features li { display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--text2) }
.pricing-features .text-muted { opacity:.4 }
.btn-pricing { display:block; padding:12px; border-radius:10px; font-weight:700; font-size:.88rem; text-align:center; border:1px solid var(--glass-border); color:var(--text2); transition:var(--tr); min-height:var(--touch-min) }
.btn-pricing:hover { border-color:var(--cyan); color:var(--cyan) }
.btn-pricing-featured { background:linear-gradient(135deg,var(--cyan),var(--electric)); color:var(--navy); border-color:transparent }
.btn-pricing-featured:hover { color:var(--navy); transform:translateY(-2px); box-shadow:var(--glow-cyan) }

/* BLOG */
.blog-live-badge { display:inline-flex; align-items:center; gap:7px; font-size:.78rem; color:var(--green); margin-top:8px; font-weight:600 }
.blog-card { overflow:hidden; height:100%; display:flex; flex-direction:column; cursor:pointer }
.blog-img { height:170px; position:relative; display:flex; align-items:flex-start; justify-content:flex-start; padding:14px; overflow:hidden }
.blog-category { background:rgba(0,212,255,.14); border:1px solid rgba(0,212,255,.28); color:var(--cyan); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; padding:4px 11px; border-radius:50px; position:relative; z-index:1 }
.blog-body { padding:18px; flex:1; display:flex; flex-direction:column }
.blog-date { font-size:.74rem; color:var(--text2); margin-bottom:8px }
.blog-body h4 { font-family:var(--font-d); font-weight:700; font-size:.95rem; margin-bottom:8px; color:var(--white); line-height:1.4; flex:1 }
.blog-body p { font-size:.83rem; color:var(--text2); margin-bottom:14px }
.blog-read-more { font-size:.83rem; font-weight:600; color:var(--cyan); display:inline-flex; align-items:center; gap:5px; transition:var(--tr); margin-top:auto; min-height:var(--touch-min); padding:4px 0 }
.blog-read-more:hover { gap:9px }
.blog-card:hover .blog-read-more { gap:9px }

/* BLOG MODAL */
.blog-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.9); backdrop-filter:blur(10px);
  z-index:99998; align-items:flex-start; justify-content:center;
  padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.blog-modal.open { display:flex }
.blog-modal-inner {
  width:min(760px,100%); margin:auto;
  padding:40px; position:relative;
  max-height:none;
}
.blog-post-header { margin-bottom:28px }
.blog-post-cat { background:rgba(0,212,255,.14); border:1px solid rgba(0,212,255,.28); color:var(--cyan); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; padding:5px 14px; border-radius:50px; display:inline-block; margin-bottom:16px }
.blog-post-title { font-family:var(--font-d); font-size:clamp(1.4rem,3vw,2rem); font-weight:800; color:var(--white); line-height:1.25; margin-bottom:14px }
.blog-post-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--text2); margin-bottom:20px }
.blog-post-meta i { color:var(--cyan) }
.blog-post-banner { width:100%; height:240px; border-radius:var(--radius); margin-bottom:28px; display:flex; align-items:center; justify-content:center; font-size:4rem; position:relative; overflow:hidden }
.blog-post-body { color:var(--text2); font-size:.92rem; line-height:1.9 }
.blog-post-body h2 { font-family:var(--font-d); font-weight:700; font-size:1.2rem; color:var(--white); margin:28px 0 12px }
.blog-post-body h3 { font-family:var(--font-d); font-weight:700; font-size:1rem; color:var(--cyan); margin:22px 0 10px }
.blog-post-body p { margin-bottom:16px }
.blog-post-body ul,.blog-post-body ol { padding-left:24px; margin-bottom:16px }
.blog-post-body li { margin-bottom:8px }
.blog-post-body strong { color:var(--white) }
.blog-post-body blockquote { border-left:3px solid var(--cyan); padding:12px 20px; background:rgba(0,212,255,.05); border-radius:0 8px 8px 0; margin:20px 0; font-style:italic }
.blog-post-cta { margin-top:32px; padding:24px; background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(79,142,255,.08)); border:1px solid rgba(0,212,255,.2); border-radius:var(--radius); text-align:center }
.blog-post-cta h4 { font-family:var(--font-d); font-weight:700; color:var(--white); margin-bottom:8px }
.blog-post-cta p { color:var(--text2); font-size:.88rem; margin-bottom:16px }
.blog-full-page-link { display:inline-flex; align-items:center; gap:8px; color:var(--text2); font-size:.83rem; margin-top:16px; transition:var(--tr) }
.blog-full-page-link:hover { color:var(--cyan) }

/* MAP */
.map-container { overflow:hidden; padding:4px }
.map-detail { display:flex; align-items:flex-start; gap:10px; color:var(--text2); font-size:.87rem }
.map-detail i { flex-shrink:0; font-size:1rem; margin-top:2px }

/* FAQ */
.faq-item { margin-bottom:10px; overflow:hidden }
.faq-question { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; font-weight:600; font-size:.93rem; color:var(--white); transition:var(--tr); min-height:var(--touch-min) }
.faq-question:hover { color:var(--cyan) }
.faq-icon { font-size:1.1rem; color:var(--cyan); transition:var(--tr); flex-shrink:0 }
.faq-answer { padding:0 20px 16px; font-size:.88rem; color:var(--text2); line-height:1.7 }

/* CONTACT */
.contact-info { display:flex; flex-direction:column; gap:14px }
.contact-item { display:flex; align-items:center; gap:14px; padding:16px 18px; font-size:.88rem; min-height:var(--touch-min) }
.contact-item-icon { font-size:1.3rem; flex-shrink:0 }
.contact-item strong { display:block; margin-bottom:2px; color:var(--white) }
.contact-item span,.contact-item a { color:var(--text2) }
.contact-social { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap }
.social-btn { width:var(--touch-min); height:var(--touch-min); background:var(--glass); border:1px solid var(--glass-border); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.95rem; color:var(--text2); transition:var(--tr); -webkit-tap-highlight-color:transparent }
.social-btn:hover { color:var(--cyan); border-color:var(--cyan); transform:translateY(-3px); box-shadow:var(--glow-cyan) }
.contact-form { padding:28px }
.contact-form h3 { font-family:var(--font-d); font-weight:700; color:var(--white); font-size:1.2rem }
.form-input { width:100%; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:13px 15px; color:var(--text); font-size:.9rem; outline:none; transition:var(--tr); font-family:var(--font-b); appearance:none; -webkit-appearance:none; min-height:var(--touch-min) }
.form-input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,212,255,.1) }
.form-input::placeholder { color:var(--gray2) }
select.form-input option { background:var(--navy2); color:var(--text) }
.form-success { margin-top:14px; padding:13px; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); border-radius:var(--radius-sm); color:var(--green); font-size:.88rem }

/* FOOTER */
.site-footer { background:var(--navy); border-top:1px solid var(--glass-border); padding:72px 0 0; position:relative; overflow:hidden }
.footer-glow { position:absolute; top:0; left:50%; transform:translateX(-50%); width:800px; height:2px; background:linear-gradient(90deg,transparent,var(--cyan),var(--electric),transparent) }
.footer-logo-link { display:inline-block }
.footer-logo-text { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--cyan),var(--electric)); display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:1.1rem; font-weight:900; color:var(--navy) }
.footer-desc { color:var(--text2); font-size:.88rem; line-height:1.7 }
.footer-social { display:flex; gap:9px; margin-top:18px; flex-wrap:wrap }
.footer-col h5 { font-family:var(--font-d); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:2px; color:var(--white); margin-bottom:18px }
.footer-col a { display:block; color:var(--text2); font-size:.88rem; padding:5px 0; transition:var(--tr); min-height:36px; display:flex; align-items:center }
.footer-col a:hover { color:var(--cyan); transform:translateX(4px) }
.footer-bottom { border-top:1px solid var(--glass-border); padding:22px 0; margin-top:52px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.83rem; color:var(--text2) }
.footer-links { display:flex; gap:20px; flex-wrap:wrap }
.footer-links a { color:var(--text2); transition:var(--tr) }
.footer-links a:hover { color:var(--cyan) }

/* SCROLL TOP */
.scroll-top { position:fixed; bottom:calc(80px + env(safe-area-inset-bottom)); right:20px; width:var(--touch-min); height:var(--touch-min); background:linear-gradient(135deg,var(--cyan),var(--electric)); border:none; border-radius:50%; color:var(--navy); font-size:.95rem; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition:all var(--tr); z-index:998; box-shadow:var(--glow-cyan) }
.scroll-top.visible { opacity:1; visibility:visible }
.scroll-top:hover { transform:translateY(-4px) }

/* WHATSAPP WIDGET */
.wa-widget { position:fixed; bottom:calc(80px + env(safe-area-inset-bottom)); right:16px; z-index:9997; display:flex; flex-direction:column; align-items:flex-end; gap:10px }
.wa-float-btn { width:54px; height:54px; background:#25d366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:white; border:none; cursor:pointer; box-shadow:0 4px 20px rgba(37,211,102,.4); animation:floatWA 3s ease-in-out infinite; position:relative; transition:var(--tr); -webkit-tap-highlight-color:transparent }
.wa-float-btn:hover { animation:none; transform:scale(1.1) }
.wa-notification-dot { position:absolute; top:2px; right:2px; width:13px; height:13px; background:#ef4444; border-radius:50%; border:2px solid white; animation:pulseGlow 2s infinite }
@keyframes floatWA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.wa-chat-box { display:none; width:min(310px,calc(100vw - 32px)); background:var(--navy2); border:1px solid var(--glass-border); border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5) }
.wa-chat-box.open { display:block }
.wa-chat-header { background:linear-gradient(135deg,#128c7e,#25d366); padding:14px 16px; display:flex; align-items:center; gap:10px }
.wa-avatar { width:40px; height:40px; background:rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:white; flex-shrink:0 }
.wa-chat-header strong { display:block; color:white; font-size:.9rem }
.wa-status { font-size:.7rem; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:4px }
.wa-close-btn { background:none; border:none; color:rgba(255,255,255,.8); font-size:.85rem; cursor:pointer; padding:6px; border-radius:50%; margin-left:auto; transition:var(--tr); min-width:var(--touch-min); min-height:var(--touch-min); display:flex; align-items:center; justify-content:center }
.wa-close-btn:hover { color:white; background:rgba(255,255,255,.15) }
.wa-chat-body { padding:14px; max-height:180px; overflow-y:auto; -webkit-overflow-scrolling:touch }
.wa-msg { display:flex; margin-bottom:8px }
.wa-bot-msg { justify-content:flex-start }
.wa-user-msg { justify-content:flex-end }
.wa-bubble { max-width:90%; padding:9px 13px; border-radius:14px; font-size:.81rem; line-height:1.5 }
.wa-bot-msg .wa-bubble { background:var(--navy3); color:var(--text); border:1px solid var(--glass-border); border-bottom-left-radius:3px }
.wa-user-msg .wa-bubble { background:#128c7e; color:white; border-bottom-right-radius:3px }
.wa-input-area { padding:12px 14px; border-top:1px solid var(--glass-border) }
.wa-input { width:100%; background:var(--glass); border:1px solid var(--glass-border); border-radius:8px; padding:10px 11px; color:var(--text); font-size:.82rem; outline:none; font-family:var(--font-b); resize:vertical; min-height:var(--touch-min) }
.wa-input:focus { border-color:#25d366 }
.wa-send-btn { width:100%; background:linear-gradient(135deg,#128c7e,#25d366); border:none; border-radius:8px; padding:11px; color:white; font-weight:700; font-size:.83rem; cursor:pointer; transition:var(--tr); display:flex; align-items:center; justify-content:center; gap:5px; font-family:var(--font-b); min-height:var(--touch-min) }
.wa-send-btn:hover { opacity:.9; transform:translateY(-1px) }

/* GET STARTED MODAL */
.gs-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(8px); z-index:99998; align-items:center; justify-content:center; padding:16px; overflow-y:auto }
.gs-modal.open { display:flex }
.gs-modal-inner { width:min(520px,100%); max-height:calc(100svh - 40px); overflow-y:auto; padding:32px; position:relative; margin:auto; -webkit-overflow-scrolling:touch }
.gs-close { position:absolute; top:14px; right:14px; background:var(--glass); border:1px solid var(--glass-border); width:var(--touch-min); height:var(--touch-min); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); font-size:.85rem; transition:var(--tr) }
.gs-close:hover { color:var(--cyan); border-color:var(--cyan) }
.gs-header { text-align:center; margin-bottom:20px }
.gs-ai-avatar { width:60px; height:60px; background:linear-gradient(135deg,var(--cyan),var(--electric)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:var(--navy); margin:0 auto 14px; animation:pulseGlow 2s infinite }
.gs-header h2 { font-family:var(--font-d); font-weight:800; font-size:1.2rem; color:var(--white); margin-bottom:6px }
.gs-header p { color:var(--text2); font-size:.85rem }
.gs-chat { max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; margin-bottom:14px; padding-right:4px; -webkit-overflow-scrolling:touch }
.gs-msg { display:flex }
.gs-bot { justify-content:flex-start }
.gs-user { justify-content:flex-end }
.gs-bubble { max-width:86%; padding:11px 15px; border-radius:16px; font-size:.85rem; line-height:1.6 }
.gs-bot .gs-bubble { background:var(--navy2); border:1px solid var(--glass-border); color:var(--text); border-bottom-left-radius:3px }
.gs-user .gs-bubble { background:linear-gradient(135deg,var(--cyan),var(--electric)); color:var(--navy); font-weight:600; border-bottom-right-radius:3px }
.gs-input-wrap { display:flex; gap:8px; margin-bottom:10px }
.gs-input { flex:1; background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:13px 16px; color:var(--text); font-size:.9rem; outline:none; transition:var(--tr); font-family:var(--font-b); min-height:var(--touch-min) }
.gs-input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,212,255,.1) }
.gs-send-btn { width:46px; height:46px; flex-shrink:0; background:linear-gradient(135deg,var(--cyan),var(--electric)); border:none; border-radius:12px; color:var(--navy); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--tr) }
.gs-send-btn:hover { transform:scale(1.05) }
.gs-progress { height:3px; background:var(--glass-border); border-radius:3px; overflow:hidden; margin-bottom:12px }
.gs-progress-fill { height:100%; background:linear-gradient(90deg,var(--cyan),var(--electric)); border-radius:3px; transition:width .5s ease; width:0 }
.gs-quick-replies { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px }
.gs-qr-btn { background:var(--glass); border:1px solid var(--glass-border); color:var(--cyan); padding:7px 14px; border-radius:50px; font-size:.8rem; font-weight:600; cursor:pointer; transition:var(--tr); min-height:36px; -webkit-tap-highlight-color:transparent }
.gs-qr-btn:hover { background:rgba(0,212,255,.1) }

/* REVEAL */
.reveal-up { opacity:0; transform:translateY(30px); animation:revealUp .7s ease forwards }
@keyframes revealUp { to{opacity:1;transform:translateY(0)} }
@media(prefers-reduced-motion:reduce) { .reveal-up,.orb,.marquee-track,.loader-logo-pulse,.badge-dot,.scroll-line { animation:none; opacity:1; transform:none } }

/* LIGHT THEME */
[data-theme="light"] .glass-nav { background:rgba(240,244,255,.88) }
[data-theme="light"] .mega-menu { background:rgba(240,244,255,.98) }
[data-theme="light"] .mobile-drawer { background:#e8edf8; border-left-color:rgba(0,0,0,.1) }
[data-theme="light"] .service-card h3,[data-theme="light"] .why-card h4,[data-theme="light"] .testi-author strong,[data-theme="light"] .portfolio-info h4,[data-theme="light"] .blog-body h4,[data-theme="light"] .faq-question,[data-theme="light"] .contact-item strong,[data-theme="light"] .footer-col h5,[data-theme="light"] .pricing-price,[data-theme="light"] .chat-header strong,[data-theme="light"] .tl-body strong,[data-theme="light"] .ai-feat-item strong { color:#1e293b }
[data-theme="light"] .hero-stat .stat-num { color:#1e293b }
[data-theme="light"] .site-footer { background:var(--navy2) }
[data-theme="light"] .blog-post-title { color:#1e293b }
[data-theme="light"] .blog-post-body h2 { color:#1e293b }
[data-theme="light"] .nav-brand-name { color:#1e293b }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .mega-menu { width:min(760px,95vw) }
  .mega-grid { grid-template-columns:repeat(2,1fr) }
  .mega-cta-col { grid-column:span 2 }
}

@media(max-width:900px) {
  .nav-brand-name { display:none }
}

@media(max-width:768px) {
  .desktop-nav { display:none }
  .hamburger { display:flex }
  .mobile-bottom-nav { display:flex }
  body { padding-bottom:calc(60px + env(safe-area-inset-bottom)) }

  .hero-section { padding:90px 16px 100px }
  .hero-scroll-hint { bottom:100px }
  .hero-ctas { flex-direction:column; align-items:center }
  .hero-ctas .btn-primary-glow,.hero-ctas .btn-ghost-glow { width:100%; max-width:300px }
  .hero-stat-divider { display:none }
  .hero-stat { flex:1 }
  .hero-stats { gap:0 }

  .section-pad { padding:64px 0 }
  .about-visual { height:260px }
  .about-hex-grid { grid-template-columns:repeat(3,76px); gap:10px }
  .hex { width:76px; height:76px; font-size:1.4rem }

  .cookie-inner { flex-direction:column; text-align:center; border-radius:var(--radius) }
  .footer-bottom { flex-direction:column; text-align:center }
  .pricing-featured { transform:none }
  .contact-form { padding:20px }
  .blog-modal-inner { padding:24px 16px }
  .gs-modal-inner { padding:24px 16px }
  .wa-widget { bottom:calc(68px + env(safe-area-inset-bottom)); right:12px }
  .scroll-top { bottom:calc(72px + env(safe-area-inset-bottom)); right:12px }
  .ai-dash-grid { grid-template-columns:repeat(3,1fr) }
  .ai-metric-label { min-width:90px; font-size:.7rem }
}

@media(max-width:480px) {
  .nav-inner { padding:10px 14px }
  .nav-logo-text { width:36px; height:36px; font-size:.9rem; border-radius:8px }
  .btn-nav-cta { padding:9px 14px; font-size:.82rem }
  .gs-modal-inner { padding:20px 14px }
  .wa-chat-box { width:calc(100vw - 24px) }
  .blog-modal-inner { padding:20px 14px }
  .blog-post-banner { height:160px; font-size:3rem }
  .pricing-card { padding:24px 18px }
  .ai-dash-grid { grid-template-columns:repeat(3,1fr) }
  .ai-tab-btn { font-size:.76rem; padding:10px 8px }
  .hero-stat .stat-num { font-size:1.5rem }
}

@media(max-width:360px) {
  .hero-title { font-size:1.7rem }
  .btn-nav-cta { display:none }
}

/* ══════════════════════════════════════════════════════════
   ENHANCEMENTS v5.0 — Tech Stack, ROI Calc, AI Use Cases,
   Hero Typewriter, Chat Fullscreen, AI Industry Sections
══════════════════════════════════════════════════════════ */

/* ── HERO TYPEWRITER ── */
.typewriter-wrap { display:inline-block; font-size:clamp(.88rem,2vw,1.05rem); color:var(--text2) }
.typewriter-static { color:var(--text2) }
.typewriter-text { color:var(--cyan); font-weight:700; font-family:var(--font-m) }
.typewriter-cursor {
  display:inline-block; color:var(--cyan); font-weight:100;
  animation:cursorBlink .8s step-end infinite; margin-left:2px;
}
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-sub-line { color:var(--text2); font-size:.88rem; margin-top:6px; display:inline-block }
.badge-pulse { color:var(--cyan); animation:badgePulse 1.5s ease-in-out infinite; font-size:.6rem; margin-left:4px }
@keyframes badgePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} }
.badge-ai-label { letter-spacing:1.2px }

/* ── TECH STACK SECTION ── */
.tech-stack-section { position:relative; overflow:hidden }
.ts-bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,212,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.02) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.ts-tabs {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:24px;
}
.ts-tab {
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text2); padding:9px 18px; border-radius:50px;
  font-size:.8rem; font-weight:600; cursor:pointer; transition:var(--tr);
  font-family:var(--font-b); white-space:nowrap;
}
.ts-tab.active,.ts-tab:hover {
  background:rgba(0,212,255,.1); border-color:var(--cyan);
  color:var(--cyan);
}
.ts-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:12px;
}
.ts-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:20px 12px; text-align:center;
  cursor:default; transition:var(--tr); position:relative; overflow:hidden;
}
.ts-card:hover { transform:translateY(-4px); border-color:rgba(0,212,255,.35); box-shadow:0 12px 40px rgba(0,0,0,.3) }
.ts-card.ts-hidden { display:none }
.ts-icon { font-size:2rem; line-height:1; display:block }
.ts-bi-icon { font-size:1.8rem }
.ts-name { font-size:.78rem; font-weight:600; color:var(--white); font-family:var(--font-d) }
.ts-level {
  font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:50px;
  letter-spacing:.5px; text-transform:uppercase; font-family:var(--font-m);
}
.ts-expert { background:rgba(0,212,255,.12); color:var(--cyan); border:1px solid rgba(0,212,255,.25) }
.ts-advanced { background:rgba(124,58,237,.12); color:#a78bfa; border:1px solid rgba(124,58,237,.25) }
.ts-ai-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,212,255,.04),rgba(124,58,237,.04));
  pointer-events:none;
}
/* Certs bar */
.ts-certs {
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.ts-cert-item {
  display:flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:50px;
  font-size:.8rem; font-weight:600; color:var(--text2);
  transition:var(--tr);
}
.ts-cert-item:hover { border-color:rgba(0,212,255,.3); color:var(--white) }
.ts-cert-item i { font-size:1rem }

/* ── ROI CALCULATOR ── */
.ai-roi-section { position:relative }
.roi-calc-title { font-family:var(--font-d); font-weight:700; font-size:.95rem; color:var(--white); margin-bottom:20px; display:flex; align-items:center }
.roi-field { margin-bottom:20px }
.roi-field label { display:block; font-size:.78rem; color:var(--text2); margin-bottom:8px; font-weight:600; text-transform:uppercase; letter-spacing:.5px }
.roi-slider-wrap { display:flex; align-items:center; gap:12px }
.roi-slider {
  flex:1; -webkit-appearance:none; appearance:none; height:4px;
  border-radius:2px; background:linear-gradient(90deg,var(--cyan) var(--pct,50%),var(--glass-border) var(--pct,50%));
  outline:none; cursor:pointer;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px;
  border-radius:50%; background:var(--cyan); cursor:pointer;
  box-shadow:0 0 8px rgba(0,212,255,.6); transition:transform .2s;
}
.roi-slider::-webkit-slider-thumb:hover { transform:scale(1.2) }
.roi-val { font-family:var(--font-m); font-size:.82rem; color:var(--cyan); min-width:48px; text-align:right; font-weight:700 }
.roi-metric-row { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.roi-metric-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:12px; padding:14px; text-align:center; transition:var(--tr);
}
.roi-metric-card:hover { border-color:rgba(0,212,255,.3) }
.roi-metric-featured { grid-column:span 2; background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(79,142,255,.08)); border-color:rgba(0,212,255,.25) }
.roi-metric-icon {
  width:36px; height:36px; background:rgba(var(--rmc-r,0),var(--rmc-g,212),var(--rmc-b,255),.12);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 8px; color:var(--rmc,var(--cyan)); font-size:1rem;
}
.roi-metric-val { font-family:var(--font-d); font-size:1.1rem; font-weight:900; color:var(--white); margin-bottom:4px }
.roi-big { font-size:1.4rem; color:var(--cyan) }
.roi-metric-label { font-size:.68rem; color:var(--text2); text-transform:uppercase; letter-spacing:.5px }
.roi-payback { font-size:.82rem; color:var(--text2); padding:10px 14px; background:var(--glass); border-radius:8px; border:1px solid var(--glass-border) }
.roi-disclaimer { font-size:.68rem; color:var(--gray2); text-align:center; margin-top:10px; margin-bottom:0 }

/* ── AI USE CASES ── */
.ai-usecases-section { position:relative; overflow:hidden }
.uc-card {
  padding:28px; height:100%; display:flex; flex-direction:column; gap:14px;
  transition:var(--tr); position:relative; overflow:hidden;
}
.uc-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--ucc,var(--cyan)),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.uc-card:hover::after { transform:scaleX(1) }
.uc-icon {
  width:52px; height:52px; background:rgba(0,212,255,.07);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--ucc,var(--cyan));
  border:1px solid rgba(0,212,255,.12); transition:var(--tr);
}
.uc-card:hover .uc-icon { transform:scale(1.1) rotate(5deg) }
.uc-card h4 { font-family:var(--font-d); font-weight:700; color:var(--white); font-size:.95rem; margin:0 }
.uc-card p { color:var(--text2); font-size:.83rem; flex:1; margin:0; line-height:1.65 }
.uc-stat {
  font-size:.75rem; font-weight:600; color:var(--text2);
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:50px; padding:5px 12px; display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start;
}
.uc-cta-card { background:linear-gradient(135deg,rgba(0,212,255,.05),rgba(79,142,255,.05)) }

/* ── AI CHAT FULLSCREEN ── */
.ai-chat-window { transition:all .35s cubic-bezier(.4,0,.2,1) }
.ai-chat-window.fullscreen {
  position:fixed; inset:0; z-index:99990;
  border-radius:0; max-width:100vw; margin:0;
  background:var(--navy2);
}
.ai-chat-window.fullscreen .chat-messages {
  max-height:calc(100vh - 220px);
  min-height:calc(100vh - 220px);
}
#fullscreenChat.active i { display:inline-block; transform:rotate(0); }
.chat-fullscreen-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.8);
  z-index:99989; backdrop-filter:blur(6px);
}
.chat-fullscreen-overlay.visible { display:block }

/* ── GET STARTED FULLSCREEN ── */
.gs-fullscreen {
  position:absolute; top:14px; right:58px;
  background:var(--glass); border:1px solid var(--glass-border);
  width:var(--touch-min); height:var(--touch-min); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text2); font-size:.85rem; transition:var(--tr);
}
.gs-fullscreen:hover { color:var(--cyan); border-color:var(--cyan) }
.gs-modal.fullscreen .gs-modal-inner {
  width:100vw; max-width:100vw; height:100vh; max-height:100vh;
  border-radius:0; margin:0;
}
.gs-modal.fullscreen .gs-chat { max-height:calc(100vh - 340px) }

/* ── RESPONSIVE UPDATES ── */
@media(max-width:768px) {
  .ts-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px }
  .ts-card { padding:14px 8px }
  .ts-icon { font-size:1.6rem }
  .ts-name { font-size:.7rem }
  .roi-metric-row { grid-template-columns:1fr 1fr }
  .ts-certs { gap:8px }
  .ts-cert-item { padding:8px 14px; font-size:.75rem }
}
@media(max-width:480px) {
  .ts-grid { grid-template-columns:repeat(3,1fr) }
  .roi-metric-featured { grid-column:span 2 }
  .uc-card { padding:20px }
}