/* ===== Outvivo B2B — Premium UI v2 ===== */
:root {
  --primary: #0B1120;
  --primary-2: #131C31;
  --primary-3: #1A2540;
  --accent: #3B82F6;
  --accent-2: #60A5FA;
  --accent-glow: rgba(59,130,246,0.4);
  --accent-hover: #2563EB;
  --gold: #F59E0B;
  --gold-hover: #D97706;
  --white: #FFFFFF;
  --bg: #F8FAFC;
  --bg-2: #F1F5F9;
  --bg-3: #E2E8F0;
  --text: #0F172A;
  --text-2: #475569;
  --text-3: #94A3B8;
  --border: #E2E8F0;
  --border-2: #CBD5E1;
  --success: #10B981;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.06);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-blue: 0 4px 14px rgba(59,130,246,0.25);
  --shadow-blue-lg: 0 8px 30px rgba(59,130,246,0.30);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --max-width: 1280px;
  --header-h: 64px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; overflow-x:hidden; }
::selection { background:var(--accent); color:white; }

/* ===== Typography ===== */
h1 { font-size:3.2rem; font-weight:800; line-height:1.1; letter-spacing:-0.03em; }
h2 { font-size:2.4rem; font-weight:800; line-height:1.15; letter-spacing:-0.02em; }
h3 { font-size:1.5rem; font-weight:700; letter-spacing:-0.01em; }
h4 { font-size:1.15rem; font-weight:700; }
h5 { font-size:1rem; font-weight:600; }
p { color:var(--text-2); }
@media(max-width:768px){ h1{font-size:2.2rem;} h2{font-size:1.8rem;} h3{font-size:1.3rem;} }

/* ===== Layout ===== */
.container { max-width:var(--max-width); margin:0 auto; padding:0 24px; }
.section { padding:96px 0; }
.section-alt { background:var(--bg-2); }
.section-dark { background:var(--primary); color:white; }
@media(max-width:768px){ .section{padding:56px 0;} }

/* ===== Header ===== */
.header { position:fixed; top:0; left:0; right:0; background:rgba(11,17,32,0.80); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); z-index:1000; border-bottom:1px solid rgba(255,255,255,0.06); transition:all 0.3s; }
.header.scrolled { background:rgba(11,17,32,0.95); box-shadow:0 4px 30px rgba(0,0,0,0.3); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); max-width:var(--max-width); margin:0 auto; padding:0 24px; }
.logo { display:flex; align-items:center; text-decoration:none; gap:12px; }
.logo-icon { width:38px; height:38px; background:linear-gradient(135deg, var(--accent) 0%, #1D4ED8 100%); border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; font-weight:800; font-size:0.95rem; box-shadow:0 2px 12px var(--accent-glow); position:relative; overflow:hidden; }
.logo-icon::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation:logoShine 3s infinite; }
@keyframes logoShine { 0%{left:-100%;} 50%,100%{left:100%;} }
.logo-img { height:42px; width:auto; display:block; }
.logo-text { color:white; font-size:1.2rem; font-weight:800; letter-spacing:-0.02em; }
.logo-text span { color:var(--accent-2); }

.nav { display:flex; align-items:center; gap:4px; }
.nav a { color:rgba(255,255,255,0.75); text-decoration:none; padding:8px 14px; border-radius:8px; font-size:0.875rem; font-weight:500; transition:all 0.2s; position:relative; }
.nav a:hover { color:white; background:rgba(255,255,255,0.08); }
.nav a.active { color:white; }
.nav a.active::after { content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:20px; height:2px; background:var(--accent); border-radius:1px; }

.lang-switch { display:flex; align-items:center; gap:2px; margin-left:8px; padding:2px; background:rgba(255,255,255,0.06); border-radius:8px; }
.lang-switch button { background:transparent; color:rgba(255,255,255,0.6); border:none; padding:5px 10px; border-radius:6px; cursor:pointer; font-size:0.75rem; font-weight:600; transition:all 0.2s; }
.lang-switch button:hover { color:white; }
.lang-switch button.active { background:var(--accent); color:white; box-shadow:0 2px 8px var(--accent-glow); }

.mobile-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
.mobile-toggle span { width:22px; height:2px; background:white; border-radius:1px; transition:0.3s; }
@media(max-width:900px){
  .mobile-toggle{display:flex;}
  .nav{position:fixed; top:var(--header-h); left:0; right:0; background:rgba(11,17,32,0.98); backdrop-filter:blur(20px); flex-direction:column; padding:16px 24px; gap:4px; display:none; border-bottom:1px solid rgba(255,255,255,0.06); }
  .nav.open{display:flex;}
  .lang-switch{margin-left:0; margin-top:8px; justify-content:center;}
  .nav a.active::after{display:none;}
}

/* ===== Hero ===== */
.hero { background:var(--primary); min-height:92vh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:var(--header-h); }
.hero::before { content:''; position:absolute; inset:0; background:
  radial-gradient(ellipse 80% 50% at 80% 20%, rgba(59,130,246,0.15) 0%, transparent 50%),
  radial-gradient(ellipse 60% 40% at 20% 80%, rgba(245,158,11,0.08) 0%, transparent 50%),
  radial-gradient(ellipse 40% 30% at 50% 50%, rgba(99,102,241,0.06) 0%, transparent 50%);
}
.hero::after { content:''; position:absolute; inset:0; background-image:
  linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size:60px 60px;
}
.hero-content { position:relative; z-index:1; max-width:720px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(59,130,246,0.12); color:var(--accent-2); padding:7px 16px; border-radius:30px; font-size:0.8rem; font-weight:600; margin-bottom:28px; border:1px solid rgba(59,130,246,0.25); }
.hero-badge::before { content:''; width:8px; height:8px; background:var(--accent-2); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.3);} }
.hero h1 { color:white; margin-bottom:24px; }
.hero h1 span { background:linear-gradient(135deg, var(--accent-2) 0%, #818CF8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { color:rgba(255,255,255,0.65); font-size:1.15rem; margin-bottom:36px; max-width:580px; line-height:1.7; }
.hero-buttons { display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:40px; margin-top:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,0.08); }
.hero-stat { }
.hero-stat-num { font-size:2rem; font-weight:800; color:white; }
.hero-stat-num span { color:var(--accent-2); }
.hero-stat-label { color:rgba(255,255,255,0.5); font-size:0.85rem; margin-top:2px; }
@media(max-width:768px){ .hero-stats{gap:24px;} .hero-stat-num{font-size:1.5rem;} }

/* Hero floating cards */
.hero-visual { position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:0; opacity:0.4; }
@media(max-width:1024px){ .hero-visual{display:none;} }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:var(--radius); font-size:0.95rem; font-weight:600; text-decoration:none; cursor:pointer; border:none; transition:all 0.25s; position:relative; overflow:hidden; }
.btn-primary { background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color:white; box-shadow:var(--shadow-blue); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--shadow-blue-lg); }
.btn-primary::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition:left 0.5s; }
.btn-primary:hover::after { left:100%; }
.btn-outline { background:rgba(255,255,255,0.05); color:white; border:1.5px solid rgba(255,255,255,0.2); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent-2); background:rgba(59,130,246,0.08); }
.btn-gold { background:linear-gradient(135deg, var(--gold) 0%, var(--gold-hover) 100%); color:var(--primary); box-shadow:0 4px 14px rgba(245,158,11,0.3); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,158,11,0.4); }

/* ===== Section Headers ===== */
.section-title { text-align:center; margin-bottom:8px; }
.section-subtitle { text-align:center; color:var(--text-2); max-width:600px; margin:0 auto 48px; font-size:1.05rem; }
.divider { width:48px; height:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); margin:12px auto 0; border-radius:2px; }

/* ===== Category Cards ===== */
.cat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:48px; }
@media(max-width:768px){ .cat-grid{grid-template-columns:1fr;} }
.cat-card { background:white; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transition:all 0.35s cubic-bezier(0.4,0,0.2,1); text-decoration:none; color:var(--text); border:1px solid var(--border); position:relative; }
.cat-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); border-color:var(--accent); }
.cat-card-img { height:200px; display:flex; align-items:center; justify-content:center; font-size:3.5rem; position:relative; overflow:hidden; transition:all 0.35s; }
.cat-card:hover .cat-card-img { font-size:4rem; }
.cat-card-img.glasses { background:linear-gradient(135deg, #1E3A5F 0%, #2D5A87 100%); }
.cat-card-img.earphones { background:linear-gradient(135deg, #3B0764 0%, #6B21A8 100%); }
.cat-card-img.watches { background:linear-gradient(135deg, #064E3B 0%, #047857 100%); }
.cat-card-img::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 70%); }
.cat-card-body { padding:24px; }
.cat-card-body h3 { margin-bottom:8px; }
.cat-card-body p { font-size:0.925rem; margin-bottom:16px; line-height:1.5; }
.cat-card-count { display:inline-flex; align-items:center; gap:4px; background:var(--bg-2); color:var(--accent); padding:4px 12px; border-radius:20px; font-size:0.78rem; font-weight:700; }
.cat-card-arrow { position:absolute; bottom:24px; right:24px; width:32px; height:32px; background:var(--bg-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.3s; opacity:0; }
.cat-card:hover .cat-card-arrow { opacity:1; background:var(--accent); color:white; transform:translateX(0); }

/* ===== Product Cards ===== */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:20px; margin-top:24px; }
.product-card { background:white; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); }
.product-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:var(--border-2); }
.product-card-placeholder { height:180px; display:flex; align-items:center; justify-content:center; font-size:3rem; position:relative; overflow:hidden; transition:all 0.3s; }
.product-card-placeholder.glass { background:linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%); }
.product-card-placeholder.ear { background:linear-gradient(135deg, #F3E8FF 0%, #DDD6FE 100%); }
.product-card-placeholder.watch { background:linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); }
.product-card-placeholder::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, rgba(255,255,255,0.5) 0%, transparent 60%); }
.product-card:hover .product-card-placeholder { transform:scale(1.02); }
.product-card-body { padding:20px; }
.product-model { font-size:0.8rem; color:var(--accent); font-weight:700; margin-bottom:4px; letter-spacing:0.02em; text-transform:uppercase; }
.product-card-body h4 { margin-bottom:10px; font-size:1.05rem; }
.product-specs { font-size:0.85rem; margin-bottom:12px; }
.product-specs span { display:inline-block; background:var(--bg-2); color:var(--text-2); padding:3px 10px; border-radius:6px; margin:2px; font-size:0.78rem; font-weight:500; }
.product-colors { display:flex; gap:6px; margin-top:8px; }
.color-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--border); }

/* ===== Spec Tables ===== */
.spec-table { width:100%; border-collapse:separate; border-spacing:0; margin:24px 0; font-size:0.9rem; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.spec-table th { background:var(--primary); color:white; padding:14px 18px; text-align:left; font-weight:600; font-size:0.875rem; letter-spacing:0.02em; }
.spec-table td { padding:13px 18px; border-bottom:1px solid var(--border); background:white; }
.spec-table tr:nth-child(even) td { background:var(--bg); }
.spec-table tr:hover td { background:#EFF6FF; }
.spec-table tr:last-child td { border-bottom:none; }

/* ===== About ===== */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media(max-width:768px){ .about-grid{grid-template-columns:1fr; gap:32px;} }
.about-img { border-radius:var(--radius-xl); height:420px; display:flex; align-items:center; justify-content:center; color:var(--text-3); font-size:4rem; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); }
.about-img::before { content:''; position:absolute; inset:0; background:
  radial-gradient(ellipse 60% 40% at 30% 30%, rgba(59,130,246,0.15) 0%, transparent 60%),
  radial-gradient(ellipse 40% 30% at 70% 70%, rgba(245,158,11,0.08) 0%, transparent 60%);
}
.about-img::after { content:''; position:absolute; inset:0; background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:40px 40px;
}
.about-text h2 { margin-bottom:16px; }
.about-text p { margin-bottom:16px; line-height:1.75; }

/* ===== Stats ===== */
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
@media(max-width:768px){ .stats{grid-template-columns:repeat(2,1fr);} }
.stat-item { text-align:center; padding:28px 16px; background:white; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:all 0.3s; }
.stat-item:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--accent); }
.stat-num { font-size:2.5rem; font-weight:800; background:linear-gradient(135deg, var(--accent) 0%, #6366F1 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { color:var(--text-2); font-size:0.9rem; margin-top:4px; }

/* ===== Certs ===== */
.cert-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }
.cert-badge { background:white; border:1px solid var(--border); padding:10px 20px; border-radius:var(--radius); font-weight:700; color:var(--text); font-size:0.9rem; display:flex; align-items:center; gap:8px; transition:all 0.25s; box-shadow:var(--shadow-sm); }
.cert-badge:hover { border-color:var(--success); box-shadow:0 4px 12px rgba(16,185,129,0.15); transform:translateY(-2px); }
.cert-badge::before { content:'✓'; color:var(--success); font-size:1rem; }

/* ===== Contact ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media(max-width:768px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info h3 { margin-bottom:24px; }
.contact-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; }
.contact-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; background:linear-gradient(135deg, var(--bg-2), var(--bg-3)); }
.contact-icon.phone { background:linear-gradient(135deg, #DCFCE7, #BBF7D0); }
.contact-icon.email { background:linear-gradient(135deg, #DBEAFE, #BFDBFE); }
.contact-icon.addr { background:linear-gradient(135deg, #FEF3C7, #FDE68A); }
.contact-icon.web { background:linear-gradient(135deg, #E0E7FF, #C7D2FE); }
.contact-item strong { display:block; margin-bottom:2px; font-size:0.95rem; }
.contact-item span, .contact-item a { color:var(--text-2); font-size:0.9rem; text-decoration:none; }
.contact-item a:hover { color:var(--accent); }

.contact-form { background:white; padding:36px; border-radius:var(--radius-xl); box-shadow:var(--shadow-md); border:1px solid var(--border); }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-weight:600; margin-bottom:6px; font-size:0.85rem; color:var(--text); }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font); font-size:0.925rem; transition:all 0.2s; background:var(--bg); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--accent); background:white; box-shadow:0 0 0 3px var(--accent-glow); }
.form-group textarea { min-height:120px; resize:vertical; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:480px){ .form-row{grid-template-columns:1fr;} }

/* ===== Footer ===== */
.footer { background:var(--primary); color:rgba(255,255,255,0.6); padding:64px 0 28px; position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
@media(max-width:768px){ .footer-grid{grid-template-columns:1fr 1fr; gap:32px;} }
@media(max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand h3 { color:white; margin-bottom:12px; font-size:1.3rem; }
.footer-brand p { font-size:0.875rem; line-height:1.7; color:rgba(255,255,255,0.5); }
.footer-col h4 { color:white; margin-bottom:16px; font-size:0.95rem; font-weight:600; }
.footer-col a { display:block; color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.875rem; margin-bottom:10px; transition:color 0.2s; }
.footer-col a:hover { color:var(--accent-2); }
.footer-col span { display:block; color:rgba(255,255,255,0.5); font-size:0.875rem; margin-bottom:10px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:0.825rem; color:rgba(255,255,255,0.35); }

/* ===== Page Header ===== */
.page-header { background:var(--primary); padding:140px 0 64px; text-align:center; color:white; position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; inset:0; background:
  radial-gradient(ellipse 60% 40% at 50% 0%, rgba(59,130,246,0.12) 0%, transparent 60%);
}
.page-header::after { content:''; position:absolute; inset:0; background-image:
  linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:50px 50px;
}
.page-header > .container { position:relative; z-index:1; }
.page-header h1 { margin-bottom:12px; }
.page-header p { color:rgba(255,255,255,0.6); max-width:600px; margin:0 auto; font-size:1.05rem; }
.breadcrumb { color:rgba(255,255,255,0.4); font-size:0.85rem; margin-bottom:12px; }
.breadcrumb a { color:rgba(255,255,255,0.6); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--accent-2); }

/* ===== Tabs ===== */
.tabs { display:flex; gap:4px; margin:32px 0; border-bottom:2px solid var(--border); flex-wrap:wrap; padding-bottom:0; }
.tab-btn { padding:10px 20px; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; font-size:0.9rem; font-weight:600; color:var(--text-3); transition:all 0.2s; border-radius:8px 8px 0 0; }
.tab-btn:hover { color:var(--text); background:var(--bg-2); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ===== Filter Bar ===== */
.filter-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:16px 0; }
.filter-bar input { padding:10px 16px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:0.875rem; min-width:260px; font-family:var(--font); background:white; transition:all 0.2s; }
.filter-bar input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.filter-bar select { padding:10px 16px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:0.875rem; background:white; font-family:var(--font); cursor:pointer; transition:all 0.2s; }
.filter-bar select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }

/* ===== Inquiry Modal ===== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(11,17,32,0.7); backdrop-filter:blur(4px); z-index:2000; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.modal { background:white; border-radius:var(--radius-xl); padding:36px; max-width:580px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-xl); animation:slideUp 0.3s ease; }
@keyframes slideUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.modal h3 { margin-bottom:20px; }
.modal-close { float:right; background:var(--bg-2); border:none; width:32px; height:32px; border-radius:50%; font-size:1.2rem; cursor:pointer; color:var(--text-2); transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--bg-3); color:var(--text); }

/* ===== Utilities ===== */
.text-center { text-align:center; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mt-32 { margin-top:32px; }
.mt-48 { margin-top:48px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }

/* ===== Tags ===== */
.tag { display:inline-block; padding:3px 10px; border-radius:6px; font-size:0.75rem; font-weight:600; margin:2px; }
.tag-blue { background:#EFF6FF; color:#1D4ED8; }
.tag-green { background:#ECFDF5; color:#059669; }
.tag-amber { background:#FFFBEB; color:#D97706; }

/* ===== WhatsApp Float ===== */
.whatsapp-float { position:fixed; bottom:28px; right:28px; z-index:999; }
.whatsapp-float a { display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:#25D366; border-radius:50%; box-shadow:0 4px 20px rgba(37,211,102,0.4); color:white; font-size:1.6rem; text-decoration:none; transition:all 0.3s; position:relative; }
.whatsapp-float a:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.5); }
.whatsapp-float a::before { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:ripple 2s infinite; }
@keyframes ripple { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(1.5);opacity:0;} }

/* ===== Animations ===== */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to { opacity:1; transform:translateY(0); }
}
.animate { animation:fadeUp 0.6s cubic-bezier(0.4,0,0.2,1) forwards; }

/* ===== CTA Section ===== */
.cta-section { background:linear-gradient(135deg, var(--accent) 0%, #1D4ED8 100%); color:white; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:
  radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 50%),
  radial-gradient(ellipse 40% 30% at 70% 70%, rgba(255,255,255,0.05) 0%, transparent 50%);
}
.cta-section > .container { position:relative; z-index:1; }
.cta-section h2 { color:white; }
.cta-section p { color:rgba(255,255,255,0.85); }

/* ===== Product Detail ===== */
.detail-header { background:var(--bg-2); padding:60px 0; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media(max-width:768px){ .detail-grid{grid-template-columns:1fr;} }
.detail-image { background:white; border-radius:var(--radius-lg); height:360px; display:flex; align-items:center; justify-content:center; font-size:5rem; color:var(--text-3); border:1px solid var(--border); }
.detail-info h2 { margin-bottom:8px; }
.detail-model { color:var(--accent); font-weight:600; margin-bottom:16px; }
.detail-desc { color:var(--text-2); line-height:1.8; margin-bottom:24px; }

/* ===== Skeleton ===== */
.skeleton { background:linear-gradient(90deg, var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:var(--bg-3); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }