/* ═══════════════════════════════════════════
   VARIABLES & BASE
═══════════════════════════════════════════ */
:root {
    --navy:    #0c0c1d;
    --navy2:   #13132e;
    --accent:  #e94560;
    --indigo:  #6366f1;
    --sky:     #0ea5e9;
    --amber:   #f59e0b;
    --emerald: #10b981;
    --violet:  #8b5cf6;
}
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--navy);
    background-image:
        radial-gradient(ellipse 80% 60% at 15% 50%, rgba(233,69,96,.24) 0%, transparent 65%),
        radial-gradient(ellipse 65% 55% at 85% 20%, rgba(99,102,241,.22) 0%, transparent 65%),
        radial-gradient(ellipse 55% 55% at 60% 90%, rgba(14,165,233,.13) 0%, transparent 60%);
    position: relative;
    overflow: hidden;
}
.hero-wrap::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,.03)'/%3E%3C/svg%3E");
    background-size: 30px 30px;
    pointer-events: none;
}
.hero-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); pointer-events: none;
}
.orb1 { width:480px;height:480px;top:-160px;right:-100px;background:rgba(233,69,96,.26);animation:orba 10s ease-in-out infinite alternate; }
.orb2 { width:360px;height:360px;bottom:-120px;left:-80px;background:rgba(99,102,241,.22);animation:orba 13s ease-in-out infinite alternate-reverse; }
.orb3 { width:260px;height:260px;top:45%;left:42%;background:rgba(14,165,233,.14);animation:orba 8s ease-in-out infinite alternate; }
@keyframes orba { from{transform:translate(0,0)scale(1)} to{transform:translate(24px,-18px)scale(1.07)} }

/* Blinking live dot */
.live-dot {
    display: inline-flex; align-items: center; gap: .55rem;
    background: rgba(233,69,96,.1); border: 1px solid rgba(233,69,96,.3);
    color: #ff8fa0; border-radius: 50px; padding: .38rem 1.1rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .03em;
    backdrop-filter: blur(10px);
    animation: livePulse 3s ease-in-out infinite;
}
.live-dot span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 7px var(--accent);
    animation: blink 1.4s ease-in-out infinite; flex-shrink: 0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes livePulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 8px rgba(233,69,96,.06)} }

/* Hero headline */
.hero-h1 {
    font-size: clamp(3rem, 6.5vw, 5.4rem);
    font-weight: 900; line-height: 1.0; letter-spacing: -3px; color: #fff;
    margin-bottom: 1.5rem;
}
.hero-h1 .grad {
    background: linear-gradient(135deg, #ff8fa0 0%, #e94560 45%, #c01f40 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Buttons */
.btn-fire {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--accent); color: #fff; border: none;
    border-radius: 14px; padding: .88rem 2rem;
    font-weight: 700; font-size: 1rem;
    position: relative; overflow: hidden;
    transition: transform .22s, box-shadow .22s;
    text-decoration: none;
}
.btn-fire::after { content:''; position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);opacity:0;transition:opacity .2s; }
.btn-fire:hover  { transform:translateY(-3px);box-shadow:0 14px 38px rgba(233,69,96,.5);color:#fff; }
.btn-fire:hover::after { opacity:1; }

.btn-glass {
    display: inline-flex; align-items: center; gap: .55rem;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
    padding: .88rem 2rem; font-weight: 600; font-size: 1rem;
    backdrop-filter: blur(14px);
    transition: background .2s, border-color .2s, transform .22s;
    text-decoration: none;
}
.btn-glass:hover { background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32);color:#fff;transform:translateY(-3px); }

/* Stats */
.stat-row { display: flex; align-items: center; gap: 2rem; }
.stat-box .n { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; }
.stat-box .l { font-size: .76rem; color: rgba(255,255,255,.4); margin-top: .1rem; white-space: nowrap; }
.stat-sep    { width:1px; height:40px; background: rgba(255,255,255,.1); }

/* 3-D book */
.book3d-wrap { perspective: 960px; }
.book3d {
    width: 200px; height: 272px;
    background: linear-gradient(145deg, #e94560, #b01d3a);
    border-radius: 4px 18px 18px 4px;
    transform: rotateY(-22deg) rotateX(5deg);
    box-shadow: -16px 0 0 rgba(0,0,0,.38), 0 28px 70px rgba(233,69,96,.5), 0 8px 22px rgba(0,0,0,.28);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    animation: bookBob 5s ease-in-out infinite;
    transition: transform .4s; cursor: default;
}
.book3d::before { content:''; position:absolute;left:0;top:0;width:16px;height:100%;background:rgba(0,0,0,.32);border-radius:4px 0 0 4px; }
.book3d::after  { content:''; position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 55%);border-radius:4px 18px 18px 4px; }
.book3d:hover   { transform:rotateY(-10deg) rotateX(3deg) scale(1.04); }
@keyframes bookBob {
    0%,100% { transform:rotateY(-22deg) rotateX(5deg) translateY(0); }
    50%      { transform:rotateY(-22deg) rotateX(5deg) translateY(-14px); }
}

/* Float cards */
.fcard {
    background: rgba(255,255,255,.07); backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
    padding: .9rem 1.1rem; position: absolute;
}
.fa1 { animation: fa 4.5s ease-in-out infinite alternate; }
.fa2 { animation: fb 5s ease-in-out infinite alternate; }
.fa3 { animation: fc 4s ease-in-out infinite alternate; }
.fa4 { animation: fd 3.8s ease-in-out infinite alternate; }
@keyframes fa { from{transform:translateY(0)} to{transform:translateY(-10px)} }
@keyframes fb { from{transform:translateY(-5px)} to{transform:translateY(8px)} }
@keyframes fc { from{transform:translateY(0)} to{transform:translateY(-8px)} }
@keyframes fd { from{transform:translateY(4px)} to{transform:translateY(-6px)} }

/* ═══════════════════════════════════════════
   MARQUEE TICKER
═══════════════════════════════════════════ */
.ticker-band {
    background: rgba(10,10,22,.97);
    border-top: 1px solid rgba(233,69,96,.12);
    border-bottom: 1px solid rgba(233,69,96,.12);
    overflow: hidden; padding: .85rem 0;
}
.ticker-track {
    display: flex; gap: 3rem; white-space: nowrap;
    animation: ticker 30s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { display:flex;align-items:center;gap:.55rem;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.42);flex-shrink:0; }
.ticker-item i { color: var(--accent); font-size: .85rem; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════════════════════════════════════
   SECTION LABEL
═══════════════════════════════════════════ */
.sec-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .32rem .9rem; border-radius: 50px;
    font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   BENTO GRID (SERVICES)
═══════════════════════════════════════════ */
.bento { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.bcell {
    background: #fff; border: 1px solid #f0f0f0; border-radius: 22px;
    padding: 2rem; position: relative; overflow: hidden;
    transition: transform .28s, box-shadow .28s;
}
.bcell:hover { transform: translateY(-6px); box-shadow: 0 20px 52px rgba(0,0,0,.1); }
.bcell::after { content:'';position:absolute;inset:0;border-radius:22px;background:linear-gradient(135deg,transparent 65%,rgba(255,255,255,.35));pointer-events:none; }
.bcell-dark   { background: linear-gradient(145deg,#0f0f22,#1e0f30);border:none; }
.bcell-indigo { background: linear-gradient(145deg,#110f36,#1e1a5c);border:none; }
.bcell-wide   { grid-column: span 2; }
.bcell-tall   { grid-row: span 2; }
.bico { width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.45rem;margin-bottom:1.15rem; }
.btag { display:inline-block;border-radius:50px;padding:.22rem .65rem;font-size:.7rem;font-weight:700;border:1px solid; }
@media(max-width:991px){ .bcell-wide{grid-column:span 1} .bento{grid-template-columns:repeat(2,1fr)} }
@media(max-width:575px){ .bento{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════
   BOOK CARDS
═══════════════════════════════════════════ */
.bk-card {
    border-radius: 20px; overflow: hidden; background: #fff;
    border: 1px solid #eee; box-shadow: 0 2px 18px rgba(0,0,0,.06);
    transition: transform .25s, box-shadow .25s;
}
.bk-card:hover { transform: translateY(-7px); box-shadow: 0 22px 52px rgba(0,0,0,.14); }
.bk-cover { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; }

/* ═══════════════════════════════════════════
   PRICING
═══════════════════════════════════════════ */
.pc {
    background: #fff; border: 1.5px solid #ebebeb; border-radius: 26px;
    padding: 2.5rem 2rem; position: relative; overflow: hidden;
    transition: transform .28s, box-shadow .28s;
}
.pc:hover { transform: translateY(-5px); box-shadow: 0 22px 52px rgba(0,0,0,.1); }
.pc-hot {
    background: linear-gradient(150deg,#0c0c1d 0%,#1c1060 55%,#280a3c 100%);
    border: none; box-shadow: 0 28px 70px rgba(99,102,241,.35);
    transform: scale(1.05);
}
.pc-hot:hover { transform: scale(1.05) translateY(-5px); }
.pc-badge {
    position:absolute;top:0;left:50%;transform:translateX(-50%);
    background: linear-gradient(90deg,#e94560,#6366f1);
    color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    padding:.3rem 1.4rem;border-radius:0 0 14px 14px;white-space:nowrap;
}
.pc-price { font-size:2.8rem;font-weight:900;line-height:1;letter-spacing:-1.5px; }

/* ═══════════════════════════════════════════
   CTA BOX
═══════════════════════════════════════════ */
.cta-box {
    background: linear-gradient(135deg,#0c0c1d 0%,#1a1250 50%,#0c0c1d 100%);
    border-radius: 28px; position: relative; overflow: hidden; padding: 5.5rem 2rem;
}
.cta-box::before {
    content:'';position:absolute;inset:0;
    background: radial-gradient(ellipse 70% 90% at 50% 115%,rgba(233,69,96,.28),transparent 70%);
}
.cta-box::after {
    content:'';position:absolute;inset:0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,.025)'/%3E%3C/svg%3E");
    background-size:30px 30px;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.rev { opacity:0; transform:translateY(36px); transition:opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1); }
.rev.on { opacity:1; transform:translateY(0); }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s} .d4{transition-delay:.32s} .d5{transition-delay:.4s}

/* ═══════════════════════════════════════════
   STEP PROCESS
═══════════════════════════════════════════ */
.step-line { display:flex;flex-direction:column;align-items:center;gap:0; }
.step-dot  { width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(233,69,96,.18);flex-shrink:0; }
.step-connector { width:2px;height:40px;background:linear-gradient(to bottom,rgba(233,69,96,.4),rgba(233,69,96,.05));flex-shrink:0; }

/* Large Hero Logo */
.hero-logo-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.hero-logo-large {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(233, 69, 96, 0.15);
    animation: floatLogo 6s ease-in-out infinite alternate;
    object-fit: contain;
}
@keyframes floatLogo {
    from { transform: translateY(0) rotate(0); }
    to { transform: translateY(-10px) rotate(2deg); }
}
@media (max-width: 991px) {
    .hero-logo-container {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }
    .hero-logo-large {
        width: 110px;
        height: 110px;
    }
}