/* ══════════════════════════════════════════════════
   AlphaReaction — Components CSS
   Replaces all Next.js CSS Modules
   ══════════════════════════════════════════════════ */

/* ── HEADER / NAVBAR ── */
.site-header { position:fixed; top:0; left:0; right:0; z-index:1000; transition:all 400ms cubic-bezier(0.16,1,0.3,1); }
.site-header.scrolled { background:rgba(5,8,22,0.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(148,163,184,0.08); }
.main-nav { padding:12px 0; transition:padding 300ms ease; }
.site-header.scrolled .main-nav { padding:8px 0; }
.top-bar { transition:all 300ms ease; }
.top-bar-inner { display:flex; justify-content:space-between; align-items:center; padding:8px clamp(20px,5vw,80px); max-width:1280px; margin:0 auto; border-bottom:1px solid rgba(148,163,184,0.1); }
.site-header.scrolled .top-bar { height:0; padding:0; opacity:0; overflow:hidden; border:none; }
.site-header.scrolled .top-bar-inner { padding:0; border:none; }
.social-list { display:flex; gap:12px; align-items:center; }
.social-icon-sm { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition:transform 0.2s ease, filter 0.2s ease; }
.social-icon-sm:hover { transform:scale(1.1); filter:brightness(1.2); color:#fff; }
.social-icon-sm.linkedin { background:#0A66C2; }
.social-icon-sm.facebook { background:#1877F2; }
.social-icon-sm.instagram { background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }
.social-icon-sm.youtube { background:#FF0000; }
.social-icon-sm.x-twitter { background:#000; border:1px solid rgba(255,255,255,0.2); }
.top-bar-right { display:flex; gap:24px; align-items:center; }
.toggle-wrapper { display:flex; align-items:center; gap:8px; }
.toggle-label { font-size:1.05rem; font-weight:700; color:#94a3b8; cursor:pointer; transition:color 0.3s ease; }
.active-label { color:#1e293b; }
.toggle-btn { width:76px; height:38px; border-radius:19px; border:2px solid #e2e8f0; position:relative; cursor:pointer; display:flex; align-items:center; padding:3px; transition:all 0.3s ease; overflow:hidden; }
.toggle-btn::after { content:''; position:absolute; inset:0; border-radius:19px; box-shadow:inset 0 3px 6px rgba(0,0,0,0.35); pointer-events:none; z-index:1; }
.toggle-circle { width:28px; height:28px; background:#fff; border-radius:50%; box-shadow:0 1px 5px rgba(0,0,0,0.5); transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); z-index:2; flex-shrink:0; }
.lang-toggle { background:#f8fafc; }
.flag-bg { position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h60v30H0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0h60v30H0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); background-size:cover; z-index:0; }
.lang-bn .flag-bg { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600'%3E%3Crect width='1000' height='600' fill='%23006a4e'/%3E%3Ccircle cx='450' cy='300' r='200' fill='%23f42a41'/%3E%3C/svg%3E"); }
.lang-bn .toggle-circle { transform:translateX(38px); }
.theme-toggle { background:#a0cfff; }
.theme-bg { position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Crect width='100' height='50' fill='%23a0cfff'/%3E%3Ccircle cx='25' cy='25' r='10' fill='%23ffc107'/%3E%3C/svg%3E"); background-size:cover; z-index:0; }
.theme-dark .theme-bg { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Crect width='100' height='50' fill='%2323293f'/%3E%3Cpath d='M65 15 a12 12 0 1 0 5 22 a15 15 0 1 1 -5 -22 z' fill='%23fff'/%3E%3C/svg%3E"); }
.theme-dark { border-color:#334155; }
.theme-toggle .toggle-circle { transform:translateX(38px); }
.theme-dark .toggle-circle { transform:translateX(0); background:#3b4256; }
.nav-container { max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,80px); display:flex; align-items:center; justify-content:space-between; }
.logo-link { display:flex; align-items:center; gap:10px; text-decoration:none; z-index:100; }
.logo-img { width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(220,80,20,0.5)); transition:filter 300ms ease,transform 300ms ease; }
.logo-link:hover .logo-img { filter:drop-shadow(0 0 14px rgba(220,80,20,0.7)); transform:scale(1.08); }
.logo-text { font-family:var(--font-display); font-size:1.35rem; font-weight:800; color:var(--text-primary); letter-spacing:-0.02em; }
.logo-accent { background:linear-gradient(135deg,#3B82F6,#06B6D4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-link { color:var(--text-secondary); font-size:0.9rem; font-weight:500; padding:8px 16px; border-radius:8px; transition:all 300ms ease; position:relative; text-decoration:none; }
.nav-link:hover { color:var(--text-primary); background:rgba(59,130,246,0.08); }
.nav-link.active { color:var(--accent-primary); }
.nav-link.active::after { content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:20px; height:2px; background:var(--accent-primary); border-radius:2px; }
.nav-cta { margin-left:16px; padding:10px 24px !important; font-size:0.85rem !important; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; z-index:100; }
.hamburger span { display:block; width:24px; height:2px; background:var(--text-primary); border-radius:2px; transition:all 300ms ease; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

@media (max-width:900px) {
    .hamburger { display:flex; }
    .top-bar { display:none; }
    .nav-links { position:fixed; inset:0; background:rgba(5,8,22,0.97); backdrop-filter:blur(30px); flex-direction:column; justify-content:center; gap:16px; opacity:0; visibility:hidden; transition:all 400ms ease; z-index:99; }
    .nav-links.open { opacity:1; visibility:visible; }
    .nav-link { font-size:1.3rem; padding:12px 24px; }
    .nav-cta { margin-left:0; margin-top:16px; font-size:1rem !important; padding:14px 32px !important; }
}

[data-theme="light"] .site-header.scrolled { background:rgba(255,255,255,0.9); border-bottom:1px solid rgba(15,23,42,0.08); }
[data-theme="light"] .top-bar-inner { border-bottom-color:rgba(15,23,42,0.08); }
[data-theme="light"] .toggle-label { color:#94a3b8; }
[data-theme="light"] .active-label { color:#0F172A; }
[data-theme="light"] .nav-links { background:rgba(255,255,255,0.97); }

/* ── FOOTER ── */
.site-footer { position:relative; background:var(--bg-surface); border-top:1px solid var(--border-color); padding:80px 0 0; overflow:hidden; }
.footer-glow { position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:600px; height:400px; background:radial-gradient(ellipse,rgba(59,130,246,0.08),transparent 70%); pointer-events:none; }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo-img { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(220,80,20,0.4)); }
.brand-desc { color:var(--text-secondary); font-size:0.9rem; line-height:1.7; margin-bottom:20px; }
.col-title { font-family:var(--font-display); font-size:0.95rem; font-weight:700; color:var(--text-primary); margin-bottom:20px; text-transform:uppercase; letter-spacing:0.05em; }
.footer-link { display:block; color:var(--text-secondary); font-size:0.9rem; padding:6px 0; transition:color 300ms ease,padding-left 300ms ease; text-decoration:none; }
.footer-link:hover { color:var(--accent-primary); padding-left:6px; }
.bottom-bar { border-top:1px solid var(--border-color); padding:20px 0; text-align:center; }
.bottom-bar p { font-size:0.8rem; color:var(--text-muted); }
@media (max-width:900px) { .footer-inner { grid-template-columns:1fr 1fr; gap:40px; } }
@media (max-width:600px) { .footer-inner { grid-template-columns:1fr; gap:32px; } }

/* ── COUNTER / STATS ── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; width:100%; }
.counter-item { text-align:center; padding:32px 16px; border-radius:var(--radius-lg); background:var(--bg-card); backdrop-filter:blur(10px); border:1px solid var(--border-color); transition:transform 400ms var(--ease-out-expo),box-shadow 400ms var(--ease-out-expo); }
.counter-item:hover { transform:translateY(-6px); box-shadow:var(--shadow-glow); }
.counter-icon { font-size:2rem; margin-bottom:12px; display:block; }
.counter-label { color:var(--text-secondary); font-size:0.9rem; margin-top:8px; }
@media (max-width:900px) { .stats-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px) { .stats-grid { grid-template-columns:1fr; } }

/* ── PRODUCT CARD ── */
.product-section { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; width:100%; }
.product-section.reverse { direction:rtl; }
.product-section.reverse > * { direction:ltr; }
.product-visual { position:relative; }
.visual-inner { position:relative; border-radius:var(--radius-xl); padding:40px; min-height:380px; display:flex; align-items:center; justify-content:center; overflow:hidden; transform-style:preserve-3d; }
.image-wrap { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; overflow:hidden; }
.image-wrap::after { content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 40px 20px var(--bg-primary),inset 0 0 100px 50px var(--bg-primary); z-index:10; animation:smokyPulse 4s ease-in-out infinite alternate; }
@keyframes smokyPulse { 0% { box-shadow:inset 0 0 30px 10px var(--bg-primary),inset 0 0 80px 40px var(--bg-primary); } 100% { box-shadow:inset 0 0 60px 30px var(--bg-primary),inset 0 0 140px 70px var(--bg-primary); } }
.feature-image { width:100%; height:100%; object-fit:cover; border-radius:inherit; transition:transform 500ms var(--ease-out-expo); }
.visual-inner:hover .feature-image { transform:scale(1.05); }
.product-content { display:flex; flex-direction:column; gap:8px; }
.product-name { font-size:clamp(1.8rem,3vw,2.4rem); color:var(--text-primary); }
.product-tagline { font-size:1.1rem; color:var(--accent-cyan); font-weight:500; }
.product-desc { color:var(--text-secondary); font-size:1rem; line-height:1.8; margin-top:8px; }
.product-features { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.product-features li { display:flex; align-items:center; gap:10px; color:var(--text-secondary); font-size:0.95rem; }
.product-features .feat-icon { color:var(--accent-primary); font-size:0.75rem; }
@media (max-width:900px) { .product-section { grid-template-columns:1fr; gap:32px; } .product-section.reverse { direction:ltr; } .visual-inner { min-height:280px; padding:28px; } }

/* ── TESTIMONIALS ── */
.testimonial-slider { position:relative; max-width:700px; margin:0 auto; min-height:260px; transform-style:preserve-3d; }
.testimonial-slide { position:absolute; inset:0; opacity:0; transform:translateY(20px) scale(0.97); pointer-events:none; background:var(--bg-card); backdrop-filter:blur(16px); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:40px; text-align:center; }
.quote-icon { font-size:3rem; color:var(--accent-primary); opacity:0.3; line-height:1; margin-bottom:8px; font-family:Georgia,serif; }
.quote-text { font-size:1.1rem; color:var(--text-secondary); line-height:1.8; font-style:italic; margin-bottom:24px; }
.testimonial-author { display:flex; align-items:center; gap:14px; justify-content:center; }
.testimonial-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--accent-primary),var(--accent-purple)); display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; color:white; }
.testimonial-name { display:block; color:var(--text-primary); font-size:0.95rem; font-weight:700; }
.testimonial-role { display:block; color:var(--text-muted); font-size:0.8rem; }
.testimonial-dots { display:flex; justify-content:center; gap:10px; margin-top:32px; }
.testimonial-dot { width:10px; height:10px; border-radius:50%; border:none; background:var(--bg-surface-light); cursor:pointer; transition:all 300ms ease; }
.testimonial-dot.active { background:var(--accent-primary); box-shadow:0 0 12px rgba(59,130,246,0.4); transform:scale(1.2); }
@media (max-width:768px) { .testimonial-slider { min-height:300px; } .testimonial-slide { padding:28px 24px; } .quote-text { font-size:1rem; } }

/* ── VIDEO SECTION ── */
.video-section { padding:100px 0; position:relative; overflow:hidden; }
.video-bg-glow { position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(59,130,246,0.05) 0%,transparent 60%),radial-gradient(ellipse at 70% 30%,rgba(220,80,20,0.04) 0%,transparent 50%); pointer-events:none; }
.video-wrapper-3d { position:relative; width:100%; max-width:860px; border-radius:var(--radius-xl); overflow:hidden; border:1px solid rgba(148,163,184,0.12); box-shadow:0 0 0 1px rgba(59,130,246,0.08),0 20px 60px rgba(0,0,0,0.5),0 0 80px rgba(59,130,246,0.06); transition:box-shadow 500ms var(--ease-out-expo); transform-style:preserve-3d; margin:0 auto; }
.frame-corner { position:absolute; width:20px; height:20px; z-index:5; pointer-events:none; }
.frame-corner.tl { top:-2px; left:-2px; border-top:2px solid var(--accent-primary); border-left:2px solid var(--accent-primary); border-top-left-radius:6px; }
.frame-corner.tr { top:-2px; right:-2px; border-top:2px solid var(--accent-cyan); border-right:2px solid var(--accent-cyan); border-top-right-radius:6px; }
.frame-corner.bl { bottom:-2px; left:-2px; border-bottom:2px solid var(--accent-cyan); border-left:2px solid var(--accent-cyan); border-bottom-left-radius:6px; }
.frame-corner.br { bottom:-2px; right:-2px; border-bottom:2px solid var(--accent-primary); border-right:2px solid var(--accent-primary); border-bottom-right-radius:6px; }
.video-thumbnail { position:relative; width:100%; aspect-ratio:16/9; cursor:pointer; overflow:hidden; }
.video-thumbnail img { width:100%; height:100%; object-fit:cover; filter:brightness(0.65); transition:transform 600ms var(--ease-out-expo),filter 600ms ease; }
.video-thumbnail:hover img { transform:scale(1.04); filter:brightness(0.5); }
.video-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
.play-btn { position:relative; width:80px; height:80px; border-radius:50%; border:none; background:rgba(5,8,22,0.6); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 400ms var(--ease-out-expo); z-index:3; box-shadow:0 0 40px rgba(220,80,20,0.3); }
.play-btn:hover { transform:scale(1.12); background:rgba(220,80,20,0.2); }
.play-btn svg { width:36px; height:36px; }
.play-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; border-radius:50%; border:2px solid rgba(220,80,20,0.4); z-index:2; animation:ringPulse 2s ease-out infinite; pointer-events:none; }
@keyframes ringPulse { 0% { width:80px; height:80px; opacity:0.6; } 100% { width:160px; height:160px; opacity:0; } }
.video-iframe-wrap { display:none; position:relative; width:100%; aspect-ratio:16/9; }
.video-iframe-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.video-info { display:flex; align-items:center; gap:24px; margin-top:32px; padding:16px 32px; border-radius:var(--radius-full); background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border-color); justify-content:center; }
.info-item { display:flex; align-items:center; gap:8px; font-size:0.88rem; font-weight:500; color:var(--text-secondary); }
.info-divider { width:1px; height:20px; background:var(--border-color); }
@media (max-width:768px) { .video-info { flex-direction:column; gap:12px; border-radius:var(--radius-lg); padding:20px 24px; } .info-divider { width:40px; height:1px; } }