/* ============================================================
   RESET & TOKENS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
    /* Colors */
    --indigo-950: #0f0f1a;
    --indigo-900: #13132a;
    --indigo-800: #1a1a3e;
    --indigo-700: #1e1e52;
    --indigo-600: #2d2d7a;
    --indigo-500: #3d3d9e;
    --indigo-400: #6366f1;
    --indigo-200: #c7d2fe;
    --indigo-100: #e0e7ff;

    --green-600: #059669;
    --green-500: #10b981;
    --green-400: #34d399;
    --green-100: #d1fae5;

    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-600: #4b5563;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --white: #ffffff;

    /* Semantic */
    --bg:         var(--white);
    --bg-subtle:  var(--gray-50);
    --bg-dark:    var(--indigo-900);
    --text:       var(--gray-900);
    --text-muted: var(--gray-600);
    --text-light: var(--gray-400);
    --border:     var(--gray-200);
    --primary:    var(--indigo-600);
    --cta:        var(--green-500);
    --cta-hover:  var(--green-600);

    /* Typography */
    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --nav-h: 68px;
    --section-py: 96px;
    --container: 1200px;
    --px: 24px;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.1);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.14);
    --shadow-xl: 0 24px 64px rgba(0,0,0,.18);
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--px);
    padding-right: var(--px);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: var(--cta);
    color: var(--white);
    font-weight: 700;
    font-size: .9rem;
    border-radius: var(--r-lg);
    transition: background .2s, transform .2s, box-shadow .2s;
    border: 2px solid transparent;
    white-space: nowrap;
}
.btn-cta:hover {
    background: var(--cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16,185,129,.35);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .9rem;
    border-radius: var(--r-lg);
    transition: color .2s, background .2s;
}
.btn-ghost:hover { color: var(--primary); background: var(--indigo-100); }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    color: var(--primary);
    font-weight: 700;
    font-size: .9rem;
    border-radius: var(--r-lg);
    border: 2px solid var(--indigo-200);
    transition: border-color .2s, background .2s, color .2s;
    white-space: nowrap;
}
.btn-outline:hover { border-color: var(--primary); background: var(--indigo-100); }

.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }
.w-full { width: 100%; justify-content: center; text-align: center; }

.hero-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 15px 30px;
    border-radius: var(--r-lg);
    background: var(--white);
    color: var(--indigo-900);
    border: 2px solid rgba(16,185,129,.55);
    box-shadow: 0 14px 34px rgba(16,185,129,.2);
    font-size: 1rem;
    font-weight: 900;
    white-space: nowrap;
    transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}

.hero-demo-btn svg {
    width: 22px;
    height: 22px;
    color: var(--green-600);
}

.hero-demo-btn:hover {
    transform: translateY(-2px);
    border-color: var(--green-500);
    background: var(--green-100);
    box-shadow: 0 18px 42px rgba(16,185,129,.28);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .3s;
}
.header.scrolled { box-shadow: var(--shadow-md); }

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.brand-logo {
    display: inline-flex;
    overflow: hidden;
    border-radius: 8px;
}
.brand-logo-image {
    display: block;
    width: 180px;
    height: 50px;
    background: url('/front/ticaretgah-logo-light.png') center center / contain no-repeat;
}
.brand-wordmark{display:inline-flex;align-items:baseline;color:#fff;font-size:25px;font-weight:800;letter-spacing:-.045em;line-height:1}.brand-wordmark span{color:#f26522}.auth-logo .brand-wordmark{color:#1b2240;font-size:30px}
.logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--indigo-800);
    letter-spacing: -.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-links a {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color .2s;
}
.nav-links a:hover { color: var(--primary); }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gray-800);
    border-radius: 2px;
    transition: all .3s;
}
.burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* MOBILE MENU */
.mobile-menu {
    display: none;
    flex-direction: column;
    padding: 16px var(--px) 20px;
    border-top: 1px solid var(--border);
    background: var(--white);
    gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-link {
    display: block;
    padding: 12px 14px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: var(--r-md);
    transition: background .2s, color .2s;
}
.mobile-link:hover { background: var(--gray-50); color: var(--primary); }
.mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ============================================================
   SECTION COMMON
   ============================================================ */
.section { padding: var(--section-py) 0; }

.section-header {
    text-align: center;
    margin-bottom: 56px;
}
.section-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--r-full);
    background: var(--green-100);
    color: var(--green-600);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.section-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: var(--indigo-900);
    letter-spacing: -.02em;
    margin-bottom: 14px;
}
.section-header p {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.home-page .fade-up{opacity:1;transform:none;transition:none!important}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--nav-h);
    background: linear-gradient(160deg, var(--indigo-950) 0%, var(--indigo-800) 60%, #1a2e50 100%);
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .4;
}
.hero-orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--indigo-500), transparent 70%);
    top: -150px; right: -100px;
}
.hero-orb-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--green-500), transparent 70%);
    bottom: 80px; left: 10%;
    opacity: .2;
}
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    padding-top: 72px;
    padding-bottom: 72px;
}

/* HERO COPY */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--r-full);
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.75);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 24px;
    backdrop-filter: blur(4px);
}
.badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green-400);
    box-shadow: 0 0 8px var(--green-400);
    animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.hero-h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -.025em;
    line-height: 1.12;
    margin-bottom: 20px;
}
.hero-h1 .accent {
    background: linear-gradient(135deg, var(--green-400), var(--green-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-sub {
    font-size: 1rem;
    color: rgba(255,255,255,.68);
    line-height: 1.75;
    margin-bottom: 36px;
    max-width: 460px;
}

.hero-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.6);
    font-size: .85rem;
}
.trust-avatars {
    display: flex;
}
.trust-avatars img {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    margin-left: -7px;
    object-fit: cover;
}
.trust-avatars img:first-child { margin-left: 0; }
.trust-stars { color: #fbbf24; font-size: .82rem; margin-bottom: 2px; }
.hero-trust strong { color: var(--white); }

/* PHONE MOCKUP */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    padding-bottom: 20px;
}

.phone-frame {
    width: 270px;
    background: #0c0c1a;
    border-radius: 38px;
    border: 7px solid #2a2a50;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        var(--shadow-xl),
        inset 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
    position: relative;
}

.phone-notch {
    width: 90px; height: 22px;
    background: #0c0c1a;
    border-radius: 0 0 14px 14px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.phone-notch::after {
    content: '';
    position: absolute;
    width: 40px; height: 8px;
    background: #1a1a30;
    border-radius: 4px;
    top: 7px; left: 50%;
    transform: translateX(-50%);
}

.phone-screen {
    background: var(--gray-50);
    padding: 10px;
    min-height: 520px;
}

.shop-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    padding: 10px 12px;
    border-radius: var(--r-md);
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
}
.shop-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--indigo-500), var(--green-500));
    flex-shrink: 0;
}
.shop-name { font-size: .8rem; font-weight: 700; color: var(--gray-900); }
.shop-tagline { font-size: .68rem; color: var(--text-muted); }

.filter-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 8px;
    padding-bottom: 2px;
}
.filter-row::-webkit-scrollbar { display: none; }
.chip {
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-size: .68rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s;
}
.chip-active { background: var(--indigo-800); color: var(--white); border-color: var(--indigo-800); }

.color-filter {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    align-items: center;
}
.color-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .2s;
}
.color-dot:hover { transform: scale(1.2); }

.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.product-card {
    background: var(--white);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.product-img {
    height: 80px;
    background: var(--gray-100);
}
.product-info { padding: 7px 8px; }
.product-name { font-size: .65rem; font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }
.product-price { font-size: .75rem; font-weight: 800; color: var(--indigo-600); }

.cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--indigo-900);
    border-radius: var(--r-md);
    padding: 9px 12px;
}
.cart-info {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--white);
    font-size: .75rem;
    font-weight: 600;
}
.cart-badge {
    width: 20px; height: 20px;
    background: var(--green-500);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 800;
}
.whatsapp-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #25D366;
    color: var(--white);
    border-radius: var(--r-sm);
    font-size: .65rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: var(--font);
}

/* FLOAT BADGES */
.float-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    font-size: .78rem;
    animation: floatY 3.5s ease-in-out infinite;
}
.float-1 { bottom: 100px; left: -60px; animation-delay: 0s; }
.float-2 { top: 60px; right: -50px; animation-delay: 1.5s; }
.float-badge span:first-child { font-size: 1.3rem; }
.float-badge strong { display: block; font-weight: 700; color: var(--gray-900); font-size: .8rem; }
.float-badge span:last-child > span { color: var(--text-muted); font-size: .7rem; }
@keyframes floatY {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* CLIENTS STRIP */
.clients-strip {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 32px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-wrap: wrap;
}
.clients-label {
    font-size: .75rem;
    color: rgba(255,255,255,.4);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.clients-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: center;
}
.clients-logos span {
    font-size: .9rem;
    font-weight: 800;
    color: rgba(255,255,255,.3);
    letter-spacing: .02em;
    transition: color .2s;
}
.clients-logos span:hover { color: rgba(255,255,255,.6); }

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries-section {
    background: var(--white);
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.industry-card {
    min-height: 214px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--green-100);
}

.industry-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: var(--gray-50);
    color: var(--green-600);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.industry-card h3 {
    font-size: .98rem;
    font-weight: 800;
    color: var(--indigo-900);
    margin-bottom: 9px;
}

.industry-card p {
    font-size: .84rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.demo-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    place-items: center;
    padding: 12px;
}

.demo-modal.open {
    display: grid;
}

.demo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 26, .58);
    backdrop-filter: blur(10px);
}

.demo-modal-panel {
    position: relative;
    width: min(100%, 400px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 22px 24px;
    box-shadow: var(--shadow-xl);
}

.demo-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    background: var(--gray-50);
}

.demo-modal-close:hover {
    color: var(--indigo-900);
}

.demo-modal-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    color: var(--green-600);
    background: var(--green-100);
    margin-bottom: 12px;
}

.demo-modal-panel h3 {
    font-size: 1.25rem;
    color: var(--indigo-900);
    margin-bottom: 8px;
}

.demo-modal-panel p {
    color: var(--text-muted);
    font-size: .94rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.demo-request-form {
    display: grid;
    gap: 8px;
}

.demo-type-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}

.demo-type-chip {
    min-height: 30px;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: var(--gray-50);
    color: var(--text-muted);
    padding: 5px 10px;
    font-size: .76rem;
    font-weight: 800;
    transition: background .2s, border-color .2s, color .2s;
}

.demo-type-chip.active,
.demo-type-chip:hover {
    background: var(--green-100);
    border-color: rgba(16,185,129,.42);
    color: var(--green-600);
}

.demo-request-form label {
    color: var(--text-muted);
    font-size: .86rem;
    font-weight: 800;
}

.demo-phone-field {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--white);
}

.demo-phone-field span {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 0 14px;
    background: var(--gray-50);
    border-right: 1px solid var(--border);
    color: var(--indigo-900);
    font-weight: 900;
}

.demo-phone-field input {
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 11px 13px;
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.demo-form-error {
    color: #dc2626;
    font-size: .82rem;
}

.demo-text-field {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    padding: 0 14px;
    font: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.demo-text-field:focus {
    border-color: var(--brand-orange, #f26522);
    box-shadow: 0 0 0 3px rgba(242, 101, 34, .12);
}

/* ============================================================
   FEATURES
   ============================================================ */
.features-section { background: var(--bg-subtle); }

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 28px 24px;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--indigo-200);
}

.feature-icon {
    width: 48px; height: 48px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--indigo-100), var(--green-100));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--indigo-600);
    margin-bottom: 18px;
}

.feature-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--indigo-900);
    margin-bottom: 10px;
}
.feature-card p {
    font-size: .875rem;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-section { background: var(--white); }

.steps-wrapper { position: relative; }

.steps-line {
    position: absolute;
    top: 74px;
    left: calc(16.66% - 11px);
    right: calc(16.66% - 11px);
    height: 2px;
    background: linear-gradient(90deg, var(--indigo-200), var(--green-400), var(--indigo-200));
    z-index: 0;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
    z-index: 1;
}

.step {
    text-align: center;
    padding: 0 16px;
}
.step-num {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    color: var(--green-600);
    letter-spacing: .1em;
    margin-bottom: 16px;
    background: var(--green-100);
    padding: 4px 10px;
    border-radius: var(--r-full);
}
.step-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--indigo-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--indigo-600);
    margin: 0 auto 20px;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-md);
    transition: border-color .3s, box-shadow .3s;
}
.step:hover .step-icon {
    border-color: var(--green-500);
    box-shadow: 0 0 0 6px rgba(16,185,129,.12);
}
.step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--indigo-900);
    margin-bottom: 10px;
}
.step p {
    font-size: .875rem;
    color: var(--text-muted);
    line-height: 1.7;
}
.step p strong { color: var(--indigo-600); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-section { background: var(--bg-subtle); }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.price-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px 28px;
    position: relative;
    transition: transform .3s, box-shadow .3s;
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.price-card--popular {
    border-color: var(--indigo-500);
    box-shadow: 0 0 0 4px rgba(99,102,241,.1), var(--shadow-lg);
    transform: translateY(-8px);
}
.price-card--popular:hover { transform: translateY(-12px); }

.popular-badge {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    background: linear-gradient(135deg, var(--indigo-600), var(--indigo-500));
    color: var(--white);
    border-radius: var(--r-full);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.price-plan {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.price-card--popular .price-plan { color: var(--indigo-500); }

.price-amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--indigo-900);
    line-height: 1;
    margin-bottom: 28px;
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.price-currency { font-size: 1.4rem; font-weight: 700; margin-top: 6px; }
.price-period { font-size: .9rem; font-weight: 500; color: var(--text-muted); margin-left: 4px; }

.price-features {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 28px;
}
.price-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .875rem;
    color: var(--text-muted);
}
.pf-icon { font-size: .75rem; font-weight: 800; flex-shrink: 0; margin-top: 2px; }
.pf-icon.check { color: var(--green-500); }
.pf-icon.cross { color: var(--gray-400); }
.pf-muted { color: var(--gray-400); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background: var(--white); }

.faq-container { max-width: 720px; }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
}

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    text-align: left;
    font-size: .95rem;
    font-weight: 600;
    color: var(--indigo-900);
    background: var(--white);
    transition: background .2s;
}
.faq-q:hover { background: var(--gray-50); }
.faq-q[aria-expanded="true"] { color: var(--indigo-600); background: var(--indigo-100); }

.faq-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform .3s;
}
.faq-q[aria-expanded="true"] .faq-arrow { transform: rotate(180deg); color: var(--indigo-500); }

.faq-a {
    display: none;
    padding: 0 24px 20px;
    background: var(--indigo-100);
}
.faq-a.open { display: block; }
.faq-a p {
    font-size: .9rem;
    color: var(--text-muted);
    line-height: 1.75;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section { background: var(--bg-subtle); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.contact-info h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--indigo-900);
    margin-bottom: 28px;
}

.contact-item {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    align-items: flex-start;
}
.contact-icon {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--indigo-600);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.contact-item strong { display: block; font-size: .85rem; font-weight: 700; color: var(--indigo-900); margin-bottom: 3px; }
.contact-item a, .contact-item span { font-size: .875rem; color: var(--text-muted); line-height: 1.6; }
.contact-item a:hover { color: var(--indigo-600); }

.contact-socials {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.social-chip {
    padding: 7px 14px;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: var(--white);
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all .2s;
}
.social-chip:hover { border-color: var(--indigo-400); color: var(--indigo-600); background: var(--indigo-100); }

.contact-form-wrap {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-md);
}

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-error{display:none;padding:12px 14px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#b91c1c;font-size:14px;line-height:1.5}.form-error.visible{display:block}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--indigo-900);
    letter-spacing: .01em;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: .9rem;
    color: var(--text);
    background: var(--white);
    transition: border-color .2s, box-shadow .2s;
    resize: vertical;
    outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--indigo-400);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-light); }

.form-success {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--green-100);
    border: 1px solid rgba(16,185,129,.3);
    border-radius: var(--r-md);
    font-size: .875rem;
    font-weight: 600;
    color: var(--green-600);
}
.form-success.visible { display: flex; }

/* ============================================================
   FOOTER BAR
   ============================================================ */
.footer-bar {
    background: var(--indigo-950);
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 20px 0;
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-logo .logo-text { color: var(--white); font-size: 1rem; }
.footer-copy {
    font-size: .8rem;
    color: rgba(255,255,255,.4);
    text-align: center;
}
.footer-by { color: rgba(255,255,255,.25); }
.footer-nav {
    display: flex;
    gap: 20px;
}
.footer-nav a {
    font-size: .8rem;
    color: rgba(255,255,255,.4);
    transition: color .2s;
}
.footer-nav a:hover { color: rgba(255,255,255,.8); }

/* ============================================================
   RESPONSIVE — MOBILE FIRST
   375 | 390 | 430 | 768 | 1024 | 1280+
   ============================================================ */

/* ─── ≤ 390px : iPhone SE / small phones ──────────────────── */
@media (max-width: 390px) {
    :root {
        --nav-h: 58px;
        --section-py: 56px;
        --px: 16px;
    }

    /* NAV */
    .nav-links, .nav-actions { display: none; }
    .burger { display: flex; }

    /* HERO */
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-top: 48px;
        padding-bottom: 52px;
    }
    .hero-h1 { font-size: 1.85rem; }
    .hero-sub { font-size: .9rem; }
    .hero-btns { flex-direction: column; gap: 10px; }
    .hero-btns .btn-lg { width: 100%; justify-content: center; }
    .hero-visual { justify-content: center; }
    .phone-frame { width: 240px; }
    .phone-screen { min-height: 440px; }
    .product-img { height: 64px; }
    .float-1 { left: -8px; bottom: 90px; transform: scale(.85); transform-origin: left bottom; }
    .float-2 { right: -8px; top: 30px; transform: scale(.85); transform-origin: right top; }
    .clients-strip { flex-direction: column; align-items: flex-start; gap: 12px; }

    /* FEATURES */
    .industries-grid { grid-template-columns: 1fr; gap: 14px; }
    .industry-card { min-height: auto; padding: 20px 18px; }
    .features-grid { grid-template-columns: 1fr; gap: 14px; }
    .feature-card { padding: 22px 18px; }

    /* HOW */
    .steps-line { display: none; }
    .steps-grid { grid-template-columns: 1fr; gap: 28px; }
    .step { text-align: left; padding: 0; }
    .step-icon { margin: 0 0 14px 0; }

    /* PRICING */
    .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
    .price-card--popular { transform: none; }
    .price-card--popular:hover { transform: translateY(-3px); }

    /* FAQ */
    .faq-q { font-size: .88rem; padding: 16px 18px; }
    .faq-a { padding: 0 18px 16px; }

    /* CONTACT */
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .contact-form-wrap { padding: 22px 18px; }

    /* FOOTER */
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-nav { justify-content: center; }
}

/* ─── 391–430px : iPhone 14/15 Pro Max ────────────────────── */
@media (min-width: 391px) and (max-width: 430px) {
    :root {
        --nav-h: 60px;
        --section-py: 60px;
        --px: 18px;
    }
    .nav-links, .nav-actions { display: none; }
    .burger { display: flex; }

    .hero-inner { grid-template-columns: 1fr; gap: 50px; padding-top: 52px; padding-bottom: 56px; }
    .hero-h1 { font-size: 2rem; }
    .hero-btns { flex-direction: column; gap: 10px; }
    .hero-btns .btn-lg { width: 100%; justify-content: center; }
    .hero-visual { justify-content: center; }
    .phone-frame { width: 252px; }
    .phone-screen { min-height: 460px; }
    .float-1 { left: -8px; }
    .float-2 { right: -8px; }
    .clients-strip { flex-direction: column; align-items: flex-start; gap: 12px; }

    .industries-grid { grid-template-columns: 1fr; gap: 14px; }
    .industry-card { min-height: auto; padding: 20px 18px; }
    .features-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

    .steps-line { display: none; }
    .steps-grid { grid-template-columns: 1fr; gap: 28px; }
    .step { text-align: left; }
    .step-icon { margin: 0 0 14px 0; }

    .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
    .price-card--popular { transform: none; }
    .price-card--popular:hover { transform: translateY(-3px); }

    .contact-grid { grid-template-columns: 1fr; gap: 32px; }

    .footer-inner { flex-direction: column; text-align: center; }
    .footer-nav { justify-content: center; }
}

/* ─── 431–767px : large phones ─────────────────────────────── */
@media (min-width: 431px) and (max-width: 767px) {
    :root {
        --nav-h: 62px;
        --section-py: 68px;
        --px: 20px;
    }
    .nav-links, .nav-actions { display: none; }
    .burger { display: flex; }

    .hero-inner { grid-template-columns: 1fr; gap: 52px; padding-top: 56px; padding-bottom: 60px; }
    .hero-h1 { font-size: 2.2rem; }
    .hero-btns { flex-wrap: wrap; gap: 12px; }
    .hero-visual { justify-content: center; }
    .phone-frame { width: 260px; }
    .float-1 { left: 0; }
    .float-2 { right: 0; }
    .clients-strip { flex-direction: column; align-items: flex-start; gap: 12px; }

    .industries-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .industry-card { min-height: 206px; }
    .features-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

    .steps-line { display: none; }
    .steps-grid { grid-template-columns: 1fr; gap: 28px; }
    .step { text-align: left; }
    .step-icon { margin: 0 0 14px 0; }

    .pricing-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; margin: 0 auto; }
    .price-card--popular { transform: none; }
    .price-card--popular:hover { transform: translateY(-3px); }

    .contact-grid { grid-template-columns: 1fr; gap: 36px; }

    .footer-inner { flex-direction: column; text-align: center; }
    .footer-nav { justify-content: center; }
}

/* ─── 768–1023px : iPad / Tablet ───────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --nav-h: 64px;
        --section-py: 80px;
        --px: 28px;
    }

    /* NAV — show partial */
    .nav-links { display: flex; gap: 18px; }
    .nav-links a { font-size: .82rem; }
    .nav-actions { display: flex; }
    .burger { display: none; }

    /* HERO — side by side, compressed */
    .hero-inner {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
        padding-top: 64px;
        padding-bottom: 64px;
    }
    .hero-h1 { font-size: 2.2rem; }
    .hero-visual { justify-content: flex-end; }
    .phone-frame { width: 240px; }
    .float-1 { left: -30px; }
    .float-2 { right: -30px; }

    .industries-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .features-grid { grid-template-columns: 1fr 1fr; gap: 18px; }

    .steps-line { left: calc(16.66% - 11px); right: calc(16.66% - 11px); }

    .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .price-card { padding: 26px 20px; }
    .price-card--popular { transform: translateY(-6px); }
    .price-amount { font-size: 2.4rem; }

    .contact-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ─── 1024–1279px : iPad Pro / small laptop ────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root { --px: 32px; }

    .industries-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
    .features-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .hero-inner { gap: 44px; }
    .phone-frame { width: 255px; }
}
/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    overflow-x: hidden;
    overflow-y: hidden;
    background:
        radial-gradient(circle at top left, rgba(16,185,129,.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(99,102,241,.16), transparent 34%),
        var(--bg);
}

.auth-body {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

@media (max-height: 720px) {
    .auth-page {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .auth-card {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .auth-logo {
        margin-bottom: 20px;
    }
}

.auth-page--wide {
    align-items: start;
}

.auth-card {
    width: min(100%, 460px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 32px;
    box-shadow: var(--shadow-lg);
}

.auth-card--wide {
    width: min(100%, 980px);
}

.auth-logo {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 28px;
}

.auth-brand-logo-image {
    display: block;
    width: min(240px, 100%);
    height: auto;
    object-fit: contain;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-status {
    margin-bottom: 18px;
    border: 1px solid rgba(16, 185, 129, .28);
    border-radius: 12px;
    background: rgba(16, 185, 129, .1);
    color: #047857;
    padding: 12px 14px;
    font-size: .92rem;
    font-weight: 700;
}

.auth-form--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-wizard {
    gap: 20px;
}

.auth-stepper {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.auth-stepper-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: var(--text-muted);
    padding: 10px 12px;
    font: inherit;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
}

.auth-stepper-item span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text);
    font-size: .78rem;
}

.auth-stepper-item.active {
    border-color: rgba(16, 185, 129, .42);
    background: rgba(16, 185, 129, .1);
    color: var(--text);
}

.auth-stepper-item.completed span,
.auth-stepper-item.active span {
    background: var(--green-500);
    color: #fff;
}

.auth-step {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.auth-step[hidden] {
    display: none;
}

.auth-required::after {
    content: " *";
    color: #ef4444;
    font-weight: 900;
}

.auth-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.auth-actions .btn-block:only-child {
    grid-column: 2;
}

.auth-form h2 {
    grid-column: 1 / -1;
    margin-top: 10px;
    font-size: 1rem;
}

.auth-form label,
.auth-span {
    display: grid;
    gap: 7px;
}

.auth-form label span,
.auth-span > span {
    color: var(--text-muted);
    font-size: .86rem;
    font-weight: 600;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: var(--text);
    padding: 13px 14px;
    outline: none;
}

.auth-form textarea {
    resize: vertical;
}

.auth-form small {
    color: #fca5a5;
}

.auth-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.auth-check input {
    width: auto;
}

.auth-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.auth-span {
    grid-column: 1 / -1;
}

.auth-alt {
    margin-top: 18px;
    color: var(--text-muted);
    text-align: center;
}

.auth-alt a {
    color: var(--green-500);
    font-weight: 700;
}

.price-description {
    color: var(--text-muted);
    font-size: .9rem;
    margin: -4px 0 10px;
}

@media (max-width: 720px) {
    .auth-card,
    .auth-card--wide {
        padding: 24px;
        border-radius: 18px;
    }

    .auth-form--grid,
    .auth-step,
    .auth-stepper,
    .auth-actions,
    .auth-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .auth-actions .btn-block:only-child {
        grid-column: auto;
    }
}
/* SEO blog */
.content-page{padding-top:140px}.content-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1000px;margin:0 auto}.content-page-grid h2{font-size:21px;margin-bottom:10px}.content-page-grid p{color:#64748b;line-height:1.7}.content-page-cta{max-width:1000px;margin:40px auto 0;padding:34px;border-radius:20px;background:#ecfdf5;text-align:center}.content-page-cta h2{margin-bottom:20px}.content-page-cta .btn-outline{margin-left:10px}@media(max-width:800px){.content-page{padding-top:110px}.content-page-grid{grid-template-columns:1fr}.content-page-cta .btn-outline{display:flex;margin:12px 0 0;justify-content:center}}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.blog-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:28px;box-shadow:0 10px 30px rgba(15,23,42,.05)}.blog-card time{color:#64748b;font-size:13px}.blog-card h2,.blog-card h3{margin:12px 0;font-size:21px;line-height:1.35}.blog-card h2 a,.blog-card h3 a{color:#0f172a;text-decoration:none}.blog-card p{color:#64748b;line-height:1.7}.blog-more{display:inline-block;margin-top:12px;color:#059669;font-weight:700;text-decoration:none}.blog-all{text-align:center;margin-top:32px}.blog-page{padding-top:130px}.article-page{max-width:820px;padding-top:70px}.article-page>h1{font-size:clamp(34px,5vw,56px);line-height:1.12;margin:18px 0}.article-lead{font-size:20px;color:#64748b;line-height:1.7}.article-content{margin-top:42px}.article-content h2{font-size:28px;margin:34px 0 12px}.article-content p{font-size:17px;line-height:1.85;color:#334155}.article-cta{margin-top:48px;padding:32px;background:#ecfdf5;border-radius:18px}.article-cta .btn-cta{display:inline-flex;margin-top:12px}@media(max-width:800px){.blog-grid{grid-template-columns:1fr}.blog-page{padding-top:100px}.article-page{padding-top:40px}}
.blog-card{padding:0;overflow:hidden}.blog-card-body{padding:18px}.blog-card-image{display:block;aspect-ratio:16/8;overflow:hidden;background:#f1f5f9}.blog-card-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s ease}.blog-card:hover .blog-card-image img{transform:scale(1.035)}.blog-slider{display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 16px}.blog-slider::-webkit-scrollbar{display:none}.blog-slider .blog-card{flex:0 0 calc((100% - 54px)/4);min-width:0;scroll-snap-align:start}.blog-slider .blog-card h3{font-size:17px;margin:9px 0}.blog-slider .blog-card p{font-size:14px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.blog-slider-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}.blog-slider-controls button{width:42px;height:42px;border:1px solid #d1d5db;border-radius:50%;background:#fff;color:#0f172a;font-size:20px;cursor:pointer}.blog-slider-controls button:hover{border-color:#10b981;color:#059669}@media(max-width:1000px){.blog-slider .blog-card{flex-basis:calc((100% - 18px)/2)}}@media(max-width:600px){.blog-slider{gap:14px}.blog-slider .blog-card{flex-basis:84%}.blog-card-image{aspect-ratio:16/8.5}}

/* Shared public layout */
.nav-links a.active{color:#059669}.nav-links a.active::after{width:100%}.nav-contact{padding:10px 16px!important;border-radius:10px;background:#10b981;color:#fff!important}.nav-contact:hover,.nav-contact.active{background:#059669;color:#fff!important}.nav-contact::after{display:none!important}.content-page{min-height:70vh;background:linear-gradient(180deg,#f8fffc 0,#fff 360px)}.content-page>.container>.section-header{max-width:820px;margin-left:auto;margin-right:auto}.content-page-grid .feature-card{border-color:#e2e8f0}.public-footer{padding:58px 0 22px;background:#0f172a;color:#cbd5e1}.public-footer-grid{display:grid;grid-template-columns:minmax(280px,2fr) 1fr 1fr;gap:60px}.public-footer .logo{color:#fff;margin-bottom:16px}.public-footer p{max-width:390px;line-height:1.7}.public-footer nav{display:flex;flex-direction:column;gap:12px}.public-footer nav strong{color:#fff;margin-bottom:6px}.public-footer nav a{color:#cbd5e1;text-decoration:none}.public-footer nav a:hover{color:#34d399}.public-footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:22px;border-top:1px solid #334155;font-size:13px;color:#94a3b8}@media(max-width:900px){.nav-links{gap:18px}.nav-links a{font-size:13px}.public-footer-grid{grid-template-columns:1fr 1fr}.public-footer-grid>div:first-child{grid-column:1/-1}}@media(max-width:640px){.public-footer{padding-top:42px}.public-footer-grid{grid-template-columns:1fr;gap:30px}.public-footer-grid>div:first-child{grid-column:auto}.public-footer-bottom{flex-direction:column}.nav-contact{background:transparent;color:inherit!important;padding:0!important}}
.content-hero{padding-bottom:18px}.content-hero h1{max-width:820px;margin-left:auto;margin-right:auto}.content-card-index{display:inline-flex;margin-bottom:18px;color:#10b981;font-size:13px;font-weight:800;letter-spacing:.08em}.process-timeline{max-width:900px;margin:0 auto;position:relative}.process-timeline::before{content:"";position:absolute;left:29px;top:30px;bottom:30px;width:2px;background:#d1fae5}.process-item{position:relative;display:grid;grid-template-columns:60px 1fr;gap:28px;padding:0 0 38px}.process-item>span{position:relative;z-index:1;display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:#10b981;color:#fff;font-weight:800}.process-item>div{padding:18px 24px;border:1px solid #e2e8f0;border-radius:16px;background:#fff}.process-item h2{font-size:21px;margin-bottom:8px}.process-item p{color:#64748b;line-height:1.7}.public-faq{max-width:900px;margin:0 auto}.public-faq details{border-bottom:1px solid #e2e8f0;background:#fff}.public-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 4px;font-size:18px;font-weight:700;cursor:pointer;list-style:none}.public-faq summary::-webkit-details-marker{display:none}.public-faq summary span{font-size:24px;color:#10b981}.public-faq details[open] summary span{transform:rotate(45deg)}.public-faq details p{padding:0 42px 24px 4px;color:#64748b;line-height:1.75}.public-contact{max-width:1000px;margin:0 auto}.public-contact .contact-info>p{margin:12px 0 28px;color:#64748b;line-height:1.7}.contact-note{margin-top:28px;padding:22px;border-radius:14px;background:#ecfdf5}.contact-note p{margin-top:8px!important}.article-shell{background:linear-gradient(180deg,#f8fffc 0,#fff 420px)}.breadcrumbs{display:flex;gap:9px;align-items:center;margin-bottom:24px;color:#94a3b8;font-size:14px}.breadcrumbs a{color:#059669;text-decoration:none}.article-cover{width:100%;height:auto;margin:34px 0 10px;border-radius:22px;border:1px solid #e2e8f0}.article-content{max-width:720px;margin-left:auto;margin-right:auto}.article-cta{max-width:720px;margin-left:auto;margin-right:auto}@media(max-width:640px){.process-item{grid-template-columns:48px 1fr;gap:14px}.process-item>span{width:48px;height:48px;border-radius:14px}.process-timeline::before{left:23px}.process-item>div{padding:16px}.public-faq summary{font-size:16px}.article-cover{border-radius:14px}}

/* Home blog: always one horizontal row */
.home-page .blog-slider{display:grid!important;grid-auto-flow:column;grid-template-rows:1fr;grid-auto-columns:calc((100% - 54px)/4);gap:18px;overflow-x:auto;overflow-y:hidden}.home-page .blog-slider .blog-card{width:auto;min-width:0;max-width:none;display:flex;flex-direction:column}.home-page .blog-slider .blog-card-body{display:flex;flex:1;flex-direction:column}.home-page .blog-slider .blog-more{margin-top:auto;padding-top:12px}@media(max-width:1000px){.home-page .blog-slider{grid-auto-columns:calc((100% - 18px)/2)}}@media(max-width:600px){.home-page .blog-slider{grid-auto-columns:82%;gap:14px}}

/* Compact, conversion-focused homepage */
.home-page .hero{min-height:740px}.hero-trust-list{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:28px;color:#cbd5e1;font-size:13px}.hero-trust-list span{white-space:nowrap}.hero-capabilities{display:flex;justify-content:center;gap:0;border-top:1px solid rgba(255,255,255,.1);padding-top:24px}.hero-capabilities span{padding:0 24px;border-right:1px solid rgba(255,255,255,.12);color:#94a3b8;font-size:13px;font-weight:700}.hero-capabilities span:last-child{border-right:0}.home-page .industries-section,.home-page .features-section,.home-page .how-section,.home-page .blog-section,.home-page .contact-section{padding-top:76px;padding-bottom:76px}.home-page .industries-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.home-page .industries-grid .industry-card:nth-child(n+7){display:none}.home-page .features-grid .feature-card:nth-child(n+9){display:none}.home-page .section-header{margin-bottom:42px}.home-page .blog-section{min-height:0}.home-page .contact-section{background:linear-gradient(180deg,#f8fffc,#fff)}.contact-intro{margin:10px 0 24px;color:#64748b;line-height:1.7}.contact-benefits{display:grid;gap:14px;margin:0 0 28px;padding:0;list-style:none}.contact-benefits li{display:flex;align-items:flex-start;gap:12px;color:#334155;line-height:1.55}.contact-benefits li span{display:grid;flex:0 0 34px;height:34px;place-items:center;border-radius:10px;background:#d1fae5;color:#047857;font-size:11px;font-weight:800}@media(max-width:900px){.home-page .industries-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-capabilities{flex-wrap:wrap;gap:12px}.hero-capabilities span{border:0;padding:0 10px}}@media(max-width:600px){.home-page .hero{min-height:auto}.home-page .industries-section,.home-page .features-section,.home-page .how-section,.home-page .blog-section,.home-page .contact-section{padding-top:58px;padding-bottom:58px}.home-page .industries-grid{grid-template-columns:1fr}.hero-capabilities{justify-content:flex-start}.hero-trust-list{display:grid;gap:8px}}
@media(max-width:600px){.home-page .hero-inner{gap:30px!important;padding-top:38px!important;padding-bottom:0!important}.home-page .hero-visual{height:365px!important;overflow:hidden;align-items:flex-start}.home-page .phone-frame{width:220px!important}.home-page .float-badge{display:none}.home-page .hero-capabilities{margin-top:22px}}
/* Restrained section color system */
.home-page .industries-section{background:linear-gradient(180deg,#f8fafc 0%,#f3f7f6 100%)}.home-page .features-section{background:linear-gradient(135deg,#edfcf5 0%,#f8fffc 55%,#eef8ff 100%)}.home-page .how-section{background:linear-gradient(180deg,#fffdf7 0%,#fff8e9 100%)}.home-page .blog-section{background:linear-gradient(135deg,#f3f6ff 0%,#f8f7ff 100%)}.home-page .contact-section{background:linear-gradient(180deg,#f1fbf7 0%,#f8fffc 100%)}.home-page .industries-section,.home-page .features-section,.home-page .how-section,.home-page .blog-section,.home-page .contact-section{position:relative;border-top:1px solid rgba(15,23,42,.04)}.home-page .industry-card,.home-page .feature-card,.home-page .blog-card{background:rgba(255,255,255,.94);box-shadow:0 12px 34px rgba(15,23,42,.055)}.home-page .industry-card{border-top:3px solid #a7f3d0}.home-page .feature-card:nth-child(4n+1){border-top:3px solid #6ee7b7}.home-page .feature-card:nth-child(4n+2){border-top:3px solid #93c5fd}.home-page .feature-card:nth-child(4n+3){border-top:3px solid #fcd34d}.home-page .feature-card:nth-child(4n+4){border-top:3px solid #c4b5fd}.page-type-about{background:linear-gradient(180deg,#f0fdf7 0,#fff 420px)}.page-type-features{background:linear-gradient(180deg,#eff8ff 0,#fff 430px)}.page-type-process{background:linear-gradient(180deg,#fff9ec 0,#fff 430px)}.page-type-faq{background:linear-gradient(180deg,#f6f4ff 0,#fff 420px)}.page-type-contact{background:linear-gradient(180deg,#edfdf6 0,#fff 480px)}.blog-page{background:linear-gradient(180deg,#f2f5ff 0,#fff 520px)}.blog-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.blog-tags span{display:inline-flex;align-items:center;min-height:25px;padding:4px 9px;border:1px solid #bbf7d0;border-radius:999px;background:#ecfdf5;color:#047857;font-size:11px;font-weight:700;line-height:1.2}.article-tags{margin-bottom:16px}.article-tags span:nth-child(2n){border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.article-tags span:nth-child(3n){border-color:#ddd6fe;background:#f5f3ff;color:#6d28d9}.home-page .blog-slider .blog-card:nth-child(3n+2) .blog-tags span{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.home-page .blog-slider .blog-card:nth-child(3n+3) .blog-tags span{border-color:#ddd6fe;background:#f5f3ff;color:#6d28d9}
/* Home FAQ and legal content */
.home-faq-section{background:linear-gradient(135deg,#f7f5ff 0%,#eef8ff 100%);border-top:1px solid rgba(15,23,42,.04)}.home-faq-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(480px,1.2fr);gap:76px;align-items:start}.home-faq-intro{position:sticky;top:105px}.home-faq-intro h2{margin:16px 0;font-size:clamp(28px,3vw,42px);line-height:1.15}.home-faq-intro p{margin-bottom:26px;color:#64748b;line-height:1.7}.home-faq-list{max-width:none;border-radius:20px;background:rgba(255,255,255,.84);padding:6px 26px;box-shadow:0 18px 45px rgba(60,72,110,.08)}.legal-content{max-width:820px;margin:0 auto;padding:38px 44px;border:1px solid #e2e8f0;border-radius:22px;background:#fff;box-shadow:0 16px 42px rgba(15,23,42,.055)}.legal-content section+section{margin-top:32px;padding-top:30px;border-top:1px solid #e2e8f0}.legal-content h2{margin-bottom:10px;font-size:21px}.legal-content p{color:#475569;line-height:1.8}.legal-updated{margin-top:36px!important;padding-top:20px;border-top:1px solid #e2e8f0;color:#94a3b8!important;font-size:13px}.page-type-legal{background:linear-gradient(180deg,#f8fafc 0,#fff 450px)}@media(max-width:900px){.home-faq-layout{grid-template-columns:1fr;gap:34px}.home-faq-intro{position:static}.home-faq-intro .btn-outline{display:inline-flex}.home-faq-list{padding:4px 20px}}@media(max-width:600px){.home-faq-section{padding:58px 0}.home-faq-list{padding:2px 16px}.legal-content{padding:24px 20px;border-radius:16px}}
/* Article authority and internal linking */
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;margin-bottom:18px;color:#64748b;font-size:14px}.article-meta span:first-child{color:#0f172a;font-weight:700}.article-resources{display:grid;gap:10px;margin-top:36px;padding:24px;border-left:4px solid #10b981;border-radius:0 14px 14px 0;background:#ecfdf5}.article-resources strong{margin-bottom:3px}.article-resources a{color:#047857;font-weight:650;text-decoration:none}.article-resources a:hover{text-decoration:underline}.related-posts{padding-top:80px}.related-posts .section-header{text-align:left;margin-left:0}.related-posts .blog-card h3{font-size:18px}.related-posts .blog-card-body{display:flex;flex-direction:column}.related-posts .blog-more{margin-top:auto}@media(max-width:700px){.related-posts{padding-top:58px}.related-posts .blog-grid{grid-template-columns:1fr}}

/* Ticarətgah redesign based on the supplied Figma AI export */
:root{--brand-navy:#1b2240;--brand-deep:#11172f;--brand-orange:#f26522;--brand-orange-dark:#d94f12;--brand-canvas:#f8f7f4;--brand-blue:#eef1f8;--brand-peach:#fff5ee;--indigo-950:#11172f;--indigo-900:#1b2240;--indigo-800:#252d50;--indigo-700:#303a64;--indigo-600:#1b2240;--indigo-100:#eef1f8;--green-600:#d94f12;--green-500:#f26522;--green-400:#fb8b55;--green-100:#fff0e8;--primary:#1b2240;--cta:#f26522;--cta-hover:#d94f12;--bg-subtle:#f8f7f4;--nav-h:72px;--container:1280px;--r-lg:12px;--r-xl:20px;--shadow-lg:0 18px 48px rgba(27,34,64,.12)}
body{background:var(--brand-canvas);color:var(--brand-navy)}.section{padding-top:88px;padding-bottom:88px}.section-tag,.hero-badge{color:var(--brand-orange)!important;background:#fff0e8!important;border-color:rgba(242,101,34,.22)!important;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800}.section-header h1,.section-header h2,.content-hero h1{color:var(--brand-navy);letter-spacing:-.035em;line-height:1.12}.section-header p{max-width:720px;color:#687084}
.header{background:rgba(27,34,64,.97);border-bottom-color:rgba(255,255,255,.09);backdrop-filter:blur(14px)}.header.scrolled{background:rgba(17,23,47,.98);box-shadow:0 8px 28px rgba(8,13,31,.22)}.nav-inner{height:72px}.header .brand-logo{background:#fff;border-radius:9px}.header .brand-logo-image{width:164px;height:46px}.nav-links{gap:6px}.nav-links a{padding:10px 12px;color:rgba(255,255,255,.72);font-size:13px}.nav-links a:hover,.nav-links a.active{color:#fff}.nav-links a::after{display:none}.nav-contact{margin-left:8px;padding:10px 16px!important;background:var(--brand-orange)!important;color:#fff!important;border-radius:8px}.nav-contact:hover{background:var(--brand-orange-dark)!important}.burger span{background:#fff}.mobile-menu{top:72px;background:var(--brand-deep);border-color:rgba(255,255,255,.1)}.mobile-link{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.08)}.mobile-cta{margin:12px 20px;padding:13px 16px!important;border:0;border-radius:9px;background:var(--brand-orange);color:#fff;text-align:center}
.btn-cta{background:var(--brand-orange);border-radius:9px;box-shadow:0 10px 26px rgba(242,101,34,.22)}.btn-cta:hover{background:var(--brand-orange-dark);box-shadow:0 14px 30px rgba(242,101,34,.3)}.btn-outline{border-color:rgba(27,34,64,.22);border-radius:9px;color:var(--brand-navy)}.btn-outline:hover{border-color:var(--brand-navy);background:var(--brand-blue)}
.hero{min-height:760px;background:var(--brand-deep)}.hero-bg{background:var(--brand-navy)}.hero-grid{opacity:.06;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:48px 48px}.hero-orb-1{background:rgba(242,101,34,.2)}.hero-orb-2{background:rgba(71,85,140,.24)}.hero-inner{padding-top:120px;padding-bottom:62px;gap:72px}.hero-h1{font-size:clamp(42px,5.2vw,68px);line-height:1.06;letter-spacing:-.045em}.hero-h1 .accent{color:#fff}.hero-sub{color:rgba(255,255,255,.65);font-size:18px;line-height:1.75}.hero-demo-btn{border-color:rgba(255,255,255,.22);background:transparent;color:#fff;box-shadow:none;border-radius:9px}.hero-demo-btn svg{color:#fff}.hero-demo-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);box-shadow:none}.hero-trust-list{color:rgba(255,255,255,.62)}.hero-capabilities{border-color:rgba(255,255,255,.1)}.hero-capabilities span{color:rgba(255,255,255,.58)}.phone-frame{border-color:rgba(255,255,255,.14);box-shadow:0 36px 80px rgba(0,0,0,.38)}.float-badge{border-color:rgba(242,101,34,.2)}
.industries-section{background:var(--brand-canvas)!important}.features-section{background:var(--brand-blue)!important}.how-section{background:var(--brand-peach)!important}.blog-section{background:#f1f3fa!important}.contact-section{background:var(--brand-canvas)!important}.home-faq-section{background:var(--brand-blue)!important}.industry-card,.feature-card,.blog-card{border:1px solid rgba(27,34,64,.09)!important;border-top:1px solid rgba(27,34,64,.09)!important;border-radius:14px!important;box-shadow:0 10px 28px rgba(27,34,64,.055)!important}.industry-card:hover,.feature-card:hover,.blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(27,34,64,.1)!important;border-color:rgba(242,101,34,.26)!important}.industry-icon,.feature-icon{background:#fff0e8!important;color:var(--brand-orange)!important;border-radius:10px}.content-card-index{color:var(--brand-orange)}
.process-item>span{background:var(--brand-orange);border-radius:12px}.process-timeline::before{background:rgba(242,101,34,.2)}.process-item>div{border-color:rgba(27,34,64,.1);border-radius:14px;box-shadow:0 8px 24px rgba(27,34,64,.04)}.home-faq-list{border:1px solid rgba(27,34,64,.08);box-shadow:0 18px 45px rgba(27,34,64,.07)}.public-faq summary span{color:var(--brand-orange)}
.content-page{padding-top:156px;background:linear-gradient(180deg,var(--brand-blue) 0,#fff 440px)}.page-type-about{background:linear-gradient(180deg,var(--brand-peach) 0,#fff 440px)}.page-type-features{background:linear-gradient(180deg,var(--brand-blue) 0,#fff 440px)}.page-type-process{background:linear-gradient(180deg,var(--brand-peach) 0,#fff 440px)}.page-type-faq{background:linear-gradient(180deg,#f1f3fa 0,#fff 440px)}.page-type-contact{background:linear-gradient(180deg,var(--brand-blue) 0,#fff 480px)}.page-type-legal{background:linear-gradient(180deg,#f5f5f2 0,#fff 450px)}.content-page-grid .feature-card{background:#fff}.content-page-cta{background:var(--brand-navy);color:#fff;border-radius:16px}.content-page-cta h2{color:#fff}.content-page-cta p{color:rgba(255,255,255,.65);margin:0 auto 20px;max-width:620px}
.blog-page{padding-top:156px;background:linear-gradient(180deg,var(--brand-blue) 0,#fff 520px)}.blog-tags span{border-color:#ffd7c4;background:#fff0e8;color:#bd4815}.blog-more,.breadcrumbs a,.article-resources a{color:var(--brand-orange-dark)}.article-shell{padding-top:132px;background:linear-gradient(180deg,var(--brand-blue) 0,#fff 460px)}.article-cta,.article-resources{background:var(--brand-peach)}.article-resources{border-left-color:var(--brand-orange)}
.public-footer{background:#11172f;padding-top:64px}.public-footer-grid{grid-template-columns:minmax(280px,2fr) repeat(3,1fr);gap:48px}.public-footer .brand-logo{background:#fff;border-radius:9px}.footer-socials{display:flex;gap:8px;margin-top:22px}.footer-socials a{display:grid;width:36px;height:36px;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);font-size:12px;font-weight:800}.footer-socials a:hover{background:var(--brand-orange);color:#fff}.public-footer nav a:hover{color:#fb8b55}
@media(max-width:1050px){.nav-links{gap:0}.nav-links a{padding:9px 8px;font-size:12px}.header .brand-logo-image{width:148px;height:42px}.public-footer-grid{grid-template-columns:1.5fr repeat(3,1fr)}}
@media(max-width:900px){.public-footer-grid{grid-template-columns:1fr 1fr}.public-footer-grid>div:first-child{grid-column:1/-1}.hero-inner{padding-top:105px}.hero-h1{font-size:clamp(40px,8vw,58px)}}
@media(max-width:640px){:root{--px:18px;--section-py:64px}.header .brand-logo-image{width:142px;height:40px}.hero-inner{padding-top:104px!important}.hero-h1{font-size:36px}.hero-sub{font-size:16px}.hero-btns{display:grid}.hero-btns>*{width:100%;justify-content:center}.home-page .hero-visual{height:320px!important}.public-footer-grid{grid-template-columns:1fr}.public-footer-grid>div:first-child{grid-column:auto}.content-page,.blog-page{padding-top:120px}.article-shell{padding-top:104px}}

/* ZIP prototype wordmark */
.header .brand-logo,.public-footer .brand-logo{background:transparent;border-radius:0}.brand-logo{overflow:visible}.header .brand-wordmark,.footer-logo .brand-wordmark{color:#fff}.auth-logo .brand-wordmark{color:#1b2240}@media(max-width:640px){.brand-wordmark{font-size:23px}}

/* ZIP prototype dashboard hero */
.hero-visual-legacy{display:none}.figma-dashboard{overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0d1526;box-shadow:0 32px 80px rgba(0,0,0,.42);transform:rotate(1deg)}.dashboard-browserbar{display:flex;align-items:center;gap:7px;height:44px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08)}.dashboard-browserbar>span{width:9px;height:9px;border-radius:50%;background:#f87171}.dashboard-browserbar>span:nth-child(2){background:#fbbf24}.dashboard-browserbar>span:nth-child(3){background:#4ade80}.dashboard-browserbar small{flex:1;margin-left:14px;padding:5px 12px;border-radius:5px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.3);font-size:10px}.dashboard-body{display:grid;grid-template-columns:54px 1fr;min-height:390px}.dashboard-body aside{display:flex;flex-direction:column;align-items:center;gap:22px;padding:20px 0;border-right:1px solid rgba(255,255,255,.06)}.dashboard-body aside strong{display:grid;width:28px;height:28px;place-items:center;border-radius:7px;background:#f26522;color:#fff}.dashboard-body aside i{width:18px;height:5px;border-radius:4px;background:rgba(255,255,255,.14)}.dashboard-main{padding:24px}.dashboard-heading{display:flex;align-items:end;justify-content:space-between}.dashboard-heading small{color:rgba(255,255,255,.35);font-size:9px;letter-spacing:.12em}.dashboard-heading h3{margin-top:4px;color:#fff;font-size:20px}.dashboard-heading>span{padding:6px 10px;border-radius:6px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-size:10px}.dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.dashboard-stats article{padding:14px;border-radius:11px;background:rgba(255,255,255,.055)}.dashboard-stats small{display:block;color:rgba(255,255,255,.35);font-size:10px}.dashboard-stats strong{display:block;margin:5px 0;color:#fff;font-size:17px}.dashboard-stats em{color:#4ade80;font-size:10px;font-style:normal}.dashboard-orders{overflow:hidden;border-radius:12px;background:rgba(255,255,255,.035)}.dashboard-orders-title,.dashboard-orders>div{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05)}.dashboard-orders-title{justify-content:space-between!important;color:rgba(255,255,255,.5);font-size:10px}.dashboard-orders>div:last-child{border:0}.dashboard-orders b{display:grid;flex:0 0 28px;height:28px;place-items:center;border-radius:50%;background:rgba(242,101,34,.18);color:#fb8b55;font-size:9px}.dashboard-orders p{display:grid;flex:1}.dashboard-orders p strong{color:#fff;font-size:10px}.dashboard-orders p small{color:rgba(255,255,255,.32);font-size:9px}.dashboard-orders em{color:#fff;font-size:10px;font-style:normal}.dashboard-orders>div>span{min-width:58px;padding:4px 6px;border-radius:999px;background:rgba(74,222,128,.12);color:#4ade80;text-align:center;font-size:8px}@media(max-width:900px){.figma-dashboard{display:none}.hero-visual-legacy{display:flex}}

/* Rich feature previews */
.fg-preview-grid article{overflow:hidden}.fg-preview-grid button{border:0;border-radius:6px;background:#f26522;color:#fff;font:700 8px/1 var(--font);padding:7px 9px}.fg-product-ui{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;margin-top:18px}.fg-product-photo{display:grid;height:86px;place-items:center;border-radius:9px;background:linear-gradient(145deg,#fff5ee,#ffd8c5);color:#f26522;font-size:32px;font-weight:800}.fg-product-ui>div:last-child{display:grid;gap:6px}.fg-product-ui b,.fg-order-ui b,.fg-phone-ui b{color:#fff;font-size:9px}.fg-product-ui small{color:#fb8b55;font-size:12px;font-weight:800}.fg-product-ui em{color:rgba(255,255,255,.35);font-size:7px;font-style:normal}.fg-order-ui{display:grid;gap:7px;margin-top:18px}.fg-order-ui>div{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:8px;border-radius:7px;background:rgba(255,255,255,.055)}.fg-order-ui small{color:rgba(255,255,255,.6);font-size:8px}.fg-order-ui em{min-width:47px;padding:3px 5px;border-radius:99px;background:rgba(242,101,34,.14);color:#fb8b55;text-align:center;font-size:6px;font-style:normal}.fg-phone-ui{width:104px;margin:10px auto -28px;padding:9px;border:2px solid rgba(255,255,255,.13);border-radius:16px;background:#111827;box-shadow:0 12px 24px rgba(0,0,0,.22)}.fg-phone-ui>i{width:28px!important;height:3px;margin:0 auto 9px!important}.fg-phone-ui>b{display:block;margin-bottom:8px;font-size:8px}.fg-phone-ui>small{display:block;margin-top:5px;padding:6px;border-radius:5px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);font-size:6px}.fg-phone-ui>div{display:flex;justify-content:space-between;margin:9px 0 6px;color:#fff}.fg-phone-ui em{font-size:6px;font-style:normal}.fg-phone-ui strong{font-size:8px}.fg-phone-ui button{width:100%;font-size:6px}.fg-chat-ui{margin-top:15px;padding:10px;border-radius:10px;background:#e8f5ec;color:#153d2d}.fg-chat-head{display:flex;align-items:center;gap:7px}.fg-chat-head>b{display:grid;width:22px;height:22px;place-items:center;border-radius:50%;background:#16a36a;color:#fff;font-size:9px}.fg-chat-head p{display:grid}.fg-chat-head strong{font-size:8px}.fg-chat-head small{color:#648174;font-size:6px}.fg-message{margin:9px 0;padding:7px;border-radius:7px 7px 2px;background:#fff;color:#49645a;font-size:6px;line-height:1.5}.fg-chat-total{display:flex;justify-content:space-between;margin-bottom:7px;color:#49645a;font-size:7px}.fg-chat-total span{color:#49645a!important;font-size:7px!important}.fg-chat-total strong{color:#153d2d}.fg-chat-ui button{width:100%;background:#16a36a;font-size:6px}

/* Remove every legacy hero visual; the ZIP dashboard is used at all breakpoints. */
.hero-visual-legacy{display:none!important}@media(max-width:900px){.figma-dashboard{display:block!important;transform:none;max-width:620px;margin-inline:auto}.dashboard-body{grid-template-columns:42px 1fr}.dashboard-main{padding:18px}}@media(max-width:560px){.dashboard-body aside{display:none}.dashboard-body{display:block;min-height:auto}.dashboard-main{padding:14px}.dashboard-heading h3{font-size:16px}.dashboard-stats{gap:6px}.dashboard-stats article{padding:10px}.dashboard-stats strong{font-size:13px}.dashboard-orders>div{padding:9px}.dashboard-orders>div>span{display:none}}

/* Reversed logo for the dark header */
.fg-header-logo{position:relative;display:block;flex:0 0 180px;width:180px;height:42px;overflow:hidden}.fg-header-logo img{position:absolute;left:-34px;top:-52px;width:247px;max-width:none;height:auto}@media(max-width:600px){.fg-header-logo{flex-basis:158px;width:158px;height:38px}.fg-header-logo img{left:-30px;top:-46px;width:217px}}
.fg-footer-logo{margin-bottom:18px}

/* Clean shared shell copied from the ZIP prototype */
.fg-section-head{text-align:center;max-width:700px;margin:0 auto 48px}.fg-section-head h2{margin:12px 0;color:#fff;font-size:clamp(30px,4vw,44px);letter-spacing:-.035em}.fg-section-head p{color:rgba(255,255,255,.55)}.fg-how{background:#1b2240}.fg-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.fg-how-grid article{position:relative;padding:26px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.04)}.fg-how-grid article:hover{border-color:rgba(242,101,34,.42)}.fg-how-grid b{display:block;margin-bottom:18px;color:rgba(242,101,34,.28);font-size:38px;line-height:1}.fg-how-grid h3{margin-bottom:8px;color:#fff;font-size:16px}.fg-how-grid p{color:rgba(255,255,255,.5);font-size:14px;line-height:1.7}.fg-section-action{text-align:center;margin-top:36px}.fg-section-action a{color:rgba(255,255,255,.65);font-size:14px;font-weight:700}.fg-section-action a:hover{color:#fff}.fg-benefits{background:#fff5ee}.fg-benefits-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:76px}.fg-benefits h2{margin:12px 0;font-size:clamp(30px,4vw,44px);letter-spacing:-.035em}.fg-benefits>div>div>p{color:#687084}.fg-benefits ul{display:grid;gap:20px;margin-top:30px}.fg-benefits li{position:relative;display:grid;gap:3px;padding-left:32px}.fg-benefits li::before{content:'✓';position:absolute;left:0;top:1px;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:#f26522;color:#fff;font-size:11px}.fg-benefits li b{font-size:14px}.fg-benefits li span{color:#687084;font-size:13px}.fg-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fg-preview-grid article{display:flex;min-height:190px;flex-direction:column;justify-content:space-between;padding:20px;border-radius:12px;background:#1b2240}.fg-preview-grid article:nth-child(2){background:#0f1a2e}.fg-preview-grid article:nth-child(3){background:#1e293b}.fg-preview-grid article:nth-child(4){background:#064e3b}.fg-preview-grid span{color:rgba(255,255,255,.45);font-size:12px;font-weight:700}.fg-preview-grid i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.1)}.fg-preview-grid i:nth-child(2){width:80%;margin-top:auto}.fg-preview-grid i:nth-child(3){width:60%;margin-top:7px}.fg-preview-grid i:nth-child(4){width:40%;margin-top:7px}@media(max-width:850px){.fg-how-grid{grid-template-columns:1fr 1fr}.fg-benefits-grid{grid-template-columns:1fr;gap:42px}}@media(max-width:560px){.fg-how-grid{grid-template-columns:1fr}.fg-preview-grid article{min-height:150px}}

.fg-container{width:min(100% - 40px,1280px);margin-inline:auto}.fg-header{position:fixed;inset:0 0 auto;z-index:500;background:rgba(27,34,64,.98);border-bottom:1px solid rgba(255,255,255,.08);transition:.25s}.fg-header.scrolled{background:rgba(17,23,47,.99);box-shadow:0 8px 24px rgba(0,0,0,.2)}.fg-nav{display:flex;align-items:center;height:64px;gap:24px}.fg-logo{flex:0 0 auto;color:#fff;font-size:25px;font-weight:800;letter-spacing:-.045em;line-height:1}.fg-logo span{color:#f26522}.fg-nav-links{display:flex;align-items:center;justify-content:center;gap:2px;margin-left:auto}.fg-nav-links a{padding:9px 11px;border-radius:7px;color:rgba(255,255,255,.76);font-size:13px;font-weight:600}.fg-nav-links a:hover,.fg-nav-links a.active{color:#f26522}.fg-header-cta,.fg-mobile-cta{display:inline-flex;justify-content:center;padding:10px 15px;border-radius:7px;background:#f26522;color:#fff;font-size:13px;font-weight:700}.fg-header-cta:hover{background:#d94f12}.fg-menu-toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto}.fg-menu-toggle span{width:22px;height:2px;background:#fff}.fg-mobile-menu{display:none;position:absolute;top:64px;left:0;right:0;padding:12px 20px 20px;background:#1b2240;border-top:1px solid rgba(255,255,255,.08)}.fg-mobile-menu.open{display:grid}.fg-mobile-menu a{padding:12px;color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.07)}.fg-mobile-menu .fg-mobile-cta{margin-top:10px;border:0;color:#fff}.fg-footer{padding:64px 0 22px;background:#111827;color:#fff}.fg-footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:56px}.fg-footer-brand p{max-width:390px;margin-top:18px;color:rgba(255,255,255,.58);font-size:14px;line-height:1.75}.fg-footer nav{display:flex;flex-direction:column;gap:11px}.fg-footer nav strong{margin-bottom:6px;color:rgba(255,255,255,.4);font-size:11px;letter-spacing:.13em;text-transform:uppercase}.fg-footer nav a{color:rgba(255,255,255,.65);font-size:14px}.fg-footer nav a:hover{color:#f26522}.fg-footer-bottom{display:flex;justify-content:space-between;margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.35);font-size:12px}@media(max-width:960px){.fg-nav-links,.fg-header-cta{display:none}.fg-menu-toggle{display:flex}.fg-footer-grid{grid-template-columns:1fr 1fr}.fg-footer-brand{grid-column:1/-1}}@media(max-width:600px){.fg-container{width:min(100% - 32px,1280px)}.fg-footer-grid{grid-template-columns:1fr;gap:30px}.fg-footer-brand{grid-column:auto}.fg-footer-bottom{flex-direction:column;gap:8px}}