/* ─────────────────────────────────────────────────────── */
/*  LOCAL FONTS                                             */
/* ─────────────────────────────────────────────────────── */
@font-face{
  font-family:'Barlow';
  font-style:normal; font-weight:300;
  src:url('assets/fonts/Barlow/Barlow-Light.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Barlow';
  font-style:normal; font-weight:400;
  src:url('assets/fonts/Barlow/Barlow-Regular.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Barlow';
  font-style:italic; font-weight:400;
  src:url('assets/fonts/Barlow/Barlow-Italic.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Barlow';
  font-style:normal; font-weight:500;
  src:url('assets/fonts/Barlow/Barlow-Medium.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Barlow';
  font-style:normal; font-weight:600;
  src:url('assets/fonts/Barlow/Barlow-SemiBold.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Barlow';
  font-style:italic; font-weight:600;
  src:url('assets/fonts/Barlow/Barlow-SemiBoldItalic.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Barlow';
  font-style:normal; font-weight:700;
  src:url('assets/fonts/Barlow/Barlow-Bold.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Paladins Cond';
  font-style:italic; font-weight:800;
  src:url('assets/fonts/Paladins/paladinscond.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Paladins Cond';
  font-style:italic; font-weight:900;
  src:url('assets/fonts/Paladins/paladinscond.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Paladins';
  font-style:italic; font-weight:800;
  src:url('assets/fonts/Paladins/paladins.ttf') format('truetype');
  font-display:swap;
}

:root{
  --tz-green:       #54FF2C;
  --tz-green-dim:   #2EB814;
  --tz-bg:          #0F0E0E;
  --tz-surface-1:   #1C1B1B;
  --tz-surface-2:   #242222;
  --tz-surface-3:   #353131;
  --tz-text:        #ECECEC;
  --tz-text-2:      rgba(236,236,236,.62);
  --tz-text-3:      rgba(236,236,236,.38);
  --tz-border:      rgba(255,255,255,.10);
  --tz-border-2:    rgba(255,255,255,.18);
  --tz-red:         #FF3D2C;

  --font-display:   'Paladins Cond','Saira Condensed','Oswald','Bebas Neue',sans-serif;
  --font-mono:      'JetBrains Mono','SFMono-Regular','Consolas',monospace;
  --font-body:      'Barlow','Inter',system-ui,sans-serif;

  --gutter:         clamp(18px, 4vw, 64px);
  --section-pad:    clamp(64px, 10vw, 160px);
  --max:            1480px;
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  overflow-x:clip;
}
body{
  background:var(--tz-bg);
  color:var(--tz-text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-x:clip;
  width:100%;
  max-width:100vw;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--tz-green); color:#0a0a0a; }

/* ─────────────────────────────────────────────────────── */
/*  TYPE PRIMITIVES                                        */
/* ─────────────────────────────────────────────────────── */
.display{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.005em;
  line-height:.86;
}
.mono{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.kicker{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tz-green);
  display:inline-flex;
  align-items:center;
  gap:.65em;
}
.kicker::before{
  content:"";
  width:6px; height:6px;
  background:var(--tz-green);
  border-radius:50%;
  box-shadow:0 0 12px var(--tz-green);
}
.lead{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(1rem, 1.15vw, 1.18rem);
  color:var(--tz-text-2);
  max-width:42ch;
  line-height:1.55;
}

/* ─────────────────────────────────────────────────────── */
/*  BUTTONS — paralelogramos                               */
/* ─────────────────────────────────────────────────────── */
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:18px 38px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:0;
  background:transparent;
  color:var(--tz-text);
  clip-path:polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), filter .28s, color .25s ease, letter-spacing .25s ease;
  white-space:nowrap;
}
.btn:hover{ letter-spacing:.06em; }
.btn .arrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-style:normal;
  font-weight:700;
  font-size:.85em;
  transform:translateX(0);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.btn:hover .arrow{ transform:translateX(6px); }

.btn-primary{
  background:var(--tz-green);
  color:#0a0a0a;
  filter:drop-shadow(0 0 22px rgba(84,255,44,.28));
}
.btn-primary:hover{
  filter:drop-shadow(0 0 38px rgba(84,255,44,.65)) brightness(1.05);
  transform:translateY(-3px);
}
.btn-primary:active{
  transform:translateY(-1px);
  filter:drop-shadow(0 0 18px rgba(84,255,44,.45));
}
.btn-secondary{
  color:var(--tz-green);
  background:
    linear-gradient(var(--tz-bg),var(--tz-bg)) padding-box,
    var(--tz-green) border-box;
  border:1.5px solid transparent;
}
.btn-secondary:hover{
  color:var(--tz-green);
  background:
    linear-gradient(rgba(84,255,44,.14), rgba(84,255,44,.14)) padding-box,
    linear-gradient(var(--tz-bg), var(--tz-bg)) padding-box,
    var(--tz-green) border-box;
  filter:drop-shadow(0 0 22px rgba(84,255,44,.40));
  transform:translateY(-3px);
}
.btn-secondary:active{
  transform:translateY(-1px);
}

.btn .store-icon{
  width:18px; height:18px;
  flex-shrink:0;
}

/* ─────────────────────────────────────────────────────── */
/*  NAVBAR                                                  */
/* ─────────────────────────────────────────────────────── */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px var(--gutter);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:linear-gradient(to bottom, rgba(15,14,14,.94) 40%, rgba(15,14,14,0));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
.nav-left{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.logo{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.5rem;
  color:var(--tz-green);
  letter-spacing:-.02em;
  line-height:1;
}
.logo .tz-glyph{
  position:relative;
}
img.tz-glyph{
  height:1.4em;
  width:auto;
  display:inline-block;
  filter:drop-shadow(0 0 12px rgba(84,255,44,.35));
}
.logo .tz-tag{
  font-family:var(--font-mono);
  font-style:normal;
  font-weight:600;
  font-size:.55rem;
  color:var(--tz-text-2);
  letter-spacing:.2em;
  padding:3px 6px;
  border:1px solid var(--tz-border-2);
  align-self:center;
  transform:translateY(-2px);
}
.nav-right{
  display:flex; gap:22px;
  color:var(--tz-text-2);
}
.nav-right .pulse{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--tz-green);
}
.nav-right .pulse::before{
  content:"";
  width:6px; height:6px;
  background:var(--tz-green);
  border-radius:50%;
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{ opacity:1; box-shadow:0 0 0 0 rgba(84,255,44,.6); }
  50%{ opacity:.55; box-shadow:0 0 0 6px rgba(84,255,44,0); }
}

@media (max-width: 720px){
  .nav-right .nav-version, .nav-right .nav-loc{ display:none; }
}

/* ─────────────────────────────────────────────────────── */
/*  HERO                                                    */
/* ─────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding:clamp(96px, 14vw, 140px) var(--gutter) clamp(48px, 6vw, 72px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 50% at 70% 30%, rgba(84,255,44,.06), transparent 60%),
    radial-gradient(ellipse 100% 60% at 0% 100%, rgba(84,255,44,.04), transparent 60%),
    var(--tz-bg);
}
.hero::before{
  /* faint grid */
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, transparent 100%);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:url('assets/images/backgrounds/background_login_image_blackwhite.png') center/cover no-repeat;
  opacity:.08;
  mix-blend-mode:luminosity;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 70% 80% at 30% 100%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 30% 100%, #000 0%, transparent 70%);
}
.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 340px);
  gap:clamp(32px, 5vw, 64px);
  align-items:center;
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; gap:40px; }
}

.hero-meta{
  display:flex;
  justify-content:space-between;
  margin-bottom:36px;
  color:var(--tz-text-2);
}
.hero-meta .sec{
  color:var(--tz-green);
}

.hero-headline{
  font-size:clamp(2rem, 6.4vw, 6.5rem);
  margin:18px 0 28px;
  color:var(--tz-text);
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.hero-headline span{
  display:block;
  opacity:0;
  transform:translateY(24px);
  animation:reveal-up .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-headline span:nth-child(1){ animation-delay:.15s; }
.hero-headline span:nth-child(2){ animation-delay:.27s; }
.hero-headline span:nth-child(3){ animation-delay:.39s; }
.hero-headline span:nth-child(4){ animation-delay:.51s; color:var(--tz-green); }

@keyframes reveal-up{
  from{ opacity:0; transform:translateY(24px); }
  to{   opacity:1; transform:translateY(0); }
}

.hero-kicker, .hero-sub, .hero-cta, .hero-scroll{
  opacity:0;
  animation:fade-in .8s ease-out forwards;
}
.hero-kicker{ animation-delay:.05s; }
.hero-sub{ animation-delay:.65s; }
.hero-cta{ animation-delay:.78s; }
.hero-scroll{ animation-delay:.95s; }

@keyframes fade-in{
  to{ opacity:1; }
}

.hero-sub{
  margin:0 0 40px;
  max-width:50ch;
  font-size:clamp(1rem, 1.2vw, 1.25rem);
  color:var(--tz-text-2);
}
.hero-sub b{
  color:var(--tz-text);
  font-weight:500;
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:48px;
}

.hero-scroll{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--tz-text-3);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.hero-scroll .scroll-line{
  display:block;
  width:48px; height:1px;
  background:var(--tz-text-3);
  position:relative;
  overflow:hidden;
}
.hero-scroll .scroll-line::after{
  content:"";
  position:absolute;
  top:0; left:-30%;
  width:30%; height:100%;
  background:var(--tz-green);
  animation:scroll-trace 2.2s ease-in-out infinite;
}
@keyframes scroll-trace{
  0%{ left:-30%; }
  60%, 100%{ left:100%; }
}

/* HUD panel (right side) */
.hud{
  position:relative;
  border:1px solid var(--tz-border);
  background:linear-gradient(180deg, rgba(28,27,27,.6), rgba(15,14,14,.4));
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
@media (max-width: 980px){
  .hud{ max-width:520px; }
}
@media (max-width: 560px){
  .hud{ padding:20px 18px; gap:18px; }
  .hud .tach{ height:128px; }
  .hud-stat:nth-child(1) .num{ font-size:1.8rem; }
  .hud-stat .num{ font-size:1.4rem; }
}
.hud::before{
  content:"";
  position:absolute;
  top:-1px; left:24px; right:24px;
  height:1px;
  background:var(--tz-green);
  opacity:.55;
}
.hud-head{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:.65rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--tz-text-2);
}
.hud-head .live{
  color:var(--tz-green);
  display:inline-flex; align-items:center; gap:6px;
}
.hud-head .live::before{
  content:"";
  width:5px; height:5px; background:var(--tz-green);
  border-radius:50%;
  animation:pulse 1.6s ease-in-out infinite;
}

.tach{
  width:100%;
  height:150px;
}

.hud-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--tz-border);
  border:1px solid var(--tz-border);
}
.hud-stat{
  background:var(--tz-bg);
  padding:14px 16px;
}
.hud-stat .num{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.7rem;
  line-height:1;
  color:var(--tz-text);
}
.hud-stat .label{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.2em;
  color:var(--tz-text-2);
  text-transform:uppercase;
}
.hud-stat:nth-child(1){ grid-column:1 / -1; }
.hud-stat:nth-child(1) .num{ color:var(--tz-green); font-size:2.2rem; }

.hud-foot{
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.22em;
  color:var(--tz-text-3);
  text-transform:uppercase;
}

/* corners */
.bracketed{ position:relative; }
.corner{
  position:absolute;
  width:28px; height:28px;
  border-color:var(--tz-green);
  border-style:solid;
  border-width:0;
  pointer-events:none;
}
.corner.tl{ top:18px;    left:18px;    border-top-width:2px; border-left-width:2px; }
.corner.tr{ top:18px;    right:18px;   border-top-width:2px; border-right-width:2px; }
.corner.bl{ bottom:18px; left:18px;    border-bottom-width:2px; border-left-width:2px; }
.corner.br{ bottom:18px; right:18px;   border-bottom-width:2px; border-right-width:2px; }
@media (min-width: 720px){
  .corner.tl{ top:24px; left:24px; }
  .corner.tr{ top:24px; right:24px; }
  .corner.bl{ bottom:24px; left:24px; }
  .corner.br{ bottom:24px; right:24px; }
}
@media (max-width: 720px){
  /* Pull corners outside the gutter so they frame the section edge instead of
     colliding with content (HUD panel, etc.) that sits flush at --gutter. */
  .corner{ width:20px; height:20px; }
  .corner.tl{ top:10px; left:10px; }
  .corner.tr{ top:10px; right:10px; }
  .corner.bl{ bottom:10px; left:10px; }
  .corner.br{ bottom:10px; right:10px; }
  .cta .corner{ width:24px; height:24px; }
}

/* ─────────────────────────────────────────────────────── */
/*  DIAGONAL BANNER                                         */
/* ─────────────────────────────────────────────────────── */
.banner{
  position:relative;
  background:var(--tz-green);
  color:#0a0a0a;
  padding:0;
  overflow:hidden;
  transform:rotate(-2.5deg);
  margin:48px -6vw;
  border-top:1px solid #0a0a0a;
  border-bottom:1px solid #0a0a0a;
}
@media (max-width: 720px){
  .banner{ transform:rotate(-2deg); margin:36px -8vw; }
}
.banner-track{
  display:flex;
  white-space:nowrap;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  text-transform:uppercase;
  letter-spacing:.02em;
  padding:22px 0;
  animation:marquee 28s linear infinite;
}
.banner-track > span{
  display:inline-flex;
  align-items:center;
  gap:24px;
  padding:0 24px;
}
.banner-track .blocks{
  font-family:var(--font-mono);
  font-style:normal;
  font-weight:700;
  letter-spacing:0;
  font-size:.7em;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}

/* alt thinner mono ticker */
.ticker{
  background:var(--tz-bg);
  border-top:1px solid var(--tz-border);
  border-bottom:1px solid var(--tz-border);
  overflow:hidden;
}
.ticker-track{
  display:flex;
  white-space:nowrap;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding:14px 0;
  color:var(--tz-text-2);
  animation:marquee 50s linear infinite;
}
.ticker-track > span{
  padding:0 24px;
  display:inline-flex; align-items:center; gap:24px;
}
.ticker-track .dot{
  width:5px; height:5px; background:var(--tz-green); border-radius:50%;
  display:inline-block;
}

/* ─────────────────────────────────────────────────────── */
/*  SECTION HEADERS                                         */
/* ─────────────────────────────────────────────────────── */
section{ position:relative; }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:24px;
  margin-bottom:48px;
  border-bottom:1px solid var(--tz-border);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tz-text-2);
}
.section-head .sec-num{ color:var(--tz-green); }
.section-head .sec-name{ color:var(--tz-text); }

/* ─────────────────────────────────────────────────────── */
/*  FEATURES                                                */
/* ─────────────────────────────────────────────────────── */
.features{
  padding:var(--section-pad) var(--gutter);
}
.features-inner{
  max-width:var(--max);
  margin:0 auto;
}
.features-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--tz-border);
  border-left:1px solid var(--tz-border);
}
.feature{
  position:relative;
  padding:clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px) clamp(40px, 5vw, 56px);
  border-right:1px solid var(--tz-border);
  border-bottom:1px solid var(--tz-border);
  display:flex;
  flex-direction:column;
  gap:clamp(18px, 2vw, 24px);
  transition:background .35s ease;
}
.feature:hover{
  background:linear-gradient(180deg, rgba(84,255,44,.04), transparent 60%);
}
.feature .num{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  color:var(--tz-text-3);
}
.feature .ic{
  color:var(--tz-green);
  width:48px; height:48px;
}
.feature h3{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:clamp(1.7rem, 2.4vw, 2.4rem);
  line-height:.95;
  letter-spacing:-.01em;
  margin:8px 0 0;
  text-transform:uppercase;
  color:var(--tz-text);
}
.feature p{
  margin:0;
  font-size:1.02rem;
  color:var(--tz-text-2);
  line-height:1.55;
  max-width:36ch;
}
.feature .corner-mark{
  position:absolute;
  top:24px; right:24px;
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.22em;
  color:var(--tz-text-3);
}

@media (max-width: 900px){
  .features-grid{ grid-template-columns:1fr; }
}

/* ─────────────────────────────────────────────────────── */
/*  SCREENSHOTS                                             */
/* ─────────────────────────────────────────────────────── */
.shots{
  padding:var(--section-pad) var(--gutter);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(84,255,44,.04), transparent 60%),
    var(--tz-bg);
  overflow:hidden;
}
.shots-inner{
  max-width:var(--max);
  margin:0 auto;
}
.shots-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:end;
  margin-bottom:clamp(40px, 6vw, 72px);
}
.shots-headline{
  font-size:clamp(1.7rem, 4.6vw, 4.4rem);
  margin:18px 0 0;
  overflow-wrap:normal;
  word-break:normal;
}
.shots-headline .accent{ color:var(--tz-green); }

.shots-meta{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tz-text-2);
  display:flex; flex-direction:column; gap:14px;
}
.shots-meta div{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--tz-border); padding-bottom:10px;}
.shots-meta span:last-child{ color:var(--tz-text); }

@media (max-width: 820px){
  .shots-head{ grid-template-columns:1fr; align-items:start; gap:32px; }
}

.shots-rail{
  display:flex;
  gap:clamp(20px, 3vw, 32px);
  overflow-x:auto;
  scrollbar-width:none;
  padding:24px var(--gutter) 48px;
  margin:0 calc(-1 * var(--gutter));
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-padding-left:var(--gutter);
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.shots-rail.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
}
.shots-rail.dragging .phone,
.shots-rail.dragging .shot{
  cursor:grabbing;
}
.shots-rail.dragging .phone:hover{
  transform:none;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
}
.shots-rail::-webkit-scrollbar{ display:none; }

.shot{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  gap:14px;
}
.shot .label{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.24em;
  color:var(--tz-text-2);
  text-transform:uppercase;
  padding-left:8px;
}
.shot .label .num{ color:var(--tz-green); }

/* PHONE MOCKUPS */
.phone{
  width:240px;
  height:500px;
  border-radius:38px;
  background:linear-gradient(160deg, #2a2828, #0e0d0d);
  padding:8px;
  position:relative;
  border:1px solid var(--tz-border-2);
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
}
.phone::before{
  /* side button */
  content:"";
  position:absolute;
  right:-2px;
  top:120px;
  width:3px; height:60px;
  background:#1a1818;
  border-radius:2px;
}
.phone-screen{
  position:relative;
  width:100%; height:100%;
  background:#0a0a0a;
  border-radius:30px;
  overflow:hidden;
  border:1px solid #1a1818;
}
.notch{
  position:absolute;
  top:9px; left:50%;
  transform:translateX(-50%);
  width:88px; height:24px;
  background:#000;
  border-radius:14px;
  z-index:10;
}
.status{
  position:absolute;
  top:0; left:0; right:0;
  height:42px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 22px 4px;
  font-family:var(--font-mono);
  font-size:.62rem;
  color:#ECECEC;
  font-weight:700;
  letter-spacing:.05em;
  z-index:9;
}
.status .battery{
  display:inline-flex; align-items:center; gap:5px;
}
.status .battery .bar{
  width:18px; height:8px;
  border:1px solid #ECECEC;
  border-radius:2px;
  position:relative;
}
.status .battery .bar::after{
  content:""; position:absolute; inset:1px; right:3px;
  background:#ECECEC; border-radius:1px;
}
.status .battery .bar::before{
  content:""; position:absolute; right:-3px; top:2px; bottom:2px;
  width:1.5px; background:#ECECEC;
}
.screen-content{
  position:absolute;
  inset:42px 0 0;
  display:flex; flex-direction:column;
  font-family:var(--font-body);
  color:var(--tz-text);
}

/* ─── PHONE 1 — HOME FEED ─── */
.ph1 .ph-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px 6px;
}
.ph1 .ph-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.1rem;
  color:var(--tz-green);
  letter-spacing:-.02em;
}
.ph1 .ph-icon{
  width:22px; height:22px; border-radius:50%;
  background:var(--tz-surface-3);
  border:1px solid var(--tz-border);
}
.ph1 .chips{
  display:flex; gap:6px;
  overflow:hidden;
  padding:6px 16px 10px;
}
.ph1 .chip{
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.1em;
  padding:5px 10px;
  border:1px solid var(--tz-border);
  border-radius:999px;
  color:var(--tz-text-2);
  white-space:nowrap;
}
.ph1 .chip.active{
  background:var(--tz-green);
  color:#0a0a0a;
  border-color:var(--tz-green);
  font-weight:700;
}
.ph1 .ph-feed{
  flex:1;
  overflow:hidden;
  padding:6px 14px 60px;
  display:flex; flex-direction:column; gap:10px;
}
.ev-card{
  border:1px solid var(--tz-border);
  background:var(--tz-surface-1);
  border-radius:8px;
  overflow:hidden;
}
.ev-img{
  height:80px;
  position:relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(15,14,14,.85) 100%),
    url('assets/images/event_covers/default/cover1.png') center/cover no-repeat,
    #1a1208;
}
.ev-img.alt{
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(15,14,14,.85) 100%),
    url('assets/images/event_covers/default/cover2.png') center/cover no-repeat,
    #0a1810;
}
.ev-img::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 30%, rgba(84,255,44,.10) 50%, transparent 70%);
  mix-blend-mode:screen;
}
.ev-img .km-tag{
  position:absolute; top:6px; right:6px;
  font-family:var(--font-mono);
  font-size:.5rem;
  background:rgba(0,0,0,.6);
  color:var(--tz-green);
  padding:3px 6px;
  border:1px solid var(--tz-border-2);
  letter-spacing:.1em;
}
.ev-meta{
  padding:8px 10px;
  display:flex; flex-direction:column; gap:3px;
}
.ev-meta .ev-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:.85rem;
  text-transform:uppercase;
  line-height:1.05;
}
.ev-meta .ev-foot{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.5rem;
  color:var(--tz-text-2);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ev-meta .ev-foot .live{ color:var(--tz-green); }

.ph-tab{
  position:absolute;
  left:0; right:0; bottom:0;
  height:54px;
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(15,14,14,.92);
  border-top:1px solid var(--tz-border);
  padding-bottom:4px;
}
.ph-tab svg{ width:18px; height:18px; color:var(--tz-text-3); }
.ph-tab svg.active{ color:var(--tz-green); }

/* ─── PHONE — EXPLORE / MAP ─── */
.ph-explore .screen-content{
  display:flex; flex-direction:column;
}
.ph-explore .map{
  position:relative;
  flex:1;
  margin:6px 14px 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(84,255,44,.06), transparent 70%),
    #0a0a0a;
  border:1px solid var(--tz-border);
  border-radius:8px;
  overflow:hidden;
}
.ph-explore .map-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 100%);
}
.ph-explore .map-road{
  position:absolute;
  background:rgba(236,236,236,.11);
  pointer-events:none;
}
.ph-explore .map-road.r1{ left:-10%; top:36%; width:130%; height:2px; transform:rotate(-9deg); }
.ph-explore .map-road.r2{ left:-10%; top:66%; width:130%; height:2px; transform:rotate(7deg); }
.ph-explore .map-road.r3{ left:30%; top:-10%; width:2px; height:130%; transform:rotate(14deg); }
.ph-explore .map-road.r4{ left:74%; top:-10%; width:2px; height:130%; transform:rotate(-5deg); }

.ph-explore .map-pin{
  position:absolute;
  transform:translate(-50%, -50%);
}
.ph-explore .map-pin.p{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--tz-green);
  box-shadow:0 0 8px rgba(84,255,44,.7);
}
.ph-explore .map-pin.p.active{
  width:11px; height:11px;
  border:2px solid var(--tz-bg);
  box-shadow:0 0 16px rgba(84,255,44,.95);
}
.ph-explore .map-pin.you{
  top:50%; left:50%;
  width:0; height:0;
}
.ph-explore .map-pin.you .core{
  display:block;
  width:11px; height:11px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--tz-green);
  position:relative; z-index:2;
  margin:-5.5px 0 0 -5.5px;
  box-shadow:0 0 10px rgba(255,255,255,.4);
}
.ph-explore .map-pin.you .ring{
  position:absolute;
  width:24px; height:24px;
  top:-12px; left:-12px;
  border-radius:50%;
  border:2px solid var(--tz-green);
  opacity:.55;
  animation:explore-ring 2.2s ease-out infinite;
}
@keyframes explore-ring{
  0%{ transform:scale(.5); opacity:.75; }
  100%{ transform:scale(2.2); opacity:0; }
}

.ph-explore .map-card{
  margin:8px 14px 0;
  padding:9px 11px;
  background:var(--tz-surface-1);
  border:1px solid var(--tz-green);
  border-radius:6px;
  display:flex; flex-direction:column; gap:3px;
}
.ph-explore .map-card-tag{
  font-family:var(--font-mono);
  font-size:.5rem;
  letter-spacing:.18em;
  color:var(--tz-green);
  text-transform:uppercase;
}
.ph-explore .map-card-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:.92rem;
  text-transform:uppercase;
  line-height:1.05;
}
.ph-explore .map-card-meta{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.5rem;
  letter-spacing:.1em;
  color:var(--tz-text-2);
  text-transform:uppercase;
}
.ph-explore .map-card-meta .live{ color:var(--tz-green); }

/* ─── PHONE 2 — EVENT DETAIL ─── */
.ph2 .screen-content{ padding:0; }
.ph2 .hero-img{
  height:230px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85) 100%),
    url('assets/images/event_covers/default/cover3.png') center/cover no-repeat,
    #1a0810;
}
.ph2 .hero-img::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,14,14,.25) 0%, transparent 30%);
}
.ph2 .sponsor{
  position:absolute;
  top:10px; right:10px;
  font-family:var(--font-mono);
  font-size:.5rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:4px 8px;
  background:rgba(0,0,0,.6);
  border:1px solid var(--tz-border-2);
  color:var(--tz-green);
}
.ph2 .ev-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:14px 18px;
  color:#fff;
}
.ph2 .ev-tag{
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.2em;
  color:var(--tz-green);
}
.ph2 .ev-h{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.45rem;
  text-transform:uppercase;
  line-height:.95;
  margin-top:4px;
}
.ph2 .ev-detail{
  flex:1;
  padding:18px 18px 70px;
  display:flex; flex-direction:column; gap:14px;
}
.ph2 .ev-row{
  display:flex; justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid var(--tz-border);
  font-size:.7rem;
}
.ph2 .ev-row .lbl{
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.18em;
  color:var(--tz-text-2);
  text-transform:uppercase;
}
.ph2 .rsvp{
  margin-top:6px;
  background:var(--tz-green);
  color:#0a0a0a;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  text-align:center;
  padding:11px 16px;
  font-size:.85rem;
  clip-path:polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  letter-spacing:.04em;
}

/* ─── PHONE 3 — CREWS ─── */
.ph3 .ph-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px 4px;
}
.ph3 .ph-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.05rem;
  text-transform:uppercase;
  color:var(--tz-text);
  letter-spacing:-.01em;
}
.ph3 .sub{
  padding:0 16px;
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.2em;
  color:var(--tz-text-2);
  text-transform:uppercase;
  margin-bottom:10px;
}
.ph3 .crews{
  padding:0 12px 60px;
  flex:1;
  display:flex; flex-direction:column; gap:8px;
  overflow:hidden;
}
.crew{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px;
  border:1px solid var(--tz-border);
  background:var(--tz-surface-1);
  border-radius:6px;
}
.crew.you{ border-color:var(--tz-green); background:rgba(84,255,44,.06); }
.crew-av{
  width:34px; height:34px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--tz-surface-3), #0a0a0a);
  border:1px solid var(--tz-border-2);
  flex-shrink:0;
  position:relative;
}
.crew.you .crew-av{ border-color:var(--tz-green); }
.crew-av .letter{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:.85rem;
  color:var(--tz-text);
}
.crew.you .crew-av .letter{ color:var(--tz-green); }
.crew-info{ flex:1; }
.crew-name{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:.82rem;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:-.005em;
}
.crew-meta{
  margin-top:3px;
  font-family:var(--font-mono);
  font-size:.5rem;
  letter-spacing:.12em;
  color:var(--tz-text-2);
  text-transform:uppercase;
}
.crew-arrow{
  font-family:var(--font-mono);
  color:var(--tz-text-3);
  font-size:.85rem;
}
.crew.you .crew-arrow{ color:var(--tz-green); }
.crew-tag{
  font-family:var(--font-mono);
  font-size:.45rem;
  letter-spacing:.16em;
  color:var(--tz-green);
  text-transform:uppercase;
}

/* ─── PHONE 4 — GARAGE ─── */
.ph4 .ph-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px 8px;
}
.ph4 .ph-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.05rem;
  text-transform:uppercase;
  color:var(--tz-text);
}
.ph4 .car-card{
  margin:0 14px;
  border:1px solid var(--tz-border);
  border-radius:8px;
  overflow:hidden;
}
.ph4 .car-img{
  height:110px;
  position:relative;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7) 100%),
    url('assets/images/event_covers/default/cover4.png') center/cover no-repeat,
    #0a1810;
}
.ph4 .car-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6));
}
.ph4 .car-img .build-tag{
  position:absolute; top:8px; right:8px;
  font-family:var(--font-mono);
  font-size:.5rem;
  padding:3px 8px;
  background:rgba(0,0,0,.7);
  color:var(--tz-green);
  letter-spacing:.16em;
  border:1px solid var(--tz-border-2);
}
.ph4 .car-img .car-name{
  position:absolute;
  bottom:8px; left:10px; right:10px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1rem;
  text-transform:uppercase;
  line-height:1;
}
.ph4 .car-img .car-spec{
  position:absolute;
  bottom:8px; right:10px;
  font-family:var(--font-mono);
  font-size:.5rem;
  color:var(--tz-text-2);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ph4 .log-title{
  margin:18px 16px 6px;
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.22em;
  color:var(--tz-text-2);
  text-transform:uppercase;
  display:flex; justify-content:space-between;
}
.ph4 .logs{
  padding:0 14px 60px;
  display:flex; flex-direction:column; gap:6px;
  flex:1; overflow:hidden;
}
.log-row{
  display:flex; justify-content:space-between;
  padding:8px 10px;
  border:1px solid var(--tz-border);
  background:var(--tz-surface-1);
  border-radius:5px;
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.06em;
  align-items:center;
}
.log-row .ttl{ color:var(--tz-text); letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.log-row .dt{ color:var(--tz-text-3); }
.log-row .km{ color:var(--tz-green); font-weight:700; }

/* ─── PHONE 5 — PROFILE ─── */
.ph5 .pf-cover{
  height:90px;
  background:
    linear-gradient(135deg, #1a3a22 0%, #54FF2C 100%);
  opacity:.85;
  position:relative;
}
.ph5 .pf-cover::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(15,14,14,.5));
}
.ph5 .pf-av{
  margin:-30px 16px 0;
  width:60px; height:60px;
  border-radius:50%;
  border:3px solid var(--tz-bg);
  background:linear-gradient(135deg, var(--tz-surface-3), #0a0a0a);
  position:relative;
  z-index:2;
}
.ph5 .pf-av::after{
  content:"GJ";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-style:italic; font-weight:900;
  color:var(--tz-green);
  font-size:1.4rem;
}
.ph5 .pf-name{
  padding:8px 16px 0;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.15rem;
  text-transform:uppercase;
  line-height:1;
}
.ph5 .pf-handle{
  padding:4px 16px 0;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.14em;
  color:var(--tz-text-2);
}
.ph5 .pf-stats{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  margin:14px 16px 16px;
  border:1px solid var(--tz-border);
}
.ph5 .pf-stat{
  padding:8px 6px;
  text-align:center;
  border-right:1px solid var(--tz-border);
}
.ph5 .pf-stat:last-child{ border-right:0; }
.ph5 .pf-stat .v{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.05rem;
  line-height:1;
  color:var(--tz-text);
}
.ph5 .pf-stat .l{
  margin-top:3px;
  font-family:var(--font-mono);
  font-size:.5rem;
  letter-spacing:.18em;
  color:var(--tz-text-2);
  text-transform:uppercase;
}
.ph5 .pf-ach-title{
  padding:0 16px 6px;
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.22em;
  color:var(--tz-text-2);
  text-transform:uppercase;
  display:flex; justify-content:space-between;
}
.ph5 .pf-ach-title b{ color:var(--tz-green); font-weight:700; }
.ph5 .pf-ach{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  padding:0 14px 60px;
}
.ach{
  aspect-ratio:1;
  border:1px solid var(--tz-border);
  background:var(--tz-surface-1);
  display:flex; align-items:center; justify-content:center;
  color:var(--tz-text-3);
  position:relative;
}
.ach.unlocked{
  border-color:var(--tz-green);
  background:rgba(84,255,44,.08);
  color:var(--tz-green);
}
.ach svg{ width:18px; height:18px; }

/* ─────────────────────────────────────────────────────── */
/*  FINAL CTA                                               */
/* ─────────────────────────────────────────────────────── */
.cta{
  position:relative;
  padding:calc(var(--section-pad) + 32px) var(--gutter);
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(84,255,44,.08), transparent 70%),
    var(--tz-bg);
}
.cta::before{
  content:"";
  position:absolute; inset:0;
  background:url('assets/images/backgrounds/carbonFiberAsset.jpg') center/auto 240px repeat;
  opacity:.35;
  mix-blend-mode:luminosity;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
}
.cta-inner{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  text-align:center;
  z-index:2;
}
.cta .corner{ width:36px; height:36px; }
.cta-headline{
  font-size:clamp(2.4rem, 9vw, 9rem);
  margin:20px 0 30px;
  color:var(--tz-text);
  overflow-wrap:normal;
  word-break:normal;
}
.cta-headline .accent{ color:var(--tz-green); }
.cta-headline span{ display:block; }
.cta-sub{
  font-family:var(--font-body);
  font-size:clamp(1.05rem, 1.4vw, 1.3rem);
  color:var(--tz-text-2);
  max-width:42ch;
  margin:0 auto 44px;
  letter-spacing:.02em;
}
.cta-sub b{
  color:var(--tz-green);
  font-weight:600;
}
.cta-cta{
  display:flex; gap:14px; flex-wrap:wrap;
  justify-content:center;
}
.cta-meta{
  margin-top:48px;
  display:flex; justify-content:center;
  gap:36px;
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.22em;
  color:var(--tz-text-3);
  text-transform:uppercase;
}
.cta-meta b{ color:var(--tz-green); font-weight:500; }

@media (max-width:600px){
  .cta-meta{ gap:18px; font-size:.6rem; flex-direction:column; align-items:center; }
}

/* ─────────────────────────────────────────────────────── */
/*  FOOTER                                                  */
/* ─────────────────────────────────────────────────────── */
footer{
  padding:48px var(--gutter) 36px;
  border-top:1px solid var(--tz-border);
  background:var(--tz-bg);
}
.foot-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.foot-left{ display:flex; align-items:center; gap:24px; }
.socials{
  display:flex; gap:18px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tz-text-2);
}
.socials a{ position:relative; transition:color .2s; }
.socials a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--tz-green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.socials a:hover{ color:var(--tz-green); }
.socials a:hover::after{ transform:scaleX(1); }
.socials .sep{ color:var(--tz-text-3); }
.foot-copy{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tz-text-3);
  text-align:right;
  line-height:1.8;
}
.foot-copy .made{ color:var(--tz-text-2); }
.foot-copy .made .hash{ color:var(--tz-green); font-weight:700; }

@media (max-width:680px){
  .foot-inner{ flex-direction:column; align-items:center; text-align:center; gap:20px; }
  .foot-copy{ text-align:center; }
  .foot-copy .made{ justify-content:center; }
  .foot-left{ align-items:center !important; gap:18px !important; }
  .socials{ justify-content:center; }
}

/* ─────────────────────────────────────────────────────── */
/*  REVEAL ANIMATIONS                                       */
/* ─────────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger > *{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.in > *{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.45s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* phone responsive scale */
@media (max-width: 540px){
  .phone{ width:220px; height:460px; }
}

/* ─────────────────────────────────────────────────────── */
/*  MOBILE REFINEMENTS                                     */
/* ─────────────────────────────────────────────────────── */
@media (max-width: 720px){
  /* nav tighten */
  .nav{ font-size:.62rem; letter-spacing:.16em; }
  .nav-right{ gap:14px; }
  .logo{ font-size:1.3rem; }
  .logo .tz-tag{ font-size:.5rem; padding:2px 5px; }

  /* hero meta compact */
  .hero-meta{ font-size:.62rem; letter-spacing:.16em; margin-bottom:28px; }
  .hero-headline{ line-height:.9; }
  .hero-sub{ margin-bottom:32px; font-size:1rem; }

  /* CTAs full-width on mobile — clean rectangles (the desktop parallelogram + gradient-border trick
     drops the diagonal edges of .btn-secondary; rectangles let the border render uniformly) */
  .hero-cta, .cta-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn, .cta-cta .btn{
    justify-content:center;
    width:100%;
    padding:17px 24px;
    font-size:1rem;
    gap:12px;
    letter-spacing:.03em;
    clip-path:none;
  }
  .hero-cta .btn:hover, .cta-cta .btn:hover{ letter-spacing:.05em; }
  .btn .store-icon{ width:20px; height:20px; }

  /* section heads tighter */
  .section-head{ font-size:.62rem; letter-spacing:.18em; margin-bottom:32px; padding-bottom:18px; }

  /* shots-head single column */
  .shots-head{ gap:24px; }
  .shots-meta{ font-size:.62rem; letter-spacing:.18em; }
  .shots-meta div{ padding-bottom:8px; }

  /* feature card content */
  .feature .ic{ width:42px; height:42px; }
  .feature p{ font-size:.96rem; }
  .feature .corner-mark{ top:18px; right:18px; font-size:.58rem; }

  /* cta meta wrap */
  .cta-sub{ margin-bottom:36px; }
  .cta-meta{ margin-top:36px; }

  /* footer stacked */
  .foot-left{ flex-direction:column; align-items:flex-start; gap:14px; }
  .socials{ font-size:.62rem; letter-spacing:.18em; gap:14px; }
  .foot-copy{ font-size:.58rem; }

  /* ticker speed */
  .ticker-track{ font-size:.62rem; letter-spacing:.18em; }
}

/* tiny screens — last-mile */
@media (max-width: 380px){
  :root{ --gutter:16px; }
  .hero-headline{ font-size:2.5rem; }
  .cta-headline{ font-size:3rem; }
  .shots-headline{ font-size:2.2rem; }
  .phone{ width:200px; height:420px; }
  .hud-stats{ grid-template-columns:1fr; }
  .hud-stat:nth-child(1){ grid-column:auto; }
}

/* ─────────────────────────────────────────────────────── */
/*  LANGUAGE TOGGLE                                         */
/* ─────────────────────────────────────────────────────── */
.lang-toggle{
  background:transparent;
  border:1px solid var(--tz-border-2);
  font-family:var(--font-mono);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--tz-text-2);
  padding:5px 9px 4px;
  cursor:pointer;
  text-transform:uppercase;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
  display:inline-flex;
  align-items:center;
  gap:7px;
  line-height:1;
  position:relative;
}
.lang-toggle::before{
  content:"";
  width:5px; height:5px;
  background:var(--tz-text-3);
  border-radius:50%;
  transition:background .2s ease, box-shadow .2s ease;
}
.lang-toggle:hover{
  border-color:var(--tz-green);
  color:var(--tz-green);
}
.lang-toggle:hover::before{
  background:var(--tz-green);
  box-shadow:0 0 8px var(--tz-green);
}
@media (max-width: 720px){
  .lang-toggle{ padding:4px 8px 3px; font-size:.6rem; gap:5px; }
}

/* ─────────────────────────────────────────────────────── */
/*  REAL SCREENSHOT OVERLAY                                 */
/*  drop assets/images/mockups/<screen>.png to swap in      */
/* ─────────────────────────────────────────────────────── */
.phone-real{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
  border-radius:30px;
  z-index:12;
}
.phone-real.loaded{ opacity:1; }

/* ─────────────────────────────────────────────────────── */
/*  HEART (footer)                                          */
/* ─────────────────────────────────────────────────────── */
.foot-copy .made{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.foot-copy .made .heart{
  width:1em; height:1em;
  color:var(--tz-green);
  display:inline-block;
  animation:heart-pulse 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(84,255,44,.55));
  flex-shrink:0;
}
@keyframes heart-pulse{
  0%, 55%, 100%{ transform:scale(1); }
  12%{ transform:scale(1.24); }
  24%{ transform:scale(.94); }
  36%{ transform:scale(1.12); }
  46%{ transform:scale(1); }
}

/* legacy fallback if any old markup still has .hash */
.foot-copy .made .hash{ color:var(--tz-green); font-weight:700; }

/* ─────────────────────────────────────────────────────── */
/*  CTA SECTION + KICKER                                    */
/* ─────────────────────────────────────────────────────── */
.cta-section{ color:var(--tz-text-2); }
.cta-kicker{ margin-top:18px; }
.cta-meta > span:last-child{ letter-spacing:.22em; }

/* ─────────────────────────────────────────────────────── */
/*  SHOT — clickable cursor                                 */
/* ─────────────────────────────────────────────────────── */
.shot .phone{
  cursor:zoom-in;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), filter .28s ease;
}
.shot .phone:hover{
  transform:translateY(-6px);
  filter:drop-shadow(0 38px 48px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(84,255,44,.18));
}

/* ─────────────────────────────────────────────────────── */
/*  SHOT MODAL (lightbox)                                   */
/* ─────────────────────────────────────────────────────── */
.shot-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:24px;
  opacity:0;
  transition:opacity .28s ease;
}
.shot-modal[data-open="true"]{
  display:flex;
  opacity:1;
}
.shot-modal-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  max-width:100%;
  max-height:100%;
  pointer-events:none;
}
.shot-modal-inner > *{ pointer-events:auto; }
.shot-modal-phone-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  transform-origin:center;
  transform:scale(1.55);
  margin:9vh 0 6vh;
  animation:modal-zoom .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes modal-zoom{
  from{ opacity:0; transform:scale(1.0); }
  to{ opacity:1; transform:scale(1.55); }
}
.shot-modal-phone-wrap .phone{
  cursor:default;
}
.shot-modal-phone-wrap .phone:hover{
  transform:none;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
}
@media (max-width:1100px){
  .shot-modal-phone-wrap{ transform:scale(1.3); margin:7vh 0 5vh; }
  @keyframes modal-zoom{
    from{ opacity:0; transform:scale(1.0); }
    to{ opacity:1; transform:scale(1.3); }
  }
}
@media (max-width:700px){
  .shot-modal-phone-wrap{ transform:scale(1.05); margin:4vh 0 3vh; }
  @keyframes modal-zoom{
    from{ opacity:0; transform:scale(.9); }
    to{ opacity:1; transform:scale(1.05); }
  }
}

.shot-modal-close{
  position:absolute;
  top:22px; right:22px;
  width:44px; height:44px;
  border:1px solid var(--tz-border-2);
  background:rgba(15,14,14,.7);
  color:var(--tz-text);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.shot-modal-close:hover{
  border-color:var(--tz-green);
  color:var(--tz-green);
  background:rgba(84,255,44,.08);
}
.shot-modal-close svg{ width:18px; height:18px; }

.shot-modal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px; height:48px;
  border:1px solid var(--tz-border-2);
  background:rgba(15,14,14,.7);
  color:var(--tz-text);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.shot-modal-nav:hover{
  border-color:var(--tz-green);
  color:var(--tz-green);
  background:rgba(84,255,44,.08);
}
.shot-modal-nav.prev{ left:22px; }
.shot-modal-nav.next{ right:22px; }
.shot-modal-nav svg{ width:22px; height:22px; }
@media (max-width:600px){
  .shot-modal-nav{ width:40px; height:40px; }
  .shot-modal-nav.prev{ left:12px; }
  .shot-modal-nav.next{ right:12px; }
}

.shot-modal-caption{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:rgba(15,14,14,.78);
  border:1px solid var(--tz-border-2);
  padding:10px 22px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.shot-modal-num{ color:var(--tz-green); }
.shot-modal-name{ color:var(--tz-text); }
.shot-modal-counter{ color:var(--tz-text-3); font-size:.65rem; }

body.modal-open{ overflow:hidden; }