:root {
  /* Night theme — Royal Blue: royal midnight background, royal blue, deep royal navy, azure accent */
  --bg: #060d22;
  --bg-2: #0b1633;
  --surface: rgba(120, 150, 255, 0.04);
  --surface-2: rgba(120, 150, 255, 0.07);
  --border: rgba(125, 150, 220, 0.18);
  --text: #e9effc;
  --muted: #9cadd0;
  --c1: #4a7dff;   /* royal blue */
  --c2: #2c55e0;   /* deep royal blue */
  --c3: #5cb8ff;   /* azure accent */
  --grad: linear-gradient(120deg, var(--c1), var(--c2));
  --radius: 14px;
  --shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
  --soft: #cdd8f2;
  --lead: #b7c5e4;
  --glass-1: rgba(255, 255, 255, 0.055);
  --glass-2: rgba(255, 255, 255, 0.02);
  --shine: rgba(255, 255, 255, 0.08);
  --nav-bg: color-mix(in srgb, var(--bg) 84%, transparent);
  --panel: color-mix(in srgb, var(--bg-2) 97%, transparent);
  --input-bg: rgba(0, 0, 0, 0.22);
  --grid-line: rgba(125, 150, 220, 0.12);
  --grid-base: rgba(125, 150, 220, 0.32);
  --marquee: #61719a;
  --up: #4ade80;
  color-scheme: dark;
  --head: "Plus Jakarta Sans", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  /* style tokens (fonts, buttons, cards, decoration layers) — kept as variables so the look is easy to tune */
  --head-weight: 700;
  --head-case: none;
  --head-track: -0.025em;
  --eyebrow-font: inherit;
  --eyebrow-pre: "";
  --btn-radius: 10px;
  --btn-bg: var(--grad);
  --btn-case: none;
  --btn-track: 0;
  --btn-shadow: 0 8px 22px -10px color-mix(in srgb, var(--c1) 65%, transparent);
  --btn-shadow-hover: 0 14px 30px -12px color-mix(in srgb, var(--c1) 75%, transparent);
  --card-bg: linear-gradient(160deg, var(--glass-1), var(--glass-2));
  --pattern: none;        /* background motif (an SVG used as a mask, painted in --c1) */
  --pattern-size: 60px;
  --pattern-op: 0;
  --divider: none;        /* ornament band above section headings and along the hero bottom */
  --divider-size: 40px 20px;
  --divider-w: 0px;
  --divider-h: 0px;
}

/* Day (light) theme */
:root[data-theme="light"] {
  /* Day theme — Royal Blue on crisp blue-white, dark royal-navy text */
  --bg: #f5f8ff;
  --bg-2: #e8eefc;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-2: #ffffff;
  --border: rgba(20, 40, 110, 0.11);
  --text: #0a1a40;
  --muted: #47577d;
  --c1: #1f4fd8;   /* royal blue */
  --c2: #16359e;   /* deep royal navy */
  --c3: #0b7fd1;   /* azure accent */
  --shadow: 0 24px 48px -24px rgba(20, 40, 110, 0.22);
  --soft: #2b3a63;
  --lead: #2b3a63;
  --glass-1: rgba(255, 255, 255, 0.96);
  --glass-2: rgba(255, 255, 255, 0.75);
  --shine: color-mix(in srgb, var(--c1) 6%, transparent);
  --nav-bg: color-mix(in srgb, var(--bg) 86%, transparent);
  --panel: rgba(255, 255, 255, 0.98);
  --input-bg: #ffffff;
  --grid-line: rgba(20, 40, 110, 0.08);
  --grid-base: rgba(20, 40, 110, 0.24);
  --marquee: #8e9cc0;
  --up: #15803d;
  color-scheme: light;
}
:root[data-theme="light"] .hero-glow {
  background:
    radial-gradient(600px 400px at 15% 30%, color-mix(in srgb, var(--c1) 12%, transparent), transparent 70%),
    radial-gradient(700px 500px at 85% 70%, color-mix(in srgb, var(--c2) 12%, transparent), transparent 70%),
    linear-gradient(to bottom, transparent 70%, var(--bg));
}
:root[data-theme="light"] .lead { text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg); }
:root.theme-anim, :root.theme-anim *, :root.theme-anim *::before, :root.theme-anim *::after {
  transition: background-color 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s, fill 0.5s !important;
}

/* Hero animation picker */
.story-picker { position: relative; flex: none; }
.story-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--c1); background: var(--surface-2); border: 1px solid var(--border); transition: border-color 0.2s, transform 0.2s;
}
.story-btn:hover { border-color: var(--c1); transform: rotate(-12deg); }
.story-btn:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }
.story-btn svg { width: 18px; height: 18px; }
.story-menu {
  position: absolute; right: 0; top: calc(100% + 12px); width: 262px; padding: 8px; z-index: 60;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); animation: cbIn 0.2s ease both;
}
.sm-head { padding: 6px 10px 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sm-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background 0.15s;
}
.sm-item:hover, .sm-item:focus-visible { background: color-mix(in srgb, var(--c1) 10%, transparent); outline: none; }
.sm-icon { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 9px; color: var(--c1); background: color-mix(in srgb, var(--c1) 12%, transparent); }
.sm-text { display: flex; flex-direction: column; line-height: 1.25; }
.sm-text b { font-size: 0.9rem; font-weight: 600; }
.sm-text small { font-size: 0.74rem; color: var(--muted); }
.sm-check { width: 16px; height: 16px; margin-left: auto; color: var(--c1); opacity: 0; flex: none; }
.sm-item[aria-checked="true"] .sm-check { opacity: 1; }
.sm-item[aria-checked="true"] b { color: var(--c1); }
.sm-sep { height: 1px; margin: 6px; background: var(--border); }
.nav-story { display: none; }

/* Day / night switch */
.theme-switch {
  position: relative; width: 64px; height: 34px; flex: none; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); padding: 0;
  display: flex; align-items: center; justify-content: space-between; padding-inline: 9px;
  color: var(--muted); transition: border-color 0.3s;
}
.theme-switch:hover { border-color: var(--c2); }
.theme-switch:focus-visible { outline: 2px solid var(--c2); outline-offset: 3px; }
.theme-switch svg { width: 15px; height: 15px; position: relative; z-index: 1; transition: color 0.3s; }
.theme-knob {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--c2) 60%, transparent);
  transition: transform 0.45s cubic-bezier(0.5, 1.6, 0.4, 0.8);
}
/* night: knob on the moon (right); day: knob on the sun (left) */
:root:not([data-theme="light"]) .theme-knob { transform: translateX(30px); }
:root:not([data-theme="light"]) .ts-moon, :root[data-theme="light"] .ts-sun { color: #fff; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: var(--head-weight); line-height: 1.15; letter-spacing: var(--head-track); text-transform: var(--head-case); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 1rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
h4 { font-size: 1.1rem; margin-bottom: 0.3rem; }
p { color: var(--muted); }

.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.section { padding: clamp(80px, 11vw, 130px) 0; position: relative; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c1); margin-bottom: 1rem; font-family: var(--eyebrow-font);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 12px var(--c1); animation: pulse 2s infinite; }
.eyebrow::before { content: var(--eyebrow-pre); }
.eyebrow:has(.dot)::before { content: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* Concept decoration layers (all off for Corporate) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--c1); opacity: var(--pattern-op);
  -webkit-mask: var(--pattern) 0 0 / var(--pattern-size) repeat; mask: var(--pattern) 0 0 / var(--pattern-size) repeat;
}
body > * { position: relative; z-index: 1; }
body > .nav { position: fixed; z-index: 50; }
body > .chatbot { position: fixed; z-index: 60; }
.section-head::before {
  content: ""; display: block; width: var(--divider-w); height: var(--divider-h); margin: 0 auto 18px; background: var(--c1);
  -webkit-mask: var(--divider) center / var(--divider-size) repeat-x; mask: var(--divider) center / var(--divider-size) repeat-x;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--divider-h); z-index: 2; pointer-events: none;
  background: var(--c1); opacity: 0.55;
  -webkit-mask: var(--divider) 0 50% / var(--divider-size) repeat-x; mask: var(--divider) 0 50% / var(--divider-size) repeat-x;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--btn-radius); font-weight: 600; font-size: 0.98rem; text-transform: var(--btn-case); letter-spacing: var(--btn-track);
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.btn-primary { background: var(--btn-bg); color: #fff; box-shadow: var(--btn-shadow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); }
.btn-ghost { border-color: var(--border); background: var(--surface); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: var(--surface-2); transform: translateY(-2px); }
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn.full { width: 100%; }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background 0.3s, border-color 0.3s, padding 0.3s; padding: 18px 0; border-bottom: 1px solid transparent; }
.nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(14px); border-color: var(--border); padding: 10px 0; }
.nav-inner { display: flex; align-items: center; gap: 24px; }
.nav-links { margin-left: auto; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--c2) 45%, transparent)); transition: transform 0.5s cubic-bezier(0.5, 1.6, 0.4, 0.8); }
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.06); }
.brand-text { font-family: "Jost", var(--head); font-weight: 500; font-size: 1.3rem; letter-spacing: 0.16em; line-height: 1.05; display: flex; flex-direction: column; }
.brand-text small { font-family: var(--body); font-weight: 500; font-size: 0.62rem; color: var(--muted); letter-spacing: 0.03em; margin-top: 2px; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 0.95rem; font-weight: 500; }
.nav-links a:not(.btn) { color: var(--muted); transition: color 0.2s; }
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; }
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle.open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 80px; }
#hero3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 15% 30%, color-mix(in srgb, var(--c1) 14%, transparent), transparent 70%),
    radial-gradient(700px 500px at 85% 70%, color-mix(in srgb, var(--c2) 18%, transparent), transparent 70%),
    linear-gradient(to bottom, transparent 70%, var(--bg));
}
.hero-content { position: relative; z-index: 2; max-width: 1180px; pointer-events: none; }
.hero-content > * { max-width: 640px; }
.hero-content a, .hero-content button { pointer-events: auto; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin-bottom: 1.4rem; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); margin-bottom: 2.2rem; color: var(--lead); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 2.6rem; }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.92rem; color: var(--muted); }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid var(--border); border-radius: 20px; z-index: 2; }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--c1); animation: scrollDot 1.8s infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Stats */
.stats { padding: 30px 0 10px; position: relative; z-index: 3; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--bg-2); padding: 34px 20px; text-align: center; }
.stat strong { display: block; font-family: var(--head); font-size: clamp(2rem, 4vw, 2.8rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: 0.92rem; }

/* Hero caption under the 3D atom / earth */
.hero-caption {
  position: absolute; z-index: 2; left: 72%; bottom: 11%; width: 30%; transform: translateX(-50%); text-align: center; pointer-events: none;
  font-family: var(--head); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  transition: opacity 0.6s;
}
.hero-caption.swap { opacity: 0; }
@media (max-width: 900px) { .hero-caption { display: none; } }

/* Story: atom -> spark -> world */
.story-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1200px; position: relative; }
.story-step {
  position: relative; padding: 34px 28px; border-radius: var(--radius); overflow: hidden; text-align: center;
  background: var(--card-bg); border: 1px solid var(--border);
  transform-style: preserve-3d; transition: transform 0.15s ease-out, border-color 0.3s;
}
.story-step:hover { border-color: color-mix(in srgb, var(--c2) 50%, transparent); }
.story-step > *:not(.card-shine) { transform: translateZ(30px); }
.story-step p { font-size: 0.95rem; }
.story-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c1); margin-bottom: 6px; }
.story-art { position: relative; width: 110px; height: 110px; margin: 0 auto 22px; }
/* stage 1: atom */
.art-atom .nuc { position: absolute; inset: 42%; border-radius: 50%; background: var(--grad); box-shadow: 0 0 22px var(--c2); animation: pulse 2s infinite; }
.art-atom i { position: absolute; inset: 30% 0; border: 2px solid var(--c1); border-radius: 50%; opacity: 0.75; }
.art-atom i:nth-of-type(1) { animation: atomSpin1 6s linear infinite; }
.art-atom i:nth-of-type(2) { animation: atomSpin2 6s linear infinite; border-color: var(--c2); }
.art-atom i:nth-of-type(3) { animation: atomSpin3 6s linear infinite; border-color: var(--c3); }
.art-atom i::after { content: ""; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: currentColor; color: inherit; background: var(--text); box-shadow: 0 0 10px var(--c1); }
@keyframes atomSpin1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes atomSpin2 { from { transform: rotate(60deg); } to { transform: rotate(420deg); } }
@keyframes atomSpin3 { from { transform: rotate(120deg); } to { transform: rotate(480deg); } }
/* stage 2: spark */
.art-spark span { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 14px var(--c2); animation: spark 2.4s ease-out infinite; }
.art-spark span:nth-child(1) { --tx: 0px; --ty: -46px; }
.art-spark span:nth-child(2) { --tx: 44px; --ty: -14px; animation-delay: 0.15s; }
.art-spark span:nth-child(3) { --tx: 27px; --ty: 38px; animation-delay: 0.3s; }
.art-spark span:nth-child(4) { --tx: -27px; --ty: 38px; animation-delay: 0.45s; }
.art-spark span:nth-child(5) { --tx: -44px; --ty: -14px; animation-delay: 0.6s; }
.art-spark::before { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--c1); box-shadow: 0 0 30px 8px var(--c1); animation: pulse 1.2s infinite; }
@keyframes spark { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; } }
/* stage 3: world (dotted Earth drawn by js/main.js, same map as the hero) */
.art-world { width: 160px; height: 160px; margin: -25px auto -3px; }  /* same total height as the other 110px icons */
.art-world::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 28%, transparent), color-mix(in srgb, var(--c2) 12%, transparent) 60%, transparent); }
.art-world canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes orbit { to { transform: rotate(360deg); } }
/* line icons used when the hero shows a story other than Atom -> Earth */
.story-art[hidden] { display: none; }
.art-icon { display: grid; place-items: center; color: var(--c1); }
.art-icon::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 22%, transparent), transparent); }
.art-icon svg { position: relative; width: 92px; height: 92px; overflow: visible; animation: iconFloat 4s ease-in-out infinite; }
.art-icon .fill { fill: color-mix(in srgb, var(--c1) 16%, transparent); }
.art-icon .accent { stroke: var(--c3); }
.art-icon .gold { stroke: #e9a800; fill: color-mix(in srgb, #fbbf24 55%, transparent); }
.art-icon .grow { transform-box: fill-box; transform-origin: bottom; animation: iconGrow 2.6s ease-in-out infinite; }
.art-icon .wave { animation: iconWave 3s ease-in-out infinite; }
.art-icon .w2 { animation-delay: -1s; }
.art-icon .w3 { animation-delay: -2s; }
.art-icon .spin { transform-box: fill-box; transform-origin: center; animation: iconSpin 14s linear infinite; }
@keyframes iconFloat { 50% { transform: translateY(-5px); } }
@keyframes iconGrow { 0%, 100% { transform: scale(1, 0.88); opacity: 0.75; } 50% { transform: scale(1, 1); opacity: 1; } }
@keyframes iconWave { 50% { transform: translateX(4px); } }
@keyframes iconSpin { to { transform: rotate(360deg); } }
.story-note { text-align: center; max-width: 640px; margin: 44px auto 0; font-size: 1.02rem; }
.story-note em { color: var(--text); font-weight: 600; }
@media (max-width: 1024px) { .story-step { padding: 28px 18px; } }
@media (max-width: 700px) { .story-steps { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* Section heads */
.section-head { text-align: center; max-width: 700px; margin: 0 auto 60px; }

/* Cards with 3D tilt */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; perspective: 1200px; }
.cards > .card { grid-column: span 2; }
.cards > .card:nth-child(n+4) { grid-column: span 3; }
.card, .cta-box {
  position: relative; border-radius: var(--radius); padding: 32px 26px;
  background: var(--card-bg);
  border: 1px solid var(--border); overflow: hidden;
  transform-style: preserve-3d; transition: transform 0.15s ease-out, border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
}
.card:hover { border-color: color-mix(in srgb, var(--c2) 50%, transparent); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--c1) 15%, transparent); }
.card > *:not(.card-shine) { transform: translateZ(30px); }
.card-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), var(--shine), transparent 45%);
}
.tilt:hover .card-shine { opacity: 1; }
.card-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c1) 18%, transparent), color-mix(in srgb, var(--c2) 25%, transparent)); color: var(--c1);
  border: 1px solid color-mix(in srgb, var(--c1) 25%, transparent);
}
.card-icon svg { width: 28px; height: 28px; }
.card p { font-size: 0.95rem; margin-bottom: 18px; }
.card ul { list-style: none; display: grid; gap: 8px; font-size: 0.9rem; color: var(--soft); }
.card li { padding-left: 20px; position: relative; }
.card li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--grad); transform: rotate(45deg); }

/* E-commerce */
.ecom-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; }
.ecom-text > p { margin-bottom: 28px; }
.ecom-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 32px; }
.ecom-feat { display: flex; gap: 12px; align-items: flex-start; }
.ef-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--c1); background: color-mix(in srgb, var(--c1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 25%, transparent); }
.ef-ico svg { width: 20px; height: 20px; }
.ecom-feat p { font-size: 0.9rem; }
.ecom-visual { position: relative; height: 560px; perspective: 1400px; display: grid; place-items: center; }
.ecom-visual::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 35%, transparent), color-mix(in srgb, var(--c1) 12%, transparent) 60%, transparent); }
.phone {
  position: relative; width: 250px; height: 500px; padding: 12px; border-radius: 40px;
  background: linear-gradient(150deg, #1e293b, #0b1220); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  transform: rotateY(-20deg) rotateX(8deg) rotateZ(2deg); transform-style: preserve-3d; animation: phoneFloat 7s ease-in-out infinite;
}
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #0b1220; z-index: 2; }
@keyframes phoneFloat { 50% { transform: rotateY(-12deg) rotateX(4deg) rotateZ(0deg) translateY(-12px); } }
.phone-screen { height: 100%; border-radius: 30px; overflow: hidden; background: #f6f7fd; color: #111633; padding: 44px 14px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 0.75rem; }
.shop-bar { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.shop-logo { font-family: var(--head); font-size: 0.95rem; background: linear-gradient(120deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shop-cart { position: relative; color: #0f172a; }
.shop-cart svg { width: 18px; height: 18px; }
.shop-cart b { position: absolute; top: -6px; right: -8px; width: 16px; height: 16px; border-radius: 50%; background: #ef4444; color: #fff; font-size: 0.6rem; display: grid; place-items: center; animation: pulse 2s infinite; }
.shop-banner { padding: 14px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, var(--c1), var(--c2) 60%, var(--c3)); display: flex; flex-direction: column; }
.shop-banner small { opacity: 0.9; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; }
.shop-banner strong { font-family: var(--head); font-size: 1.05rem; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
.shop-item { min-height: 0; background: #fff; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 4px 12px -6px rgba(40, 50, 110, 0.25); }
.shop-item span { font-size: 0.68rem; color: #535e85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-item b { font-size: 0.8rem; }
.si-img { flex: 1; min-height: 0; border-radius: 8px; position: relative; overflow: hidden; }
.si-img::after { content: ""; position: absolute; inset: 22% 26%; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.si-1 { background: linear-gradient(140deg, #a5f3fc, var(--c1)); }
.si-2 { background: linear-gradient(140deg, #ddd6fe, var(--c2)); }
.si-3 { background: linear-gradient(140deg, #fbcfe8, var(--c3)); }
.si-3::after { border-radius: 40% 40% 20% 20%; }
.si-4 { background: linear-gradient(140deg, #bbf7d0, #22c55e); }
.si-4::after { border-radius: 30%; }
.shop-btn { text-align: center; padding: 10px; border-radius: 999px; font-weight: 700; color: #fff; background: #111633; }
.float-card {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(10px);
  font-size: 0.8rem; animation: cardFloat 5s ease-in-out infinite;
}
.fc-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--c1); background: color-mix(in srgb, var(--c1) 12%, transparent); }
.fc-ico svg { width: 18px; height: 18px; }
.fc-2 .fc-ico { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.fc-3 .fc-ico { color: var(--c3); background: color-mix(in srgb, var(--c3) 14%, transparent); }
.float-card b { display: block; color: var(--text); font-size: 0.82rem; }
.float-card small { color: var(--muted); font-size: 0.72rem; }
.fc-1 { top: 10%; left: -2%; }
.fc-2 { top: 44%; right: -4%; animation-delay: 1.2s; }
.fc-2 small { color: var(--up); font-weight: 600; }
.fc-3 { bottom: 10%; left: 4%; animation-delay: 2.4s; }
@keyframes cardFloat { 50% { transform: translateY(-10px); } }
@media (max-width: 1024px) { .ecom-grid { grid-template-columns: 1fr; gap: 30px; } .ecom-visual { height: 520px; max-width: 460px; width: 100%; margin-inline: auto; } }
@media (max-width: 760px) {
  .ecom-features { grid-template-columns: 1fr; }
  .phone { transform: none; animation: none; width: 220px; height: 440px; }
  .ecom-visual { height: 480px; }
  .float-card { font-size: 0.72rem; padding: 8px 10px; }
  .fc-1 { left: 0; } .fc-2 { right: 0; } .fc-3 { left: 0; }
}

/* Why us */
.why { background: linear-gradient(to bottom, transparent, var(--bg-2) 30%, var(--bg-2) 70%, transparent); }
.why-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; }
.why-visual { position: relative; max-width: 500px; width: 100%; margin-inline: auto; perspective: 1400px; }
.growth-chart {
  position: relative; padding: 26px 26px 20px; border-radius: 22px;
  background: linear-gradient(160deg, var(--glass-1), var(--glass-2));
  border: 1px solid var(--border); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-1);
  transform: rotateY(-14deg) rotateX(8deg); transform-style: preserve-3d;
  animation: gcFloat 7s ease-in-out infinite;
}
.growth-chart::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 30%, transparent), transparent); filter: blur(10px); }
@keyframes gcFloat { 50% { transform: rotateY(-8deg) rotateX(4deg) translateY(-10px); } }
.gc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 22px; transform: translateZ(30px); }
.gc-icon { float: left; width: 38px; height: 38px; margin: 0 11px 0 0; padding: 6px; border-radius: 10px; color: var(--c1); background: color-mix(in srgb, var(--c1) 12%, transparent); }
.gc-icon svg { width: 100%; height: 100%; overflow: visible; }
.gc-icon .fill { fill: color-mix(in srgb, var(--c1) 18%, transparent); }
.gc-icon .accent { stroke: var(--c3); }
.gc-icon .gold { stroke: #e9a800; fill: color-mix(in srgb, #fbbf24 55%, transparent); }
.gc-title { display: block; font-family: var(--head); font-weight: 700; font-size: 1.15rem; }
.gc-sub { font-size: 0.8rem; color: var(--muted); }
.gc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-family: var(--head); font-weight: 700; font-size: 0.95rem; color: var(--up); background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.35); white-space: nowrap; }
.gc-arrow { font-size: 0.7rem; animation: gcBounce 1.6s ease-in-out infinite; }
@keyframes gcBounce { 50% { transform: translateY(-3px); } }
.gc-plot { position: relative; height: 240px; margin: 0 4px 28px; transform: translateZ(20px); }
.gc-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.gc-grid span { height: 1px; background: var(--grid-line); }
.gc-grid span:last-child { background: var(--grid-base); }
.gc-bars { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; }
.gc-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.gc-col em { position: absolute; top: 100%; margin-top: 8px; font-style: normal; font-size: 0.74rem; white-space: nowrap; color: var(--muted); }
/* 3D bar: front face + right side (::after) + top (::before) */
.gc-bar {
  --d: 12px; position: relative; width: 52%; max-width: 40px; height: 0; margin-right: var(--d);
  background: linear-gradient(to top, var(--c2), var(--c1));
  transition: height 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i) * 0.14s + 0.2s);
}
.gc-bar::after { content: ""; position: absolute; top: 0; left: 100%; width: var(--d); height: 100%; transform-origin: 0 0; transform: skewY(-45deg); background: linear-gradient(to top, color-mix(in srgb, var(--c2) 70%, #000), color-mix(in srgb, var(--c1) 75%, #000)); }
.gc-bar::before { content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: var(--d); transform-origin: 0 100%; transform: skewX(-45deg); background: color-mix(in srgb, var(--c1) 55%, #fff); }
.gc-col:last-child .gc-bar { background: linear-gradient(to top, var(--c2), var(--c3)); box-shadow: 0 0 30px color-mix(in srgb, var(--c3) 45%, transparent); }
.gc-col:last-child .gc-bar::after { background: linear-gradient(to top, color-mix(in srgb, var(--c2) 80%, #000), color-mix(in srgb, var(--c3) 75%, #000)); }
.gc-col:last-child .gc-bar::before { background: color-mix(in srgb, var(--c3) 60%, #fff); }
.gc-bar b { position: absolute; bottom: calc(100% + var(--d) + 6px); left: 50%; transform: translateX(-50%) translateY(6px); font-size: 0.72rem; font-weight: 600; color: var(--text); white-space: nowrap; padding: 2px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); opacity: 0; transition: opacity 0.4s, transform 0.4s; transition-delay: calc(var(--i) * 0.14s + 1.1s); }
.why-visual.in .gc-bar { height: var(--h); }
.why-visual.in .gc-bar b { opacity: 1; transform: translateX(-50%); }
.gc-trend { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gc-trend polyline { fill: none; stroke: url(#gcLine); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c2) 80%, transparent)); transition: stroke-dashoffset 1.6s ease 1.2s; }
.why-visual.in .gc-trend polyline { stroke-dashoffset: 0; }
.why-text > p { margin-bottom: 2rem; }
.why-text em { color: var(--text); font-style: normal; font-weight: 500; }
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.why-item { display: flex; gap: 14px; }
.why-num { font-family: var(--head); font-weight: 700; font-size: 0.9rem; color: var(--c1); padding-top: 2px; }
.why-item p { font-size: 0.92rem; }

/* Steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.steps::before { content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3)); opacity: 0.35; }
.step { text-align: center; padding: 0 10px; position: relative; }
.step-num {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 20px;
  font-family: var(--head); font-weight: 700; font-size: 1.5rem; background: var(--bg-2);
  border: 2px solid transparent; background-image: linear-gradient(var(--bg-2), var(--bg-2)), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box; position: relative; z-index: 1;
  transition: transform 0.4s;
}
.step:hover .step-num { transform: translateY(-6px) rotateY(180deg); }
.step p { font-size: 0.93rem; }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--border); padding: 26px 0; background: var(--bg-2); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 60px; width: max-content; animation: marquee 30s linear infinite; }
.marquee-track span { font-family: var(--head); font-weight: 600; font-size: 1.3rem; color: var(--marquee); white-space: nowrap; }
.marquee-ask { font-family: var(--head); font-weight: 700; font-size: 1.3rem; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marquee-ask:hover { text-decoration: underline; text-decoration-color: var(--c2); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 30px)); } }

/* CTA */
.cta-box { text-align: center; padding: clamp(50px, 7vw, 80px) 30px; background: linear-gradient(130deg, color-mix(in srgb, var(--c1) 15%, transparent), color-mix(in srgb, var(--c2) 22%, transparent) 60%, color-mix(in srgb, var(--c3) 15%, transparent)); }
.cta-box > *:not(.card-shine) { transform: translateZ(40px); }
.cta-box p { max-width: 520px; margin: 0 auto 30px; color: var(--soft); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.contact-info > p { margin-bottom: 2rem; }
.contact-list { list-style: none; display: grid; gap: 16px; }
.contact-list li { display: flex; align-items: center; gap: 14px; }
.contact-list a:hover { color: var(--c1); }
.ci { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--c1); }
.ci svg { width: 19px; height: 19px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 34px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.field { display: grid; gap: 6px; }
.field.full, .contact-form .btn, .form-note { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 500; color: var(--soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px; font: inherit; font-size: 0.95rem; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border); transition: border-color 0.2s, box-shadow 0.2s; resize: vertical;
}
.field select option { background: var(--bg-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2) 25%, transparent); }
.form-note { font-size: 0.9rem; color: var(--c1); min-height: 1.2em; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 0.92rem; color: var(--muted); }
.footer-links a:hover { color: var(--text); }
.copy { font-size: 0.85rem; width: 100%; text-align: center; padding-top: 20px; border-top: 1px solid var(--border); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards > .card, .cards > .card:nth-child(n+4) { grid-column: auto; }
  .cards > .card:last-child { grid-column: 1 / -1; }
  .why-grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .why-visual { max-width: 460px; }
  .growth-chart, .growth-chart:hover { transform: none; animation: none; }
}
@media (max-width: 760px) {
  .nav .brand-text small { display: none; }
  .gc-col em { font-size: 0.64rem; }
  .growth-chart { padding-inline: 18px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .why-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps::before { display: none; }
  .contact-form { grid-template-columns: 1fr; padding: 24px; }
  .footer-inner { justify-content: center; text-align: center; }
}
/* Tablet and below: the menu moves into a slide-out panel */
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .theme-switch { margin-left: auto; }
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(300px, 80vw); flex-direction: column; align-items: flex-start;
    padding: 90px 28px; gap: 22px; background: var(--panel); backdrop-filter: blur(16px);
    border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 0.35s ease; z-index: 1;
  }
  .nav-toggle, .theme-switch { z-index: 2; }
  .nav-links.open { transform: none; }
  .nav-links a:not(.btn) { font-size: 1.05rem; }
  /* the hero animation picker moves into the slide-out menu as a row of icons */
  .story-picker { display: none; }
  .nav-story { display: block; width: 100%; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--border); }
  .ns-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .sr-row { display: grid; grid-template-columns: repeat(4, 44px); gap: 10px; margin-top: 12px; }
  .sr-item { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; color: var(--c1); background: color-mix(in srgb, var(--c1) 10%, transparent); border: 2px solid transparent; }
  .sr-item[aria-checked="true"] { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 18%, transparent); }
  .sr-item:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
  .sr-item .sm-icon { width: 28px; height: 28px; padding: 4px; background: none; }
  .sr-auto { font-weight: 700; font-size: 0.9rem; }
}
@media (min-width: 961px) and (max-width: 1120px) { .nav-links { gap: 20px; } .nav-inner { gap: 16px; } }
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .cards > .card:last-child { grid-column: auto; }
}
/* Small phones */
@media (max-width: 380px) {
  .brand-mark { width: 38px; height: 38px; }
  .brand-text { font-size: 1.1rem; letter-spacing: 0.12em; }
  .nav-inner { gap: 14px; }
  .hero h1 { font-size: 2.3rem; }
  .btn { padding: 13px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Chat assistant ---------- */
.chatbot { position: fixed; right: 22px; bottom: 22px; z-index: 60; font-family: var(--body); }
.cb-launch {
  position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: var(--grad); box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--c2) 80%, transparent); display: grid; place-items: center;
  transition: transform 0.3s cubic-bezier(0.5, 1.6, 0.4, 0.8);
}
.cb-launch:hover { transform: scale(1.08); }
.cb-launch:focus-visible { outline: 3px solid var(--c1); outline-offset: 3px; }
.cb-launch::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--grad); z-index: -1; animation: cbPing 2.4s ease-out infinite; }
@keyframes cbPing { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.7); opacity: 0; } }
.cb-launch svg { width: 28px; height: 28px; position: absolute; transition: transform 0.3s, opacity 0.3s; }
.cb-ico-close { opacity: 0; transform: rotate(-90deg); }
.chatbot.open .cb-ico-open { opacity: 0; transform: rotate(90deg); }
.chatbot.open .cb-ico-close { opacity: 1; transform: none; }
.chatbot.open .cb-launch::before, .chatbot.seen .cb-launch::before, .chatbot.seen .cb-badge { display: none; }
.cb-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: #ef4444; color: #fff; font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }

.cb-teaser {
  position: absolute; right: 72px; bottom: 10px; width: max-content; max-width: 230px; padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 0.88rem; color: var(--text); cursor: pointer;
  opacity: 0; transform: translateY(8px) scale(0.95); pointer-events: none; transition: opacity 0.35s, transform 0.35s;
}
.cb-teaser b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chatbot.has-teaser .cb-teaser { opacity: 1; transform: none; pointer-events: auto; }

.cb-panel {
  position: absolute; right: 0; bottom: 76px; width: 370px; height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--border);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--c2) 12%, transparent);
  transform-origin: bottom right; opacity: 0; transform: translateY(14px) scale(0.92); transition: opacity 0.25s, transform 0.25s;
}
.chatbot.open .cb-panel { opacity: 1; transform: none; }
/* a closed chat must not catch taps/clicks (it used to sit invisibly over the page, blocking the mobile menu) */
.chatbot:not(.open) .cb-panel { pointer-events: none; }
.cb-panel[hidden] { display: none; }
.cb-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 16px; color: #fff; background: var(--grad); }
.cb-avatar { width: 38px; height: 38px; flex: none; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.cb-title { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.cb-title strong { font-family: var(--head); font-size: 1rem; }
.cb-title span { font-size: 0.75rem; opacity: 0.9; display: flex; align-items: center; gap: 6px; }
.cb-title i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.cb-restart, .cb-close { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, 0.15); display: grid; place-items: center; transition: background 0.2s; }
.cb-restart:hover, .cb-close:hover { background: rgba(255, 255, 255, 0.3); }
.cb-restart svg, .cb-close svg { width: 16px; height: 16px; }

.cb-log { flex: 1; overflow-y: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.cb-msg { max-width: 85%; padding: 10px 14px; font-size: 0.9rem; line-height: 1.5; animation: cbIn 0.3s ease both; }
.cb-msg a { color: var(--c1); text-decoration: underline; }
.cb-msg.bot { align-self: flex-start; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px 16px 16px 16px; }
.cb-msg.user { align-self: flex-end; background: var(--grad); color: #fff; border-radius: 16px 4px 16px 16px; }
.cb-typing { display: flex; gap: 4px; padding: 14px 16px; }
.cb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: cbDot 1s infinite; }
.cb-typing span:nth-child(2) { animation-delay: 0.15s; }
.cb-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cbDot { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes cbIn { from { opacity: 0; transform: translateY(6px); } }
.cb-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 4px; }
.cb-opt {
  font: inherit; font-size: 0.84rem; font-weight: 500; padding: 8px 13px; border-radius: 8px; cursor: pointer; text-align: left;
  color: var(--c2); background: transparent; border: 1.5px solid var(--c2); animation: cbIn 0.3s ease both;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.cb-opt:hover, .cb-opt:focus-visible { background: var(--c2); color: #fff; transform: translateY(-1px); outline: none; }
.cb-foot { padding: 9px; text-align: center; font-size: 0.74rem; color: var(--muted); border-top: 1px solid var(--border); }

@media (max-width: 480px) {
  .chatbot { right: 16px; bottom: 16px; }
  .cb-panel { position: fixed; inset: auto 10px 86px 10px; width: auto; height: min(560px, calc(100vh - 110px)); }
  .cb-teaser { max-width: 200px; }
}