/* ============================================================
   ARTOKON — artokon-public.css  v2.0
   Premium public site shared styles.
   Extends artokon.css — do not duplicate base variables.
   Font: Plus Jakarta Sans (loaded in _Layout head)
   ============================================================ */

/* ── Override base font for public pages ─────────────────── */
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background-color: #f7f8fa;
    color: #060c1f;
}
body.art-loading { overflow: hidden; }

/* ── Branded page loader ─────────────────────────────────── */
#artokon-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #eef5ff 0%, #f8fbff 50%, #edf4ff 100%);
    transition: opacity .4s ease, visibility .4s ease;
}
#artokon-loader.art-loader-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.art-loader-inner { text-align: center; }
.art-loader-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    animation: art-loader-pop .7s cubic-bezier(.34,1.56,.64,1) both;
}
.art-loader-wordmark {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.03em;
    animation: art-loader-reveal .6s ease .2s both;
}
.art-loader-wordmark .ar { color: #1d4ed8; }
.art-loader-wordmark .rest { color: #060c1f; }
.art-loader-tagline {
    font-size: 13px;
    color: #64748b;
    margin-top: 8px;
    animation: art-loader-reveal .6s ease .35s both;
}
.art-loader-qr {
    width: 48px;
    height: 48px;
    margin: 24px auto 0;
    border: 3px solid #1d4ed8;
    border-radius: 10px;
    position: relative;
    animation: art-loader-qr .9s ease .5s infinite alternate;
}
.art-loader-qr::before,
.art-loader-qr::after {
    content: '';
    position: absolute;
    background: #1d4ed8;
    border-radius: 2px;
}
.art-loader-qr::before { width: 12px; height: 12px; top: 6px; left: 6px; }
.art-loader-qr::after { width: 8px; height: 8px; bottom: 6px; right: 6px; }
@keyframes art-loader-pop {
    from { opacity: 0; transform: scale(.6) rotate(-8deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes art-loader-reveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes art-loader-qr {
    from { transform: scale(1); box-shadow: 0 0 0 rgba(29,78,216,0); }
    to   { transform: scale(1.05); box-shadow: 0 0 20px rgba(29,78,216,.25); }
}

/* ── Design tokens (extend root) ─────────────────────────── */
:root {
    --pub-blue: #1d4ed8;
    --pub-blue2: #2563eb;
    --pub-cyan: #0ea5e9;
    --pub-dark: #060c1f;
    --pub-slate: #334155;
    --pub-muted: #64748b;
    --pub-faint: #94a3b8;
    --pub-border: #e2e8f0;
    --pub-surface: #f7f8fa;
    --pub-green: #22c55e;
    --pub-red: #ef4444;
    --pub-amber: #f59e0b;
    --pub-radius-sm: 8px;
    --pub-radius: 12px;
    --pub-radius-md: 16px;
    --pub-radius-lg: 20px;
    --pub-radius-xl: 28px;
    --pub-radius-full: 99px;
    --pub-shadow: 0 4px 16px rgba(6,12,31,.07);
    --pub-shadow-md: 0 8px 28px rgba(6,12,31,.10);
    --pub-shadow-lg: 0 16px 48px rgba(6,12,31,.13);
    --pub-shadow-blue: 0 4px 20px rgba(29,78,216,.25);
    --pub-surface-alt: #f1f3f6;
    --pub-gold: #c9a962;
    --pub-gold-light: #e8d5a3;
    --pub-gold-muted: rgba(201, 169, 98, 0.14);
    --pub-premium-bg: linear-gradient(165deg, #060c1f 0%, #0b1220 44%, #111827 100%);
    --pub-premium-mesh:
        radial-gradient(ellipse 72% 52% at 12% -8%, rgba(201, 169, 98, 0.11), transparent 54%),
        radial-gradient(ellipse 48% 42% at 92% 108%, rgba(148, 163, 184, 0.07), transparent 50%);
    --pub-premium-band: var(--pub-premium-bg);
    --pub-premium-band-alt: var(--pub-surface-alt);
    --pub-premium-cta: var(--pub-premium-bg);
    --pub-surface-grid: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
    --pub-surface-grid-light: radial-gradient(rgba(15,23,42,.04) 1px, transparent 1px);
    --pub-surface-hairline: inset 0 1px 0 rgba(255,255,255,.05);
    --pub-surface-hairline-light: inset 0 1px 0 rgba(0,0,0,.04);
    --pub-transition: all .2s cubic-bezier(.4,0,.2,1);
    --pub-nav-h: 62px;
}

/* Offset page content below fixed navbar */
.pub-site {
    padding-top: var(--pub-nav-h);
}

/* Seamless footer — no white gap from Bootstrap mt-5 */
.pub-site .pub-footer {
    margin-top: 0;
}

.pub-site main {
    padding-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   LOGO COMPONENT
   Used via _LogoMark partial → consistent everywhere
═══════════════════════════════════════════════════════════ */
.artokon-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.artokon-logo-img {
    flex-shrink: 0;
    display: block;
}

.artokon-logo-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
}

.artokon-logo-wordmark {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1;
}

    .artokon-logo-wordmark .ar {
        color: #1d4ed8;
    }

    .artokon-logo-wordmark .rest {
        color: #060c1f;
    }

.artokon-logo-tagline {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════ */
.pub-navbar {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #e8f0ff;
    min-height: var(--pub-nav-h);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    transition: var(--pub-transition);
}

    .pub-navbar.scrolled {
        box-shadow: 0 2px 16px rgba(6,12,31,.07);
    }

    .pub-navbar .nav-link {
        font-size: 14px;
        font-weight: 600;
        color: var(--pub-slate) !important;
        padding: 6px 14px !important;
        border-radius: var(--pub-radius-sm);
        transition: var(--pub-transition);
    }

        .pub-navbar .nav-link:hover {
            color: var(--pub-blue) !important;
            background: #eff6ff;
        }

        .pub-navbar .nav-link.active {
            color: var(--pub-blue) !important;
            background: #eff6ff;
        }

        .pub-navbar .pub-nav-cta.active,
        .pub-navbar .pub-nav-cta.active:hover {
            color: #fff !important;
            background: linear-gradient(135deg, #1e40af, #1d4ed8) !important;
        }

        .pub-navbar .pub-nav-cta.active *,
        .pub-navbar .pub-nav-cta.active:hover * {
            color: #fff !important;
        }

.pub-nav-cta {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: var(--pub-radius) !important;
    padding: 8px 18px !important;
    box-shadow: var(--pub-shadow-blue);
    transition: var(--pub-transition);
}

    .pub-nav-cta:hover {
        background: linear-gradient(135deg, #1e40af, #1d4ed8) !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 24px rgba(29,78,216,.35) !important;
    }

.pub-navbar .pub-nav-cta,
.pub-navbar .pub-nav-cta *,
.pub-navbar .pub-nav-cta:hover,
.pub-navbar .pub-nav-cta:hover * {
    color: #fff !important;
}

.pub-navbar .container {
    max-width: 1280px;
    padding-left: 20px;
    padding-right: 20px;
}

html {
    overflow-x: clip;
}

body {
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.pub-footer {
    background: #060c1f;
}
    /* Column headings */
    .pub-footer .ft-col-h {
        font-size: 11px;
        font-weight: 700;
        color: #f1f5f9 !important;
        letter-spacing: .07em;
        text-transform: uppercase;
        margin-bottom: 14px;
    }
    /* All text */
    .pub-footer,
    .pub-footer p,
    .pub-footer small,
    .pub-footer li,
    .pub-footer span:not(.ar):not(.rest) {
        color: #94a3b8;
    }
        /* Links */
        .pub-footer a {
            color: #94a3b8 !important;
            text-decoration: none;
            transition: color .15s;
        }

            .pub-footer a:hover {
                color: #e2e8f0 !important;
            }
        /* Divider */
        .pub-footer hr {
            border-color: rgba(255, 255, 255, .07) !important;
        }
        /* Footer logo wordmark */
        .pub-footer .ar {
            color: #60a5fa !important;
        }

        .pub-footer .rest {
            color: #e2e8f0 !important;
        }
        /* Tags */
        .pub-footer .ft-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: var(--pub-radius-full);
            padding: 4px 12px;
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8 !important;
        }
        /* Copyright row */
        .pub-footer .ft-copy {
            color: #475569 !important;
            font-size: 12px;
        }

/* ═══════════════════════════════════════════════════════════
   DARK / LIGHT SURFACES
═══════════════════════════════════════════════════════════ */
.pub-surface-dark {
    position: relative;
    overflow: hidden;
    box-shadow: var(--pub-surface-hairline);
    color: #e2e8f0;
}

    .pub-surface-dark::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--pub-premium-mesh);
        pointer-events: none;
        z-index: 0;
    }

    .pub-surface-dark::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: var(--pub-surface-grid);
        background-size: 28px 28px;
        pointer-events: none;
        z-index: 0;
    }

    .pub-surface-dark > .container,
    .pub-surface-dark > .pub-cta-inner,
    .pub-surface-dark .pub-surface-content {
        position: relative;
        z-index: 1;
    }

.pub-surface-light {
    position: relative;
    overflow: hidden;
    box-shadow: var(--pub-surface-hairline-light);
}

    .pub-surface-light::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: var(--pub-surface-grid-light);
        background-size: 32px 32px;
        pointer-events: none;
        z-index: 0;
    }

    .pub-surface-light > .container {
        position: relative;
        z-index: 1;
    }

.pub-surface-hero {
    background: var(--pub-premium-bg);
}

.pub-surface-band {
    background: var(--pub-premium-band);
}

.pub-surface-band-alt {
    background: var(--pub-premium-band-alt);
}

.pub-surface-cta {
    background: var(--pub-premium-cta);
    box-shadow: var(--pub-surface-hairline);
}

.pub-surface-footer {
    background: #060c1f;
}

/* ═══════════════════════════════════════════════════════════
   SHARED PAGE HERO (dark — Features, Pricing, Contact)
═══════════════════════════════════════════════════════════ */
.pub-page-hero {
    background: var(--pub-premium-bg);
    padding: 76px 0 84px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

    .pub-page-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--pub-premium-mesh);
        pointer-events: none;
    }

.pub-page-hero-grid {
    position: absolute;
    inset: 0;
    background-image: var(--pub-surface-grid);
    background-size: 28px 28px;
    pointer-events: none;
}

.pub-page-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 280px;
    background: radial-gradient(ellipse, rgba(201,169,98,.09), transparent 70%);
    pointer-events: none;
}

.pub-page-hero .hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pub-gold-muted);
    border: 1px solid rgba(201, 169, 98, 0.28);
    border-radius: var(--pub-radius-full);
    padding: 5px 16px;
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--pub-gold-light);
    letter-spacing: .08em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.pub-page-hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.pub-page-hero .hero-sub {
    font-size: 15px;
    color: #94a3b8;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.72;
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   SHARED UTILITY
═══════════════════════════════════════════════════════════ */

/* Section labels */
.pub-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--pub-radius-full);
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    margin-bottom: 12px;
}

.pub-pill-dark {
    background: var(--pub-gold-muted);
    border: 1px solid rgba(201, 169, 98, 0.28);
    color: var(--pub-gold-light);
}

/* Section headings */
.pub-h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    font-weight: 900;
    color: var(--pub-dark);
    letter-spacing: -.025em;
    line-height: 1.18;
    margin-bottom: 10px;
}

.pub-h2-white {
    color: #fff;
}

.pub-sub {
    font-size: 15px;
    color: var(--pub-muted);
    line-height: 1.65;
}

.pub-sub-dark {
    color: #94a3b8;
}

/* Gradient text */
.pub-grad-text {
    background: linear-gradient(90deg, #1d4ed8, #2563eb, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Buttons */
.pub-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: var(--pub-radius);
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    box-shadow: var(--pub-shadow-blue);
    transition: var(--pub-transition);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

    .pub-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(29,78,216,.38);
    }

.pub-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1d4ed8 !important;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: var(--pub-radius);
    text-decoration: none !important;
    border: 1.5px solid #bfdbfe;
    cursor: pointer;
    transition: var(--pub-transition);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

    .pub-btn-ghost:hover {
        background: #eff6ff;
        border-color: #93c5fd;
    }

.pub-btn-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1d4ed8 !important;
    font-weight: 800;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: var(--pub-radius);
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.14);
    transition: var(--pub-transition);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

    .pub-btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(0,0,0,.2);
    }

.pub-btn-white-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: var(--pub-radius);
    text-decoration: none !important;
    border: 1.5px solid rgba(255,255,255,.25);
    cursor: pointer;
    transition: var(--pub-transition);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

    .pub-btn-white-outline:hover {
        background: rgba(255,255,255,.2);
        color: #fff !important;
    }

/* Cards */
.pub-card {
    background: #fff;
    border: .5px solid var(--pub-border);
    border-radius: var(--pub-radius-lg);
    padding: 28px 24px;
    transition: var(--pub-transition);
}

    .pub-card:hover {
        border-color: #bfdbfe;
        box-shadow: var(--pub-shadow-md);
        transform: translateY(-3px);
    }

/* CTA section — premium dark (not bright blue) */
.pub-cta {
    background: var(--pub-premium-bg);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.05);
}

    .pub-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--pub-premium-mesh);
        pointer-events: none;
    }

.pub-cta-blob1 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: rgba(201, 169, 98, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.pub-cta-blob2 {
    position: absolute;
    bottom: -70px;
    left: -40px;
    width: 240px;
    height: 240px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    pointer-events: none;
}

.pub-cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.pub-cta h2 {
    font-size: clamp(1.7rem, 3.8vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.pub-cta p {
    font-size: 15px;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 28px;
    line-height: 1.65;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.pub-cta .pub-btn-white {
    color: #060c1f !important;
}

.pub-cta .pub-btn-white:hover {
    color: #060c1f !important;
}

.pub-cta .pub-btn-white-outline {
    border-color: rgba(201, 169, 98, 0.35);
    background: rgba(201, 169, 98, 0.08);
    color: #fff !important;
}

    .pub-cta .pub-btn-white-outline:hover {
        background: rgba(201, 169, 98, 0.14);
        border-color: rgba(201, 169, 98, 0.5);
        color: #fff !important;
    }

/* Good / Bad item rows */
.pub-good {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: .5px solid #bbf7d0;
    border-radius: var(--pub-radius);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.pub-bad {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff5f5;
    border: .5px solid #fecaca;
    border-radius: var(--pub-radius);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.pub-chk-circle {
    width: 20px;
    height: 20px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 10px;
    color: #fff;
    font-weight: 900;
}

.pub-x {
    color: #ef4444;
    font-size: 16px;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Sections */
.pub-sec {
    padding: 80px 0;
    background: #fff;
}

.pub-sec-alt {
    padding: 80px 0;
    background: var(--pub-surface-alt);
}

.pub-sec-dark {
    padding: 80px 0;
    background: var(--pub-premium-bg);
}

/* ═══════════════════════════════════════════════════════════
   PRICING PAGE
═══════════════════════════════════════════════════════════ */
.pricing-card {
    background: #fff;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-xl);
    padding: 36px 28px;
    position: relative;
    transition: var(--pub-transition);
    height: 100%;
}

    .pricing-card:hover {
        box-shadow: var(--pub-shadow-md);
        transform: translateY(-4px);
    }

    .pricing-card.featured {
        background: linear-gradient(145deg, #1d4ed8, #2563eb);
        border-color: transparent;
        box-shadow: 0 12px 40px rgba(29,78,216,.35);
        transform: scale(1.03);
    }

        .pricing-card.featured:hover {
            transform: scale(1.03) translateY(-4px);
        }

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 16px;
    border-radius: var(--pub-radius-full);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(245,158,11,.35);
    letter-spacing: .03em;
}

.pricing-plan-name {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 4px;
}

.pricing-price {
    font-size: 46px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 16px 0 4px;
}

.pricing-period {
    font-size: 14px;
    font-weight: 500;
    opacity: .7;
}

.pricing-desc {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 24px;
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

    .pricing-feature:last-child {
        border-bottom: none;
    }

.pricing-card.featured .pricing-feature {
    border-bottom-color: rgba(255,255,255,.1);
}

.pricing-feature .chk {
    color: #22c55e;
    font-size: 14px;
    flex-shrink: 0;
}

.pricing-feature .x {
    color: #94a3b8;
    font-size: 14px;
    flex-shrink: 0;
}

.pricing-card.featured .pricing-feature .chk {
    color: #86efac;
}

.pricing-card.featured .pricing-feature .x {
    color: rgba(255,255,255,.4);
}

.pricing-faq-item {
    border: .5px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 18px 20px;
    margin-bottom: 10px;
    background: #fff;
}

.pricing-faq-q {
    font-size: 14px;
    font-weight: 700;
    color: var(--pub-dark);
    margin-bottom: 6px;
}

.pricing-faq-a {
    font-size: 13px;
    color: var(--pub-muted);
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════════ */
.contact-form-card {
    background: #fff;
    border: .5px solid var(--pub-border);
    border-radius: var(--pub-radius-xl);
    padding: 36px 32px;
    box-shadow: var(--pub-shadow);
}

.contact-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pub-slate);
    margin-bottom: 6px;
    display: block;
}

.contact-input {
    width: 100%;
    border: 1.5px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 12px 16px;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--pub-dark);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

    .contact-input:focus {
        border-color: #1d4ed8;
        box-shadow: 0 0 0 3px rgba(29,78,216,.12);
    }

    .contact-input::placeholder {
        color: #94a3b8;
    }

.contact-input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

.contact-info-card {
    background: linear-gradient(135deg, #f0f6ff, #fafcff);
    border: .5px solid #dbeafe;
    border-radius: var(--pub-radius-xl);
    padding: 28px 24px;
}

.contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e0eaff;
}

    .contact-info-row:last-child {
        border-bottom: none;
    }

.contact-info-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    border-radius: var(--pub-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(29,78,216,.2);
}

.contact-info-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--pub-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 3px;
}

.contact-info-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--pub-dark);
}

.contact-info-sub {
    font-size: 12px;
    color: var(--pub-muted);
}

.contact-demo-box {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
    border-radius: var(--pub-radius-lg);
    padding: 24px 22px;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--pub-shadow-blue);
}

    .contact-demo-box::before {
        content: '';
        position: absolute;
        top: -30px;
        right: -30px;
        width: 120px;
        height: 120px;
        background: rgba(255,255,255,.06);
        border-radius: 50%;
    }

/* ═══════════════════════════════════════════════════════════
   ERROR PAGE
═══════════════════════════════════════════════════════════ */
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.error-icon-wrap {
    width: 88px;
    height: 88px;
    background: linear-gradient(135deg, #fef2f2, #fce7f3);
    border: 1px solid #fecaca;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 40px;
}

.error-code {
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 900;
    letter-spacing: -.06em;
    line-height: 1;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .pub-sec, .pub-sec-alt, .pub-sec-dark, .pub-cta {
        padding: 60px 0;
    }

    .pub-page-hero {
        padding: 56px 0 64px;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

        .pricing-card.featured:hover {
            transform: translateY(-4px);
        }

    .contact-form-card {
        padding: 28px 22px;
    }

    .pub-navbar {
        align-items: flex-start;
        padding-top: 10px;
        padding-bottom: 10px;
    }

        .pub-navbar .container {
            align-items: flex-start;
            flex-wrap: wrap;
        }

    #navMain {
        width: 100%;
    }
}

@media (max-width: 575px) {
    :root {
        --pub-nav-h: 70px;
    }

    .artokon-logo-tagline {
        display: block;
        line-height: 1.2;
        opacity: 1;
        visibility: visible;
    }

    .pub-navbar {
        min-height: var(--pub-nav-h);
    }

    .pub-btn-primary,
    .pub-btn-ghost,
    .pub-btn-white,
    .pub-btn-white-outline {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .pub-sec, .pub-sec-alt, .pub-sec-dark, .pub-cta {
        padding: 52px 0;
    }

    .pub-page-hero {
        padding: 48px 0 56px;
    }

        .pub-page-hero h1 {
            font-size: 1.8rem;
        }

    .pub-h2 {
        font-size: 1.5rem;
    }

    .pricing-card {
        padding: 28px 20px;
    }

    .contact-form-card {
        padding: 22px 18px;
    }

    .contact-info-card {
        padding: 20px 18px;
    }
}

/* ═══════════════════════════════════════════════════════════
   HOME PAGE — v2.0 dark / light bands
═══════════════════════════════════════════════════════════ */
.art-tagband,
.art-steps-section,
.art-cta-section {
    background: var(--pub-premium-bg);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.05);
    color: #e2e8f0;
}

.art-price-strip {
    background: linear-gradient(90deg, #060c1f 0%, #0f2044 50%, #060c1f 100%);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
}

.art-tagband::before,
.art-steps-section::before,
.art-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pub-premium-mesh);
    pointer-events: none;
    z-index: 0;
}

.art-tagband::after,
.art-steps-section::after,
.art-cta-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pub-surface-grid);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.art-tagband > .container,
.art-steps-section > .container,
.art-price-strip > .container,
.art-cta-section > .container {
    position: relative;
    z-index: 1;
}