/* ==========================================================================
   SafeDeal Escrow — Landing page
   Signature idea: the whole page is built around the same balance the
   product provides. Two soft aurora blobs — crimson for the buyer's side,
   blue for the seller's — sit behind key sections and never fully mix,
   echoing the escrow scale in the hero. Glass surfaces float on top of
   that light, so every card reads like it's suspended mid-balance.
   ========================================================================== */

:root {
    --glass: rgba(255, 255, 255, 0.6);
    --glass-strong: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.7);
    --glass-shadow: 0 8px 30px rgba(23, 24, 28, 0.08);
    --glass-dark: rgba(23, 24, 28, 0.55);
    --glass-dark-border: rgba(255, 255, 255, 0.1);
    --blob-buyer: rgba(178, 34, 34, 0.20);
    --blob-seller: rgba(28, 95, 173, 0.16);
}

.glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--glass-shadow);
}

/* Ambient aurora field — one shared background used behind the hero and
   the closing CTA so the page opens and closes on the same visual idea. */
.aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.aurora::before,
.aurora::after {
    content: '';
    position: absolute;
    width: 52vw;
    height: 52vw;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.85;
}
.aurora::before { background: var(--blob-buyer); top: -14%; left: -12%; }
.aurora::after { background: var(--blob-seller); bottom: -20%; right: -10%; }

/* ---------------------------------- Hero ---------------------------------- */

.hero {
    position: relative;
    padding: 56px 0 72px;
    overflow: hidden;
}
.hero-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(28px, 5vw, 56px);
    align-items: center;
}
.hero-copy h1 {
    font-size: clamp(1.85rem, 4.4vw, 3rem);
    max-width: 15ch;
}
.hero-copy h1 em { color: var(--crimson); font-style: italic; }
.hero-copy .lede {
    font-size: clamp(0.98rem, 1.6vw, 1.1rem);
    max-width: 44ch;
    color: var(--ink-soft);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* Escrow scale — signature visual. A real 3D object (perspective +
   preserve-3d), tilted on load and re-tilted by main.js on mousemove via
   inline rotateX/rotateY on #scaleTilt. Every part is pushed forward on
   the z-axis by a different amount so the tilt actually reads as depth
   instead of a flat icon rotating in place. */
.scale-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    height: 0;
    padding-bottom: 100%; /* forces a real square height from width alone —
                              aspect-ratio was losing to grid auto-sizing
                              here because every child is position:absolute
                              and contributes zero intrinsic content height */
    margin: 0 auto;
    perspective: 1000px;
}
.scale-tilt {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateY(-16deg);
    transition: transform 0.35s var(--ease);
    will-change: transform;
}
.scale-float {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.scale-shadow {
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 50%;
    height: 16px;
    border-radius: 50%;
    background: rgba(23, 24, 28, 0.18);
    filter: blur(10px);
    transform: translateX(-50%) translateZ(-10px);
}
.scale-pole {
    position: absolute;
    bottom: 16%;
    left: 50%;
    width: 8px;
    height: 42%;
    background: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
    border-radius: 4px;
    transform: translateX(-50%) translateZ(0px);
}
.scale-base {
    position: absolute;
    bottom: 14%;
    left: 50%;
    width: 36%;
    height: 10px;
    background: var(--ink);
    border-radius: 5px;
    transform: translateX(-50%) translateZ(10px);
    box-shadow: var(--shadow-md);
}
.scale-beam {
    position: absolute;
    top: 24%;
    left: 50%;
    width: 78%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transform: translateX(-50%) translateZ(30px);
}
.scale-beam::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 8%;
    right: 8%;
    height: 3px;
    background: var(--ink);
    border-radius: 2px;
    z-index: -1;
}
.scale-arm { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.scale-string { width: 1.5px; height: 38px; background: var(--gray-400); }
.scale-tray {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    color: var(--white);
    box-shadow: var(--shadow-lg);
    transform: translateZ(46px);
}
.scale-arm-left .scale-tray { background: var(--crimson); }
.scale-arm-right .scale-tray { background: var(--blue); }
.scale-lock {
    position: absolute;
    top: 4%;
    left: 50%;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg);
    transform: translateX(-50%) translateZ(60px);
}

@media (hover: none) {
    /* Touch devices never get the mousemove handler, so give the piece a
       fixed, pleasant resting tilt instead of the flat default. */
    .scale-tilt { transform: rotateX(8deg) rotateY(-10deg); }
}

@media (max-width: 900px) {
    .hero-container { grid-template-columns: 1fr; text-align: center; }
    .hero-copy h1 { max-width: none; margin-left: auto; margin-right: auto; }
    .hero-copy .lede { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .scale-stage { max-width: 260px; margin-top: 8px; }
}
@media (max-width: 480px) {
    .hero { padding: 36px 0 48px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
}

/* ---------------------------------- Built for (marquee loop) ---------------------------------- */

.trust-strip { padding: 34px 0; border-bottom: 1px solid var(--gray-100); }
.trust-strip .trust-label {
    display: block;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    margin-bottom: 16px;
}
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: marquee-scroll 26s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ---------------------------------- Section shell ---------------------------------- */

.section { padding: 72px 0; }
.section.bg-soft { background: var(--gray-50); }
.section-head { flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; gap: 8px; }
.section-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--crimson);
}
.section-head h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
.section-head p { max-width: 46ch; font-size: clamp(0.9rem, 1.4vw, 1rem); }

@media (max-width: 640px) { .section { padding: 52px 0; } }

/* ---------------------------------- How it works ---------------------------------- */

.steps-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.step-card {
    position: relative;
    padding: 26px 22px;
    border-radius: var(--radius-lg);
}
.step-card .num {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--crimson);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.step-card h3 { font-size: clamp(1rem, 1.6vw, 1.1rem); }
.step-card p { font-size: clamp(0.85rem, 1.3vw, 0.92rem); margin-bottom: 0; }

@media (max-width: 900px) {
    .steps-flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .steps-flow { grid-template-columns: 1fr; gap: 14px; }
    .step-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; text-align: left; }
    .step-card .num { margin-bottom: 0; }
}

/* ---------------------------------- Feature grid ---------------------------------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.feature-card { padding: 24px; border-radius: var(--radius-lg); }
.feature-card .icon-wrap {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--crimson-light);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.feature-card h3 { font-size: clamp(1rem, 1.6vw, 1.08rem); }
.feature-card p { font-size: clamp(0.85rem, 1.3vw, 0.92rem); margin-bottom: 0; }

@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------------------------------- Security / trust strip ---------------------------------- */

.security-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.security-card {
    padding: 22px 18px;
    border-radius: var(--radius-md);
    text-align: center;
}
.security-card .icon-wrap {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(28, 95, 173, 0.12);
    color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}
.security-card h4 { font-size: clamp(0.9rem, 1.4vw, 0.98rem); margin-bottom: 4px; }
.security-card p { font-size: var(--text-xs); color: var(--gray-400); margin-bottom: 0; }

@media (max-width: 860px) { .security-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .security-grid { grid-template-columns: 1fr; } }

/* ---------------------------------- For buyers / for sellers ---------------------------------- */

.split-section .container { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.split-card { padding: clamp(26px, 4vw, 40px); border-radius: var(--radius-lg); }
.split-card .tag {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--crimson);
    margin-bottom: 10px;
}
.split-card h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.split-card ul { list-style: none; padding: 0; margin: 18px 0 26px; display: flex; flex-direction: column; gap: 12px; }
.split-card ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); }
.split-card ul li svg { flex-shrink: 0; margin-top: 2px; }
.split-card.dark {
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--white);
}
.split-card.dark h3, .split-card.dark p, .split-card.dark ul li { color: var(--white); }
.split-card.dark .tag { color: #FF9B9B; }

@media (max-width: 860px) {
    .split-section .container { grid-template-columns: 1fr; }
}

/* ---------------------------------- Fees ---------------------------------- */

.fee-card { padding: 8px 28px; border-radius: var(--radius-lg); max-width: 760px; margin: 0 auto; }
.fee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--gray-100);
}
.fee-row:last-child { border-bottom: none; }
.fee-row .label { font-weight: 600; font-size: clamp(0.92rem, 1.6vw, 1rem); }
.fee-row .desc { font-size: var(--text-xs); color: var(--gray-400); margin-top: 2px; }
.fee-row .value { font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: var(--crimson); flex-shrink: 0; }
.fee-note { text-align: center; font-size: var(--text-xs); color: var(--gray-400); margin: 20px auto 0; max-width: 46ch; }

@media (max-width: 560px) {
    .fee-card { padding: 4px 18px; }
    .fee-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 0; }
    .fee-row .value { align-self: flex-end; }
}

/* ---------------------------------- FAQ ---------------------------------- */

.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
    border-radius: var(--radius-md);
    padding: 4px 20px;
}
.faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    cursor: pointer;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.6vw, 0.98rem);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus { flex-shrink: 0; font-size: 1.3rem; color: var(--crimson); transition: transform 0.15s var(--ease); font-weight: 400; }
.faq-item[open] .plus { transform: rotate(45deg); }
.faq-item p { padding-bottom: 18px; font-size: 0.9rem; margin-bottom: 0; }

/* ---------------------------------- Final CTA ---------------------------------- */

.section:has(.cta-band) { position: relative; overflow: hidden; }
.cta-band {
    position: relative;
    z-index: 1;
    background: var(--ink);
    border-radius: var(--radius-lg);
    padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 40px);
    text-align: center;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, var(--blob-buyer), transparent 55%),
        radial-gradient(circle at 85% 80%, var(--blob-seller), transparent 55%);
    opacity: 0.7;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); font-size: clamp(1.4rem, 3.6vw, 2rem); max-width: 22ch; margin-left: auto; margin-right: auto; }
.cta-band p { color: rgba(255,255,255,0.7); max-width: 44ch; margin-left: auto; margin-right: auto; }
.cta-band .hero-actions { justify-content: center; margin-top: 8px; }

@media (max-width: 480px) {
    .cta-band .hero-actions { flex-direction: column; }
    .cta-band .hero-actions .btn { width: 100%; }
}

/* ---------------------------------- Scroll reveal (self-contained) ---------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}