/* Bigger visual footprint for each card */
.thumb { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
@media (min-width: 1024px){
  .thumb { aspect-ratio: 5 / 4; }
}

/* ===== Palette (rose + lavender on midnight) ===== */
body{
  background: linear-gradient(to bottom, #2a1f4d, #0f1226);
  color:#fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;
  overflow-x:hidden;
}

.headline-glow{
  text-shadow: 0 0 22px rgba(246,166,214,.28), 0 2px 0 rgba(0,0,0,.2);
}

.shiny-text{
  background: linear-gradient(90deg,#fff 0%,#ffd8ec 22%,#fff 45%,#efe2ff 65%,#fff 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation: shineSwipe 1s linear infinite;
  text-shadow:0 0 12px rgba(246,166,214,.10), 0 0 28px rgba(199,185,255,.08);
}
@keyframes shineSwipe{ to{ background-position:-200% 0; } }

.shine-orbit{ position:relative; display:inline-block; }
.shine-orbit::after{
  content:""; position:absolute; inset:-0.4rem; border-radius:1.2rem;
  background:
    radial-gradient(24px 24px at 0% 50%, rgba(246,166,214,.22), transparent 60%),
    radial-gradient(30px 30px at 50% 0%, rgba(199,185,255,.18), transparent 60%),
    radial-gradient(26px 26px at 100% 50%, rgba(217,70,239,.18), transparent 60%),
    radial-gradient(20px 20px at 50% 100%, rgba(246,166,214,.16), transparent 60%);
  filter: blur(10px); animation: orbitGlow 8.5s linear infinite; pointer-events:none;
}
@keyframes orbitGlow{ to{ transform: rotate(360deg);} }

.shine{ position:absolute; inset:0; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 20%, transparent 40%); transform:translateX(-100%); animation: shineBtn 2.2s ease-in-out infinite; }
@keyframes shineBtn{ 0%{ transform: translateX(-120%);} 60%{ transform: translateX(120%);} 100%{ transform: translateX(120%);} }

.animate-slow-float{ animation: slowFloat 12s ease-in-out infinite alternate; }
@keyframes slowFloat{ from{ transform: translateY(0)} to{ transform: translateY(-12px)} }

.thumb{ aspect-ratio:16/9; object-fit:cover; display:block; width:100%; height:auto; }
.ab-btn{ font-size:.75rem; line-height:1; padding:.35rem .55rem; border-radius:.5rem; background:rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.ab-active{ background:#fff; color:#000; }
.fade-seed{ opacity:0; transform: translateY(16px); }
.fade-in{ opacity:1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease; }

/* SEE WORKS ring */
.glow-ring{ position:relative; overflow:hidden; border-radius:9999px; padding:0; isolation:isolate; }
.glow-ring::before{
  content:""; position:absolute; inset:-4px; border-radius:inherit;
  background: conic-gradient(from 0deg, #f6a6d6, #d946ef, #a78bfa, #d946ef, #f6a6d6);
  animation: spinRing 3.2s linear infinite; z-index:0;
  filter: drop-shadow(0 0 18px rgba(246,166,214,.35));
}
.glow-ring::after{ content:""; position:absolute; inset:2px; border-radius:inherit; background: rgba(15,18,38,.9); z-index:1; }
@keyframes spinRing{ to{ transform: rotate(360deg);} }
.glow-ring>.btn-inner{ position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; padding:.95rem 2.2rem; font-weight:700; letter-spacing:.1px; color:#fff; }

/* CONTACT pill */
.pulse-ring{ position:relative; overflow:hidden; border-radius:9999px; isolation:isolate; background:#fff; color:#000; }
.pulse-ring::before{
  content:""; position:absolute; inset:-8px; border-radius:inherit;
  background: radial-gradient(60% 60% at 50% 50%, rgba(246,166,214,.45), transparent 70%);
  filter: blur(14px); animation: breathe 2.6s ease-in-out infinite; z-index:0;
}
@keyframes breathe{ 0%,100%{ transform: scale(.98); opacity:.65 } 50%{ transform: scale(1.03); opacity:.9 } }
.pulse-ring .btn-inner{ position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; padding:.95rem 2.2rem; font-weight:700; letter-spacing:.1px; }
.pulse-ring .btn-inner::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 20%, transparent 40%);
  transform: translateX(-120%); animation: sweep 2.8s ease-in-out infinite; pointer-events:none; mix-blend-mode: screen;
}
@keyframes sweep{ 0%{ transform: translateX(-120%);} 60%{ transform: translateX(120%);} 100%{ transform: translateX(120%);} }

/* ABOUT */
.about-wrap{ position:relative; }
.about-card{
  max-width:720px; margin-inline:auto; border-radius:1.5rem;
  background: linear-gradient(180deg, rgba(15,18,38,.55), rgba(15,18,38,.42));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px); overflow:hidden;
}
.about-topline{ height:6px; background: linear-gradient(90deg, #f6a6d6, #c7b9ff, #d946ef); box-shadow: 0 8px 24px rgba(246,166,214,.35); }
.about-text{ color: rgba(255,255,255,.80); }
.about-sub{ color: rgba(231,208,255,.92); letter-spacing:.18em; }
.avatar-ring{
  position:relative; width:108px; height:108px; border-radius:9999px; padding:4px;
  background: conic-gradient(from 0deg, #f6a6d6, #a78bfa, #d946ef, #a78bfa, #f6a6d6);
  box-shadow: 0 0 30px rgba(246,166,214,.35);
}
.avatar-ring img{ width:100%; height:100%; border-radius:9999px; object-fit:cover; background:#0b1024; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.verified-dot{ position:absolute; right:-4px; bottom:2px; width:26px; height:26px; border-radius:9999px; background:#e879f9; color:#100a1f; display:grid; place-items:center; font-size:14px; box-shadow: 0 6px 14px rgba(232,121,249,.35); }
.about-divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }
.social-pill{ width:64px; height:64px; border-radius:9999px; display:grid; place-items:center; color:#fff; background: radial-gradient(70% 70% at 30% 30%, #f6a6d6, #a78bfa); box-shadow: 0 14px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .18s ease, box-shadow .18s ease; }
.social-pill:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18); }
.pill-x{ background: radial-gradient(70% 70% at 30% 30%, #f0e6ff, #1a162b); }

/* Hero decorative layer */
.hero-grid{ background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px; }

.blob-rose{ background: radial-gradient(circle at center, rgba(246,166,214,.22), transparent 60%); }
.blob-lav{ background: radial-gradient(circle at center, rgba(199,185,255,.18), transparent 60%); }

/* ========= NEW: How It Works — Vertical Timeline ========= */
.kicker{ letter-spacing:.25em; color:rgba(246,166,214,.9); }
.hiw-rail{ position:relative; margin-top:2.5rem; }
.hiw-rail::before{
  content:""; position:absolute; left:28px; top:0; bottom:0; width:2px;
  background: linear-gradient(#3a2a66, rgba(246,166,214,.6), #3a2a66);
  border-radius:2px;
}
.hiw-step{
  position:relative; padding:1rem 1rem 1rem 4.5rem; margin-bottom:1rem;
  border-radius:1rem;
  background: linear-gradient(180deg, rgba(15,18,38,.55), rgba(15,18,38,.42));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hiw-step:hover{ border-color:rgba(246,166,214,.28); transform: translateY(-1px); box-shadow: 0 20px 46px rgba(0,0,0,.45); }
.hiw-dot{
  position:absolute; left:17px; top:1rem; width:24px; height:24px; border-radius:9999px; display:grid; place-items:center; font-weight:800; font-size:.9rem; color:#161933;
}
.hiw-dot::before{
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  background: conic-gradient(#f6a6d6, #d946ef, #a78bfa, #d946ef, #f6a6d6);
  filter: drop-shadow(0 0 12px rgba(246,166,214,.35));
}
.hiw-dot::after{ content:""; position:absolute; inset:3px; border-radius:inherit; background:#fff; opacity:.12; }

.hiw-head{ display:flex; align-items:center; gap:.6rem; }
.hiw-ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: radial-gradient(70% 70% at 30% 30%, #f6a6d6, #a78bfa);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.35);
}
.hiw-title{ font-weight:900; font-size:1.1rem; }
.hiw-note{ color: rgba(255,255,255,.72); font-size:.92rem; }

.hiw-body{ display:grid; grid-template-columns: 1fr; gap:.75rem; margin-top:.5rem; }
.hiw-step.has-media .hiw-body{ grid-template-columns: 1fr; }
@media (min-width: 768px){
  .hiw-step.has-media .hiw-body{ grid-template-columns: 1fr 320px; align-items:center; }
}

.hiw-fig{
  border-radius:.8rem; overflow:hidden;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  cursor: zoom-in;
}
.hiw-fig img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition: transform .25s ease; }
.hiw-fig:hover img{ transform: scale(1.02); }

/* reveal */
.hiw-seed{ opacity:0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; transition-delay: var(--d, 0ms); will-change: opacity, transform; }
.hiw-in{ opacity:1; transform: translateY(0); }