:root{
      --bg-0: #07060a;
      --bg-1: #0a0a0f;
      --card: #0f1014;
      --muted: #a8a4ad;
      --neon: #E50520;
      --accent-glow: 0 8px 30px rgba(229,5,32,0.12);
      --glass: rgba(255,255,255,0.03);
      --glass-2: rgba(255,255,255,0.02);
    }

    /* ===== Base ===== */
    html { scroll-behavior: smooth; }
    body {
      background: linear-gradient(180deg,var(--bg-0), #0b0b10 60%);
      color: #e7e6ea;
      font-family: 'Inter', sans-serif;
      margin: 0;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    h1,h2,h3,h4,h5 {
      font-family: 'Playfair Display', serif;
      color: #fff;
      letter-spacing: 0.2px;
    }
    p { color: var(--muted); }

    a { color: inherit; text-decoration: none; }

    /* ===== Navbar ===== */
    .navbar-custom {
      background: linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,0.03);
      z-index: 1050;
    }
    .navbar-brand img { width: 56px; height:56px; border-radius:10px; object-fit:cover; box-shadow: 0 6px 30px rgba(229,5,32,0.08); }
    .nav-link { color: #dfe0e5; opacity:0.9; }
    .nav-link:hover, .nav-link.active { color: var(--neon); font-weight:600; }

    /* CTA */
    .btn-neon {
      background: linear-gradient(90deg,var(--neon), #ff6a6f);
      color: #fff;
      border-radius: 999px;
      padding: 10px 18px;
      box-shadow: var(--accent-glow);
      border: none;
      font-weight:600;
    }
    .btn-neon:hover { background:#ff1f54; box-shadow:0 0 25px rgba(255,0,60,0.9); }

    /* ===== Hero ===== */
    .hero {
      min-height: 90vh;
      display:flex;
      align-items:center;
      position: relative;
      padding-top: 86px; /* leave room for fixed navbar */
    }
    .hero-inner {
      display:grid;
      grid-template-columns: 1fr 460px;
      gap: 48px;
      align-items:center;
      width:100%;
    }

    .hero-left {
      max-width:720px;
    }
    .eyebrow {
      color: var(--neon);
      font-weight:700;
      display:inline-block;
      padding:6px 12px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(229,5,32,0.08), rgba(255,255,255,0.01));
      margin-bottom: 18px;
      font-size:0.85rem;
    }
    .hero h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); margin-bottom:12px; line-height:1.05; color:#fff; text-shadow: 0 6px 30px rgba(229,5,32,0.06); }
    .hero-sub { color:var(--muted); margin-bottom:20px; }

    /* Mockup phone */
    .phone-mock {
      width: 360px;
      margin: 0 auto;
      position: relative;
      transform: translateY(-6%);
    }
    .phone-frame {
      width: 100%;
      border-radius: 36px;
      padding: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.04);
      box-shadow: 0 18px 50px rgba(3,3,6,0.6), 0 6px 18px rgba(229,5,32,0.06);
    }
    .phone-screen {
      width: 100%;
      height: 640px;
      background: linear-gradient(180deg,#050507 10%, #0b0b10 100%);
      border-radius: 20px;
      overflow:hidden;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .phone-screen .play {
      font-size:46px;
      color: #fff;
      opacity:0.95;
      background: linear-gradient(90deg, rgba(229,5,32,0.15), rgba(255,255,255,0.02));
      border-radius:16px;
      padding: 12px 18px;
    }
    .phone-light {
      position:absolute;
      top:-36px;
      right:-36px;
      width:160px; height:160px;
      filter: blur(40px);
      background: radial-gradient(circle at 30% 30%, rgba(229,5,32,0.35), rgba(229,5,32,0.08) 30%, transparent 55%);
      pointer-events:none;
    }

    /* ===== About & Services ===== */
    .card-glass {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.03);
      padding: 28px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(3,3,6,0.6);
    }
    .service-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
      border-radius: 14px;
      padding: 20px;
      text-align:center;
      transition: transform .18s ease, box-shadow .18s ease;
      border: 1px solid rgba(255,255,255,0.03);
    }
    .service-card:hover { transform: translateY(-6px); box-shadow: var(--accent-glow); }
    .service-card .bi { font-size: 28px; color: var(--neon); margin-bottom:12px; }

    /* ===== Video row (horizontal) ===== */
    .video-row {
      display:flex;
      gap:18px;
      padding:12px 6px;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    .video-item {
      min-width: 260px;
      height: 460px;
      border-radius: 18px;
      overflow:hidden;
      background: #000;
      position:relative;
      flex:0 0 auto;
      box-shadow: 0 14px 40px rgba(0,0,0,0.6);
      border: 1px solid rgba(255,255,255,0.03);
      transition: transform .18s ease;
    }
    .video-item:hover { transform: translateY(-8px); }
    .video-player {
      width:100%; height:100%; object-fit:cover; display:block;
    }
    .play-overlay {
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:56px; color:#fff; opacity:0.9;
      text-shadow: 0 10px 30px rgba(0,0,0,0.6);
    }

    /* ===== Audio cards ===== */
    .song-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
      border-radius: 14px;
      padding:18px;
      border: 1px solid rgba(255,255,255,0.03);
    }
    .song-title { color:#fff; font-weight:700; }
    .song-tag { color: var(--neon); font-weight:600; font-size:0.9rem; }

    /* ===== Reviews ===== */
    .review {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      padding:18px;
      border-radius:12px;
      border: 1px solid rgba(255,255,255,0.03);
    }

    /* ===== Footer ===== */
    footer {
      background: linear-gradient(180deg, rgba(7,7,10,1), #060507 80%);
      color: var(--muted);
      padding: 48px 0 28px 0;
      border-top: 1px solid rgba(255,255,255,0.02);
    }

    /* ===== Utilities & Responsive ===== */
    .muted { color: var(--muted); }
    .shadow-neon { box-shadow: var(--accent-glow); }
    @media (max-width: 1100px) {
      .hero-inner { grid-template-columns: 1fr 360px; gap:24px; padding: 24px; }
      .phone-mock { transform: none; width: 320px; }
    }
    @media (max-width: 768px) {
      .hero-inner { grid-template-columns: 1fr; }
      .phone-mock { width: 300px; margin-top: 28px; }
      .video-item { min-width: 220px; height: 360px; }
      .video-row { gap:12px; }
    }
    @media (max-width: 480px) {
      .phone-screen { height: 460px; }
      .hero { padding-top: 72px; }
      .hero h1 { font-size: 1.6rem; }
    }

    /* Small subtle animations */
    .fade-up { transform: translateY(8px); opacity:0; transition: all .6s cubic-bezier(.2,.9,.2,1); }
    .in-view { transform: none; opacity:1; }

    /* ===== Base ===== */
h1,h2,h3,h4,h5,h6 { margin-bottom: 1rem; }

/* ===== Mockup ===== */
.mockup {
    width: 100%;
    max-width: 350px;
    height: auto;
    filter: drop-shadow(0 0 60px rgba(255,0,0,0.45));
    transition: transform 0.3s ease;
}
.mockup:hover { transform: translateY(-5px) scale(1.02); }

/* ===== Neon Boxes ===== */
.neon-box {
    background: rgba(20,23,35,0.7);
    border: 1px solid rgba(255,0,0,0.35);
    border-radius: 18px;
    padding: 22px;
    backdrop-filter: blur(12px);
    transition: 0.25s;
    cursor: default;
}
.neon-box:hover { transform: translateY(-4px); animation: glow 1s infinite alternate; }
@keyframes glow { 0%,100%{box-shadow:0 0 18px rgba(255,0,0,0.4);}50%{box-shadow:0 0 30px rgba(255,0,0,0.7);} }
.icon { width:38px; filter: brightness(0) invert(1); opacity:0.85; }

/* ===== Titles & text ===== */
.title-shadow { text-shadow:0 0 12px rgba(255,0,0,0.5); }
.price { font-size:2.5rem; font-weight:700; color:#E50520; }

/* ===== Buttons ===== */
.btn-studio {
    background: linear-gradient(90deg, #E50520, #ff6a6f);
    color: #fff;
    border-radius: 12px;
    padding: 10px 18px;
    box-shadow: var(--accent-glow);
    border: none;
    font-weight: 600;
}
.btn-studio:hover { background:#ff1f54; box-shadow:0 0 25px rgba(255,0,60,0.9); transform:translateY(-2px); }
.btn-red {
    width:100%; padding:15px; background:linear-gradient(90deg, #E50520, #ff6a6f); color:#fff;
    text-transform:uppercase; font-weight:600; letter-spacing:1px;
    border-radius:14px; border:none; box-shadow:0 0 18px rgba(255,0,60,0.6); transition:0.3s;
}
.btn-red:hover { background:#ff1f54; box-shadow:0 0 25px rgba(255,0,60,0.9); }

/* ===== Form ===== */
.card-form {
    background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
    border-radius:18px; padding:35px; backdrop-filter:blur(8px);
    box-shadow:0 0 25px rgba(255,0,60,0.15);
}
.form-control, .form-select, textarea {
    background:#1a1b1d; border:1px solid #2a2c31; color:#f4f4f4;
    border-radius:12px; padding:14px; transition:0.25s;
}
.form-control::placeholder, textarea::placeholder { color:#808080; }
.form-control:focus, .form-select:focus, textarea:focus {
    border-color:#ff003c; box-shadow:0 0 12px rgba(255,0,60,0.55);
}
label { font-weight:500; margin-bottom:6px; }

/* ===== Avis ===== */
.avis-block { margin-top:40px; padding:20px; border-left:3px solid #ff003c; background: rgba(255,255,255,0.03); border-radius:10px; }
.stars span {
    font-size: 22px;
    color: #E50520;
    text-shadow: 0 0 12px #E50520;
}

/* ===== Feature Boxes ===== */
.icon-feature { font-size:36px; color:#ff003c; text-shadow:0 0 12px rgba(255,0,60,0.8); margin-bottom:10px; }
.feature-box {
    text-align:center; padding:20px; background:rgba(255,255,255,0.03);
    border-radius:14px; border:1px solid rgba(255,255,255,0.06);
    backdrop-filter:blur(6px); transition:0.25s;
}
.feature-box:hover { box-shadow:0 0 25px rgba(255,0,60,0.9); }

/* ===== Promesse ===== */
.promesse-box {
    background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; padding:25px; text-align:center; color:#eee;
    max-width:620px; margin:0 auto 40px; box-shadow:0 0 18px rgba(255,0,60,0.18);
}

/* ===== Accordion ===== */
.accordion-button { background:#141417 !important; color:#fff !important; border:none; border-radius:0 !important; padding:16px; font-weight:500; }
.accordion-button:not(.collapsed) { color:#ff003c !important; text-shadow:0 0 10px rgba(255,0,60,0.7); border-bottom:1px solid rgba(255,0,60,0.4); }
.accordion-body { background:#0f0f12; color:#ccc; padding:20px; }

/* ===== Neon Card ===== */
.neon-card {
    background:#111217; border:1px solid rgba(255,42,79,0.3);
    box-shadow:0 0 12px rgba(255,42,79,0.2); transition:0.3s ease-in-out;
}
.neon-card:hover { border-color:#ff2a4f; box-shadow:0 0 20px rgba(255,42,79,0.45); transform:translateY(-4px); }

/* ===== Responsive ===== */
@media (max-width:576px){
    .price{font-size:2rem;}
    .btn-studio{padding:12px 20px; font-size:1rem;}
    .neon-box,.neon-card{box-shadow:none;}
    .mockup{max-width:90%;}
    .card-form{padding:25px;}
}
.accent{color:#ff003c;font-weight:700;}
.text-danger{color: #E50520 !important;}
.icon-headphones::before {
    content: "\1F3A7"; /* 🎧 */
}
.icon-music::before {
    content: "\1F3BC"; /* 🎼 */
}
.icon-heart::before {
    content: "\2764\FE0F"; /* ❤️ */
}
.icon-fire::before {
    content: "\1F525"; /* 🔥 */
}
.icon-camera::before {
    content: "\1F3A5"; /* 🎥 */
}
.icon-star::before {
    content: "\2B50"; /* ⭐ */
}
.icon-star::before {
    content: "\2B50"; /* ⭐ */
}
.icon-music-note::before {
    content: "\1F3B5"; /* 🎵 */
}
.icon-star::before {
    content: "\2B50"; /* ⭐ */
}
.grey {
    color:grey;
}