/* =====================================================================
   index2 — premium variant. Page-local layer on top of shared.css.
   Same tokens, more depth: glow, glass, bento grid, spotlight, timeline.
   ===================================================================== */

:root {
  --glow-teal: rgba(127, 203, 173, 0.22);
  --glow-blue: rgba(67, 186, 255, 0.16);
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --glass: rgba(27, 35, 48, 0.62);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

::selection { background: rgba(127, 203, 173, 0.35); color: #fff; }

/* ---------- Header refinements ---------- */
.header { background: rgba(17, 24, 33, 0.72); transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease); }
.header.scrolled { background: rgba(17, 24, 33, 0.92); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.nav { gap: 2.6rem; }
.nav a { position: relative; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn-cta { padding: 0.5rem 1.1rem; font-size: 0.82rem; border-radius: 100px; }
@media (max-width: 720px) { .nav { display: flex; gap: 0.6rem; } .nav > a:not(.btn-cta) { display: none; } .nav .btn-cta { white-space: nowrap; padding: 0.45rem 0.85rem; font-size: 0.74rem; } .logo img { height: 38px; } .header-inner { gap: 1rem; } }

.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 100px; overflow: hidden; font-family: "Montserrat", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; }
.nav .lang a { padding: 0.35rem 0.6rem; color: var(--text-muted); font-size: 0.7rem; }
.nav .lang a::after { display: none; }
.nav .lang a.on { background: rgba(127, 203, 173, 0.15); color: var(--primary); }
.nav .lang a:hover { color: var(--text); }

/* ---------- Section rhythm ---------- */
section { padding: 7rem 0; position: relative; }
section.alt { background: linear-gradient(180deg, #151a22 0%, #171c25 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin-bottom: 3.5rem; }
.section-head .section-lead { margin-bottom: 0; }
.section-head .aside { color: var(--text-muted); font-size: 0.9rem; max-width: 300px; }
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; } }

.section-title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.section-lead { font-size: 1.08rem; line-height: 1.7; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.74rem; letter-spacing: 0.18em; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--primary); opacity: 0.8; }

/* ---------- Buttons ---------- */
.btn { padding: 0.85rem 1.6rem; border-radius: 100px; font-weight: 700; letter-spacing: 0.01em; }
.btn-primary { box-shadow: 0 0 0 1px rgba(127, 203, 173, 0.35), 0 10px 30px -10px rgba(127, 203, 173, 0.55); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(127, 203, 173, 0.5), 0 16px 40px -10px rgba(127, 203, 173, 0.7); }
.btn-outline { border-color: var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.02); }
.btn-outline:hover { border-color: var(--primary); background: rgba(127, 203, 173, 0.08); color: var(--text); }
.btn-ghost { color: var(--primary); padding-left: 0; padding-right: 0; gap: 0.4rem; }
.btn-ghost::after { content: "→"; transition: transform 0.2s var(--ease); }
.btn-ghost:hover::after { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero2 {
  min-height: calc(100vh - 78px);
  display: flex; align-items: center;
  padding: 5rem 0 6rem;
  isolation: isolate; overflow: hidden;
}
.hero2::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background-image: url("img/hero-bg.webp"); background-size: cover; background-position: center; opacity: 0.18;
}
.hero2::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(700px 500px at 12% 20%, var(--glow-teal), transparent 65%),
    radial-gradient(600px 460px at 88% 70%, var(--glow-blue), transparent 65%),
    linear-gradient(180deg, rgba(17, 24, 33, 0.55) 0%, rgba(17, 24, 33, 0.9) 60%, var(--bg) 100%);
}
.hero2 .gridlines {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 100%);
}
.hero2-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: center; }
@media (max-width: 980px) { .hero2-inner { grid-template-columns: 1fr; gap: 3rem; } }

.hero2 .kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.9rem 0.4rem 0.55rem; border-radius: 100px;
  border: 1px solid rgba(127, 203, 173, 0.28); background: rgba(127, 203, 173, 0.07);
  font-size: 0.8rem; font-weight: 600; color: var(--primary); letter-spacing: 0.02em; margin-bottom: 1.75rem;
}
.hero2 .kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(127, 203, 173, 0.18); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(127, 203, 173, 0.18); } 50% { box-shadow: 0 0 0 7px rgba(127, 203, 173, 0.05); } }

.hero2 h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.3rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
  margin-bottom: 1.5rem; max-width: 760px;
}
.hero2 h1 .hl .w {
  background: linear-gradient(92deg, var(--primary) 0%, var(--primary-light) 60%, var(--accent) 140%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero2 h1 .hl .w:last-child { background: linear-gradient(92deg, var(--primary-light) 0%, var(--accent) 110%); -webkit-background-clip: text; background-clip: text; }
.hero2 .sub { font-size: 1.2rem; color: var(--text-muted); line-height: 1.7; max-width: 600px; margin-bottom: 2.25rem; font-weight: 300; }
.hero2 .sub strong { color: var(--text); font-weight: 500; }
.hero2 .cta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 3rem; }
.hero2 .proof, .page-hero .proof { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 1.5rem 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .hero2 .proof, .page-hero .proof { grid-template-columns: repeat(2, 1fr); } }
.page-hero .proof { margin-top: 2.5rem; }
.hero2 .proof div strong, .page-hero .proof div strong { display: block; font-family: "Montserrat", sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.hero2 .proof div span, .page-hero .proof div span { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.02em; }

/* Hero visual: glass system panel */
.sys-panel {
  position: relative; border-radius: 16px; padding: 1.4rem;
  background: linear-gradient(160deg, rgba(27, 35, 48, 0.85), rgba(17, 24, 33, 0.7));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  animation: float 8s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sys-panel .bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.sys-panel .bar .title { font-family: "Montserrat", sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.sys-panel .bar .status { font-size: 0.72rem; color: var(--primary); display: inline-flex; align-items: center; gap: 0.4rem; }
.sys-panel .bar .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0.5rem; align-items: center; margin-bottom: 1.2rem; }
.flow .node { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.8rem 0.75rem; text-align: center; }
.flow .node.hot { border-color: rgba(127, 203, 173, 0.5); background: rgba(127, 203, 173, 0.08); box-shadow: 0 0 30px -10px var(--primary); }
.flow .node small { display: block; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem; }
.flow .node b { font-family: "Montserrat", sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.flow .link { width: 22px; height: 1px; background: linear-gradient(90deg, var(--line-strong), var(--primary)); position: relative; }
.flow .link::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.log { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.74rem; line-height: 1.75; color: var(--text-muted); border-top: 1px solid var(--line); padding-top: 0.9rem; }
.log span { color: var(--primary); }
.log em { color: var(--accent); font-style: normal; }
.sys-panel .chip {
  position: absolute; right: -14px; top: -16px;
  background: var(--bg-card); border: 1px solid rgba(127, 203, 173, 0.4); border-radius: 100px;
  padding: 0.45rem 0.9rem; font-size: 0.74rem; font-weight: 600; color: var(--text);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
}
.sys-panel .chip b { color: var(--primary); }

/* ---------- Trust strip ---------- */
.strip { padding: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.012); }
.strip .container { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.75rem; }
.strip .label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-right: 0.5rem; }
.strip .tech { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.95rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.01em; transition: color 0.2s; }
.strip .tech:hover { color: var(--text); }

/* ---------- Services: bento ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tile {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, rgba(27, 35, 48, 0.95), rgba(22, 29, 40, 0.95));
  border: 1px solid var(--line); border-radius: 14px; padding: 2rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease);
}
.tile::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(127, 203, 173, 0.55), transparent 40%, transparent 60%, rgba(67, 186, 255, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.tile:hover::before { opacity: 1; }
.tile .num { font-family: "Montserrat", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--primary); }
.tile .icon { width: 2.2rem; height: 2.2rem; stroke: var(--primary); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin: 0.25rem 0 0.5rem; }
.tile h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.tile p { color: var(--text-muted); font-size: 0.96rem; line-height: 1.65; }
.tile .more { margin-top: auto; padding-top: 1rem; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--primary); display: inline-flex; gap: 0.4rem; align-items: center; }
.tile .more::after { content: "→"; transition: transform 0.2s var(--ease); }
.tile:hover .more::after { transform: translateX(4px); }
.tile.feature { grid-column: span 2; padding: 2.5rem; background: linear-gradient(150deg, rgba(127, 203, 173, 0.12), rgba(27, 35, 48, 0.95) 45%, rgba(67, 186, 255, 0.06)); border-color: rgba(127, 203, 173, 0.3); }
.tile.feature h3 { font-size: 1.7rem; max-width: 520px; }
.tile.feature p { font-size: 1.02rem; max-width: 560px; }
.tile .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.tile .tags span { font-size: 0.74rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 100px; border: 1px solid var(--line-strong); color: var(--text-muted); }
.tile.feature .orb { position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(127, 203, 173, 0.28), transparent 65%); pointer-events: none; }
.bento-cta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 2rem 2.5rem; border-radius: 14px; border: 1px dashed rgba(127, 203, 173, 0.35); background: rgba(127, 203, 173, 0.04); }
.bento-cta h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.bento-cta p { color: var(--text-muted); font-size: 0.95rem; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .tile.feature { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .tile.feature { grid-column: span 1; } .bento-cta { grid-template-columns: 1fr; } }

/* ---------- Product spotlight ---------- */
.spotlight {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  padding: 3.5rem; border-radius: 20px; position: relative; overflow: hidden;
  background: linear-gradient(140deg, rgba(27, 35, 48, 1), rgba(17, 24, 33, 1));
  border: 1px solid var(--line-strong);
}
.spotlight::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 400px at 80% 50%, rgba(67, 186, 255, 0.14), transparent 65%), radial-gradient(500px 400px at 10% 90%, rgba(127, 203, 173, 0.14), transparent 65%); pointer-events: none; }
.spotlight > * { position: relative; }
.spotlight .flag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bg); background: var(--primary); padding: 0.35rem 0.75rem; border-radius: 100px; margin-bottom: 1.25rem; }
.spotlight h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.5rem; }
.spotlight .meta { color: var(--primary); font-weight: 600; margin-bottom: 1.25rem; }
.spotlight p.desc { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; }
.checks { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 2rem; }
.checks li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text); font-size: 0.95rem; }
.checks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: rgba(127, 203, 173, 0.15); border: 1px solid rgba(127, 203, 173, 0.5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fcbad' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; }
@media (max-width: 980px) { .spotlight { grid-template-columns: 1fr; padding: 2.25rem; gap: 2.5rem; } }

/* Mock chat UI */
.mock { border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(17, 24, 33, 0.85); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); overflow: hidden; }
.mock .top { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.mock .top i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.mock .top span { margin-left: auto; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.mock .body { padding: 1.1rem; display: grid; gap: 0.8rem; }
.msg { max-width: 88%; padding: 0.75rem 0.95rem; border-radius: 12px; font-size: 0.88rem; line-height: 1.5; }
.msg.user { justify-self: end; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong); color: var(--text); border-bottom-right-radius: 4px; }
.msg.bot { justify-self: start; background: rgba(127, 203, 173, 0.09); border: 1px solid rgba(127, 203, 173, 0.28); color: var(--text); border-bottom-left-radius: 4px; }
.msg.bot small { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.3rem; font-weight: 700; }
.sku { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.sku div { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem; background: rgba(255, 255, 255, 0.02); }
.sku div b { display: block; font-size: 0.82rem; font-family: "Montserrat", sans-serif; }
.sku div span { font-size: 0.72rem; color: var(--text-muted); }
.sku div em { display: inline-block; margin-top: 0.4rem; font-size: 0.68rem; font-style: normal; color: var(--primary); font-weight: 700; }
.insight { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: 0.8rem; font-size: 0.74rem; color: var(--text-muted); }
.insight b { color: var(--accent); font-weight: 600; }

.product-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.product-row .card { border-radius: 14px; }

/* ---------- Process timeline ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; position: relative; counter-reset: step; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 10%, var(--line-strong) 90%, transparent); }
.step { position: relative; padding-top: 3.25rem; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.8rem;
  background: var(--bg); border: 1px solid rgba(127, 203, 173, 0.5); color: var(--primary);
  box-shadow: 0 0 0 6px var(--bg), 0 0 30px -8px var(--primary);
}
.step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.step p { color: var(--text-muted); font-size: 0.93rem; line-height: 1.6; }
.step .dur { display: inline-block; margin-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(3, 1fr); } .steps::before { display: none; } }
@media (max-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Cases ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.case { border-radius: 14px; border: 1px solid var(--line); background: var(--bg-card); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; transition: transform 0.4s var(--ease), border-color 0.3s; }
.case:hover { transform: translateY(-3px); border-color: rgba(127, 203, 173, 0.4); }
.case .cat { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.case h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.case p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }
.case .stack { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.case .stack span { font-size: 0.7rem; padding: 0.25rem 0.6rem; border-radius: 100px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--text-muted); font-weight: 600; }
.case.wide { grid-column: span 2; background: linear-gradient(140deg, rgba(127, 203, 173, 0.1), var(--bg-card) 55%); border-color: rgba(127, 203, 173, 0.3); }
.case.wide h3 { font-size: 1.5rem; }
.case .kpi { display: flex; gap: 2rem; margin-top: 0.5rem; }
.case .kpi b { display: block; font-family: "Montserrat", sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--primary); letter-spacing: -0.02em; }
.case .kpi span { font-size: 0.78rem; color: var(--text-muted); }
@media (max-width: 980px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cases { grid-template-columns: 1fr; } .case.wide { grid-column: span 1; } }

/* ---------- Values / About ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.about .story p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25rem; }
.about .story p strong { color: var(--text); font-weight: 500; }
.values { display: grid; grid-template-columns: 1fr 1fr; }
.value { padding: 1.5rem; border: 1px solid var(--line); margin: -0.5px; }
.value b { display: block; font-family: "Montserrat", sans-serif; font-size: 1rem; margin-bottom: 0.4rem; }
.value p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }
.value .g { font-family: "Montserrat", sans-serif; font-size: 2rem; font-weight: 800; color: var(--primary); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.6rem; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 480px) { .values { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; }
.quote { border-radius: 14px; border: 1px solid var(--line); background: var(--bg-card); padding: 2rem; position: relative; display: flex; flex-direction: column; }
.quote::before { content: "“"; position: absolute; top: 0.6rem; left: 1.4rem; font-family: "Montserrat", sans-serif; font-size: 5rem; line-height: 1; color: rgba(127, 203, 173, 0.18); font-weight: 900; }
.quote p { position: relative; font-size: 1.05rem; line-height: 1.7; color: var(--text); font-weight: 300; margin-bottom: 1.25rem; }
.quote.big p { font-size: 1.45rem; font-family: "Montserrat", sans-serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.quote cite { margin-top: auto; font-style: normal; font-size: 0.82rem; color: var(--primary); font-weight: 600; }
.quote-col { display: grid; gap: 1.25rem; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-wrap { border-radius: 20px; border: 1px solid var(--line-strong); padding: 3.5rem; background: linear-gradient(140deg, rgba(27, 35, 48, 1), rgba(17, 24, 33, 1)); position: relative; overflow: hidden; }
.contact-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 400px at 100% 0%, rgba(127, 203, 173, 0.12), transparent 65%); pointer-events: none; }
.contact-wrap > * { position: relative; }
.contact-form { background: rgba(17, 24, 33, 0.6); border-radius: 14px; padding: 2.25rem; }
.field input, .field textarea, .field select { border-radius: 10px; padding: 0.85rem 1rem; background: rgba(255, 255, 255, 0.025); }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 3px rgba(127, 203, 173, 0.15); }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
@media (max-width: 820px) { .contact-wrap { padding: 2rem 1.5rem; } }

/* ---------- Footer ---------- */
.footer2 { border-top: 1px solid var(--line); padding: 4rem 0 2.5rem; color: var(--text-muted); font-size: 0.9rem; }
.footer2 .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer2 h3 { font-family: "Montserrat", sans-serif; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); margin-bottom: 1rem; }
.footer2 ul { list-style: none; display: grid; gap: 0.5rem; }
.footer2 a { color: var(--text-muted); }
.footer2 a:hover { color: var(--primary); }
.footer2 .brand p { max-width: 320px; line-height: 1.65; margin-top: 1rem; }
.footer2 .bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.82rem; }
@media (max-width: 820px) { .footer2 .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer2 .cols { grid-template-columns: 1fr; } }

/* ---------- Motion layer ---------- */

/* Hero entrance (staggered on load) */
.hero2 .anim { opacity: 0; transform: translateY(26px); animation: rise 1s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero2 h1 .w { display: inline-block; opacity: 0; transform: translateY(0.6em) rotate(2deg); animation: wordIn 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes wordIn { to { opacity: 1; transform: none; } }
.sys-panel { opacity: 0; animation: panelIn 1.1s var(--ease) 0.55s forwards, float 8s ease-in-out 1.7s infinite; }
@keyframes panelIn { from { opacity: 0; transform: translateX(40px) translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }
.sys-panel .chip { opacity: 0; animation: chipIn 0.7s var(--ease) 1.4s forwards; }
@keyframes chipIn { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: none; } }

/* Drifting glow orbs + parallax */
.hero2 .orb-bg { position: absolute; z-index: -2; border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: 0.55; }
.hero2 .orb-bg.a { width: 520px; height: 520px; left: -10%; top: -10%; background: radial-gradient(circle, rgba(127, 203, 173, 0.35), transparent 65%); animation: driftA 18s ease-in-out infinite; }
.hero2 .orb-bg.b { width: 460px; height: 460px; right: -8%; bottom: -12%; background: radial-gradient(circle, rgba(67, 186, 255, 0.28), transparent 65%); animation: driftB 22s ease-in-out infinite; }
@keyframes driftA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(90px, 60px); } }
@keyframes driftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-80px, -50px); } }
.hero2::before { inset: -12% 0; transform: translateY(var(--py, 0px)); will-change: transform; }

/* Live flow in the system panel */
.flow .link { overflow: visible; }
.flow .link::after { animation: travel 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes travel { 0% { left: -3px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 4px); opacity: 0; } }
.flow .node.hot { animation: hot 3.2s ease-in-out infinite; }
@keyframes hot { 0%, 100% { box-shadow: 0 0 30px -10px var(--primary); } 50% { box-shadow: 0 0 44px -6px var(--primary); border-color: rgba(127, 203, 173, 0.8); } }
.flow .node { transition: transform 0.4s var(--ease); }
.flow .node.ping { transform: scale(1.04); }
.log div { opacity: 0; transform: translateX(-6px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.log div.on { opacity: 1; transform: none; }
.log div.on:last-child::after, .log div.typing::after { content: "▍"; color: var(--primary); animation: blink 0.9s steps(2) infinite; margin-left: 2px; }
.log div.on:not(.typing):last-child::after { content: ""; }
@keyframes blink { to { opacity: 0; } }

/* Marquee */
.strip .container { display: block; }
.marquee { display: flex; align-items: center; gap: 2rem; }
.marquee .label { flex: none; }
.marquee .viewport { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 34s linear infinite; padding-right: 3.5rem; }
.marquee .viewport:hover .track { animation-play-state: paused; }
.marquee .tech { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Cursor spotlight on tiles + cases */
.tile::after, .case::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(127, 203, 173, 0.13), transparent 60%);
  transition: opacity 0.4s var(--ease);
}
.case { position: relative; overflow: hidden; }
.tile:hover::after, .case:hover::after { opacity: 1; }
.tile > *, .case > * { position: relative; z-index: 1; }
.tile .icon { transition: transform 0.5s var(--ease); }
.tile:hover .icon { transform: translateY(-3px) rotate(-6deg); }

/* Button shimmer */
.btn { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); transition: left 0s; }
.btn-primary:hover::after { left: 160%; transition: left 0.7s var(--ease); }

/* Eyebrow line grows in */
.reveal .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease) 0.25s; }
.reveal.in .eyebrow::before { transform: scaleX(1); }

/* Chat sequence in the InsightHub mock */
.mock .seq { opacity: 0; transform: translateY(12px); }
.spotlight.in .mock .seq { animation: rise 0.6s var(--ease) forwards; animation-delay: var(--d, 0s); }
.msg.bot { position: relative; min-height: 3.2rem; }
.msg.bot .dots { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); display: flex; gap: 5px; opacity: 1; }
.msg.bot .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: bounce 1s infinite; }
.msg.bot .dots i:nth-child(2) { animation-delay: 0.15s; } .msg.bot .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-5px); opacity: 1; } }
.msg.bot .txt { opacity: 0; }
.spotlight.in .msg.bot .dots { animation: hide 0.3s 2s forwards; }
.spotlight.in .msg.bot .txt { animation: rise 0.5s var(--ease) 2.1s forwards; }
@keyframes hide { to { opacity: 0; visibility: hidden; } }
.spotlight.in .sku div { animation: rise 0.5s var(--ease) forwards; opacity: 0; }
.spotlight.in .sku div:nth-child(1) { animation-delay: 2.6s; } .spotlight.in .sku div:nth-child(2) { animation-delay: 2.8s; }
.spotlight.in .insight b { display: inline-block; animation: pop 0.6s var(--ease) 3.4s both; }
@keyframes pop { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: none; opacity: 1; } }

/* Timeline line draws in, circles pop */
.steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) 0.2s; }
.steps.in::before { transform: scaleX(1); }
.step::before { transform: scale(0.4); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); }
.steps.in .step::before { transform: none; opacity: 1; }
.steps.in .step:nth-child(1)::before { transition-delay: 0.2s; } .steps.in .step:nth-child(2)::before { transition-delay: 0.5s; }
.steps.in .step:nth-child(3)::before { transition-delay: 0.8s; } .steps.in .step:nth-child(4)::before { transition-delay: 1.1s; } .steps.in .step:nth-child(5)::before { transition-delay: 1.4s; }

/* Big quote mark */
.quote::before { transform: scale(0.6); opacity: 0; transition: transform 0.8s var(--ease) 0.3s, opacity 0.8s var(--ease) 0.3s; }
.quote.in::before { transform: none; opacity: 1; }

/* Count-up numbers */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero2 .anim, .hero2 h1 .w, .sys-panel, .sys-panel .chip, .mock .seq, .msg.bot .txt, .sku div, .log div { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .msg.bot .dots, .marquee .track, .orb-bg, .flow .link::after, .flow .node.hot { animation: none !important; }
  .steps::before, .step::before, .quote::before, .reveal .eyebrow::before { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* =====================================================================
   Sub-page shell: compact hero, pillar nav, legal layout
   ===================================================================== */
.page-hero { padding: 5.5rem 0 4rem; position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(640px 420px at 8% 10%, var(--glow-teal), transparent 65%),
    radial-gradient(520px 400px at 92% 90%, var(--glow-blue), transparent 65%);
}
.page-hero .gridlines { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.3;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 40% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 70% 80% at 40% 50%, #000 20%, transparent 100%); }
.page-hero .crumbs { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-bottom: 1.5rem; }
.page-hero .crumbs a { color: var(--text-muted); } .page-hero .crumbs a:hover { color: var(--primary); }
.page-hero .crumbs b { color: var(--primary); font-weight: 700; }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; max-width: 860px; margin-bottom: 1.25rem; }
.page-hero h1 .hl { background: linear-gradient(92deg, var(--primary) 0%, var(--primary-light) 45%, var(--accent) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero .sub { font-size: 1.15rem; color: var(--text-muted); line-height: 1.7; max-width: 680px; font-weight: 300; }
.page-hero .sub strong { color: var(--text); font-weight: 500; }
.page-hero .cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.page-hero .anim { opacity: 0; transform: translateY(22px); animation: rise 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); }

.pillar-nav { position: sticky; top: 78px; z-index: 50; background: rgba(17, 24, 33, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.pillar-nav .container { display: flex; gap: 0.5rem; overflow-x: auto; padding-top: 0.75rem; padding-bottom: 0.75rem; scrollbar-width: none; }
.pillar-nav .container::-webkit-scrollbar { display: none; }
.pillar-nav a { flex: none; font-family: "Montserrat", sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); padding: 0.45rem 0.95rem; border-radius: 100px; border: 1px solid transparent; transition: all 0.2s; white-space: nowrap; }
.pillar-nav a span { color: var(--primary); margin-right: 0.4rem; }
.pillar-nav a:hover, .pillar-nav a.active { color: var(--text); border-color: rgba(127, 203, 173, 0.35); background: rgba(127, 203, 173, 0.07); }

.pillar { scroll-margin-top: 140px; }
.pillar .section-head .num { font-family: "Montserrat", sans-serif; font-size: 4rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: rgba(127, 203, 173, 0.08); -webkit-text-stroke: 1px rgba(127, 203, 173, 0.7); margin-bottom: 0.75rem; display: block; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pillar-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .pillar-grid, .pillar-grid.two { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pillar-grid, .pillar-grid.two { grid-template-columns: 1fr; } }
.tile.sm { padding: 1.6rem; gap: 0.5rem; }
.tile.sm h3 { font-size: 1.08rem; }
.tile.sm p { font-size: 0.92rem; }
.tile.sm .icon { width: 1.8rem; height: 1.8rem; margin: 0 0 0.35rem; }

.cta-band { border-radius: 20px; border: 1px solid var(--line-strong); padding: 3.5rem; text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(140deg, rgba(27, 35, 48, 1), rgba(17, 24, 33, 1)); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 300px at 50% 120%, rgba(127, 203, 173, 0.18), transparent 65%); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 0.75rem; }
.cta-band p { color: var(--text-muted); max-width: 560px; margin: 0 auto 1.75rem; font-size: 1.05rem; }
.cta-band .cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

.legal { padding: 4rem 0 6rem; }
.legal .legal-content { margin: 0; padding: 0; max-width: 800px; }
.legal .legal-content h2 { font-size: 1.2rem; margin: 2.25rem 0 0.6rem; letter-spacing: -0.01em; }
.legal .legal-content p, .legal .legal-content li { color: var(--text-muted); line-height: 1.75; }
.legal .legal-content ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal .legal-content li { margin-bottom: 0.4rem; }
.legal .legal-back { display: inline-flex; gap: 0.4rem; margin-top: 3rem; font-family: "Montserrat", sans-serif; font-weight: 700; }

/* =====================================================================
   InsightHub product page
   ===================================================================== */
.ih-hero { padding: 5.5rem 0 5rem; }
.ih-hero .hero2-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; }
@media (max-width: 980px) { .ih-hero .hero2-inner { grid-template-columns: 1fr; gap: 3rem; } }
.ih-hero .brand-row { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.ih-hero .brand-row .mark { width: 40px; height: 40px; padding: 0; line-height: 1; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, var(--primary), var(--accent)); color: var(--bg); font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 1.1rem; box-shadow: 0 10px 30px -10px rgba(127, 203, 173, 0.7); }
.ih-hero .brand-row b { font-family: "Montserrat", sans-serif; font-size: 1.15rem; letter-spacing: -0.01em; }
.ih-hero .brand-row span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); font-weight: 700; padding: 0.25rem 0.6rem; border: 1px solid rgba(127, 203, 173, 0.35); border-radius: 100px; }
.ih-hero .proof { grid-template-columns: repeat(3, auto); }

.mock-tabs { display: flex; gap: 0.4rem; padding: 0.6rem; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.mock-tabs button { font-family: "Montserrat", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.4rem 0.8rem; border-radius: 100px; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.mock-tabs button.on { color: var(--primary); border-color: rgba(127, 203, 173, 0.35); background: rgba(127, 203, 173, 0.08); }
.mock-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mock .pane[hidden] { display: none; }
.mock .pane { padding: 1.1rem; display: grid; gap: 0.8rem; }
.mock .pane.in .seq { animation: rise 0.6s var(--ease) forwards; animation-delay: var(--d, 0s); }
.mock .pane.in .msg.bot .dots { animation: hide 0.3s 2s forwards; }
.mock .pane.in .msg.bot .txt { animation: rise 0.5s var(--ease) 2.1s forwards; }
.mock .pane.in .sku div { animation: rise 0.5s var(--ease) forwards; opacity: 0; }
.mock .pane.in .sku div:nth-child(1) { animation-delay: 2.6s; } .mock .pane.in .sku div:nth-child(2) { animation-delay: 2.8s; }
.mock .pane.in .insight b { display: inline-block; animation: pop 0.6s var(--ease) 3.4s both; }
.mock table { width: 100%; border-collapse: collapse; font-size: 0.8rem; opacity: 0; }
.mock .pane.in table { animation: rise 0.5s var(--ease) 2.5s forwards; }
.mock th, .mock td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); }
.mock th { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.mock td b { font-family: "Montserrat", sans-serif; font-weight: 700; }
.mock td.low { color: #f2b56b; font-weight: 600; }
.mock td.ok { color: var(--primary); font-weight: 600; }

.video { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); aspect-ratio: 16 / 9; display: grid; place-items: center; background: radial-gradient(600px 400px at 30% 40%, rgba(127, 203, 173, 0.18), transparent 65%), radial-gradient(500px 400px at 80% 80%, rgba(67, 186, 255, 0.14), transparent 65%), var(--bg-card); }
.video .play { display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.4rem 0.9rem 0.9rem; border-radius: 100px; background: rgba(17, 24, 33, 0.7); border: 1px solid var(--line-strong); color: var(--text); font-family: "Montserrat", sans-serif; font-weight: 700; backdrop-filter: blur(10px); transition: transform 0.3s var(--ease), border-color 0.2s; }
.video .play:hover { transform: scale(1.03); border-color: var(--primary); color: var(--text); }
.video .play i { width: 46px; height: 46px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(127, 203, 173, 0.15); }
.video .play i::after { content: ""; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--bg); margin-left: 3px; }
.video small { position: absolute; bottom: 0.9rem; left: 1rem; right: 1rem; font-size: 0.72rem; color: var(--text-muted); }

.problems { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 720px) { .problems { grid-template-columns: 1fr; } }
.problem { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.5rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.problem .x { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: "Montserrat", sans-serif; font-weight: 900; color: #f2b56b; background: rgba(242, 181, 107, 0.1); border: 1px solid rgba(242, 181, 107, 0.3); }
.problem h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.problem p { color: var(--text-muted); font-size: 0.93rem; line-height: 1.6; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-grid .group { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; margin-top: 1rem; font-family: "Montserrat", sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.feature-grid .group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.feature-grid .group:first-child { margin-top: 0; }

.platforms { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.platforms span { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.85rem; padding: 0.6rem 1rem; border-radius: 100px; border: 1px solid var(--line-strong); color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.02); transition: all 0.2s; }
.platforms span:hover { color: var(--text); border-color: rgba(127, 203, 173, 0.45); }

.billing { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.35rem; border-radius: 100px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.02); margin-bottom: 2rem; }
.billing button { font-family: "Montserrat", sans-serif; font-size: 0.8rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: 100px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.billing button.on { background: var(--primary); color: var(--bg); }
.billing button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.billing .bonus { font-size: 0.72rem; color: var(--primary); font-weight: 700; padding-right: 0.75rem; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 520px; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 2rem; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-card); }
.plan.pop { border-color: rgba(127, 203, 173, 0.5); background: linear-gradient(160deg, rgba(127, 203, 173, 0.1), var(--bg-card) 55%); box-shadow: 0 30px 60px -30px rgba(127, 203, 173, 0.35); }
.plan .ribbon { position: absolute; top: -12px; left: 2rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--bg); background: var(--primary); padding: 0.3rem 0.7rem; border-radius: 100px; }
.plan h3 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.plan .for { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; }
.plan .price { font-family: "Montserrat", sans-serif; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.plan .price small { font-family: "Roboto", sans-serif; font-size: 0.9rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.plan .price-note { font-size: 0.78rem; color: var(--text-muted); min-height: 1.2rem; margin: 0.4rem 0 1.5rem; }
.plan .checks { margin-bottom: 1.75rem; }
.plan .checks li { font-size: 0.92rem; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan .fine { text-align: center; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.6rem; }

.trial-wrap { border-radius: 20px; border: 1px solid var(--line-strong); padding: 3.5rem; position: relative; overflow: hidden; background: linear-gradient(140deg, rgba(27, 35, 48, 1), rgba(17, 24, 33, 1)); display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.trial-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 400px at 0% 100%, rgba(127, 203, 173, 0.14), transparent 65%); pointer-events: none; }
.trial-wrap > * { position: relative; }
@media (max-width: 900px) { .trial-wrap { grid-template-columns: 1fr; padding: 2rem 1.5rem; } }
.trial-wrap .steps-mini { list-style: none; display: grid; gap: 0.9rem; margin-top: 1.5rem; }
.trial-wrap .steps-mini li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--text-muted); font-size: 0.95rem; }
.trial-wrap .steps-mini li b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: "Montserrat", sans-serif; font-size: 0.72rem; color: var(--primary); border: 1px solid rgba(127, 203, 173, 0.5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* InsightHub: hero proof row + 3-step timeline */
.ih-hero .proof { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.5rem 2.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .ih-hero .proof { grid-template-columns: 1fr 1fr; } }
.ih-hero .proof div strong { display: block; font-family: "Montserrat", sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.ih-hero .proof div span { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.02em; }
.steps.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .steps.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps.three { grid-template-columns: 1fr; } }

/* InsightHub: video in hero, demo panel section */
.ih-hero .hero-video { aspect-ratio: 16 / 10; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.ih-hero .hero-video::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(127, 203, 173, 0.25), transparent 40%), linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; opacity: 0.6; }
.ih-hero .hero-video .badge-top { position: absolute; top: 1rem; left: 1rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--primary); padding: 0.3rem 0.7rem; border: 1px solid rgba(127, 203, 173, 0.35); border-radius: 100px; background: rgba(17, 24, 33, 0.6); }
.video .play { position: relative; cursor: pointer; font-size: 0.95rem; }
.video .play:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.video.playing { background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video small a { color: var(--text-muted); text-decoration: underline; }
.demo-wrap { max-width: 720px; margin: 0 auto; }
.mock.demo { border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
.mock.demo .pane { min-height: 340px; align-content: start; }
/* InsightHub: hero is a 50/50 split, video fills its column */
.ih-hero .hero2-inner { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.ih-hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.ih-hero .hero-video { aspect-ratio: 16 / 9; width: 100%; max-width: 100%; margin: 0; }
.ih-hero .sys-panel { width: 100%; max-width: 100%; }
@media (max-width: 980px) { .ih-hero .hero2-inner { grid-template-columns: 1fr; } }

/* InsightHub: audience chooser */
.audience-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 760px) { .audience-pick { grid-template-columns: 1fr; } }
.audience { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.6rem; padding: 2.25rem; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(170deg, rgba(27, 35, 48, 0.95), rgba(22, 29, 40, 0.95)); color: var(--text); transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease); }
.audience:hover { transform: translateY(-4px); border-color: rgba(127, 203, 173, 0.45); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); color: var(--text); }
.audience .num { font-family: "Montserrat", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); }
.audience .icon { width: 2.4rem; height: 2.4rem; stroke: var(--primary); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin: 0.25rem 0 0.5rem; }
.audience h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.audience p { color: var(--text-muted); font-size: 1rem; line-height: 1.65; max-width: 460px; }
.audience .more { margin-top: auto; padding-top: 1rem; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--primary); display: inline-flex; gap: 0.4rem; }
.audience .more::after { content: "→"; transition: transform 0.2s var(--ease); }
.audience:hover .more::after { transform: translateX(4px); }
.mock-tabs { flex-wrap: wrap; }

/* ---------- InsightHub: richer motion on problem cards and feature tiles ---------- */
.problem.reveal { transform: translateX(-28px); transition-delay: calc(var(--i, 0) * 0.12s); }
.problem.reveal.in { transform: none; }
.problem { transition: transform 0.8s var(--ease), opacity 0.8s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease); }
.problem:hover { transform: translateY(-3px); border-color: rgba(127, 203, 173, 0.4); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8); }
.problem .x { position: relative; transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.5s var(--ease); }
.problem .x::before { content: "!"; display: block; transition: transform 0.4s var(--ease), opacity 0.3s; }
.problem.in .x { animation: ringPulse 2.6s ease-out infinite; animation-delay: calc(var(--i, 0) * 0.4s + 0.8s); }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(242, 181, 107, 0.35); } 70% { box-shadow: 0 0 0 12px rgba(242, 181, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 181, 107, 0); } }
.problem:hover .x { animation: none; background: rgba(127, 203, 173, 0.12); border-color: rgba(127, 203, 173, 0.5); color: var(--primary); transform: rotate(360deg); }
.problem:hover .x::before { content: "✓"; }
.problem h3 { transition: color 0.3s; }
.problem:hover h3 { color: var(--primary); }
.problem p { position: relative; }
.problem p::after { content: ""; position: absolute; left: 0; bottom: -0.6rem; height: 1px; width: 0; background: linear-gradient(90deg, var(--primary), transparent); transition: width 0.6s var(--ease); }
.problem:hover p::after { width: 100%; }

.feature-grid .group::after { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) 0.15s; }
.feature-grid .group.in::after { transform: scaleX(1); }
.feature-grid .group { opacity: 0; transform: translateX(-10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.feature-grid .group.in { opacity: 1; transform: none; }
.tile.sm .icon * { stroke-dasharray: 80; stroke-dashoffset: 80; }
:is(.tile.sm,.is-anim).in .icon * { animation: draw 1.3s var(--ease) forwards; animation-delay: calc(0.25s + var(--d, 0s)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
:is(.tile.sm,.is-anim).in .icon { animation: iconPop 0.7s var(--ease) 0.15s backwards; }
@keyframes iconPop { 0% { transform: scale(0.5) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tile.sm::before { transition: opacity 0.4s var(--ease); }
.tile.sm h3 { position: relative; display: inline-block; }
.tile.sm h3::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: var(--primary); transition: width 0.5s var(--ease); }
.tile.sm:hover h3::after { width: 100%; }
.tile.sm p { transition: color 0.3s; }
.tile.sm:hover p { color: var(--text); }
.tile.sm[data-delay="1"] { --d: 0.12s; } .tile.sm[data-delay="2"] { --d: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .problem.reveal, .feature-grid .group { opacity: 1 !important; transform: none !important; transition: none !important; }
  .problem.in .x, :is(.tile.sm,.is-anim).in .icon, :is(.tile.sm,.is-anim).in .icon * { animation: none !important; }
  .tile.sm .icon * { stroke-dasharray: none; stroke-dashoffset: 0; }
  .feature-grid .group::after { transform: none !important; }
}

/* InsightHub: shop + ERP platform groups */
.platform-groups { display: grid; gap: 1.5rem; }
.pg-label { display: block; font-family: "Montserrat", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.6rem; }

/* ---------- Platform logos (shop + ERP) ---------- */
.logos { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.logo-item { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 1.1rem; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.025); transition: border-color 0.25s, background 0.25s, transform 0.3s var(--ease); }
.logo-item:hover { border-color: rgba(127, 203, 173, 0.45); background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
.logo-item img { height: 24px; width: auto; max-width: 150px; display: block; filter: grayscale(1) brightness(1.35) contrast(0.95); opacity: 0.8; transition: filter 0.3s, opacity 0.3s; }
.logo-item.wide img { height: 20px; }
.logo-item:hover img { filter: none; opacity: 1; }
.logo-item.wordmark { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.logo-item.wordmark:hover { color: var(--text); }
.logo-item.wordmark.more { font-weight: 600; font-size: 0.82rem; color: var(--primary); border-style: dashed; }
.marquee .track .logo-item { flex: none; height: 44px; }
.marquee .track .logo-item img { height: 20px; }
.marquee .track .logo-item.wide img { height: 17px; }
.hero-video::before { opacity: 0.35 !important; }
.ih-hero .hero-video[style*="video-thumb"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 24, 33, 0.25), rgba(17, 24, 33, 0.7)); pointer-events: none; }
.ih-hero .hero-video > * { position: relative; z-index: 1; }
.video.playing::after { display: none; }

.logo-item img[alt="Odoo"] { height: 36px; }
.logo-item img[alt="SAP Business One"], .logo-item img[alt="Sage"] { height: 22px; }
.marquee .track .logo-item img[alt="Odoo"] { height: 30px; }

/* Logo tiles: icon + name */
.logo-item { gap: 0.6rem; }
.logo-item .name { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.86rem; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
.logo-item:hover .name { color: var(--text); }
.logo-item img { max-width: 120px; }
.marquee .track .logo-item .name { font-size: 0.8rem; }

/* InsightHub webshop + overview: stacked hero, centered copy, full-width video below */
.ih-hero.stacked { padding-bottom: 4rem; }
.ih-hero.stacked .hero2-inner { grid-template-columns: 1fr; gap: 3rem; justify-items: center; text-align: center; }
.ih-hero.stacked .hero2-inner > div:first-child { max-width: 820px; display: flex; flex-direction: column; align-items: center; }
.ih-hero.stacked h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); max-width: 820px; }
.ih-hero.stacked .sub { max-width: 640px; }
.ih-hero.stacked .cta-row { justify-content: center; }
.ih-hero.stacked .proof { justify-content: center; text-align: left; border-top: 0; padding-top: 0; margin-top: 2rem; }
.ih-hero.stacked .hero-video { max-width: 1000px; width: 100%; aspect-ratio: 16 / 9; }
.ih-hero.stacked .hero-video .play { transform: scale(1.15); }
.ih-hero.stacked .hero-video .play:hover { transform: scale(1.2); }

/* ---------- Feature tiles: animated mini scenes ---------- */
:is(.tile.sm,.is-anim) .stage { position: relative; height: 118px; margin-bottom: 1.1rem; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)); border: 1px solid var(--line); font-family: "Roboto", sans-serif; font-size: 0.72rem; color: var(--text-muted); }
:is(.tile.sm,.is-anim) .stage svg { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.tile.sm,.is-anim) .stage .tag, :is(.tile.sm,.is-anim) .stage .badge { position: absolute; right: 0.6rem; bottom: 0.55rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--primary); background: rgba(127, 203, 173, 0.12); border: 1px solid rgba(127, 203, 173, 0.35); padding: 0.2rem 0.5rem; border-radius: 100px; opacity: 0; }
:is(.tile.sm,.is-anim).in .stage .tag, :is(.tile.sm,.is-anim).in .stage .badge { animation: tagIn 6s var(--ease) infinite; }
@keyframes tagIn { 0%, 55% { opacity: 0; transform: translateY(6px); } 65%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* search */
.s-search .bar { position: absolute; left: 0.7rem; right: 0.7rem; top: 0.8rem; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(17, 24, 33, 0.7); padding: 0 0.7rem; display: flex; align-items: center; color: var(--text); font-size: 0.72rem; }
.s-search .q::after { content: "Geschenk für Yoga-Fan"; display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; border-right: 1px solid var(--primary); }
:is(.tile.sm,.is-anim).in .s-search .q::after { animation: type 6s steps(22) infinite; }
@keyframes type { 0% { width: 0; } 30%, 90% { width: 11.5em; } 100% { width: 0; } }
.s-search .hits { position: absolute; left: 0.7rem; top: 3.4rem; display: flex; gap: 0.4rem; }
.s-search .hits span { padding: 0.3rem 0.55rem; border-radius: 6px; background: rgba(127, 203, 173, 0.1); border: 1px solid rgba(127, 203, 173, 0.3); color: var(--text); font-size: 0.66rem; opacity: 0; transform: translateY(6px); }
:is(.tile.sm,.is-anim).in .s-search .hits span { animation: hit 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-search .hits span:nth-child(2) { animation-delay: 0.25s; }
@keyframes hit { 0%, 35% { opacity: 0; transform: translateY(6px); } 45%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* clock */
.s-clock svg { position: absolute; left: 0.8rem; top: 50%; width: 76px; height: 76px; transform: translateY(-50%); }
.s-clock svg circle { stroke: var(--line-strong); } .s-clock svg .dot { fill: var(--primary); stroke: none; }
.s-clock svg line { transform-origin: 32px 32px; }
:is(.tile.sm,.is-anim).in .s-clock .h { animation: rot 12s linear infinite; } :is(.tile.sm,.is-anim).in .s-clock .m { animation: rot 2s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.s-clock .bubbles { position: absolute; left: 6.2rem; top: 1.4rem; display: grid; gap: 0.35rem; }
.s-clock .bubbles i { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); width: 70px; opacity: 0; }
.s-clock .bubbles i:nth-child(2) { width: 46px; background: rgba(127, 203, 173, 0.25); } .s-clock .bubbles i:nth-child(3) { width: 58px; }
:is(.tile.sm,.is-anim).in .s-clock .bubbles i { animation: pop2 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-clock .bubbles i:nth-child(2) { animation-delay: 0.5s; } :is(.tile.sm,.is-anim).in .s-clock .bubbles i:nth-child(3) { animation-delay: 1s; }
@keyframes pop2 { 0%, 10% { opacity: 0; transform: translateX(-6px); } 20%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

/* tickets */
.s-tickets .t { position: absolute; left: 0.7rem; right: 0.7rem; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); display: flex; align-items: center; gap: 0.5rem; padding: 0 0.55rem; color: var(--text); font-size: 0.66rem; }
.s-tickets .t b { width: 8px; height: 8px; border-radius: 50%; background: #f2b56b; flex: none; }
.s-tickets .t1 { top: 0.7rem; } .s-tickets .t2 { top: 2.45rem; } .s-tickets .t3 { top: 4.2rem; }
:is(.tile.sm,.is-anim).in .s-tickets .t1, :is(.tile.sm,.is-anim).in .s-tickets .t2 { animation: solved 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-tickets .t2 { animation-delay: 0.6s; }
@keyframes solved { 0%, 30% { opacity: 1; } 45%, 90% { opacity: 0.35; border-color: rgba(127, 203, 173, 0.4); text-decoration: line-through; } 100% { opacity: 1; } }
:is(.tile.sm,.is-anim).in .s-tickets .t1 b, :is(.tile.sm,.is-anim).in .s-tickets .t2 b { animation: dotOk 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-tickets .t2 b { animation-delay: 0.6s; }
@keyframes dotOk { 0%, 30% { background: #f2b56b; } 45%, 90% { background: var(--primary); } 100% { background: #f2b56b; } }

/* sync */
.s-sync .spin { position: absolute; left: 0.9rem; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); }
:is(.tile.sm,.is-anim).in .s-sync .spin { animation: rot 3s linear infinite; }
.s-sync .rows { position: absolute; left: 3.6rem; right: 0.7rem; top: 0.75rem; display: grid; gap: 0.35rem; }
.s-sync .rows div { display: flex; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: var(--text); font-size: 0.66rem; }
.s-sync em { font-style: normal; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.s-sync .n1::after { content: "12 Stk."; } .s-sync .n2::after { content: "8 Stk."; } .s-sync .n3::after { content: "3 Stk."; }
:is(.tile.sm,.is-anim).in .s-sync .n1::after { animation: n1 6s steps(1) infinite; } :is(.tile.sm,.is-anim).in .s-sync .n2::after { animation: n2 6s steps(1) infinite; } :is(.tile.sm,.is-anim).in .s-sync .n3::after { animation: n3 6s steps(1) infinite; }
@keyframes n1 { 0%, 45% { content: "12 Stk."; } 50%, 100% { content: "9 Stk."; } }
@keyframes n2 { 0%, 55% { content: "8 Stk."; } 60%, 100% { content: "24 Stk."; } }
@keyframes n3 { 0%, 65% { content: "3 Stk."; } 70%, 100% { content: "0 Stk."; } }

/* brand */
.s-brand .chat { position: absolute; inset: 0.7rem; display: grid; gap: 0.35rem; align-content: start; --b: var(--primary); }
.s-brand .u, .s-brand .a { max-width: 88%; padding: 0.35rem 0.55rem; border-radius: 8px; font-size: 0.66rem; color: var(--text); }
.s-brand .u { justify-self: end; background: rgba(255, 255, 255, 0.07); }
.s-brand .a { background: color-mix(in srgb, var(--b) 18%, transparent); border: 1px solid color-mix(in srgb, var(--b) 45%, transparent); }
:is(.tile.sm,.is-anim).in .s-brand .chat { animation: brand 8s steps(1) infinite; }
@keyframes brand { 0% { --b: #7fcbad; } 25% { --b: #43baff; } 50% { --b: #f2b56b; } 75% { --b: #d78bff; } }
.s-brand .swatches { position: absolute; right: 0.6rem; bottom: 0.55rem; display: flex; gap: 0.3rem; }
.s-brand .swatches i { width: 10px; height: 10px; border-radius: 50%; opacity: 0.5; }
.s-brand .swatches i:nth-child(1) { background: #7fcbad; } .s-brand .swatches i:nth-child(2) { background: #43baff; } .s-brand .swatches i:nth-child(3) { background: #f2b56b; } .s-brand .swatches i:nth-child(4) { background: #d78bff; }
:is(.tile.sm,.is-anim).in .s-brand .swatches i { animation: sw 8s steps(1) infinite; }
:is(.tile.sm,.is-anim).in .s-brand .swatches i:nth-child(2) { animation-delay: 2s; } :is(.tile.sm,.is-anim).in .s-brand .swatches i:nth-child(3) { animation-delay: 4s; } :is(.tile.sm,.is-anim).in .s-brand .swatches i:nth-child(4) { animation-delay: 6s; }
@keyframes sw { 0% { opacity: 1; transform: scale(1.35); } 25% { opacity: 0.5; transform: none; } }

/* multi */
.s-multi { padding: 0.8rem 0.7rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-content: start; }
.s-multi .chip { padding: 0.3rem 0.55rem; border-radius: 100px; border: 1px solid var(--line-strong); color: var(--text-muted); font-size: 0.66rem; }
:is(.tile.sm,.is-anim).in .s-multi .chip { animation: chipOn 8s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-multi .c2 { animation-delay: 2s; } :is(.tile.sm,.is-anim).in .s-multi .c3 { animation-delay: 4s; } :is(.tile.sm,.is-anim).in .s-multi .c4 { animation-delay: 6s; }
@keyframes chipOn { 0%, 4% { color: var(--text-muted); border-color: var(--line-strong); background: transparent; } 8%, 22% { color: var(--bg); background: var(--primary); border-color: var(--primary); } 28%, 100% { color: var(--text-muted); border-color: var(--line-strong); background: transparent; } }
.s-multi .line { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 1rem; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.s-multi .line::after { content: ""; position: absolute; inset: 0; width: 25%; background: var(--primary); border-radius: 3px; }
:is(.tile.sm,.is-anim).in .s-multi .line::after { animation: slide 8s var(--ease) infinite; }
@keyframes slide { 0% { left: 0; } 25% { left: 25%; } 50% { left: 50%; } 75% { left: 75%; } 100% { left: 0; } }

/* office */
.s-office .q { position: absolute; left: 0.7rem; right: 0.7rem; top: 0.6rem; padding: 0.3rem 0.5rem; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--text); font-size: 0.64rem; }
.s-office table { position: absolute; left: 0.7rem; right: 0.7rem; top: 2.6rem; border-collapse: collapse; width: calc(100% - 1.4rem); font-size: 0.64rem; }
.s-office td { padding: 0.18rem 0.4rem; border-bottom: 1px solid var(--line); color: var(--text); }
.s-office td.v { text-align: right; font-weight: 700; color: #f2b56b; } .s-office tr.ok td.v { color: var(--primary); }
.s-office tr { opacity: 0; }
:is(.tile.sm,.is-anim).in .s-office tr { animation: rowIn 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-office tr:nth-child(2) { animation-delay: 0.3s; } :is(.tile.sm,.is-anim).in .s-office tr:nth-child(3) { animation-delay: 0.6s; }
@keyframes rowIn { 0%, 25% { opacity: 0; transform: translateX(-6px); } 35%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ticket flow */
.s-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; padding: 0.6rem; }
.s-flow .col { position: relative; border-radius: 6px; background: rgba(255, 255, 255, 0.03); padding: 0.3rem; }
.s-flow .col span { display: block; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem; }
.s-flow .slot { height: 34px; border-radius: 5px; border: 1px dashed var(--line-strong); }
.s-flow .card { height: 34px; border-radius: 5px; background: rgba(127, 203, 173, 0.18); border: 1px solid rgba(127, 203, 173, 0.5); position: relative; z-index: 1; }
:is(.tile.sm,.is-anim).in .s-flow .card { animation: moveCard 7s var(--ease) infinite; }
@keyframes moveCard { 0%, 20% { transform: translateX(0); } 35%, 55% { transform: translateX(calc(100% + 0.4rem + 0.6rem)); } 70%, 90% { transform: translateX(calc(200% + 0.8rem + 1.2rem)); opacity: 1; } 96% { opacity: 0; } 100% { transform: translateX(0); opacity: 0; } }

/* chart */
.s-chart .bars { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; height: 70px; display: flex; align-items: flex-end; gap: 0.35rem; }
.s-chart .bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--primary), rgba(127, 203, 173, 0.25)); transform: scaleY(0); transform-origin: bottom; }
:is(.tile.sm,.is-anim).in .s-chart .bars i { animation: bar 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-chart .bars i:nth-child(2) { animation-delay: 0.1s; } :is(.tile.sm,.is-anim).in .s-chart .bars i:nth-child(3) { animation-delay: 0.2s; } :is(.tile.sm,.is-anim).in .s-chart .bars i:nth-child(4) { animation-delay: 0.3s; } :is(.tile.sm,.is-anim).in .s-chart .bars i:nth-child(5) { animation-delay: 0.4s; } :is(.tile.sm,.is-anim).in .s-chart .bars i:nth-child(6) { animation-delay: 0.5s; }
@keyframes bar { 0% { transform: scaleY(0); } 20%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.s-chart .tag { top: 0.6rem; bottom: auto; }

/* shield */
.s-shield svg { position: absolute; left: 0.9rem; top: 50%; width: 64px; height: 64px; transform: translateY(-50%); }
.s-shield .sh, .s-shield .ck { stroke-dasharray: 90; stroke-dashoffset: 90; }
:is(.tile.sm,.is-anim).in .s-shield .sh { animation: draw2 6s var(--ease) infinite; } :is(.tile.sm,.is-anim).in .s-shield .ck { animation: draw2 6s var(--ease) 0.6s infinite; }
@keyframes draw2 { 0% { stroke-dashoffset: 90; } 25%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 90; } }
.s-shield .eu, .s-shield .eu2 { position: absolute; left: 5.6rem; padding: 0.25rem 0.5rem; border-radius: 100px; font-size: 0.62rem; font-weight: 700; color: var(--primary); border: 1px solid rgba(127, 203, 173, 0.35); background: rgba(127, 203, 173, 0.1); opacity: 0; }
.s-shield .eu { top: 1.6rem; } .s-shield .eu2 { top: 3.6rem; }
:is(.tile.sm,.is-anim).in .s-shield .eu { animation: tagIn 6s var(--ease) infinite; animation-delay: -1.5s; } :is(.tile.sm,.is-anim).in .s-shield .eu2 { animation: tagIn 6s var(--ease) infinite; animation-delay: -1s; }

/* qualify */
.s-qualify .row { position: absolute; left: 0.7rem; display: flex; align-items: center; gap: 0.45rem; color: var(--text); font-size: 0.66rem; }
.s-qualify .row i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line-strong); }
.s-qualify .r1 { top: 0.8rem; } .s-qualify .r2 { top: 2.5rem; } .s-qualify .r3 { top: 4.2rem; }
:is(.tile.sm,.is-anim).in .s-qualify .row i { animation: check 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-qualify .r2 i { animation-delay: 0.7s; } :is(.tile.sm,.is-anim).in .s-qualify .r3 i { animation-delay: 1.4s; }
@keyframes check { 0%, 15% { background: transparent; border-color: var(--line-strong); } 25%, 90% { background: var(--primary); border-color: var(--primary); } 100% { background: transparent; } }

/* calendar */
.s-cal .grid { position: absolute; left: 0.8rem; top: 0.8rem; display: grid; grid-template-columns: repeat(7, 16px); gap: 5px; }
.s-cal .grid i { width: 16px; height: 16px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.s-cal .grid i.free { background: rgba(127, 203, 173, 0.25); }
:is(.tile.sm,.is-anim).in .s-cal .grid i.pick { animation: pick 6s var(--ease) infinite; }
@keyframes pick { 0%, 30% { background: rgba(127, 203, 173, 0.25); box-shadow: none; } 45%, 90% { background: var(--primary); box-shadow: 0 0 0 4px rgba(127, 203, 173, 0.2); } 100% { background: rgba(127, 203, 173, 0.25); } }

/* form */
.s-form .f { position: absolute; left: 0.7rem; right: 0.7rem; height: 22px; border-radius: 6px; border: 1px solid var(--line-strong); background: rgba(17, 24, 33, 0.6); overflow: hidden; }
.s-form .f1 { top: 0.7rem; } .s-form .f2 { top: 2.5rem; }
.s-form .f span { position: absolute; left: 0.5rem; top: 50%; height: 8px; transform: translateY(-50%); border-radius: 4px; background: rgba(255, 255, 255, 0.35); width: 0; }
:is(.tile.sm,.is-anim).in .s-form .f1 span { animation: fill 6s var(--ease) infinite; } :is(.tile.sm,.is-anim).in .s-form .f2 span { animation: fill 6s var(--ease) 0.8s infinite; }
@keyframes fill { 0%, 10% { width: 0; } 35%, 90% { width: 60%; } 100% { width: 0; } }
.s-form .consent { position: absolute; left: 0.7rem; top: 4.5rem; display: flex; align-items: center; gap: 0.4rem; font-size: 0.64rem; color: var(--text); }
.s-form .consent i { width: 22px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); position: relative; }
.s-form .consent i::after { content: ""; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
:is(.tile.sm,.is-anim).in .s-form .consent i { animation: toggle 6s var(--ease) infinite; } :is(.tile.sm,.is-anim).in .s-form .consent i::after { animation: knob 6s var(--ease) infinite; }
@keyframes toggle { 0%, 55% { background: rgba(255, 255, 255, 0.12); } 65%, 90% { background: var(--primary); } 100% { background: rgba(255, 255, 255, 0.12); } }
@keyframes knob { 0%, 55% { left: 1px; } 65%, 90% { left: 11px; } 100% { left: 1px; } }

/* crm */
.s-crm { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.8rem; }
.s-crm .lead { padding: 0.35rem 0.5rem; border-radius: 6px; background: rgba(127, 203, 173, 0.15); border: 1px solid rgba(127, 203, 173, 0.45); color: var(--text); font-size: 0.62rem; white-space: nowrap; }
.s-crm .arrow { flex: 1; height: 1px; background: var(--line-strong); position: relative; }
.s-crm .arrow::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
:is(.tile.sm,.is-anim).in .s-crm .arrow::after { animation: travel2 3s var(--ease) infinite; }
@keyframes travel2 { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.s-crm .box { padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--line-strong); font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.7rem; color: var(--text); }
:is(.tile.sm,.is-anim).in .s-crm .box { animation: boxGlow 3s var(--ease) infinite; }
@keyframes boxGlow { 0%, 80% { border-color: var(--line-strong); box-shadow: none; } 92% { border-color: var(--primary); box-shadow: 0 0 20px -6px var(--primary); } 100% { border-color: var(--line-strong); } }

@media (prefers-reduced-motion: reduce) {
  :is(.tile.sm,.is-anim) .stage *, :is(.tile.sm,.is-anim) .stage *::after, :is(.tile.sm,.is-anim) .stage *::before { animation: none !important; }
  :is(.tile.sm,.is-anim) .stage .tag, :is(.tile.sm,.is-anim) .stage .badge, .s-search .hits span, .s-office tr, .s-shield .eu, .s-shield .eu2, .s-clock .bubbles i, .s-call .bubbles i, .s-call .wave { opacity: 1 !important; transform: none !important; }
  .s-search .q::after { width: 11.5em; } .s-chart .bars i { transform: scaleY(1); } .s-shield .sh, .s-shield .ck { stroke-dashoffset: 0; }
}

/* ---------- Problem cards: animated scenes (amber accent) ---------- */
.problem { grid-template-columns: auto 1fr 200px; align-items: center; }
@media (max-width: 900px) { .problem { grid-template-columns: auto 1fr; } .problem .stage { grid-column: 1 / -1; } }
.problem .stage { position: relative; height: 104px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)); border: 1px solid var(--line); font-size: 0.66rem; color: var(--text-muted); --amb: #f2b56b; }
.problem .stage .count, .problem .stage .drop, .problem .stage .none { position: absolute; right: 0.5rem; bottom: 0.45rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: var(--amb); background: rgba(242, 181, 107, 0.12); border: 1px solid rgba(242, 181, 107, 0.4); padding: 0.18rem 0.45rem; border-radius: 100px; opacity: 0; }
.problem.in .stage .count, .problem.in .stage .drop, .problem.in .stage .none { animation: tagIn 6s var(--ease) infinite; }
.problem:hover .stage { border-color: rgba(127, 203, 173, 0.35); }

/* no results */
.p-search .bar { position: absolute; left: 0.6rem; right: 0.6rem; top: 0.7rem; height: 26px; border-radius: 7px; border: 1px solid var(--line-strong); background: rgba(17, 24, 33, 0.7); padding: 0 0.55rem; display: flex; align-items: center; color: var(--text); font-size: 0.64rem; }
.p-search .q::after { content: "etwas Passendes zum Geburtstag"; display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; border-right: 1px solid var(--amb); }
.problem.in .p-search .q::after { animation: type2 6s steps(30) infinite; }
@keyframes type2 { 0% { width: 0; } 40%, 90% { width: 14.5em; } 100% { width: 0; } }
.p-search .none { left: 0.6rem; right: auto; top: 3.1rem; bottom: auto; }

/* ticket pile */
.p-pile .t { position: absolute; left: 0.6rem; right: 0.6rem; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); padding: 0 0.5rem; display: flex; align-items: center; color: var(--text); font-size: 0.62rem; opacity: 0; transform: translateY(-8px); }
.p-pile .t1 { top: 0.55rem; } .p-pile .t2 { top: 2.05rem; } .p-pile .t3 { top: 3.55rem; } .p-pile .t4 { top: 5.05rem; }
.problem.in .p-pile .t { animation: pileIn 6s var(--ease) infinite; }
.problem.in .p-pile .t2 { animation-delay: 0.5s; } .problem.in .p-pile .t3 { animation-delay: 1s; } .problem.in .p-pile .t4 { animation-delay: 1.5s; }
@keyframes pileIn { 0%, 5% { opacity: 0; transform: translateY(-8px); } 15%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

/* cart abandonment */
.p-cart .steps { position: absolute; left: 0.6rem; right: 0.6rem; top: 0.6rem; display: flex; justify-content: space-between; font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }
.p-cart .track { position: absolute; left: 0.6rem; right: 0.6rem; top: 1.9rem; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.p-cart .track i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--amb)); }
.problem.in .p-cart .track i { animation: cartFill 6s var(--ease) infinite; }
@keyframes cartFill { 0% { width: 0; } 40%, 62% { width: 66%; } 75%, 100% { width: 0; } }
.p-cart .ask { position: absolute; left: 0.6rem; top: 3rem; padding: 0.3rem 0.5rem; border-radius: 7px; background: rgba(255, 255, 255, 0.07); color: var(--text); font-size: 0.62rem; opacity: 0; }
.problem.in .p-cart .ask { animation: askIn 6s var(--ease) infinite; }
@keyframes askIn { 0%, 35% { opacity: 0; transform: translateY(4px); } 45%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; } }

/* locked data */
.p-locked .sys { position: absolute; top: 0.7rem; width: 48px; height: 34px; border-radius: 7px; border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.62rem; color: var(--text); background: rgba(255, 255, 255, 0.03); }
.p-locked .s1 { left: 0.6rem; } .p-locked .s2 { left: calc(50% - 24px); } .p-locked .s3 { right: 0.6rem; }
.p-locked .hop { position: absolute; top: 3.4rem; left: 1.6rem; width: 9px; height: 9px; border-radius: 50%; background: var(--amb); box-shadow: 0 0 0 4px rgba(242, 181, 107, 0.18); }
.problem.in .p-locked .hop { animation: hop 6s var(--ease) infinite; }
@keyframes hop { 0%, 10% { left: 1.6rem; } 25%, 35% { left: calc(50% - 4px); } 50%, 60% { left: calc(100% - 1.9rem); } 75%, 85% { left: calc(50% - 4px); } 100% { left: 1.6rem; } }

/* no answer */
.p-noanswer .u { position: absolute; left: 0.6rem; top: 0.7rem; padding: 0.3rem 0.5rem; border-radius: 7px; background: rgba(255, 255, 255, 0.07); color: var(--text); font-size: 0.64rem; }
.p-noanswer .dots { position: absolute; left: 0.6rem; top: 2.7rem; display: flex; gap: 4px; }
.p-noanswer .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); opacity: 0.4; }
.problem.in .p-noanswer .dots i { animation: waitDot 1s infinite; } .problem.in .p-noanswer .dots i:nth-child(2) { animation-delay: 0.15s; } .problem.in .p-noanswer .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes waitDot { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }
.problem.in .p-noanswer .u { animation: leave 6s var(--ease) infinite; }
@keyframes leave { 0%, 55% { opacity: 1; transform: none; } 70%, 92% { opacity: 0.25; transform: translateX(-6px); } 100% { opacity: 1; } }

/* empty form */
.p-form .f { position: absolute; left: 0.6rem; right: 0.6rem; height: 18px; border-radius: 5px; border: 1px solid var(--line-strong); background: rgba(17, 24, 33, 0.6); }
.p-form .f:nth-child(1) { top: 0.6rem; } .p-form .f:nth-child(2) { top: 2.15rem; } .p-form .f:nth-child(3) { top: 3.7rem; }
.p-form .cursor { position: absolute; width: 10px; height: 10px; border-left: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(-135deg); left: 40%; top: 1.1rem; opacity: 0.8; }
.problem.in .p-form .cursor { animation: cursor 6s var(--ease) infinite; }
@keyframes cursor { 0% { left: 40%; top: 1.1rem; } 30% { left: 55%; top: 2.6rem; } 55% { left: 30%; top: 4.2rem; } 75%, 100% { left: calc(100% - 1.4rem); top: 0.2rem; opacity: 0; } }

/* after hours */
.p-night .clock { position: absolute; left: 0.6rem; top: 0.6rem; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--text); letter-spacing: -0.02em; }
.p-night .clock::after { content: "Fr · Feierabend"; display: block; font-family: "Roboto", sans-serif; font-weight: 400; font-size: 0.58rem; color: var(--text-muted); letter-spacing: 0.04em; }
.p-night .mail { position: absolute; right: 0.7rem; width: 26px; height: 18px; border-radius: 4px; border: 1px solid rgba(242, 181, 107, 0.6); background: rgba(242, 181, 107, 0.12); opacity: 0; }
.p-night .mail::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 7px; border-left: 1px solid rgba(242, 181, 107, 0.7); border-right: 1px solid rgba(242, 181, 107, 0.7); border-bottom: 1px solid rgba(242, 181, 107, 0.7); transform: perspective(20px) rotateX(35deg); }
.p-night .m1 { top: 0.6rem; } .p-night .m2 { top: 2.1rem; } .p-night .m3 { top: 3.6rem; }
.problem.in .p-night .mail { animation: pileIn 6s var(--ease) infinite; } .problem.in .p-night .m2 { animation-delay: 0.7s; } .problem.in .p-night .m3 { animation-delay: 1.4s; }

/* unqualified */
.p-unq .l { position: absolute; left: 0.6rem; right: 0.6rem; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); padding: 0 0.5rem; display: flex; align-items: center; color: var(--text); font-size: 0.62rem; }
.p-unq .l1 { top: 0.6rem; } .p-unq .l2 { top: 2.1rem; } .p-unq .l3 { top: 3.6rem; border-color: rgba(127, 203, 173, 0.4); }
.problem.in .p-unq .l1, .problem.in .p-unq .l2 { animation: solved 6s var(--ease) infinite; } .problem.in .p-unq .l2 { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .problem .stage *, .problem .stage *::after, .problem .stage *::before { animation: none !important; }
  .problem .stage .count, .problem .stage .drop, .problem .stage .none, .p-pile .t, .p-cart .ask, .p-night .mail { opacity: 1 !important; transform: none !important; }
  .p-search .q::after { width: 14.5em; } .p-cart .track i { width: 66%; }
}

.p-cart .ask { max-width: calc(100% - 1.2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-cart .steps span { white-space: nowrap; }

/* ---------- Feature videos ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 980px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; } }
.vcard { text-align: left; font: inherit; color: var(--text); background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 0.75rem 0.75rem 1.1rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.35rem; transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease); }
.vcard:hover { transform: translateY(-4px); border-color: rgba(127, 203, 173, 0.45); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.vcard:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.vcard .thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #0b1118; margin-bottom: 0.5rem; }
.vcard .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: transform 0.6s var(--ease), opacity 0.3s; }
.vcard:hover .thumb img { transform: scale(1.04); opacity: 1; }
.vcard .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 24, 33, 0) 40%, rgba(17, 24, 33, 0.7)); }
.vcard .play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(17, 24, 33, 0.75); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(6px); z-index: 1; transition: transform 0.3s var(--ease), background 0.3s; }
.vcard .play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.vcard:hover .play { transform: scale(1.1); background: var(--primary); }
.vcard:hover .play::after { border-left-color: var(--bg); }
.vcard .dur { position: absolute; right: 0.5rem; bottom: 0.45rem; z-index: 1; font-style: normal; font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 4px; background: rgba(17, 24, 33, 0.85); color: var(--text); font-variant-numeric: tabular-nums; }
.vcard .vtitle { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.vcard .vtag { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.vcard p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; margin-top: 0.3rem; }
.video-grid.lib { margin-top: 0; }
.vfilter { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 2rem; padding: 0.35rem; border-radius: 100px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.02); }
.vfilter button { font-family: "Montserrat", sans-serif; font-size: 0.8rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: 100px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.vfilter button.on { background: var(--primary); color: var(--bg); }
.vfilter button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(6, 10, 15, 0.88); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 1.5rem; animation: rise 0.3s var(--ease); }
.lb-inner { position: relative; width: min(1000px, 100%); }
.lb-player { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
.lb-player iframe, .lb-player video { width: 100%; height: 100%; border: 0; display: block; }
.lb-close { position: absolute; top: -2.6rem; right: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.06); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.lb-close:hover { background: var(--primary); color: var(--bg); }
.lb-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lb-meta { margin-top: 0.9rem; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; flex-wrap: wrap; }
.lb-meta b { font-family: "Montserrat", sans-serif; font-size: 1.05rem; }
.lb-meta small { font-size: 0.72rem; color: var(--text-muted); max-width: 560px; }

[hidden] { display: none !important; }

/* ---------- WP PMS page ---------- */
.pms-hero .brand-row .mark.pms { background: linear-gradient(140deg, #7fcbad, #5fb893); font-size: 0.95rem; }
.nav-hero .brand-row .mark.nav { background: linear-gradient(140deg, #7fcbad, #5b8def); font-size: 0.95rem; }
.pms-hero .shot { padding: 0; overflow: hidden; border-radius: 16px; }
.pms-hero .shot img { display: block; width: 100%; height: auto; }
.pms-hero .shot .chip { top: auto; bottom: 1rem; right: 1rem; }
.pms-hero .proof { grid-template-columns: repeat(3, auto); }
.faq { max-width: 820px; display: grid; gap: 0.6rem; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); padding: 0 1.25rem; transition: border-color 0.3s; }
.faq details[open] { border-color: rgba(127, 203, 173, 0.4); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 0; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--primary); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-muted); line-height: 1.7; padding-bottom: 1.1rem; }
/* problem scenes */
.p-double .cal { position: absolute; top: 0.9rem; display: grid; grid-template-columns: repeat(6, 14px); gap: 4px; }
.p-double .cal.a { left: 0.7rem; } .p-double .cal.b2 { right: 0.7rem; }
.p-double .cal i { width: 14px; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); }
.p-double .cal i.b { background: rgba(127, 203, 173, 0.35); }
.problem.in .p-double .cal i.b { animation: clash 6s var(--ease) infinite; }
@keyframes clash { 0%, 35% { background: rgba(127, 203, 173, 0.35); } 50%, 90% { background: var(--amb); box-shadow: 0 0 0 3px rgba(242, 181, 107, 0.25); } 100% { background: rgba(127, 203, 173, 0.35); } }
.p-commission .row { position: absolute; left: 0.7rem; right: 0.7rem; display: grid; grid-template-columns: 44px 1fr 44px; gap: 0.5rem; align-items: center; font-size: 0.62rem; color: var(--text); }
.p-commission .row:nth-child(1) { top: 1rem; } .p-commission .row:nth-child(2) { top: 2.8rem; }
.p-commission .row i { height: 10px; border-radius: 5px; background: var(--amb); width: 0; }
.p-commission .row i.ok { background: var(--primary); }
.problem.in .p-commission .row i { animation: grow 6s var(--ease) infinite; }
@keyframes grow { 0% { width: 0; } 30%, 90% { width: var(--w); } 100% { width: 0; } }
.p-commission .row em { font-style: normal; font-weight: 700; text-align: right; color: var(--amb); } .p-commission .row:nth-child(2) em { color: var(--primary); }
.p-extras .t { position: absolute; left: 0.7rem; right: 0.7rem; height: 20px; border-radius: 6px; border: 1px dashed var(--line-strong); padding: 0 0.5rem; display: flex; align-items: center; color: var(--text-muted); font-size: 0.62rem; opacity: 0.6; }
.p-extras .t1 { top: 0.6rem; } .p-extras .t2 { top: 2.1rem; } .p-extras .t3 { top: 3.6rem; }
.problem.in .p-extras .t { animation: fadeMiss 6s var(--ease) infinite; }
@keyframes fadeMiss { 0%, 30% { opacity: 0.6; } 50%, 90% { opacity: 0.2; text-decoration: line-through; } 100% { opacity: 0.6; } }
.p-agency .mail { position: absolute; left: 0.7rem; top: 0.8rem; padding: 0.3rem 0.5rem; border-radius: 7px; background: rgba(255, 255, 255, 0.07); color: var(--text); font-size: 0.62rem; }
.p-agency .wait { position: absolute; left: 0.7rem; top: 2.9rem; display: flex; gap: 4px; }
.p-agency .wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--amb); opacity: 0.4; }
.problem.in .p-agency .wait i { animation: waitDot 1.2s infinite; } .problem.in .p-agency .wait i:nth-child(2) { animation-delay: 0.2s; } .problem.in .p-agency .wait i:nth-child(3) { animation-delay: 0.4s; }
/* feature scenes */
.s-extras .e { position: absolute; left: 0.7rem; right: 0.7rem; height: 20px; display: flex; align-items: center; gap: 0.45rem; color: var(--text); font-size: 0.64rem; }
.s-extras .e b { margin-left: auto; color: var(--primary); font-weight: 700; }
.s-extras .e i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line-strong); }
.s-extras .e1 { top: 0.7rem; } .s-extras .e2 { top: 2.2rem; } .s-extras .e3 { top: 3.7rem; }
:is(.tile.sm,.is-anim).in .s-extras .e i { animation: check 6s var(--ease) infinite; } :is(.tile.sm,.is-anim).in .s-extras .e2 i { animation-delay: 0.6s; } :is(.tile.sm,.is-anim).in .s-extras .e3 i { animation-delay: 1.2s; }
.s-room .pic { position: absolute; left: 0.7rem; top: 0.7rem; width: 88px; height: 60px; border-radius: 8px; background: linear-gradient(140deg, rgba(127, 203, 173, 0.35), rgba(67, 186, 255, 0.25)); }
.s-room .pic::after { content: ""; position: absolute; left: 14px; bottom: 10px; width: 40px; height: 22px; border-radius: 4px 4px 0 0; background: rgba(17, 24, 33, 0.4); }
.s-room .am { position: absolute; left: 7rem; top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.s-room .am span { font-size: 0.6rem; padding: 0.2rem 0.45rem; border-radius: 100px; border: 1px solid var(--line-strong); color: var(--text); opacity: 0; }
:is(.tile.sm,.is-anim).in .s-room .am span { animation: hit 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-room .am span:nth-child(2) { animation-delay: 0.15s; } :is(.tile.sm,.is-anim).in .s-room .am span:nth-child(3) { animation-delay: 0.3s; } :is(.tile.sm,.is-anim).in .s-room .am span:nth-child(4) { animation-delay: 0.45s; } :is(.tile.sm,.is-anim).in .s-room .am span:nth-child(5) { animation-delay: 0.6s; }
.s-channel { display: flex; align-items: center; justify-content: center; gap: 0.7rem; }
.s-channel .cal { display: grid; grid-template-columns: repeat(3, 16px); gap: 4px; }
.s-channel .cal i { width: 16px; height: 16px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); }
.s-channel .cal i.x { background: var(--amb); } .s-channel .cal i.x2 { background: rgba(255, 255, 255, 0.07); }
:is(.tile.sm,.is-anim).in .s-channel .cal i.x2 { animation: syncCell 6s var(--ease) infinite; }
@keyframes syncCell { 0%, 40% { background: rgba(255, 255, 255, 0.07); } 55%, 90% { background: var(--amb); } 100% { background: rgba(255, 255, 255, 0.07); } }
.s-channel .sync svg { width: 26px; height: 26px; }
:is(.tile.sm,.is-anim).in .s-channel .sync svg { animation: rot 3s linear infinite; }
.s-edit .h { position: absolute; left: 0.7rem; top: 0.8rem; width: 55%; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.25); }
.s-edit .l { position: absolute; left: 0.7rem; right: 0.7rem; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.s-edit .l1 { top: 2rem; } .s-edit .l2 { top: 2.9rem; width: 80%; } .s-edit .l3 { top: 3.8rem; background: transparent; }
.s-edit .l3 .q { display: block; height: 7px; border-radius: 4px; background: var(--primary); width: 0; }
:is(.tile.sm,.is-anim).in .s-edit .l3 .q { animation: fill 6s var(--ease) infinite; }

.lb-poster { position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 2rem; }
.lb-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.25; }
.lb-poster p { position: relative; color: var(--text-muted); max-width: 420px; margin-bottom: 1rem; font-size: 0.95rem; }
.lb-poster a { position: relative; }
.lb-poster > * { grid-area: 1 / 1; }

/* InsightHub hotels */
.p-search .q.hotel::after { content: "Zimmer frei am 12.10. für 2?"; }
.s-book .steps { position: absolute; left: 0.7rem; right: 0.7rem; top: 0.7rem; display: flex; justify-content: space-between; font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }
.s-book .track { position: absolute; left: 0.7rem; right: 0.7rem; top: 2rem; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.s-book .track i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--primary); }
:is(.tile.sm,.is-anim).in .s-book .track i { animation: bookFill 6s var(--ease) infinite; }
@keyframes bookFill { 0% { width: 0; } 45%, 90% { width: 100%; } 100% { width: 0; } }
.s-book .ok { position: absolute; left: 0.7rem; top: 3.1rem; padding: 0.3rem 0.5rem; border-radius: 7px; background: rgba(127, 203, 173, 0.12); border: 1px solid rgba(127, 203, 173, 0.35); color: var(--text); font-size: 0.62rem; opacity: 0; }
:is(.tile.sm,.is-anim).in .s-book .ok { animation: hit 6s var(--ease) infinite; }
.audience-pick.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .audience-pick.three { grid-template-columns: 1fr; } }

.p-cart .steps { font-size: 0.52rem; letter-spacing: 0.04em; gap: 0.3rem; }

/* Imprint data lists */
.legal-intro { font-size: 0.9rem; color: var(--text-muted); border-left: 2px solid rgba(127, 203, 173, 0.5); padding-left: 1rem; }
.legal-data { display: grid; grid-template-columns: 220px 1fr; gap: 0.55rem 1.5rem; margin: 0.75rem 0 0.5rem; }
.legal-data dt { color: var(--text); font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 0.85rem; padding-top: 0.15rem; }
.legal-data dd { color: var(--text-muted); line-height: 1.65; margin: 0; }
.legal-data dd strong { color: var(--text); }
@media (max-width: 640px) { .legal-data { grid-template-columns: 1fr; gap: 0.2rem 0; } .legal-data dd { margin-bottom: 0.6rem; } }
.legal .todo { color: #f2b56b; border-bottom: 1px dashed rgba(242, 181, 107, 0.6); }
.legal-stand { margin-top: 2.5rem; font-size: 0.82rem; }

/* ---------- Homepage scenes (services + products) ---------- */
.tile .stage { height: 118px; margin-bottom: 1rem; }
.tile.feature .stage { height: 150px; max-width: 560px; }
.card.product .stage { position: relative; height: 104px; margin-bottom: 1rem; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)); border: 1px solid var(--line); font-size: 0.72rem; color: var(--text-muted); }
.card.product .stage .tag, .card.product .stage .badge { position: absolute; right: 0.6rem; bottom: 0.55rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--primary); background: rgba(127, 203, 173, 0.12); border: 1px solid rgba(127, 203, 173, 0.35); padding: 0.2rem 0.5rem; border-radius: 100px; opacity: 0; }
:is(.tile.sm,.is-anim) .stage svg { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* RAG: question -> sources -> answer */
.s-rag .bar { position: absolute; left: 0.8rem; right: 0.8rem; top: 0.8rem; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(17, 24, 33, 0.7); padding: 0 0.7rem; display: flex; align-items: center; color: var(--text); font-size: 0.74rem; }
.s-rag .q::after { content: "Welche Verträge laufen im Q4 aus?"; display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; border-right: 1px solid var(--primary); }
.s-rag .q.en::after { content: "Which contracts expire in Q4?"; }
:is(.tile.sm,.is-anim).in .s-rag .q::after { animation: type3 7s steps(32) infinite; }
@keyframes type3 { 0% { width: 0; } 28%, 92% { width: 15.5em; } 100% { width: 0; } }
.s-rag .src { position: absolute; left: 0.8rem; top: 3.5rem; display: flex; gap: 0.4rem; }
.s-rag .src span { font-size: 0.64rem; padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--text-muted); opacity: 0; }
:is(.tile.sm,.is-anim).in .s-rag .src span { animation: hit 7s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-rag .src span:nth-child(2) { animation-delay: 0.2s; } :is(.tile.sm,.is-anim).in .s-rag .src span:nth-child(3) { animation-delay: 0.4s; }
.s-rag .ans { position: absolute; left: 0.8rem; right: 0.8rem; top: 5.6rem; padding: 0.35rem 0.55rem; border-radius: 7px; background: rgba(127, 203, 173, 0.1); border: 1px solid rgba(127, 203, 173, 0.3); color: var(--text); font-size: 0.68rem; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.tile.sm,.is-anim).in .s-rag .ans { animation: hit 7s var(--ease) 0.9s infinite; }
.s-rag .tag { bottom: auto; top: 0.9rem; right: 1.1rem; }

/* Flow: Shop -> n8n -> ERP with travelling dot */
.s-flow2 { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.8rem; }
.s-flow2 .node { padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.7rem; color: var(--text); text-align: center; min-width: 54px; }
.s-flow2 .node.hot { border-color: rgba(127, 203, 173, 0.5); background: rgba(127, 203, 173, 0.08); }
:is(.tile.sm,.is-anim).in .s-flow2 .node.hot { animation: hot 3.2s ease-in-out infinite; }
.s-flow2 .link { flex: 1; max-width: 40px; height: 1px; background: linear-gradient(90deg, var(--line-strong), var(--primary)); position: relative; }
.s-flow2 .link::after { content: ""; position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
:is(.tile.sm,.is-anim).in .s-flow2 .link::after { animation: travel 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
:is(.tile.sm,.is-anim).in .s-flow2 .link:last-of-type::after { animation-delay: 0.8s; }
.s-flow2 .tag { right: 0.5rem; bottom: 0.45rem; }

/* Build: browser frame filling with blocks */
.s-build .frame { position: absolute; inset: 0.7rem; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(17, 24, 33, 0.5); overflow: hidden; }
.s-build .frame::before { content: ""; display: block; height: 12px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.s-build .blk { position: absolute; border-radius: 4px; background: rgba(127, 203, 173, 0.25); transform: scaleX(0); transform-origin: left; }
.s-build .b1 { left: 8%; top: 22px; width: 50%; height: 10px; } .s-build .b2 { left: 8%; top: 38px; width: 84%; height: 6px; background: rgba(255, 255, 255, 0.12); }
.s-build .b3 { left: 8%; top: 54px; width: 26%; height: 26px; } .s-build .b4 { left: 37%; top: 54px; width: 26%; height: 26px; } .s-build .b5 { left: 66%; top: 54px; width: 26%; height: 26px; }
:is(.tile.sm,.is-anim).in .s-build .blk { animation: blkIn 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-build .b2 { animation-delay: 0.2s; } :is(.tile.sm,.is-anim).in .s-build .b3 { animation-delay: 0.5s; } :is(.tile.sm,.is-anim).in .s-build .b4 { animation-delay: 0.65s; } :is(.tile.sm,.is-anim).in .s-build .b5 { animation-delay: 0.8s; }
@keyframes blkIn { 0% { transform: scaleX(0); } 20%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* Code: typed lines + MVP progress */
.s-code .ln { position: absolute; left: 0.8rem; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); width: 0; }
.s-code .l1 { top: 0.9rem; --w: 55%; } .s-code .l2 { top: 1.7rem; left: 1.6rem; --w: 40%; background: rgba(127, 203, 173, 0.45); } .s-code .l3 { top: 2.5rem; left: 1.6rem; --w: 62%; } .s-code .l4 { top: 3.3rem; --w: 30%; }
:is(.tile.sm,.is-anim).in .s-code .ln { animation: grow 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-code .l2 { animation-delay: 0.3s; } :is(.tile.sm,.is-anim).in .s-code .l3 { animation-delay: 0.6s; } :is(.tile.sm,.is-anim).in .s-code .l4 { animation-delay: 0.9s; }
.s-code .prog { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.s-code .prog i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 3px; }
:is(.tile.sm,.is-anim).in .s-code .prog i { animation: bookFill 6s var(--ease) infinite; }
.s-code .tag { bottom: 1.5rem; }

/* Matrix: make vs buy */
.s-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.7rem; }
.s-matrix .col { border-radius: 8px; border: 1px solid var(--line); padding: 0.5rem; display: grid; gap: 0.3rem; align-content: start; }
.s-matrix .col b { font-family: "Montserrat", sans-serif; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.s-matrix .col span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.62rem; color: var(--text); }
.s-matrix .col span i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-strong); }
:is(.tile.sm,.is-anim).in .s-matrix .col span i { animation: check 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-matrix .col span:nth-child(3) i { animation-delay: 0.5s; } :is(.tile.sm,.is-anim).in .s-matrix .col span:nth-child(4) i { animation-delay: 1s; }
:is(.tile.sm,.is-anim).in .s-matrix .col.win { animation: winCol 6s var(--ease) infinite; }
@keyframes winCol { 0%, 45% { border-color: var(--line); } 60%, 90% { border-color: rgba(127, 203, 173, 0.6); box-shadow: 0 0 20px -8px var(--primary); } 100% { border-color: var(--line); } }

/* Soon: pulsing building blocks */
.s-soon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; padding: 0.9rem; align-content: center; }
.s-soon i { height: 30px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
:is(.tile.sm,.is-anim).in .s-soon i { animation: soonPulse 3s ease-in-out infinite; }
:is(.tile.sm,.is-anim).in .s-soon i:nth-child(2) { animation-delay: 0.3s; } :is(.tile.sm,.is-anim).in .s-soon i:nth-child(3) { animation-delay: 0.6s; } :is(.tile.sm,.is-anim).in .s-soon i:nth-child(4) { animation-delay: 0.9s; } :is(.tile.sm,.is-anim).in .s-soon i:nth-child(5) { animation-delay: 1.2s; } :is(.tile.sm,.is-anim).in .s-soon i:nth-child(6) { animation-delay: 1.5s; } :is(.tile.sm,.is-anim).in .s-soon i:nth-child(7) { animation-delay: 1.8s; } :is(.tile.sm,.is-anim).in .s-soon i:nth-child(8) { animation-delay: 2.1s; }
@keyframes soonPulse { 0%, 100% { background: rgba(255, 255, 255, 0.06); } 50% { background: rgba(127, 203, 173, 0.3); } }

/* Reference cards: stack chips light up on reveal */
.case.in .stack span { animation: chipGlow 6s var(--ease) infinite; }
.case.in .stack span:nth-child(2) { animation-delay: 0.6s; } .case.in .stack span:nth-child(3) { animation-delay: 1.2s; } .case.in .stack span:nth-child(4) { animation-delay: 1.8s; } .case.in .stack span:nth-child(5) { animation-delay: 2.4s; }
@keyframes chipGlow { 0%, 6% { border-color: var(--line); color: var(--text-muted); } 10%, 18% { border-color: rgba(127, 203, 173, 0.6); color: var(--text); } 24%, 100% { border-color: var(--line); color: var(--text-muted); } }

.s-matrix { padding: 0.55rem; gap: 0.45rem; }
.s-matrix .col { padding: 0.4rem 0.45rem; gap: 0.2rem; }
.s-matrix .col b { font-size: 0.6rem; }
.s-matrix .col span { font-size: 0.6rem; line-height: 1.3; }

/* ---------- Case cards + document scene ---------- */
.case .stage { position: relative; height: 104px; margin-bottom: 0.9rem; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)); border: 1px solid var(--line); font-size: 0.72rem; color: var(--text-muted); }
.case.wide .stage { max-width: 420px; }
.case .stage .tag, .case .stage .badge { position: absolute; right: 0.6rem; bottom: 0.55rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--primary); background: rgba(127, 203, 173, 0.12); border: 1px solid rgba(127, 203, 173, 0.35); padding: 0.2rem 0.5rem; border-radius: 100px; opacity: 0; }
.s-doc .paper { position: absolute; left: 0.8rem; top: 0.7rem; width: 58px; height: 74px; border-radius: 4px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.8); }
.s-doc .paper::before, .s-doc .paper::after { content: ""; position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 2px; background: rgba(17, 24, 33, 0.25); }
.s-doc .paper::before { top: 12px; box-shadow: 0 8px 0 rgba(17, 24, 33, 0.18), 0 16px 0 rgba(17, 24, 33, 0.18), 0 24px 0 rgba(17, 24, 33, 0.12); } .s-doc .paper::after { top: 48px; width: 60%; }
.s-doc .scan { position: absolute; left: 0.8rem; width: 58px; height: 2px; background: var(--primary); box-shadow: 0 0 8px var(--primary); top: 0.7rem; opacity: 0; }
:is(.tile.sm,.is-anim).in .s-doc .scan { animation: scan 6s var(--ease) infinite; }
@keyframes scan { 0% { top: 0.7rem; opacity: 0; } 5% { opacity: 1; } 35% { top: calc(0.7rem + 72px); opacity: 1; } 40%, 100% { opacity: 0; } }
.s-doc .fields { position: absolute; left: 5.6rem; right: 0.7rem; top: 0.7rem; display: grid; gap: 0.32rem; }
.s-doc .fields div { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.62rem; padding: 0.22rem 0.45rem; border-radius: 5px; background: rgba(255, 255, 255, 0.04); color: var(--text-muted); opacity: 0; }
.s-doc .fields div b { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
:is(.tile.sm,.is-anim).in .s-doc .fields div { animation: hit 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-doc .fields div:nth-child(2) { animation-delay: 0.25s; } :is(.tile.sm,.is-anim).in .s-doc .fields div:nth-child(3) { animation-delay: 0.5s; }
.s-bundle .item { position: absolute; left: 0.7rem; right: 0.7rem; height: 20px; display: flex; align-items: center; gap: 0.45rem; color: var(--text); font-size: 0.64rem; }
.s-bundle .item i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line-strong); }
.s-bundle .item b { margin-left: auto; color: var(--primary); }
.s-bundle .i1 { top: 0.7rem; } .s-bundle .i2 { top: 2.2rem; } .s-bundle .i3 { top: 3.7rem; }
:is(.tile.sm,.is-anim).in .s-bundle .item i { animation: check 6s var(--ease) infinite; } :is(.tile.sm,.is-anim).in .s-bundle .i2 i { animation-delay: 0.6s; } :is(.tile.sm,.is-anim).in .s-bundle .i3 i { animation-delay: 1.2s; }

.value .s-chart .bars { height: 40px; }
.value .s-chart .tag { top: 0.5rem; bottom: auto; }
.value .s-qualify .badge { top: 0.5rem; bottom: auto; }
.value .s-qualify .r1, .value .s-qualify .r2, .value .s-qualify .r3 { max-width: 62%; }

.s-bundle .i1 { top: 0.45rem; } .s-bundle .i2 { top: 1.8rem; } .s-bundle .i3 { top: 3.15rem; }
.s-bundle .item { height: 18px; font-size: 0.62rem; }
.s-bundle .badge { bottom: 0.35rem; }

/* Specificity-matched tag/badge placement per scene (the generic stage rule sets bottom) */
:is(.tile.sm,.is-anim) .stage.s-chart .tag { top: 0.6rem; bottom: auto; }
:is(.tile.sm,.is-anim) .stage.s-qualify .badge { bottom: 0.5rem; top: auto; }
:is(.tile.sm,.is-anim) .stage.s-bundle .badge { bottom: 0.4rem; top: auto; }
:is(.tile.sm,.is-anim) .stage.s-bundle .i1 { top: 0.4rem; } :is(.tile.sm,.is-anim) .stage.s-bundle .i2 { top: 1.7rem; } :is(.tile.sm,.is-anim) .stage.s-bundle .i3 { top: 3rem; }
.value.is-anim .stage.s-qualify .r1 { top: 0.5rem; } .value.is-anim .stage.s-qualify .r2 { top: 1.75rem; } .value.is-anim .stage.s-qualify .r3 { top: 3rem; }
.value.is-anim .stage.s-qualify .row { max-width: none; }
.value.is-anim .stage.s-chart .bars { height: 46px; }

/* Testimonials: star rating fills in, citation slides in, numbers count up */
.quote .stars { display: flex; gap: 0.25rem; margin-bottom: 0.9rem; position: relative; }
.quote .stars i { width: 16px; height: 16px; display: inline-block; background: rgba(255, 255, 255, 0.12); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17.6l-6 3.3 1.3-6.7-5-4.7 6.8-.8z'/%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='M12 2.5l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17.6l-6 3.3 1.3-6.7-5-4.7 6.8-.8z'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0.7); }
.quote.in .stars i { animation: starIn 0.5s var(--ease) forwards; }
.quote.in .stars i:nth-child(1) { animation-delay: 0.3s; } .quote.in .stars i:nth-child(2) { animation-delay: 0.45s; } .quote.in .stars i:nth-child(3) { animation-delay: 0.6s; } .quote.in .stars i:nth-child(4) { animation-delay: 0.75s; } .quote.in .stars i:nth-child(5) { animation-delay: 0.9s; }
@keyframes starIn { 0% { background: rgba(255, 255, 255, 0.12); transform: scale(0.7); } 60% { transform: scale(1.3); } 100% { background: #f2c94c; transform: scale(1); } }
.quote cite { opacity: 0; transform: translateX(-10px); transition: opacity 0.6s var(--ease) 1.1s, transform 0.6s var(--ease) 1.1s; }
.quote.in cite { opacity: 1; transform: none; }
.quote p b[data-count] { color: var(--primary); font-variant-numeric: tabular-nums; }
.quote.big:hover { border-color: rgba(127, 203, 173, 0.4); }
:is(.tile.sm,.is-anim) .stage.s-bundle .i3 { top: 2.8rem; }
.value.is-anim .stage.s-qualify .r3 { top: 2.85rem; }
@media (prefers-reduced-motion: reduce) { .quote .stars i { animation: none !important; background: #f2c94c; transform: none; } .quote cite { opacity: 1; transform: none; transition: none; } }

.footer2 .bottom { justify-content: center; text-align: center; }

.footer2 .footer-logo { display: inline-block; transition: opacity 0.2s; }
.footer2 .footer-logo:hover { opacity: 0.8; }

.form-success { display: flex; gap: 1rem; align-items: flex-start; padding: 2rem; border-radius: 14px; background: rgba(127, 203, 173, 0.08); border: 1px solid rgba(127, 203, 173, 0.4); animation: rise 0.6s var(--ease); }
.form-success svg { flex: none; width: 34px; height: 34px; stroke: var(--primary); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.form-success p { color: var(--text); font-size: 1.02rem; line-height: 1.6; margin: 0; }

.marquee .track .dup { display: contents; }



.quote.big.long p { font-family: "Roboto", sans-serif; font-size: 1.4rem; line-height: 1.7; font-weight: 300; letter-spacing: 0; }
@media (max-width: 640px) { .quote.big.long p { font-size: 1.1rem; } }

/* Portfolio grid (WordPress & WooCommerce page) */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.work { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-card); aspect-ratio: 16 / 10; text-decoration: none; transition: transform 0.4s var(--ease), border-color 0.3s; }
.work img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.work:hover { transform: translateY(-3px); border-color: rgba(127, 203, 173, 0.4); }
.work:hover img { transform: scale(1.08); }
.work .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; background: linear-gradient(180deg, rgba(17, 24, 33, 0) 0%, rgba(17, 24, 33, 0.92) 70%); }
.work .cap b { font-family: "Montserrat", sans-serif; font-size: 1rem; color: var(--text); }
.work .cap i { font-style: normal; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.work.more { aspect-ratio: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; justify-content: center; background: linear-gradient(140deg, rgba(127, 203, 173, 0.08), var(--bg-card) 60%); }
.work.more b { font-family: "Montserrat", sans-serif; font-size: 1.05rem; color: var(--text); }
.work.more p { font-size: 0.85rem; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } }

/* Per-pillar contact link (services page) */
.pillar-cta { margin-top: 1.5rem; }
.pillar-cta a { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--primary); text-decoration: none; padding-bottom: 0.2rem; border-bottom: 1px solid rgba(127, 203, 173, 0.3); transition: border-color 0.3s, gap 0.3s var(--ease); }
.pillar-cta a span { transition: transform 0.3s var(--ease); }
.pillar-cta a:hover { border-color: var(--primary); color: var(--primary-light); }
.pillar-cta a:hover span { transform: translateX(4px); }

/* Woo Product Mixer page */
.mixer-hero .brand-row .mark.mixer { background: linear-gradient(140deg, #7fcbad, #c9a0dc); font-size: 0.78rem; }
.mixer-hero .shot.video video { display: block; width: 100%; height: auto; background: #000; }
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.shots figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-card); }
.shots img { display: block; width: 100%; height: auto; }
.shots figcaption { padding: 0.9rem 1.1rem; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--line); }
.plans.single { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
.plan-aside { padding: 2rem; border-radius: 16px; border: 1px dashed var(--line-strong); }
.plan-aside h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.plan-aside p { color: var(--text-muted); line-height: 1.7; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .shots { grid-template-columns: 1fr; } .plans.single { grid-template-columns: 1fr; } }

/* Call / headset scene (InsightHub Voice) */
.s-call svg { position: absolute; left: 0.9rem; top: 50%; width: 64px; height: 64px; transform: translateY(-50%); fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s-call svg .pad { fill: rgba(127, 203, 173, 0.25); }
.s-call .wave { position: absolute; left: calc(0.9rem + 32px); top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1px solid rgba(127, 203, 173, 0.5); opacity: 0; transform: scale(0.6); }
:is(.tile.sm,.is-anim).in .s-call .wave { animation: callWave 2.4s ease-out infinite; }
:is(.tile.sm,.is-anim).in .s-call .wave.w2 { animation-delay: 0.8s; } :is(.tile.sm,.is-anim).in .s-call .wave.w3 { animation-delay: 1.6s; }
@keyframes callWave { 0% { opacity: 0.7; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.7); } }
.s-call .bubbles { position: absolute; left: 6.2rem; top: 1.4rem; display: grid; gap: 0.35rem; }
.s-call .bubbles i { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); width: 70px; opacity: 0; }
.s-call .bubbles i:nth-child(2) { width: 46px; background: rgba(127, 203, 173, 0.25); } .s-call .bubbles i:nth-child(3) { width: 58px; }
:is(.tile.sm,.is-anim).in .s-call .bubbles i { animation: pop2 6s var(--ease) infinite; }
:is(.tile.sm,.is-anim).in .s-call .bubbles i:nth-child(2) { animation-delay: 0.5s; } :is(.tile.sm,.is-anim).in .s-call .bubbles i:nth-child(3) { animation-delay: 1s; }

/* Convenience-translation note on the English legal pages (Terms / Privacy) */
.legal-note { font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); margin: 0.6rem 0 1.2rem; }
.legal-note a { color: var(--primary); text-decoration: underline; }

/* Dark-theme dropdowns: Chrome/Edge paint the open <option> list with a light background while the text
   inherits our white → unreadable. Declare the control as dark and give options explicit colors. */
select { color-scheme: dark; }
select option { background-color: #1b2330; color: #ffffff; }
select option:checked, select option:hover { background-color: #2a3646; color: #ffffff; }

/* InsightHub brand mark: the product logo instead of the 'IH' lettering */
.brand-row .mark.mark-logo { padding: 0; line-height: 0; background: rgba(127, 203, 173, 0.12); border: 1px solid rgba(127, 203, 173, 0.35); box-shadow: 0 10px 30px -12px rgba(127, 203, 173, 0.6); }
.brand-row .mark.mark-logo img { width: 26px; height: 26px; display: block; }

/* ── Language variants of the CSS-driven animation strings (pages set <html lang>) ───────────── */
html[lang="en"] .s-search .q::after { content: "gift for a yoga fan"; }
html[lang="en"] :is(.tile.sm,.is-anim).in .s-search .q::after { animation-timing-function: steps(19); }
html[lang="en"] .p-search .q::after { content: "something nice for a birthday"; }
html[lang="en"] .problem.in .p-search .q::after { animation-timing-function: steps(29); }
html[lang="en"] .p-search .q.hotel::after { content: "Room free on Oct 12 for 2?"; }
html[lang="id"] .p-search .q.hotel::after { content: "Kamar kosong 12/10 untuk 2?"; }
html[lang="en"] .p-night .clock::after { content: "Fri · after hours"; }
html[lang="en"] .s-sync .n1::after { content: "12 pcs"; } html[lang="en"] .s-sync .n2::after { content: "8 pcs"; } html[lang="en"] .s-sync .n3::after { content: "3 pcs"; }
html[lang="en"] :is(.tile.sm,.is-anim).in .s-sync .n1::after { animation-name: n1-en; }
html[lang="en"] :is(.tile.sm,.is-anim).in .s-sync .n2::after { animation-name: n2-en; }
html[lang="en"] :is(.tile.sm,.is-anim).in .s-sync .n3::after { animation-name: n3-en; }
@keyframes n1-en { 0%, 45% { content: "12 pcs"; } 50%, 100% { content: "9 pcs"; } }
@keyframes n2-en { 0%, 55% { content: "8 pcs"; } 60%, 100% { content: "24 pcs"; } }
@keyframes n3-en { 0%, 65% { content: "3 pcs"; } 70%, 100% { content: "0 pcs"; } }
html[lang="id"] .s-search .q::after { content: "hadiah untuk penggemar yoga"; }
html[lang="id"] :is(.tile.sm,.is-anim).in .s-search .q::after { animation-timing-function: steps(27); }
html[lang="id"] .p-night .clock::after { content: "Jum · tutup"; }

/* ── Small phones (≤420px): header + hero columns must stay inside the viewport (2026-09-07) ── */
@media (max-width: 420px) {
  .header-inner { padding: 0.7rem 1rem; gap: 0.6rem; }
  .logo img { height: 32px; }
  .nav { gap: 0.4rem; }
  .nav .lang a { padding: 0.3rem 0.45rem; font-size: 0.66rem; }
  .nav .btn-cta { padding: 0.4rem 0.7rem; font-size: 0.68rem; }
  .container { padding: 0 1.1rem; }
}
/* A grid column may never grow past the viewport because of one long word (the proof grid did) */
.hero2-inner > * { min-width: 0; }
@media (max-width: 560px) {
  .hero2 .proof, .page-hero .proof, .ih-hero .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
  .hero2 .proof div span, .page-hero .proof div span { overflow-wrap: anywhere; }
  .page-hero .crumbs { display: flex; flex-wrap: wrap; row-gap: 0.2rem; }
  .ih-hero .brand-row { flex-wrap: wrap; }
  .hero2 h1, .page-hero h1 { overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 14 6 6; }
}

/* Trust strip on phones: label above the scrolling row, so the row gets the full width */
@media (max-width: 640px) {
  .marquee { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .marquee .label { margin-right: 0; }
  .marquee .viewport { width: 100%; }
}

/* Tablets: compact nav so links, language switch and CTA stay on one line; below 800px the text links go (like phones) */
@media (max-width: 1080px) {
  .header-inner { gap: 1.25rem; }
  .nav { gap: 1.3rem; }
  .nav a { font-size: 0.84rem; white-space: nowrap; }
  .nav .lang { flex: none; white-space: nowrap; }
  .nav .btn-cta { padding: 0.45rem 0.9rem; font-size: 0.76rem; white-space: nowrap; }
}
@media (max-width: 800px) { .nav > a:not(.btn-cta) { display: none; } }

/* ── Accessibility pass (axe, WCAG AAA) 2026-09-07 ── */
.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 1000; padding: 0.6rem 1rem; border-radius: 8px; background: var(--primary); color: var(--bg); font-weight: 700; }
.skip:focus { left: 0.5rem; }
.strip .tech { color: rgba(255, 255, 255, 0.66); }                    /* 8.1:1 on the strip background */
.nav .lang a.on { background: rgba(127, 203, 173, 0.06); color: #8fd5b9; }   /* ≥ 7:1 */
.case .tag, .card.product > .tag { color: #8fd5b9; }                     /* ≥ 7:1 on the card background */
.value p { color: #a8a6c1; }                                            /* 7.6:1 on the darkest ground */
main p a:not(.btn), main li a:not(.btn), main dd a, main td a, .legal-content a { text-decoration: underline; text-underline-offset: 0.15em; }
.pillar .section-head .num[data-n]::before { content: attr(data-n); }