/* ============================================================
   Google Material 3 (Material You) Brand System
   Quadrant: Blue · Red · Yellow · Green
   ============================================================ */

:root {
    --g-blue:    #4285F4;
    --g-red:     #EA4335;
    --g-yellow:  #FBBC05;
    --g-green:   #34A853;

    --g-blue-soft:    #E8F0FE;
    --g-red-soft:     #FCE8E6;
    --g-yellow-soft:  #FEF7E0;
    --g-green-soft:   #E6F4EA;

    --g-surface:    #FFFFFF;
    --g-surface-2:  #F8F9FA;
    --g-surface-3:  #F1F3F4;
    --g-on-surface: #202124;
    --g-on-muted:   #5F6368;
    --g-outline:    #DADCE0;

    --r-md:   16px;
    --r-lg:   24px;
    --r-xl:   28px;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px 0 rgba(60,64,67,0.10), 0 1px 3px 1px rgba(60,64,67,0.06);
    --shadow-2: 0 6px 14px -4px rgba(60,64,67,0.18), 0 2px 6px -2px rgba(60,64,67,0.10);
    --shadow-3: 0 18px 36px -12px rgba(60,64,67,0.22), 0 8px 16px -8px rgba(60,64,67,0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    font-family: "Google Sans", "Product Sans", "Inter",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--g-on-surface);
    letter-spacing: -0.005em;
}

body {
    overflow-x: hidden;
    background: var(--g-surface);
}

/* ───── Material Symbols (Rounded) defaults ───── */
.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle;
}
.msym-fill   { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.msym-bold   { font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24; }

/* ───── Quadrant utility colors ───── */
.gtext-blue   { color: var(--g-blue)   !important; }
.gtext-red    { color: var(--g-red)    !important; }
.gtext-yellow { color: var(--g-yellow) !important; }
.gtext-green  { color: var(--g-green)  !important; }

.gbg-blue     { background-color: var(--g-blue)   !important; }
.gbg-red      { background-color: var(--g-red)    !important; }
.gbg-yellow   { background-color: var(--g-yellow) !important; }
.gbg-green    { background-color: var(--g-green)  !important; }

.gbg-blue-soft   { background-color: var(--g-blue-soft)   !important; }
.gbg-red-soft    { background-color: var(--g-red-soft)    !important; }
.gbg-yellow-soft { background-color: var(--g-yellow-soft) !important; }
.gbg-green-soft  { background-color: var(--g-green-soft)  !important; }

/* ───── Google "G" gradient text + underline ───── */
.g-gradient-text {
    background: linear-gradient(90deg,
        var(--g-blue)   0%,
        var(--g-red)   33%,
        var(--g-yellow) 66%,
        var(--g-green) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.g-rainbow-underline {
    background-image: linear-gradient(
        90deg,
        var(--g-blue)   0%, var(--g-blue)   25%,
        var(--g-red)   25%, var(--g-red)    50%,
        var(--g-yellow) 50%, var(--g-yellow) 75%,
        var(--g-green) 75%, var(--g-green) 100%);
    background-repeat: no-repeat;
    background-size: 60% 4px;
    background-position: 0 100%;
    padding-bottom: 10px;
}

/* ───── How It Works: uniform image size on mobile ───── */
.step-img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .step-img { height: auto; width: 100%; }
}

/* ───── M3 button (animated-custom-btn) ───── */
.animated-custom-btn {
    border-radius: var(--r-pill);
    transition:
        transform 0.2s cubic-bezier(0.2, 0, 0, 1),
        box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1),
        background-color 0.2s ease,
        filter 0.2s ease;
}
.animated-custom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(66, 133, 244, 0.45);
    filter: brightness(1.04);
}
.animated-custom-btn:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

/* ───── Top-nav link hover (Google quadrant underline) ───── */
.borderXwidth a {
    transition: color 0.2s ease;
}
.borderXwidth a::after {
    content: "";
    display: block;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.borderXwidth a:hover {
    color: var(--g-blue);
}
.borderXwidth a:hover::after {
    transform: scaleX(1);
}

/* ───── Material You "active pill" nav state ───── */
.nav-pill {
    background: var(--g-blue-soft) !important;
    color: var(--g-blue) !important;
    border-radius: var(--r-pill);
    padding: 0.55rem 1.25rem !important;
}
.nav-pill::after { display: none !important; }

/* ───── FAQ accordion ───── */
.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease;
    opacity: 0;
}
.faq-content > * { min-height: 0; }
.faq-content.active {
    grid-template-rows: 1fr;
    opacity: 1;
}
.faq-icon { transition: transform 0.3s ease; }
.faq-icon.active { transform: rotate(180deg); }

/* ───── Step numbers — Workspace-style rotating outline ───── */
.step-number {
    -webkit-text-stroke: 1.5px var(--g-blue);
    color: transparent;
}
.step-num-blue   { color: var(--g-blue)   !important; }
.step-num-red    { color: var(--g-red)    !important; }
.step-num-yellow { color: var(--g-yellow) !important; }
.step-num-green  { color: var(--g-green)  !important; }

/* ───── Badge pill (trust badges) ───── */
.badge-pill {
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: var(--r-pill);
}
.badge-pill:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 8px 20px -6px rgba(60, 64, 67, 0.18);
}

/* ───── Pulse dot (Live indicator) ───── */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.85); }
}
.pulse-dot { animation: pulse-dot 1.4s ease-in-out infinite; }

/* ───── Lenis smooth scroll ───── */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ───── Decorative blurs do NOT animate, so we no longer force them
        onto a GPU layer (was wasting mobile GPU memory). The
        live-banner gets layer promotion only on desktop where the
        shimmer animation actually runs (see Live banner block). ──── */

/* ───── Reveal-on-scroll (replaces AOS) ─────────────────────────────
   Tiny CSS + IntersectionObserver replaces ~14KB of AOS JS/CSS.
   IMPORTANT: hide ONLY elements that JS has tagged with .aos-init.
   This way above-fold content (and a no-JS fallback) renders
   immediately — nothing is hidden until JS confirms the element is
   below the fold and worth animating in. */
[data-aos].aos-init {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s cubic-bezier(0.2, 0, 0, 1),
        transform 0.6s cubic-bezier(0.2, 0, 0, 1);
}
[data-aos="fade-right"].aos-init { transform: translateX(-24px); }
[data-aos="fade-left"].aos-init  { transform: translateX(24px); }
[data-aos="zoom-in"].aos-init    { transform: scale(0.94); }
[data-aos].aos-animate {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-aos].aos-init {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ───── Promo modal ───── */
#promo-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#promo-modal.open { display: flex; }
#promo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 33, 36, 0.65);
    animation: fadeIn 0.25s ease;
}
@media (min-width: 1024px) {
    #promo-modal-backdrop { backdrop-filter: blur(6px); }
}
#promo-modal-box {
    position: relative;
    background: #fff;
    border-radius: var(--r-xl);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 32px 64px -16px rgba(32, 33, 36, 0.30);
    animation: slideUp 0.32s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ───── Inputs: Google "G" 4-color glow on focus ───── */
.promo-input,
.gsearch-input {
    width: 100%;
    border: 1.5px solid var(--g-outline);
    border-radius: var(--r-pill);
    padding: 0.95rem 1.4rem;
    font-size: 0.95rem;
    background: var(--g-surface-2);
    outline: none;
    color: var(--g-on-surface);
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.3s, background 0.2s;
}
.promo-input::placeholder,
.gsearch-input::placeholder { color: var(--g-on-muted); }
.promo-input:focus,
.gsearch-input:focus {
    border-color: transparent;
    background: #fff;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px var(--g-blue),
        0 0 0 6px var(--g-red),
        0 0 0 8px var(--g-yellow),
        0 0 0 10px var(--g-green);
}

/* ───── Standard M3 input (rounded-md) ───── */
.m3-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--g-outline);
    border-radius: var(--r-md);
    padding: 0.95rem 1.15rem;
    background: var(--g-surface-2);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--g-on-surface);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
}
.m3-input::placeholder { color: var(--g-on-muted); font-weight: 500; }
.m3-input:focus {
    border-color: var(--g-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.18);
}

/* ───── Workspace icon tile (rotating Google quadrant) ───── */
.gicon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    transition: transform 0.25s cubic-bezier(0.2,0,0,1), box-shadow 0.25s ease;
}
.gicon-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -10px rgba(60, 64, 67, 0.28);
}

/* ───── M3 surface card ───── */
.m3-card {
    background: var(--g-surface);
    border: 1px solid var(--g-outline);
    border-radius: var(--r-lg);
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.m3-card:hover {
    box-shadow: var(--shadow-3);
    transform: translateY(-2px);
    border-color: rgba(66, 133, 244, 0.35);
}

/* ───── Counter animation ───── */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.counter-animate { animation: countUp 0.8s ease forwards; }

/* ───── Subtle scrollbar ───── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--g-outline); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #bdc1c6; }
::-webkit-scrollbar-track { background: transparent; }

/* ───── Live banner shimmer (desktop only — mobile keeps the static
        gradient to avoid full-width repaints on every frame). ─────── */
.live-banner {
    background: linear-gradient(
        90deg,
        var(--g-red) 0%,
        #f06b60 50%,
        var(--g-red) 100%);
    background-size: 200% 100%;
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    @keyframes liveShine {
        0%   { background-position: -200% 0; }
        100% { background-position:  200% 0; }
    }
    .live-banner {
        animation: liveShine 6s linear infinite;
        will-change: background-position;
    }
}