/* ==========================================================================
   CreaNext brand refresh: colours and type taken from the logo.
   Loaded last on public pages, so it overrides style.css and page CSS.
   ========================================================================== */
:root,
[data-theme="dark"] {
    --ink: #06263D;
    --ink-deep: #041A2B;
    --ink-raised: #0C3350;
    --cream: #FBEFDF;
    --paper: #FFF8EE;
    --saffron: #FF6A26;
    --saffron-deep: #B53D08;
    --marigold: #FFB627;
    --kumkum: #B3202A;
    --font-display: 'Rozha One', Georgia, serif;

    --bg-color: var(--ink);
    --bg-gradient: none;
    --card-bg: var(--ink-raised);
    --card-border: rgba(251, 239, 223, 0.14);
    --text-main: var(--cream);
    --text-muted: #BCC8D1;
    --accent-color: var(--saffron);
    --accent-glow: rgba(255, 106, 38, 0.4);
    --highlight-color: var(--marigold);
    --font-main: 'Anek Latin', system-ui, sans-serif;
    --glass-bg: var(--ink);
    --glass-border: 1px solid rgba(251, 239, 223, 0.14);

    --chat-accent: #FF6A26 !important;
    --chat-user-msg: #C2440C !important;
}

[data-theme="light"] {
    --bg-color: var(--cream);
    --bg-gradient: none;
    --card-bg: var(--paper);
    --card-border: rgba(6, 38, 61, 0.14);
    --text-main: var(--ink);
    --text-muted: #4C5C69;
    --accent-color: var(--saffron-deep);
    --glass-bg: var(--paper);
    --glass-border: 1px solid rgba(6, 38, 61, 0.14);
}

body {
    font-family: var(--font-main) !important;
    font-size: 1.0625rem;
}

h1, h2 {
    font-family: var(--font-display);
    font-weight: 400 !important;
    letter-spacing: 0;
}

:focus-visible {
    outline: 2px solid var(--marigold);
    outline-offset: 3px;
}

/* The custom cursor slowed the page and hid the real pointer. */
.cursor,
.cursor-follower { display: none !important; }

/* Header ---------------------------------------------------------------- */
header,
header.scrolled,
[data-theme="light"] header.scrolled {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid rgba(251, 239, 223, 0.14);
}

header .logo { color: var(--cream); font-weight: 700; letter-spacing: -0.01em; }
header .logo span { color: var(--cream); }
header .logo::before {
    content: '';
    width: 43px;
    height: 28px;
    margin-right: 10px;
    background: no-repeat center / contain url("../images/logo-mark.png?v=20261108");
}

header nav a { color: #D3DCE3; }
header nav a:hover,
header nav a.active { color: var(--cream); }
header nav a::after { background-color: var(--saffron); box-shadow: none; }
.mobile-menu-btn span,
[data-theme="light"] .mobile-menu-btn span { background: var(--cream); }

@media (max-width: 1180px) {
    header nav,
    [data-theme="light"] header nav { background: var(--ink); }
    [data-theme="light"] header nav a { border-bottom-color: rgba(251, 239, 223, 0.14); }
}

header nav .nav-cta a { border-radius: 6px; background: var(--saffron); color: var(--ink-deep); box-shadow: none; }

/* Buttons ---------------------------------------------------------------- */
.btn { border-radius: 6px; font-weight: 600; font-size: 1rem; }

.btn-primary {
    background: var(--saffron);
    color: var(--ink-deep);
    box-shadow: none;
}
.btn-primary:hover {
    background: var(--marigold);
    box-shadow: none;
    transform: none;
}
.btn-secondary {
    background: transparent;
    border: 1px solid rgba(251, 239, 223, 0.4);
    color: var(--text-main);
}
.btn-secondary:hover { background: rgba(251, 239, 223, 0.1); border-color: var(--cream); }
[data-theme="light"] .btn-secondary { border-color: rgba(6, 38, 61, 0.4); }
[data-theme="light"] .btn-secondary:hover { background: rgba(6, 38, 61, 0.07); border-color: var(--ink); }

/* Cards and shared blocks ------------------------------------------------- */
.card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 8px;
    transition: border-color 0.2s, background 0.2s;
}
.card::before { display: none; }
.card:hover { transform: none; box-shadow: none; border-color: var(--saffron); }
.card i { background: rgba(255, 106, 38, 0.14); }

.pricing-card { border-radius: 8px; }
.pricing-card.popular { background: var(--card-bg); }

.page-header { background: none; }
.page-header h1,
.section-title {
    background: none;
    color: var(--text-main);
    -webkit-text-fill-color: currentColor;
}

.upload-zone:hover { background: rgba(255, 106, 38, 0.08); }

::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb { background: var(--ink-raised); }

/* Footer ------------------------------------------------------------------ */
footer,
[data-theme="light"] footer { background-color: var(--ink-deep); border-top: 0; }
footer .footer-col h4,
footer .copyright { color: var(--cream); }
footer p, footer .footer-col a { color: #BCC8D1; }
footer .footer-col a:hover { color: var(--marigold); padding-left: 0; }
footer .social-links a { background: rgba(251, 239, 223, 0.08); color: var(--cream); }
footer .social-links a:hover { background: var(--saffron); color: var(--ink-deep); transform: none; }
footer .copyright { border-top-color: rgba(251, 239, 223, 0.12); }

/* Support chat ------------------------------------------------------------ */
.chat-widget-btn,
.chat-send-btn,
.new-chat-btn,
.fb-submit { background: var(--saffron) !important; color: #041A2B !important; }
.chat-avatar { background: var(--saffron-deep) !important; }
.mode-tab.active { color: var(--saffron) !important; }
.quick-reply-btn:hover { border-color: var(--saffron) !important; }

/* Usability ---------------------------------------------------------------- */
html {
    overflow-x: clip;
    scroll-padding-top: calc(var(--header-height) + 16px);
}
body { overflow-x: clip; --sh-text-3: #BCC8D1; }

/* Scroll reveals were slow enough to feel like lag. */
.fade-in { transform: translateY(14px); transition-duration: 0.45s; }

/* Dark text on orange: white failed the readability threshold. */
.btn-primary,
.nav-cta a,
.sv-filter-btn.active,
.sv-featured-badge,
.sv-step-num,
.sv-testimonial-avatar,
.pr-badge,
.pr-card-cta.primary,
.pr-toggle-btn.active,
.pf-loc-tag,
.card-cta,
.card-cta h3,
.card-cta .arrow,
.sh-cart-count,
.ai-how-num,
.step-item.active .step-circle,
.step-item.done .step-circle,
.wz-btn-next,
.btn-label,
button:has(> .btn-label) { color: #041A2B !important; }
.chat-badge { background: #C81E1E !important; color: #fff !important; }

/* Small labels stay readable on phones. */
.sv-tag, .sv-stat-label, .sv-hero-badge, .sv-featured-badge, .sv-testimonial-role,
.pf-hero-label, .pf-hero-trust-item, .pf-loc, .pf-loc-label, .pf-loc-tag, .pf-project span,
.pr-filter, .pr-badge, .ai-stat-label, .ai-status, .ai-tag, .intro-label, .stat-text,
.step-label, .service-desc, .contact-badge, .sidebar-heading, .info-label,
.join-badge, .trust-item, .section-label, .upload-hint, .sh-gateway-tag, .sh-card-desc-txt,
.pf-ribbon-item, .pf-proj-client, .pf-proj-link, .pf-proj-url, .pf-bar-lbl, .pf-s-label, .pf-filter-btn,
.card-stat .label, .team-header .tag, .photo .number, .photo .flip-hint {
    font-size: 13px !important;
}

/* Decorative orbs pushed the Platforms page wider than the phone screen. */
.floating-orb { display: none !important; }

@media (max-width: 1180px) {
    /* Keeps the main action one tap away instead of inside the menu. */
    header .header-buttons { display: flex !important; order: 1; margin-left: auto; margin-right: 16px; }
    header .header-buttons .btn { display: inline-flex !important; padding: 0.55rem 0.9rem; font-size: 0.9375rem; min-height: 44px; white-space: nowrap; }
    header .mobile-menu-btn { order: 2; }
    header nav .nav-cta { display: none; }

    .mobile-menu-btn::before { content: ''; position: absolute; inset: -14px -10px; }
    header .logo { min-height: 44px; }
}

@media (max-width: 768px) {
    :root { --header-height: 64px; }

    /* 16px stops iPhones zooming the page when a field is tapped. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea { font-size: 16px !important; }

    .sv-filter-btn, .pf-filter-btn, .pr-toggle-btn, .pr-filter,
    .topic-chip, .role-chip { min-height: 44px; display: inline-flex; align-items: center; }

    .sv-card-link, .pf-proj-link, .pf-proj-url { display: inline-flex; align-items: center; min-height: 44px; }

    footer .footer-col ul li { margin-bottom: 0; }
    footer .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
    footer .social-links a { min-width: 44px; min-height: 44px; justify-content: center; }
}

@media (max-width: 359px) {
    header .header-buttons { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fade-in { opacity: 1; transform: none; }
}