:root{
  --magia-purple:#7135c8;
  --magia-purple-dark:#54209f;
  --magia-pink:#d62991;
  --magia-blue:#168eb5;
  --magia-cream:#fffaf7;
  --magia-soft:#fdf1f4;
  --magia-text:#25232a;
  --magia-muted:#6e6970;
  --magia-border:#eadfe5;
  --magia-gradient:linear-gradient(100deg,#8b4aab 0%,#ad55c1 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--magia-text);
  background:#fff;
  font-family:"Poppins",sans-serif;
  line-height:1.55;
}
h1,h2,h3{font-family:"Poppins",sans-serif;line-height:1.1}
h1{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-.045em}
h1 span,h2 span{color:var(--magia-pink)}
h2{font-size:clamp(1.8rem,2.8vw,2.6rem);letter-spacing:-.025em}
p{color:var(--magia-muted)}
.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.25s ease
}
.site-header.scrolled{box-shadow:0 8px 30px rgba(64,31,67,.08);border-color:var(--magia-border)}
.navbar-brand{padding:0}
.brand-logo{
  position:relative;font-weight:800;font-size:3rem;line-height:1;
  letter-spacing:-.08em;background:var(--magia-gradient);-webkit-background-clip:text;
  background-clip:text;color:transparent
}
.brand-spark{position:absolute;top:-12px;right:3px;font-size:1.25rem;color:var(--magia-blue)}
.brand-logo-img { height: 40px; width: auto; object-fit: contain; }
.footer-logo-img { height: 50px; margin-bottom: 1rem; }
.nav-link{font-size:.95rem;font-weight:500;color:#2f2b31!important}
.nav-link:hover{color:var(--magia-purple)!important}
.btn-magia{
  border:0;color:#fff!important;background:var(--magia-gradient);border-radius:999px;
  padding:.75rem 1.45rem;font-weight:700;box-shadow:0 10px 25px rgba(112,44,194,.2)
}
.btn-magia:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(112,44,194,.27)}
.btn-outline-magia{
  color:var(--magia-purple);border:1px solid #bfa7d7;background:#fff;border-radius:999px;
  padding:.75rem 1.45rem;font-weight:600
}
.btn-outline-magia:hover{background:#fbf4ff;border-color:var(--magia-purple)}
.cart-link{font-size:1.4rem;color:#242128;text-decoration:none}

.hero-section{
  min-height:calc(100vh - 83px);display:flex;align-items:center;overflow:hidden;
  background: url('../images/bg-hero.png') center/cover no-repeat, #FAF3EF;
  padding:4.5rem 0 5rem;position:relative
}
.hero-copy{font-size:1.05rem;max-width:560px;margin:1.5rem 0 1.8rem}
.eyebrow{
  display:inline-flex;align-items:center;padding:.3rem .75rem;border-radius:999px;
  background:#fde4ed;color:#b32872;font-size:.72rem;font-weight:800;letter-spacing:.08em
}
.hero-features{max-width:560px}
.mini-feature{display:flex;gap:.6rem;align-items:center;font-size:.76rem;color:#5f5961}
.mini-feature i{font-size:1rem;color:var(--magia-purple)}
.hero-visual{min-height:570px;position:relative}
.hero-decoration{position:absolute;border-radius:50%;filter:blur(1px);opacity:.45}
.hero-decoration-1{width:420px;height:420px;background:#f8e5ed;right:-150px;top:-80px}
.hero-decoration-2{width:220px;height:220px;background:#e9eef9;right:35%;bottom:-100px}
.hero-keychain-left{display:none}
.fake-keychain{
  width:180px;height:180px;border-radius:50%;overflow:hidden;background:#fff;
  border:8px solid rgba(255,255,255,.72);box-shadow:0 25px 50px rgba(75,52,43,.2);
  position:relative;display:flex;align-items:center;justify-content:center
}
.fake-keychain:before{
  content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 25px rgba(100,75,70,.18)
}
.fake-keychain img{width:100%;height:100%;object-fit:cover}
.keychain-photo{position:absolute;left:16%;top:27%;transform:rotate(-5deg);z-index:3}
.keychain-qr{position:absolute;left:45%;top:34%;z-index:2;background:#f7f7f5}
.qr-placeholder{
  width:65%;height:65%;background:#fff;border:4px solid #222;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#111;font-weight:900
}
.qr-placeholder span{font-size:4.8rem;line-height:.75}
.qr-placeholder small{font-size:.65rem;letter-spacing:.2em}
.keychain-ring{position:absolute;width:70px;height:70px;border:9px solid #c48b31;border-radius:50%;z-index:5}
.ring-one{left:20%;top:14%}.ring-two{left:51%;top:20%}
.phone-mockup{
  position:absolute;right:7%;top:9%;width:235px;height:465px;border:9px solid #242329;
  border-radius:36px;background:#16151a;box-shadow:0 30px 70px rgba(32,24,36,.3);
  padding:10px;z-index:4;transform:rotate(4deg)
}
.phone-large{position:relative;right:auto;top:auto;transform:rotate(-2deg);margin:auto;width:230px;height:465px}
.phone-notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:85px;height:21px;background:#19171d;border-radius:0 0 14px 14px;z-index:3}
.phone-screen{height:100%;border-radius:27px;background:linear-gradient(#fff,#fff5fa);padding:40px 16px 20px;text-align:center;overflow:hidden}
.phone-logo{font-size:1.5rem;font-weight:800;background:var(--magia-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:16px}
.phone-screen img{width:125px;height:125px;border-radius:50%;object-fit:cover;margin-bottom:13px}
.phone-screen p{font-size:.78rem;color:#3b3440}
.waveform{display:flex;align-items:center;justify-content:center;gap:3px;height:35px}
.waveform i{display:block;width:3px;height:10px;border-radius:5px;background:linear-gradient(#d72891,#7440c9);animation:wave 1.2s ease-in-out infinite}
.waveform i:nth-child(2n){height:22px}.waveform i:nth-child(3n){height:15px}.waveform i:nth-child(4n){height:28px}
@keyframes wave{50%{transform:scaleY(.45)}}
.play-btn{width:52px;height:52px;border:0;border-radius:50%;background:var(--magia-gradient);color:#fff;font-size:1.5rem;box-shadow:0 8px 20px rgba(113,53,200,.25)}
.floating-heart{position:absolute;right:43%;top:31%;z-index:7;color:#ed6ca9;font-size:3rem;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(5deg)}}

.section-soft{background:var(--magia-soft)}
.section-white{background:#fff}
.section-heading{margin-bottom:2.5rem}
.section-heading h2{margin:.2rem 0 .5rem}
.section-heading p{margin:0}
.heading-decoration{color:#ef719f;font-size:2rem}
.decor-heart{font-size:3rem;color:#e568a0;margin-top:1rem}
.occasion-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.occasion-card{text-align:center}
.occasion-card img{width:100%;height:190px;object-fit:cover;border-radius:18px;display:block;margin-bottom:.55rem}
.occasion-card span{font-size:.76rem;color:#555}
.occasion-card strong{color:#29232c}
.steps{position:relative}
.step-card{text-align:center;padding:1.2rem .7rem;position:relative}
@media (min-width: 992px) {
  .step-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 55px;
    left: 55%;
    width: 90%;
    height: 30px;
    border-top: 2px dashed #f6b5cc;
    border-radius: 50% 50% 0 0;
    z-index: -1;
  }
}
.step-icon{
  width:72px;height:72px;border-radius:50%;margin:0 auto 1rem;
  display:flex;align-items:center;justify-content:center;background:#fff5f8;
  color:var(--magia-purple);font-size:1.7rem;box-shadow:0 10px 30px rgba(115,52,130,.08)
}
.step-number{font-size:.72rem;font-weight:800;color:#d15b91}
.step-card h3{font-family:"Poppins",sans-serif;font-size:1rem;font-weight:800;margin:.25rem 0 .5rem}
.step-card p{font-size:.78rem;margin:0}

.feature-panel{
  border:1px solid var(--magia-border);background:rgba(255,255,255,.82);
  border-radius:24px;padding:2rem;box-shadow:0 12px 40px rgba(75,44,75,.05)
}
.audio-panel{background:#fff6f7}
.audio-demo{text-align:center;background:#fff;border:1px solid #f0e1e7;border-radius:18px;padding:1.6rem}
.audio-time{font-size:.8rem;color:#5d5660;margin-bottom:1rem}
.waveform.large{height:75px;margin-bottom:1rem}
.waveform.large i{width:3px}
.record-button{
  width:82px;height:82px;border-radius:50%;border:0;color:#fff;font-size:1.7rem;
  background:var(--magia-gradient);box-shadow:0 12px 28px rgba(112,44,194,.28);transition:.2s
}
.record-button:hover{transform:scale(1.05)}
.audio-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.4rem}
.audio-control{border:1px solid #eadce5;background:#fff;border-radius:999px;padding:.55rem .85rem;font-size:.78rem;color:#4c4650}
.upload-audio{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:1rem;font-size:.82rem}

.product-two-sides{display:flex;justify-content:center;align-items:center;gap:2.2rem;text-align:center;min-height:310px}
.product-side{position:relative}.side-label{font-size:.7rem;color:var(--magia-purple);font-weight:800}
.large-keychain{position:relative;left:auto;top:auto;transform:none;margin:.7rem auto 1rem;width:180px;height:180px}
.swap-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--magia-pink);box-shadow:0 5px 20px rgba(80,40,80,.1)}
.product-side strong{font-size:.78rem}

.experience-card{border-radius:28px;background:linear-gradient(110deg,#fff9f5,#fff);padding:4rem 5rem;border:1px solid var(--magia-border)}
.experience-card h2{max-width:560px}
.experience-list{list-style:none;padding:0;margin:2rem 0 0}
.experience-list li{display:flex;align-items:center;gap:1rem;margin:1rem 0;font-size:.88rem}
.experience-list i{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff0f5;color:var(--magia-purple)}
.gift-image img{width:100%;height:330px;object-fit:cover;border-radius:25px}

.benefits-strip{background:#fffaf8;border-top:1px solid var(--magia-border);border-bottom:1px solid var(--magia-border)}
.benefits-strip h2{font-size:1.6rem;margin:0 0 1.5rem}
.benefits-strip h2 span{color:#e66ba0}
.benefit{display:flex;gap:.75rem;align-items:center;padding:.6rem 0;font-size:.75rem;color:#504b52}
.benefit i{font-size:1.25rem;color:#6844af}

.cta-section{padding:1rem 0 3rem;background:#fffaf8}
.cta-box{
  border-radius:24px;padding:3.2rem 4rem;color:#fff;overflow:hidden;position:relative;
  background:var(--magia-gradient);box-shadow:0 20px 50px rgba(104,48,165,.18)
}
.cta-box h2{font-size:clamp(2rem,3.5vw,3.2rem)}
.cta-box p{color:rgba(255,255,255,.9)}
.cta-product{height:220px;position:relative}
.cta-product .keychain-photo{left:12%;top:8%;transform:rotate(-7deg)}
.cta-product .keychain-qr{left:45%;top:28%;transform:rotate(6deg)}

.site-footer{background:#fff;color:#443e47}
.footer-logo{font-size:2.5rem}
.site-footer h3{font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:800;margin-bottom:1rem}
.site-footer a{display:block;color:#6b656c;text-decoration:none;font-size:.76rem;margin:.45rem 0}
.site-footer a:hover{color:var(--magia-purple)}
.site-footer p{font-size:.76rem}
.socials{display:flex;gap:.5rem}
.socials a{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f8eef5;color:var(--magia-purple)}
.socials a:hover{background:#eee0f8}
.footer-heart{font-size:2rem;color:#df6b9d}
.footer-bottom{border-top:1px solid var(--magia-border);padding:1rem 0;color:#8a838b;font-size:.7rem}

@media (max-width:1199.98px){
  .hero-visual{min-height:500px}
  .phone-mockup{right:0;width:210px;height:420px}
  .fake-keychain{width:155px;height:155px}
  .keychain-photo{left:7%}.keychain-qr{left:37%}
  .occasion-card img{height:165px}
}
@media (max-width:991.98px){
  .hero-section{padding:3rem 0}
  .hero-visual{min-height:470px;margin-top:1rem}
  .phone-mockup{right:4%;top:4%;width:190px;height:385px}
  .phone-screen img{width:105px;height:105px}
  .keychain-photo{left:15%;top:34%}.keychain-qr{left:42%;top:41%}
  .occasion-grid{grid-template-columns:repeat(3,1fr)}
  .experience-card{padding:3rem 2rem}
}
@media (max-width:767.98px){
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .section-heading { margin-bottom: 1.5rem; }
  .brand-logo{font-size:2.4rem}
  .hero-section{padding:1.5rem 0 2rem}
  h1{font-size:clamp(2rem,10vw,3.2rem)}
  .hero-visual{min-height:390px}
  .phone-mockup{width:150px;height:305px;border-width:6px;border-radius:25px;right:0}
  .phone-screen{border-radius:18px;padding:28px 9px 10px}
  .phone-logo{font-size:1rem;margin-bottom:8px}
  .phone-screen img{width:78px;height:78px;margin-bottom:5px}
  .phone-screen p{font-size:.6rem}
  .play-btn{width:38px;height:38px;font-size:1.1rem}
  .keychain-photo,.keychain-qr{width:125px;height:125px}
  .keychain-photo{left:8%;top:36%}.keychain-qr{left:34%;top:44%}
  .ring-one{left:10%;top:23%}.ring-two{left:39%;top:30%}
  .floating-heart{right:41%;top:35%;font-size:2rem}
  .occasion-grid{grid-template-columns:repeat(2,1fr)}
  .occasion-card img{height:180px}
  .feature-panel{padding:1.25rem}
  .product-two-sides{gap:.7rem}
  .large-keychain{width:125px;height:125px}
  .swap-icon{width:34px;height:34px;font-size:.8rem}
  .experience-card{padding:1.5rem 1rem}
  .gift-image img{height:240px}
  .cta-box{padding:1.5rem 1rem;text-align:center}
  .cta-product{height:180px}
  .cta-product .fake-keychain{width:130px;height:130px}
  .benefit{justify-content:center}
}
@media (max-width:575.98px){
  .hero-features .col-6{width:50%}
  .hero-features .mini-feature{font-size:.68rem}
  .hero-visual{min-height:335px}
  .fake-keychain{width:105px;height:105px;border-width:5px}
  .keychain-photo{left:8%;top:39%}.keychain-qr{left:32%;top:48%}
  .phone-mockup{width:132px;height:270px;right:1%;top:7%}
  .phone-screen img{width:68px;height:68px}
  .phone-screen p{font-size:.52rem}
  .qr-placeholder span{font-size:2.8rem}
  .occasion-card img{height:145px}
  .occasion-card span{font-size:.68rem}
  .product-two-sides{gap:.2rem}
  .large-keychain{width:105px;height:105px}
  .audio-controls .audio-control{font-size:.68rem;padding:.45rem .65rem}
  .upload-audio{flex-direction:column}
  .experience-list li{font-size:.76rem}
}

.reveal-ready{opacity:0;transform:translateY(18px)}
.revealed{animation:revealUp .65s ease both}
@keyframes revealUp{to{opacity:1;transform:translateY(0)}}
.record-button.is-recording{animation:recordPulse 1s infinite}
@keyframes recordPulse{50%{box-shadow:0 0 0 18px rgba(214,41,145,.08),0 12px 28px rgba(112,44,194,.28)}}
.play-btn.playing{background:linear-gradient(100deg,#bd249e,#722bc7)}