/* =============================================================
   AI INFRA — Site Stylesheet v2
   Aesthetic: Deep navy (not pitch black), vibrant emerald accents,
   clean cards, sophisticated depth. Lighter & more premium.
   Fonts: Syne (display) + DM Sans (body)
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #0a0f1e;
    --bg2:         #0f1629;
    --surface:     #141d35;
    --surface2:    #1a2540;
    --border:      rgba(148,163,184,.12);
    --border2:     rgba(148,163,184,.22);
    --text:        #f1f5f9;
    --text2:       #94a3b8;
    --text3:       #64748b;
    --green:       #10b981;
    --green-light: #34d399;
    --green-glow:  rgba(16,185,129,.35);
    --green-dim:   rgba(16,185,129,.1);
    --blue:        #3b82f6;
    --amber:       #f59e0b;
    --red:         #ef4444;
    --radius:      10px;
    --radius-lg:   16px;
    --nav-h:       68px;
    --max-w:       1200px;
    --font-display:'Syne', sans-serif;
    --font-body:   'DM Sans', sans-serif;
    --grad-hero:   linear-gradient(135deg,rgba(10,15,30,.95) 0%,rgba(15,22,41,.88) 60%,rgba(10,15,30,.75) 100%);
}

html { scroll-behavior: smooth; }
body { font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:15px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.container { width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px; }
section { padding:90px 0; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:-.02em; }
h1 { font-size:clamp(36px,5vw,64px); }
h2 { font-size:clamp(28px,3.5vw,44px); }
h3 { font-size:clamp(20px,2.5vw,28px); }
p  { color:var(--text2); }
a  { text-decoration:none;color:inherit; }
.section-label { display:inline-block;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-light);background:var(--green-dim);border:1px solid rgba(16,185,129,.25);padding:4px 14px;border-radius:20px;margin-bottom:16px; }
.section-title { color:var(--text);margin-bottom:12px; }
.section-sub   { color:var(--text2);font-size:16px;max-width:560px; }
.section-head  { text-align:center;margin-bottom:56px; }
.section-head .section-sub { margin:0 auto; }
.text-green { color:var(--green); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn { display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:8px;font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s;white-space:nowrap; }
.btn-primary  { background:var(--green);color:#fff; }
.btn-primary:hover { background:#059669;transform:translateY(-1px);box-shadow:0 8px 28px var(--green-glow); }
.btn-outline  { background:rgba(255,255,255,.06);color:var(--text);border:1.5px solid var(--border2); }
.btn-outline:hover { border-color:var(--green);color:var(--green-light);background:var(--green-dim); }
.btn-ghost    { background:transparent;color:var(--text2); }
.btn-ghost:hover { color:var(--text); }
.btn-lg { padding:14px 32px;font-size:15px; }

/* ── NAVIGATION ──────────────────────────────────────────── */
.site-header { position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(10,15,30,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:background .3s; }
.site-header.scrolled { background:rgba(10,15,30,.97);box-shadow:0 4px 32px rgba(0,0,0,.5); }
.nav-inner { display:flex;align-items:center;gap:8px;max-width:var(--max-w);margin:0 auto;padding:0 24px;height:var(--nav-h); }
.nav-logo,.footer-logo { font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.02em;margin-right:32px;flex-shrink:0;color:var(--text); }
.logo-ai   { color:var(--text); }
.logo-sep  { color:var(--green);opacity:.7;font-weight:400; }
.logo-infra{ color:var(--green-light); }
.nav-links { display:flex;align-items:center;list-style:none;gap:2px;flex:1; }
.nav-link,.nav-btn { display:flex;align-items:center;gap:4px;padding:6px 13px;border-radius:6px;font-size:14px;font-weight:500;color:var(--text2);background:none;border:none;cursor:pointer;transition:color .15s,background .15s;white-space:nowrap; }
.nav-link:hover,.nav-btn:hover { color:var(--text);background:rgba(255,255,255,.07); }
.nav-link.active,.nav-btn.active { color:var(--green-light); }
.nav-btn i { font-size:13px;transition:transform .2s; }
.has-dropdown { position:relative; }
.has-dropdown:hover .nav-btn i { transform:rotate(180deg); }
.dropdown { position:absolute;top:calc(100% + 8px);left:0;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);box-shadow:0 24px 64px rgba(0,0,0,.7);min-width:220px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:all .2s;z-index:200; }
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown { opacity:1;visibility:visible;pointer-events:all;transform:none; }
.gpu-dropdown { min-width:460px; }
.dropdown-inner { display:flex;padding:8px;gap:4px; }
.drop-col { flex:1;padding:8px; }
.drop-label { font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:6px 10px 10px;display:block; }
.drop-link { display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--text2);font-size:13px;transition:background .15s,color .15s; }
.drop-link:hover { background:rgba(255,255,255,.06);color:var(--text); }
.drop-link i { font-size:16px;color:var(--green);flex-shrink:0; }
.drop-name { font-weight:500;color:var(--text);display:block; }
.drop-sub  { font-size:11px;color:var(--text3);display:block; }
.drop-col-promo { background:var(--green-dim);border-radius:10px;border:1px solid rgba(16,185,129,.18); }
.drop-promo { padding:12px; }
.drop-promo-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--green-light);margin-bottom:8px; }
.drop-promo-title { font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:12px; }
.drop-promo-link { font-size:13px;color:var(--green-light);font-weight:500; }
.drop-promo-link:hover { text-decoration:underline; }
.nav-right { display:flex;align-items:center;gap:12px;margin-left:auto; }
.btn-cta { background:var(--green);color:#fff;padding:8px 20px;border-radius:7px;font-size:13px;font-weight:700;transition:background .15s,transform .15s,box-shadow .15s;border:none;cursor:pointer; }
.btn-cta:hover { background:#059669;transform:translateY(-1px);box-shadow:0 6px 20px var(--green-glow); }
.nav-hamburger { display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;width:36px;height:36px; }
.nav-hamburger span { display:block;height:2px;background:var(--text);border-radius:2px;transition:all .2s; }
.mobile-menu { display:none;flex-direction:column;padding:12px 0 20px;border-top:1px solid var(--border);background:var(--bg); }
.mob-link { padding:12px 24px;font-size:15px;color:var(--text2);border-bottom:1px solid var(--border); }
.mob-link:hover { color:var(--green-light);background:var(--green-dim); }

/* ── HERO — Video/Image background ───────────────────────── */
.hero { position:relative;min-height:100vh;display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden; }

/* Full-screen video background */
.hero-video-bg {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    width:100%; height:100%;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}
.hero-video-bg iframe {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    /* 16:9 — always larger than container */
    width:calc(100vw + 200px);
    height:calc(56.25vw + 112px);
    min-width:100%;
    min-height:100%;
    border:none;
    pointer-events:none;
}
/* Overlay sits directly inside hero-video-bg and hero-img-bg */
.hero-overlay {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    width:100%; height:100%;
    z-index:2;
    pointer-events:none;
}

/* Fallback image (shown always — video plays on top) */
.hero-img-bg {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    width:100%; height:100%;
    z-index:0;
    background-image:url('https://images.unsplash.com/photo-1639762681485-074b7f938ba0?w=1800&q=80&auto=format');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:1;
}
.hero-img-bg.custom-bg {
    /* When admin sets a custom image, opacity handled by .hero-overlay on top */
    opacity:1;
}

/* Gradient overlay */
/* hero::before gradient removed — overlay is now handled by .hero-overlay div inside hero-video-bg */

/* Noise texture for depth */
/* hero::after removed — was z-index:1 blocking video */

/* Glowing orbs */
.hero-orb1 { position:absolute;z-index:3;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.14) 0%,transparent 70%);top:-150px;left:-150px;animation:orbFloat 14s ease-in-out infinite; }
.hero-orb2 { position:absolute;z-index:3;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 70%);bottom:-100px;right:-100px;animation:orbFloat 18s ease-in-out infinite reverse; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,-30px) scale(1.06);} }

.hero > .container { position:relative;z-index:4;width:100%; }
.hero-inner { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:80px 0; }
.hero-badge { display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-light);background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.35);padding:6px 16px;border-radius:24px;margin-bottom:28px; }
.hero-badge span { width:6px;height:6px;border-radius:50%;background:var(--green-light);animation:pulse 2s infinite; }
.hero-title { font-size:clamp(42px,6vw,76px);color:#fff;margin-bottom:24px;line-height:1.08;text-shadow:0 2px 40px rgba(0,0,0,.4); }
.hero-title .accent { background:linear-gradient(135deg,#10b981,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-desc { font-size:17px;color:rgba(241,245,249,.82);margin-bottom:36px;max-width:480px;line-height:1.75; }
.hero-actions { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px; }
.hero-trust { display:flex;flex-wrap:wrap;gap:20px; }
.trust-item { display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(241,245,249,.6);font-weight:500; }
.trust-item i { color:var(--green-light);font-size:15px; }

/* Hero right card */
.hero-visual { position:relative; }
.hero-gpu-card { background:rgba(20,29,53,.72);border:1px solid rgba(16,185,129,.28);border-radius:20px;padding:28px;backdrop-filter:blur(16px);box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(16,185,129,.12); }
.gpu-card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border); }
.gpu-card-title { font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff; }
.gpu-card-badge { background:var(--green);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 10px;border-radius:20px; }
.gpu-specs-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px; }
.gpu-spec { background:rgba(255,255,255,.04);border-radius:10px;padding:14px; }
.gpu-spec-label { font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:4px; }
.gpu-spec-val { font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--green-light); }
.hero-pill { position:absolute;background:rgba(20,29,53,.92);border:1px solid var(--border2);border-radius:50px;padding:10px 18px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(0,0,0,.4);animation:pillFloat 4s ease-in-out infinite;white-space:nowrap; }
.hero-pill i { color:var(--green-light);font-size:16px; }
.hero-pill span { font-size:13px;font-weight:600;color:var(--text); }
.pill-top { top:-20px;right:-20px;animation-delay:0s; }
.pill-bottom { bottom:-20px;left:-20px;animation-delay:2s; }
@keyframes pillFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.6;transform:scale(1.3);} }

/* ── STATS BAR ───────────────────────────────────────────── */
.stats-bar { background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.stats-bar-inner,.stats-inner { display:grid;grid-template-columns:repeat(5,1fr);max-width:var(--max-w);margin:0 auto;padding:0 24px; }
.stat-item { padding:32px 24px;text-align:center;border-right:1px solid var(--border);transition:background .2s; }
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:rgba(255,255,255,.03); }
.stat-num,.stat-desc+.stat-num { font-family:var(--font-display);font-size:36px;font-weight:800;color:var(--green-light);line-height:1;margin-bottom:6px; }
.stat-label,.stat-desc { font-size:13px;color:var(--text3);font-weight:500; }
/* Client logos strip */
.clients-strip { background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 0; }
.clients-strip-label { text-align:center;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:28px; }
.clients-logos { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px 48px; }
.client-logo-item { display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .2s;filter:grayscale(100%) brightness(2); }
.client-logo-item:hover { opacity:1;filter:none; }
.client-logo-item img { max-height:40px;max-width:140px;object-fit:contain; }
.client-logo-item span { font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text2);letter-spacing:-.02em; }

/* ── PRODUCT CARDS ───────────────────────────────────────── */
.products-section { background:var(--bg2); }
.products-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px; }
.product-card { position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0;transition:all .3s;overflow:hidden;display:flex;flex-direction:column; }
.product-card::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(16,185,129,.06) 0%,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:0; }
.product-card:hover { border-color:rgba(16,185,129,.45);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(16,185,129,.18); }
.product-card:hover::before { opacity:1; }
.product-card-inner { position:relative;z-index:1;padding:24px;display:flex;flex-direction:column;height:100%; }

/* Product image inside card */
.card-img-wrap { width:100%;height:130px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.025);border-radius:10px;margin-bottom:18px;overflow:hidden;padding:10px; }
.card-img-wrap img { max-width:100%;max-height:110px;object-fit:contain; }
.card-img-wrap i { font-size:40px;color:var(--text3); }

.card-badge { position:absolute;top:14px;right:14px;background:var(--green);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 10px;border-radius:20px;text-transform:uppercase;z-index:2; }
.card-gpu-icon { margin-bottom:16px; }
.card-gpu-icon i { font-size:26px;color:var(--green-light);background:var(--green-dim);border:1px solid rgba(16,185,129,.2);width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:12px; }
.card-title { font-size:19px;font-weight:700;color:#fff;margin-bottom:4px; }
.card-tagline { font-size:13px;color:var(--green-light);font-weight:500;margin-bottom:14px; }
.card-highlights { list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:20px;flex:1; }
.card-highlights li { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2); }
.card-highlights li i { color:var(--green);font-size:14px;flex-shrink:0; }
.card-link { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--green-light);margin-top:auto;transition:gap .2s; }
.card-link:hover { gap:10px; }

/* ── INDUSTRIES ──────────────────────────────────────────── */
.industries-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.industry-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:all .25s;display:block; }
.industry-card:hover { border-color:rgba(16,185,129,.35);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.3);background:var(--surface2); }
.industry-card > i { font-size:26px;color:var(--green-light);background:var(--green-dim);width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;border:1px solid rgba(16,185,129,.2); }
.industry-card h3 { font-size:17px;color:var(--text);margin-bottom:8px; }
.industry-card p { font-size:13px;color:var(--text2);margin-bottom:16px;line-height:1.5; }
.learn-more { font-size:13px;font-weight:600;color:var(--green-light); }

/* ── WHY US ──────────────────────────────────────────────── */
.why-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.why-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;text-align:center;transition:all .25s; }
.why-card:hover { transform:translateY(-4px);border-color:var(--border2);box-shadow:0 16px 40px rgba(0,0,0,.3); }
.why-icon { width:56px;height:56px;background:var(--green-dim);border:1px solid rgba(16,185,129,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px; }
.why-icon i { font-size:24px;color:var(--green-light); }
.why-card h3 { font-size:16px;margin-bottom:8px;color:var(--text); }
.why-card p { font-size:13px;line-height:1.6; }

/* ── RESOURCES ───────────────────────────────────────────── */
.resources-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.resource-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .25s; }
.resource-card:hover { transform:translateY(-4px);border-color:var(--border2);box-shadow:0 16px 40px rgba(0,0,0,.3); }
.resource-card-img { height:140px;overflow:hidden;background:var(--surface2); }
.resource-card-img img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.resource-card:hover .resource-card-img img { transform:scale(1.05); }
.resource-card-img-placeholder { height:140px;background:var(--surface2);display:flex;align-items:center;justify-content:center; }
.resource-card-img-placeholder i { font-size:32px;color:var(--text3); }
.resource-card-body { padding:20px; }
.resource-tag { font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-light);margin-bottom:8px;display:block; }
.resource-card h3 { font-size:15px;color:var(--text);margin-bottom:8px;line-height:1.4; }
.resource-card p { font-size:12px;color:var(--text3); }
.resource-read { font-size:12px;font-weight:600;color:var(--green-light);margin-top:12px;display:block; }

/* ── TRUST BADGES ────────────────────────────────────────── */
.trust-badges { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.trust-badge { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;text-align:center;transition:border-color .2s; }
.trust-badge:hover { border-color:var(--border2); }
.trust-badge i { font-size:24px;color:var(--green-light);margin-bottom:12px;display:block; }
.trust-badge h4 { font-size:14px;color:var(--text);margin-bottom:4px; }
.trust-badge p { font-size:12px;color:var(--text3); }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer { background:var(--surface);border-top:1px solid var(--border);padding:64px 0 0; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px; }
.footer-logo { margin-bottom:12px;display:block; }
.footer-about { font-size:13px;color:var(--text3);line-height:1.7;max-width:240px;margin-bottom:20px; }
.footer-social { display:flex;gap:10px; }
.footer-social a { width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:16px;transition:all .2s; }
.footer-social a:hover { background:var(--green-dim);color:var(--green-light);border-color:rgba(16,185,129,.3); }
.footer-col h4 { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);margin-bottom:16px; }
.footer-col-title { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text);margin-bottom:16px; }
.footer-links { list-style:none;display:flex;flex-direction:column;gap:10px; }
.footer-links a { font-size:13px;color:var(--text3);transition:color .15s; }
.footer-links a:hover { color:var(--green-light); }
/* footer-link (singular) — each product/solution link in footer columns */
.footer-link {
    display: block;
    font-size: 13px;
    color: var(--text3);
    padding: 4px 0;
    transition: color .15s;
    text-decoration: none;
}
.footer-link:hover { color: var(--green); }
.footer-link i { margin-right: 5px; font-size: 12px; }
.footer-bottom { border-top:1px solid var(--border);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;max-width:var(--max-w);margin:0 auto; }
.footer-copy { font-size:13px;color:var(--text3); }
.footer-legal { display:flex;gap:20px; }
.footer-legal a { font-size:12px;color:var(--text3);transition:color .15s; }
.footer-legal a:hover { color:var(--text2); }

/* ── INNER PAGE HERO ─────────────────────────────────────── */
.page-hero { background:linear-gradient(135deg,var(--bg2) 0%,var(--bg) 100%);border-bottom:1px solid var(--border);padding:80px 0 60px;margin-top:var(--nav-h); }
.page-hero .breadcrumb { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text3);margin-bottom:16px; }
.page-hero .breadcrumb a { color:var(--text3);transition:color .15s; }
.page-hero .breadcrumb a:hover { color:var(--green-light); }
.page-hero h1 { font-size:clamp(32px,4vw,52px);color:#fff;margin-bottom:12px; }
.page-hero p { font-size:17px;color:var(--text2);max-width:560px; }

/* ── PRODUCT SINGLE ──────────────────────────────────────── */
.product-hero { background:linear-gradient(135deg,var(--bg2) 0%,var(--bg) 100%);border-bottom:1px solid var(--border);padding:80px 0;margin-top:var(--nav-h); }
.product-hero-inner { display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:center; }
.product-hero-image { width:100%;max-width:320px;height:240px;object-fit:contain;background:rgba(255,255,255,.04);border-radius:16px;padding:20px;border:1px solid var(--border); }
.product-hero-img-placeholder { width:100%;max-width:320px;height:240px;background:rgba(255,255,255,.04);border-radius:16px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center; }
.product-hero-img-placeholder i { font-size:64px;color:var(--text3); }
.specs-table { width:100%;border-collapse:collapse; }
.specs-table td { padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px; }
.specs-table td:first-child { color:var(--text3);font-weight:500;width:40%; }
.specs-table td:last-child { color:var(--text);font-weight:500; }
.specs-table tr:last-child td { border-bottom:none; }
.specs-table tr:hover td { background:rgba(255,255,255,.02); }

/* ── BLOG ────────────────────────────────────────────────── */
.blog-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.blog-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .25s; }
.blog-card:hover { transform:translateY(-4px);border-color:var(--border2);box-shadow:0 16px 40px rgba(0,0,0,.3); }
.blog-card-img { height:180px;overflow:hidden;background:var(--surface2); }
.blog-card-img img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.blog-card:hover .blog-card-img img { transform:scale(1.05); }
.blog-card-body { padding:24px; }
.blog-cat-tag { font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-light);margin-bottom:10px;display:block; }
.blog-card h2 { font-size:17px;color:var(--text);margin-bottom:10px;line-height:1.4; }
.blog-card p { font-size:13px;color:var(--text3);line-height:1.6;margin-bottom:16px; }
.blog-meta { display:flex;gap:16px;font-size:12px;color:var(--text3); }

/* ── CONTACT ─────────────────────────────────────────────── */
.contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:48px; }
.form-field { display:flex;flex-direction:column;gap:6px;margin-bottom:16px; }
.form-field label { font-size:13px;font-weight:600;color:var(--text2); }
.form-field input,.form-field textarea,.form-field select { background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:10px 14px;color:var(--text);font-family:var(--font-body);font-size:14px;transition:border-color .2s;width:100%; }
.form-field input:focus,.form-field textarea:focus,.form-field select:focus { outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,.12); }
.form-field textarea { resize:vertical;min-height:120px; }
.phone-group { display:flex;gap:8px; }
.phone-group select { width:160px;flex-shrink:0; }
.phone-group input { flex:1; }

/* ── FORM MESSAGES ───────────────────────────────────────── */
.form-msg { display:none;padding:12px 16px;border-radius:8px;font-size:14px;margin-top:12px; }
.form-msg-ok  { background:rgba(16,185,129,.1);color:#34d399;border:1px solid rgba(16,185,129,.3); }
.form-msg-err { background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.3); }

/* ── CHATBOT ─────────────────────────────────────────────── */
.chat-bubble { position:fixed;bottom:28px;right:28px;z-index:9000;display:flex;flex-direction:column;align-items:flex-end;gap:12px; }
.chat-toggle { display:flex;align-items:center;gap:10px;background:var(--green);color:#fff;border:none;border-radius:50px;padding:14px 22px 14px 16px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 32px rgba(16,185,129,.5);transition:transform .2s,box-shadow .2s;white-space:nowrap; }
.chat-toggle:hover { transform:translateY(-2px);box-shadow:0 12px 40px rgba(16,185,129,.6); }
.chat-toggle-icon { width:32px;height:32px;background:rgba(0,0,0,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.chat-toggle-icon i { font-size:18px; }
.chat-dot { width:8px;height:8px;background:#fff;border-radius:50%;margin-left:2px;animation:pulse 2s infinite; }
.chat-panel { width:360px;max-height:520px;background:var(--surface);border:1px solid var(--border2);border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;transform:scale(.92) translateY(16px);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s; }
.chat-panel.open { transform:scale(1) translateY(0);opacity:1;pointer-events:auto; }
.chat-panel-header { display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(16,185,129,.04));border-bottom:1px solid var(--border);flex-shrink:0; }
.chat-avatar { width:40px;height:40px;background:var(--green-dim);border:2px solid rgba(16,185,129,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.chat-avatar i { font-size:20px;color:var(--green-light); }
.chat-header-info h4 { font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px; }
.chat-header-info p { font-size:11px;color:var(--text3);display:flex;align-items:center;gap:5px; }
.chat-status-dot { width:6px;height:6px;background:#4ade80;border-radius:50%;display:inline-block;flex-shrink:0; }
.chat-icon-btn { width:30px;height:30px;background:transparent;border:1px solid var(--border2);border-radius:8px;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.chat-icon-btn:hover { background:var(--surface2);color:var(--text); }
.chat-messages { flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth; }
.chat-messages::-webkit-scrollbar { width:4px; }
.chat-messages::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; }
.chat-msg { display:flex;flex-direction:column;max-width:82%; }
.chat-msg.user { align-self:flex-end;align-items:flex-end; }
.chat-msg.bot { align-self:flex-start;align-items:flex-start; }
.chat-msg-bubble { padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.55; }
.chat-msg.user .chat-msg-bubble { background:var(--green);color:#fff;border-bottom-right-radius:4px; }
.chat-msg.bot .chat-msg-bubble { background:var(--surface2);color:var(--text);border-bottom-left-radius:4px;border:1px solid var(--border); }
.chat-msg-time { font-size:10px;color:var(--text3);margin-top:3px;padding:0 4px; }
.chat-typing { display:flex;gap:4px;padding:12px 14px;background:var(--surface2);border-radius:16px;border-bottom-left-radius:4px;border:1px solid var(--border);width:52px; }
.chat-typing span { width:7px;height:7px;background:var(--text3);border-radius:50%;animation:typing .9s infinite; }
.chat-typing span:nth-child(2){animation-delay:.15s;} .chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes typing { 0%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-6px);} }
.chat-chips { display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid var(--border);flex-shrink:0; }
.chip { padding:5px 11px;background:var(--surface2);border:1px solid var(--border2);border-radius:20px;font-size:11px;color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:var(--font-body); }
.chip:hover { background:var(--green-dim);color:var(--green-light);border-color:rgba(16,185,129,.4); }
.chat-input-area { display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0; }
.chat-input { flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--text);font-size:13px;resize:none;outline:none;line-height:1.4;font-family:var(--font-body);max-height:80px; }
.chat-input:focus { border-color:rgba(16,185,129,.4); }
.chat-send { width:36px;height:36px;background:var(--green);border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s;align-self:flex-end; }
.chat-send:hover { opacity:.85; }
.chat-link { color:var(--green-light);text-decoration:underline; }

/* ── UTILITY ─────────────────────────────────────────────── */
.mt-24 { margin-top:24px; }
.text-center { text-align:center; }
.fade-in { opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease; }
.fade-in.visible { opacity:1;transform:none; }
.badge { display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase; }
.badge-green { background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.3); }
.badge-blue  { background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3); }
.badge-amber { background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3); }
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:24px; }
.gap-16 { gap:16px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr 1fr;}.why-grid{grid-template-columns:repeat(2,1fr);}.resources-grid{grid-template-columns:repeat(2,1fr);}.trust-badges{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){section{padding:60px 0;}.hero-inner{grid-template-columns:1fr;}.hero-visual{display:none;}.hero-title{font-size:clamp(36px,7vw,56px);}.stats-inner{grid-template-columns:repeat(3,1fr);}.products-grid{grid-template-columns:repeat(2,1fr);}.industries-grid{grid-template-columns:repeat(2,1fr);}.blog-grid{grid-template-columns:1fr;}.contact-grid{grid-template-columns:1fr;}.footer-grid{grid-template-columns:1fr 1fr;}.footer-bottom{flex-direction:column;gap:12px;text-align:center;}.nav-links,.nav-right{display:none;}.nav-hamburger{display:flex;}.mobile-menu.open{display:flex;}.chat-bubble{bottom:16px;right:16px;}.chat-panel{width:calc(100vw - 32px);max-height:60vh;}.chat-toggle-label{display:none;}.chat-toggle{padding:14px;}.grid-2{grid-template-columns:1fr;}.product-hero-inner{grid-template-columns:1fr;}.hero-actions{flex-direction:column;}}
@media(max-width:480px){.products-grid{grid-template-columns:1fr;}.industries-grid{grid-template-columns:1fr;}.stats-inner{grid-template-columns:repeat(2,1fr);}.why-grid{grid-template-columns:1fr;}.trust-badges{grid-template-columns:1fr;}.footer-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE — Comprehensive fix
   ═══════════════════════════════════════════════════ */

/* Base touch improvements */
* { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }

/* Stats bar — always horizontal scroll on mobile */
.stats-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stats-inner {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    min-width: 480px; /* prevents collapse */
}

/* Hero section mobile */
@media (max-width: 768px) {
    .hero { padding-top: var(--nav-h); min-height: 90vh; }
    .hero-inner { grid-template-columns: 1fr !important; gap: 32px; }
    .hero-visual { display: none !important; }
    .hero-title { font-size: clamp(32px, 8vw, 52px); }
    .hero-desc { font-size: 15px; }
    .hero-actions { flex-direction: column; gap: 12px; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-trust { flex-wrap: wrap; gap: 8px; }
    .trust-item { font-size: 11px; }
}

/* Navigation mobile */
@media (max-width: 768px) {
    .nav-inner { padding: 0 16px; }
    .nav-links  { display: none !important; }
    .nav-right .btn-cta { display: none; }
    .nav-hamburger { display: flex !important; }
    .mobile-menu { display: none; flex-direction: column; }
    .mobile-menu.open { display: flex !important; }
    .site-header { position: fixed; }
}

/* Products grid */
@media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .products-grid { grid-template-columns: 1fr !important; } }

/* Industries */
@media (max-width: 900px) { .industries-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .industries-grid { grid-template-columns: 1fr !important; } }

/* Why grid */
@media (max-width: 768px) { .why-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .why-grid { grid-template-columns: 1fr !important; } }

/* Resources / blog grid */
@media (max-width: 900px) { .resources-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .resources-grid { grid-template-columns: 1fr !important; } }

/* Blog grid */
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr !important; } }

/* Generic 2-col grid */
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr !important; } }

/* Footer */
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px; }
    .footer-brand { grid-column: 1/-1; }
    .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    .footer-top { padding: 48px 0 32px; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr !important; }
}

/* Contact page */
@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr !important; }
    .form-row { grid-template-columns: 1fr !important; }
}

/* Product single page */
@media (max-width: 768px) {
    div[style*="grid-template-columns:2fr 1fr"] { display: block !important; }
    div[style*="grid-template-columns:2fr 1fr"] > div:last-child { margin-top: 24px; }
    div[style*="position:sticky"] { position: static !important; }
}

/* Blog single sidebar */
@media (max-width: 900px) {
    div[style*="grid-template-columns:1fr 280px"] { display: block !important; }
    div[style*="grid-template-columns:1fr 280px"] aside { margin-top: 40px; }
}

/* Chatbot bubble — smaller on mobile */
@media (max-width: 768px) {
    .chat-bubble { bottom: 16px; right: 16px; }
    .chat-panel { width: calc(100vw - 32px); right: -8px; max-height: 65vh; }
    .chat-toggle-text { display: none; } /* hide text, show only icon */
    .chat-toggle { padding: 14px 16px; border-radius: 50px; }
}

/* Section padding on mobile */
@media (max-width: 768px) {
    section { padding: 56px 0; }
    .section-head { margin-bottom: 36px; }
    .container { padding: 0 16px; }
    h2 { font-size: clamp(24px, 5vw, 36px); }
}

/* CTA band */
@media (max-width: 768px) {
    .cta-actions { flex-direction: column; align-items: center; }
    .cta-actions .btn { width: 100%; max-width: 320px; justify-content: center; }
    .cta-band { padding: 60px 0; }
}

/* Dropdown nav — prevent overflow on mobile */
@media (max-width: 768px) {
    .dropdown { display: none !important; }
}

/* Form inputs — prevent zoom on iOS */
@media (max-width: 768px) {
    input[type=text], input[type=email], input[type=tel],
    input[type=url], input[type=password], select, textarea {
        font-size: 16px !important; /* iOS won't zoom if >= 16px */
    }
}

/* Page hero (inner pages) */
@media (max-width: 768px) {
    .page-hero { padding: 60px 0 40px; }
    .breadcrumb-inner { font-size: 12px; }
    div[style*="grid-template-columns:1fr auto"] { display: block !important; }
    div[style*="grid-template-columns:1fr auto"] img { margin-top: 16px; max-width: 120px; }
}

/* GPU specs grid on mobile */
@media (max-width: 480px) {
    .gpu-spec-grid { grid-template-columns: 1fr 1fr !important; }
    .gpu-specs-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Fix horizontal scroll on all screens */
html, body { overflow-x: hidden; max-width: 100vw; }