:root{
  --brand:#E11D48;
  --brand-deep:#BE123C;
  --sun:#FBBF24;
  --teal:#14B8A6;
  --violet:#8B5CF6;
  --sky:#38BDF8;
}
html{scroll-behavior:smooth;}
body{font-family:"Poppins",ui-sans-serif,system-ui,sans-serif;}

/* ---- nav ---- */
#nav.scrolled{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);box-shadow:0 4px 24px rgba(15,23,42,.07);}
.nav-link{padding:.5rem .9rem;border-radius:9999px;color:#334155;transition:all .2s;}
.nav-link:hover{background:rgba(225,29,72,.08);color:var(--brand);}

/* ---- section kicker ---- */
.section-kicker{display:inline-block;font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:rgba(225,29,72,.1);padding:.35rem .8rem;border-radius:9999px;}

/* ---- decorative blobs ---- */
.blob{position:absolute;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none;}
.blob-1{width:420px;height:420px;background:rgba(225,29,72,.28);top:-80px;left:-100px;animation:float1 14s ease-in-out infinite;}
.blob-2{width:360px;height:360px;background:rgba(139,92,246,.22);bottom:-60px;right:-80px;animation:float2 18s ease-in-out infinite;}
.blob-3{width:300px;height:300px;background:rgba(20,184,166,.2);top:40%;right:30%;animation:float1 16s ease-in-out infinite reverse;}

/* ---- geometric shapes ---- */
.shape{position:absolute;z-index:0;pointer-events:none;}
.shape-ring{width:80px;height:80px;border:10px solid var(--sun);border-radius:50%;opacity:.7;animation:spin 18s linear infinite;}
.shape-tri{width:0;height:0;border-left:32px solid transparent;border-right:32px solid transparent;border-bottom:56px solid var(--teal);opacity:.7;animation:float2 12s ease-in-out infinite;}
.shape-plus{width:56px;height:56px;background:
  linear-gradient(var(--violet),var(--violet)) center/100% 30% no-repeat,
  linear-gradient(var(--violet),var(--violet)) center/30% 100% no-repeat;
  opacity:.7;animation:spin 20s linear infinite;}
.shape-dot{width:34px;height:34px;border-radius:50%;background:var(--sky);opacity:.8;animation:float1 10s ease-in-out infinite;}
.squiggle{width:90px;height:30px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='30' viewBox='0 0 90 30'><path d='M2 15 Q12 2 22 15 T42 15 T62 15 T82 15' fill='none' stroke='%23E11D48' stroke-width='5' stroke-linecap='round'/></svg>");background-repeat:no-repeat;opacity:.7;animation:float2 9s ease-in-out infinite;}
.dots-grid{position:absolute;width:120px;height:120px;background-image:radial-gradient(currentColor 3px,transparent 3px);background-size:22px 22px;color:rgba(225,29,72,.35);z-index:0;pointer-events:none;}

/* ---- floating badges (hero card) ---- */
.badge-float{position:absolute;padding:.55rem 1rem;border-radius:9999px;font-weight:700;font-size:.85rem;box-shadow:0 10px 30px rgba(0,0,0,.15);animation:float1 6s ease-in-out infinite;z-index:10;}
.badge-float:nth-of-type(2){animation-delay:1.5s;}
.badge-float:nth-of-type(3){animation-delay:3s;}

/* ---- marquee ---- */
.marquee{display:flex;white-space:nowrap;width:max-content;animation:scroll 28s linear infinite;}
.marquee span{padding-right:1rem;}

/* ---- product / work cards ---- */
.prod-card{position:relative;border-radius:1.5rem;background:#fff;border:1px solid #f1f5f9;padding:1.75rem;overflow:hidden;transition:transform .25s, box-shadow .25s;}
.prod-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(15,23,42,.25);}
.work-card{cursor:pointer;border-radius:1.25rem;overflow:hidden;position:relative;background:#0f172a;aspect-ratio:16/10;}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.work-card:hover img{transform:scale(1.07);}
.work-card .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.88),rgba(15,23,42,0) 55%);opacity:0;transition:opacity .3s;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;}
.work-card:hover .ov{opacity:1;}

/* filter chips */
.chip{padding:.5rem 1.1rem;border-radius:9999px;font-weight:600;font-size:.85rem;border:2px solid #e2e8f0;color:#475569;cursor:pointer;transition:all .2s;background:#fff;}
.chip:hover{border-color:var(--brand);color:var(--brand);}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff;}

/* skills */
.skill-card{border-radius:1.5rem;padding:1.75rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);}
.tech-tag{padding:.4rem .9rem;border-radius:9999px;font-size:.8rem;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);}

/* timeline */
.tl-item{position:relative;padding-left:2.5rem;padding-bottom:2.25rem;}
.tl-item:before{content:"";position:absolute;left:7px;top:6px;bottom:-6px;width:2px;background:#e2e8f0;}
.tl-item:last-child:before{display:none;}
.tl-dot{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(225,29,72,.15);}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* keyframes */
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(18px) rotate(8deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scroll{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion: reduce){
  .blob,.shape,.squiggle,.badge-float,.marquee,.shape-ring,.shape-plus{animation:none!important;}
}

/* ---- video cards ---- */
.video-card{cursor:pointer;border-radius:1.25rem;overflow:hidden;position:relative;background:#0f172a;aspect-ratio:16/9;box-shadow:0 12px 30px -16px rgba(15,23,42,.4);transition:transform .25s, box-shadow .25s;}
.video-card:hover{transform:translateY(-5px);box-shadow:0 26px 55px -24px rgba(15,23,42,.55);}
.video-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.video-card:hover img{transform:scale(1.06);}
.video-card .vov{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.92),rgba(15,23,42,.04) 62%);display:flex;flex-direction:column;justify-content:flex-end;padding:1rem 1.1rem;}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:9999px;background:rgba(225,29,72,.92);display:grid;place-items:center;box-shadow:0 10px 30px rgba(225,29,72,.5);transition:transform .25s, background .25s;}
.video-card:hover .play-btn{transform:translate(-50%,-50%) scale(1.12);background:var(--brand);}
.play-btn svg{width:26px;height:26px;fill:#fff;margin-left:3px;}
.channel-chip{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.1rem;border-radius:9999px;background:#fff;border:1px solid #e2e8f0;font-weight:600;font-size:.9rem;color:#334155;transition:all .2s;}
.channel-chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(225,29,72,.4);}
.channel-chip svg{width:18px;height:18px;color:#FF0000;flex:none;}