/* ===================================================================
   VYRA — single dark theme
   =================================================================== */

:root{
  --bg:#08080b;
  --bg-raised:#141119;
  --bg-raised-2:#1c1826;

  --ink:#f6f4ec;
  --ink-dim:#aca6b9;
  --ink-faint:#726d80;

  --yellow:#faff14;
  --pink:#ff206e;
  --teal:#41ead4;

  --line:rgba(246,244,236,0.14);
  --line-soft:rgba(246,244,236,0.07);

  --pink-tint:rgba(255,32,110,0.10);
  --teal-tint:rgba(65,234,212,0.10);
  --yellow-tint:rgba(250,255,20,0.10);

  --shadow-glow-pink:0 0 40px rgba(255,32,110,0.25);
  --shadow-glow-teal:0 0 40px rgba(65,234,212,0.22);

  --font-display:"Unbounded","Arial Black",sans-serif;
  --font-body:"Hanken Grotesk","Segoe UI",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}


*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }

}


body{
  margin:0;
  background:var(--bg);
  color:var(--ink);

  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;

  -webkit-font-smoothing:antialiased;

  overflow-x:hidden;
}


body.modal-open{
  overflow:hidden;
}


img{
  max-width:100%;
  display:block;
}


a{
  color:inherit;
}


h1,
h2,
h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
  letter-spacing:-0.01em;
}


p{
  margin:0;
}


.wrap{
  max-width:1180px;
  margin:0 auto;

  padding-left:clamp(20px,4vw,48px);
  padding-right:clamp(20px,4vw,48px);
}


section{
  position:relative;
}


/* ---------- eyebrows ---------- */

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;

  display:inline-flex;
  align-items:center;
  gap:9px;

  color:var(--ink-dim);
}


.eyebrow::before{
  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:currentColor;

  flex:none;
}


.eyebrow.c-pink{
  color:var(--pink);
}


.eyebrow.c-teal{
  color:var(--teal);
}


.eyebrow.c-yellow{
  color:var(--yellow);
}


/* ---------- grain ---------- */

.grain{
  position:fixed;
  inset:0;

  pointer-events:none;

  z-index:60;

  opacity:0.05;

  mix-blend-mode:overlay;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---------- nav ---------- */

header{
  position:sticky;
  top:0;

  z-index:50;

  background:rgba(8,8,11,0.78);

  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);

  border-bottom:1px solid var(--line-soft);
}


.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-top:14px;
  padding-bottom:14px;
}


.logo-mark{
  height:26px;
  width:auto;
}


.nav-links{
  display:flex;
  align-items:center;
  gap:28px;

  list-style:none;

  margin:0;
  padding:0;
}


.nav-links a{
  text-decoration:none;

  font-size:14.5px;
  font-weight:600;

  color:var(--ink-dim);

  transition:color .15s ease;
}


.nav-links a:hover{
  color:var(--ink);
}


.nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
}


/* ---------- buttons ---------- */

.btn{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14.5px;

  border-radius:999px;

  padding:12px 22px;

  border:1px solid transparent;

  cursor:pointer;

  text-decoration:none;

  display:inline-flex;
  align-items:center;

  gap:8px;

  white-space:nowrap;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    opacity .18s ease;
}


.btn:hover{
  transform:translateY(-2px);
}


.btn:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
}


.btn-solid{
  background:var(--yellow);
  color:#0a0a0a;
}


.btn-solid:hover{
  box-shadow:
    0 0 0 1px var(--yellow),
    0 10px 30px rgba(250,255,20,0.25);
}


.btn-outline{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
	background: var(--bg);
}


.btn-outline:hover{
  border-color:var(--ink);
}


.btn-ghost{
  background:transparent;
  color:var(--ink-dim);

  padding:12px 4px;
}


.btn-sm{
  padding:9px 16px;
  font-size:13px;
}


.btn:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
}


.btn:disabled:hover{
  transform:none;
  box-shadow:none;
}


@media (max-width:760px){

  .nav-links{
    display:none;
  }

}


/* ---------- hero ---------- */

.hero{
  padding-top:clamp(40px,8vw,60px);
  padding-bottom:clamp(48px,7vw,72px);

  background:
    radial-gradient(
      ellipse 900px 520px at 82% -8%,
      rgba(255,32,110,0.20),
      transparent 60%
    ),
    radial-gradient(
      ellipse 700px 480px at -10% 10%,
      rgba(65,234,212,0.14),
      transparent 60%
    ),
    var(--bg);

  border-bottom:1px solid var(--line-soft);
}


.hero-grid{
  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:clamp(28px,5vw,60px);

  align-items:center;
}


@media (max-width:900px){

  .hero-grid{
    grid-template-columns:1fr;
  }

}


@media (max-width:420px){

  .board{
    padding:16px;
  }

  .board-song .t{
    font-size:12.5px;
  }

  .board-votes{
    min-width:38px;
    font-size:12px;
    padding:5px 6px;
  }

}


.hero h1{
  font-size:clamp(2.5rem,5.4vw,4.1rem);

  letter-spacing:-0.02em;
}


.hero h1 em{
  font-style:normal;

  color:var(--yellow);

  text-shadow:0 0 26px rgba(250,255,20,0.35);
}


.hero-sub{
  margin-top:22px;

  font-size:clamp(1.02rem,1.6vw,1.2rem);

  color:var(--ink-dim);

  max-width:46ch;
	
}


.hero-sub strong{
  color:var(--ink);
  font-weight:700;
}


.hero-ctas{
	display:flex;
	gap:14px;
	flex-wrap:wrap;
	margin-top:34px;
	justify-content:center;
	background: var(--yellow);
	padding: 0.5em;
}


.hero-proof{
  margin-top:30px;

  display:flex;

  gap:22px;

  flex-wrap:wrap;

  font-family:var(--font-mono);

  font-size:12.5px;

  color:var(--ink-faint);

  letter-spacing:0.02em;
}


.hero-proof b{
  color:var(--ink);
  font-weight:600;
}


/* ---------- leaderboard ---------- */

.board{
  background:linear-gradient(
    180deg,
    var(--bg-raised),
    var(--bg-raised-2)
  );

  border:1px solid var(--line);

  border-radius:22px;

  padding:20px;

  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.6);

  position:relative;
}


.board::before{
  content:"";

  position:absolute;
  inset:-1px;

  border-radius:22px;

  padding:1px;

  background:
    linear-gradient(
      135deg,
      rgba(255,32,110,0.5),
      rgba(65,234,212,0.3),
      transparent 60%
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;

  mask-composite:exclude;

  pointer-events:none;
}


.board-head{
  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:2px 6px 16px;

  border-bottom:1px solid var(--line-soft);

  margin-bottom:14px;
}


.board-head .eyebrow{
  font-size:11.5px;
}


.board-live{
  display:flex;

  align-items:center;

  gap:6px;

  font-family:var(--font-mono);

  font-size:11px;

  color:var(--pink);

  letter-spacing:.1em;
}


.board-live .dot{
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--pink);

  box-shadow:0 0 8px var(--pink);

  animation:pulse 1.4s ease-in-out infinite;
}


@keyframes pulse{

  0%,

  100%{
    opacity:1;
  }

  50%{
    opacity:.35;
  }

}


.board-list{
  display:flex;

  flex-direction:column;

  gap:8px;
}


.board-row{
  display:flex;

  align-items:center;

  gap:12px;

  background:rgba(246,244,236,0.03);

  border:1px solid var(--line-soft);

  border-radius:12px;

  padding:9px 12px;

  will-change:transform;
}


.board-rank{
  font-family:var(--font-mono);

  font-weight:600;

  font-size:12px;

  color:var(--ink-faint);

  width:16px;

  flex:none;
}


.board-votes{
  font-family:var(--font-mono);

  font-weight:700;

  font-size:13px;

  border-radius:8px;

  padding:5px 8px;

  flex:none;

  color:#0a0a0a;

  min-width:44px;

  text-align:center;

  font-variant-numeric:tabular-nums;

  transition:background .3s ease;
}


.board-song{
  min-width:0;
  flex:1;
}


.board-song .t{
  font-weight:700;

  font-size:13.5px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


.board-song .a{
  font-size:11.5px;

  color:var(--ink-faint);

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


.board-row.bump .board-votes{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.5) inset;
}


.board-foot{
  margin-top:14px;

  padding-top:14px;

  border-top:1px solid var(--line-soft);

  display:flex;

  justify-content:space-between;

  align-items:center;

  font-family:var(--font-mono);

  font-size:11px;

  color:var(--ink-faint);
}


/* ---------- marquee ---------- */

.marquee-wrap{
  background:var(--yellow);
  color:#0a0a0a;

  overflow:hidden;

  border-bottom:1px solid var(--line-soft);
}


.marquee{
  display:flex;

  gap:0;

  width:max-content;

  animation:scroll 26s linear infinite;

  padding:13px 0;
}


@keyframes scroll{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}


.marquee span{
  font-family:var(--font-display);

  font-weight:700;

  font-size:15px;

  text-transform:uppercase;

  letter-spacing:.03em;

  padding:0 26px;

  display:flex;

  align-items:center;

  gap:26px;

  white-space:nowrap;
}


.marquee span::after{
  content:"●";

  font-size:8px;

  opacity:.5;
}


/* ---------- generic sections ---------- */

.section{
  padding-top:clamp(64px,9vw,110px);
  padding-bottom:clamp(64px,9vw,110px);
}


.section-head{
  max-width:640px;

  margin-bottom:clamp(36px,5vw,56px);
}


.section-head h2{
  font-size:clamp(1.9rem,3.6vw,2.7rem);

  margin-top:14px;
}


.section-head p{
  margin-top:16px;

  color:var(--ink-dim);

  font-size:1.05rem;
}


.border-top{
  border-top:1px solid var(--line-soft);
}


.bg-raised{
  background:var(--bg-raised);
}


/* ---------- intro ---------- */

.intro-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:clamp(28px,5vw,64px);
}


.intro-col h3{
  font-size:1.3rem;

  margin-bottom:12px;
}


.intro-col p{
  color:var(--ink-dim);
}


.intro-col + .intro-col{
  border-left:1px solid var(--line-soft);

  padding-left:clamp(28px,5vw,64px);
}


@media (max-width:720px){

  .intro-grid{
    grid-template-columns:1fr;
  }

  .intro-col + .intro-col{
    border-left:none;

    padding-left:0;

    border-top:1px solid var(--line-soft);

    padding-top:28px;
  }

}


/* ---------- how it works ---------- */

.hiw-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:clamp(32px,6vw,72px);

  align-items:center;
}


.steps{
  display:flex;

  flex-direction:column;

  gap:26px;
}


.step{
  display:flex;

  gap:18px;
}


.step-num{
  font-family:var(--font-display);

  font-weight:800;

  font-size:1.6rem;

  color:var(--bg);

  -webkit-text-stroke:1.4px var(--teal);

  flex:none;

  width:44px;
}


.step-body h4{
  font-family:var(--font-body);

  font-weight:700;

  font-size:1.08rem;

  margin:0 0 6px;
}


.step-body p{
  color:var(--ink-dim);

  font-size:.98rem;
}


.hiw-art{
  display:flex;

  justify-content:center;
}


@media (max-width:820px){

  .hiw-grid{
    grid-template-columns:1fr;
  }

  .hiw-art{
    order:-1;
  }

}


/* ---------- phone mock ---------- */

.phone-mock{
  width:250px;

  border:9px solid #050506;

  border-radius:38px;

  background:
    linear-gradient(
      180deg,
      #1c1826,
      #0c0a10
    );

  padding:20px 15px 22px;

  box-shadow:
    0 40px 80px -24px rgba(0,0,0,.7),
    var(--shadow-glow-teal);

  transform:rotate(-3.5deg);

  position:relative;
}


.phone-mock::before{
  content:"";

  position:absolute;

  top:9px;

  left:50%;

  transform:translateX(-50%);

  width:70px;

  height:6px;

  border-radius:4px;

  background:#050506;
}


.pm-scan{
  display:flex;

  flex-direction:column;

  align-items:center;

  gap:10px;

  padding:8px 0 18px;
}


.pm-qr{
  width:56px;

  height:56px;

  border-radius:8px;

  background:
    linear-gradient(
      90deg,
      #050506 0 20%,
      transparent 0 40%,
      #050506 0 60%,
      transparent 0 80%,
      #050506 0
    ),
    linear-gradient(
      0deg,
      #050506 0 20%,
      transparent 0 40%,
      #050506 0 60%,
      transparent 0 80%,
      #050506 0
    );

  background-color:var(--yellow);

  background-blend-mode:multiply;
}


.pm-scan span{
  font-family:var(--font-mono);

  font-size:10px;

  letter-spacing:.14em;

  color:var(--ink-faint);

  text-transform:uppercase;
}


.pm-list{
  display:flex;

  flex-direction:column;

  gap:6px;
}


.pm-row{
  display:flex;

  align-items:center;

  gap:8px;

  background:rgba(246,244,236,.04);

  border-radius:9px;

  padding:6px 8px;
}


.pm-votes{
  font-family:var(--font-mono);

  font-weight:700;

  font-size:10.5px;

  border-radius:6px;

  padding:3px 6px;

  color:#0a0a0a;

  flex:none;
}


.pm-song{
  font-size:11px;

  font-weight:600;

  color:var(--ink);

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


/* ---------- timeline ---------- */

.timeline{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:1px;

  background:var(--line-soft);

  border:1px solid var(--line-soft);

  border-radius:16px;

  overflow:hidden;
}


.tl-card{
  background:var(--bg);

  padding:26px 24px;
}


.tl-card .eyebrow{
  margin-bottom:14px;
}


.tl-card h4{
  font-family:var(--font-body);

  font-size:1.15rem;

  font-weight:800;

  margin-bottom:4px;
}


.tl-card .time{
  font-family:var(--font-mono);

  font-size:12px;

  color:var(--ink-faint);

  margin-bottom:16px;

  display:block;
}


.tl-card ul{
  margin:0;

  padding-left:18px;

  color:var(--ink-dim);

  font-size:.94rem;

  display:flex;

  flex-direction:column;

  gap:8px;
}


.tl-card li::marker{
  color:var(--ink-faint);
}


@media (max-width:820px){

  .timeline{
    grid-template-columns:1fr;
  }

}


/* ---------- audience split ---------- */

.split{
  display:grid;

  grid-template-columns:1fr 1fr;
}


.panel{
  padding:
    clamp(48px,7vw,88px)
    clamp(20px,4vw,48px);

  position:relative;
}


.panel-inner{
  max-width:480px;

  margin-left:auto;
  margin-right:0;
}


.panel.pull-left .panel-inner{
  margin-left:0;
  margin-right:auto;
}


.panel-venues{
  background:
    linear-gradient(
      160deg,
      var(--teal-tint),
      transparent 55%
    ),
    var(--bg);

  border-right:1px solid var(--line-soft);
}


.panel-musicians{
  background:
    linear-gradient(
      200deg,
      var(--pink-tint),
      transparent 55%
    ),
    var(--bg);
}


.panel-photo{
  width:100%;

  border-radius:16px;

  margin-bottom:24px;

  aspect-ratio:16/10;

  object-fit:cover;

  border:1px solid var(--line);
}


.panel h3{
  font-size:clamp(1.6rem,2.6vw,2.05rem);

  margin-bottom:14px;
}


.panel > .panel-inner > p.lead{
  color:var(--ink-dim);

  font-size:1.02rem;

  margin-bottom:22px;
}


.check-list{
  list-style:none;

  margin:0 0 28px;

  padding:0;

  display:flex;

  flex-direction:column;

  gap:12px;
}


.check-list li{
  display:flex;

  gap:11px;

  font-size:.96rem;

  color:var(--ink);

  align-items:flex-start;
}


.check-list li svg{
  flex:none;

  margin-top:3px;
}


.panel-venues .check-list li svg{
  color:var(--teal);
}


.panel-musicians .check-list li svg{
  color:var(--pink);
}


@media (max-width:860px){

  .split{
    grid-template-columns:1fr;
  }

  .panel-venues{
    border-right:none;

    border-bottom:1px solid var(--line-soft);
  }

  .panel-inner,
  .panel.pull-left .panel-inner{
    margin-left:0;
    margin-right:0;

    max-width:560px;
  }

}


/* ---------- moments ---------- */

.moments-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:20px;
}


.moment-card{
  background:var(--bg-raised);

  border:1px solid var(--line-soft);

  border-radius:16px;

  padding:26px 24px;
}


.moment-icon{
  width:42px;

  height:42px;

  border-radius:11px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:18px;

  background:var(--yellow-tint);

  color:var(--yellow);
}


.moment-card:nth-child(2) .moment-icon{
  background:var(--pink-tint);

  color:var(--pink);
}


.moment-card:nth-child(3) .moment-icon{
  background:var(--teal-tint);

  color:var(--teal);
}


.moment-card h4{
  font-size:1.12rem;

  font-weight:800;

  margin-bottom:10px;
}


.moment-card p{
  color:var(--ink-dim);

  font-size:.95rem;
}


@media (max-width:820px){

  .moments-grid{
    grid-template-columns:1fr;
  }

}


/* ---------- proof strip ---------- */

.proof-strip{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  border-top:1px solid var(--line-soft);

  border-bottom:1px solid var(--line-soft);
}


.proof-item{
  padding:34px 20px;

  text-align:center;

  border-left:1px solid var(--line-soft);
}


.proof-item:first-child{
  border-left:none;
}


.proof-num{
  font-family:var(--font-mono);

  font-weight:700;

  font-size:clamp(1.5rem,3vw,2.1rem);

  color:var(--yellow);

  font-variant-numeric:tabular-nums;
}


.proof-label{
  margin-top:6px;

  font-size:12.5px;

  color:var(--ink-faint);

  letter-spacing:.03em;
}


@media (max-width:760px){

  .proof-strip{
    grid-template-columns:repeat(2,1fr);
  }

  .proof-item:nth-child(3){
    border-left:none;
  }

}


/* ---------- contact ---------- */

.contact-wrap{
  display:grid;

  grid-template-columns:.85fr 1.15fr;

  gap:clamp(32px,6vw,72px);
}


.role-toggle{
  display:inline-flex;

  padding:4px;

  gap:4px;

  background:var(--bg-raised);

  border:1px solid var(--line);

  border-radius:999px;

  margin-bottom:26px;
}


.role-btn{
  font-family:var(--font-body);

  font-weight:700;

  font-size:13.5px;

  padding:9px 18px;

  border-radius:999px;

  border:none;

  cursor:pointer;

  background:transparent;

  color:var(--ink-dim);

  transition:
    background .18s ease,
    color .18s ease;
}


.role-btn[aria-pressed="true"]{
  background:var(--yellow);

  color:#0a0a0a;
}


.field{
  display:flex;

  flex-direction:column;

  gap:7px;

  margin-bottom:18px;
}


.field label{
  font-size:12.5px;

  font-weight:700;

  letter-spacing:.03em;

  color:var(--ink-dim);

  text-transform:uppercase;
}


.field input,
.field textarea,
.field select{
  background:var(--bg-raised);

  border:1px solid var(--line);

  border-radius:10px;

  padding:12px 14px;

  color:var(--ink);

  font-family:var(--font-body);

  font-size:14.5px;

  resize:vertical;
}


.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:2px solid var(--teal);

  outline-offset:1px;

  border-color:transparent;
}


.field-row{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px;
}


.contact-submit{
  width:100%;

  justify-content:center;
}


.contact-form-note{
  margin-top:12px;

  font-size:12px;

  color:var(--ink-faint);
}


.contact-info{
  display:flex;

  flex-direction:column;

  gap:22px;
}


.contact-info-item{
  display:flex;

  gap:14px;

  align-items:flex-start;
}


.contact-info-item .ic{
  width:38px;

  height:38px;

  border-radius:10px;

  flex:none;

  display:flex;

  align-items:center;

  justify-content:center;

  background:var(--bg-raised);

  border:1px solid var(--line);

  color:var(--yellow);
}


.contact-info-item h4{
  font-size:.95rem;

  margin:0 0 3px;

  font-weight:800;
}


.contact-info-item a,
.contact-info-item p{
  color:var(--ink-dim);

  text-decoration:none;

  font-size:.92rem;
}


.contact-info-item a:hover{
  color:var(--ink);
}


@media (max-width:820px){

  .contact-wrap{
    grid-template-columns:1fr;
  }

}


@media (max-width:520px){

  .field-row{
    grid-template-columns:1fr;
  }

}


/* ---------- contact modal ---------- */

.contact-modal{
  position:fixed;

  inset:0;

  z-index:1000;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;

  background:rgba(0,0,0,.78);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}


.contact-modal.show{
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}


.contact-modal-box{
  position:relative;

  width:100%;

  max-width:460px;

  padding:36px 32px;

  text-align:center;

  background:
    linear-gradient(
      180deg,
      var(--bg-raised-2),
      var(--bg-raised)
    );

  border:1px solid var(--line);

  border-radius:20px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 40px rgba(250,255,20,.08);

  transform:translateY(14px) scale(.98);

  transition:transform .2s ease;
}


.contact-modal.show .contact-modal-box{
  transform:translateY(0) scale(1);
}


.contact-modal-icon{
  width:58px;

  height:58px;

  margin:0 auto 20px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  background:var(--yellow);

  color:#08080b;

  font-family:var(--font-display);

  font-weight:800;

  font-size:25px;

  box-shadow:
    0 0 26px rgba(250,255,20,.22);
}


.contact-modal.error .contact-modal-icon{
  background:var(--pink);

  color:#fff;

  box-shadow:
    0 0 26px rgba(255,32,110,.25);
}


.contact-modal-box h3{
  margin:0 0 12px;

  font-family:var(--font-display);

  font-size:1.35rem;
}


.contact-modal-box p{
  margin:0 auto 26px;

  max-width:36ch;

  color:var(--ink-dim);
}


.contact-modal-box .btn{
  min-width:120px;

  justify-content:center;
}


/* ---------- footer ---------- */

footer{
  border-top:1px solid var(--line-soft);

  padding:44px 0 34px;
}


.footer-row{
  display:flex;

  justify-content:space-between;

  align-items:center;

  flex-wrap:wrap;

  gap:18px;
}


.footer-tag{
  color:var(--ink-faint);

  font-size:13px;

  max-width:360px;
}


.footer-links{
  display:flex;

  gap:22px;

  list-style:none;

  padding:0;

  margin:0;
}


.footer-links a{
  text-decoration:none;

  color:var(--ink-dim);

  font-size:13.5px;

  font-weight:600;
}


.footer-links a:hover{
  color:var(--ink);
}


.footer-bottom{
  margin-top:30px;

  padding-top:22px;

  border-top:1px solid var(--line-soft);

  display:flex;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:10px;

  font-family:var(--font-mono);

  font-size:11.5px;

  color:var(--ink-faint);
}


/* ---------- utilities ---------- */

.vh{
  position:absolute;

  width:1px;

  height:1px;

  overflow:hidden;

  clip:rect(0 0 0 0);

  white-space:nowrap;
}


::selection{
  background:var(--pink);

  color:#fff;
}

.hiw-image-wrap{
  width:100%;
  max-width:276px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
}

.hiw-image-wrap img{
  display:block;
  width:100%;
  height:auto;
}

video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }