/*!
 |------------------------------------------------------------------
 | base.css — ZodiacTech CRM "Results-as-a-Service" landing design system.
 |------------------------------------------------------------------
 |
 | Plain hand-written CSS, loaded ONLY by marketing/raas-layout.blade.php.
 | No framework, no build step.  Every section partial under
 | resources/views/marketing/raas/ builds on the tokens + primitives here.
 |
 | Palette source: the ZodiacTech CRM app icon (deep navy field, vivid
 | blue Z, green growth arrow).  Premium + confident: generous
 | whitespace, restrained motion, no glow/gradient excess.
 |
 | Tokens    --z-* custom properties, defined once on :root.
 | Type      fluid clamp() scale: display/h1/h2/h3/lead/eyebrow/body/small.
 | Layout    .raas-container (max 1200px) + .raas-section rhythm.
 | Buttons   .raas-btn with --primary / --ghost / --light modifiers.
 | Motion    .raas-reveal + .is-visible (JS adds html.raas-js first, so a
 |           no-JS or failed-load paint never hides content).
 */

/* ---------- Design tokens ---------- */
:root {
    --z-navy: #0A1E46;
    --z-navy-2: #0E2A5C;
    --z-blue: #1F6FFF;
    --z-blue-soft: #5FA8FF;
    --z-green: #2BD576;
    --z-ink: #0F172A;
    --z-muted: #5B6B85;
    --z-paper: #F6F8FC;
    --z-line: #E3E9F4;

    /* Derived / interaction states */
    --z-white: #FFFFFF;
    --z-blue-dark: #0F5CE8;
    --z-navy-soft: #B9C9E6;
    --z-navy-ink: #EAF1FF;

    /* Radii + elevation */
    --z-radius-sm: 10px;
    --z-radius: 14px;
    --z-radius-lg: 22px;
    --z-shadow-card: 0 1px 2px rgba(10, 30, 70, .05), 0 10px 30px rgba(10, 30, 70, .08);
    --z-shadow-header: 0 6px 24px rgba(10, 30, 70, .08);

    /* Typography */
    --z-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Fluid type scale — clamp(min, preferred, max). */
    --z-fs-display: clamp(2.5rem, 1.55rem + 4.7vw, 4.5rem);
    --z-fs-h1: clamp(2.125rem, 1.45rem + 3.4vw, 3.5rem);
    --z-fs-h2: clamp(1.625rem, 1.25rem + 1.9vw, 2.625rem);
    --z-fs-h3: clamp(1.1875rem, 1.06rem + .65vw, 1.5rem);
    --z-fs-lead: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
    --z-fs-eyebrow: .8125rem;
    --z-fs-body: 1rem;
    --z-fs-small: .875rem;

    /* Section rhythm */
    --z-space-section: clamp(4rem, 2.9rem + 5.5vw, 7.5rem);
}

/* ---------- Body base ---------- */
body.raas {
    margin: 0;
    font-family: var(--z-font);
    font-size: var(--z-fs-body);
    line-height: 1.6;
    color: var(--z-ink);
    background: var(--z-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.raas *,
.raas *::before,
.raas *::after {
    box-sizing: border-box;
}

/* ---------- Headings + text defaults ---------- */
.raas h1,
.raas h2,
.raas h3,
.raas h4 {
    margin: 0 0 .75rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: inherit;
    text-wrap: balance;
}

.raas h1 { font-size: var(--z-fs-h1); }
.raas h2 { font-size: var(--z-fs-h2); }
.raas h3 { font-size: var(--z-fs-h3); font-weight: 600; letter-spacing: -.01em; }

.raas p { margin: 0 0 1rem; }
.raas p:last-child { margin-bottom: 0; }

.raas a { color: var(--z-blue); }

.raas-section--hero h1 {
    font-size: var(--z-fs-display);
    letter-spacing: -.03em;
    max-width: 18ch;
}

.raas-lead {
    font-size: var(--z-fs-lead);
    line-height: 1.55;
    color: var(--z-muted);
    max-width: 62ch;
}

.raas-small {
    font-size: var(--z-fs-small);
    color: var(--z-muted);
}

/* ---------- Container ---------- */
.raas-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 375px)  { .raas-container { padding-inline: 20px; } }
@media (min-width: 768px)  { .raas-container { padding-inline: 24px; } }
@media (min-width: 1024px) { .raas-container { padding-inline: 32px; } }

/* ---------- Section rhythm + backgrounds ---------- */
.raas-section {
    padding-block: var(--z-space-section);
    background: var(--z-white);
}

.raas-section--paper { background: var(--z-paper); }

.raas-section--navy {
    background: var(--z-navy);
    color: var(--z-navy-ink);
}

.raas-section--navy h1,
.raas-section--navy h2,
.raas-section--navy h3 { color: #FFFFFF; }

.raas-section--navy .raas-lead,
.raas-section--navy .raas-small { color: var(--z-navy-soft); }

.raas-section--navy a { color: var(--z-blue-soft); }

.raas-section--hero {
    padding-block: clamp(3.5rem, 2.4rem + 5.5vw, 7rem) clamp(4rem, 2.9rem + 5.5vw, 7.5rem);
}

/* ---------- Eyebrow ---------- */
.raas-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: var(--z-fs-eyebrow);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-blue);
}

.raas-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--z-green);
}

.raas-section--navy .raas-eyebrow { color: var(--z-blue-soft); }

/* ---------- Buttons ---------- */
.raas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8125rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.raas-btn:active { transform: translateY(1px); }

.raas-btn--primary { background: var(--z-blue); color: #FFFFFF; }
.raas-btn--primary:hover { background: var(--z-blue-dark); }

.raas-btn--ghost { background: transparent; border-color: var(--z-line); color: var(--z-ink); }
.raas-btn--ghost:hover { border-color: var(--z-blue); color: var(--z-blue); }

.raas-btn--light { background: #FFFFFF; color: var(--z-navy); }
.raas-btn--light:hover { background: var(--z-navy-ink); }

.raas-section--navy .raas-btn--ghost { border-color: rgba(255, 255, 255, .35); color: #FFFFFF; }
.raas-section--navy .raas-btn--ghost:hover { border-color: #FFFFFF; }

/* ---------- Reveal-on-scroll (JS adds html.raas-js) ---------- */
.raas-js .raas-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.raas-js .raas-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .raas-js .raas-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .raas-btn { transition: none; }
}

/* ---------- Screen-reader only ---------- */
.raas-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Focus visibility ---------- */
.raas :focus-visible {
    outline: 3px solid var(--z-blue-soft);
    outline-offset: 2px;
    border-radius: 4px;
}

.raas :focus:not(:focus-visible) { outline: none; }

.raas-section--navy :focus-visible { outline-color: #FFFFFF; }

/* ---------- Table base (comparison tables etc.) ---------- */
.raas-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.raas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    text-align: left;
}

.raas-table caption {
    margin-bottom: .75rem;
    font-size: var(--z-fs-small);
    color: var(--z-muted);
    text-align: left;
}

.raas-table th,
.raas-table td {
    padding: .875rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid var(--z-line);
}

.raas-table thead th {
    background: var(--z-paper);
    font-weight: 600;
    color: var(--z-ink);
}

/* ---------- Language bar + switcher ----------
   The switcher markup lives in raas-layout.blade.php (copied from the
   shared marketing layout).  These styles keep it functional here because
   the shared layout.css is not loaded on raas pages. */
.raas-langbar {
    background: var(--z-paper);
    border-bottom: 1px solid var(--z-line);
    font-size: var(--z-fs-small);
}

.raas-langbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 40px;
}

.raas-langbar .lang-switch { position: relative; }

.raas-langbar .lang-switch > button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    background: none;
    border: 0;
    font: inherit;
    color: var(--z-muted);
    cursor: pointer;
}

.raas-langbar .lang-switch > button:hover { color: var(--z-ink); }

.raas-langbar .lang-switch .menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 170px;
    padding: .375rem;
    background: #FFFFFF;
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    box-shadow: var(--z-shadow-card);
    display: none;
    z-index: 60;
}

.raas-langbar .lang-switch:hover .menu,
.raas-langbar .lang-switch:focus-within .menu { display: block; }

.raas-langbar .lang-switch .menu a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    border-radius: 8px;
    color: var(--z-ink);
    text-decoration: none;
}

.raas-langbar .lang-switch .menu a:hover,
.raas-langbar .lang-switch .menu a.active { background: var(--z-paper); color: var(--z-blue); }

/* ---------- Header / nav scaffold ----------
   Minimal so the shared nav-toggle JS contract works out of the box;
   the header unit owns the final header design on top of this. */
.raas-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--z-white);
    border-bottom: 1px solid transparent;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.raas-header.is-scrolled {
    border-bottom-color: var(--z-line);
    box-shadow: var(--z-shadow-header);
}

.raas-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 68px;
}

.raas-brand {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--z-ink);
    text-decoration: none;
}

.raas-brand a { color: inherit; text-decoration: none; }

.raas-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.raas-nav a {
    color: var(--z-ink);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
}

.raas-nav a:hover { color: var(--z-blue); }

.raas-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 9px;
    background: none;
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    cursor: pointer;
}

.raas-nav-toggle span {
    display: block;
    height: 2px;
    background: var(--z-ink);
    border-radius: 2px;
}

@media (max-width: 767px) {
    .raas-header-inner { position: relative; }

    .raas-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 11px);
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
        background: #FFFFFF;
        border: 1px solid var(--z-line);
        border-radius: var(--z-radius-sm);
        box-shadow: var(--z-shadow-card);
    }

    .raas-nav.is-open { display: flex; }

    .raas-nav-toggle { display: inline-flex; }
}

/* ---------- Footer scaffold ----------
   Footer unit restyles; this keeps the stub legible. */
.raas-footer {
    padding-block: 2.5rem;
    background: var(--z-white);
    border-top: 1px solid var(--z-line);
    color: var(--z-muted);
}

.raas-footer a { color: var(--z-ink); text-decoration: none; }
.raas-footer a:hover { color: var(--z-blue); }
.raas-footer .raas-brand { margin-bottom: .5rem; }