:root{
    --bg-0:#0a0a0b;
    --bg-1:#121214;
    --surface:#17171a;
    --surface-2:#1e1e22;
    --line:#2a2a2e;
    --red:#e01b2e;
    --red-glow:#ff2d43;
    --white:#f3f2ee;
    --muted:#8b8b92;
    --radius:22px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg-0);
    color:var(--white);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }

  body.loading{ overflow:hidden; }

  /* ---------- Loading screen ---------- */
  .loader{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg-0);
    transition:opacity 0.6s ease, visibility 0.6s ease;
  }
  .loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .loader-mark{
    position:relative;
    width:96px;
    height:96px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
    border:1px solid var(--line);
  }
  .loader-mark::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:2px solid transparent;
    border-top-color:var(--red);
    border-right-color:var(--red-glow);
    animation:loaderSpin 0.9s linear infinite;
  }
  .loader-logo{
    font-family:'Bebas Neue', sans-serif;
    font-size:34px;
    letter-spacing:0.06em;
    color:var(--red-glow);
    animation:loaderPulse 1.4s ease-in-out infinite;
  }
  .loader-caption{
    position:absolute;
    bottom:calc(50% - 84px);
    left:50%;
    transform:translateX(-50%);
    color:var(--muted);
    font-size:11.5px;
    letter-spacing:0.24em;
    text-transform:uppercase;
  }
  @keyframes loaderSpin{ to{ transform:rotate(360deg); } }
  @keyframes loaderPulse{
    0%,100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(255,45,67,0)); }
    50%{ transform:scale(1.08); filter:drop-shadow(0 0 10px rgba(255,45,67,0.55)); }
  }
  @media (prefers-reduced-motion:reduce){
    .loader-mark::before, .loader-logo{ animation:none; }
  }

  /* ---------- Mouse glow (Apple-style) ---------- */
  .mouse-glow{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:radial-gradient(60px circle at var(--mx,50%) var(--my,50%), rgba(0, 0, 0, 0.14), transparent 40%);
    opacity:0;
    transition:opacity 0.3s ease;
  }
  .mouse-glow.active{ opacity:1; }
  @media (hover:none){ .mouse-glow{ display:none; } }

  /* ---------- Background ---------- */
  .bg-layer{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    background:
      radial-gradient(circle at 18% 20%, rgba(224,27,46,0.16), transparent 45%),
      radial-gradient(circle at 85% 75%, rgba(224,27,46,0.10), transparent 50%),
      linear-gradient(180deg, #08080a 0%, #0c0c0e 100%);
  }

  .bg-grid{
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:radial-gradient(circle at 50% 30%, black, transparent 75%);
  }

  .brush{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:0.35;
    background:var(--red);
    animation:drift 18s ease-in-out infinite;
  }
  .brush.b1{ width:380px; height:380px; top:-120px; left:-100px; animation-delay:0s;}
  .brush.b2{ width:300px; height:300px; bottom:-100px; right:-80px; background:#7a0f1c; animation-delay:4s;}
  .brush.b3{ width:220px; height:220px; top:55%; left:60%; background:#ff3b4e; opacity:0.15; animation-delay:8s;}

  @keyframes drift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(30px,-25px) scale(1.08); }
  }

  .scan-line{
    position:absolute;
    left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(224,27,46,0.6), transparent);
    animation:scan 12s linear infinite;
    opacity:0.5;
  }

  @keyframes scan{
    0%{ top:-5%; }
    100%{ top:105%; }
  }

  @media (prefers-reduced-motion:reduce){
    .brush,.scan-line,*{animation:none !important; transition:none !important;}
  }

  /* ---------- Layout ---------- */
  .wrap{
    position:relative;
    z-index:3;
    max-width:480px;
    margin:0 auto;
    padding:56px 22px 60px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  /* Crown mark */
  .mark{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--red);
    font-size:12px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    margin-bottom:28px;
    opacity:0;
    animation:fadeUp 0.8s ease forwards 0.1s;
  }
  .mark i{ font-size:14px; animation:pulse 2.4s ease-in-out infinite;}
  @keyframes pulse{
    0%,100%{ filter:drop-shadow(0 0 0 rgba(255,45,67,0)); transform:scale(1);}
    50%{ filter:drop-shadow(0 0 6px rgba(255,45,67,0.7)); transform:scale(1.1);}
  }

  /* Photo */
  .photo-ring{
    position:relative;
    width:196px;
    height:196px;
    border-radius:50%;
    padding:5px;
    background:conic-gradient(from 0deg, var(--red), #4a0812, var(--red));
    opacity:0;
    animation:fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) forwards 0.25s, float 5s ease-in-out infinite 1.2s;
    margin-bottom:26px;
  }
  @keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-9px); }
  }
  @media (prefers-reduced-motion:reduce){
    .photo-ring{ animation:fadeUp 0.9s ease forwards 0.25s; }
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .photo-inner{
    width:100%; height:100%;
    border-radius:50%;
    overflow:hidden;
    background:var(--bg-1);
    border:4px solid var(--bg-0);
    /*animation:counterspin 9s linear infinite;*/
  }
  @keyframes counterspin{ to{ transform:rotate(-360deg); } }
  .photo-inner img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 22%;
    display:block;
  }

  .status-dot{
    position:absolute;
    bottom:8px; right:10px;
    width:18px; height:18px;
    background:#28d179;
    border:3px solid var(--bg-0);
    border-radius:50%;
    box-shadow:0 0 0 0 rgba(40,209,121,0.6);
    animation:ping 2s ease-out infinite;
  }
  @keyframes ping{
    0%{ box-shadow:0 0 0 0 rgba(40,209,121,0.5);}
    70%{ box-shadow:0 0 0 10px rgba(40,209,121,0);}
    100%{ box-shadow:0 0 0 0 rgba(40,209,121,0);}
  }

  /* Name */
  .name-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    opacity:0;
    animation:fadeUpBlur 0.9s cubic-bezier(0.22,1,0.36,1) forwards 0.4s;
  }
  .name{
    font-family:'Bebas Neue', sans-serif;
    font-size:52px;
    letter-spacing:0.03em;
    line-height:1;
    text-align:center;
  }
  .verified-badge{
    width:24px;
    height:24px;
    flex-shrink:0;
    color:#3897f0;
    filter:drop-shadow(0 0 6px rgba(56,151,240,0.55));
    animation:badgePop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards 1s;
    transform:scale(0);
  }
  @keyframes badgePop{ to{ transform:scale(1); } }
  .handle{
    color:var(--muted);
    font-size:14px;
    letter-spacing:0.05em;
    margin-top:6px;
    margin-bottom:10px;
    opacity:0;
    animation:fadeUpBlur 0.9s cubic-bezier(0.22,1,0.36,1) forwards 0.5s;
  }

  .location{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--muted);
    font-size:13px;
    letter-spacing:0.03em;
    margin-bottom:18px;
    opacity:0;
    animation:fadeUpBlur 0.9s cubic-bezier(0.22,1,0.36,1) forwards 0.56s;
  }
  .location i{ color:var(--red); font-size:12px; }

  .tagline{
    text-align:center;
    font-size:15px;
    color:#c9c9cf;
    max-width:300px;
    line-height:1.5;
    margin-bottom:28px;
    opacity:0;
    animation:fadeUpBlur 0.9s cubic-bezier(0.22,1,0.36,1) forwards 0.6s;
  }
  .tagline .accent{ color:var(--red); font-weight:700; }

  /* Info card */
  .card{
    width:100%;
    background:linear-gradient(180deg, rgba(23,23,26,0.55), rgba(30,30,34,0.45));
    backdrop-filter:blur(15px) saturate(140%);
    -webkit-backdrop-filter:blur(15px) saturate(140%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:16px;
    opacity:0;
    animation:fadeUpBlur 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  .card:nth-of-type(1){ animation-delay:0.7s; }

  .info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 4px;
  }
  .info-row + .info-row{ border-top:1px solid var(--line); }
  .info-label{
    display:flex; align-items:center; gap:10px;
    color:var(--muted);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .info-label i{ font-size:14px; width:16px; text-align:center; color:var(--red); flex-shrink:0; }
  .info-value{
    font-size:14.5px;
    font-weight:600;
    color:var(--white);
    text-align:right;
  }
  .info-value.mono{ font-variant-numeric:tabular-nums; letter-spacing:0.02em; }

  .countdown-wrap{
    display:flex;
    gap:8px;
    margin-top:2px;
  }
  .cd-box{
    background:var(--bg-0);
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px 10px;
    text-align:center;
    min-width:52px;
  }
  .cd-num{
    font-family:'Bebas Neue', sans-serif;
    font-size:20px;
    color:var(--red-glow);
    line-height:1;
  }
  .cd-label{
    font-size:9px;
    color:var(--muted);
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-top:2px;
  }

  /* Contact buttons */
  .links{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .link-btn{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:15px 16px;
    background:rgba(23,23,26,0.5);
    backdrop-filter:blur(15px) saturate(140%);
    -webkit-backdrop-filter:blur(15px) saturate(140%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    color:var(--white);
    text-decoration:none;
    font-size:14.5px;
    font-weight:600;
    position:relative;
    overflow:hidden;
    transition:transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    opacity:0;
    animation:fadeUpBlur 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
    cursor:pointer;
  }
  .link-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(224,27,46,0.12), transparent);
    transform:translateX(-100%);
    transition:transform 0.6s ease;
  }
  .link-btn:hover::before{ transform:translateX(100%); }
  .link-btn:hover{
    transform:translateY(-2px) scale(1.015);
    border-color:rgba(224,27,46,0.5);
    background:rgba(30,30,34,0.65);
    box-shadow:0 8px 24px rgba(224,27,46,0.12);
  }
  .link-btn:active{ transform:translateY(0) scale(0.98); }

  .link-icon{
    width:38px; height:38px;
    flex-shrink:0;
    border-radius:10px;
    background:var(--bg-0);
    display:flex; align-items:center; justify-content:center;
    color:var(--red);
  }
  .link-icon i{ font-size:17px; }
  .link-text{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0;}
  .link-title{ color:var(--white); }
  .link-sub{ color:var(--muted); font-size:12px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .link-arrow{ color:var(--muted); font-size:14px; flex-shrink:0; transition:transform 0.25s ease, color 0.25s ease;}
  .link-btn:hover .link-arrow{ transform:translateX(3px); color:var(--red); }

  footer{
    margin-top:34px;
    text-align:center;
    color:var(--muted);
    font-size:11.5px;
    letter-spacing:0.06em;
    opacity:0;
    animation:fadeUp 0.9s ease forwards 1.3s;
  }
  footer span{ color:var(--red); }

  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @keyframes fadeUpBlur{
    from{ opacity:0; transform:translateY(18px) scale(0.96); filter:blur(6px); }
    to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  }

  :focus-visible{
    outline:2px solid var(--red);
    outline-offset:2px;
  }

  @media (max-width:420px){
    .name{ font-size:44px; }
    .photo-ring{ width:168px; height:168px; }
  }

  /* ---------- NFC Card Modal ---------- */
  .nfc-overlay{
    position:fixed;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(6,6,8,0.55);
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.35s ease, visibility 0.35s ease;
    padding:24px;
  }
  .nfc-overlay.open{
    opacity:1;
    visibility:visible;
  }

  .nfc-hint{
    position:absolute;
    bottom:36px;
    left:50%;
    transform:translateX(-50%);
    color:var(--muted);
    font-size:12.5px;
    letter-spacing:0.04em;
    text-align:center;
    opacity:0;
    transition:opacity 0.35s ease 0.2s;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .nfc-overlay.open .nfc-hint{ opacity:1; }
  .nfc-hint i{ color:var(--red); }

  .nfc-close{
    position:absolute;
    top:22px;
    right:22px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    cursor:pointer;
    transition:background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  }
  .nfc-close:hover{
    background:var(--surface-2);
    border-color:rgba(224,27,46,0.5);
    transform:rotate(90deg);
  }

  .nfc-card-3d{
    width:min(88vw, 380px);
    aspect-ratio:1013 / 638;
    perspective:1600px;
    cursor:pointer;
    transform:scale(0.85);
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  }
  .nfc-overlay.open .nfc-card-3d{
    transform:scale(1);
  }
  .nfc-overlay.closing .nfc-card-3d{
    transform:scale(0.7);
  }

.nfc-card-inner{
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:transform .7s;
}

.nfc-card-inner.flipped{
    transform:rotateY(180deg);
}

.nfc-card-face{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    overflow:hidden;
    border-radius:18px;
}

.nfc-card-face.front{
    transform:rotateY(0deg);
}

.nfc-card-face.back{
    transform:rotateY(180deg);
}
  .nfc-card-face img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    pointer-events:none;
    -webkit-user-drag:none;
  }

  @media (prefers-reduced-motion:reduce){
    .nfc-card-inner{ transition:none; }
  }