/* ----------------------------------------------------------------
    ZipZapp — Custom Design Layer
    Premium AI / SaaS product-engineering theme built on top of Canvas.
    All bespoke styles live here so theme updates stay clean.
-----------------------------------------------------------------*/

:root {
    --zz-ink: #0B1220;          /* deep background ink            */
    --zz-ink-2: #111d36;        /* raised dark surface           */
    --zz-ink-3: #18244169;      /* translucent dark panel         */
    --zz-blue: #007DC0;         /* heritage brand blue            */
    --zz-blue-bright: #2E9BE6;
    --zz-indigo: #4F46E5;
    --zz-violet: #7C3AED;
    --zz-cyan: #22D3EE;
    --zz-amber: #FFBF00;        /* heritage brand accent          */
    --zz-slate: #5A6A85;        /* body copy on light             */
    --zz-slate-light: #9fb0cc;  /* body copy on dark              */
    --zz-line: #E7ECF4;         /* hairline on light              */
    --zz-line-dark: #ffffff1a;  /* hairline on dark               */
    --zz-grad: linear-gradient(135deg, #007DC0 0%, #4F46E5 52%, #7C3AED 100%);
    --zz-grad-soft: linear-gradient(135deg, #2E9BE6 0%, #6366F1 100%);
    --zz-radius: 16px;
    --zz-shadow: 0 24px 60px -28px rgba(15, 32, 78, 0.45);
    --zz-shadow-sm: 0 14px 34px -22px rgba(15, 32, 78, 0.40);
}

/* ---------- Foundations -------------------------------------- */
body { color: #2A3550; }
h1, h2, h3, h4, h5, h6 { color: #0E1A33; letter-spacing: -0.01em; }
p { color: #46546f; }
.container { position: relative; }

/* Reusable gradient text */
.zz-grad-text {
    background: var(--zz-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Eyebrow / kicker label */
.zz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zz-indigo);
    margin-bottom: 18px;
}
.zz-eyebrow::before {
    content: "";
    width: 26px; height: 2px;
    background: var(--zz-grad);
    border-radius: 2px;
}
.zz-eyebrow.zz-on-dark { color: #8fa6ff; }

/* Section rhythm */
.zz-section { padding: 96px 0; }
.zz-section-sm { padding: 64px 0; }
@media (max-width: 991px){ .zz-section{ padding: 68px 0; } }

.zz-lead {
    font-size: 1.22rem;
    line-height: 1.7;
    color: #46546f;
}
.zz-measure { max-width: 760px; }
.zz-measure-sm { max-width: 620px; }

/* ---------- Buttons ------------------------------------------ */
.zz-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Poppins', sans-serif; font-weight: 600;
    font-size: 15px; line-height: 1;
    padding: 15px 26px; border-radius: 12px;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    text-decoration: none;
}
.zz-btn i { font-size: 15px; }
.zz-btn-primary {
    background: var(--zz-grad); color: #fff;
    box-shadow: 0 16px 30px -14px rgba(79, 70, 229, 0.65);
}
.zz-btn-primary:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 22px 40px -14px rgba(79, 70, 229, 0.7); }
.zz-btn-ghost {
    background: transparent; color: #0E1A33;
    border-color: var(--zz-line);
}
.zz-btn-ghost:hover { border-color: var(--zz-indigo); color: var(--zz-indigo); transform: translateY(-2px); }
.zz-btn-light { background: #fff; color: var(--zz-ink); }
.zz-btn-light:hover { color: var(--zz-indigo); transform: translateY(-2px); }
.zz-btn-on-dark { background: #ffffff14; color:#fff; border-color: #ffffff2e; }
.zz-btn-on-dark:hover { background:#ffffff24; color:#fff; transform: translateY(-2px); }

/* ---------- Header tweaks ------------------------------------ */
#header.full-header { border-bottom: none; }
#header.sticky-header #header-wrap {
    background: rgba(9, 15, 30, 0.82);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 10px 30px -20px rgba(0,0,0,.6);
}
.zz-nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: 14px; padding: 11px 20px; border-radius: 11px;
    background: var(--zz-grad); color:#fff !important;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:14px;
    box-shadow: 0 14px 26px -14px rgba(79,70,229,.7);
    transition: transform .25s ease, box-shadow .25s ease;
}
.zz-nav-cta:hover { transform: translateY(-2px); color:#fff !important; }
@media (max-width: 991px){ .zz-nav-cta{ display:none; } }

/* ---------- Hero -------------------------------------------- */
#slider.zz-hero { background: var(--zz-ink); overflow: hidden; }
.zz-hero .slider-inner {
    background:
        radial-gradient(900px 520px at 78% -10%, rgba(124,58,237,.42), transparent 60%),
        radial-gradient(760px 520px at 8% 12%, rgba(0,125,192,.40), transparent 58%),
        radial-gradient(620px 620px at 60% 110%, rgba(34,211,238,.18), transparent 60%),
        linear-gradient(180deg, #0a1126 0%, #0b1430 100%) !important;
    position: relative;
}
.zz-hero .slider-inner::before {
    content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 55%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000 55%, transparent 100%);
    pointer-events:none;
}
.zz-hero .slider-caption { z-index: 3; }
.zz-hero-pill {
    display:inline-flex; align-items:center; gap:10px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    color:#cdd8f0; font-size:13px; font-weight:500; letter-spacing:.02em;
    backdrop-filter: blur(6px); margin-bottom: 26px;
}
.zz-hero-pill .dot { width:8px; height:8px; border-radius:50%; background: var(--zz-amber); box-shadow:0 0 0 4px rgba(255,191,0,.18); }
.zz-hero h1 {
    color:#fff; font-weight:700; letter-spacing:-0.025em;
    font-size: clamp(2.3rem, 5vw, 4.05rem); line-height: 1.06; margin: 0 0 22px;
}
.zz-hero h1 .zz-grad-text { background: linear-gradient(105deg,#8fb6ff,#c4a8ff 55%,#7be0f0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.zz-hero p.zz-hero-sub {
    color:#aebbd6; font-size: clamp(1.05rem,1.7vw,1.32rem); line-height:1.65;
    max-width: 720px; margin: 0 auto 36px;
}
.zz-hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.zz-hero-meta {
    margin-top: 46px; display:flex; gap: 34px; justify-content:center; flex-wrap:wrap;
    color:#8fa0c0; font-size: 13.5px;
}
.zz-hero-meta b { color:#fff; font-weight:600; }
.zz-hero-meta span { display:inline-flex; align-items:center; gap:9px; }
.zz-hero-meta i { color: var(--zz-cyan); }

/* ---------- Logo strip -------------------------------------- */
.zz-logostrip { border-top:1px solid var(--zz-line); border-bottom:1px solid var(--zz-line); background:#fff; }
.zz-logostrip .zz-cap { color:#8493ad; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.zz-logostrip .oc-item a { color:#54627d; transition: color .25s ease; font-size: 15px; }
.zz-logostrip .oc-item a:hover { color: var(--zz-indigo); }
.zz-logostrip i { font-size: 1.9em !important; }

/* ---------- Generic premium card ---------------------------- */
.zz-card {
    position: relative; height: 100%;
    background:#fff; border:1px solid var(--zz-line);
    border-radius: var(--zz-radius); padding: 30px;
    box-shadow: var(--zz-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    overflow: hidden;
}
.zz-card::after {
    content:""; position:absolute; inset:0 0 auto 0; height:3px;
    background: var(--zz-grad); transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease;
}
.zz-card:hover { transform: translateY(-6px); box-shadow: var(--zz-shadow); border-color: #dfe6f5; }
.zz-card:hover::after { transform: scaleX(1); }

.zz-icon {
    width: 54px; height: 54px; border-radius: 14px;
    display:inline-flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(0,125,192,.12), rgba(124,58,237,.12));
    color: var(--zz-indigo); font-size: 22px; margin-bottom: 20px;
}
.zz-card h3 { font-size: 1.18rem; margin: 0 0 10px; }
.zz-card p { font-size: .96rem; line-height: 1.62; margin: 0; color:#5a6680; }
.zz-card .zz-tags { margin-top: 18px; display:flex; flex-wrap:wrap; gap:8px; }
.zz-tag {
    font-size: 12px; font-weight:500; color:#42506c;
    background:#f2f5fb; border:1px solid #e7ecf6; border-radius: 999px; padding: 5px 12px;
}
.zz-card .zz-step-no {
    position:absolute; top:24px; right:26px;
    font-family:'Poppins',sans-serif; font-weight:700; font-size: 14px; color:#c3cee2;
}

/* ---------- How it works / pipeline ------------------------- */
.zz-pipe { position: relative; }
.zz-pipe-rail { position: relative; }
.zz-pipe-rail::before {
    content:""; position:absolute; left:0; right:0; top: 27px; height:2px;
    background: linear-gradient(90deg, transparent, #cdd8ef 12%, #cdd8ef 88%, transparent);
}
@media (max-width: 991px){ .zz-pipe-rail::before{ display:none; } }
.zz-pipe-step { position: relative; text-align:center; padding: 0 10px; }
.zz-pipe-dot {
    width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:2px solid #e2e8f6; color: var(--zz-indigo);
    font-size: 22px; position: relative; z-index:2;
    box-shadow: 0 10px 22px -12px rgba(79,70,229,.5);
    transition: transform .3s ease, border-color .3s ease, color .3s ease;
}
.zz-pipe-step:hover .zz-pipe-dot { transform: translateY(-4px); border-color: var(--zz-indigo); }
.zz-pipe-step .zz-pipe-k { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#9aa7c2; display:block; margin-bottom:6px; }
.zz-pipe-step h4 { font-size: 1.02rem; margin: 0 0 8px; }
.zz-pipe-step p { font-size: .88rem; line-height:1.55; color:#62708c; margin:0; }

/* ---------- Dark feature band (Why AI) ---------------------- */
.zz-dark { background: var(--zz-ink); position: relative; overflow:hidden; color:#cfd9ee; }
.zz-dark::before {
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(680px 380px at 85% -10%, rgba(124,58,237,.30), transparent 60%),
        radial-gradient(620px 420px at 5% 110%, rgba(0,125,192,.30), transparent 60%);
    pointer-events:none;
}
.zz-dark .container { z-index:2; }
.zz-dark h2, .zz-dark h3, .zz-dark h4 { color:#fff; }
.zz-dark p { color:#aebcd8; }
.zz-dark .heading-block span { color:#aebcd8 !important; }
.zz-glass {
    background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
    border-radius: var(--zz-radius); padding: 28px;
    backdrop-filter: blur(4px); height:100%;
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.zz-glass:hover { transform: translateY(-5px); background: rgba(255,255,255,.06); border-color: rgba(143,166,255,.4); }
.zz-glass .zz-icon { background: rgba(255,255,255,.07); color:#a9c4ff; }
.zz-glass h4 { font-size:1.1rem; margin:0 0 9px; }
.zz-glass p { font-size:.94rem; line-height:1.6; margin:0; }

/* ---------- Stat band --------------------------------------- */
.zz-stats { background: linear-gradient(180deg,#f7f9fd,#eef2fa); border-top:1px solid var(--zz-line); border-bottom:1px solid var(--zz-line); }
.zz-stat { text-align:center; padding: 12px; }
.zz-stat .zz-num { font-family:'Poppins',sans-serif; font-weight:700; font-size: clamp(2rem,3.4vw,2.7rem); line-height:1; }
.zz-stat .zz-num .zz-grad-text{ display:inline; }
.zz-stat p { margin: 10px 0 0; font-size:.94rem; color:#5d6a85; }

/* ---------- Split / showcase -------------------------------- */
.zz-panel {
    border-radius: 22px; padding: 38px; height:100%;
    background: linear-gradient(160deg,#0c1430,#101d3d);
    border:1px solid #20305c; color:#cdd9f1; overflow:hidden; position:relative;
}
.zz-panel::after{
    content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
    background: radial-gradient(circle, rgba(124,58,237,.5), transparent 70%); filter: blur(8px);
}
.zz-panel h3 { color:#fff; }
.zz-mini { display:flex; gap:14px; align-items:flex-start; padding: 14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.zz-mini:last-child{ border-bottom:none; }
.zz-mini i { color: var(--zz-cyan); font-size: 18px; margin-top:3px; }
.zz-mini b { color:#fff; display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:.98rem; }
.zz-mini span { color:#9fb0cc; font-size:.9rem; }

/* check list */
.zz-checks { list-style:none; margin: 22px 0 0; padding:0; }
.zz-checks li { position:relative; padding: 9px 0 9px 32px; color:#46546f; font-size:1rem; }
.zz-checks li::before {
    content:"\e64c"; font-family:'simple-line-icons'; position:absolute; left:0; top:9px;
    color:var(--zz-indigo); font-size:15px; font-weight:700;
}
.zz-checks.zz-on-dark li{ color:#bccadf; }

/* ---------- CTA block --------------------------------------- */
.zz-cta { position: relative; overflow:hidden; background: var(--zz-grad); border-radius: 28px; padding: 64px 48px; text-align:center; }
.zz-cta::before {
    content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
    mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
}
.zz-cta .container { z-index:2; }
.zz-cta h2 { color:#fff; font-size: clamp(1.8rem,3.6vw,2.7rem); margin:0 0 16px; }
.zz-cta p { color: rgba(255,255,255,.88); font-size:1.12rem; max-width:600px; margin:0 auto 30px; }
.zz-cta .zz-hero-cta { margin-top: 6px; }

/* ---------- Contact ----------------------------------------- */
.zz-contact-card {
    background: linear-gradient(160deg,#0c1430,#0f1c3b);
    border:1px solid #21315c; border-radius: 22px; padding: 40px;
    color:#cdd9f1; text-align:center;
}
.zz-contact-card a.zz-mail { color:#fff; font-family:'Poppins',sans-serif; font-weight:600; font-size:1.3rem; }
.zz-contact-card a.zz-mail:hover { color: var(--zz-cyan); }

/* ---------- Footer ------------------------------------------ */
#footer.dark { background: #070c18; }
#footer .zz-foot-top { padding: 56px 0 12px; }
#footer .zz-foot-brand p { color:#8f9cb8; font-size:.95rem; max-width: 320px; }
#footer h5 { color:#fff; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
#footer .zz-foot-links a { display:block; color:#93a0bd; padding:6px 0; font-size:.95rem; transition:color .2s ease; }
#footer .zz-foot-links a:hover { color:#fff; }
#footer .zz-foot-logo img { height: 34px; }

/* ---------- Reveal animation -------------------------------- */
.zz-reveal { opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.zz-reveal.zz-in { opacity:1; transform:none; }

/* ---------- Heading block polish ---------------------------- */
.heading-block.zz-head h2 { font-size: clamp(1.7rem,3.2vw,2.5rem); font-weight:700; }
.heading-block.zz-head > span { font-size: 1.12rem; color:#56657f; }

/* Section tint helper */
.zz-tint { background: linear-gradient(180deg,#fbfcff,#f4f7fd); }

/* Skip link (accessibility) */
.zz-skip {
    position: absolute; left: 16px; top: -60px; z-index: 2000;
    background: var(--zz-indigo); color: #fff; padding: 10px 18px;
    border-radius: 10px; font-family: 'Poppins', sans-serif; font-weight: 600;
    font-size: 14px; transition: top .2s ease;
}
.zz-skip:focus { top: 16px; color: #fff; outline: 2px solid #fff; outline-offset: 2px; }

/* Normalise icon sizing inside bespoke tiles (head forces 1.5em on FA) */
.zz-icon i.fa-solid, .zz-icon i.fa-brands,
.zz-pipe-dot i.fa-solid, .zz-pipe-dot i.fa-brands,
.zz-mini i.fa-solid, .zz-hero-meta i.fa-solid,
.zz-btn i.fa-solid, .zz-nav-cta i.fa-solid { font-size: 1em !important; }