/* ═══════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════ */
:root {
    --bg:          #f6f8fb;
    --bg-2:        #eef2f7;
    --surface:     #ffffff;
    --border:      #e2e8f0;
    --border-2:    #cbd5e1;

    --blue:        #2563eb;
    --blue-hover:  #1d4ed8;
    --cyan:        #0891b2;

    --text:        #001443;
    --text-2:      #475569;
    --text-3:      #64748b;

    --green:       #16a34a;
    --amber:       #d97706;
    --red:         #dc2626;

    --radius-sm:   10px;
    --radius-md:   16px;
    --radius-lg:   22px;
    --radius-xl:   30px;

    --grad:        linear-gradient(135deg,#0891b2,#2563eb);
    --grad-soft:   linear-gradient(135deg,rgba(8,145,178,.10),rgba(37,99,235,.10));

    --shadow-sm:   0 2px 8px rgba(15,23,42,.06);
    --shadow-md:   0 10px 30px rgba(15,23,42,.10);
    --shadow-lg:   0 24px 60px rgba(15,23,42,.16);
    --ring:        0 0 0 4px rgba(37,99,235,.12);

    --transition:  .3s cubic-bezier(.4,0,.2,1);
    --font-display:'Plus Jakarta Sans', sans-serif;
    --font-body:   'DM Sans', sans-serif;
}

/* ═══════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; overflow-x:hidden; }
body {
    font-family:var(--font-body); background:var(--bg); color:var(--text);
    line-height:1.6; -webkit-font-smoothing:antialiased;
    background-image:
        radial-gradient(60rem 40rem at 85% -10%, rgba(37,99,235,.06), transparent 60%),
        radial-gradient(50rem 36rem at -10% 30%, rgba(8,145,178,.06), transparent 60%);
}
::selection { background:rgba(37,99,235,.18); color:var(--text); }
::-webkit-scrollbar { width:11px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:20px; border:3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background:var(--cyan); }
img  { max-width:100%; display:block; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
.container { max-width:1160px; margin:0 auto; padding:0 24px; }
.section   { padding:110px 0; }

/* ═══════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════ */
.section-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; color:var(--cyan); margin-bottom:16px;
}
.section-label::before {
    content:''; display:block; width:20px; height:2px;
    background:var(--grad); border-radius:2px;
}
h2 {
    font-family:var(--font-display);
    font-size:clamp(26px,3.8vw,42px);
    font-weight:700; line-height:1.18;
    letter-spacing:-.02em; margin-bottom:16px;
}
.section-sub { font-size:17px; color:var(--text-2); max-width:580px; margin-bottom:60px; }

/* ═══════════════════════════════════════════════
   ICON COLOURS (heroicons SVGs)
═══════════════════════════════════════════════ */
.c-blue   { color:#2563eb; }
.c-cyan   { color:#0891b2; }
.c-green  { color:#16a34a; }
.c-violet { color:#7c3aed; }
.c-amber  { color:#d97706; }
.c-red    { color:#dc2626; }

.service-icon svg, .feature-icon svg { width:26px; height:26px; }
.ind-icon { color:#fff; }
.ind-icon svg { width:22px; height:22px; }
.cd-icon svg { width:18px; height:18px; }
.form-error-msg .error-icon { width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.success-meta span { display:inline-flex; align-items:center; gap:7px; }
.success-meta .sm-icon { width:14px; height:14px; }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn-primary {
    display:inline-block; background:var(--grad); color:white;
    padding:13px 26px; border-radius:var(--radius-md);
    font-weight:600; font-size:15px; position:relative; overflow:hidden;
    box-shadow:0 6px 18px rgba(37,99,235,.28);
    transition:transform var(--transition),box-shadow var(--transition);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,99,235,.4); }
.btn-primary::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
    transform:translateX(-120%); transition:transform .6s ease;
}
.btn-primary:hover::after { transform:translateX(120%); }

.btn-ghost {
    display:inline-block; border:1.5px solid var(--border-2); color:var(--text);
    padding:13px 26px; border-radius:var(--radius-md);
    font-weight:500; font-size:15px; background:var(--surface);
    box-shadow:var(--shadow-sm);
    transition:border-color var(--transition),background var(--transition),transform var(--transition),box-shadow var(--transition);
}
.btn-ghost:hover { border-color:var(--blue); background:white; color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
#site-header {
    position:fixed; top:0; left:0; right:0; z-index:200;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-bottom:1px solid transparent;
    box-shadow:0 1px 0 rgba(15,23,42,.02);
    transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);
}
#site-header.scrolled {
    border-bottom-color:var(--border);
    background:rgba(255,255,255,.85);
    box-shadow:0 8px 30px rgba(15,23,42,.06);
}

.navbar {
    max-width:1160px; margin:0 auto; padding:0 24px;
    height:76px; display:flex; align-items:center;
    justify-content:space-between; gap:32px;
}
.logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-mark {
    height:76px; padding:14px 0; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition:transform var(--transition);
}
.logo:hover .logo-mark { transform:translateY(-1px); }
.logo-mark img {
    height:100%; width:auto;
    object-fit:contain; display:block;
}
.logo-name { font-size:15px; font-weight:800; line-height:1.3; color:var(--text); letter-spacing:-.01em; }
.logo-name em {
    font-style:normal; color:var(--blue);
    background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-links a {
    font-size:14px; font-weight:500; color:var(--text-2);
    position:relative; padding:6px 2px; transition:color var(--transition);
}
.nav-links a::after {
    content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
    background:var(--grad); border-radius:2px; transition:right var(--transition);
}
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { right:0; }
.nav-cta { padding:10px 20px; font-size:14px; }

.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:4px; border-radius:var(--radius-sm); transition:background var(--transition); }
.hamburger:hover { background:var(--surface); }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s,opacity .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu {
    background:rgba(255,255,255,.9); backdrop-filter:blur(20px);
    border-top:1px solid var(--border); padding:20px 24px 28px;
}
.mobile-menu[hidden] { display:none; }
.mobile-menu ul { display:flex; flex-direction:column; gap:4px; }
.mobile-link { display:block; padding:12px 16px; font-size:15px; font-weight:500; color:var(--text-2); border-radius:var(--radius-sm); transition:color var(--transition),background var(--transition); }
.mobile-link:hover { color:var(--text); background:var(--bg-2); }
.mobile-link.cta-link {
    margin-top:8px; color:var(--blue); font-weight:600;
    background:var(--grad-soft); border:1px solid rgba(37,99,235,.25);
    text-align:center; padding:13px;
    display:flex; align-items:center; justify-content:center; gap:6px;
}
.mobile-link.cta-link svg { width:14px; height:14px; }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
    min-height:100vh; padding:140px 24px 80px;
    max-width:1160px; margin:0 auto;
    display:flex; align-items:center; gap:60px; position:relative;
}
.hero-bg-grid {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:linear-gradient(rgba(100,116,139,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,139,.12) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,black 40%,transparent 100%);
}
.hero-content { flex:1; max-width:560px; position:relative; z-index:1; }
.hero-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--cyan); margin-bottom:22px;
    background:var(--surface); border:1px solid var(--border);
    padding:8px 16px; border-radius:100px; box-shadow:var(--shadow-sm);
}
.hero-eyebrow .dot { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 0 3px rgba(34,197,94,.2); animation:pulseGreen 2s infinite; }
@keyframes pulseGreen {
    0%,100% { box-shadow:0 0 0 3px rgba(34,197,94,.2); }
    50%      { box-shadow:0 0 0 6px rgba(34,197,94,.05); }
}
.hero h1 { font-family:var(--font-display); font-size:clamp(30px,4.5vw,52px); font-weight:800; line-height:1.12; letter-spacing:-.03em; margin-bottom:22px; }
.accent-text { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-desc { font-size:17px; color:var(--text-2); line-height:1.7; margin-bottom:36px; max-width:480px; }
.hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:48px; }
.hero-trust { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.trust-item { display:flex; flex-direction:column; }
.trust-item strong {
    font-family:var(--font-display);
    font-size:24px; font-weight:800; letter-spacing:-.02em;
    background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.trust-item span { font-size:12px; color:var(--text-3); }
.trust-divider { width:1px; height:36px; background:var(--border); }

/* Hero Visual */
.hero-visual { flex:1; display:flex; justify-content:center; align-items:flex-start; padding-top:10px; position:relative; z-index:1; }
.hero-visual::before {
    content:''; position:absolute; inset:-40px; z-index:-1;
    background:radial-gradient(50% 50% at 50% 30%, rgba(37,99,235,.18), transparent 70%);
    filter:blur(20px);
}

.dashboard-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:20px;
    width:100%; max-width:420px; box-shadow:var(--shadow-lg);
    position:relative;
}
.dashboard-card::before {
    content:''; position:absolute; top:0; left:24px; right:24px; height:1px;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.5),transparent);
}
.card-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.card-dots { display:flex; gap:5px; flex-shrink:0; }
.card-dots span { width:9px; height:9px; border-radius:50%; background:var(--border-2); }
.card-title {
    font-size:11px; font-weight:600; color:var(--text-2);
    flex:1 1 auto; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-badge {
    font-size:10px; font-weight:700; color:var(--green);
    background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.2);
    padding:3px 9px; border-radius:20px; letter-spacing:.02em;
    display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
}

/* KPI strip */
.kpi-strip { display:flex; align-items:center; gap:0; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:14px; }
.kpi { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2px; }
.kpi-val { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--text); letter-spacing:-.02em; white-space:nowrap; }
.kpi-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-delta { font-size:10px; font-weight:600; margin-top:1px; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
.kpi-delta svg { width:10px; height:10px; flex-shrink:0; }
.kpi-delta.up { color:var(--green); }
.kpi-delta.dn { color:var(--cyan); }
.kpi-sep { width:1px; height:36px; background:var(--border); margin:0 14px; flex-shrink:0; }

/* Chart tabs */
.chart-tabs { display:flex; gap:10px; margin-bottom:12px; flex-wrap:nowrap; }
.chart-tab {
    flex:1 1 0; min-width:0; text-align:center;
    font-family:var(--font-body); font-size:11px; font-weight:600;
    color:var(--text-3); background:var(--bg-2);
    border:1px solid var(--border); border-radius:8px;
    padding:6px 12px; cursor:pointer; white-space:nowrap;
    transition:color var(--transition),border-color var(--transition),background var(--transition),box-shadow var(--transition);
}
.tab-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:1.6em; height:1.6em; margin-right:2px; vertical-align:-0.4em;
}
.tab-icon svg { width:1.25em; height:1.25em; }
.chart-tab.active {
    color:var(--blue); border-color:transparent;
    background:var(--grad-soft); box-shadow:var(--ring);
}
.chart-tab:hover:not(.active) { color:var(--text-2); border-color:var(--border-2); }

/* Chart canvas area */
.chart-area {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-md); overflow:hidden; height:168px; position:relative;
}
.chart-area canvas { display:block; width:100% !important; height:100% !important; }

/* Chart footer */
.chart-footer { font-size:10px; color:var(--text-3); text-align:center; margin-top:10px; letter-spacing:.02em; }

/* Auto-rotation progress bar */
.tab-progress {
    position:absolute; left:0; bottom:0; height:2px;
    background:var(--grad); border-radius:2px;
    width:0; opacity:.9;
}
.tab-progress.run { animation:tabProgress 5s linear forwards; }
.tab-progress.run.hold { animation-duration:10s; }
.tab-progress.paused { animation-play-state:paused; }
@keyframes tabProgress { from { width:0; } to { width:100%; } }

/* Chart spinner animation */
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════ */
.services { background:var(--bg-2); }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.service-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:32px; position:relative; overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.service-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--grad); opacity:0; transition:opacity var(--transition);
}
.service-card:hover { border-color:var(--border-2); transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.service-card:hover::before { opacity:1; }
.service-card.featured {
    border-color:rgba(37,99,235,.35);
    background:linear-gradient(160deg,var(--grad-soft),var(--surface) 55%);
    box-shadow:0 14px 40px rgba(37,99,235,.14);
}
.service-card.featured::before { opacity:1; }
.service-badge {
    position:absolute; top:18px; right:18px; font-size:11px; font-weight:600;
    color:var(--blue); background:var(--grad-soft); border:1px solid rgba(37,99,235,.25);
    padding:4px 12px; border-radius:20px; letter-spacing:.02em;
}
.service-icon {
    font-size:32px; margin-bottom:16px; width:58px; height:58px;
    display:flex; align-items:center; justify-content:center;
    background:var(--grad-soft); border:1px solid var(--border);
    border-radius:var(--radius-md);
}
.service-card h3 { font-size:17px; font-weight:700; margin-bottom:10px; }
.service-card > p { font-size:14px; color:var(--text-2); line-height:1.6; margin-bottom:20px; }
.service-features { display:flex; flex-direction:column; gap:7px; }
.service-features li { font-size:13px; color:var(--text-2); padding-left:20px; position:relative; }
.service-features li::before {
    content:'';
    position:absolute; left:0; top:2px; width:13px; height:13px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ═══════════════════════════════════════════════
   PROCESS  — auto-highlight 01→04
═══════════════════════════════════════════════ */
.process { background:var(--bg); }
.process-steps { display:flex; align-items:flex-start; gap:0; position:relative; }

.step { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 20px; cursor:default; }

.step-num {
    font-family:var(--font-display); font-size:36px; font-weight:800;
    letter-spacing:-.03em; color:var(--border-2); line-height:1;
    margin-bottom:16px;
    transition:color .4s ease, text-shadow .4s ease;
}
.step-content h3 { font-size:16px; font-weight:700; margin-bottom:8px; color:var(--text-2); transition:color .4s ease; }
.step-content p  { font-size:13px; color:var(--text-3); line-height:1.6; transition:color .4s ease; }

/* Active state (JS-toggled) */
.step.active .step-num {
    background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    text-shadow:0 8px 24px rgba(37,99,235,.35);
}
.step.active .step-content h3 { color:var(--text); }
.step.active .step-content p  { color:var(--text-2); }

/* Connector */
.step-connector { width:60px; height:2px; background:linear-gradient(90deg,var(--border-2),var(--border)); margin-top:28px; flex-shrink:0; }

/* ═══════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════ */
.features { background:var(--bg-2); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.feature-item {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm);
    transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.feature-item:hover { border-color:var(--border-2); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feature-icon {
    font-size:30px; margin-bottom:14px; width:56px; height:56px;
    display:flex; align-items:center; justify-content:center;
    background:var(--grad-soft); border:1px solid var(--border);
    border-radius:var(--radius-md);
}
.feature-item h3 { font-size:15px; font-weight:700; margin-bottom:8px; }
.feature-item p  { font-size:13px; color:var(--text-2); line-height:1.6; }

/* ═══════════════════════════════════════════════
   ABOUT  (no tech-stack highlights)
═══════════════════════════════════════════════ */
.about { background:var(--bg); }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-text p { font-size:15px; color:var(--text-2); margin-bottom:16px; line-height:1.75; }

.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat-box {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:28px 20px;
    display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.stat-box::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--grad); opacity:0; transition:opacity var(--transition);
}
.stat-box:hover { border-color:var(--blue); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stat-box:hover::before { opacity:1; }
.stat-box strong {
    font-family:var(--font-display); font-size:34px; font-weight:800; letter-spacing:-.03em;
    background:var(--grad);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-box span { font-size:13px; color:var(--text-2); }

/* ═══════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════ */
.contact { background:var(--bg); }
.contact-inner { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:flex-start; }
.contact-info p { font-size:15px; color:var(--text-2); margin-bottom:32px; line-height:1.7; }
.contact-details { display:flex; flex-direction:column; gap:20px; }
.contact-detail { display:flex; align-items:flex-start; gap:14px; }
.cd-icon {
    width:42px; height:42px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
    font-size:18px; flex-shrink:0; box-shadow:var(--shadow-sm);
}
.contact-detail strong { display:block; font-size:12px; color:var(--text-3); margin-bottom:2px; }
.contact-detail a, .contact-detail span { font-size:14px; color:var(--text-2); transition:color var(--transition); }
.contact-detail a:hover { color:var(--blue); }

/* Form */
.contact-form {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:36px; box-shadow:var(--shadow-lg);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.input-group { display:flex; flex-direction:column; margin-bottom:18px; }
.input-group label { font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:7px; }
.input-group label span { color:var(--blue); }

/* Phone input */
.phone-input-wrap { display:flex; align-items:stretch; border:1.5px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-2); transition:border-color var(--transition),box-shadow var(--transition); }
.phone-input-wrap:focus-within { border-color:var(--blue); box-shadow:var(--ring); }
.phone-prefix { background:var(--surface); border-right:1px solid var(--border); color:var(--text-2); font-size:13px; font-weight:600; padding:11px 12px; white-space:nowrap; display:flex; align-items:center; gap:6px; user-select:none; }
.phone-prefix .flag-ind { width:16px; height:auto; border-radius:2px; flex-shrink:0; }
.phone-input-wrap input { background:transparent; border:none; outline:none; color:var(--text); font-size:14px; font-family:var(--font-body); padding:11px 14px; flex:1; width:0; }

.input-group input,
.input-group textarea,
.input-group select {
    background:var(--bg-2); border:1.5px solid var(--border); color:var(--text);
    border-radius:var(--radius-sm); padding:12px 14px;
    font-size:14px; font-family:var(--font-body); outline:none; width:100%;
    transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
.input-group input:hover,
.input-group textarea:hover,
.input-group select:hover { border-color:var(--border-2); }
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
    border-color:var(--blue); background:var(--surface);
    box-shadow:var(--ring);
}
.input-group input.error,
.input-group textarea.error,
.input-group select.error,
.phone-input-wrap.error { border-color:var(--red) !important; box-shadow:none !important; }

.input-group select {
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; cursor:pointer;
}
.input-group select option { background:var(--surface); }
.input-group textarea { resize:vertical; min-height:110px; }

.field-hint { font-size:11px; color:var(--text-3); margin-top:5px; }
.field-error { font-size:12px; color:var(--red); margin-top:5px; min-height:16px; }
::placeholder { color:var(--text-3); }

.btn-submit {
    width:100%; padding:15px; border-radius:var(--radius-md);
    background:var(--grad); color:white; font-size:15px; font-weight:600; position:relative; overflow:hidden;
    box-shadow:0 8px 22px rgba(37,99,235,.3);
    transition:transform var(--transition),box-shadow var(--transition);
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,99,235,.42); }
.btn-submit::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
    transform:translateX(-120%); transition:transform .6s ease;
}
.btn-submit:hover::after { transform:translateX(120%); }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-loading { display:flex; align-items:center; gap:8px; }
.spin-icon { animation:spin 1s linear infinite; }

.form-error-msg {
    margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm);
    font-size:14px; display:flex; align-items:flex-start; gap:12px;
}
.form-error-msg { background:rgba(239,68,68,.08);  color:var(--red);   border:1px solid rgba(239,68,68,.25); }
.form-error-msg[hidden] { display:none; }
.form-error-msg strong { display:block; margin-bottom:2px; }
.form-error-msg p { font-size:13px; opacity:.85; }
.form-error-msg a { color:var(--cyan); text-decoration:underline; }

/* ═══════════════════════════════════════════════
   FORM FLIP CARD
═══════════════════════════════════════════════ */
.form-flip-wrap {
    perspective: 1200px;
    position: relative;
}

.form-flip-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.form-flip-wrap.flipped .form-flip-inner {
    transform: rotateY(180deg);
}

.form-flip-front,
.form-flip-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.form-flip-front {
    transform: rotateY(0deg);
}

.form-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transform: rotateY(180deg);
    pointer-events: none;
}

.form-flip-wrap.flipped .form-flip-back {
    pointer-events: auto;
}

/* Success card */
.success-card {
    background: var(--surface);
    border: 1px solid rgba(22,163,74,.3);
    border-radius: var(--radius-xl);
    padding: 52px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    min-height: 100%;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.success-icon-wrap {
    width: 84px;
    height: 84px;
    background: linear-gradient(135deg,rgba(22,163,74,.12),rgba(37,99,235,.12));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.success-check { width: 52px; height: 52px; }

/* Circle draw animation */
.check-circle {
    stroke-dasharray: 175;
    stroke-dashoffset: 175;
    transform-origin: center;
    transform: rotate(-90deg);
    animation: drawCircle 0.6s ease 0.2s forwards;
}
.check-tick {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: drawTick 0.4s ease 0.7s forwards;
}
@keyframes drawCircle {
    to { stroke-dashoffset: 0; }
}
@keyframes drawTick {
    to { stroke-dashoffset: 0; }
}

/* Only animate when flipped */
.form-flip-wrap:not(.flipped) .check-circle,
.form-flip-wrap:not(.flipped) .check-tick {
    animation: none;
    stroke-dashoffset: 175;
}
.form-flip-wrap:not(.flipped) .check-tick {
    stroke-dashoffset: 40;
}

.success-card h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}
.success-card > p {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.7;
    max-width: 340px;
}
.success-card > p strong { color: var(--green); font-weight: 600; }

.success-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0;
}
.success-meta span {
    font-size: 13px;
    color: var(--text-3);
}

.btn-back-form {
    margin-top: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border-2);
    color: var(--text-2);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.btn-back-form:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--grad-soft);
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.footer { background:var(--bg-2); border-top:1px solid var(--border); }
.footer-inner { display:grid; grid-template-columns:1fr auto; gap:80px; align-items:flex-start; padding-top:60px; padding-bottom:60px; }
.footer-brand .logo { margin-bottom:14px; }
.footer-brand > p { font-size:13px; color:var(--text-3); max-width:260px; line-height:1.6; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.footer-col h4 { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col a, .footer-col li { font-size:13px; color:var(--text-2); transition:color var(--transition); }
.footer-col a:hover { color:var(--blue); }
.footer-bottom { border-top:1px solid var(--border); padding:20px 24px; }
.footer-bottom .container { display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:12px; color:var(--text-3); }

/* ═══════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════ */
[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
[data-reveal].revealed { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET ≤ 1024
═══════════════════════════════════════════════ */
@media (max-width:1024px) {
    .hero { gap:40px; }
    .about-inner { grid-template-columns:1fr; gap:48px; }
    .contact-inner { grid-template-columns:1fr; gap:48px; }
    .footer-inner { grid-template-columns:1fr; gap:48px; }
    .process-steps { flex-direction:column; align-items:flex-start; }
    .step { flex-direction:row; text-align:left; align-items:flex-start; padding:0; }
    .step-num { font-size:28px; min-width:56px; margin-bottom:0; padding-top:2px; }
    .step-connector { width:2px; height:40px; background:linear-gradient(180deg,var(--border-2),var(--border)); margin:0 0 0 28px; }
    .step-content { padding-bottom:28px; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤ 768
═══════════════════════════════════════════════ */
@media (max-width:768px) {
    .section { padding:80px 0; }
    .nav-links, .nav-cta { display:none; }
    .hamburger { display:flex; }
    .navbar { gap:16px; }
    .logo { gap:8px; }
    .logo-mark { height:46px; padding:6px 0; }
    .logo-name { font-size:14px; }
    .hero { flex-direction:column; padding-top:112px; text-align:center; gap:48px; }
    .hero-content { max-width:100%; }
    .hero-eyebrow { justify-content:center; }
    .hero-desc { margin:0 auto 36px; }
    .hero-actions { justify-content:center; }
    .hero-trust { justify-content:center; gap:16px; }
    .hero-visual { width:100%; }
    .hero-visual::before { inset:-24px; }
    .dashboard-card { max-width:100%; }
    .services-grid { grid-template-columns:1fr; }
    .features-grid { grid-template-columns:1fr; }
    .about-stats { grid-template-columns:1fr 1fr; }
    .form-row { grid-template-columns:1fr; }
    .contact-form { padding:24px; }
    .footer-links { grid-template-columns:1fr 1fr; gap:32px; }
    .footer-bottom .container { flex-direction:column; gap:8px; text-align:center; }
}

@media (max-width:480px) {
    .about-stats { grid-template-columns:1fr; }
    .footer-links { grid-template-columns:1fr; }
}

[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════
   INDUSTRIES
═══════════════════════════════════════════════ */
.industries { background: var(--bg); }

.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.industry-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.industry-card:hover {
    border-color: var(--border-2);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.ind-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.ind-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(15,23,42,.12);
}
.ind-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.ind-points {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ind-points li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ind-kpi {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.ind-points p {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════
   MODERN UI — hue-code inspired
═══════════════════════════════════════════════ */

/* Display typography */
.hero h1 {
    font-size:clamp(36px,6vw,72px);
    font-weight:800; line-height:1.02;
    letter-spacing:-.04em;
}
h2 {
    font-size:clamp(30px,4.6vw,52px);
    line-height:1.08; letter-spacing:-.03em;
}
.accent-text {
    background:var(--grad);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Marquee strip */
.marquee {
    overflow:hidden; white-space:nowrap;
    border-block:1px solid var(--border);
    background:var(--surface);
    padding:18px 0;
}
.marquee-track {
    display:inline-flex; align-items:center; gap:0;
    animation:marquee 28s linear infinite;
    will-change:transform;
}
.marquee-track span {
    font-family:var(--font-display);
    font-size:clamp(16px,2vw,22px); font-weight:700;
    letter-spacing:-.01em; color:var(--text-2);
    text-transform:uppercase;
}
.marquee-track i {
    font-style:normal; color:var(--blue);
    margin:0 28px; display:inline-flex; align-items:center; justify-content:center;
}
.marquee-track i svg { width:clamp(14px,1.6vw,18px); height:clamp(14px,1.6vw,18px); }
.marquee-track i:nth-child(6n+2) { color:var(--blue); }
.marquee-track i:nth-child(6n+4) { color:var(--cyan); }
.marquee-track i:nth-child(6n+6) { color:#7c3aed; }
@keyframes marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
    .marquee-track { animation:none; }
}

/* Chunky buttons */
.btn-primary, .btn-ghost { border-radius:14px; padding:14px 30px; font-weight:700; }
.nav-cta { padding:11px 22px; }

/* Bold stats */
.trust-item strong { font-size:clamp(26px,3.4vw,38px); }
.stat-box strong { font-size:clamp(34px,4vw,48px); }

/* Modern scroll reveal */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].revealed { opacity:1; transform:translateY(0); }

/* Section rhythm */
.section { padding:120px 0; content-visibility:auto; contain-intrinsic-size:auto 600px; }
.section-sub { font-size:18px; max-width:640px; }

/* Process number chips */
.step-num { font-size:44px; }

/* Responsive refinements for the modern type scale */
@media (max-width:768px) {
    .hero h1 { font-size:clamp(34px,9vw,48px); }
    h2 { font-size:clamp(26px,7vw,36px); }
    .section { padding:84px 0; }
    .marquee { padding:14px 0; }
    .marquee-track span { font-size:15px; }
    .marquee-track i { margin:0 20px; }
}
@media (max-width:480px) {
    .hero h1 { font-size:34px; }
    .section { padding:64px 0; }
    .dashboard-card { padding:16px; }
    .card-header { gap:8px; }
    .kpi-strip { padding:10px 8px; }
    .kpi-sep { margin:0 8px; }
    .kpi-val { font-size:16px; }
    .chart-tabs { gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .chart-tabs::-webkit-scrollbar { display:none; }
    .chart-tab { flex:1 1 0; min-width:0; padding:5px 6px; font-size:10px; text-align:center; }
    .chart-area { height:150px; }
}
@media (max-width:560px) {
    .logo-name { display:none; }
    .logo-mark { height:58px; }
}
@media (max-width:400px) {
    .navbar { padding:0 16px; }
    .logo-mark { height:48px; }
}