/* ============================================
   FeCore — Premium Landing
   Liquid Glass · Dark · Red Accent · Alive
   ============================================ */

:root {
    --bg: #07070a;
    --bg2: #0c0c10;
    --bg3: #111116;
    --card: #12121a;
    --border: #1a1a24;
    --border-light: #25252f;
    --red: #DC2626;
    --red-light: #ef4444;
    --red-dark: #b91c1c;
    --green: #22c55e;
    --yellow: #eab308;
    --white: #f0f0f3;
    --gray: #75758a;
    --muted: #45455a;
    --glass: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.06);
    --glass-hover: rgba(255,255,255,0.08);
    --radius: 20px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --ease: cubic-bezier(0.16,1,0.3,1);
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* === RESET === */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }

/* === NOISE === */
.noise {
    position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === UTILITY === */
.container { max-width:1240px; margin:0 auto; padding:0 2rem; }

.reveal {
    opacity:0; transform:translateY(30px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.show { opacity:1; transform:translateY(0); }

.gradient-text {
    background: linear-gradient(135deg, var(--red) 0%, #ff6b6b 50%, var(--red-light) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}


/* =============================================
   NAVBAR
   ============================================= */
nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:0.9rem 2rem; transition: all 0.5s var(--ease);
}
nav.scrolled {
    padding:0.6rem 2rem;
    background: rgba(7,7,10,0.7);
    backdrop-filter: blur(30px) saturate(1.4);
    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    border-bottom: 1px solid var(--glass-border);
}
.nav-inner {
    max-width:1280px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
}

.logo { display:flex; align-items:center; gap:0.7rem; z-index:10; }
.logo-mark {
    width:40px; height:40px; background:var(--red); border-radius:11px;
    display:grid; place-items:center; font-weight:900; font-size:14px; color:white;
    box-shadow: 0 0 25px rgba(220,38,38,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.3s var(--ease);
}
.logo-mark.small { width:28px; height:28px; font-size:10px; border-radius:8px; }
.logo:hover .logo-mark { transform:scale(1.08) rotate(-2deg); }
.logo-text { display:flex; flex-direction:column; }
.logo-name { font-size:1.15rem; font-weight:800; color:white; letter-spacing:-0.03em; line-height:1.2; }
.logo-sub { font-size:0.58rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; font-weight:600; }

.nav-pill {
    display:flex; gap:2px;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:100px; padding:4px; backdrop-filter:blur(12px);
}
.nav-pill a {
    color:var(--gray); font-size:0.82rem; font-weight:500;
    padding:0.5rem 1.15rem; border-radius:100px;
    transition: all 0.35s var(--ease); white-space:nowrap;
}
.nav-pill a:hover,
.nav-pill a.active {
    color:white; background:rgba(255,255,255,0.06);
}

.nav-cta {
    background:var(--red); color:white; padding:0.55rem 1.5rem;
    border-radius:100px; font-weight:700; font-size:0.82rem;
    transition: all 0.4s var(--ease); border:none; cursor:pointer;
    box-shadow: 0 0 20px rgba(220,38,38,0.25); white-space:nowrap;
}
.nav-cta:hover {
    background:var(--red-light); transform:translateY(-2px);
    box-shadow: 0 10px 35px rgba(220,38,38,0.45);
}

.menu-btn {
    display:none; background:none; border:none; cursor:pointer;
    width:28px; height:20px; position:relative; z-index:10;
}
.menu-btn span {
    display:block; width:100%; height:2px; background:white;
    border-radius:2px; transition: all 0.3s; position:absolute; left:0;
}
.menu-btn span:first-child { top:4px; }
.menu-btn span:last-child { bottom:4px; }
.menu-btn.active span:first-child { top:50%; transform:translateY(-50%) rotate(45deg); }
.menu-btn.active span:last-child { bottom:50%; transform:translateY(50%) rotate(-45deg); }


/* =============================================
   HERO
   ============================================= */
.hero {
    position:relative; min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:8rem 2rem 3rem; overflow:hidden;
}

/* Collage strips */
.hero-collage {
    position:absolute; inset:0; display:flex; gap:0; z-index:0;
}
.collage-strip {
    flex:1; overflow:hidden; position:relative;
    background: var(--bg);
    opacity:0; animation: stripIn 1.5s var(--ease) forwards;
    animation-delay: var(--delay);
}
@keyframes stripIn {
    from { opacity:0; transform:scaleY(1.15); }
    to { opacity:1; transform:scaleY(1); }
}
.collage-strip img {
    width:100%; height:100%; object-fit:cover;
    object-position: center center;
    display: block;
    filter: grayscale(0.15) brightness(0.85) contrast(1.05);
    transition: all 12s ease;
    transform: scale(1.08);
    animation: slowZoom 25s ease-in-out infinite alternate;
}
.collage-strip:nth-child(even) img { animation-direction: alternate-reverse; }
@keyframes slowZoom {
    from { transform: scale(1.05); }
    to { transform: scale(1.18); }
}
.collage-strip:hover img {
    filter: grayscale(0) brightness(0.95) contrast(1.1);
}

/* Strip separators */
.collage-strip::after {
    content:''; position:absolute; top:0; right:0; width:1px; height:100%;
    background: linear-gradient(180deg, transparent, rgba(220,38,38,0.15), transparent);
    z-index:1;
}
.collage-strip:last-child::after { display:none; }

/* Overlay */
.hero-overlay {
    position:absolute; inset:0; z-index:1;
    background:
        radial-gradient(ellipse at 50% 45%,
            rgba(7,7,10,0.15) 0%,
            rgba(7,7,10,0.45) 50%,
            rgba(7,7,10,0.88) 85%),
        linear-gradient(180deg,
            rgba(7,7,10,0.05) 0%,
            rgba(7,7,10,0.9) 100%);
    pointer-events:none;
}

/* Glass orbs */
.hero-glass-orb {
    position:absolute; border-radius:50%; z-index:2; pointer-events:none;
}
.orb-1 {
    width:600px; height:600px; top:-15%; right:-8%;
    background: radial-gradient(circle, rgba(220,38,38,0.1) 0%, transparent 60%);
    filter:blur(70px);
    animation: orbDrift 22s ease-in-out infinite alternate;
}
.orb-2 {
    width:450px; height:450px; bottom:0; left:-10%;
    background: radial-gradient(circle, rgba(220,38,38,0.07) 0%, transparent 60%);
    filter:blur(90px);
    animation: orbDrift 28s ease-in-out infinite alternate-reverse;
}
@keyframes orbDrift {
    0% { transform:translate(0,0) scale(1); }
    33% { transform:translate(18px,-22px) scale(1.05); }
    66% { transform:translate(-14px,16px) scale(0.96); }
    100% { transform:translate(10px,-8px) scale(1.02); }
}

.hero-canvas { position:absolute; inset:0; pointer-events:none; z-index:2; }

/* Content */
.hero-content { position:relative; z-index:3; max-width:860px; }

/* Badge */
.hero-badge {
    display:inline-flex; align-items:center; gap:0.6rem;
    background:rgba(220,38,38,0.07); border:1px solid rgba(220,38,38,0.18);
    backdrop-filter:blur(12px); color:var(--red-light);
    padding:0.5rem 1.3rem; border-radius:100px;
    font-size:0.78rem; font-weight:600; margin-bottom:2.5rem;
    animation: fadeUp 0.8s 0.2s var(--ease) both;
}
.badge-pulse {
    width:8px; height:8px; background:var(--red); border-radius:50%;
    position:relative; flex-shrink:0;
    animation: corePulse 2s ease-in-out infinite;
}
.badge-pulse::after {
    content:''; position:absolute; inset:-4px; border-radius:50%;
    border:1px solid var(--red);
    animation: ringPulse 2s ease-out infinite;
}
@keyframes corePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
    50% { box-shadow: 0 0 12px 2px rgba(220,38,38,0.2); }
}
@keyframes ringPulse {
    0% { transform:scale(1); opacity:0.6; }
    100% { transform:scale(2.5); opacity:0; }
}

/* Title */
.hero-title {
    font-size:clamp(3rem,7vw,5.8rem); font-weight:900;
    line-height:1.02; letter-spacing:-0.05em; margin-bottom:1.8rem;
    animation: fadeUp 1s 0.4s var(--ease) both;
}
.title-line { display:block; }
.title-line:first-child {
    background:linear-gradient(180deg, #ffffff 0%, #b0b0c0 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Subtitle */
.hero-subtitle {
    font-size:1.08rem; color:var(--gray); margin-bottom:2.5rem;
    max-width:540px; margin-left:auto; margin-right:auto;
    line-height:1.75; font-weight:400;
    animation: fadeUp 1s 0.6s var(--ease) both;
}

/* CTA Buttons */
.hero-ctas {
    display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
    margin-bottom:2.5rem;
    animation: fadeUp 1s 0.8s var(--ease) both;
}
.cta-primary {
    background:var(--red); color:white; padding:0.9rem 2.2rem;
    border-radius:100px; font-weight:700; font-size:0.95rem;
    display:inline-flex; align-items:center; gap:0.5rem;
    transition: all 0.4s var(--ease); border:none; cursor:pointer;
    box-shadow: 0 4px 25px rgba(220,38,38,0.3);
    position:relative; overflow:hidden;
}
.cta-primary::before {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.6s;
}
.cta-primary:hover::before { left:100%; }
.cta-primary:hover {
    background:var(--red-light); transform:translateY(-3px);
    box-shadow: 0 15px 45px rgba(220,38,38,0.5);
}

.cta-glass {
    background:var(--glass); color:white; padding:0.9rem 2.2rem;
    border-radius:100px; font-weight:600; font-size:0.95rem;
    display:inline-flex; align-items:center; gap:0.5rem;
    border:1px solid var(--glass-border);
    transition: all 0.4s var(--ease); backdrop-filter:blur(10px); cursor:pointer;
}
.cta-glass:hover {
    border-color:rgba(255,255,255,0.18); background:var(--glass-hover);
    transform:translateY(-2px);
}

/* Sport chips */
.hero-sports {
    display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap;
    animation: fadeUp 1s 1s var(--ease) both;
}
.sport-chip {
    background:var(--glass); border:1px solid var(--glass-border);
    padding:0.35rem 0.85rem; border-radius:100px;
    font-size:0.72rem; font-weight:500; color:var(--gray);
    backdrop-filter:blur(8px); transition: all 0.4s var(--ease);
    cursor:default;
}
.sport-chip:hover {
    border-color:rgba(220,38,38,0.25); color:var(--red-light);
    background:rgba(220,38,38,0.06); transform:translateY(-2px);
}

/* Hero footer */
.hero-footer {
    position:absolute; bottom:2rem; left:2.5rem; right:2.5rem;
    display:flex; justify-content:space-between; align-items:center; z-index:3;
}
.hero-version {
    display:flex; align-items:center; gap:0.5rem;
    color:var(--muted); font-size:0.75rem; font-weight:500; font-family:var(--mono);
}
.version-dot {
    width:6px; height:6px; background:var(--green); border-radius:50%;
    box-shadow: 0 0 10px rgba(34,197,94,0.6);
    animation: versionBlink 3s ease-in-out infinite;
}
@keyframes versionBlink {
    0%,100% { opacity:1; }
    50% { opacity:0.4; }
}
.hero-scroll-indicator {
    display:flex; align-items:center; gap:0.7rem;
    color:var(--muted); font-size:0.72rem; font-weight:500;
    letter-spacing:0.06em; text-transform:uppercase;
}
.scroll-bar {
    width:2px; height:40px;
    background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden;
}
.scroll-thumb {
    width:100%; height:14px; background:var(--red); border-radius:2px;
    animation: scrollAnim 2.8s ease-in-out infinite;
}
@keyframes scrollAnim {
    0% { transform:translateY(-14px); }
    50% { transform:translateY(40px); }
    100% { transform:translateY(-14px); }
}

@keyframes fadeUp {
    from { opacity:0; transform:translateY(25px); }
    to { opacity:1; transform:translateY(0); }
}


/* =============================================
   TUNNEL
   ============================================= */
.tunnel-section {
    position:relative; width:100%; background:#050506;
    overflow:hidden; z-index:1;
}
.tunnel-label {
    position:absolute; top:30px; left:50%; transform:translateX(-50%);
    z-index:20; text-align:center; pointer-events:none;
}
.tunnel-label h2 {
    font-size:clamp(1.2rem,2.5vw,1.7rem); font-weight:800;
    color:white; letter-spacing:-0.03em;
    text-shadow: 0 0 50px rgba(220,38,38,0.4);
}
.tunnel-label p { color:var(--gray); font-size:0.85rem; margin-top:0.3rem; }
#tunnelCanvas { display:block; width:100%; height:620px; }


/* =============================================
   SECTIONS COMMON
   ============================================= */
.features-section, .modules-section, .audience-section {
    position:relative; z-index:1; padding:7rem 0;
}
.features-section { background:var(--bg); }
.modules-section { background:var(--bg2); }
.audience-section { background:var(--bg); }

.section-tag {
    display:inline-block; color:var(--red); font-size:0.78rem;
    font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
    margin-bottom:1rem;
}
.section-title {
    font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:900;
    letter-spacing:-0.04em; margin-bottom:0.8rem;
    background:linear-gradient(180deg, #ffffff 20%, #55556a 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-desc {
    color:var(--gray); font-size:1.05rem; max-width:520px;
    margin-bottom:4rem; font-weight:400; line-height:1.7;
}

.features-section .section-tag,
.features-section .section-title,
.features-section .section-desc,
.audience-section .section-tag,
.audience-section .section-title,
.audience-section .section-desc {
    text-align:center; margin-left:auto; margin-right:auto; display:block;
}


/* =============================================
   FEATURES — LIQUID GLASS CARDS
   ============================================= */
.features-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}

.feature-card {
    position:relative; background:var(--glass);
    border:1px solid var(--glass-border); border-radius:var(--radius);
    padding:2rem 1.8rem; overflow:hidden;
    transition: all 0.6s var(--ease);
}
.feature-card:hover {
    border-color:rgba(220,38,38,0.18); transform:translateY(-6px);
    box-shadow: 0 25px 70px rgba(0,0,0,0.35), 0 0 40px rgba(220,38,38,0.05);
}

/* Glass shine */
.card-glass {
    position:absolute; top:-60%; left:-60%; width:220%; height:220%;
    background: radial-gradient(ellipse at 25% 25%, rgba(255,255,255,0.03) 0%, transparent 50%);
    pointer-events:none; transition: all 0.6s;
}
.feature-card:hover .card-glass {
    background: radial-gradient(ellipse at 25% 25%, rgba(255,255,255,0.06) 0%, transparent 50%);
}

/* Top glow */
.feature-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(220,38,38,0), transparent);
    transition: all 0.6s;
}
.feature-card:hover::before {
    background: linear-gradient(90deg, transparent, rgba(220,38,38,0.6), transparent);
}

/* Wide card */
.feature-wide {
    grid-column:1/-1; display:flex; gap:2rem; align-items:center;
}
.feature-content-left { flex:1; }

.f-icon {
    width:48px; height:48px; border-radius:14px;
    background:rgba(220,38,38,0.08); border:1px solid rgba(220,38,38,0.12);
    display:grid; place-items:center; margin-bottom:1.3rem; color:var(--red);
    transition: all 0.4s var(--ease);
}
.feature-card:hover .f-icon {
    background:rgba(220,38,38,0.14);
    box-shadow: 0 0 20px rgba(220,38,38,0.15);
}

.feature-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:0.6rem; letter-spacing:-0.01em; }
.feature-card p { color:var(--gray); font-size:0.88rem; line-height:1.65; }

/* Mini federation visual */
.feature-mini-visual {
    display:flex; flex-direction:column; gap:0.6rem;
    flex-shrink:0;
}
.mini-fed {
    display:flex; align-items:center; gap:0.6rem;
    background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
    border-radius:var(--radius-sm); padding:0.7rem 1.2rem;
    font-size:0.8rem; font-weight:500; color:var(--gray);
    backdrop-filter:blur(8px); transition: all 0.4s var(--ease);
    width:200px; position:relative;
}
.mini-fed:hover, .mini-fed.active {
    border-color:rgba(220,38,38,0.25); color:white;
    background:rgba(220,38,38,0.05);
}
.fed-dot {
    width:8px; height:8px; background:var(--red); border-radius:50%; flex-shrink:0;
    box-shadow: 0 0 10px rgba(220,38,38,0.5);
}
.fed-status {
    margin-left:auto; font-size:0.6rem; color:var(--green);
    font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
}

/* === FEATURE MINI ILLUSTRATIONS === */

/* Carnet mini */
.mini-carnet-illust {
    margin-top:1.2rem; width:150px;
    background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06);
    border-radius:10px; overflow:hidden;
}
.mc-header { height:16px; background:linear-gradient(135deg, var(--red), var(--red-dark)); }
.mc-body { display:flex; gap:7px; padding:8px; }
.mc-photo {
    width:26px; height:32px; background:rgba(255,255,255,0.06);
    border-radius:4px; flex-shrink:0;
}
.mc-lines { flex:1; display:flex; flex-direction:column; gap:4px; padding-top:2px; }
.mc-line { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; }
.mc-line.w80 { width:80%; } .mc-line.w60 { width:60%; } .mc-line.w40 { width:40%; }
.mc-footer { padding:4px 8px 8px; display:flex; justify-content:flex-end; }
.mc-qr {
    width:20px; height:20px; background:white; border-radius:3px; position:relative;
}
.mc-qr::before {
    content:''; position:absolute; inset:3px;
    background-image: radial-gradient(circle, #333 1px, transparent 1px);
    background-size:3px 3px; opacity:0.5;
}

/* Payments mini */
.mini-payments { margin-top:1rem; display:flex; flex-direction:column; gap:5px; }
.mp-row {
    display:flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.05);
    border-radius:var(--radius-xs); padding:5px 10px;
    font-size:0.68rem; color:var(--gray);
    transition: all 0.3s var(--ease);
}
.mp-row:hover { border-color:rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); }
.mp-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.mp-dot.green { background:var(--green); box-shadow:0 0 6px rgba(34,197,94,0.4); }
.mp-dot.yellow { background:var(--yellow); box-shadow:0 0 6px rgba(234,179,8,0.4); }
.mp-dot.pending { background:var(--red); box-shadow:0 0 6px rgba(220,38,38,0.4); animation: pendingBlink 1.5s ease-in-out infinite; }
@keyframes pendingBlink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.mp-amt { margin-left:auto; font-family:var(--mono); font-size:0.65rem; color:rgba(255,255,255,0.5); }
.mp-amt.pending-text { color:var(--red); font-family:var(--font); font-weight:600; }

/* Dashboard mini */
.mini-dashboard {
    margin-top:1rem;
    background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06);
    border-radius:10px; padding:10px; overflow:hidden;
}
.md-bars { display:flex; align-items:flex-end; gap:3px; height:45px; margin-bottom:8px; }
.md-bar {
    flex:1; background:var(--red); border-radius:2px 2px 0 0;
    height:var(--h); opacity:0.5;
    animation: barPulse 2.5s ease-in-out infinite alternate;
    animation-delay:var(--d);
}
@keyframes barPulse {
    0% { opacity:0.3; transform:scaleY(0.85); }
    100% { opacity:0.75; transform:scaleY(1); }
}
.md-line-chart { height:30px; }
.md-line-chart svg { width:100%; height:100%; }

/* Certificate mini */
.mini-cert {
    margin-top:1rem; display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06);
    border-radius:10px; padding:10px;
}
.cert-icon { font-size:1.5rem; }
.cert-lines { flex:1; display:flex; flex-direction:column; gap:4px; }
.cert-seal {
    width:24px; height:24px; border-radius:50%;
    background:rgba(34,197,94,0.15); border:1px solid rgba(34,197,94,0.3);
    display:grid; place-items:center; color:var(--green);
    font-size:0.65rem; font-weight:900;
}

/* Backup mini */
.mini-backup {
    margin-top:1rem; display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06);
    border-radius:10px; padding:10px;
}
.backup-icon { font-size:1.4rem; }
.backup-progress {
    flex:1; height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden;
}
.backup-fill {
    width:85%; height:100%; background:linear-gradient(90deg, var(--green), #4ade80);
    border-radius:3px; animation: backupAnim 3s ease-in-out infinite;
}
@keyframes backupAnim {
    0% { width:70%; } 50% { width:95%; } 100% { width:70%; }
}
.backup-label {
    font-size:0.6rem; color:var(--green); font-weight:700;
    letter-spacing:0.05em; text-transform:uppercase;
}


/* =============================================
   MODULES
   ============================================= */
.module-row {
    display:grid; grid-template-columns:1fr 1fr; gap:5rem;
    align-items:center; margin-bottom:8rem;
}
.module-row:last-child { margin-bottom:0; }
.module-row.reverse { direction:rtl; }
.module-row.reverse > * { direction:ltr; }

.module-number {
    font-family:var(--mono); font-size:0.75rem; font-weight:700;
    color:var(--red); letter-spacing:0.05em; margin-bottom:0.8rem; opacity:0.7;
}
.module-text h3 {
    font-size:2rem; font-weight:800; letter-spacing:-0.03em;
    line-height:1.15; margin-bottom:1rem;
}
.module-text p {
    color:var(--gray); font-size:0.95rem; line-height:1.75; margin-bottom:1.5rem;
}
.module-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }
.module-tags span {
    background:rgba(220,38,38,0.06); border:1px solid rgba(220,38,38,0.14);
    color:var(--red-light); padding:0.3rem 0.85rem; border-radius:100px;
    font-size:0.75rem; font-weight:600;
}

/* Screen mockup */
.module-visual { position:relative; }
.module-screen {
    background:var(--card); border:1px solid var(--border); border-radius:16px;
    overflow:hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
    transition: transform 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.module-row.reverse .module-screen {
    transform: perspective(1200px) rotateY(3deg) rotateX(1deg);
}
.module-screen:hover {
    transform: perspective(1200px) rotateY(0) rotateX(0) scale(1.02);
    box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 60px rgba(220,38,38,0.06);
}

.screen-bar {
    display:flex; align-items:center; gap:6px; padding:10px 14px;
    background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border);
}
.s-dot { width:8px; height:8px; border-radius:50%; }
.s-dot.r { background:#ff5f57; } .s-dot.y { background:#ffbd2e; } .s-dot.g { background:#28c840; }
.s-url {
    flex:1; text-align:center; font-size:0.65rem; font-family:var(--mono);
    color:var(--muted); background:rgba(0,0,0,0.3);
    padding:3px 12px; border-radius:5px; margin:0 10px;
}

.screen-body { position:relative; min-height:200px; background:var(--bg); }
.screen-body img { width:100%; height:auto; display:block; }
.screen-body.fallback img { display:none; }
.screen-fallback { display:none; height:260px; place-items:center; color:var(--muted); font-size:0.9rem; }
.screen-body.fallback .screen-fallback { display:grid; }


/* =============================================
   CARNET MOCKUP (continuación)
   ============================================= */
.carnet-wrapper { position:relative; padding:1.5rem; perspective:1200px; }
.carnet {
    width:370px; max-width:100%;
    animation: carnetFloat 8s ease-in-out infinite;
}
@keyframes carnetFloat {
    0%,100% { transform:rotateY(-2deg) rotateX(1deg) translateY(0); }
    50% { transform:rotateY(3deg) rotateX(-1deg) translateY(-8px); }
}
.carnet-front {
    background:linear-gradient(150deg, #16161e 0%, #0f0f16 50%, #0a0a12 100%);
    border:1px solid rgba(255,255,255,0.07); border-radius:16px;
    overflow:hidden; position:relative;
    box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 80px rgba(220,38,38,0.06);
}

.carnet-top-bar {
    display:flex; align-items:center; gap:0.6rem;
    padding:0.85rem 1.1rem;
    background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
}
.carnet-logo-sm {
    width:30px; height:30px; background:rgba(255,255,255,0.2);
    border-radius:7px; display:grid; place-items:center;
    font-weight:900; font-size:11px; color:white; flex-shrink:0;
}
.carnet-org { flex:1; }
.carnet-org strong { display:block; font-size:0.7rem; font-weight:700; color:white; line-height:1.2; }
.carnet-org small { font-size:0.52rem; color:rgba(255,255,255,0.65); }
.carnet-year {
    background:rgba(255,255,255,0.18); padding:0.15rem 0.55rem;
    border-radius:6px; font-size:0.65rem; font-weight:800; color:white;
}

.carnet-main { display:flex; gap:1rem; padding:1.1rem; }
.carnet-photo { flex-shrink:0; }
.carnet-photo img {
    width:80px; height:100px; border-radius:10px; object-fit:cover;
    border:1px solid rgba(255,255,255,0.08);
}
.carnet-data { flex:1; min-width:0; }
.carnet-name { font-size:0.95rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:0.3rem; line-height:1.2; }
.carnet-role {
    display:inline-block; background:rgba(220,38,38,0.1);
    border:1px solid rgba(220,38,38,0.22); color:var(--red-light);
    padding:0.12rem 0.55rem; border-radius:100px;
    font-size:0.55rem; font-weight:700; letter-spacing:0.08em; margin-bottom:0.65rem;
}
.carnet-fields { display:flex; flex-direction:column; gap:0.3rem; }
.cf { display:flex; gap:0.5rem; align-items:baseline; }
.cf-label {
    font-size:0.52rem; color:var(--muted); font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em; min-width:65px; flex-shrink:0;
}
.cf-value { font-size:0.7rem; color:rgba(255,255,255,0.7); font-weight:500; }
.cf-value.code { font-family:var(--mono); color:var(--red-light); font-weight:700; font-size:0.68rem; }

/* QR Section */
.carnet-qr-section {
    display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem;
    background:rgba(255,255,255,0.015); border-top:1px solid rgba(255,255,255,0.04);
}
.carnet-qr-box {
    width:62px; height:62px; background:white; border-radius:8px;
    position:relative; padding:5px; flex-shrink:0;
    box-shadow:0 3px 12px rgba(0,0,0,0.3);
}
.qr-corner {
    position:absolute; width:15px; height:15px;
    border:3px solid #111; border-radius:2px;
}
.qr-corner::after {
    content:''; position:absolute; top:3px; left:3px;
    width:5px; height:5px; background:#111; border-radius:1px;
}
.qr-corner.tl { top:5px; left:5px; }
.qr-corner.tr { top:5px; right:5px; }
.qr-corner.bl { bottom:5px; left:5px; }
.qr-dots {
    position:absolute; top:22px; left:22px; right:7px; bottom:7px;
    background-image:radial-gradient(circle, #333 1.3px, transparent 1.3px);
    background-size:4px 4px; opacity:0.6;
}
.carnet-qr-info { display:flex; flex-direction:column; gap:0.15rem; }
.qr-label { font-size:0.6rem; font-weight:700; color:var(--red-light); letter-spacing:0.08em; }
.qr-hint { font-size:0.62rem; color:var(--gray); }
.qr-expiry { font-size:0.7rem; color:white; font-weight:700; font-family:var(--mono); margin-top:0.2rem; }

.carnet-flag-bar {
    height:4px;
    background:linear-gradient(90deg, #FFCC00 0%,#FFCC00 28%, #003DA5 28%,#003DA5 72%, #CE1126 72%,#CE1126 100%);
}

/* Verified badge */
.verified-badge {
    position:absolute; bottom:0.5rem; right:-0.5rem;
    display:flex; align-items:center; gap:0.5rem;
    background:rgba(13,13,16,0.88); border:1px solid rgba(34,197,94,0.22);
    border-radius:var(--radius-sm); padding:0.55rem 0.9rem;
    backdrop-filter:blur(15px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.4), 0 0 25px rgba(34,197,94,0.06);
    animation: verifyFloat 6s ease-in-out infinite;
}
@keyframes verifyFloat {
    0%,100% { transform:translateY(0); opacity:0.85; }
    50% { transform:translateY(-6px); opacity:1; }
}
.vb-icon {
    width:28px; height:28px; border-radius:50%;
    background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.28);
    display:grid; place-items:center; color:var(--green);
    font-size:0.8rem; font-weight:900;
}
.vb-text { display:flex; flex-direction:column; }
.vb-text strong { font-size:0.72rem; font-weight:700; color:var(--green); line-height:1.2; }
.vb-text small { font-size:0.58rem; color:var(--gray); }


/* =============================================
   AUDIENCE
   ============================================= */
.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.audience-card {
    position:relative; background:var(--glass);
    border:1px solid var(--glass-border); border-radius:var(--radius);
    padding:2.5rem 2rem; text-align:center; overflow:hidden;
    transition: all 0.6s var(--ease);
}
.audience-card:hover {
    border-color:rgba(220,38,38,0.18); transform:translateY(-6px);
    box-shadow:0 25px 70px rgba(0,0,0,0.3);
}
.aud-glass {
    position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.02), transparent 50%);
    pointer-events:none;
}
.aud-emoji { font-size:2.8rem; margin-bottom:1.2rem; }
.audience-card h3 { font-size:1.08rem; font-weight:700; margin-bottom:0.5rem; }
.audience-card p { color:var(--gray); font-size:0.88rem; line-height:1.65; margin-bottom:1rem; }

.aud-stat { display:flex; align-items:baseline; justify-content:center; gap:0.4rem; }
.aud-number {
    font-size:1.8rem; font-weight:900; color:var(--red);
    font-family:var(--mono); letter-spacing:-0.03em;
}
.aud-label { font-size:0.7rem; color:var(--muted); font-weight:500; }


/* =============================================
   CTA
   ============================================= */
.cta-section {
    position:relative; background:var(--red); overflow:hidden; padding:5rem 2rem;
}
.cta-glow {
    position:absolute; top:-30%; left:20%; width:60%; height:160%;
    background:radial-gradient(ellipse, rgba(255,255,255,0.08), transparent 60%);
    pointer-events:none;
}
.cta-inner {
    max-width:700px; margin:0 auto; text-align:center; position:relative; z-index:1;
}
.cta-section h2 {
    font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:900;
    color:white; margin-bottom:0.8rem; letter-spacing:-0.03em;
}
.cta-inner > p { font-size:1rem; color:rgba(255,255,255,0.85); margin-bottom:2.5rem; }
.cta-form {
    display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem;
}
.cta-form input {
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
    color:white; padding:0.78rem 1.3rem; border-radius:100px;
    font-size:0.9rem; font-family:var(--font); min-width:170px; outline:none;
    transition: all 0.3s;
}
.cta-form input::placeholder { color:rgba(255,255,255,0.45); }
.cta-form input:focus { background:rgba(255,255,255,0.18); border-color:white; }
.cta-form button {
    background:white; color:var(--red); padding:0.78rem 2rem;
    border-radius:100px; font-weight:800; border:none; cursor:pointer;
    font-size:0.9rem; font-family:var(--font); transition: all 0.3s;
}
.cta-form button:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.2); }
.cta-links { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.cta-links a {
    color:white; display:flex; align-items:center; gap:0.4rem;
    font-weight:500; font-size:0.88rem; opacity:0.9; transition:opacity 0.3s;
}
.cta-links a:hover { opacity:1; }


/* =============================================
   FOOTER
   ============================================= */
footer {
    background:var(--bg); border-top:1px solid var(--border); padding:2.5rem 2rem 2rem;
}
.footer-inner {
    max-width:1200px; margin:0 auto; display:flex;
    justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem;
}
.footer-brand { display:flex; align-items:center; gap:0.6rem; }
.footer-brand span { font-size:0.95rem; font-weight:700; }
.footer-meta { color:var(--muted); font-size:0.78rem; }
.footer-meta a { color:var(--gray); transition:color 0.3s; }
.footer-meta a:hover { color:var(--red); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { color:var(--muted); font-size:0.78rem; transition:color 0.3s; }
.footer-links a:hover { color:var(--gray); }
.footer-copy { text-align:center; margin-top:1.5rem; color:var(--muted); font-size:0.7rem; }


/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:1024px) {
    .features-grid { grid-template-columns:repeat(2,1fr); }
    .feature-wide { grid-column:1/-1; flex-direction:column; }
    .module-row, .module-row.reverse { grid-template-columns:1fr; gap:3rem; direction:ltr; }
    .module-visual { order:-1; }
    .module-screen, .module-row.reverse .module-screen { transform:none; }
    .audience-grid { grid-template-columns:1fr; max-width:450px; margin:0 auto; }
    #tunnelCanvas { height:480px; }
}

@media (max-width:768px) {
    .nav-pill {
        display:none; position:absolute; top:calc(100% + 10px);
        left:1rem; right:1rem; flex-direction:column;
        background:rgba(7,7,10,0.95); backdrop-filter:blur(25px);
        border:1px solid var(--border); border-radius:16px; padding:1rem;
    }
    .nav-pill.open { display:flex; }
    .menu-btn { display:block; }
    .features-grid { grid-template-columns:1fr; }
    .hero { padding:7rem 1.5rem 3rem; }
    .hero-title { font-size:clamp(2.5rem,9vw,3.8rem); }
    .hero-collage { display:none; }
    .hero-footer { display:none; }
    .cta-form { flex-direction:column; align-items:center; }
    .cta-form input { width:100%; max-width:300px; }
    .footer-inner { flex-direction:column; text-align:center; }
    #tunnelCanvas { height:380px; }
    .carnet { width:320px; }
    .carnet-main { flex-direction:column; align-items:center; text-align:center; }
    .carnet-fields { align-items:center; }
    .cf { flex-direction:column; align-items:center; gap:0.1rem; }
    .verified-badge { right:0; }
    .section-title { font-size:clamp(1.8rem,6vw,2.5rem); }
    .module-text h3 { font-size:1.5rem; }
}

@media (max-width:480px) {
    .hero-badge { font-size:0.7rem; padding:0.4rem 1rem; }
    .hero-subtitle { font-size:0.95rem; }
    .cta-primary, .cta-glass { padding:0.8rem 1.6rem; font-size:0.88rem; }
    .sport-chip { font-size:0.65rem; padding:0.3rem 0.7rem; }
}