/* assets/css/home.css */
/* Homepage: hero with vertical phone frame, live section, process steps, CTA band. */

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 88px;
    background:
        radial-gradient(1000px 480px at 100% 0%, rgba(var(--accent-rgb), 0.13), transparent 65%),
        radial-gradient(700px 400px at -10% 100%, rgba(var(--accent-rgb), 0.07), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 56px; }
.hero-title {
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-muted); max-width: 540px; margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: var(--bg-2);
    border: 1px solid var(--border);
    font-size: 0.86rem;
    color: var(--text-muted);
}
.hero-points li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.hero-visual { position: relative; display: flex; justify-content: center; }
.phone-frame {
    position: relative;
    z-index: 2;
    width: min(320px, 78vw);
    aspect-ratio: 9 / 16;
    border-radius: 36px;
    padding: 10px;
    background: #16181e;
    box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform: rotate(2.5deg);
}
.phone-frame img,
.phone-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    object-fit: cover;
}
.phone-placeholder {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), 0.55), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(var(--accent-rgb), 0.3), transparent 60%),
        linear-gradient(170deg, #3a2c27, #1b1c22);
}
.play-dot {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    position: relative;
}
.play-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--accent);
}
.phone-badge {
    position: absolute;
    left: -18px;
    bottom: 56px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--bg-2);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    box-shadow: var(--shadow);
    transform: rotate(-2.5deg);
}
.hero-blob {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(2px);
    background: rgba(var(--accent-rgb), 0.16);
}
.hero-blob-1 { width: 220px; height: 220px; top: -20px; right: 4%; }
.hero-blob-2 { width: 140px; height: 140px; bottom: -10px; left: 8%; background: rgba(var(--accent-rgb), 0.1); }

/* ---------- Live ---------- */
.live-section { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.live-section .video-facade { max-width: 960px; }
.eyebrow-live { color: #c2413b; }
.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c2413b;
    box-shadow: 0 0 0 0 rgba(194, 65, 59, 0.5);
    animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(194, 65, 59, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(194, 65, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(194, 65, 59, 0); }
}

/* ---------- Process ---------- */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.process-card {
    position: relative;
    padding: 32px 28px 28px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.process-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.process-num {
    display: inline-block;
    margin-bottom: 18px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--accent);
}
.process-card h3 { font-size: 1.35rem; }
.process-card p { color: var(--text-muted); margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { padding-top: 24px; }
.cta-inner {
    padding: 56px 40px;
    border-radius: 28px;
    text-align: center;
    background:
        radial-gradient(600px 260px at 50% 0%, rgba(255, 255, 255, 0.14), transparent 70%),
        var(--accent);
    color: #fff;
    box-shadow: 0 20px 50px rgba(var(--accent-rgb), 0.3);
}
.cta-inner h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); color: #fff; }
.cta-inner p { color: rgba(255, 255, 255, 0.86); max-width: 560px; margin: 0 auto 28px; font-size: 1.08rem; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.cta-inner .btn-primary { background: #fff; color: var(--accent); box-shadow: none; }
.cta-inner .btn-primary:hover { filter: none; background: #fdf7f4; }
.cta-inner .btn-outline { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.cta-inner .btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hero { padding: 32px 0 64px; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-visual { order: -1; }
    .phone-frame { width: min(240px, 62vw); }
    .process-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .hero-cta .btn { flex: 1 1 100%; }
    .cta-inner { padding: 40px 22px; border-radius: 22px; }
    .phone-badge { left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
    .process-card { transition: none; }
}