/* ============================================
   Xtudio Landing — Custom Styles
   ============================================ */

/* Base */
html {
    scroll-padding-top: 4rem;
}

/* Smooth color transitions when switching themes */
body, header, footer, section, .reveal,
[class*="bg-ink"], [class*="bg-white"], [class*="bg-cyan"],
[class*="border"], [class*="text-white"], [class*="text-muted"] {
    transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

/* ============================================
   Language switcher (shared base)
   ============================================ */
.lang-link {
    color: #8b8ba7;
}
.lang-link:hover {
    color: #ffffff;
}
.lang-link.lang-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   LIGHT MODE
   Applied when <html class="light"> is present.
   Dark mode remains the default when class is absent.
   ============================================ */

html.light body {
    background-color: #fafafa;
    color: #0a0a0f;
}

/* Solid backgrounds */
html.light .bg-ink-900 { background-color: #ffffff !important; }
html.light .bg-ink-800 { background-color: #f5f5f7 !important; }
html.light .bg-ink-700 { background-color: #eeeef2 !important; }

/* Translucent backgrounds — reinvent as tinted whites */
html.light .bg-ink-800\/30,
html.light .bg-ink-800\/50,
html.light .bg-ink-800\/60,
html.light .bg-ink-800\/80 {
    background-color: rgba(245, 245, 247, 0.7) !important;
}
html.light .bg-ink-700\/80 {
    background-color: rgba(238, 238, 242, 0.9) !important;
}
html.light .bg-ink-900\/60,
html.light .bg-ink-900\/70 {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

/* Gradients involving ink colors */
html.light .bg-gradient-to-b.from-ink-900,
html.light .bg-gradient-to-b.to-ink-800 {
    background-image: linear-gradient(to bottom, #fafafa, #f5f5f7) !important;
}

/* Text */
html.light .text-white { color: #0a0a0f !important; }
html.light .text-muted { color: #5a6270 !important; }
html.light .text-white\/60 { color: rgba(10, 10, 15, 0.6) !important; }
html.light .text-white\/80 { color: rgba(10, 10, 15, 0.8) !important; }
html.light .text-muted\/60 { color: rgba(90, 98, 112, 0.7) !important; }
html.light .text-muted\/50 { color: rgba(90, 98, 112, 0.5) !important; }

/* Accent colors - darken cyan and coral for legibility on light bg */
html.light .text-cyan { color: #0891b2 !important; }
html.light .text-coral { color: #e11d48 !important; }
html.light .bg-cyan { background-color: #0891b2 !important; }
html.light .bg-cyan\/5 { background-color: rgba(8, 145, 178, 0.06) !important; }
html.light .bg-cyan\/10 { background-color: rgba(8, 145, 178, 0.1) !important; }
html.light .bg-coral\/10 { background-color: rgba(225, 29, 72, 0.08) !important; }
html.light .border-cyan { border-color: #0891b2 !important; }
html.light .border-cyan\/20 { border-color: rgba(8, 145, 178, 0.25) !important; }
html.light .border-cyan\/30 { border-color: rgba(8, 145, 178, 0.4) !important; }
html.light .border-cyan\/40 { border-color: rgba(8, 145, 178, 0.55) !important; }
html.light .border-coral\/30 { border-color: rgba(225, 29, 72, 0.35) !important; }

/* Gradients with cyan/coral */
html.light .from-cyan { --tw-gradient-from: #0891b2 !important; }
html.light .to-cyan { --tw-gradient-to: #0891b2 !important; }
html.light .from-cyan\/10 { --tw-gradient-from: rgba(8, 145, 178, 0.1) !important; }
html.light .to-cyan\/5 { --tw-gradient-to: rgba(8, 145, 178, 0.05) !important; }
html.light .from-cyan\/20 { --tw-gradient-from: rgba(8, 145, 178, 0.2) !important; }
html.light .to-coral { --tw-gradient-to: #e11d48 !important; }

/* Borders */
html.light .border-white\/5 { border-color: rgba(10, 10, 15, 0.06) !important; }
html.light .border-white\/10 { border-color: rgba(10, 10, 15, 0.1) !important; }
html.light .border-white\/15 { border-color: rgba(10, 10, 15, 0.15) !important; }
html.light .border-white\/30 { border-color: rgba(10, 10, 15, 0.3) !important; }
html.light .border-white\/40 { border-color: rgba(10, 10, 15, 0.4) !important; }
html.light .hover\:border-white\/25:hover { border-color: rgba(10, 10, 15, 0.25) !important; }
html.light .hover\:border-white\/30:hover { border-color: rgba(10, 10, 15, 0.3) !important; }
html.light .hover\:border-white\/40:hover { border-color: rgba(10, 10, 15, 0.4) !important; }

/* White-alpha backgrounds become black-alpha */
html.light .bg-white\/5 { background-color: rgba(10, 10, 15, 0.04) !important; }
html.light .bg-white\/10 { background-color: rgba(10, 10, 15, 0.07) !important; }
html.light .hover\:bg-white\/5:hover { background-color: rgba(10, 10, 15, 0.04) !important; }

/* Gradient hairlines (from-white/10 etc) */
html.light .from-white\/10 { --tw-gradient-from: rgba(10, 10, 15, 0.1) !important; }
html.light .via-white\/5 { --tw-gradient-via: rgba(10, 10, 15, 0.05) !important; }

/* Primary CTA (bg-white text-ink-900) needs to invert in light mode */
html.light a.bg-white.text-ink-900,
html.light button.bg-white.text-ink-900,
html.light .bg-white.text-ink-900 {
    background-color: #0a0a0f !important;
    color: #ffffff !important;
}
html.light a.bg-white.text-ink-900:hover,
html.light button.bg-white.text-ink-900:hover,
html.light .bg-white.text-ink-900:hover {
    background-color: #1a1a24 !important;
}
html.light .hover\:bg-white\/90:hover {
    background-color: #1a1a24 !important;
}

/* Nav / footer language switcher base color needs to adapt */
html.light .lang-link { color: #5a6270; }
html.light .lang-link:hover { color: #0a0a0f; }
html.light .lang-link.lang-active {
    color: #0a0a0f;
    background: rgba(10, 10, 15, 0.08);
}

/* Ambient backdrop — softer wash in light mode */
html.light .ambient-bg {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(8, 145, 178, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 10% 100%, rgba(225, 29, 72, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 60%, rgba(8, 145, 178, 0.04) 0%, transparent 60%);
}

html.light .grain { opacity: 0; }

/* Gradient text — use darker palette in light so it reads */
html.light .gradient-text {
    background: linear-gradient(135deg, #0891b2 0%, #7c3aed 50%, #e11d48 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Form fields in contact section */
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="tel"],
html.light select,
html.light textarea {
    color: #0a0a0f;
}
html.light input[type="text"]::placeholder,
html.light input[type="email"]::placeholder,
html.light input[type="tel"]::placeholder,
html.light textarea::placeholder {
    color: rgba(10, 10, 15, 0.4);
}

/* intl-tel-input on light background */
html.light .iti__selected-flag {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}
html[dir="rtl"].light .iti__selected-flag {
    border-radius: 0 0.5rem 0.5rem 0 !important;
}
html.light .iti__country-list {
    background: #ffffff !important;
    border: 1px solid rgba(10, 10, 15, 0.1) !important;
    color: #0a0a0f !important;
}
html.light .iti__country:hover { background: rgba(10, 10, 15, 0.04) !important; }
html.light .iti__country.iti__highlight { background: rgba(8, 145, 178, 0.1) !important; }
html.light .iti__divider { border-color: rgba(10, 10, 15, 0.1) !important; }
html.light .iti__dial-code { color: rgba(10, 10, 15, 0.6) !important; }

/* Theme toggle button icon visibility */
html.light .icon-sun { display: none; }
html.light .icon-moon { display: inline-block; }

/* Logo wrapper — transparent in dark mode; becomes a premium dark
   "badge" in light mode with a subtle gradient body, gradient-bordered
   edge, inner highlight, and a cyan-tinted drop-shadow. */
.logo-wrap {
    position: relative;
    isolation: isolate;
    transition: padding 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

html.light .logo-wrap {
    padding: 0.5rem 0.9rem;
    border-radius: 0.75rem;
    background:
        radial-gradient(120% 140% at 50% -20%, rgba(0, 212, 255, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, #161622 0%, #0a0a0f 100%);
    box-shadow:
        0 1px 2px rgba(10, 10, 15, 0.06),
        0 12px 32px -14px rgba(8, 145, 178, 0.45),
        0 2px 12px -6px rgba(10, 10, 15, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Gradient hairline border using mask-composite for a clean premium edge */
html.light .logo-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.02) 60%,
        rgba(255, 107, 107, 0.35) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Soft specular highlight across the top edge */
html.light .logo-wrap::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 2;
}

html.light .logo-wrap img {
    position: relative;
    z-index: 0;
}

/* RTL adjustments */
html[dir="rtl"] body {
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

html[dir="rtl"] .font-display {
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* Ambient background — radial glow layers */
.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 10% 100%, rgba(255, 107, 107, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 60%, rgba(0, 212, 255, 0.05) 0%, transparent 60%);
}

/* Subtle noise/grain */
.grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
}

/* Relative positioning for main content */
main, header, footer {
    position: relative;
    z-index: 2;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #00d4ff 0%, #8b5cf6 50%, #ff6b6b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Radial background utility */
.bg-gradient-radial {
    background: radial-gradient(circle, var(--tw-gradient-from, rgba(0,212,255,0.2)) 0%, var(--tw-gradient-to, transparent) 70%);
}

/* Scroll reveal animation */
html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

html.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Hero visual — laptop dashboard + tablet calendar + phone app
   (markup: landing/partials/hero-visual.blade.php; counters: landing.js)
   Authored at 620x560 and scaled to its column by JS. Tokens below are
   dark-first; html.light swaps them. Everything loops on an 8s cycle.
   ============================================ */
.hv {
    --hv-glass: rgba(18, 18, 26, 0.80);
    --hv-edge: rgba(255, 255, 255, 0.10);
    --hv-surface: #15151f;
    --hv-ink: #f4f5f8;
    --hv-muted: #8b8ba7;
    --hv-hair: rgba(255, 255, 255, 0.08);
    --hv-cyan: #00d4ff;
    --hv-coral: #ff6b6b;
    --hv-cyan-soft: rgba(0, 212, 255, 0.16);
    --hv-coral-soft: rgba(255, 107, 107, 0.16);
    --hv-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    --hv-base: #1c1c28;
    position: absolute;
    inset: 0;
    color: var(--hv-ink);
    font-family: inherit;
    line-height: 1.25;
}
html.light .hv {
    --hv-glass: rgba(255, 255, 255, 0.88);
    --hv-edge: rgba(10, 10, 15, 0.10);
    --hv-surface: #ffffff;
    --hv-ink: #0a0a0f;
    --hv-muted: #5a6270;
    --hv-hair: rgba(10, 10, 15, 0.08);
    --hv-cyan: #0891b2;
    --hv-coral: #e11d48;
    --hv-cyan-soft: rgba(8, 145, 178, 0.14);
    --hv-coral-soft: rgba(225, 29, 72, 0.12);
    --hv-shadow: 0 24px 50px rgba(10, 10, 15, 0.14);
    --hv-base: #d9dbe3;
}
.hv-scale {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 620px;
    height: 560px;
    margin: -280px 0 0 -310px;
    transform-origin: center;
    perspective: 1400px;
}
/* No-JS / pre-JS safety net: approximate fit per breakpoint. landing.js
   refines this to the exact column size once it runs. */
@media (max-width: 639px)  { .hv-scale { transform: scale(0.58); } }
@media (min-width: 640px) and (max-width: 1023px) { .hv-scale { transform: scale(0.85); } }
.hv-device {
    position: absolute;
    transform-style: preserve-3d;
    animation: hv-float 8s ease-in-out infinite;
    transform: var(--rot);
}
.hv-laptop { inset-inline-end: 0; top: 0; width: 430px; --rot: rotateY(-10deg) rotateX(4deg); z-index: 1; }
.hv-tablet { inset-inline-start: 0; top: 200px; width: 210px; --rot: rotateY(12deg) rotateX(2deg); z-index: 2; animation-delay: -2.5s; }
.hv-phone  { inset-inline-start: 215px; top: 262px; width: 152px; --rot: rotateY(-6deg); z-index: 3; animation-delay: -5s; }
html[dir="rtl"] .hv-laptop { --rot: rotateY(10deg) rotateX(4deg); }
html[dir="rtl"] .hv-tablet { --rot: rotateY(-12deg) rotateX(2deg); }
html[dir="rtl"] .hv-phone  { --rot: rotateY(6deg); }
@keyframes hv-float {
    0%, 100% { transform: var(--rot) translateY(0); }
    50%      { transform: var(--rot) translateY(-8px); }
}
.hv-screen {
    background: var(--hv-glass);
    border: 1px solid var(--hv-edge);
    border-radius: 14px;
    box-shadow: var(--hv-shadow);
    padding: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hv-base { height: 10px; margin: 0 -22px; border-radius: 0 0 12px 12px; background: var(--hv-base); box-shadow: var(--hv-shadow); }
.hv-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv-muted); }
.hv-brand { display: inline-flex; align-items: center; gap: 5px; color: var(--hv-ink); }
.hv-brand i { width: 6px; height: 6px; border-radius: 50%; background: var(--hv-cyan); box-shadow: 0 0 8px var(--hv-cyan); }
.hv-lbl { font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hv-muted); margin-bottom: 5px; }
.hv-card { background: var(--hv-surface); border: 1px solid var(--hv-hair); border-radius: 8px; padding: 8px 9px; }

/* laptop: KPIs, chart, rooms, journal */
.hv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hv-kpi { background: var(--hv-surface); border: 1px solid var(--hv-hair); border-radius: 8px; padding: 7px 9px; }
.hv-kpi span { display: block; font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hv-muted); }
.hv-kpi b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hv-kpi b em { font-style: normal; font-size: 8px; color: var(--hv-cyan); margin-inline-start: 3px; }
.hv-chart { margin-top: 7px; background: var(--hv-surface); border: 1px solid var(--hv-hair); border-radius: 8px; padding: 8px 9px 4px; }
.hv-chart svg { width: 100%; height: 78px; display: block; overflow: visible; }
.hv-grid { stroke: var(--hv-hair); stroke-width: 1; }
.hv-area { fill: var(--hv-cyan); opacity: 0.12; }
.hv-line, .hv-line2 { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: hv-draw 8s ease-in-out infinite; }
.hv-line { stroke: var(--hv-cyan); }
.hv-line2 { stroke: var(--hv-coral); stroke-width: 1.6; animation-delay: 0.4s; }
@keyframes hv-draw {
    0%        { stroke-dashoffset: 600; opacity: 1; }
    40%, 80%  { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.hv-bottom { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 7px; margin-top: 7px; }
.hv-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.hv-slots b { height: 14px; border-radius: 3px; background: var(--hv-cyan-soft); opacity: 0; animation: hv-pop 8s ease infinite; animation-delay: var(--d); }
.hv-slots b.f { background: var(--hv-cyan); }
.hv-slots b.c { background: var(--hv-coral-soft); }
.hv-journal { list-style: none; margin: 0; padding: 0; font-size: 8px; font-variant-numeric: tabular-nums; }
.hv-journal li { display: flex; justify-content: space-between; gap: 6px; padding: 2.5px 0; border-bottom: 1px solid var(--hv-hair); opacity: 0; animation: hv-slide 8s ease infinite; animation-delay: var(--d); }
.hv-journal li:last-child { border-bottom: 0; }
.hv-journal b { color: var(--hv-cyan); font-weight: 600; }
.hv-journal b.d { color: var(--hv-coral); }
@keyframes hv-pop {
    0%        { opacity: 0; transform: scale(0.7); }
    6%        { opacity: 1; transform: scale(1); }
    72%       { opacity: 1; }
    84%, 100% { opacity: 0; }
}
@keyframes hv-slide {
    0%        { opacity: 0; transform: translateX(10px); }
    6%        { opacity: 1; transform: none; }
    72%       { opacity: 1; }
    84%, 100% { opacity: 0; }
}

/* ---- scenes (tablet + phone). One .is-active at a time; landing.js
   rotates them. Showing a scene restarts its animations, so every effect
   below is a ONE-SHOT sequence (forwards) timed inside ~5s. ---- */
.hv-scene { display: none; }
/* fade only: a transform here would make the scene the containing block of
   the absolutely positioned toast, pulling it off the bottom of the screen */
.hv-scene.is-active { display: block; animation: hv-scene-in 0.45s ease both; }
@keyframes hv-scene-in { from { opacity: 0; } to { opacity: 1; } }
.hv-toast { position: absolute; left: 10px; right: 10px; bottom: 14px; padding: 7px 9px; border-radius: 8px; background: var(--hv-ink); color: var(--hv-surface); font-size: 8.5px; font-weight: 600; text-align: center; opacity: 0; transform: translateY(8px); animation: hv-toast-once 5.2s ease forwards; }
@keyframes hv-toast-once { 0%, 58% { opacity: 0; transform: translateY(8px); } 64%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.hv-note { margin-top: 7px; font-size: 7.5px; color: var(--hv-muted); text-align: center; opacity: 0; animation: hv-in-once 5.2s ease forwards; }
@keyframes hv-in-once { 0%, 66% { opacity: 0; transform: translateY(4px); } 74%, 100% { opacity: 1; transform: none; } }
/* two- and three-state buttons / pills */
.hv-swap { position: relative; }
.hv-swap > span { position: absolute; inset: 0; }
.hv-swap .a { animation: hv-st-a 5.2s ease forwards; }
.hv-swap .b { opacity: 0; animation: hv-st-b 5.2s ease forwards; }
.hv-swap.three .a { animation-name: hv-st3-a; }
.hv-swap.three .b { animation-name: hv-st3-b; }
.hv-swap.three .c { opacity: 0; animation: hv-st3-c 5.2s ease forwards; }
@keyframes hv-st-a  { 0%, 42% { opacity: 1; transform: none; } 47%, 100% { opacity: 0; transform: scale(0.96); } }
@keyframes hv-st-b  { 0%, 44% { opacity: 0; transform: scale(0.96); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes hv-st3-a { 0%, 30% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes hv-st3-b { 0%, 33% { opacity: 0; } 38%, 66% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes hv-st3-c { 0%, 69% { opacity: 0; transform: scale(0.96); } 75%, 100% { opacity: 1; transform: none; } }
.hv-swap.btn { height: 26px; margin-top: 6px; }
.hv-btn { display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 9.5px; font-weight: 600; background: var(--hv-cyan); color: #0a0a0f; }
.hv-btn.ok { background: var(--hv-cyan-soft); color: var(--hv-cyan); border: 1px solid var(--hv-cyan); }
.hv-btn.warn { background: rgba(245, 158, 11, 0.16); color: #f59e0b; border: 1px solid #f59e0b; }
.hv-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; height: 20px; border-radius: 999px; font-size: 7.5px; font-weight: 600; white-space: nowrap; background: var(--hv-cyan); color: #0a0a0f; }
.hv-pill.ok { background: var(--hv-cyan-soft); color: var(--hv-cyan); border: 1px solid var(--hv-cyan); }
.hv-pill.ghost { background: transparent; color: var(--hv-muted); border: 1px solid var(--hv-hair); }
.hv-swap > .hv-pill { position: absolute; inset: 0; }
/* generic rows / key-values */
.hv-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; margin-bottom: 5px; border-radius: 8px; background: var(--hv-surface); border: 1px solid var(--hv-hair); opacity: 0; animation: hv-row-in 0.6s ease forwards; animation-delay: var(--d, 0s); }
.hv-row > div:first-child { display: grid; gap: 1px; min-width: 0; }
.hv-row b { font-size: 9px; font-weight: 600; }
.hv-row small { font-size: 7.5px; color: var(--hv-muted); }
.hv-row .hv-swap { width: 74px; height: 20px; flex: none; }
.hv-row.hl { animation: hv-row-in 0.6s ease forwards, hv-row-hl 5.2s ease forwards; }
@keyframes hv-row-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes hv-row-hl { 0%, 46% { border-color: var(--hv-hair); box-shadow: none; } 52%, 100% { border-color: var(--hv-cyan); box-shadow: 0 0 0 3px var(--hv-cyan-soft); } }
.hv-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 8.5px; }
.hv-kv span { color: var(--hv-muted); }
.hv-kv b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-phone .hv-kv { font-size: 8px; }
.hv-kv.big b { font-size: 16px; color: var(--hv-cyan); }
.hv-methods { display: flex; gap: 5px; margin-top: 8px; }
.hv-methods span { flex: 1; text-align: center; font-size: 7.5px; font-weight: 600; padding: 6px 0; border-radius: 7px; border: 1px solid var(--hv-hair); background: var(--hv-surface); color: var(--hv-muted); }
.hv-methods .sel { animation: hv-select 5.2s ease forwards; }
@keyframes hv-select { 0%, 20% { border-color: var(--hv-hair); color: var(--hv-muted); background: var(--hv-surface); } 28%, 100% { border-color: var(--hv-cyan); color: var(--hv-cyan); background: var(--hv-cyan-soft); } }
.late { animation-delay: 0s; }

/* tablet: reception */
.hv-tablet .hv-screen { border-radius: 18px; padding: 14px 12px; min-height: 300px; position: relative; }
.hv-cal-head { display: grid; grid-template-columns: 26px repeat(3, 1fr); gap: 4px; font-size: 7.5px; color: var(--hv-muted); margin-bottom: 5px; text-align: center; }
.hv-cal-grid { display: grid; grid-template-columns: 26px repeat(3, 1fr); gap: 4px; align-items: stretch; }
.hv-cal-grid .t { font-size: 7px; color: var(--hv-muted); align-self: center; font-variant-numeric: tabular-nums; }
.hv-cal-grid b { height: 26px; border-radius: 4px; background: var(--hv-cyan-soft); opacity: 0; animation: hv-pop-once 0.5s ease forwards; animation-delay: var(--d); }
.hv-cal-grid b.f { background: var(--hv-cyan); }
.hv-cal-grid b.c { background: var(--hv-coral-soft); }
@keyframes hv-pop-once { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.hv-tablet .hv-swap.btn { height: 28px; margin-top: 8px; }

/* phone: staff app */
.hv-phone .hv-screen { border-radius: 22px; padding: 22px 10px 12px; min-height: 296px; position: relative; overflow: hidden; }
.hv-notch { position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--hv-hair); }
.hv-ph-head { display: grid; gap: 2px; margin-bottom: 10px; }
.hv-ph-head small { font-size: 8px; color: var(--hv-muted); }
.hv-ph-head strong { font-size: 12px; font-weight: 600; line-height: 1.2; }
.hv-ph-head em { font-style: normal; font-size: 7.5px; color: var(--hv-muted); }
.hv-ph-card { background: var(--hv-surface); border: 1px solid var(--hv-hair); border-radius: 10px; padding: 9px; display: grid; gap: 3px; }
.hv-ph-card small { font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hv-muted); }
.hv-ph-card strong { font-size: 11px; font-weight: 600; }
.hv-ph-card > span { font-size: 8.5px; color: var(--hv-muted); }
.hv-ph-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 8px; border-radius: 999px; background: var(--hv-surface); border: 1px solid var(--hv-hair); font-size: 7.5px; color: var(--hv-muted); }
.hv-ph-chip i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.hv-ph-chip.late { opacity: 0; animation: hv-in-once 5.2s ease forwards; }
.hv-phone .hv-screen, .hv-tablet .hv-screen { position: relative; }
.hv-pay { list-style: none; margin: 0; padding: 0; font-size: 8.5px; font-variant-numeric: tabular-nums; }
.hv-pay li { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--hv-hair); opacity: 0; animation: hv-row-in 0.5s ease forwards; animation-delay: var(--d, 0s); }
.hv-pay li span { color: var(--hv-muted); }
.hv-pay li b { font-weight: 600; }
.hv-pay li b.up { color: var(--hv-cyan); }
.hv-pay li b.d { color: var(--hv-coral); }
.hv-pay li.net { border-bottom: 0; margin-top: 2px; padding-top: 7px; border-top: 1px solid var(--hv-edge); }
.hv-pay li.net span { color: var(--hv-ink); font-weight: 600; }
.hv-pay li.net b { font-size: 11px; color: var(--hv-cyan); }

/* ============================================
   Header: Features dropdown (desktop) + mobile menu
   ============================================ */
.nav-dd { position: relative; }
.nav-dd-label { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-dd-label svg { width: 0.85rem; height: 0.85rem; transition: transform 0.2s; }
.nav-dd:hover .nav-dd-label svg, .nav-dd.is-open .nav-dd-label svg { transform: rotate(180deg); }
.nav-dd-panel {
    position: absolute; top: 100%; inset-inline-start: -1rem; z-index: 60;
    min-width: 34rem; margin-top: 0.9rem; padding: 0.75rem;
    border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(14, 14, 20, 0.96); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-dd-panel::before { content: ""; position: absolute; top: -0.9rem; left: 0; right: 0; height: 0.9rem; }
.nav-dd:hover .nav-dd-panel, .nav-dd.is-open .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transform: none; }
html.light .nav-dd-panel { background: rgba(255, 255, 255, 0.97); border-color: rgba(10, 10, 15, 0.10); box-shadow: 0 30px 80px rgba(10, 10, 15, 0.14); }
.nav-dd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem; }
.nav-dd-grid a { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.65rem; align-items: start; padding: 0.55rem 0.6rem; border-radius: 0.5rem; color: #ffffff; text-decoration: none; transition: background-color 0.15s; }
.nav-dd-grid a:hover, .nav-dd-grid a:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
html.light .nav-dd-grid a { color: #0a0a0f; }
html.light .nav-dd-grid a:hover, html.light .nav-dd-grid a:focus-visible { background: rgba(10, 10, 15, 0.05); }
.nav-dd-icon { width: 2.1rem; height: 2.1rem; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.04); display: flex; align-items: center; justify-content: center; color: rgb(0, 212, 255); }
.nav-dd-icon svg { width: 1.05rem; height: 1.05rem; }
html.light .nav-dd-icon { border-color: rgba(10, 10, 15, 0.10); background: #f5f5f7; color: #0891b2; }
.nav-dd-text { display: grid; gap: 0.1rem; min-width: 0; }
.nav-dd-text b { font-size: 0.86rem; font-weight: 600; line-height: 1.2; }
.nav-dd-text small { font-size: 0.74rem; color: #8b8ba7; line-height: 1.3; }
html.light .nav-dd-text small { color: #5a6270; }

/* Indexed eyebrow (hero) and spec-sheet trust bar: option C */
.eyebrow-index { display: inline-flex; align-items: baseline; gap: 0.6rem; padding-bottom: 0.35rem; border-bottom: 2px solid rgb(0, 212, 255); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; }
.eyebrow-index small { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.68rem; letter-spacing: 0; color: rgb(0, 212, 255); }
html.light .eyebrow-index { color: #0a0a0f; border-bottom-color: #0891b2; }
html.light .eyebrow-index small { color: #0891b2; }
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; align-items: start; }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: 1.6fr repeat(6, 1fr); gap: 0 1.5rem; } }
.trust-label { grid-column: 1 / -1; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8ba7; align-self: end; padding-top: 0.5rem; }
@media (min-width: 1024px) { .trust-label { grid-column: auto; padding-inline-end: 1rem; } }
.trust-item { display: grid; gap: 0.2rem; padding-top: 0.55rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.trust-item small { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8ba7; }
html[dir="rtl"] .trust-item small { font-family: inherit; letter-spacing: 0; }
.trust-item span { font-size: 0.85rem; font-weight: 600; color: #ffffff; line-height: 1.3; }
html.light .trust-item { border-top-color: rgba(10, 10, 15, 0.12); }
html.light .trust-item span { color: #0a0a0f; }
html.light .trust-item small, html.light .trust-label { color: #5a6270; }
.nav-dd-all { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0.75rem 0.25rem; font-size: 0.8rem; font-weight: 600; color: rgb(0, 212, 255); text-decoration: none; }
html.light .nav-dd-all { color: #0891b2; }
.nav-dd-all svg { width: 0.9rem; height: 0.9rem; }
html[dir="rtl"] .nav-dd-all svg { transform: rotate(180deg); }

/* md:hidden may not exist in the precompiled Tailwind build, so hide explicitly */
@media (min-width: 768px) { .nav-burger, .mobile-nav { display: none !important; } }
.nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0 11px; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.10); background: transparent; cursor: pointer; }
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
html.light .nav-burger { border-color: rgba(10, 10, 15, 0.15); color: #0a0a0f; }
.mobile-nav { border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(10, 10, 15, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 0.75rem 0 1rem; max-height: calc(100vh - 4rem); overflow-y: auto; }
html.light .mobile-nav { background: rgba(255, 255, 255, 0.97); border-top-color: rgba(10, 10, 15, 0.08); }
.mobile-nav-link { display: block; padding: 0.85rem 0; font-size: 1rem; font-weight: 600; color: #ffffff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
html.light .mobile-nav-link { color: #0a0a0f; border-bottom-color: rgba(10, 10, 15, 0.06); }
.mobile-nav-sub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 1rem; padding: 0.5rem 0 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
html.light .mobile-nav-sub { border-bottom-color: rgba(10, 10, 15, 0.06); }
.mobile-nav-sub a { display: block; padding: 0.55rem 0; font-size: 0.9rem; color: #8b8ba7; text-decoration: none; }
html.light .mobile-nav-sub a { color: #5a6270; }
.mobile-nav-login { border-bottom: 0; color: rgb(0, 212, 255); }
html.light .mobile-nav-login { color: #0891b2; }

/* ============================================
   Module feature pages (/features, /features/{module})
   Own classes only: the Tailwind file is precompiled, so new utilities
   would not exist. Tokens are dark-first; html.light swaps them.
   ============================================ */
.fp {
    --fp-surface: rgba(255, 255, 255, 0.04);
    --fp-surface-2: rgba(255, 255, 255, 0.07);
    --fp-edge: rgba(255, 255, 255, 0.10);
    --fp-ink: #ffffff;
    --fp-muted: #8b8ba7;
    --fp-cyan: #00d4ff;
    --fp-cyan-soft: rgba(0, 212, 255, 0.10);
    --fp-alt: rgba(255, 255, 255, 0.02);
    display: block;
    padding-top: 4rem;
}
html.light .fp {
    --fp-surface: #ffffff;
    --fp-surface-2: #f5f5f7;
    --fp-edge: rgba(10, 10, 15, 0.10);
    --fp-ink: #0a0a0f;
    --fp-muted: #5a6270;
    --fp-cyan: #0891b2;
    --fp-cyan-soft: rgba(8, 145, 178, 0.08);
    --fp-alt: rgba(10, 10, 15, 0.025);
}
.fp-hero { padding: 3.5rem 0 3rem; }
.fp-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem; color: var(--fp-muted); margin-bottom: 2rem; }
.fp-crumbs a { color: var(--fp-muted); text-decoration: none; }
.fp-crumbs a:hover { color: var(--fp-ink); }
.fp-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .fp-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } }
.fp-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fp-cyan); margin-bottom: 1rem; }
.fp-h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 1.25rem; color: var(--fp-ink); text-wrap: balance; }
.fp-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 1.5rem; color: var(--fp-ink); text-wrap: balance; }
.fp-lead { font-size: 1.125rem; line-height: 1.65; color: var(--fp-muted); max-width: 36rem; margin: 0 0 2rem; }
.fp-note { font-size: 0.85rem; color: var(--fp-muted); margin: -0.75rem 0 1.5rem; }
.fp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fp-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.4rem; border-radius: 0.5rem; border: 1px solid var(--fp-edge); font-size: 0.9rem; font-weight: 600; color: var(--fp-ink); text-decoration: none; transition: border-color 0.2s, background-color 0.2s; }
.fp-btn:hover { border-color: var(--fp-cyan); }
.fp-btn--primary { background: var(--fp-ink); color: #0a0a0f; border-color: transparent; }
html.light .fp-btn--primary { color: #ffffff; }
.fp-btn--primary:hover { box-shadow: 0 0 32px rgba(0, 212, 255, 0.35); }
.fp-section { padding: 3.5rem 0; }
.fp-section--alt { background: var(--fp-alt); border-top: 1px solid var(--fp-edge); border-bottom: 1px solid var(--fp-edge); }
.fp-features { display: grid; gap: 1px; background: var(--fp-edge); border: 1px solid var(--fp-edge); border-radius: 1.25rem; overflow: hidden; }
@media (min-width: 640px) { .fp-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fp-features { grid-template-columns: repeat(3, 1fr); } }
.fp-feature { background: var(--fp-surface); padding: 1.75rem; }
html.light .fp-feature { background: var(--fp-surface); }
.fp-feature h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--fp-ink); }
.fp-feature p { font-size: 0.92rem; line-height: 1.6; color: var(--fp-muted); margin: 0; }
.fp-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--fp-cyan-soft); border: 1px solid var(--fp-edge); color: var(--fp-cyan); margin-bottom: 1rem; }
.fp-feature-icon svg { width: 1.25rem; height: 1.25rem; }
.fp-shot { margin: 0; border-radius: 1rem; overflow: hidden; border: 1px solid var(--fp-edge); background: var(--fp-surface-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
html.light .fp-shot { box-shadow: 0 30px 80px rgba(10, 10, 15, 0.12); }
.fp-shot img { display: block; width: 100%; height: auto; }
.fp-shot figcaption { padding: 0.9rem 1.1rem; font-size: 0.85rem; color: var(--fp-muted); border-top: 1px solid var(--fp-edge); }
.fp-screens { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .fp-screens { grid-template-columns: repeat(2, 1fr); } }
.fp-connects { display: grid; gap: 1rem; }
@media (min-width: 768px) { .fp-connects { grid-template-columns: repeat(3, 1fr); } }
.fp-connect { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--fp-edge); background: var(--fp-surface); text-decoration: none; color: var(--fp-ink); transition: border-color 0.2s; }
.fp-connect:hover { border-color: var(--fp-cyan); }
.fp-connect .fp-eyebrow { margin-bottom: 0.25rem; }
.fp-connect p { margin: 0; color: var(--fp-muted); font-size: 0.95rem; line-height: 1.55; flex: 1; }
.fp-connect-more { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--fp-cyan); margin-top: 0.5rem; }
.fp-connect-more svg { width: 1rem; height: 1rem; }
html[dir="rtl"] .fp-connect-more svg { transform: rotate(180deg); }
.fp-cta { display: grid; gap: 1.5rem; align-items: center; padding: 2.5rem; border-radius: 1.5rem; border: 1px solid var(--fp-edge); background: linear-gradient(135deg, var(--fp-cyan-soft), transparent 60%), var(--fp-surface); }
@media (min-width: 768px) { .fp-cta { grid-template-columns: 1fr auto; } }
.fp-cta .fp-h2 { margin-bottom: 0.5rem; }
.fp-cta p { margin: 0; color: var(--fp-muted); max-width: 40rem; }
.fp-others { margin-top: 2.5rem; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fp-chips a { padding: 0.5rem 0.9rem; border-radius: 0.35rem; border: 1px solid var(--fp-edge); font-size: 0.85rem; font-weight: 500; color: var(--fp-ink); text-decoration: none; transition: border-color 0.2s, background-color 0.2s; }
.fp-chips a:hover { border-color: var(--fp-cyan); background: var(--fp-cyan-soft); }
.fp-modules { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .fp-modules { grid-template-columns: repeat(2, 1fr); } }
.fp-module { display: flex; flex-direction: column; border-radius: 1.25rem; border: 1px solid var(--fp-edge); background: var(--fp-surface); overflow: hidden; text-decoration: none; color: var(--fp-ink); transition: border-color 0.2s, transform 0.2s; }
.fp-module:hover { border-color: var(--fp-cyan); transform: translateY(-2px); }
.fp-module-shot { border-bottom: 1px solid var(--fp-edge); background: var(--fp-surface-2); }
.fp-module-shot img { display: block; width: 100%; height: auto; }
.fp-module-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.fp-module-body h2 { font-size: 1.3rem; font-weight: 600; margin: 0; }
.fp-module-body p { margin: 0; color: var(--fp-muted); font-size: 0.95rem; line-height: 1.55; flex: 1; }
/* ---- Blog ---- */
.bp-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .bp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bp-grid { grid-template-columns: repeat(3, 1fr); } }
.bp-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--fp-edge); background: var(--fp-surface); color: var(--fp-ink); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.bp-card:hover { border-color: var(--fp-cyan); transform: translateY(-2px); }
.bp-card h2, .bp-card h3 { font-size: 1.15rem; font-weight: 600; margin: 0; line-height: 1.3; }
.bp-card p { margin: 0; color: var(--fp-muted); font-size: 0.92rem; line-height: 1.55; flex: 1; }
.bp-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--fp-muted); }
.bp-chip { padding: 0.2rem 0.6rem; border-radius: 0.25rem; background: var(--fp-cyan-soft); color: var(--fp-cyan); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; }
.bp-hero { padding-bottom: 1rem; }
.bp-title { font-size: clamp(2rem, 4vw, 3rem); }
.bp-byline { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.85rem; color: var(--fp-muted); }
.bp-body-section { padding-top: 1rem; }
.bp-prose { color: var(--fp-ink); font-size: 1.05rem; line-height: 1.75; }
.bp-prose > * + * { margin-top: 1.1rem; }
.bp-prose h2 { font-family: "Space Grotesk", sans-serif; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin-top: 2.4rem; }
.bp-prose h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.2rem; font-weight: 600; margin-top: 1.8rem; }
html[dir="rtl"] .bp-prose h2, html[dir="rtl"] .bp-prose h3 { font-family: "IBM Plex Sans Arabic", sans-serif; }
.bp-prose p, .bp-prose li { color: var(--fp-muted); }
.bp-prose strong { color: var(--fp-ink); font-weight: 600; }
.bp-prose a { color: var(--fp-cyan); text-decoration: underline; text-underline-offset: 3px; }
.bp-prose ul, .bp-prose ol { padding-inline-start: 1.4rem; }
.bp-prose li + li { margin-top: 0.4rem; }
.bp-prose blockquote { border-inline-start: 3px solid var(--fp-cyan); padding: 0.5rem 1rem; background: var(--fp-surface); border-radius: 0.5rem; }
.bp-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.bp-prose th, .bp-prose td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--fp-edge); text-align: start; vertical-align: top; }
.bp-prose th { color: var(--fp-ink); font-weight: 600; }
.bp-related { display: grid; gap: 0.35rem; margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: 1rem; border: 1px solid var(--fp-edge); background: linear-gradient(135deg, var(--fp-cyan-soft), transparent 60%), var(--fp-surface); color: var(--fp-ink); text-decoration: none; }
.bp-related strong { font-size: 1.1rem; }
.bp-related > span:last-child { color: var(--fp-muted); font-size: 0.92rem; }
.bp-related:hover { border-color: var(--fp-cyan); }

/* ---- Pricing ---- */
.pr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 768px) { .pr-steps { grid-template-columns: repeat(3, 1fr); } }
.pr-step { position: relative; padding: 1.75rem 1.5rem 1.5rem; border-radius: 1rem; border: 1px solid var(--fp-edge); background: var(--fp-surface); }
.pr-step-n { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--fp-cyan); color: #0a0a0f; font-weight: 700; font-family: "Space Grotesk", sans-serif; margin-bottom: 1rem; }
.pr-step h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--fp-ink); }
.pr-step p { margin: 0; color: var(--fp-muted); font-size: 0.95rem; line-height: 1.6; }
.pr-grid { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 900px) { .pr-grid { grid-template-columns: repeat(3, 1fr); } }
.pr-pkg { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; border-radius: 1.25rem; border: 1px solid var(--fp-edge); background: var(--fp-surface); }
.pr-pkg.is-featured { border-color: var(--fp-cyan); box-shadow: 0 0 0 4px var(--fp-cyan-soft); }
.pr-badge { position: absolute; top: -0.8rem; inset-inline-start: 1.5rem; padding: 0.3rem 0.7rem; border-radius: 0.3rem; background: var(--fp-cyan); color: #0a0a0f; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pr-pkg h3 { font-size: 1.5rem; font-weight: 600; margin: 0; color: var(--fp-ink); }
.pr-tagline { margin: -0.6rem 0 0; color: var(--fp-muted); font-size: 0.95rem; }
.pr-price { display: grid; gap: 0.15rem; padding: 0.75rem 0; border-top: 1px solid var(--fp-edge); border-bottom: 1px solid var(--fp-edge); }
.pr-price strong { font-family: "Space Grotesk", sans-serif; font-size: 1.9rem; font-weight: 600; color: var(--fp-ink); line-height: 1.1; }
.pr-price strong small { font-size: 0.9rem; font-weight: 500; color: var(--fp-muted); }
.pr-price span { color: var(--fp-muted); font-size: 0.85rem; }
.pr-price em { font-style: normal; color: var(--fp-muted); font-size: 0.8rem; }
.pr-limits, .pr-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.92rem; }
.pr-limits li { color: var(--fp-muted); }
.pr-limits li::before { content: "·"; margin-inline-end: 0.5rem; color: var(--fp-cyan); }
.pr-includes { flex: 1; padding-top: 0.5rem; border-top: 1px dashed var(--fp-edge); }
.pr-includes li { color: var(--fp-ink); padding-inline-start: 1.4rem; position: relative; }
.pr-includes li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--fp-cyan); font-weight: 700; }
.pr-pkg .fp-btn { justify-content: center; }
.pr-all { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem 1.5rem; }
@media (min-width: 768px) { .pr-all { grid-template-columns: repeat(2, 1fr); } }
.pr-all li { position: relative; padding-inline-start: 1.6rem; color: var(--fp-ink); font-size: 0.98rem; }
.pr-all li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--fp-cyan); font-weight: 700; }

/* ---- About page ---- */
@media (min-width: 1024px) { .fp-features--2 { grid-template-columns: repeat(2, 1fr); } }
.ab-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .ab-facts { grid-template-columns: repeat(4, 1fr); } }
.ab-fact { display: grid; gap: 0.25rem; padding-top: 0.9rem; border-top: 1px solid var(--fp-edge); }
.ab-fact strong { font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--fp-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ab-fact span { font-size: 0.9rem; color: var(--fp-muted); }

/* ---- Contact page channel list ---- */
.ct-channels { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; margin: 0.5rem 0 0; font-size: 0.95rem; }
.ct-channels dt { color: var(--fp-muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 0.15rem; }
.ct-channels dd { margin: 0; color: var(--fp-ink); }
.ct-channels a { color: var(--fp-cyan); text-decoration: none; }
.ct-channels a:hover { text-decoration: underline; }

/* landing feature cards link to their module page */
.feature-cell .fp-cell-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; font-size: 0.85rem; font-weight: 600; color: rgb(0, 212, 255); text-decoration: none; }
html.light .feature-cell .fp-cell-link { color: #0891b2; }
.feature-cell .fp-cell-link svg { width: 0.9rem; height: 0.9rem; }
html[dir="rtl"] .feature-cell .fp-cell-link svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .hv-device, .hv-line, .hv-line2, .hv-slots b, .hv-journal li, .hv-cal-grid b, .hv-swap > span, .hv-toast, .hv-note, .hv-row, .hv-methods .sel, .hv-pay li, .hv-ph-chip.late, .hv-scene.is-active { animation: none !important; }
    .hv-slots b, .hv-journal li, .hv-cal-grid b, .hv-row, .hv-pay li, .hv-ph-chip.late, .hv-note, .hv-swap .a { opacity: 1; }
    .hv-swap .b, .hv-swap .c, .hv-toast { opacity: 0; }
    .hv-line, .hv-line2 { stroke-dashoffset: 0; }
}

/* Feature grid cell hover glow */
.feature-cell {
    transition: background 0.5s ease, transform 0.3s ease;
}

/* ============================================
   Showcase — premium screenshot gallery
   ============================================ */
.shot-tile {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(20, 20, 28, 0.6) 0%, rgba(14, 14, 20, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 30px 60px -30px rgba(0, 0, 0, 0.6),
        0 12px 30px -16px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s ease,
                box-shadow 0.5s ease;
}

.shot-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 40px 80px -30px rgba(0, 0, 0, 0.7),
        0 18px 40px -16px rgba(0, 212, 255, 0.18);
}

html.light .shot-tile {
    background: #ffffff;
    border-color: rgba(10, 10, 15, 0.06);
    box-shadow:
        0 1px 2px rgba(10, 10, 15, 0.03),
        0 24px 48px -28px rgba(10, 10, 15, 0.18),
        0 8px 24px -12px rgba(10, 10, 15, 0.08);
}

html.light .shot-tile:hover {
    border-color: rgba(10, 10, 15, 0.1);
    box-shadow:
        0 1px 2px rgba(10, 10, 15, 0.04),
        0 32px 60px -28px rgba(10, 10, 15, 0.22),
        0 12px 28px -12px rgba(8, 145, 178, 0.18);
}

/* Browser-chrome bar */
.shot-chrome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

html.light .shot-chrome {
    border-bottom-color: rgba(10, 10, 15, 0.06);
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.02), transparent);
}

.shot-chrome-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.shot-chrome-dots span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

html.light .shot-chrome-dots span { background: rgba(10, 10, 15, 0.12); }

.shot-chrome-url {
    flex: 1;
    margin-inline: 0.75rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    font-family: 'Inter', system-ui, sans-serif;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.light .shot-chrome-url {
    background: rgba(10, 10, 15, 0.03);
    border-color: rgba(10, 10, 15, 0.05);
    color: rgba(10, 10, 15, 0.45);
}

.shot-chrome-url::before {
    content: '\01F512';   /* lock glyph */
    margin-inline-end: 0.45rem;
    opacity: 0.55;
    font-size: 0.65rem;
}

/* Screenshot frame — pure, no overlays */
.shot-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(245, 245, 247, 1);
}

html.light .shot-frame { background: #fafafa; }

.shot-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.shot-tile:hover .shot-frame img {
    transform: scale(1.015);
}

/* Hero variant — split image / copy layout */
.shot-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .shot-hero-grid {
        grid-template-columns: 1.35fr 1fr;
        align-items: stretch;
    }
}

.shot-hero-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(245, 245, 247, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

@media (min-width: 1024px) {
    .shot-hero-frame {
        aspect-ratio: auto;
        height: 100%;
        min-height: 360px;
        border-bottom: 0;
        border-inline-end: 1px solid rgba(255, 255, 255, 0.04);
    }
}

html.light .shot-hero-frame {
    background: #fafafa;
    border-bottom-color: rgba(10, 10, 15, 0.05);
}

@media (min-width: 1024px) {
    html.light .shot-hero-frame { border-inline-end-color: rgba(10, 10, 15, 0.05); }
}

.shot-hero-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.shot-tile--hero:hover .shot-hero-frame img { transform: scale(1.015); }

.shot-hero-body {
    padding: 2.25rem 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 1024px) {
    .shot-hero-body { padding: 3rem 3rem; }
}

.shot-hero-body .shot-eyebrow { margin-bottom: 1.25rem; }

.shot-hero-body h3 {
    font-size: 1.75rem;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
    color: #ffffff;
}

@media (min-width: 768px) {
    .shot-hero-body h3 { font-size: 2.1rem; }
}

@media (min-width: 1024px) {
    .shot-hero-body h3 { font-size: 2.4rem; }
}

html.light .shot-hero-body h3 { color: #0a0a0f; }

.shot-hero-body p {
    font-size: 1rem;
    line-height: 1.7;
    color: #8b8ba7;
    max-width: 48ch;
}

html.light .shot-hero-body p { color: #5a6270; }

/* Standard caption block (3-col grid cards) */
.shot-body {
    padding: 1.5rem 1.75rem 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

html.light .shot-body { border-top-color: rgba(10, 10, 15, 0.05); }

.shot-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(0, 212, 255, 0.85);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
}

.shot-eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: rgba(0, 212, 255, 0.5);
}

html.light .shot-eyebrow { color: #0891b2; }
html.light .shot-eyebrow::before { background: rgba(8, 145, 178, 0.6); }

.shot-body h3 {
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
    color: #ffffff;
}

html.light .shot-body h3 { color: #0a0a0f; }

.shot-body p {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #8b8ba7;
    margin: 0;
}

html.light .shot-body p { color: #5a6270; }

/* Phone input integration with dark theme */
.iti {
    width: 100%;
}

.iti__flag-container {
    background: transparent !important;
}

.iti__selected-flag {
    background: rgba(10, 10, 15, 0.6) !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

html[dir="rtl"] .iti__selected-flag {
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

.iti__country-list {
    background: #14141c !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: white !important;
}

.iti__country:hover {
    background: rgba(255,255,255,0.05) !important;
}

.iti__country.iti__highlight {
    background: rgba(0, 212, 255, 0.1) !important;
}

.iti__divider {
    border-color: rgba(255,255,255,0.1) !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* WCAG 2.5.5 minimum tap targets on touch devices: the header locale links
   (31x24) and theme toggle (36x36) were below the 44px minimum and sit
   adjacent, inviting mis-taps. */
@media (pointer: coarse) {
    .lang-link {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .theme-toggle-btn {
        width: 44px;
        height: 44px;
    }
}

/* ============================================
   Built for scale (landing #scale)
   Sticky intro beside a numbered spec-sheet list. Own classes only.
   ============================================ */
.scale-section { position: relative; padding: 6rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.015); }
@media (min-width: 768px) { .scale-section { padding: 8rem 0; } }
.scale-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .scale-grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; } .scale-intro { position: sticky; top: 6rem; } }
.scale-title { font-size: 2.25rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin: 1.5rem 0 1.25rem; color: #ffffff; }
@media (min-width: 768px) { .scale-title { font-size: 3rem; } }
.scale-lead { font-size: 1.1rem; line-height: 1.7; color: #8b8ba7; max-width: 34rem; }
.scale-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.25rem; }
.scale-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: #ffffff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 0.15rem; transition: border-color 0.2s, color 0.2s; }
.scale-link:hover { color: #00d4ff; border-bottom-color: #00d4ff; }
.scale-link svg { width: 1rem; height: 1rem; }
html[dir="rtl"] .scale-link svg { transform: rotate(180deg); }
.scale-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.scale-item { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0 1rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
@media (min-width: 768px) { .scale-item { grid-template-columns: 3.5rem 1fr; padding: 1.75rem 0; } }
.scale-item small { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.12em; color: #00d4ff; padding-top: 0.4rem; }
.scale-item h3 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; color: #ffffff; margin: 0 0 0.4rem; }
@media (min-width: 768px) { .scale-item h3 { font-size: 1.2rem; } }
.scale-item p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: #8b8ba7; max-width: 40rem; }
html.light .scale-section { border-top-color: rgba(10, 10, 15, 0.08); background: rgba(10, 10, 15, 0.02); }
html.light .scale-title, html.light .scale-item h3, html.light .scale-link { color: #0a0a0f; }
html.light .scale-link { border-bottom-color: rgba(10, 10, 15, 0.25); }
html.light .scale-link:hover { color: #0891b2; border-bottom-color: #0891b2; }
html.light .scale-lead, html.light .scale-item p { color: #5a6270; }
html.light .scale-list, html.light .scale-item { border-color: rgba(10, 10, 15, 0.12); }
html.light .scale-item small { color: #0891b2; }

/* ---- Footer: official profile links (text, hairline, no icons) ---- */
.social-links { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.social-links a { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: #8b8ba7; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 0.1rem; transition: color 0.2s, border-color 0.2s; }
.social-links a:hover { color: #ffffff; border-bottom-color: #00d4ff; }
html.light .social-links a { color: #5a6270; border-bottom-color: rgba(10, 10, 15, 0.12); }
html.light .social-links a:hover { color: #0a0a0f; border-bottom-color: #0891b2; }