/* =====================================================================
   RP BRANDS SOLUTIONS — Design System
   Premium, Apple-inspired. Black / White / Electric Blue.
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  --black: #000000;
  --white: #ffffff;
  --ink: #0a0a0b;
  --ink-soft: #1d1d1f;
  --mist: #f2f2f5;
  --mist-2: #e8e8ec;
  --line: rgba(0,0,0,0.08);
  --line-strong: rgba(0,0,0,0.14);

  --blue: #0066ff;
  --blue-600: #0052cc;
  --blue-050: #eef4ff;
  --green: #00c853;
  --green-050: #e6faee;

  --t-muted: #6e6e73;
  --t-faint: #86868b;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --sh-2: 0 10px 30px -12px rgba(0,0,0,.18);
  --sh-3: 0 30px 80px -30px rgba(0,0,0,.35);
  --sh-blue: 0 20px 50px -20px rgba(0,102,255,.45);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 60px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body { font-family: var(--sans); color: var(--ink-soft); background: var(--white); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--blue); color: #fff; }

/* ---------- Typography ---------- */
.display { font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; font-size: clamp(2.9rem, 8vw, 6.2rem); }
h1, .h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
h2, .h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
h3, .h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.lede { font-size: clamp(1.1rem, 2.1vw, 1.5rem); line-height: 1.45; color: var(--t-muted); font-weight: 400; letter-spacing: -0.01em; }
.muted { color: var(--t-muted); }
.faint { color: var(--t-faint); }
.mono { font-family: var(--mono); }
.grad-text { background: linear-gradient(100deg, #0066ff 0%, #00c2ff 55%, #00c853 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ink-invert { color: #fff; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 1340px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vw, 150px); }
.section-sm { padding-block: clamp(48px, 7vw, 90px); }
.center { text-align: center; }
.grid { display: grid; gap: 24px; }
.dark { background: var(--ink); color: #fff; }
.dark .muted, .dark .lede { color: rgba(255,255,255,.62); }
.dark .eyebrow { color: #4d94ff; }
.soft { background: var(--mist); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; font-weight: 550; font-size: .98rem; letter-spacing: -0.01em; padding: .82em 1.5em; border-radius: var(--r-pill); transition: transform .25s var(--ease), background .25s, box-shadow .3s, color .25s; will-change: transform; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--sh-blue); }
.btn-primary:hover { background: var(--blue-600); transform: translateY(-2px); box-shadow: 0 26px 60px -22px rgba(0,102,255,.6); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn-ghost { background: rgba(0,0,0,.04); color: var(--ink); }
.btn-ghost:hover { background: rgba(0,0,0,.08); }
.dark .btn-ghost { background: rgba(255,255,255,.1); color: #fff; }
.dark .btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-lg { padding: 1em 1.9em; font-size: 1.05rem; }
.btn-link { color: var(--blue); font-weight: 550; display: inline-flex; align-items: center; gap: .35em; }
.btn-link .arw { transition: transform .3s var(--ease); }
.btn-link:hover .arw { transform: translateX(4px); }

/* ---------- Navbar ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { max-width: 1340px; margin-inline: auto; padding-inline: var(--gutter); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: .55em; font-weight: 650; letter-spacing: -0.02em; font-size: 1.02rem; }
.brand-mark { width: 26px; height: 26px; border-radius: 8px; flex: none; background: conic-gradient(from 210deg, #0066ff, #00c2ff, #00c853, #0066ff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { font-size: .92rem; color: var(--ink-soft); padding: .5em .8em; border-radius: 8px; transition: background .2s, color .2s; opacity: .85; }
.nav-links a:hover { background: rgba(0,0,0,.05); opacity: 1; }
.nav-links a.active { opacity: 1; color: var(--blue); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; }
.nav-toggle span { width: 18px; height: 1.6px; background: var(--ink); position: relative; transition: .3s; }
.nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0; width:18px; height:1.6px; background: var(--ink); transition:.3s; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { top:0; transform: rotate(45deg); }
body.menu-open .nav-toggle span::after { top:0; transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99; background: rgba(255,255,255,.98); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 4px; padding: 24px var(--gutter); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .3s var(--ease); }
body.menu-open .mobile-menu { transform: none; opacity: 1; pointer-events: auto; }
.mobile-menu a { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .nav-links { display: none; } .nav-cta .btn:not(.nav-toggle) { display: none; } .nav-toggle { display: inline-flex; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; } .reveal.d6 { transition-delay: .48s; }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--nav-h) + clamp(48px, 9vw, 120px)); padding-bottom: clamp(40px, 7vw, 90px); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: float 14s var(--ease) infinite alternate; }
.orb.b1 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(0,102,255,.55), transparent 70%); top: -140px; right: -80px; }
.orb.b2 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(0,200,83,.30), transparent 70%); bottom: -180px; left: -100px; animation-delay: -5s; }
.orb.b3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(0,194,255,.35), transparent 70%); top: 30%; left: 40%; animation-delay: -9s; }
@keyframes float { to { transform: translate3d(30px, -30px, 0) scale(1.08); } }
.grid-fade { position:absolute; inset:0; z-index:-1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); opacity:.7; }
.badge { display: inline-flex; align-items: center; gap: .5em; font-size: .82rem; font-weight: 500; padding: .45em .9em .45em .5em; border-radius: var(--r-pill); background: rgba(255,255,255,.7); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--ink-soft); backdrop-filter: blur(8px); }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(0,200,83,.16); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Trust / stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.stat { background: var(--white); padding: 32px 26px; }
.dark .stat { background: #101012; }
.dark .stat-grid { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); }
.stat .num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; }
.stat .lbl { font-size: .9rem; color: var(--t-muted); margin-top: 4px; }
.dark .stat .lbl { color: rgba(255,255,255,.55); }
@media (max-width: 720px){ .stat-grid { grid-template-columns: repeat(2,1fr);} }
.logo-row { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: center; }
.logo-chip { font-weight: 600; letter-spacing: -0.01em; color: var(--t-muted); font-size: 1rem; opacity: .8; }

/* ---------- Cards ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; position: relative; overflow: hidden; }
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
.dark .card { background: #101012; border-color: rgba(255,255,255,.09); }
.dark .card:hover { border-color: rgba(255,255,255,.2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.card .kicker { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--blue); text-transform: uppercase; }
.card-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; background: var(--blue-050); color: var(--blue); }
.dark .card-ico { background: rgba(0,102,255,.16); }
.card ul { list-style: none; margin-top: 16px; display: grid; gap: 9px; }
.card ul li { display: flex; gap: .6em; align-items: flex-start; font-size: .95rem; color: var(--t-muted); }
.dark .card ul li { color: rgba(255,255,255,.6); }
.card ul li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--green-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2300c853' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.dark .card ul li::before { background-color: rgba(0,200,83,.18); }
.feature-num { font-family: var(--mono); font-size: .8rem; color: var(--t-faint); }
.glass { border-radius: var(--r-xl); padding: clamp(28px, 4vw, 52px); background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(242,242,245,.7)); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--sh-2); backdrop-filter: blur(10px); }

/* ---------- Cols ---------- */
.cols-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.cols-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.cols-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px,5vw,70px); align-items: center; }
@media (max-width: 960px){ .cols-3, .cols-4 { grid-template-columns: repeat(2,1fr);} .split { grid-template-columns: 1fr; } }
@media (max-width: 620px){ .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* ---------- Problem ---------- */
.strike { position: relative; display: inline-block; }
.strike::after { content:""; position: absolute; left: -2%; right: -2%; top: 54%; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); border-radius: 3px; }
.strike.in::after { transform: scaleX(1); }

/* ---------- Transformation ---------- */
.flow { display: grid; gap: 14px; position: relative; }
.flow-step { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .4s var(--ease), box-shadow .4s; }
.flow-step:hover { transform: translateX(8px); box-shadow: var(--sh-2); }
.dark .flow-step { background: #101012; border-color: rgba(255,255,255,.1); box-shadow: none; }
.dark .flow-step:hover { background: #16161a; border-color: rgba(255,255,255,.22); box-shadow: 0 20px 40px -24px rgba(0,0,0,.8); }
.flow-idx { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; background: var(--ink); color: #fff; font-size: .95rem; }
.dark .flow-step .flow-idx { background: #2a2a30; color: #fff; }
.flow-step.is-ai .flow-idx, .dark .flow-step.is-ai .flow-idx { background: var(--blue); box-shadow: var(--sh-blue); }
.flow-step.is-goal .flow-idx, .dark .flow-step.is-goal .flow-idx { background: var(--green); }

/* ---------- AI demo ---------- */
.chat { border-radius: var(--r-xl); background: #0b0b0d; border: 1px solid rgba(255,255,255,.1); box-shadow: var(--sh-3); overflow: hidden; max-width: 440px; width: 100%; }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.chat-av { width: 34px; height: 34px; border-radius: 10px; background: conic-gradient(from 210deg,#0066ff,#00c2ff,#00c853,#0066ff); }
.chat-name { color:#fff; font-weight: 600; font-size: .95rem; }
.chat-status { font-size: .78rem; color: #00c853; display:flex; align-items:center; gap:.4em; }
.chat-status .dot { width:7px;height:7px;border-radius:50%;background:#00c853; box-shadow:0 0 0 3px rgba(0,200,83,.2); }
.chat-body { padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; min-height: 300px; }
.bub { max-width: 82%; padding: 12px 16px; border-radius: 16px; font-size: .92rem; line-height: 1.4; opacity: 0; transform: translateY(10px); animation: pop .5s var(--ease-out) forwards; }
@keyframes pop { to { opacity:1; transform:none; } }
.bub.bot { background: #1c1c20; color: #eee; border-bottom-left-radius: 5px; align-self: flex-start; }
.bub.me { background: var(--blue); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.typing { display:flex; gap:5px; padding: 14px 16px; background:#1c1c20; border-radius:16px; align-self:flex-start; width:fit-content; }
.typing span { width:7px;height:7px;border-radius:50%;background:#666; animation: blink 1.2s infinite; }
.typing span:nth-child(2){animation-delay:.2s;} .typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink { 0%,60%,100%{opacity:.3;transform:translateY(0);} 30%{opacity:1;transform:translateY(-3px);} }
.chat-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); display:flex; gap:10px; align-items:center; }
.chat-input { flex:1; background:#161619; border:1px solid rgba(255,255,255,.1); color:#fff; padding:11px 14px; border-radius: var(--r-pill); font-size:.9rem; }
.chat-input::placeholder{color:#666;}
.chat-send { width:38px;height:38px;border-radius:50%;background:var(--blue); display:grid;place-items:center; color:#fff; flex:none; transition: transform .2s; }
.chat-send:hover{ transform: scale(1.08); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top: 6px; }
.chip { font-size:.82rem; padding:.5em .9em; border-radius:var(--r-pill); background:rgba(255,255,255,.08); color:#ddd; border:1px solid rgba(255,255,255,.1); transition:.2s; }
.chip:hover{ background:rgba(0,102,255,.25); border-color:var(--blue); }

/* ---------- Case study ---------- */
.case { border-radius: var(--r-xl); overflow:hidden; border:1px solid var(--line); background:var(--white); transition: box-shadow .4s, transform .4s var(--ease); }
.case:hover{ box-shadow: var(--sh-2); transform: translateY(-4px); }
.case-head { padding: 30px 32px; background: var(--mist); display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.case-tag { font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.case-body { padding: 30px 32px; display:grid; gap: 22px; }
.cs-row { display:grid; grid-template-columns: 120px 1fr; gap:20px; align-items:start; padding-bottom:20px; border-bottom:1px solid var(--line); }
.cs-row:last-child{ border-bottom:none; padding-bottom:0; }
.cs-row .k { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--t-faint); }
.cs-metrics { display:flex; flex-wrap:wrap; gap: 28px; }
.cs-metric .n { font-size: 2rem; font-weight:700; letter-spacing:-0.03em; color: var(--green); }
.cs-metric .l { font-size:.85rem; color:var(--t-muted); }
@media (max-width:560px){ .cs-row{ grid-template-columns:1fr; gap:6px;} }

/* ---------- CTA band ---------- */
.cta-band { border-radius: var(--r-xl); padding: clamp(40px, 7vw, 88px); text-align:center; position:relative; overflow:hidden; background: radial-gradient(120% 140% at 50% 0%, #0a2a6b 0%, #06080f 60%); color:#fff; border:1px solid rgba(255,255,255,.08); }
.cta-band .orb { opacity:.6; }
.cta-band .btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.22); }

/* ---------- Forms ---------- */
.form-card { background:var(--white); border:1px solid var(--line); border-radius: var(--r-xl); padding: clamp(26px,4vw,44px); box-shadow: var(--sh-2); }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label { font-size:.85rem; font-weight:600; letter-spacing:-0.01em; }
.field input, .field select, .field textarea { font-family:inherit; font-size:1rem; padding:13px 15px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--white); color:var(--ink); transition: border-color .2s, box-shadow .2s; width:100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,102,255,.14); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-ok { display:none; text-align:center; padding: 20px; }
.form-ok.show { display:block; animation: pop .5s var(--ease-out); }
.check-ring { width:64px;height:64px;border-radius:50%;background:var(--green-050); color:var(--green); display:grid;place-items:center; margin:0 auto 16px; }

/* ---------- Accordion ---------- */
.acc-item { border-bottom:1px solid var(--line); }
.acc-q { width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 4px; font-size:1.15rem; font-weight:600; letter-spacing:-0.02em; }
.acc-q .pm { flex:none; width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong); display:grid;place-items:center; transition: transform .3s, background .3s, color .3s; }
.acc-item.open .acc-q .pm { transform: rotate(45deg); background:var(--blue); color:#fff; border-color:var(--blue); }
.acc-a { max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.acc-a-inner { padding: 0 4px 24px; color:var(--t-muted); max-width: 64ch; }

/* ---------- Pills ---------- */
.pill { display:inline-flex; align-items:center; gap:.4em; font-size:.82rem; font-weight:500; padding:.4em .85em; border-radius:var(--r-pill); background:var(--mist); color:var(--ink-soft); }
.dark .pill { background: rgba(255,255,255,.08); color:#fff; }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left:0; right:0; bottom:0; z-index:90; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.85); backdrop-filter: blur(16px); border-top:1px solid var(--line); display:none; gap:10px; align-items:center; transform: translateY(120%); transition: transform .4s var(--ease); }
.sticky-cta.show { transform:none; }
.sticky-cta .btn { flex:1; justify-content:center; white-space:nowrap; font-size:.9rem; padding:.82em .9em; line-height:1; }
.sticky-cta .btn-primary { flex:1.75; }
@media (max-width: 760px){ .sticky-cta{ display:flex; } }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.7); padding-top: clamp(56px,7vw,90px); }
.footer a { color: rgba(255,255,255,.65); transition: color .2s; font-size:.92rem; }
.footer a:hover { color:#fff; }
.foot-grid { display:grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px 24px; padding-bottom: 50px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-col h4 { color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.foot-col ul { list-style:none; display:grid; gap:11px; }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding: 26px 0 40px; font-size:.85rem; color: rgba(255,255,255,.5); }
@media (max-width: 860px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px){ .foot-grid{ grid-template-columns: 1fr; } }

/* ---------- Marquee ---------- */
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-track { display:flex; gap:56px; width:max-content; animation: scrollx 34s linear infinite; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ---------- Page hero ---------- */
.page-hero { padding-top: calc(var(--nav-h) + clamp(56px,8vw,110px)); padding-bottom: clamp(30px,5vw,60px); }

/* ---------- Utilities ---------- */
.mt-1{margin-top:.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;} .mt-4{margin-top:2rem;} .mt-6{margin-top:3rem;} .mt-8{margin-top:4rem;}
.mb-2{margin-bottom:1rem;} .mb-4{margin-bottom:2rem;} .mb-6{margin-bottom:3rem;}
.maxch{ max-width: 56ch; } .maxch-lg{ max-width: 66ch; }
.flex{ display:flex; } .between{ justify-content:space-between; } .items-center{ align-items:center; } .gap-2{ gap:1rem; } .wrap-flex{ flex-wrap:wrap; }
.rel{ position:relative; }
@media (max-width:620px){ .hide-sm{ display:none; } }

/* ---------- Service bullet points (label + description inline) ---------- */
.svc-point { display: block; position: relative; padding-left: 22px; line-height: 1.5; color: var(--t-muted); }
.svc-point b { color: var(--ink); font-weight: 600; }
.dark .svc-point { color: rgba(255,255,255,.62); }
.dark .svc-point b { color: #fff; }
.svc-point::before {
  content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
}

/* ---------- Service visual panels (fill empty space) ---------- */
.svc-visual { position: relative; overflow: hidden; }
.svc-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 72%);
  opacity: .7;
}
.svc-visual::after {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,102,255,.18), transparent 68%); filter: blur(8px);
}
.svc-visual svg { position: relative; z-index: 1; width: 168px; height: 168px; }
@media (max-width: 960px){ .svc-visual { min-height: 230px !important; } .svc-visual svg { width: 132px; height: 132px; } }

/* ---------- Sticky-CTA bottom clearance (mobile) ---------- */
@media (max-width: 760px){ body { padding-bottom: 78px; } }

/* ---------- WhatsApp ---------- */
:root { --wa: #25d366; --wa-dark: #128c7e; }
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: var(--r-pill); background: var(--wa); color: #fff; font-weight: 600; font-size: .95rem;
  box-shadow: 0 14px 34px -10px rgba(37,211,102,.6); transition: transform .3s var(--ease), box-shadow .3s; }
.wa-fab:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 44px -12px rgba(37,211,102,.75); }
.wa-fab svg { flex: none; }
.wa-fab .wa-label { white-space: nowrap; }
.wa-fab::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(37,211,102,.55); animation: waPulse 2.6s var(--ease) infinite; }
@keyframes waPulse { to { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }
@media (max-width: 760px){ .wa-fab { bottom: 88px; right: 16px; padding: 13px; } .wa-fab .wa-label { display:none; } }
@media (prefers-reduced-motion: reduce){ .wa-fab::after { animation: none; } }

.wa-badge { display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; font-weight:600; padding:.45em .9em; border-radius:var(--r-pill);
  background: rgba(37,211,102,.12); color: var(--wa-dark); }
.dark .wa-badge { background: rgba(37,211,102,.18); color:#5ff0a0; }
.wa-chip-ico { width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(37,211,102,.14);color:var(--wa-dark);flex:none; }
.wa-panel { border-radius: var(--r-xl); overflow:hidden; border:1px solid var(--line);
  background: linear-gradient(160deg, #0b141a 0%, #0e2a22 100%); color:#fff; }
.wa-phone { max-width: 300px; width:100%; margin-inline:auto; border-radius: 26px; background:#0b141a; border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--sh-3); overflow:hidden; }
.wa-phone-top { background: var(--wa-dark); padding: 14px 16px; display:flex; align-items:center; gap:10px; color:#fff; }
.wa-phone-av { width:34px;height:34px;border-radius:50%;background:#fff2;display:grid;place-items:center; }
.wa-thread { padding:18px 14px; display:flex; flex-direction:column; gap:10px;
  background:#0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23ffffff08'/%3E%3C/svg%3E"); min-height: 260px; }
.wa-msg { max-width:82%; padding:9px 12px; font-size:.85rem; line-height:1.35; border-radius:10px; }
.wa-msg.them { background:#1f2c34; color:#e9edef; align-self:flex-start; border-top-left-radius:3px; }
.wa-msg.me { background:#005c4b; color:#e9edef; align-self:flex-end; border-top-right-radius:3px; }
.wa-msg .t { display:block; font-size:.65rem; opacity:.6; text-align:right; margin-top:3px; }

/* ---------- Floating AI Assistant ---------- */
.ai-fab { position: fixed; right: 20px; bottom: 84px; z-index: 96; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px 12px 14px; border-radius: var(--r-pill); color: #fff; font-weight: 600; font-size: .95rem; background: linear-gradient(120deg, #0066ff, #00a6ff); box-shadow: 0 16px 40px -12px rgba(0,102,255,.7); transition: transform .3s var(--ease), box-shadow .3s, opacity .3s; }
.ai-fab:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 24px 50px -14px rgba(0,102,255,.85); }
.ai-fab svg { flex: none; }
.ai-fab-ping { position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%; background: #00c853; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(0,200,83,.5); animation: aiPing 2.4s var(--ease) infinite; }
@keyframes aiPing { to { box-shadow: 0 0 0 9px rgba(0,200,83,0); } }
body.ai-open .ai-fab { opacity: 0; pointer-events: none; transform: scale(.9); }
@media (prefers-reduced-motion: reduce){ .ai-fab-ping { animation: none; } }
@media (max-width: 760px){ .ai-fab { bottom: 150px; right: 16px; padding: 13px; } .ai-fab-label { display: none; } }

.ai-panel { position: fixed; right: 20px; bottom: 20px; z-index: 98; width: 384px; max-width: calc(100vw - 40px); height: 590px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; background: #0b0b0d; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,.65); transform: translateY(26px) scale(.96); transform-origin: bottom right; opacity: 0; pointer-events: none; transition: transform .4s var(--ease-out), opacity .3s; }
.ai-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.ai-panel .chat-body { flex: 1; min-height: 0; overflow-y: auto; }
.ai-panel .chat-body::-webkit-scrollbar { width: 6px; }
.ai-panel .chat-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
.ai-panel .ai-chips { padding: 0 16px 10px; }
.ai-close { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #9a9aa2; background: rgba(255,255,255,.06); transition: .2s; flex: none; }
.ai-close:hover { background: rgba(255,255,255,.15); color: #fff; }
.qr-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; align-self: flex-start; max-width: 92%; }
.qr { font-size: .82rem; padding: .5em .85em; border-radius: var(--r-pill); background: rgba(255,255,255,.06); color: #dbe4ff; border: 1px solid rgba(255,255,255,.14); cursor: pointer; transition: .18s; text-decoration: none; display: inline-block; line-height: 1.1; }
.qr:hover { background: rgba(0,102,255,.25); border-color: var(--blue); color: #fff; }
.qr-book { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.qr-book:hover { background: var(--blue-600); color: #fff; }
body.ai-open .wa-fab { opacity: 0; pointer-events: none; }
body.ai-open .sticky-cta { transform: translateY(120%); }
@media (max-width: 760px){ .ai-panel { right: 10px; left: 10px; bottom: 10px; width: auto; height: 78vh; max-height: calc(100vh - 20px); } }

/* ---------- Premium form polish ---------- */
.form-card { position: relative; overflow: hidden; }
.form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #0066ff, #00c2ff, #00c853); }
.field label { color: var(--ink-soft); }
.field input, .field select, .field textarea { background-color: var(--mist); border: 1.5px solid transparent; border-radius: 12px; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus { background-color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,102,255,.14); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }
.form-card .btn-primary { background: linear-gradient(120deg, #0066ff, #0052cc); }