:root{
  --bg: #f0efe9;
  --bg-2: #e7e5dd;
  --surface: #ffffff;
  --ink: #14161a;
  --muted: #6b6f76;
  --red: #e2001a;
  --red-dim: #e2001a55;
  --green: #16c172;
  --green-dim: #16c17255;
  --amber: #ffb000;
}

*{ box-sizing: border-box; }

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


.track-bg{
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #ffffff 0%, var(--bg) 55%, var(--bg-2) 100%);
}

.stripe-field{
  position:fixed;
  inset:0;
  z-index:-2;
  opacity:0.5;
  background-image: repeating-linear-gradient(
    -35deg,
    transparent 0px,
    transparent 68px,
    var(--red-dim) 68px,
    var(--red-dim) 72px,
    transparent 72px,
    transparent 140px,
    var(--green-dim) 140px,
    var(--green-dim) 144px
  );
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.15) 45%, transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.15) 45%, transparent 75%);
}

.curb{
  position:fixed;
  left:0; right:0; bottom:0;
  height:16px;
  z-index:-1;
  background-image: repeating-linear-gradient(
    90deg,
    var(--red) 0px, var(--red) 40px,
    #ffffff 40px, #ffffff 80px
  );
}


.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 48px 24px 80px;
  text-align:center;
  position:relative;
}

.logo-mark{
  width:200px;
  height:auto;
  margin-bottom:18px;
  filter: drop-shadow(0 14px 24px rgba(20,22,26,0.18));
}

h1{
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  font-style:italic;
  font-size: clamp(3rem, 11vw, 7.5rem);
  letter-spacing:0.01em;
  line-height:0.92;
  margin: 6px 0 0;
  color: var(--ink);
}

h1 .tv{
  color: var(--red);
  -webkit-text-stroke: 1.5px var(--ink);
}


.accent-bar{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:16px;
}
.accent-bar span{
  height:5px;
  border-radius:3px;
}
.accent-bar .seg-red{ width:64px; background: var(--red); }
.accent-bar .seg-green{ width:26px; background: var(--green); box-shadow: 0 0 10px 1px var(--green-dim); }

.subtitle-plate{
  margin-top: 22px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 10px 26px;
  background: var(--ink);
  border-radius: 999px;
  border: 1.5px solid var(--green);
}

.subtitle-plate .dot{
  width:9px; height:9px; border-radius:50%;
  background: var(--green);
  box-shadow: 0 0 10px 2px var(--green-dim);
}

.subtitle-plate span.txt{
  font-family:'Rajdhani', sans-serif;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#f4f3ef;
  font-size: clamp(0.85rem, 2vw, 1.15rem);
}

.lede{
  max-width: 520px;
  margin: 30px auto 0;
  color: var(--muted);
  font-size: 1rem;
  line-height:1.6;
}

.lede strong{ color: var(--ink); }


.social-row{
  display:flex;
  gap:16px;
  margin-top:42px;
}

.social-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 13px 22px;
  border-radius: 14px;
  text-decoration:none;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.92rem;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position:relative;
}
.social-btn svg{ width:20px; height:20px; flex-shrink:0; }

.social-btn.active{
  background: var(--ink);
  color:#fff;
}
.social-btn.active:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(20,22,26,0.28);
}
.social-btn.active svg{ fill:#fff; }

.social-btn.pending{
  background: transparent;
  color: var(--muted);
  border-color: #d3d0c6;
  cursor:default;
}
.social-btn.pending svg{ fill: var(--muted); opacity:0.7; }

.mail-link{
  display:inline-block;
  margin-top:20px;
  font-family:'Space Mono', monospace;
  font-size:0.85rem;
  letter-spacing:0.04em;
  color: var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.mail-link:hover{
  color: var(--ink);
  border-color: var(--green);
}



footer{
  position:relative;
  text-align:center;
  padding: 26px 24px 34px;
  font-family:'Space Mono', monospace;
  font-size: 11px;
  letter-spacing:0.08em;
  color: var(--muted);
  text-transform:uppercase;
}

@media (max-width: 480px){
  .social-row{ flex-direction:column; width:100%; max-width:280px; }
  .social-btn{ justify-content:center; }
}