/* ================================================================ MPBox Landing — Design System Dark/light theme via [data-theme="dark"] on ================================================================ */ /* ---------- CSS Custom Properties ---------- */ :root { --primary: #0055FF; --primary-light: #3B82F6; --primary-50: #EFF6FF; --primary-100: #DBEAFE; --primary-900: #1E3A8A; --cta: #FF6B00; --cta-end: #FF8534; --success: #10B981; --warning: #F59E0B; --error: #EF4444; --info: #3B82F6; /* Light (default) */ --bg: #FFFFFF; --bg-subtle: #F8FAFC; --bg-card: #FFFFFF; --bg-card-hover: #F1F5F9; --surface-50: #F8FAFC; --surface-100: #F1F5F9; --surface-200: #E2E8F0; --surface-300: #CBD5E1; --surface-400: #94A3B8; --surface-500: #64748B; --surface-600: #475569; --surface-700: #334155; --surface-800: #1E293B; --surface-900: #0F172A; --text: #0F172A; --text-secondary: #475569; --text-muted: #94A3B8; --border: #E2E8F0; --border-light: #F1F5F9; --shadow-sm: rgba(0,0,0,0.06); --shadow-md: rgba(0,0,0,0.1); --shadow-lg: rgba(0,0,0,0.14); --glass-bg: rgba(255,255,255,0.72); --glass-border: rgba(226,232,240,0.8); --hero-gradient: linear-gradient(135deg,#EFF6FF 0%,#FFF 50%,#F0F4FF 100%); --mockup-bg: #F8FAFC; --mockup-titlebar: #F1F5F9; } [data-theme="dark"] { --bg: #0B1120; --bg-subtle: #111827; --bg-card: #1E293B; --bg-card-hover: #334155; --surface-50: #111827; --surface-100: #1E293B; --surface-200: #334155; --surface-300: #475569; --surface-400: #64748B; --surface-500: #94A3B8; --surface-600: #CBD5E1; --surface-700: #E2E8F0; --surface-800: #F1F5F9; --surface-900: #F8FAFC; --text: #F8FAFC; --text-secondary: #CBD5E1; --text-muted: #64748B; --border: #334155; --border-light: #1E293B; --shadow-sm: rgba(0,0,0,0.2); --shadow-md: rgba(0,0,0,0.3); --shadow-lg: rgba(0,0,0,0.4); --glass-bg: rgba(30,41,59,0.72); --glass-border: rgba(51,65,85,0.8); --hero-gradient: linear-gradient(135deg,#0B1120 0%,#111827 50%,#0F172A 100%); --mockup-bg: #111827; --mockup-titlebar: #1E293B; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:background .3s,color .3s} a{color:var(--primary);text-decoration:none} img{max-width:100%;display:block} button{cursor:pointer;border:none;background:none;font:inherit;color:inherit} ul,ol{list-style:none} /* ---------- Typography ---------- */ h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;line-height:1.2;color:var(--text)} /* ---------- Container ---------- */ .container{max-width:1200px;margin:0 auto;padding:0 20px} @media(min-width:768px){.container{padding:0 32px}} /* ---------- Header ---------- */ .header{position:sticky;top:0;z-index:100;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);transition:background .3s} .header-inner{display:flex;align-items:center;justify-content:space-between;height:64px} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);flex-shrink:0} .logo-icon{width:36px;height:36px;flex-shrink:0} .logo-text{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:1.25rem} .logo-ai{background:linear-gradient(135deg,var(--primary),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .nav{display:flex;align-items:center;gap:6px} .nav-links{display:none;align-items:center;gap:4px} @media(min-width:768px){.nav-links{display:flex}} .nav-link{padding:8px 14px;font-size:.875rem;font-weight:500;color:var(--text-secondary);border-radius:10px;transition:color .2s,background .2s;white-space:nowrap} .nav-link:hover{color:var(--text);background:var(--surface-100)} .theme-toggle,.lang-toggle{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:background .2s,color .2s;flex-shrink:0} .theme-toggle:hover,.lang-toggle:hover{background:var(--surface-100);color:var(--text)} .lang-toggle{width:auto;padding:0 10px;font-size:.8rem;font-weight:600} .nav-cta{display:none;align-items:center;padding:8px 18px;font-size:.875rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--cta),var(--cta-end));border-radius:10px;transition:transform .15s,box-shadow .2s;box-shadow:0 4px 12px rgba(255,107,0,.25);white-space:nowrap} @media(min-width:768px){.nav-cta{display:inline-flex}} .nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,107,0,.35);color:#fff} .nav-cta:active{transform:scale(.98)} /* Hamburger */ .nav-toggle{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:8px;flex-shrink:0} .nav-toggle span{display:block;width:20px;height:2px;background:var(--text-secondary);border-radius:2px;transition:transform .3s,opacity .3s} .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.active span:nth-child(2){opacity:0} .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(min-width:768px){.nav-toggle{display:none}} /* Mobile menu */ .mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--bg);z-index:99;padding:24px 20px;flex-direction:column;gap:8px;animation:slideDown .25s ease-out} .mobile-menu.active{display:flex} .mobile-menu .nav-link{display:block;padding:14px 16px;font-size:1rem;border-radius:12px} .mobile-menu .nav-cta{display:block;text-align:center;padding:14px;margin-top:8px;font-size:1rem;border-radius:12px} @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} /* ---------- Buttons ---------- */ .btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;font-size:1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--cta),var(--cta-end));border-radius:14px;transition:transform .15s,box-shadow .2s;box-shadow:0 8px 24px rgba(255,107,0,.25)} .btn-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,107,0,.35);color:#fff} .btn-cta:active{transform:scale(.98)} .btn-cta-lg{padding:18px 40px;font-size:1.125rem;border-radius:16px} @media(max-width:767px){.btn-cta{width:100%;max-width:340px;padding:16px 24px}} .btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:.875rem;font-weight:600;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:12px;transition:background .2s,border-color .2s} .btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--surface-300)} /* ---------- Section ---------- */ .section{padding:80px 0} @media(max-width:767px){.section{padding:48px 0}} .section-header{text-align:center;max-width:700px;margin:0 auto 48px} .section-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:.8rem;font-weight:600;border-radius:100px;margin-bottom:16px} .badge-green{background:rgba(16,185,129,.1);color:var(--success)} .badge-blue{background:rgba(0,85,255,.1);color:var(--primary)} .badge-orange{background:rgba(255,107,0,.1);color:var(--cta)} .section-title{font-size:1.6rem;margin-bottom:12px} @media(min-width:768px){.section-title{font-size:2.5rem}} .section-subtitle{font-size:.95rem;color:var(--text-secondary);line-height:1.7} @media(min-width:768px){.section-subtitle{font-size:1.05rem}} /* ---------- Hero ---------- */ .hero{padding:80px 0 60px;background:var(--hero-gradient);text-align:center;position:relative;overflow:hidden} @media(max-width:767px){.hero{padding:40px 0 32px}} .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:rgba(16,185,129,.1);color:var(--success);font-size:.875rem;font-weight:600;border-radius:100px;margin-bottom:20px} .hero-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} @media(prefers-reduced-motion:reduce){.hero-badge .pulse{animation:none}} .hero h1{font-size:2.25rem;max-width:800px;margin:0 auto 16px;letter-spacing:-.02em} @media(max-width:767px){.hero h1{font-size:1.75rem;padding:0 4px}} @media(min-width:768px){.hero h1{font-size:3rem}} @media(min-width:1024px){.hero h1{font-size:3.5rem}} .gradient-text{background:linear-gradient(135deg,var(--primary),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-subtitle{font-size:1.1rem;color:var(--text-secondary);max-width:640px;margin:0 auto 28px;line-height:1.7} @media(max-width:767px){.hero-subtitle{font-size:.95rem;padding:0 4px}} .hero-trust{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:28px} @media(min-width:768px){.hero-trust{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:24px}} .trust-item{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--text-secondary)} .trust-item svg{color:var(--primary);flex-shrink:0} .hero-cta{margin-bottom:12px} .hero-note{font-size:.8rem;color:var(--text-muted)} .feature-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px;padding:0 4px} .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:.72rem;font-weight:600;border-radius:100px} @media(min-width:768px){.pill{padding:6px 14px;font-size:.75rem}} .pill-blue{background:rgba(0,85,255,.08);color:var(--primary)} .pill-red{background:rgba(239,68,68,.08);color:var(--error)} .pill-green{background:rgba(16,185,129,.08);color:var(--success)} .pill-amber{background:rgba(245,158,11,.08);color:var(--warning)} .pill-info{background:rgba(59,130,246,.08);color:var(--info)} .pill-purple{background:rgba(139,92,246,.08);color:#8B5CF6} /* ---------- Dashboard Mockup ---------- */ .mockup-section{padding:0 0 60px;margin-top:-20px;position:relative;z-index:1} .browser-frame{max-width:960px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 48px var(--shadow-lg),0 0 0 1px var(--border-light);background:var(--mockup-bg)} .browser-titlebar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--mockup-titlebar);border-bottom:1px solid var(--border)} .browser-dots{display:flex;gap:6px} .browser-dots span{width:10px;height:10px;border-radius:50%} .browser-dots span:nth-child(1){background:#FF5F57} .browser-dots span:nth-child(2){background:#FFBD2E} .browser-dots span:nth-child(3){background:#27C840} .browser-url{flex:1;margin-left:8px;padding:5px 12px;font-size:.75rem;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);border-radius:6px} .browser-content{padding:24px} .mockup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} @media(max-width:640px){.mockup-grid{grid-template-columns:repeat(2,1fr)}} .mockup-stat{padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card)} .mockup-stat-label{font-size:.7rem;color:var(--text-muted);margin-bottom:4px;font-weight:500} .mockup-stat-value{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:1.05rem;font-weight:800} @media(min-width:768px){.mockup-stat-value{font-size:1.25rem}} .mockup-stat-change{font-size:.7rem;font-weight:600;margin-top:2px} .color-success{color:var(--success)} .color-error{color:var(--error)} .color-warning{color:var(--warning)} .color-primary{color:var(--primary)} .mockup-chart{height:80px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;align-items:flex-end;gap:4px} .chart-bar{flex:1;border-radius:4px 4px 0 0;min-height:8px;transition:height .5s ease} /* ---------- Feature Cards ---------- */ .features-grid{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:640px){.features-grid{grid-template-columns:repeat(2,1fr)}} .feature-card{padding:24px;border-radius:16px;background:var(--bg-card);border:1px solid var(--border);transition:transform .2s,box-shadow .2s} .feature-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-sm)} .feature-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .feature-icon svg{width:22px;height:22px} .icon-blue{background:rgba(0,85,255,.1);color:var(--primary)} .icon-red{background:rgba(239,68,68,.1);color:var(--error)} .icon-green{background:rgba(16,185,129,.1);color:var(--success)} .icon-amber{background:rgba(245,158,11,.1);color:var(--warning)} .icon-info{background:rgba(59,130,246,.1);color:var(--info)} .icon-purple{background:rgba(139,92,246,.1);color:#8B5CF6} .feature-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px} .feature-card p{font-size:.875rem;color:var(--text-secondary);line-height:1.6} .feature-mini{margin-top:16px;padding:12px;border-radius:10px;background:var(--surface-50);border:1px solid var(--border-light);font-size:.8rem} .feature-mini-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0} .feature-mini-row + .feature-mini-row{border-top:1px solid var(--border-light);margin-top:4px;padding-top:8px} .mini-label{color:var(--text-muted);font-size:.75rem} .mini-value{font-weight:700;font-size:.85rem} /* ---------- Autopilot ---------- */ .autopilot-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px} @media(max-width:640px){.autopilot-channels{grid-template-columns:1fr}} .channel-card{padding:20px;border-radius:14px;background:var(--bg-card);border:1px solid var(--border);text-align:center;transition:transform .2s} .channel-card:hover{transform:translateY(-2px)} .channel-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.5rem;background:rgba(0,85,255,.08)} .channel-card h3{font-size:.95rem;margin-bottom:4px} .channel-card p{font-size:.8rem;color:var(--text-secondary)} .rag-block{padding:24px;border-radius:16px;border:2px solid rgba(0,85,255,.2);background:rgba(0,85,255,.03)} [data-theme="dark"] .rag-block{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.05)} .rag-block h3{font-size:1.1rem;margin-bottom:8px} .rag-block p{font-size:.875rem;color:var(--text-secondary);line-height:1.7;margin-bottom:16px} .rag-demo{padding:14px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border)} .rag-demo-title{font-size:.8rem;font-weight:700;color:var(--primary);margin-bottom:6px;display:flex;align-items:center;gap:6px} .rag-demo-text{font-size:.8rem;color:var(--text-muted);font-style:italic} /* ---------- Security ---------- */ .security-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(min-width:768px){.security-grid{grid-template-columns:repeat(4,1fr);gap:12px}} .security-card{padding:20px;border-radius:14px;background:var(--bg-card);border:1px solid var(--border);text-align:center;transition:transform .2s} .security-card:hover{transform:translateY(-2px)} .security-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.3rem} .security-card h3{font-size:.9rem;font-weight:700;margin-bottom:4px} .security-card p{font-size:.75rem;color:var(--text-secondary)} /* ---------- Pricing ---------- */ .pricing-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:1100px;margin:0 auto} @media(min-width:640px){.pricing-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.pricing-grid{grid-template-columns:repeat(5,1fr)}} .plan-card{position:relative;padding:24px;border-radius:16px;background:var(--bg-card);border:1px solid var(--border);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s} .plan-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-sm)} .plan-card.highlighted{border:2px solid var(--primary);background:var(--primary-50)} [data-theme="dark"] .plan-card.highlighted{background:rgba(0,85,255,.05);border-color:var(--primary)} .plan-popular{position:absolute;top:-12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;padding:4px 14px;font-size:.7rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--cta),#F59E0B);border-radius:100px;white-space:nowrap} .plan-name{font-size:1.1rem;font-weight:800;margin-bottom:8px} .plan-price{font-family:'Plus Jakarta Sans','Inter',sans-serif;margin-bottom:16px} .plan-price .amount{font-size:1.75rem;font-weight:800} .plan-price .period{font-size:.85rem;color:var(--text-muted)} .plan-divider{border:none;border-top:1px solid var(--border);margin-bottom:16px} .plan-features{flex:1} .plan-feature{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:.8rem;color:var(--text-secondary)} .plan-feature svg{width:16px;height:16px;color:var(--success);flex-shrink:0;margin-top:1px} .plan-features-hidden{display:none} .plan-features-hidden.expanded{display:block} .plan-expand{display:flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;color:var(--primary);margin-top:8px;padding:4px 0;transition:color .2s} .plan-expand:hover{color:var(--primary-light)} .plan-expand svg{width:14px;height:14px;transition:transform .2s} .plan-expand.expanded svg{transform:rotate(180deg)} .pricing-cta{text-align:center;margin-top:40px} .pricing-note{text-align:center;font-size:.8rem;color:var(--text-muted);margin-top:12px} /* ---------- FAQ ---------- */ .faq-list{max-width:720px;margin:0 auto} .faq-item{border-bottom:1px solid var(--border)} .faq-question{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:20px 0;font-size:.95rem;font-weight:600;text-align:left;color:var(--text);transition:color .2s} .faq-question:hover{color:var(--primary)} .faq-question svg{width:20px;height:20px;flex-shrink:0;color:var(--text-muted);transition:transform .25s} .faq-question.active svg{transform:rotate(180deg)} .faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease} .faq-answer.active{max-height:300px;padding-bottom:20px} .faq-answer p{font-size:.875rem;color:var(--text-secondary);line-height:1.7} /* ---------- Social Proof ---------- */ .proof-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:40px 0;max-width:600px;margin:0 auto} @media(min-width:768px){.proof-stats{grid-template-columns:repeat(4,1fr);max-width:none}} .proof-stat{text-align:center} .proof-stat-value{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} @media(min-width:768px){.proof-stat-value{font-size:2rem}} .proof-stat-label{font-size:.8rem;color:var(--text-secondary);margin-top:4px} /* ---------- Final CTA ---------- */ .final-cta{text-align:center;padding:80px 0} @media(max-width:767px){.final-cta{padding:48px 0}} .final-cta h2{font-size:1.6rem;margin-bottom:12px} @media(min-width:768px){.final-cta h2{font-size:2.5rem}} .final-cta p{font-size:1rem;color:var(--text-secondary);max-width:520px;margin:0 auto 32px} @media(max-width:767px){.final-cta p{font-size:.9rem;padding:0 4px}} /* ---------- Founder ---------- */ .founder-section{padding:40px 0;text-align:center} .founder-card{display:inline-flex;align-items:center;gap:16px;padding:16px 28px;border-radius:16px;background:var(--bg-card);border:1px solid var(--border);text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s} .founder-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-sm);color:var(--text)} .founder-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.1rem} .founder-info{text-align:left} .founder-name{font-weight:700;font-size:.95rem} .founder-role{font-size:.8rem;color:var(--text-secondary)} /* ---------- Footer ---------- */ .footer{border-top:1px solid var(--border);padding:32px 0} .footer-inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center} @media(min-width:768px){.footer-inner{flex-direction:row;justify-content:space-between;text-align:left}} .footer-brand{display:flex;align-items:center;gap:8px} .footer-brand svg{width:28px;height:28px;flex-shrink:0} .footer-text{font-size:.85rem;color:var(--text-secondary)} .footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} @media(min-width:768px){.footer-links{gap:16px}} .footer-link{font-size:.78rem;color:var(--text-muted);transition:color .2s} .footer-link:hover{color:var(--primary)} .footer-copy{font-size:.75rem;color:var(--text-muted)} /* ---------- Legal Pages ---------- */ .legal-page{padding-top:40px} .legal-content{max-width:800px;margin:0 auto;padding:32px;border-radius:16px;background:var(--bg-card);border:1px solid var(--border)} @media(max-width:640px){.legal-content{padding:20px}} .legal-title{font-size:1.5rem;margin-bottom:8px} .legal-updated{font-size:.8rem;color:var(--text-muted);margin-bottom:24px} .legal-text h2{font-size:1.1rem;margin-top:28px;margin-bottom:12px} .legal-text p{font-size:.9rem;color:var(--text-secondary);line-height:1.7;margin-bottom:8px} .legal-text ul,.legal-text ol{padding-left:20px;margin-bottom:12px} .legal-text ul{list-style:disc} .legal-text ol{list-style:decimal} .legal-text li{font-size:.9rem;color:var(--text-secondary);line-height:1.7;margin-bottom:4px} .legal-text a{color:var(--primary)} .legal-text a:hover{text-decoration:underline} .legal-text strong{color:var(--text)} .legal-back{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:.875rem;font-weight:600;color:var(--text-secondary);transition:color .2s} .legal-back:hover{color:var(--primary)} /* Contacts */ .contacts-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:600px;margin:0 auto 32px} @media(min-width:640px){.contacts-grid{grid-template-columns:repeat(2,1fr)}} .contact-card{display:flex;flex-direction:column;align-items:center;padding:28px;border-radius:16px;background:var(--bg-card);border:1px solid var(--border);text-align:center;text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s} .contact-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-sm);color:var(--text)} .contact-icon{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .contact-icon-telegram{background:rgba(0,136,204,.1);color:#0088CC} .contact-icon-email{background:rgba(0,85,255,.1);color:var(--primary)} .contact-title{font-size:1rem;font-weight:700;margin-bottom:4px} .contact-value{font-size:.9rem;color:var(--primary);margin-bottom:4px} .contact-desc{font-size:.8rem;color:var(--text-muted)} .company-info{max-width:600px;margin:0 auto 32px;padding:24px;border-radius:16px;background:var(--bg-card);border:1px solid var(--border);text-align:center} .company-title{font-size:1.1rem;margin-bottom:12px} .company-details p{font-size:.9rem;color:var(--text-secondary);margin-bottom:4px} .contacts-cta{text-align:center} /* ---------- Animations ---------- */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .reveal.visible{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} .stagger-1{transition-delay:.05s} .stagger-2{transition-delay:.1s} .stagger-3{transition-delay:.15s} .stagger-4{transition-delay:.2s} /* ---------- i18n ---------- */ [data-lang="en"] [data-i18n-ru], [data-lang="ru"] [data-i18n-en]{display:none !important} /* Misc */ .divider{border:none;border-top:1px solid var(--border);margin:0} .section-cta{text-align:center;padding:32px 0} ::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--surface-300);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:var(--surface-400)}