:root {
  --navy: #0d2438;
  --navy-2: #163852;
  --teal: #0f766e;
  --teal-dark: #0b5f59;
  --mint: #dff4ef;
  --ivory: #f7f5ef;
  --paper: #fffdfa;
  --white: #ffffff;
  --ink: #152633;
  --muted: #63727d;
  --line: #dce4e8;
  --amber: #d99533;
  --blue: #2f6f9f;
  --danger: #b94a48;
  --success: #277c60;
  --shadow: 0 18px 45px rgba(13, 36, 56, .10);
  --shadow-sm: 0 8px 24px rgba(13, 36, 56, .08);
  --radius: 22px;
  --radius-sm: 14px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.app-page { background: #f2f5f6; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 14px; color: var(--teal); font-size: .76rem;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.section { padding: 92px 0; }
.section-soft { background: var(--ivory); }
.section-dark { color: white; background: var(--navy); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-heading h2, .split-copy h2 { margin: 0; max-width: 720px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -.045em; }
.section-heading p { margin: 0; max-width: 470px; color: var(--muted); }
.section-dark .section-heading p { color: #b9c8d2; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.text-link { color: var(--teal); font-weight: 750; }
.text-link:hover { color: var(--teal-dark); }

.topbar { background: var(--navy); color: #dce9ee; font-size: .78rem; }
.topbar-inner { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.topbar span { display: inline-flex; align-items: center; gap: 6px; }
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,253,250,.94);
  border-bottom: 1px solid rgba(220,228,232,.9); backdrop-filter: blur(18px);
}
.nav { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; font-weight: 900; letter-spacing: -.03em; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center; color: white;
  border-radius: 12px 4px 12px 4px; background: linear-gradient(145deg, var(--teal), var(--navy-2));
  box-shadow: 0 8px 16px rgba(15,118,110,.2); font-size: .78rem; letter-spacing: -.05em;
}
.brand-copy { display: grid; line-height: 1; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 25px; margin-left: auto; font-size: .9rem; font-weight: 680; }
.nav-links a { padding: 27px 0 24px; border-bottom: 3px solid transparent; }
.nav-links a:hover, .nav-links a.active { color: var(--teal); border-color: var(--teal); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang { padding: 9px 10px; border: 0; color: var(--muted); background: transparent; }
.nav-toggle { display: none; border: 0; background: transparent; font-size: 1.4rem; }

.btn {
  display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px;
  padding: 0 20px; border: 1px solid transparent; border-radius: 12px; font-size: .9rem;
  font-weight: 800; transition: transform .18s ease, background .18s ease, border .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: white; background: var(--teal); box-shadow: 0 8px 18px rgba(15,118,110,.22); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-outline { color: var(--navy); border-color: var(--line); background: rgba(255,255,255,.7); }
.btn-outline:hover { border-color: #aab9c1; background: white; }
.btn-dark { color: white; background: var(--navy); }
.btn-light { color: var(--navy); background: white; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: .78rem; border-radius: 10px; }
.btn-block { width: 100%; }

.hero { position: relative; min-height: 720px; overflow: hidden; background: #f3f4f0; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(247,246,242,.98) 0%, rgba(247,246,242,.96) 30%, rgba(247,246,242,.65) 48%, rgba(247,246,242,.05) 70%);
}
.hero-inner { position: relative; z-index: 2; min-height: 720px; display: flex; align-items: center; }
.hero-copy { width: min(610px, 54%); padding: 70px 0 100px; }
.hero h1 { margin: 0; font-size: clamp(3rem, 6.3vw, 5.9rem); line-height: .94; letter-spacing: -.065em; color: var(--navy); }
.hero h1 span { color: var(--teal); }
.hero-copy > p { max-width: 560px; margin: 26px 0 30px; color: #485b67; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; color: #405563; font-size: .82rem; font-weight: 700; }
.hero-facts span::before { content: "✓"; margin-right: 7px; color: var(--teal); }

.ai-search-wrap { position: relative; z-index: 5; margin-top: -63px; }
.ai-search-card {
  display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 20px;
  padding: 22px; color: white; border-radius: 20px; background: var(--navy); box-shadow: 0 24px 50px rgba(13,36,56,.23);
}
.ai-search-label { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.spark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--navy); background: #a7e8d8; }
.ai-search-field { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border: 1px solid #36536a; border-radius: 13px; background: #163248; }
.ai-search-field input { width: 100%; border: 0; outline: 0; color: white; background: transparent; }
.ai-search-field input::placeholder { color: #a9bac5; }
.ai-search-card .btn { white-space: nowrap; }

.trust-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 55px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.trust-item { padding: 26px; background: white; }
.trust-item strong { display: block; margin-bottom: 7px; color: var(--navy); }
.trust-item span { color: var(--muted); font-size: .84rem; }

.category-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.category-card {
  position: relative; min-height: 230px; overflow: hidden; padding: 28px; border: 1px solid var(--line);
  border-radius: var(--radius); background: white; box-shadow: 0 0 0 rgba(0,0,0,0); transition: .25s ease;
}
.category-card:hover { transform: translateY(-5px); border-color: #bdcfce; box-shadow: var(--shadow-sm); }
.category-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -45px; bottom: -55px; border-radius: 50%; background: var(--category-bg, #edf6f4); }
.category-icon { position: relative; z-index: 2; display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 38px; border-radius: 16px; color: white; background: var(--category-color, var(--teal)); font-size: 1.3rem; font-weight: 900; }
.category-card h3 { position: relative; z-index: 2; margin: 0 0 7px; font-size: 1.18rem; }
.category-card p { position: relative; z-index: 2; max-width: 80%; margin: 0; color: var(--muted); font-size: .85rem; }
.category-card .arrow { position: absolute; z-index: 2; right: 26px; bottom: 24px; font-size: 1.4rem; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tab { padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: white; font-size: .82rem; font-weight: 750; }
.tab.active, .tab:hover { color: white; border-color: var(--teal); background: var(--teal); }
.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; transition: .22s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.product-visual { position: relative; min-height: 200px; display: grid; place-items: center; overflow: hidden; background: var(--visual, linear-gradient(145deg,#e8f2ee,#cdded7)); }
.product-visual::before, .product-visual::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.42); }
.product-visual::before { width: 145px; height: 145px; left: -45px; top: -50px; }
.product-visual::after { width: 90px; height: 90px; right: -25px; bottom: -20px; }
.product-symbol { position: relative; z-index: 1; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 28px; color: var(--navy); background: rgba(255,255,255,.74); box-shadow: 0 12px 25px rgba(13,36,56,.12); font-size: 2.1rem; font-weight: 900; }
.badge { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 6px 9px; border-radius: 999px; color: var(--navy); background: white; font-size: .65rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.badge.pre { color: #7b4a08; background: #fff0d8; }
.product-body { padding: 17px; }
.product-meta { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.product-body h3 { margin: 7px 0 13px; font-size: 1rem; line-height: 1.25; }
.product-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.product-stats span { color: var(--muted); font-size: .7rem; }
.product-stats strong { display: block; margin-top: 2px; color: var(--navy); font-size: .82rem; }
.login-price { color: var(--teal); font-size: .78rem; font-weight: 800; }

.ai-showcase { display: grid; grid-template-columns: .9fr 1.1fr; gap: 68px; align-items: center; }
.ai-showcase h2 { margin: 0; font-size: clamp(2.2rem,4vw,3.7rem); line-height: 1.04; letter-spacing: -.05em; }
.ai-showcase .lead { color: #c5d2da; }
.prompt-bubble { margin: 30px 0; padding: 20px 22px; border: 1px solid #35536a; border-radius: 16px 16px 16px 4px; color: #e2edf2; background: #142f45; }
.ai-result { padding: 26px; border-radius: var(--radius); color: var(--ink); background: white; box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.ai-result-top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-size: .72rem; font-weight: 800; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(39,124,96,.12); }
.result-numbers { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 20px 0; }
.result-stat { padding: 14px; border-radius: 12px; background: #f3f6f6; }
.result-stat span { display: block; color: var(--muted); font-size: .72rem; }
.result-stat strong { font-size: 1.35rem; color: var(--navy); }
.mini-products { display: flex; gap: 8px; }
.mini-product { height: 54px; flex: 1; border-radius: 10px; background: linear-gradient(135deg,#e1eeea,#c3d8d1); }

.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; counter-reset: steps; }
.step { position: relative; padding-top: 26px; border-top: 1px solid #b9c8d0; }
.step::before { counter-increment: steps; content: "0" counter(steps); display: block; margin-bottom: 26px; color: var(--teal); font-weight: 900; }
.step:not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 18px; color: #9cabb5; }
.step h3 { margin: 0 0 9px; }
.step p { margin: 0; color: var(--muted); font-size: .86rem; }

.buyer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.buyer-card { min-height: 250px; padding: 26px; border-radius: 18px; color: white; background: var(--navy); }
.buyer-card:nth-child(2) { background: #1e5f6f; }
.buyer-card:nth-child(3) { background: #496a57; }
.buyer-card:nth-child(4) { background: #5c4a65; }
.buyer-card .number { display: inline-grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; }
.buyer-card h3 { margin: 52px 0 10px; font-size: 1.17rem; }
.buyer-card p { margin: 0; color: rgba(255,255,255,.75); font-size: .84rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.check-list { display: grid; gap: 13px; margin: 26px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 11px; color: #455966; }
.check-list li::before { content: "✓"; display: grid; flex: 0 0 24px; height: 24px; place-items: center; color: var(--teal); border-radius: 8px; background: var(--mint); font-size: .75rem; font-weight: 900; }
.map-card { position: relative; min-height: 410px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(145deg,#d9e7e5,#eef2ed); }
.map-shape { position: absolute; inset: 55px; opacity: .32; background: radial-gradient(circle at 45% 30%,var(--teal) 0 10%,transparent 11%), radial-gradient(circle at 65% 60%,var(--teal) 0 8%,transparent 9%), radial-gradient(circle at 35% 72%,var(--teal) 0 7%,transparent 8%); filter: blur(.3px); }
.map-card::before { content: "EU"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgba(13,36,56,.09); font-size: 11rem; font-weight: 950; }
.map-label { position: absolute; padding: 10px 13px; border-radius: 11px; background: white; box-shadow: var(--shadow-sm); font-size: .72rem; font-weight: 800; }
.map-label.one { top: 80px; left: 48px; }
.map-label.two { top: 160px; right: 40px; }
.map-label.three { bottom: 65px; left: 115px; }

.cta-panel { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 52px; border-radius: 26px; color: white; background: linear-gradient(120deg,var(--navy),#174f5b); }
.cta-panel h2 { margin: 0 0 10px; font-size: clamp(2rem,4vw,3rem); letter-spacing: -.04em; }
.cta-panel p { margin: 0; color: #c5d4dc; }
.cta-actions { display: flex; gap: 10px; }

.site-footer { padding: 65px 0 30px; color: #c4d0d7; background: #091d2d; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 45px; }
.footer-brand p { max-width: 280px; color: #8fa4b1; font-size: .84rem; }
.footer-col h4 { margin: 3px 0 16px; color: white; }
.footer-col a { display: block; margin: 9px 0; color: #9eb0bb; font-size: .82rem; }
.footer-col a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 22px; border-top: 1px solid #21394a; color: #77909e; font-size: .75rem; }

/* Forms */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--ivory); }
.auth-visual { position: relative; min-height: 100%; overflow: hidden; color: white; background: var(--navy); }
.auth-visual img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(13,36,56,.95),rgba(13,36,56,.15)); }
.auth-copy { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 9%; }
.auth-copy h2 { max-width: 620px; margin: 20px 0 10px; font-size: clamp(2.4rem,5vw,4.5rem); line-height: 1; letter-spacing: -.05em; }
.auth-copy p { max-width: 540px; color: #d2dee4; }
.auth-panel { display: grid; place-items: center; padding: 45px; }
.auth-box { width: min(470px,100%); }
.auth-box h1 { margin: 40px 0 8px; font-size: 2.2rem; letter-spacing: -.04em; }
.auth-box > p { color: var(--muted); }
.form-grid { display: grid; gap: 15px; margin-top: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { display: block; margin-bottom: 6px; font-size: .76rem; font-weight: 800; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; background: white;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,118,110,.1); }
.form-note { padding: 12px 14px; border-radius: 10px; color: #536873; background: #edf2f2; font-size: .76rem; }

/* Catalog */
.page-hero { padding: 70px 0 48px; background: var(--ivory); }
.page-hero h1 { margin: 0; font-size: clamp(2.6rem,5vw,4.8rem); letter-spacing: -.055em; line-height: 1; }
.page-hero p { max-width: 700px; color: var(--muted); }
.catalog-layout { display: grid; grid-template-columns: 245px 1fr; gap: 32px; padding: 45px 0 90px; }
.filters { align-self: start; position: sticky; top: 100px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.filter-group + .filter-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.filter-group h4 { margin: 0 0 11px; font-size: .82rem; }
.filter-option { display: flex; align-items: center; gap: 9px; margin: 9px 0; color: var(--muted); font-size: .8rem; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.search-inline { flex: 1; display: flex; gap: 8px; }
.search-inline input { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; }

/* App/dashboard */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; }
.app-sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; color: #d3dfe5; background: var(--navy); }
.app-sidebar .brand { color: white; margin: 0 8px 36px; }
.side-label { margin: 22px 10px 8px; color: #78909e; font-size: .63rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.side-nav { display: grid; gap: 5px; }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px; color: #a9bdc8; font-size: .84rem; font-weight: 700; }
.side-nav a:hover, .side-nav a.active { color: white; background: #1b3b52; }
.side-icon { width: 25px; text-align: center; opacity: .9; }
.sidebar-account { position: absolute; left: 18px; right: 18px; bottom: 20px; display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid #29455a; }
.avatar { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: var(--navy); background: #b9e6db; font-size: .75rem; font-weight: 900; }
.sidebar-account small { display: block; color: #78909e; }
.app-main { min-width: 0; }
.app-topbar { position: sticky; top: 0; z-index: 30; min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 30px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.93); backdrop-filter: blur(15px); }
.quick-search { width: min(480px,60%); }
.quick-search input { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9f9; }
.app-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: white; }
.app-content { padding: 30px; }
.welcome { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.welcome h1 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }
.welcome p { margin: 4px 0 0; color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.metric { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.metric-head { display: flex; justify-content: space-between; color: var(--muted); font-size: .74rem; }
.trend { color: var(--success); font-weight: 800; }
.trend.down { color: var(--danger); }
.metric strong { display: block; margin: 12px 0 3px; color: var(--navy); font-size: 1.65rem; letter-spacing: -.035em; }
.metric small { color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.panel { padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 1.02rem; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.forecast-chart { position: relative; height: 230px; display: flex; align-items: end; gap: 12px; padding: 20px 8px 25px; border-bottom: 1px solid var(--line); }
.chart-bar { position: relative; flex: 1; height: var(--h); min-width: 20px; border-radius: 7px 7px 2px 2px; background: #b9d7d0; }
.chart-bar.future { background: var(--teal); }
.chart-bar span { position: absolute; left: 50%; bottom: -23px; transform: translateX(-50%); color: var(--muted); font-size: .62rem; }
.chart-legend { display: flex; gap: 15px; margin-top: 18px; color: var(--muted); font-size: .7rem; }
.chart-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; background: #b9d7d0; }
.chart-legend span:last-child::before { background: var(--teal); }
.activity-list { display: grid; gap: 14px; }
.activity { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; }
.activity-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--teal); background: var(--mint); font-size: .75rem; font-weight: 900; }
.activity p { margin: 0; font-size: .79rem; }
.activity small { color: var(--muted); }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.data-table th { padding: 10px; color: var(--muted); border-bottom: 1px solid var(--line); text-align: left; font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.data-table td { padding: 13px 10px; border-bottom: 1px solid #edf1f2; white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.sku { font-weight: 850; color: var(--navy); }
.confidence { display: inline-block; padding: 4px 7px; border-radius: 999px; background: #e9f4ef; color: var(--success); font-size: .65rem; font-weight: 800; }
.confidence.medium { color: #865c19; background: #fff2d7; }
.confidence.low { color: #94484b; background: #fde9e9; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; color: var(--success); background: #e7f3ee; font-size: .65rem; font-weight: 800; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.amber { color: #90611d; background: #fff0d3; }
.progress { height: 7px; overflow: hidden; border-radius: 99px; background: #e7edef; }
.progress > span { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--teal); }
.preorder-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.preorder-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; }
.preorder-top { min-height: 120px; padding: 20px; color: white; background: linear-gradient(135deg,var(--navy-2),var(--teal)); }
.preorder-top span { font-size: .7rem; opacity: .75; }
.preorder-top h3 { margin: 25px 0 0; }
.preorder-body { padding: 18px; }
.preorder-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
.preorder-stats div { padding: 10px; border-radius: 10px; background: #f3f6f6; }
.preorder-stats small { display: block; color: var(--muted); }
.preorder-stats strong { color: var(--navy); }

/* Interactive AI Office */
.office-page { --office-bg: #0b1f32; }
.office-topbar { min-height: 76px; }
.office-brandline { display: flex; align-items: center; gap: 11px; }
.office-brandline strong, .office-brandline small { display: block; }
.office-brandline small { color: var(--muted); font-size: .7rem; }
.office-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #35c58a; box-shadow: 0 0 0 6px rgba(53,197,138,.13); }
.role-switch { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.role-switch select { padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--navy); background: white; font-weight: 750; }
.office-content { max-width: 1560px; margin: auto; }
.office-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.office-welcome h1 { margin: 9px 0 2px; color: var(--navy); font-size: clamp(1.65rem,3vw,2.35rem); letter-spacing: -.045em; }
.office-welcome p { margin: 0; color: var(--muted); }
.office-summary { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-sm); }
.office-summary div { min-width: 165px; padding: 13px 17px; }
.office-summary div + div { border-left: 1px solid var(--line); }
.office-summary span, .office-summary strong { display: block; }
.office-summary span { color: var(--muted); font-size: .67rem; }
.office-summary strong { margin-top: 3px; color: var(--navy); font-size: 1.16rem; }

.virtual-office { overflow: hidden; border: 1px solid #1d4052; border-radius: 24px; background: #102d3b; box-shadow: 0 22px 55px rgba(13,36,56,.17); }
.office-room { position: relative; height: min(56vw,630px); min-height: 510px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg,#0b2a35 0 34%,#16434a 34% 100%); }
.office-room::before { content:""; position:absolute; z-index:-3; inset:34% 0 0; background: linear-gradient(150deg,transparent 0 12%,rgba(255,255,255,.025) 12.2% 12.8%,transparent 13% 25%,rgba(255,255,255,.025) 25.2% 25.8%,transparent 26%), linear-gradient(30deg,transparent 0 12%,rgba(255,255,255,.025) 12.2% 12.8%,transparent 13% 25%,rgba(255,255,255,.025) 25.2% 25.8%,transparent 26%), #17474b; background-size:110px 110px; transform:skewY(-2deg); transform-origin:left top; }
.office-room::after { content:""; position:absolute; z-index:-2; left:50%; top:34%; bottom:0; width:1px; background:rgba(255,255,255,.06); box-shadow:-330px 0 rgba(255,255,255,.035),330px 0 rgba(255,255,255,.035); }
.office-floor-grid { position:absolute; z-index:-1; left:0; right:0; top:34%; bottom:0; opacity:.36; background:linear-gradient(28deg,transparent 49.6%,rgba(9,42,44,.52) 50%,transparent 50.4%) 0 0/145px 93px,linear-gradient(-28deg,transparent 49.6%,rgba(9,42,44,.52) 50%,transparent 50.4%) 0 0/145px 93px; pointer-events:none; }
.office-wall { position:absolute; top:6%; padding:13px 17px; color:white; border:1px solid rgba(130,229,208,.16); border-radius:10px; background:#071c27; box-shadow:0 10px 30px rgba(0,0,0,.22); }
.office-wall span,.office-wall strong,.office-wall small { display:block; }
.office-wall .wall-kicker,.office-wall > span { color:#75dbc5; font-size:.55rem; font-weight:900; letter-spacing:.18em; }
.office-wall strong { margin:5px 0 1px; font-size:clamp(.9rem,1.6vw,1.35rem); }
.office-wall small { color:#86a7af; font-size:.58rem; }
.office-wall-left { left:4%; width:15%; transform:perspective(500px) rotateY(12deg); }
.office-wall-center { left:36%; width:28%; text-align:center; }
.office-wall-right { right:4%; width:15%; transform:perspective(500px) rotateY(-12deg); }
.office-window { position:absolute; left:22%; top:6%; width:10%; height:23%; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:5px; border:5px solid #d5f1ea; background:#102d3b; box-shadow:0 6px 20px rgba(0,0,0,.16); }
.office-window i { background:linear-gradient(155deg,#2e7394,#78b6c0); }
.plant { position:absolute; z-index:3; bottom:8%; width:31px; height:42px; border-radius:5px 5px 12px 12px; background:#d39355; box-shadow:0 8px 15px rgba(0,0,0,.18); }
.plant span,.plant span::before,.plant span::after { position:absolute; content:""; width:16px; height:33px; border-radius:100% 0 100% 0; background:#3cbe84; transform-origin:bottom center; }
.plant span { left:8px; bottom:30px; transform:rotate(-8deg); }
.plant span::before { left:-14px; bottom:0; transform:rotate(-50deg); }
.plant span::after { right:-14px; bottom:0; transform:rotate(56deg); }
.plant-one { left:2.5%; }.plant-two { right:2.5%; transform:scale(.82); }

.ai-station { position:absolute; z-index:5; width:22%; min-width:190px; height:190px; padding:0; border:0; color:white; background:transparent; text-align:left; transition:transform .2s ease,filter .2s ease; }
.ai-station:hover { transform:translateY(-7px); filter:brightness(1.07); }
.ai-station:focus-visible { outline:3px solid #8de3d2; outline-offset:5px; border-radius:18px; }
.station-one { left:12%; top:31%; }.station-two { left:39%; top:30%; }.station-three { left:66%; top:31%; }.station-four { left:27%; top:64%; }
.desk { position:absolute; z-index:2; left:18%; right:0; top:44px; height:81px; border-radius:9px; background:linear-gradient(155deg,#f4f2e9,#b6c7c5); box-shadow:0 14px 18px rgba(0,0,0,.23); transform:skewY(-3deg); }
.desk::before,.desk::after { content:""; position:absolute; bottom:-37px; width:10px; height:40px; background:#6c8588; }
.desk::before { left:14%; }.desk::after { right:14%; }
.monitor { position:absolute; left:37%; top:-35px; width:55px; height:42px; display:grid; place-items:center; color:var(--agent); border:4px solid #102638; border-radius:5px; background:#d8f0ed; box-shadow:0 8px 0 -4px #102638; font-style:normal; font-size:.75rem; font-weight:900; transform:skewY(3deg); }
.keyboard { position:absolute; left:39%; top:35px; width:50px; height:15px; border-radius:3px; background:#91a9a8; transform:skewY(3deg); }
.ai-person { position:absolute; z-index:4; left:4%; top:61px; width:58px; height:92px; }
.ai-head { position:absolute; z-index:2; left:8px; top:0; width:43px; height:37px; display:grid; place-items:center; color:var(--agent); border:4px solid #eaf9f5; border-radius:13px; background:#102638; box-shadow:0 0 0 5px var(--agent-light); font-style:normal; font-size:.58rem; font-weight:900; }
.ai-head::before,.ai-head::after { content:""; position:absolute; top:13px; width:4px; height:4px; border-radius:50%; background:var(--agent); }
.ai-head::before { left:9px; }.ai-head::after { right:9px; }
.ai-body { position:absolute; left:12px; top:41px; width:36px; height:48px; border-radius:13px 13px 8px 8px; background:var(--agent); box-shadow:-12px 5px 0 -8px var(--agent-light),12px 5px 0 -8px var(--agent-light); }
.station-status { position:absolute; z-index:7; left:14%; top:0; padding:5px 9px 5px 18px; border:1px solid rgba(255,255,255,.15); border-radius:999px; color:#d5e9e8; background:#0a2330; box-shadow:0 8px 16px rgba(0,0,0,.2); font-size:.56rem; font-weight:800; }
.station-status::before { content:""; position:absolute; left:7px; top:50%; width:6px; height:6px; border-radius:50%; background:#38cd91; transform:translateY(-50%); }
.station-status.approval::before { background:#f4b24f; }.station-status.alert::before { background:#f06e6e; }
.agent-label { position:absolute; z-index:7; left:20%; right:0; bottom:0; padding:8px 11px; border:1px solid color-mix(in srgb,var(--agent) 70%,white); border-radius:9px; background:rgba(6,28,38,.92); box-shadow:0 8px 18px rgba(0,0,0,.2); text-align:center; }
.agent-label strong,.agent-label small { display:block; }
.agent-label strong { color:white; font-size:.72rem; }.agent-label small { overflow:hidden; color:var(--agent-light); font-size:.54rem; text-overflow:ellipsis; white-space:nowrap; }
.empty-station { position:absolute; z-index:6; left:54%; top:68%; width:18%; min-height:108px; display:grid; place-items:center; align-content:center; gap:2px; color:#b3cbc9; border:2px dashed rgba(160,218,207,.36); border-radius:16px; background:rgba(7,31,39,.34); transition:.2s ease; }
.empty-station:hover { color:white; border-color:#75dbc5; background:rgba(7,31,39,.65); transform:translateY(-4px); }
.empty-station span { font-size:1.4rem; }.empty-station strong { font-size:.69rem; }.empty-station small { font-size:.52rem; }
.approval-desk { position:absolute; z-index:7; right:4%; bottom:8%; width:17%; min-width:155px; min-height:93px; padding:14px; color:white; border:1px solid rgba(255,196,99,.3); border-radius:13px; background:linear-gradient(145deg,#5a3f24,#2f2c2c); box-shadow:0 15px 22px rgba(0,0,0,.25); text-align:left; }
.approval-desk span { position:absolute; right:10px; top:9px; display:grid; width:25px; height:25px; place-items:center; border-radius:50%; color:#4f3519; background:#ffc869; font-size:.65rem; font-weight:900; }
.approval-desk strong,.approval-desk small { display:block; max-width:75%; }.approval-desk strong { margin-bottom:4px; font-size:.65rem; }.approval-desk small { color:#d2b993; font-size:.5rem; }
.office-legend { min-height:48px; display:flex; align-items:center; gap:22px; padding:10px 18px; color:#b7cbc9; border-top:1px solid rgba(255,255,255,.08); background:#0a222c; font-size:.62rem; }
.office-legend .dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#38cd91; }.office-legend .dot.approval { background:#f4b24f; }.office-legend .dot.alert { background:#f06e6e; }.office-legend small { margin-left:auto; color:#688b91; }

.office-lower-grid { display:grid; grid-template-columns:1.7fr .8fr; gap:16px; margin-top:16px; }
.task-count { padding:5px 9px; border-radius:999px; color:#8a5d15; background:#fff1d5; font-size:.65rem; font-weight:850; }
.approval-list { display:grid; gap:4px; }
.approval-list article { display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid #edf1f2; }
.approval-list article:first-child { border-top:0; }
.task-agent { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; color:white; background:var(--task); font-size:.72rem; font-weight:900; }
.approval-list strong,.approval-list small { display:block; }.approval-list strong { font-size:.78rem; }.approval-list small { margin-top:2px; color:var(--muted); font-size:.67rem; }
.approve-btn { padding:7px 10px; color:var(--teal); border:1px solid #bcd8d2; border-radius:8px; background:#f3fbf9; font-size:.65rem; font-weight:850; }
.approve-btn.approved { color:white; border-color:var(--success); background:var(--success); }
.task-actions { display:flex; align-items:center; gap:6px; }
.reject-btn { padding:7px 9px; color:#94484b; border:1px solid #efcdce; border-radius:8px; background:#fff6f6; font-size:.65rem; font-weight:850; }
.approve-btn:disabled,.reject-btn:disabled { cursor:wait; opacity:.6; }
.impact-panel { display:grid; grid-template-columns:repeat(3,1fr); align-content:start; gap:10px; }
.impact-panel .panel-head,.impact-panel .text-link { grid-column:1/-1; }
.impact-metric { padding:11px; border-radius:11px; background:#f3f7f6; }
.impact-metric strong,.impact-metric span { display:block; }.impact-metric strong { color:var(--teal); font-size:1.35rem; }.impact-metric span { color:var(--muted); font-size:.6rem; line-height:1.3; }

.office-overlay { position:fixed; z-index:120; inset:0; display:none; align-items:center; justify-content:center; padding:25px; background:rgba(5,20,29,.72); backdrop-filter:blur(9px); }
.office-overlay.open { display:flex; animation:officeFade .18s ease; }.modal-open { overflow:hidden; }
@keyframes officeFade { from { opacity:0; } }
.employee-modal,.talent-modal { position:relative; width:min(680px,100%); max-height:min(820px,92vh); overflow:auto; padding:28px; border-radius:22px; background:white; box-shadow:0 30px 80px rgba(0,0,0,.34); }
.talent-modal { width:min(950px,100%); }
.modal-close { position:absolute; right:18px; top:16px; width:34px; height:34px; border:0; border-radius:50%; color:var(--muted); background:#f0f3f3; font-size:1.2rem; }
.employee-modal-head { display:flex; align-items:center; gap:16px; padding-right:38px; }
.employee-avatar { display:grid; flex:0 0 70px; height:70px; place-items:center; color:white; border:6px solid #edf5f3; border-radius:22px; background:var(--teal); font-size:.82rem; font-weight:900; }
.employee-modal-head h2 { margin:7px 0 0; color:var(--navy); font-size:1.55rem; }.employee-modal-head p { margin:1px 0; color:var(--muted); }
.employee-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:24px 0; }
.employee-stats div { padding:13px; border-radius:12px; background:#f2f6f5; }.employee-stats strong,.employee-stats span { display:block; }.employee-stats strong { color:var(--navy); font-size:1.2rem; }.employee-stats span { color:var(--muted); font-size:.62rem; }
.employee-modal h3 { font-size:.85rem; }.current-assignment { display:grid; grid-template-columns:38px 1fr; gap:12px; padding:15px; border:1px solid #cce2dd; border-radius:13px; background:#f3fbf9; }
.current-assignment > span { display:grid; width:38px; height:38px; place-items:center; color:white; border-radius:11px; background:var(--teal); }.current-assignment strong { font-size:.8rem; }.current-assignment p { margin:4px 0 0; color:var(--muted); font-size:.72rem; }
.employee-chat { margin-top:18px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#f5f8f7; }
.employee-chat-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 15px; border-bottom:1px solid var(--line); background:white; }
.employee-chat-head strong,.employee-chat-head small { display:block; }.employee-chat-head strong { color:var(--navy); font-size:.79rem; }.employee-chat-head small { margin-top:2px; color:var(--muted); font-size:.61rem; }
.real-ai-badge { flex:0 0 auto; padding:5px 8px; border-radius:999px; color:#277c60; background:#e7f3ee; font-size:.58rem; font-weight:850; }
.real-ai-badge.offline { color:#90611d; background:#fff0d3; }
.employee-chat-messages { min-height:145px; max-height:250px; overflow-y:auto; padding:14px; }
.employee-chat-message { max-width:88%; margin-bottom:9px; padding:10px 12px; border:1px solid #e4eaea; border-radius:12px 12px 12px 3px; background:white; font-size:.72rem; white-space:pre-wrap; }
.employee-chat-message.user { margin-left:auto; color:white; border-color:var(--teal); border-radius:12px 12px 3px 12px; background:var(--teal); }
.employee-chat-message.thinking { color:var(--muted); font-style:italic; }
.employee-chat-message.error { color:#94484b; border-color:#f3cccc; background:#fff2f2; }
.employee-chat-form { display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; border-top:1px solid var(--line); background:white; }
.employee-chat-form textarea { min-height:44px; max-height:120px; resize:vertical; padding:10px 11px; border:1px solid var(--line); border-radius:10px; outline:none; font-size:.72rem; }
.employee-chat-form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,118,110,.1); }
.employee-chat-note { padding:0 12px 10px; color:var(--muted); background:white; font-size:.58rem; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:23px; }
.talent-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding-right:38px; }.talent-heading h2 { margin:0; color:var(--navy); font-size:1.75rem; }.talent-heading p { margin:5px 0 0; color:var(--muted); }
.talent-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:25px; }
.talent-card { position:relative; display:flex; min-height:285px; flex-direction:column; padding:20px; border:1px solid var(--line); border-radius:16px; background:#fbfcfb; }
.talent-icon { display:grid; width:46px; height:46px; place-items:center; margin-bottom:23px; color:white; border-radius:13px; background:linear-gradient(145deg,var(--teal),var(--navy)); font-size:1rem; font-weight:900; }.talent-card .status { position:absolute; right:15px; top:17px; }.talent-card h3 { margin:0 0 2px; font-size:1.08rem; }.talent-card > strong { color:var(--teal); font-size:.7rem; }.talent-card p { flex:1; color:var(--muted); font-size:.73rem; }.talent-card > div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:13px; border-top:1px solid var(--line); }.talent-card b { color:var(--navy); font-size:.84rem; }

@media (max-width: 1100px) {
  .office-room { height:720px; }.ai-station { width:28%; }.station-one { left:5%; }.station-two { left:36%; }.station-three { left:67%; }.station-four { left:18%; top:65%; }.empty-station { left:50%; top:69%; width:22%; }.approval-desk { right:3%; bottom:6%; }
  .office-wall-left,.office-wall-right { width:18%; }.office-wall-center { left:35%; width:30%; }.office-window { display:none; }
  .office-lower-grid { grid-template-columns:1fr; }.talent-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 820px) {
  .office-welcome { align-items:flex-start; flex-direction:column; }.office-summary { width:100%; }.office-summary div { flex:1; min-width:0; }
  .office-topbar .icon-btn { display:none; }.role-switch span { display:none; }
  .office-room { height:auto; min-height:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:115px 16px 135px; }
  .office-room::before { inset:0; transform:none; }.office-room::after,.office-floor-grid { display:none; }
  .office-wall-left,.office-wall-right { display:none; }.office-wall-center { left:16px; right:16px; top:18px; width:auto; }
  .ai-station { position:relative; inset:auto; width:auto; min-width:0; height:190px; }.empty-station { position:relative; inset:auto; width:auto; min-height:150px; }.approval-desk { right:16px; left:16px; bottom:18px; width:auto; min-height:80px; }
  .plant { display:none; }.office-legend { flex-wrap:wrap; }.office-legend small { width:100%; margin-left:0; }
}

@media (max-width: 560px) {
  .office-content { padding:18px 12px; }.office-topbar { padding:0 12px; }.office-brandline small { display:none; }.office-topbar .btn { padding:0 10px; font-size:.68rem; }.role-switch select { max-width:132px; }
  .office-room { grid-template-columns:1fr; padding-bottom:125px; }.ai-station { width:100%; }.office-summary { display:grid; }.office-summary div + div { border-left:0; border-top:1px solid var(--line); }
  .approval-list article { grid-template-columns:35px 1fr; }.approval-list .task-actions { grid-column:2; }.impact-panel { grid-template-columns:1fr; }.impact-panel .panel-head,.impact-panel .text-link { grid-column:auto; }
  .talent-grid { grid-template-columns:1fr; }.employee-stats { grid-template-columns:1fr; }.modal-actions { align-items:stretch; flex-direction:column; }.talent-heading { display:block; }.talent-heading .demo-label { margin-top:12px; }
}

/* AI drawer and toast */
.ai-fab { position: fixed; z-index: 70; right: 22px; bottom: 22px; width: 58px; height: 58px; border: 0; border-radius: 18px; color: white; background: var(--teal); box-shadow: 0 14px 30px rgba(15,118,110,.35); font-size: 1.25rem; }
.ai-drawer { position: fixed; z-index: 80; right: 22px; bottom: 90px; width: min(390px,calc(100% - 32px)); max-height: 620px; display: none; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 24px 65px rgba(13,36,56,.27); }
.ai-drawer.open { display: block; animation: rise .2s ease; }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.ai-drawer-head { display: flex; justify-content: space-between; padding: 17px 18px; color: white; background: var(--navy); }
.ai-drawer-head strong { display: block; }
.ai-drawer-head small { color: #a9bbc6; }
.ai-close { border: 0; color: white; background: transparent; font-size: 1.2rem; }
.ai-messages { max-height: 390px; overflow-y: auto; padding: 17px; background: #f5f7f7; }
.message { max-width: 87%; margin-bottom: 10px; padding: 11px 13px; border-radius: 13px; font-size: .8rem; }
.message.bot { border-radius: 13px 13px 13px 3px; background: white; }
.message.user { margin-left: auto; border-radius: 13px 13px 3px 13px; color: white; background: var(--teal); }
.ai-input { display: flex; gap: 8px; padding: 13px; border-top: 1px solid var(--line); }
.ai-input input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 25px; transform: translate(-50%,20px); padding: 12px 18px; border-radius: 12px; color: white; background: var(--navy); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
.demo-label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 8px; color: #845710; background: #fff0d3; font-size: .68rem; font-weight: 850; }

@media (max-width: 1100px) {
  .nav-links { gap: 15px; }
  .nav-links a:nth-child(4), .nav-links a:nth-child(5) { display: none; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .buyer-grid { grid-template-columns: repeat(2,1fr); }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .preorder-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 820px) {
  .container { width: min(100% - 28px,var(--max)); }
  .topbar-inner span:nth-child(n+3) { display: none; }
  .nav { min-height: 68px; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-links { position: absolute; left: 0; right: 0; top: 68px; display: none; padding: 15px 22px 22px; border-bottom: 1px solid var(--line); background: white; box-shadow: var(--shadow-sm); }
  .nav-links.open { display: grid; }
  .nav-links a, .nav-links a:nth-child(4), .nav-links a:nth-child(5) { display: block; padding: 10px 0; border: 0; }
  .nav-actions .lang, .nav-actions .btn-outline { display: none; }
  .hero { min-height: 700px; }
  .hero-media::after { background: linear-gradient(90deg,rgba(247,246,242,.97),rgba(247,246,242,.78)); }
  .hero-inner { min-height: 700px; align-items: end; }
  .hero-copy { width: 100%; padding: 100px 0 150px; }
  .hero h1 { font-size: clamp(3rem,13vw,5rem); }
  .ai-search-card { grid-template-columns: 1fr; }
  .ai-search-label { display: none; }
  .trust-row, .category-grid { grid-template-columns: repeat(2,1fr); }
  .section-heading, .split, .ai-showcase { display: grid; grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .step:nth-child(2)::after { display: none; }
  .cta-panel { grid-template-columns: 1fr; padding: 35px; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
  .footer-brand { grid-column: 1/-1; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { min-height: 100vh; padding: 28px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .app-shell { grid-template-columns: 76px 1fr; }
  .app-sidebar { padding: 20px 10px; }
  .app-sidebar .brand-copy, .side-nav span:not(.side-icon), .side-label, .sidebar-account div { display: none; }
  .app-sidebar .brand { margin: 0 8px 32px; }
  .side-nav a { justify-content: center; }
  .sidebar-account { justify-content: center; left: 10px; right: 10px; }
  .app-topbar, .app-content { padding-left: 18px; padding-right: 18px; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .section { padding: 65px 0; }
  .nav-actions .btn-primary { min-height: 40px; padding: 0 12px; font-size: .74rem; }
  .hero-copy { padding-bottom: 145px; }
  .hero-copy > p { font-size: .95rem; }
  .ai-search-wrap { margin-top: -78px; }
  .trust-row, .category-grid, .product-grid, .buyer-grid, .steps, .metric-grid, .preorder-grid { grid-template-columns: 1fr; }
  .section-heading h2 { font-size: 2.25rem; }
  .step::after { display: none; }
  .cta-actions, .hero-actions { align-items: stretch; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .welcome { align-items: flex-start; flex-direction: column; }
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 64px; display: flex; padding: 7px; }
  .app-sidebar .brand, .side-label, .sidebar-account, .side-nav a:nth-child(n+6) { display: none; }
  .side-nav { width: 100%; display: grid; grid-template-columns: repeat(5,1fr); }
  .side-nav a { padding: 8px; }
  .app-main { padding-bottom: 68px; }
  .app-topbar { min-height: 62px; }
  .quick-search { width: 70%; }
  .app-actions .btn { display: none; }
}