/* ===================================================================
   Blubime — Landing / Home page
   Builds on blue.css tokens (--blu-*, .btn, .site-header, .site-footer).
   Self-contained sections, RTL-first. No build step.
   =================================================================== */

/* ===== Reveal-on-scroll ===== */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
[data-reveal][data-delay="5"] { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ===== Section scaffolding ===== */
.section { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.section--tint { background: linear-gradient(180deg, #fff 0%, var(--blu-50) 100%); }
.section--alt  { background: var(--bg); }

.section-head { max-width: 640px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.section-head.is-start { margin-inline: 0; text-align: start; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .78rem; font-weight: 800; letter-spacing: .01em;
    color: var(--blu-600); background: var(--blu-50);
    border: 1px solid var(--blu-100); padding: 6px 14px; border-radius: 99px;
    margin-bottom: 16px;
}
.eyebrow svg { width: 15px; height: 15px; }
.section-title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.3; margin: 0 0 .55em; }
.section-sub { color: var(--body); font-size: clamp(1rem, 1.5vw, 1.08rem); margin: 0; }
.grad-text {
    background: linear-gradient(120deg, var(--blu-500), var(--sky));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ===================================================================
   HEADER additions (works with blue.css .site-header)
   =================================================================== */
.site-header__cta { display: flex; align-items: center; gap: 12px; }
.site-header .nav-toggle {
    display: none; width: 44px; height: 44px; border-radius: 12px;
    border: 1.5px solid var(--line); background: #fff; color: var(--blu-700);
    cursor: pointer; place-items: center;
}
.site-header .nav-toggle svg { width: 22px; height: 22px; }
.site-nav__link.is-cta { display: none; }

@media (max-width: 860px) {
    .site-header .nav-toggle { display: grid; }
    .site-nav {
        position: absolute; inset-inline: 0; top: 72px;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        padding: 10px 24px 18px;
        transform: translateY(-12px); opacity: 0; pointer-events: none;
        transition: all .26s var(--ease);
    }
    .site-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
    .site-nav a { padding: 13px 4px; border-bottom: 1px solid var(--line-2); }
    .site-nav__link.is-cta { display: block; margin-top: 12px; }
    .site-nav__link.is-cta .btn { width: 100%; }
    .site-header__cta .btn-ghost { display: none; }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
    position: relative; overflow: hidden;
    background: radial-gradient(120% 130% at 88% -10%, var(--blu-700) 0%, var(--blu-900) 48%, var(--blu-950) 100%);
    color: #fff;
    padding: clamp(56px, 9vw, 120px) 0 clamp(72px, 10vw, 130px);
}
.hero::before {
    content: ''; position: absolute; inset: -25% -10% auto -15%; height: 90%;
    background:
        radial-gradient(closest-side, rgba(56, 189, 248, .42), transparent 70%),
        radial-gradient(closest-side, rgba(59, 130, 246, .38), transparent 70%);
    background-position: 18% 8%, 78% 26%;
    background-size: 58% 58%, 52% 52%;
    background-repeat: no-repeat; filter: blur(14px); opacity: .85;
    animation: heroAurora 16s var(--ease) infinite alternate;
}
.hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(120% 90% at 75% 10%, #000 28%, transparent 82%);
}
@keyframes heroAurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(5%, 7%, 0) scale(1.14); }
}

.hero__grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.08fr .92fr;
    align-items: center; gap: clamp(32px, 5vw, 64px);
}
.hero__badge {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .82rem; font-weight: 700; color: #dbeafe;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    padding: 7px 15px; border-radius: 99px; margin-bottom: 22px; backdrop-filter: blur(6px);
}
.hero__badge .pulse {
    width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: pulse 2s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.hero h1 {
    color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.22;
    letter-spacing: -.02em; margin: 0 0 .5em;
}
.hero h1 em { font-style: normal; color: var(--blu-300); }
.hero__lead {
    color: rgba(224, 238, 255, .82); font-size: clamp(1rem, 1.7vw, 1.2rem);
    line-height: 1.95; max-width: 46ch; margin: 0 0 32px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.hero__actions .btn { padding: 15px 28px; font-size: 1.02rem; }
.btn-light {
    color: var(--blu-900); background: #fff;
    box-shadow: 0 12px 30px rgba(2, 12, 35, .35);
}
.btn-light:hover { color: var(--blu-900); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(2, 12, 35, .45); }
.btn-glass {
    color: #fff; background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px);
}
.btn-glass:hover { color: #fff; background: rgba(255, 255, 255, .15); transform: translateY(-2px); }

.hero__trust { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero__trust-item { display: flex; align-items: center; gap: 9px; color: rgba(219, 234, 254, .85); font-size: .9rem; }
.hero__trust-item svg { width: 18px; height: 18px; color: var(--blu-300); flex: 0 0 auto; }

/* Hero visual — floating quote card */
.hero__visual { position: relative; min-height: 380px; }
.quote-card {
    position: relative; z-index: 2;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px rgba(2, 12, 35, .45);
    padding: 24px; max-width: 380px; margin-inline: auto;
    animation: floatY 6s var(--ease) infinite alternate;
}
@keyframes floatY {
    from { transform: translateY(-8px); }
    to   { transform: translateY(8px); }
}
.quote-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.quote-card__title { font-weight: 800; color: var(--ink); font-size: 1.02rem; }
.quote-card__tag {
    font-size: .72rem; font-weight: 800; color: var(--ok);
    background: var(--ok-bg); padding: 5px 11px; border-radius: 99px;
}
.quote-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    margin-bottom: 10px; transition: all .2s var(--ease);
}
.quote-row.is-best { border-color: var(--blu-300); background: var(--blu-50); box-shadow: var(--ring); }
.quote-row__co { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: .92rem; }
.quote-row__co img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line-2); padding: 3px; }
.quote-row__price { font-weight: 800; color: var(--blu-700); font-size: .95rem; }
.quote-row__price small { font-weight: 600; color: var(--muted); font-size: .72rem; }
.quote-card__foot { margin-top: 14px; }
.quote-card__foot .btn { width: 100%; }

.hero__chip {
    position: absolute; z-index: 3;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 14px; padding: 11px 15px;
    box-shadow: 0 18px 40px rgba(2, 12, 35, .3);
    font-weight: 800; color: var(--ink); font-size: .86rem;
    animation: floatY 5s var(--ease) infinite alternate;
}
.hero__chip small { display: block; font-weight: 600; color: var(--muted); font-size: .72rem; }
.hero__chip .ic {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--blu-500), var(--blu-600)); color: #fff;
}
.hero__chip .ic svg { width: 19px; height: 19px; }
.hero__chip--a { inset-block-start: -22px; inset-inline-start: -10px; animation-delay: -2s; }
.hero__chip--b { inset-block-end: -20px; inset-inline-end: -6px; animation-delay: -3.5s; }
.hero__chip--b .ic { background: linear-gradient(135deg, #0f9d6b, #0c7a54); }

/* ===================================================================
   LOGO / TRUST STRIP
   =================================================================== */
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); padding: 30px 0; }
.trust-strip__label { text-align: center; color: var(--muted); font-size: .85rem; font-weight: 600; margin-bottom: 22px; }
.trust-strip__logos {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(24px, 5vw, 54px);
}
.trust-strip__logos img {
    height: 40px; width: auto; object-fit: contain;
    filter: grayscale(1); opacity: .6;
    transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.trust-strip__logos img:hover { filter: none; opacity: 1; transform: translateY(-3px); }

/* ===================================================================
   PRODUCT GRID (insurance types)
   =================================================================== */
.products-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.product-card {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 24px;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
    display: flex; flex-direction: column; gap: 12px;
}
.product-card::after {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
    background: linear-gradient(90deg, var(--blu-500), var(--sky));
    transform: scaleX(0); transform-origin: inline-end; transition: transform .3s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blu-200); }
.product-card:hover::after { transform: scaleX(1); }
.product-card__icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: var(--blu-50); color: var(--blu-600); border: 1px solid var(--blu-100);
    transition: all .28s var(--ease);
}
.product-card:hover .product-card__icon {
    background: linear-gradient(135deg, var(--blu-500), var(--blu-600)); color: #fff; border-color: transparent;
    transform: rotate(-6deg);
}
.product-card__icon svg { width: 26px; height: 26px; }
.product-card h3 { font-size: 1.08rem; margin: 0; }
.product-card p { font-size: .9rem; color: var(--body); margin: 0; line-height: 1.8; flex: 1; }
.product-card__link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .86rem; font-weight: 800; color: var(--blu-600); margin-top: 2px;
}
.product-card__link svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.product-card:hover .product-card__link svg { transform: translateX(-4px); }

/* ===================================================================
   FEATURES (why us)
   =================================================================== */
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); }
.feature {
    display: flex; gap: 18px; align-items: flex-start;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px; box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature__icon {
    flex: 0 0 auto; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--blu-500), var(--blu-700)); color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
}
.feature__icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.1rem; margin: 0 0 7px; }
.feature p { font-size: .92rem; margin: 0; line-height: 1.85; }

/* ===================================================================
   STEPS (how it works)
   =================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.steps::before {
    content: ''; position: absolute; inset-block-start: 34px; inset-inline: 12%;
    height: 2px; background: repeating-linear-gradient(90deg, var(--blu-200) 0 8px, transparent 8px 16px);
    z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step__num {
    width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, var(--blu-500), var(--blu-700));
    box-shadow: 0 12px 28px rgba(37, 99, 235, .3); border: 5px solid #fff;
}
.step h3 { font-size: 1.05rem; margin: 0 0 6px; }
.step p { font-size: .88rem; margin: 0; color: var(--body); line-height: 1.8; }

/* ===================================================================
   STATS
   =================================================================== */
.stats {
    position: relative; overflow: hidden;
    background: radial-gradient(120% 130% at 85% 0%, var(--blu-700), var(--blu-900) 60%, var(--blu-950));
    color: #fff; border-radius: var(--radius-lg);
    padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
}
.stats::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(100% 100% at 80% 0, #000, transparent 75%);
}
.stats__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
}
.stat__num { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.stat__num .grad-text { background: linear-gradient(120deg, #fff, var(--blu-300)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat__label { color: rgba(219, 234, 254, .8); font-size: .92rem; margin-top: 8px; }
.stats__divider + .stats__divider {}

/* ===================================================================
   MARKETER / PARTNERSHIP section
   =================================================================== */
.partner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.partner__list { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; gap: 14px; }
.partner__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--body); font-size: .98rem; line-height: 1.7; }
.partner__list .check {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; margin-top: 1px;
    background: var(--ok-bg); color: var(--ok);
}
.partner__list .check svg { width: 15px; height: 15px; }
.partner__list strong { color: var(--ink); }

.partner__visual { position: relative; }
.partner__card {
    background: linear-gradient(150deg, var(--blu-600), var(--blu-800));
    color: #fff; border-radius: var(--radius-lg); padding: 34px;
    box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.partner__card::before {
    content: ''; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 90%;
    background: radial-gradient(closest-side, rgba(56, 189, 248, .4), transparent 70%); filter: blur(8px);
}
.partner__card h3 { color: #fff; font-size: 1.3rem; position: relative; z-index: 1; }
.partner__card p { color: rgba(224, 238, 255, .82); position: relative; z-index: 1; font-size: .95rem; }
.partner__metrics { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.partner__metric { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); padding: 16px; backdrop-filter: blur(6px); }
.partner__metric b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.partner__metric span { font-size: .82rem; color: rgba(224, 238, 255, .78); }
.partner__card .btn { position: relative; z-index: 1; width: 100%; }

/* ===================================================================
   FAQ
   =================================================================== */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 14px; }
.faq__item {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq__item.is-open { border-color: var(--blu-300); box-shadow: var(--shadow-md); }
.faq__q {
    width: 100%; text-align: start; cursor: pointer; border: none; background: none;
    font-family: var(--font); font-weight: 700; font-size: 1rem; color: var(--ink);
    padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq__q .ic {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    background: var(--blu-50); color: var(--blu-600); transition: all .25s var(--ease);
}
.faq__q .ic svg { width: 16px; height: 16px; }
.faq__item.is-open .faq__q .ic { background: var(--blu-500); color: #fff; transform: rotate(180deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.faq__a-inner { padding: 0 22px 20px; color: var(--body); line-height: 2; font-size: .94rem; }

/* ===================================================================
   CTA band
   =================================================================== */
.cta-band {
    position: relative; overflow: hidden; text-align: center;
    background: radial-gradient(120% 130% at 50% -20%, var(--blu-600), var(--blu-800) 55%, var(--blu-950));
    color: #fff; border-radius: var(--radius-lg);
    padding: clamp(44px, 7vw, 80px) clamp(24px, 5vw, 60px);
}
.cta-band::before {
    content: ''; position: absolute; inset: -30% -10% auto -10%; height: 80%;
    background: radial-gradient(closest-side, rgba(56, 189, 248, .35), transparent 70%); filter: blur(12px);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.6rem); margin: 0 0 .4em; }
.cta-band p { color: rgba(224, 238, 255, .85); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 52ch; margin: 0 auto 30px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-band__actions .btn { padding: 15px 30px; font-size: 1.02rem; }

/* ===================================================================
   FOOTER additions (works with blue.css .site-footer)
   =================================================================== */
.site-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.site-footer__brand img { height: 40px; width: auto; }
.site-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.site-footer__social a {
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; padding: 0;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: rgba(226, 240, 255, .8);
    transition: all .2s var(--ease);
}
.site-footer__social a:hover { background: var(--blu-600); color: #fff; transform: translateY(-3px); }
.site-footer__social svg { width: 19px; height: 19px; }
.site-footer__badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.site-footer__badges img { height: 64px; width: auto; background: #fff; border-radius: 10px; padding: 5px; }
.site-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .steps::before { display: none; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 880px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__visual { margin-top: 24px; min-height: auto; }
    .partner { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .products-grid { grid-template-columns: 1fr; }
    .stats__grid { grid-template-columns: 1fr; }
    .hero__chip { display: none; }
    .site-footer__bottom-inner { flex-direction: column; }
}