/* ===== Fonts ===== */
@font-face{font-family:"Nunito";font-style:normal;font-weight:600 900;font-display:swap;src:url(fonts/nunito-latin.woff2) format("woff2")}
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/silkscreen-latin.woff2) format("woff2")}

/* ===== Design tokens ===== */
:root{
  /* color */
  --ink:#1E2A4A;--muted:#56627F;--blue:#3D7BFF;--blue-deep:#2A55D9;
  --line:#CFE3FF;--line-strong:#9CC3FF;
  --surface:#FFFFFF;--canvas:#F6FBFF;--sky:#E5F1FF;
  --pink:#FF9ECF;--lemon:#FFF09A;--mint:#9EF0D2;
  --green:#15803D;--online:#22C55E;--heart:#FF5FA8;
  /* type */
  --pixel:"Silkscreen","Courier New",ui-monospace,monospace;
  --round:"Nunito",ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --fs-pixel-sm:11px;--fs-pixel:13px;
  --fs-sm:14px;--fs-md:15px;--fs-lg:17px;
  /* space (4px grid) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  /* shape */
  --r-sm:12px;--r-md:16px;--r-lg:20px;--r-pill:999px;
  --bw:2px;--pop:3px;--pop-hover:5px;
  --ease:.18s cubic-bezier(.3,.7,.4,1);
  /* layout */
  --gutter:var(--s4);
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#FDEBFF;scroll-behavior:smooth}
body{
  min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:var(--s10) var(--s4);overflow-x:hidden;
  font-family:var(--round);font-size:var(--fs-md);line-height:1.45;color:var(--ink);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 15% 22%,rgba(255,255,255,.9) 0 60px,transparent 61px),
    radial-gradient(circle at 22% 25%,rgba(255,255,255,.9) 0 45px,transparent 46px),
    radial-gradient(circle at 85% 70%,rgba(255,255,255,.85) 0 70px,transparent 71px),
    radial-gradient(circle at 78% 73%,rgba(255,255,255,.85) 0 50px,transparent 51px),
    linear-gradient(180deg,#BFE4FF,#E9F6FF 60%,#FDEBFF);
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
svg{display:block}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* Shared pixel label style */
.status,.eyebrow,.section-header,.card-label,.live-badge,.footer p{
  font-family:var(--pixel);font-weight:400;letter-spacing:.5px;line-height:1.2;text-transform:uppercase;
}

/* Shared "pop" button style */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);
  border-radius:var(--r-pill);border:var(--bw) solid var(--ink);box-shadow:var(--pop) var(--pop) 0 var(--ink);
  font-size:var(--fs-sm);font-weight:900;line-height:1;white-space:nowrap;
  transition:transform var(--ease),box-shadow var(--ease);
}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--pop-hover) var(--pop-hover) 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ===== Sparkles ===== */
.sparkle{
  position:fixed;width:28px;height:28px;background:#fff;pointer-events:none;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 6px #9ccfff);animation:twinkle 2.4s ease-in-out infinite;
}
.s1{top:8%;left:10%}
.s2{top:30%;right:12%;animation-delay:.6s}
.s3{bottom:22%;left:14%;animation-delay:1.2s}
.s4{bottom:8%;right:20%;animation-delay:1.8s}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}

/* ===== Device shell ===== */
.phone{
  position:relative;z-index:1;width:100%;max-width:480px;border-radius:40px;padding:var(--s3);
  background:linear-gradient(145deg,#fff,#d9ecff 45%,#b9d8ff);border:var(--bw) solid #fff;
  box-shadow:0 0 0 3px var(--line-strong),0 24px 48px rgba(61,123,255,.25),inset 0 2px 0 #fff;
}
.screen{border-radius:30px;overflow:hidden;background:var(--canvas);border:var(--bw) solid var(--line-strong)}

/* Status bar */
.status{
  display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s5);
  font-size:var(--fs-pixel);background:var(--surface);border-bottom:var(--bw) dashed var(--line);
}
.status-right{display:flex;align-items:center;gap:var(--s2)}
.bars{display:inline-flex;gap:2px;align-items:flex-end}
.bars i{display:block;width:4px;background:var(--ink)}
.bars i:nth-child(1){height:4px}
.bars i:nth-child(2){height:7px}
.bars i:nth-child(3){height:10px}
.bars i:nth-child(4){height:13px}
.batt{position:relative;display:inline-block;width:24px;height:12px;border:var(--bw) solid var(--ink);border-radius:3px}
.batt::before{content:"";position:absolute;inset:1px;width:70%;background:var(--online);border-radius:1px}
.batt::after{content:"";position:absolute;right:-5px;top:2px;width:3px;height:4px;background:var(--ink);border-radius:0 1px 1px 0}

/* ===== Profile ===== */
.profile{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--s8) var(--s6) var(--s6);background:linear-gradient(180deg,#DDEEFF,var(--canvas));
}
.eyebrow{font-size:var(--fs-pixel);color:var(--blue)}
.eyebrow .dots{display:inline-block;width:3ch;text-align:left}
.eyebrow .dots::after{content:"...";animation:dots 1.5s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.avatar{
  position:relative;width:112px;height:112px;margin:var(--s5) 0 var(--s4);
  border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 0 0 3px var(--blue),0 8px 20px rgba(61,123,255,.25);
}
.avatar::before,.avatar::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:var(--bw) solid rgba(61,123,255,.35);animation:ring 2s ease-out infinite}
.avatar::after{animation-delay:1s}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.25);opacity:0}}
.avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.profile h1{
  font-size:36px;font-weight:900;line-height:1.05;letter-spacing:-.5px;color:transparent;
  background:linear-gradient(180deg,#5C9BFF,var(--blue-deep));-webkit-background-clip:text;background-clip:text;
}
.profile h1 span{
  display:block;margin-top:var(--s2);font-size:18px;font-weight:800;line-height:1.3;letter-spacing:0;text-wrap:balance;
  color:var(--ink);-webkit-text-fill-color:var(--ink);
}
.intro{max-width:300px;margin-top:var(--s1);font-size:var(--fs-md);font-weight:600;line-height:1.5;color:var(--muted);text-wrap:balance}

/* Social buttons */
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:var(--s5)}
.social-link{min-width:132px}
.social-link.instagram{background:var(--pink)}
.social-link.tiktok{background:var(--mint)}

/* Answer button (mobile/tablet CTA) */
.answer{margin-top:var(--s3);min-width:276px;color:#fff;background:var(--green);font-size:var(--fs-md);animation:wiggle 2.4s ease-in-out infinite}
.answer svg{fill:#fff}
.answer:hover{animation-play-state:paused}
@keyframes wiggle{0%,80%,100%{rotate:0deg}84%{rotate:-4deg}88%{rotate:4deg}92%{rotate:-3deg}96%{rotate:2deg}}
#links-title{scroll-margin-top:64px}

/* ===== Links ===== */
.links-section{padding:var(--s6) var(--gutter) 0}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3);padding:0 var(--s1);font-size:var(--fs-pixel);color:var(--muted)}
.section-header h2{font-size:inherit;font-weight:inherit}
.link-count{padding:var(--s1) var(--s3);border-radius:var(--r-pill);background:var(--lemon);border:var(--bw) solid var(--ink);color:var(--ink);font-size:var(--fs-pixel-sm)}
.link-list{display:grid;gap:var(--s3)}
.link-card{
  --tint:#EEF5FF;
  display:grid;grid-template-columns:56px minmax(0,1fr) 40px;align-items:center;column-gap:var(--s3);
  min-height:84px;padding:var(--s3) var(--s4) var(--s3) var(--s3);border-radius:var(--r-lg);
  background:var(--surface);border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--brand);
  transition:transform var(--ease),box-shadow var(--ease);
}
.link-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--brand)}
.link-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--brand)}
.link-card:focus-visible{outline-offset:4px}
.card-icon{
  width:56px;height:56px;padding:6px;border-radius:var(--r-md);background:var(--tint);
  border:var(--bw) solid var(--ink);box-shadow:inset 0 -4px 0 rgba(30,42,74,.06);
}
.card-icon svg{width:100%;height:100%}
.card-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.card-label{font-size:var(--fs-pixel-sm);color:var(--muted)}
.card-text strong{font-size:var(--fs-lg);font-weight:900;line-height:1.25}
.card-text small{font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--muted)}
.card-go{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);
  background:var(--brand);border:var(--bw) solid var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(30,42,74,.08);
  transition:transform var(--ease);
}
.card-go svg{width:22px;height:22px}
.link-card:hover .card-go{transform:translate(2px,-2px)}

/* About box */
.quick-access{
  display:flex;align-items:center;gap:var(--s3);margin:var(--s6) var(--gutter) 0;padding:var(--s3) var(--s4);border-radius:var(--r-lg);
  background:var(--sky);border:var(--bw) dashed var(--line-strong);
}
.quick-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lemon);border:var(--bw) solid var(--ink)}
.quick-icon::before{content:"";width:16px;height:16px;background:var(--ink);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.quick-text{flex:1;min-width:0}
.quick-access strong{display:block;font-size:var(--fs-md);font-weight:900;line-height:1.3}
.quick-text>span{display:block;margin-top:2px;font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--muted)}
.live-badge{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:var(--s1) var(--s3);border-radius:var(--r-pill);
  font-size:var(--fs-pixel-sm);background:var(--surface);border:var(--bw) solid var(--ink);
}
.live-badge i{width:8px;height:8px;border-radius:50%;background:var(--online);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* ===== Footer ===== */
.footer{padding:var(--s6) var(--s4) var(--s8);text-align:center}
.footer p{font-size:var(--fs-pixel-sm);color:var(--muted)}
.footer .heart{color:var(--heart)}

/* ===== Mobile: full-screen app ===== */
@media (max-width:480px){
  :root{--gutter:var(--s3)}
  body{display:block;padding:0;background:var(--canvas)}
  .sparkle{display:none}
  .phone{max-width:none;min-height:100vh;min-height:100dvh;padding:0;border:0;border-radius:0;box-shadow:none;background:var(--canvas)}
  .screen{min-height:100vh;min-height:100dvh;border:0;border-radius:0}
  .status{position:sticky;top:0;z-index:5;padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s3)}
  .profile{padding:var(--s6) var(--s4) var(--s4)}
  .avatar{width:100px;height:100px}
  .profile h1{font-size:32px}
  .socials{width:100%;max-width:300px;display:grid;grid-template-columns:1fr 1fr}
  .social-link{min-width:0}
  .answer{width:100%;max-width:300px;min-width:0}
  .link-card{padding:var(--s3);column-gap:var(--s3)}
  .card-text strong{font-size:16px}
  .footer{padding:var(--s6) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom))}
}
@media (max-width:340px){
  .link-card{grid-template-columns:48px minmax(0,1fr) 36px}
  .card-icon{width:48px;height:48px;padding:5px}
  .card-go{width:36px;height:36px}
  .live-badge{display:none}
}

/* ===== Desktop: wide device, two columns ===== */
@media (min-width:960px){
  :root{--gutter:var(--s8)}
  body{align-items:center;padding:var(--s10) var(--s8)}
  .phone{max-width:1040px;border-radius:44px;padding:14px}
  .screen{
    display:grid;border-radius:32px;
    grid-template-columns:minmax(320px,380px) 1fr;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"status status" "profile links" "footer quick";
  }
  .status{grid-area:status}
  .answer{display:none}
  .profile{grid-area:profile;justify-content:center;padding:var(--s10) var(--s8);border-right:var(--bw) dashed var(--line)}
  .avatar{width:136px;height:136px;margin:var(--s6) 0 var(--s5)}
  .profile h1{font-size:44px}
  .profile h1 span{font-size:20px}
  .links-section{grid-area:links;padding:var(--s8) var(--gutter) 0}
  .link-list{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .link-card{
    grid-template-columns:56px 1fr 40px;grid-template-rows:auto 1fr;grid-template-areas:"icon . go" "text text text";
    align-items:start;align-content:start;row-gap:var(--s3);padding:var(--s4);
  }
  .card-icon{grid-area:icon}
  .card-go{grid-area:go}
  .card-text{grid-area:text}
  .link-card:last-child:nth-child(odd){grid-column:1 / -1;grid-template-rows:auto;grid-template-areas:"icon text go";align-items:center}
  .quick-access{grid-area:quick;align-self:end;margin:var(--s6) var(--gutter) var(--s8)}
  .footer{grid-area:footer;display:flex;align-items:flex-end;justify-content:center;padding:var(--s6) var(--s8) var(--s8);border-right:var(--bw) dashed var(--line)}
  .footer p{line-height:44px}
}

/* Short desktop screens */
@media (min-width:960px) and (max-height:860px){
  body{padding:var(--s6) var(--s8)}
  .profile{padding:var(--s8) var(--s6)}
  .avatar{width:112px;height:112px;margin:var(--s4) 0}
  .profile h1{font-size:40px}
  .links-section{padding-top:var(--s6)}
  .link-list{gap:var(--s3)}
  .link-card{row-gap:var(--s2);padding:var(--s3) var(--s4)}
  .quick-access{margin:var(--s4) var(--gutter) var(--s6)}
  .footer{padding:var(--s4) var(--s6) var(--s6)}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}