/* ==========================================================================
   RITIMSol - GLOBAL DESIGN SYSTEM
   Modern enterprise-SaaS UI. Mobile-first, accessible, themable.

   THEMING
   Every colour in the site resolves from the :root block below. Nothing in the
   rule bodies, in css/product.css, or in the inline SVG illustrations hardcodes
   a brand colour - they all read these tokens.

   To re-brand, edit only the "Semantic" section:
     1. the six "Brand hue" tokens, plus the matching --*-rgb channels above
        (the channels feed the translucent glows, so keep them in sync)
     2. the tint trio, if the new hue needs different pale surfaces
     3. --ink-900/800/950 for the dark hero, footer and stats bands

   Ready-made ramps for green, teal, gold, orange, rose, purple, lime and yellow
   sit at the end of the raw palette, so a hue swap needs no colour picking.
   theme.md walks through the whole process with worked examples.

   Two colour values live outside CSS and must be changed by hand to match
   --ink-900 if you change it:
     - <meta name="theme-color"> in every .html file
     - background_color / theme_color in site.webmanifest
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
:root {
    /* ---------- Raw palette (rarely edited directly) ---------- */

    /* Brand / accents */
    --blue-800:#1e40af;
    --blue-700:#1d4ed8;
    --blue-600:#2563eb;
    --blue-500:#3b82f6;
    --blue-200:#bfdbfe;
    --blue-100:#dbeafe;
    --blue-50:#eff6ff;
    --cyan-500:#06b6d4;
    --cyan-400:#22d3ee;
    --sky-100:#e0f2fe;
    --indigo-300:#a5b4fc;
    --indigo-200:#c7d2fe;
    --violet-600:#7c3aed;

    /* Status palette */
    --green-900:#052e1a;
    --green-800:#166534;
    --green-600:#16a34a;
    --green-500:#22c55e;
    --green-400:#4ade80;
    --green-100:#dcfce7;
    --amber-500:#f59e0b;
    --red-900:#991b1b;
    --red-600:#dc2626;
    --red-500:#ef4444;
    --red-100:#fee2e2;
    --whatsapp:#25d366;

    /* Ink / navy surfaces */
    --ink-950:#05070f;
    --ink-900:#0b1020;
    --ink-800:#0f172a;
    --ink-700:#1e293b;

    /* Slate scale */
    --slate-900:#0f172a;
    --slate-800:#1e293b;
    --slate-700:#334155;
    --slate-600:#475569;
    --slate-500:#64748b;
    --slate-400:#94a3b8;
    --slate-300:#cbd5e1;
    --slate-200:#e2e8f0;
    --slate-100:#f1f5f9;
    --slate-50:#f8fafc;
    --white:#ffffff;

    /* ---------- Alternative brand ramps (nothing here is wired up) ----------
       These exist so that re-theming means pointing the six "Brand hue" tokens
       below at a ramp, instead of hunting for hex values. theme.md spells the
       recipe out in full; in short:

         --primary        <hue>-700      --tint             <hue>-50
         --primary-dark   <hue>-800      --tint-border      <hue>-100
         --primary-light  <hue>-500      --tint-strong      <hue>-200
         --stats-to       <hue>-800      --on-dark-lead     <hue>-200
                                         --on-dark-crumb    <hue>-300

       --accent and --accent-soft come from a neighbouring hue's 500 and 400,
       --accent-2 from a third hue's 600 or 700.

       The trailing numbers are the same colour as decimal channels, ready to
       paste into --primary-rgb, --accent-rgb and --violet-rgb, which do not
       follow the hexes on their own. */

    /* Emerald - a calm, corporate green */
    --emerald-50:#ecfdf5;
    --emerald-100:#d1fae5;
    --emerald-200:#a7f3d0;
    --emerald-300:#6ee7b7;
    --emerald-400:#34d399;   /* 52 211 153 */
    --emerald-500:#10b981;   /* 16 185 129 */
    --emerald-600:#059669;   /* 5 150 105 */
    --emerald-700:#047857;   /* 4 120 87 */
    --emerald-800:#065f46;

    /* Teal - blue-green, the natural accent for emerald */
    --teal-50:#f0fdfa;
    --teal-100:#ccfbf1;
    --teal-200:#99f6e4;
    --teal-300:#5eead4;
    --teal-400:#2dd4bf;      /* 45 212 191 */
    --teal-500:#14b8a6;      /* 20 184 166 */
    --teal-600:#0d9488;      /* 13 148 136 */
    --teal-700:#0f766e;      /* 15 118 110 */
    --teal-800:#115e59;

    /* Amber - gold. The 500 is already defined in the status palette above. */
    --amber-50:#fffbeb;
    --amber-100:#fef3c7;
    --amber-200:#fde68a;
    --amber-300:#fcd34d;
    --amber-400:#fbbf24;     /* 251 191 36 */
    --amber-600:#d97706;     /* 217 119 6 */
    --amber-700:#b45309;     /* 180 83 9 */
    --amber-800:#92400e;

    /* Orange - warm and loud */
    --orange-50:#fff7ed;
    --orange-100:#ffedd5;
    --orange-200:#fed7aa;
    --orange-300:#fdba74;
    --orange-400:#fb923c;    /* 251 146 60 */
    --orange-500:#f97316;    /* 249 115 22 */
    --orange-600:#ea580c;    /* 234 88 12 */
    --orange-700:#c2410c;    /* 194 65 12 */
    --orange-800:#9a3412;

    /* Rose - red leaning pink */
    --rose-50:#fff1f2;
    --rose-100:#ffe4e6;
    --rose-200:#fecdd3;
    --rose-300:#fda4af;
    --rose-400:#fb7185;      /* 251 113 133 */
    --rose-500:#f43f5e;      /* 244 63 94 */
    --rose-600:#e11d48;      /* 225 29 72 */
    --rose-700:#be123c;      /* 190 18 60 */
    --rose-800:#9f1239;

    /* Violet - purple. The 600 is the current --accent-2, defined above. */
    --violet-50:#f5f3ff;
    --violet-100:#ede9fe;
    --violet-200:#ddd6fe;
    --violet-300:#c4b5fd;
    --violet-400:#a78bfa;    /* 167 139 250 */
    --violet-500:#8b5cf6;    /* 139 92 246 */
    --violet-700:#6d28d9;    /* 109 40 217 */
    --violet-800:#5b21b6;

    /* Accent-only hues. Too light to sit behind white text, so they belong in
       --accent, --accent-soft or --primary-light, and never in --primary. */
    --lime-300:#bef264;
    --lime-400:#a3e635;      /* 163 230 53 */
    --lime-500:#84cc16;
    --lime-700:#4d7c0f;      /* 77 124 15 */
    --yellow-300:#fde047;
    --yellow-400:#facc15;    /* 250 204 21 */
    --yellow-500:#eab308;
    --yellow-700:#a16207;    /* 161 98 7 */

    /* RGB channels - drive every translucent brand tint via rgb(... / alpha).
       Keep these in sync with the hex values above. */
    --primary-rgb:37 99 235;
    --accent-rgb:6 182 212;
    --violet-rgb:124 58 237;
    --green-rgb:34 197 94;
    --red-rgb:239 68 68;
    --whatsapp-rgb:37 211 102;
    --shadow-rgb:15 23 42;

    /* ---------- Semantic: EDIT HERE to re-theme the site ---------- */

    /* Brand hue - the core knobs. Change these six (plus the matching RGB
       channels above) and the whole site follows, illustrations included. */
    --primary:var(--blue-600);
    --primary-dark:var(--blue-700);
    --primary-light:var(--blue-500);
    --accent:var(--cyan-500);
    --accent-soft:var(--cyan-400);
    --accent-2:var(--violet-600);

    /* Page surfaces and body text */
    --bg:var(--white);
    --bg-alt:var(--slate-50);
    --surface:var(--white);
    --heading:var(--slate-900);
    --text:var(--slate-600);
    --text-strong:var(--slate-800);
    --border:var(--slate-200);

    /* Brand tints on light surfaces (icon tiles, hovers, pills) */
    --tint:var(--blue-50);
    --tint-border:var(--blue-100);
    --tint-strong:var(--blue-200);

    /* Text ramp for dark and brand-gradient sections */
    --on-dark:var(--white);
    --on-dark-soft:var(--slate-200);
    --on-dark-mute:var(--slate-300);
    --on-dark-dim:var(--slate-400);
    --on-dark-faint:var(--slate-500);
    --on-dark-lead:var(--indigo-200);
    --on-dark-crumb:var(--indigo-300);
    --on-brand-soft:var(--sky-100);

    /* Named dark surfaces */
    --footer-bg:var(--ink-950);
    --stats-from:var(--ink-800);
    --stats-to:var(--blue-800);

    /* Form + list feedback */
    --ok-bg:var(--green-100);
    --ok-fg:var(--green-600);
    --ok-fg-strong:var(--green-800);
    --err-bg:var(--red-100);
    --err-fg:var(--red-900);
    --err-line:var(--red-500);
    --err-text:var(--red-600);

    /* Status indicators (badges + illustrations) */
    --status-ok:var(--green-500);
    --status-ok-soft:var(--green-400);
    --status-ok-bg:var(--green-900);
    --status-warn:var(--amber-500);
    --status-bad:var(--red-500);

    /* Illustration tokens - drive the inline SVG graphics */
    --viz-shell:var(--ink-900);
    --viz-panel:var(--ink-800);
    --viz-stroke:var(--ink-700);
    --viz-fg:var(--slate-200);
    --viz-dim:var(--slate-500);
    --viz-card:var(--surface);
    --viz-node:var(--slate-50);
    --viz-edge:var(--slate-300);
    --chart-area-from:var(--primary);
    --chart-area-to:var(--accent);
    --chart-line-from:var(--primary-light);
    --chart-line-to:var(--accent-soft);
    --chart-dot:var(--accent-soft);

    /* Gradients */
    --grad-brand:linear-gradient(135deg,var(--primary),var(--accent));
    --grad-brand-3:linear-gradient(135deg,var(--accent-2) 0%,var(--primary) 50%,var(--accent) 100%);
    --grad-ink:linear-gradient(135deg,var(--ink-900),var(--ink-800));
    --grad-stats:linear-gradient(135deg,var(--stats-from),var(--stats-to));

    /* Frosted-glass overlays stay alpha-only white/black on purpose: they read
       correctly over any brand hue, so they are not tokenised per colour. */

    /* Radius */
    --r-sm:10px;
    --r:16px;
    --r-lg:22px;
    --r-xl:28px;
    --r-pill:999px;

    /* Elevation */
    --sh-sm:0 2px 10px rgb(var(--shadow-rgb) / .06);
    --sh:0 12px 30px rgb(var(--shadow-rgb) / .10);
    --sh-lg:0 28px 60px rgb(var(--shadow-rgb) / .16);
    --sh-glow:0 20px 50px rgb(var(--primary-rgb) / .35);

    /* Layout */
    --container:1200px;
    --nav-h:72px;

    /* Motion */
    --ease:cubic-bezier(.22,.61,.36,1);
    --t-fast:.2s;
    --t:.35s;
}

/* ------------------------------------------------------------------ Reset */
*,*::before,*::after { box-sizing:border-box; }

* { margin:0; padding:0; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
    font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.7;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden; /* guard against accidental horizontal scroll on mobile */
}

img,svg,video { max-width:100%; height:auto; display:block; }

h1,h2,h3,h4,h5,h6 {
    color:var(--heading);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.02em;
}

p { color:var(--text); }

a { color:var(--primary); text-decoration:none; transition:color var(--t-fast) var(--ease); }
a:hover { color:var(--primary-dark); }

ul { list-style:none; }

:focus-visible {
    outline:3px solid rgb(var(--primary-rgb) / .55);
    outline-offset:2px;
    border-radius:6px;
}

/* Skip link (a11y) */
.skip-link {
    position:absolute;
    left:16px;
    top:-60px;
    z-index:2000;
    background:var(--ink-900);
    color:var(--on-dark);
    padding:10px 18px;
    border-radius:0 0 var(--r-sm) var(--r-sm);
    transition:top var(--t) var(--ease);
}
.skip-link:focus { top:0; color:var(--on-dark); }

/* ------------------------------------------------------------------ Layout helpers */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }

.section { padding:clamp(56px,8vw,104px) 0; }
.section-sm { padding:clamp(40px,6vw,72px) 0; }

.section-head { max-width:720px; margin:0 auto clamp(32px,5vw,56px); text-align:center; }
.section-head.left { margin-inline:0; text-align:left; }

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.eyebrow::before {
    content:"";
    width:22px; height:2px;
    background:var(--grad-brand);
    border-radius:2px;
}
.eyebrow.on-dark { color:var(--accent-soft); }

.title-xl { font-size:clamp(2.1rem,5.2vw,3.6rem); }
.title-lg { font-size:clamp(1.8rem,4vw,2.7rem); }
.title-md { font-size:clamp(1.35rem,2.6vw,1.7rem); }

.lead { font-size:clamp(1.02rem,1.6vw,1.2rem); color:var(--slate-500); }

.gradient-text {
    background:var(--grad-brand-3);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}

.muted { color:var(--slate-500); }
.text-balance { text-wrap:balance; }

/* Alt background section */
.bg-alt { background:var(--bg-alt); }

/* Dark section base */
.section-dark {
    position:relative;
    color:var(--on-dark-soft);
    background:var(--grad-ink);
    overflow:hidden;
}
.section-dark h1,.section-dark h2,.section-dark h3,
.section-dark h4,.section-dark h5,.section-dark h6 { color:var(--on-dark); }
.section-dark p { color:var(--on-dark-mute); }

/* Decorative background layers (mesh + grid) */
.bg-mesh::before {
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(45% 55% at 12% 8%,rgb(var(--primary-rgb) / .55),transparent 60%),
        radial-gradient(40% 50% at 88% 4%,rgb(var(--accent-rgb) / .42),transparent 60%),
        radial-gradient(50% 60% at 78% 92%,rgb(var(--violet-rgb) / .35),transparent 60%);
    pointer-events:none;
}
.bg-grid::after {
    content:"";
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:44px 44px;
    /* #000 here is a mask key (opacity), not a theme colour */
    -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
    mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
    pointer-events:none;
}
.bg-mesh > *,.bg-grid > * { position:relative; z-index:1; }

/* ------------------------------------------------------------------ Buttons */
.btn {
    --btn-py:.8rem;
    --btn-px:1.5rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding:var(--btn-py) var(--btn-px);
    font-weight:600;
    font-size:1rem;
    line-height:1.2;
    border-radius:var(--r-pill);
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
    text-align:center;
    min-height:46px; /* comfortable touch target */
}
.btn:active { transform:translateY(1px); }
.btn-lg { --btn-py:1rem; --btn-px:2rem; font-size:1.05rem; min-height:54px; }
.btn i { font-size:.95em; }

.btn-primary {
    background:var(--grad-brand);
    color:var(--on-dark);
    box-shadow:var(--sh-glow);
    background-size:160% 160%;
    background-position:0% 50%;
}
.btn-primary:hover {
    color:var(--on-dark);
    transform:translateY(-2px);
    background-position:100% 50%;
    box-shadow:0 26px 60px rgb(var(--primary-rgb) / .45);
}

.btn-ghost {
    background:rgba(255,255,255,.08);
    color:var(--on-dark);
    border-color:rgba(255,255,255,.28);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
.btn-ghost:hover { background:rgba(255,255,255,.16); color:var(--on-dark); transform:translateY(-2px); }

.btn-outline {
    background:transparent;
    color:var(--primary);
    border-color:var(--slate-200);
}
.btn-outline:hover { color:var(--primary-dark); border-color:var(--primary); transform:translateY(-2px); background:var(--slate-50); }

.btn-light {
    background:var(--surface);
    color:var(--slate-900);
}
.btn-light:hover { color:var(--primary); transform:translateY(-2px); box-shadow:var(--sh-lg); }

.btn-block-sm { width:100%; }

/* Inline "text" link with arrow */
.link-arrow {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-weight:600;
    color:var(--primary);
}
.link-arrow i { transition:transform var(--t) var(--ease); }
.link-arrow:hover i { transform:translateX(4px); }

/* ------------------------------------------------------------------ Pills / badges / trust */
.pill {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.4rem .85rem;
    border-radius:var(--r-pill);
    font-size:.82rem;
    font-weight:600;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    color:var(--on-dark-soft);
}
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--status-ok); box-shadow:0 0 0 4px rgb(var(--green-rgb) / .2); }
.pill-light {
    background:var(--tint);
    border-color:var(--tint-border);
    color:var(--primary-dark);
}

.trust {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:clamp(18px,4vw,54px);
    opacity:.9;
}
.trust span {
    font-weight:800;
    letter-spacing:.02em;
    font-size:clamp(1rem,2.2vw,1.35rem);
    color:var(--slate-400);
}

/* ------------------------------------------------------------------ Cards */
.card-soft {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-sm);
    padding:clamp(24px,3vw,34px);
    height:100%;
    transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.card-soft:hover { transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:var(--tint-border); }

/* Icon tile */
.icon-tile {
    width:60px; height:60px;
    display:flex; align-items:center; justify-content:center;
    border-radius:16px;
    background:var(--grad-brand);
    color:var(--on-dark);
    font-size:1.5rem;
    box-shadow:0 12px 26px rgb(var(--primary-rgb) / .28);
    flex:none;
}
.icon-tile.soft {
    background:var(--tint);
    color:var(--primary);
    box-shadow:none;
}

/* Solution / product card */
.solution-card {
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:clamp(24px,3vw,32px);
    box-shadow:var(--sh-sm);
    overflow:hidden;
    transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.solution-card::before {
    content:"";
    position:absolute; inset:0;
    padding:1px;
    border-radius:inherit;
    background:var(--grad-brand);
    /* #000 here is a mask key (opacity), not a theme colour */
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    opacity:0;
    transition:opacity var(--t) var(--ease);
    pointer-events:none;
}
.solution-card:hover { transform:translateY(-10px); box-shadow:var(--sh-lg); }
.solution-card:hover::before { opacity:1; }
.solution-card h3 { font-size:1.22rem; margin:18px 0 10px; }
.solution-card p { margin-bottom:18px; }
.solution-card .link-arrow { margin-top:auto; }
.solution-card .icon-tile { margin-bottom:2px; }

/* Feature (why choose) block */
.feature-block { text-align:center; padding:14px; }
.feature-block .icon-tile { margin:0 auto 18px; width:66px; height:66px; font-size:1.6rem; }
.feature-block h5 { font-size:1.12rem; margin-bottom:8px; }

/* Feature row (alternating) */
.feature-row { align-items:center; }
.feature-media {
    border-radius:var(--r-xl);
    overflow:hidden;
}
.feature-list { display:grid; gap:14px; margin-top:22px; }
.feature-list li { display:flex; gap:12px; align-items:flex-start; }
.feature-list .tick {
    flex:none;
    width:26px; height:26px;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    background:var(--ok-bg); color:var(--ok-fg);
    font-size:.8rem;
    margin-top:3px;
}
.feature-list li b { color:var(--text-strong); }

/* ------------------------------------------------------------------ Hero (home) */
.hero {
    position:relative;
    color:var(--on-dark);
    background:var(--grad-ink);
    padding:calc(var(--nav-h) + clamp(48px,8vw,90px)) 0 clamp(64px,9vw,110px);
    overflow:hidden;
}
.hero h1 { color:var(--on-dark); font-size:clamp(2.3rem,5.4vw,4rem); }
.hero p.lead { color:var(--on-dark-lead); margin-top:20px; max-width:620px; }
.hero .hero-cta { margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; }
.hero .hero-meta { margin-top:34px; display:flex; flex-wrap:wrap; gap:22px; color:var(--on-dark-dim); font-size:.92rem; }
.hero .hero-meta span { display:inline-flex; align-items:center; gap:8px; }
.hero .hero-meta i { color:var(--accent-soft); }

/* Floating dashboard graphic wrapper */
.hero-visual { position:relative; }
.hero-visual .glass {
    position:relative;
    z-index:2;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-xl);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 40px 80px rgba(0,0,0,.4);
    padding:14px;
    animation:float 6s var(--ease) infinite;
}
.hero-visual .badge-float {
    position:absolute;
    z-index:3;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-radius:14px;
    padding:10px 14px;
    color:var(--on-dark);
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    font-size:.85rem;
    animation:float 5s var(--ease) infinite;
}
.hero-visual .badge-float i { color:var(--accent-soft); font-size:1.15rem; }
.hero-visual .badge-float.b1 { top:-16px; left:-10px; }
.hero-visual .badge-float.b2 { bottom:-18px; right:-6px; animation-delay:1.2s; }

@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

/* Section hero (inner pages) */
.page-hero {
    position:relative;
    color:var(--on-dark);
    background:var(--grad-ink);
    padding:calc(var(--nav-h) + clamp(40px,6vw,72px)) 0 clamp(48px,7vw,86px);
    overflow:hidden;
    text-align:center;
}
.page-hero h1 { color:var(--on-dark); font-size:clamp(2rem,4.6vw,3.2rem); }
.page-hero p { color:var(--on-dark-lead); max-width:680px; margin:18px auto 0; }
.page-hero .pill { margin-bottom:18px; }

/* ------------------------------------------------------------------ Stats */
.stats { position:relative; color:var(--on-dark); background:var(--grad-stats); overflow:hidden; }
.stat { text-align:center; padding:10px; }
.stat .num { color:var(--on-dark); font-size:clamp(2.2rem,5vw,3.2rem); font-weight:800; line-height:1; letter-spacing:-.03em; }
.stat .num .plus,.stat .num .suffix { background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat p { color:var(--on-dark-mute); font-weight:500; margin-top:10px; margin-bottom:0; }

/* ------------------------------------------------------------------ Testimonials */
.quote-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:clamp(28px,4vw,46px);
    box-shadow:var(--sh);
    position:relative;
}
/* Named .quote-mark, not .mark: Bootstrap ships a .mark utility that would
   paint a highlighter background behind the glyph. */
.quote-card .quote-mark { font-size:3rem; line-height:1; color:var(--tint-strong); font-weight:800; }
.quote-card blockquote { font-size:clamp(1.1rem,2vw,1.45rem); color:var(--text-strong); font-weight:500; margin:6px 0 22px; }
.quote-card .who { display:flex; align-items:center; gap:14px; }
.quote-card .avatar { width:48px; height:48px; border-radius:50%; background:var(--grad-brand); color:var(--on-dark); display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.quote-card .who b { color:var(--heading); display:block; }
/* Targets .role rather than every span, so it cannot outrank .avatar above. */
.quote-card .who .role { font-size:.9rem; color:var(--slate-500); }

/* Scrollable track: two cards per view here, one plus a peek of the next on
   phones. The arrows, dots and the auto-scroll are what tell the visitor there is
   more to see. */
.testimonials { position:relative; }

.testimonial-track {
    --t-gap:24px;
    display:flex;
    gap:var(--t-gap);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:4px;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;                  /* Firefox */
    padding:8px 4px 14px;                  /* room for the card shadows */
}
.testimonial-track::-webkit-scrollbar { display:none; }
.testimonial-track:focus-visible { outline:3px solid rgb(var(--primary-rgb) / .55); outline-offset:2px; border-radius:var(--r-xl); }

.testimonial-track > .quote-card {
    flex:0 0 calc((100% - var(--t-gap)) / 2);   /* two per view; one per view on phones */
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
}
.testimonial-track > .quote-card blockquote { font-size:clamp(1.02rem,1.7vw,1.22rem); }
.testimonial-track > .quote-card .who { margin-top:auto; }

/* Arrows + dots. Hidden entirely when everything already fits on screen. */
.testimonial-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px; }
.testimonial-nav[hidden] { display:none; }

.t-arrow {
    width:46px; height:46px;
    flex:none;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    border:1.5px solid var(--border);
    background:var(--surface);
    color:var(--primary);
    box-shadow:var(--sh-sm);
    cursor:pointer;
    transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),opacity var(--t) var(--ease);
}
.t-arrow:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--primary); box-shadow:var(--sh); }
.t-arrow:disabled { opacity:.3; cursor:default; }

/* Play/pause for the auto-scroll. Deliberately quieter than the arrows. */
.t-toggle { width:36px; height:36px; font-size:.72rem; color:var(--slate-500); box-shadow:none; }
.t-toggle:hover:not(:disabled) { color:var(--primary); }
.t-toggle[hidden] { display:none; }

.testimonial-dots { display:flex; align-items:center; gap:4px; }
.testimonial-dots button {
    padding:9px 5px;                       /* padding is the touch target */
    border:0;
    background:none;
    cursor:pointer;
    display:flex;
    align-items:center;
}
.testimonial-dots button::before {
    content:"";
    display:block;
    width:9px; height:9px;
    border-radius:var(--r-pill);
    background:var(--slate-300);
    transition:width var(--t) var(--ease),background var(--t) var(--ease);
}
.testimonial-dots button:hover::before { background:var(--slate-400); }
.testimonial-dots button[aria-current="true"]::before { width:26px; background:var(--grad-brand); }

/* ------------------------------------------------------------------ CTA band */
.cta-band {
    position:relative;
    overflow:hidden;
    border-radius:var(--r-xl);
    background:var(--grad-brand-3);
    background-size:180% 180%;
    color:var(--on-dark);
    padding:clamp(36px,5vw,68px);
    text-align:center;
    box-shadow:var(--sh-lg);
}
.cta-band::after {
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(60% 120% at 100% 0,rgba(255,255,255,.22),transparent 60%);
    pointer-events:none;
}
.cta-band h2 { color:var(--on-dark); }
.cta-band p { color:var(--on-brand-soft); max-width:620px; margin:14px auto 26px; }
.cta-band .btn-light:hover { color:var(--primary); }
.cta-band > * { position:relative; z-index:1; }

/* ------------------------------------------------------------------ Navbar */
.site-nav {
    position:sticky;
    top:0;
    z-index:1030;
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid rgb(var(--shadow-rgb) / .07);
    transition:box-shadow var(--t) var(--ease),background var(--t) var(--ease);
    min-height:var(--nav-h);
}
.site-nav.scrolled { box-shadow:0 8px 30px rgb(var(--shadow-rgb) / .10); background:rgba(255,255,255,.94); }
.site-nav .navbar-brand { display:flex; align-items:center; padding:.4rem 0; }
.site-nav .site-logo { height:75px; width:auto; transition:transform var(--t) var(--ease); }
.site-nav .navbar-brand:hover .site-logo { transform:scale(1.04); }

.site-nav .nav-link {
    color:var(--slate-700);
    font-weight:600;
    padding:.55rem .9rem !important;
    border-radius:10px;
    transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus { color:var(--primary); background:rgb(var(--primary-rgb) / .07); }
.site-nav .nav-item.active > .nav-link,
.site-nav .nav-link.active { color:var(--primary); }
.site-nav .nav-item.active > .nav-link::after,
.site-nav .nav-link.active::after {
    content:"";
    display:block;
    height:2px;
    width:60%;
    margin:2px auto 0;
    border-radius:2px;
    background:var(--grad-brand);
}

.site-nav .dropdown-menu {
    border:1px solid var(--border);
    border-radius:var(--r);
    box-shadow:var(--sh);
    padding:.5rem;
    margin-top:.6rem;
}
.site-nav .dropdown-item {
    border-radius:10px;
    padding:.6rem .8rem;
    font-weight:500;
    color:var(--slate-700);
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus { background:var(--tint); color:var(--primary-dark); }
.site-nav .dropdown-item i { width:20px; color:var(--primary); margin-right:6px; }

.site-nav .navbar-toggler {
    border:1px solid var(--border);
    border-radius:10px;
    padding:.45rem .6rem;
    width:46px; height:44px;
}
.site-nav .navbar-toggler:focus { box-shadow:none; }
.site-nav .btn-primary { --btn-py:.6rem; --btn-px:1.2rem; min-height:44px; box-shadow:0 12px 26px rgb(var(--primary-rgb) / .28); }

/* ------------------------------------------------------------------ Footer */
.site-footer {
    background:var(--footer-bg);
    color:var(--on-dark-dim);
    padding-top:clamp(48px,7vw,72px);
}
.site-footer h4,.site-footer h5 { color:var(--on-dark); }
.site-footer .brand-logo { height:42px; margin-bottom:16px; }
.site-footer p { color:var(--on-dark-dim); }
.site-footer a { color:var(--on-dark-mute); }
.site-footer a:hover { color:var(--on-dark); }
.site-footer .foot-links { display:grid; gap:10px; }
.site-footer .foot-title { font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-faint); font-weight:700; margin-bottom:18px; }
.site-footer .socials { display:flex; gap:10px; margin-top:18px; }
.site-footer .socials a {
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    color:var(--on-dark-mute);
    transition:transform var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease);
}
.site-footer .socials a:hover { transform:translateY(-3px); background:var(--grad-brand); color:var(--on-dark); border-color:transparent; }
.site-footer .foot-contact li { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.site-footer .foot-contact i { color:var(--accent-soft); margin-top:5px; width:18px; flex:none; }
.site-footer .foot-bottom {
    margin-top:clamp(36px,5vw,56px);
    border-top:1px solid rgba(255,255,255,.08);
    padding:22px 0;
    font-size:.9rem;
}
.site-footer .foot-bottom .legal { display:flex; flex-wrap:wrap; gap:18px; }

/* ------------------------------------------------------------------ Breadcrumb */
.crumbs { padding:14px 0 0; }
.crumbs ol { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.88rem; }
.crumbs li { display:flex; align-items:center; gap:8px; color:var(--slate-500); }
.crumbs li:not(:last-child)::after { content:"/"; color:var(--slate-300); }
.crumbs a { color:var(--slate-500); }
.crumbs a:hover { color:var(--primary); }
.crumbs li[aria-current] { color:var(--text-strong); font-weight:600; }
.page-hero .crumbs ol { justify-content:center; }
.page-hero .crumbs li,.page-hero .crumbs a { color:var(--on-dark-crumb); }
.page-hero .crumbs li:not(:last-child)::after { color:rgba(255,255,255,.35); }
.page-hero .crumbs li[aria-current] { color:var(--on-dark); }

/* ------------------------------------------------------------------ Reveal animation */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease); will-change:opacity,transform; }
.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; }

/* ------------------------------------------------------------------ Forms (shared) */
.field-label { font-weight:600; color:var(--text-strong); margin-bottom:6px; display:block; font-size:.92rem; }
.form-control,.form-select {
    padding:.85rem 1rem;
    border-radius:12px;
    border:1.5px solid var(--slate-200);
    font-size:1rem;
    color:var(--slate-800);
    background:var(--surface);
    transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.form-control:focus,.form-select:focus {
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgb(var(--primary-rgb) / .14);
    outline:none;
}
.form-control::placeholder { color:var(--slate-400); }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note { font-size:.82rem; color:var(--slate-500); }
.form-status { display:none; border-radius:12px; padding:.9rem 1.1rem; font-weight:500; margin-bottom:8px; }
.form-status.show { display:block; }
.form-status.ok { background:var(--ok-bg); color:var(--ok-fg-strong); }
.form-status.err { background:var(--err-bg); color:var(--err-fg); }
.form-control.invalid,.form-select.invalid { border-color:var(--err-line); box-shadow:0 0 0 4px rgb(var(--red-rgb) / .12); }
.error-text { color:var(--err-text); font-size:.82rem; margin-top:5px; display:none; }
.error-text.show { display:block; }

/* ------------------------------------------------------------------ Floating action (WhatsApp) */
.float-wa {
    position:fixed;
    right:18px; bottom:18px;
    width:56px; height:56px;
    border-radius:50%;
    background:var(--whatsapp);
    color:var(--on-dark);
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem;
    z-index:1020;
    box-shadow:0 14px 30px rgb(var(--whatsapp-rgb) / .45);
    transition:transform var(--t) var(--ease);
}
.float-wa:hover { transform:translateY(-3px) scale(1.05); color:var(--on-dark); }

/* ------------------------------------------------------------------ Utilities */
.stack-gap > * + * { margin-top:1rem; }
.max-60 { max-width:60ch; }
.rounded-xl { border-radius:var(--r-xl); }
.shadow-soft { box-shadow:var(--sh); }

/* ------------------------------------------------------------------ Responsive */
@media (max-width:991.98px){
    .site-nav .navbar-collapse {
        margin-top:12px;
        padding:14px;
        background:var(--surface);
        border:1px solid var(--border);
        border-radius:var(--r);
        box-shadow:var(--sh);
    }
    .site-nav .navbar-nav { gap:2px; }
    .site-nav .nav-link { padding:.7rem .8rem !important; }
    .site-nav .nav-item.active > .nav-link::after,
    .site-nav .nav-link.active::after { margin-left:0; width:34px; }
    .site-nav .btn-primary { margin-top:10px; width:100%; }
    .site-nav .dropdown-menu { box-shadow:none; border:none; padding-left:.5rem; }

    .hero .hero-cta .btn { flex:1 1 auto; }
    .hero-visual { margin-top:44px; }
}

@media (max-width:767.98px){
    .testimonial-track { --t-gap:16px; }
    /* One card per view, with the next one peeking in to invite the swipe. */
    .testimonial-track > .quote-card { flex-basis:86%; }
}

@media (max-width:575.98px){
    .container { padding-inline:16px; }
    .hero .hero-meta { gap:14px; }
    .cta-band { border-radius:var(--r-lg); }
    .btn { width:100%; }
    .site-nav .btn-primary,
    .hero .hero-cta .btn { width:100%; }
    .float-wa { right:14px; bottom:14px; }
}

/* ------------------------------------------------------------------ Inline SVG theming
   fill, stroke and stop-color are real CSS properties, and presentation
   attributes lose to any author rule - so the illustrations keep their hex
   attributes as a no-CSS fallback while these rules make them follow the
   tokens above. */

/* Gradient stops */
.viz-stop-area-a { stop-color:var(--chart-area-from); }
.viz-stop-area-b { stop-color:var(--chart-area-to); }
.viz-stop-line-a { stop-color:var(--chart-line-from); }
.viz-stop-line-b { stop-color:var(--chart-line-to); }
.viz-stop-glow   { stop-color:var(--chart-dot); }

/* Dark dashboard surfaces */
.viz-shell { fill:var(--viz-shell); }
.viz-panel { fill:var(--viz-panel); stroke:var(--viz-stroke); }
.viz-tile  { fill:var(--viz-shell); stroke:var(--viz-stroke); }
.viz-fg    { fill:var(--viz-fg); }
.viz-dim   { fill:var(--viz-dim); }
.viz-dot   { fill:var(--chart-dot); }

/* Light card surfaces */
.viz-card  { fill:var(--viz-card); stroke:var(--border); }
.viz-node  { fill:var(--viz-node); stroke:var(--border); }
.viz-edge  { stroke:var(--viz-edge); }
.viz-ring  { stroke:var(--chart-dot); }
.viz-glyph { fill:var(--on-dark); }

/* Status indicators */
.viz-ok        { fill:var(--status-ok); }
.viz-warn      { fill:var(--status-warn); }
.viz-bad       { fill:var(--status-bad); }
.viz-chip-ok   { fill:var(--status-ok-bg); }
.viz-chip-ok-fg{ fill:var(--status-ok-soft); }

/* Sparklines (solution pages) */
.viz-spark     { stroke:var(--primary); }
.viz-spark-dot { fill:var(--accent); }

/* ------------------------------------------------------------------ SVG micro-animations (opacity only - safe) */
.live-dot { animation:livePulse 1.8s var(--ease) infinite; }
@keyframes livePulse { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.hub-ring { animation:hubPulse 3s var(--ease) infinite; }
@keyframes hubPulse { 0%,100%{ opacity:.55; } 50%{ opacity:.12; } }

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
    html { scroll-behavior:auto; }
    .testimonial-track { scroll-behavior:auto; }
    *,*::before,*::after {
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
    .reveal { opacity:1 !important; transform:none !important; }
}