/* ==========================================================================
   FEATHER BROS  —  $FBROS
   Comic-book / 3D-perspective style sheet
   ========================================================================== */

:root{
  --ink:        #0a1020;
  --ink-soft:   #16233d;
  --paper:      #fffdf5;
  --paper-2:    #f3f7ff;
  --blue-deep:  #0a2a75;
  --blue:       #1560e8;
  --blue-lite:  #29a9f2;
  --cyan:       #6fe3ff;
  --orange:     #f7911e;
  --yellow:     #ffc42c;
  --red:        #ff4d4d;

  --border:     4px;
  --pop:        10px 10px 0 var(--ink);
  --pop-sm:     6px 6px 0 var(--ink);
  --pop-xs:     4px 4px 0 var(--ink);

  --font-display: "Luckiest Guy", "Bangers", system-ui, sans-serif;
  --font-head:    "Baloo 2", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:110px; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--blue-deep);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }

/* ==========================================================================
   1. BACKGROUND STACK  (fixed layers: sky > photo > halftone > rays > shine)
   ========================================================================== */

.bg-stack{ position:fixed; inset:0; z-index:-5; overflow:hidden; pointer-events:none; }
.bg-stack > *{ position:absolute; inset:-10%; }

.bg-sky{
  background:
    radial-gradient(120% 80% at 50% -10%, #8fe8ff 0%, transparent 55%),
    linear-gradient(180deg, #061c4d 0%, #0e3ea8 26%, #1d76e0 52%, #2fb0ef 76%, #7ee6ff 100%);
}

/* the logo art itself, living in the background */
.bg-photo{
  background-image:url("../feather-bros-logo.jpg");
  background-size:cover;
  background-position:center 22%;
  opacity:.20;
  filter:blur(2px) saturate(1.25) contrast(1.05);
  mix-blend-mode:luminosity;
  animation:bgDrift 42s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to  { transform:scale(1.14) translate3d(-2.5%,-2%,0); }
}

/* comic halftone dots */
.bg-halftone{
  background-image:radial-gradient(rgba(6,20,60,.34) 1.35px, transparent 1.4px);
  background-size:9px 9px;
  opacity:.5;
  mix-blend-mode:multiply;
}

/* radial speed-lines */
.bg-rays{
  background:repeating-conic-gradient(from 0deg at 50% 42%,
     rgba(255,255,255,.085) 0deg 2.2deg, transparent 2.2deg 9deg);
  opacity:.6;
  animation:raysSpin 140s linear infinite;
}
@keyframes raysSpin{ to{ transform:rotate(360deg); } }

/* readability veil */
.bg-veil{
  background:
    radial-gradient(90% 60% at 50% 30%, transparent 0%, rgba(4,14,40,.42) 100%),
    linear-gradient(180deg, rgba(4,14,40,.30), rgba(4,14,40,.10) 40%, rgba(4,14,40,.42));
}

/* ---- THE SHINE : a wide light bar sweeping across the whole page ---------- */
.bg-shine{
  inset:-40%;
  background:linear-gradient(105deg,
     transparent 38%,
     rgba(255,255,255,.06) 44%,
     rgba(255,255,255,.28) 49%,
     rgba(255,255,255,.60) 50.5%,
     rgba(255,255,255,.28) 52%,
     rgba(255,255,255,.06) 57%,
     transparent 63%);
  mix-blend-mode:screen;
  filter:blur(6px);
  transform:translate3d(-70%,0,0);
  animation:shineSweep 9s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes shineSweep{
  0%      { transform:translate3d(-70%,0,0); opacity:0; }
  12%     { opacity:.9; }
  55%     { opacity:.9; }
  70%,100%{ transform:translate3d(70%,0,0); opacity:0; }
}

/* floating feathers */
.feather{
  position:fixed; z-index:-4; width:44px; opacity:.5; pointer-events:none; top:0;
  filter:drop-shadow(0 6px 10px rgba(0,20,60,.35));
  animation:featherFall linear infinite;
}
@keyframes featherFall{
  0%   { transform:translate3d(0,-14vh,0) rotate(-18deg); opacity:0; }
  10%  { opacity:.55; }
  50%  { transform:translate3d(60px,50vh,0) rotate(120deg); }
  90%  { opacity:.45; }
  100% { transform:translate3d(-40px,112vh,0) rotate(320deg); opacity:0; }
}

/* ==========================================================================
   2. COMIC PRIMITIVES
   ========================================================================== */

.wrap{ width:min(1200px, 92vw); margin-inline:auto; position:relative; z-index:2; }

.panel{
  position:relative;
  background:var(--paper);
  border:var(--border) solid var(--ink);
  border-radius:14px;
  box-shadow:var(--pop);
  overflow:hidden;
}
.panel--tight{ box-shadow:var(--pop-sm); border-radius:12px; }

.panel::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:radial-gradient(rgba(10,16,32,.10) 1px, transparent 1.1px);
  background-size:7px 7px; opacity:.5;
}

/* the glossy shine that slides over panels */
.shiny{ position:relative; overflow:hidden; isolation:isolate; }
.shiny::after{
  content:""; position:absolute; top:-120%; left:-60%;
  width:55%; height:340%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform:rotate(18deg) translateX(-160%);
  animation:panelShine 6.5s ease-in-out infinite;
  pointer-events:none; z-index:6; mix-blend-mode:overlay;
}
.shiny--slow::after{ animation-duration:11s; }
.shiny--hover::after{ animation:none; }
.shiny--hover:hover::after{ animation:panelShine 1.1s ease-out 1; }
@keyframes panelShine{
  0%,68% { transform:rotate(18deg) translateX(-160%); }
  100%   { transform:rotate(18deg) translateX(420%); }
}

/* burst / star badge */
.burst{
  display:grid; place-items:center;
  background:var(--yellow);
  clip-path:polygon(50% 0%,61% 18%,82% 10%,79% 33%,100% 44%,82% 58%,92% 80%,68% 78%,58% 100%,44% 80%,21% 88%,23% 65%,2% 55%,20% 40%,10% 18%,33% 21%);
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1;
  filter:drop-shadow(4px 4px 0 var(--ink));
}

/* tape strip */
.tape{
  position:absolute; width:160px; height:36px;
  background:rgba(255,241,168,.86);
  border:2px solid rgba(10,16,32,.22);
  box-shadow:0 3px 8px rgba(0,10,40,.25);
  z-index:9;
}

/* speech bubble */
.bubble{
  position:relative;
  background:var(--paper);
  border:var(--border) solid var(--ink);
  border-radius:26px;
  box-shadow:var(--pop-sm);
  padding:28px 32px;
}
.bubble::after{
  content:""; position:absolute; left:52px; bottom:-30px;
  border:16px solid transparent; border-top-color:var(--ink);
}
.bubble::before{
  content:""; position:absolute; left:56px; bottom:-20px;
  border:12px solid transparent; border-top-color:var(--paper); z-index:2;
}

/* ==========================================================================
   3. TYPE
   ========================================================================== */

.display{
  font-family:var(--font-display);
  letter-spacing:.02em;
  line-height:.92;
  text-transform:uppercase;
}

.title-3d{
  color:#fff;
  text-shadow:
     3px 3px 0 var(--ink),
     6px 6px 0 var(--orange),
     9px 9px 0 var(--ink),
    12px 14px 22px rgba(0,10,40,.55);
}
.title-3d--orange{
  color:var(--yellow);
  text-shadow:
     3px 3px 0 var(--ink),
     6px 6px 0 #fff,
     9px 9px 0 var(--ink),
    12px 14px 22px rgba(0,10,40,.5);
}

.section-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:800;
  text-transform:uppercase; letter-spacing:.16em; font-size:.82rem;
  background:var(--ink); color:var(--yellow);
  border:3px solid var(--ink);
  padding:7px 16px; border-radius:999px;
  box-shadow:var(--pop-xs);
}

.h-sec{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 6vw, 4.4rem);
  line-height:.95; text-transform:uppercase; color:#fff;
  margin:16px 0 0;
  text-shadow:3px 3px 0 var(--ink), 6px 6px 0 rgba(247,145,30,.95);
}

.lede{ font-size:clamp(1rem,1.35vw,1.14rem); line-height:1.7; color:var(--ink-soft); }

.kicker{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn{
  --btn-bg:var(--yellow);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-size:1.02rem; letter-spacing:.03em;
  text-transform:uppercase;
  padding:15px 26px;
  color:var(--ink);
  background:var(--btn-bg);
  border:var(--border) solid var(--ink);
  border-radius:14px;
  box-shadow:var(--pop-sm);
  transition:transform .12s ease, box-shadow .12s ease, filter .2s ease;
  position:relative; overflow:hidden; cursor:pointer;
}
.btn:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); filter:saturate(1.12); }
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn--orange{ --btn-bg:var(--orange); }
.btn--white { --btn-bg:#fff; }
.btn--ink   { --btn-bg:var(--ink); color:#fff; }
.btn--cyan  { --btn-bg:var(--cyan); }
.btn--sm    { padding:10px 18px; font-size:.88rem; border-width:3px; box-shadow:var(--pop-xs); }
.btn i{ font-size:1.15em; }
.btn .brandmark{ width:1.25em; height:1.25em; }

/* ==========================================================================
   5. NAVBAR
   ========================================================================== */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:14px 0; transition:padding .25s ease;
}
.nav__inner{
  display:flex; align-items:center; gap:18px;
  background:rgba(255,253,245,.93);
  backdrop-filter:blur(10px);
  border:var(--border) solid var(--ink);
  border-radius:18px;
  box-shadow:var(--pop-sm);
  padding:10px 14px;
  transition:box-shadow .25s ease;
}
.nav.is-stuck{ padding:8px 0; }
.nav.is-stuck .nav__inner{ box-shadow:var(--pop-xs); }

.brand{ display:flex; align-items:center; gap:12px; }
.brand__img{
  width:48px; height:48px; border-radius:12px; object-fit:cover;
  border:3px solid var(--ink); box-shadow:var(--pop-xs);
}
.brand__name{ font-family:var(--font-display); font-size:1.12rem; line-height:1; }
.brand__tick{ font-family:var(--font-head); font-weight:800; font-size:.72rem; letter-spacing:.14em; color:var(--blue); }

.nav__links{ display:flex; gap:4px; margin-left:auto; }
.nav__links a{
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:.85rem;
  padding:9px 13px; border-radius:10px; border:3px solid transparent;
  transition:.15s ease;
}
.nav__links a:hover{ background:var(--yellow); border-color:var(--ink); transform:translateY(-2px); }

.nav__burger{
  display:none; margin-left:auto;
  width:48px; height:48px; border-radius:12px;
  border:3px solid var(--ink); background:var(--yellow);
  font-size:1.35rem; cursor:pointer; box-shadow:var(--pop-xs);
}
.nav__mobile{
  display:none; margin-top:10px; padding:12px;
  background:var(--paper); border:var(--border) solid var(--ink);
  border-radius:16px; box-shadow:var(--pop-sm);
}
.nav__mobile.is-open{ display:block; }
.nav__mobile a{
  display:block; padding:12px 14px; border-radius:10px;
  font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}
.nav__mobile a:hover{ background:var(--yellow); }

/* ==========================================================================
   6. SECTION SHELL
   ========================================================================== */

.section{ position:relative; padding:clamp(74px,9vw,132px) 0; }

.sec-head{ margin-bottom:clamp(34px,4.5vw,62px); text-align:center; }
.sec-head .lede{ color:#eaf4ff; max-width:760px; margin:16px auto 0; text-shadow:0 2px 10px rgba(0,10,40,.55); }

/* torn paper strip that separates the big blocks */
.edge{ position:absolute; left:-2%; width:104%; height:26px; background:var(--ink); z-index:1; }
.edge--top{
  top:-1px;
  clip-path:polygon(0 0,100% 0,100% 30%,96% 100%,92% 22%,88% 96%,84% 18%,80% 92%,76% 16%,72% 98%,
    68% 24%,64% 94%,60% 18%,56% 96%,52% 22%,48% 92%,44% 16%,40% 98%,36% 24%,32% 94%,28% 18%,
    24% 96%,20% 20%,16% 98%,12% 22%,8% 92%,4% 18%,0 96%);
}
.edge--bottom{
  bottom:-1px;
  clip-path:polygon(0 100%,100% 100%,100% 70%,96% 0,92% 78%,88% 4%,84% 82%,80% 8%,76% 84%,72% 2%,
    68% 76%,64% 6%,60% 82%,56% 10%,52% 78%,48% 4%,44% 84%,40% 8%,36% 76%,32% 6%,28% 82%,24% 2%,
    20% 80%,16% 8%,12% 78%,8% 4%,4% 82%,0 6%);
}

/* ==========================================================================
   7. 3D STAGE / PERSPECTIVE
   ========================================================================== */

.stage{ perspective:1400px; perspective-origin:50% 45%; }
.stage--deep{ perspective:900px; }

.tilt{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
  will-change:transform;
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(38px) rotateX(10deg); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero{ padding-top:clamp(140px,15vw,196px); padding-bottom:0; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px);
  align-items:center;
}

.issue-strip{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--paper); border:var(--border) solid var(--ink);
  border-radius:999px; padding:8px 18px 8px 8px; box-shadow:var(--pop-xs);
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; font-size:.76rem;
  transform:rotate(-2deg);
}
.issue-strip .dot{
  width:26px;height:26px;border-radius:50%;background:var(--red);
  border:3px solid var(--ink); display:grid;place-items:center;color:#fff;font-size:.66rem;
}

.hero__title{ font-size:clamp(3.1rem,9.2vw,7.4rem); margin:20px 0 8px; }
.hero__sub{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(1.05rem,2.5vw,1.85rem);
  color:#fff; text-shadow:2px 2px 0 var(--ink);
  transform:skewX(-7deg);
  background:linear-gradient(90deg, rgba(247,145,30,.95), rgba(255,196,44,.0));
  padding:4px 16px 4px 10px; border-left:5px solid var(--ink);
}
.hero__copy{
  color:#f2f8ff; max-width:52ch; margin:22px 0 30px;
  font-size:1.05rem; line-height:1.66;
  text-shadow:0 2px 10px rgba(0,10,40,.55);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; }

.hero__art{ position:relative; }
.hero__panel{
  transform:rotateY(-13deg) rotateX(6deg) rotateZ(-2deg);
  border-radius:22px;
}
.hero__panel:hover{ transform:rotateY(-6deg) rotateX(3deg) rotateZ(0deg) translateZ(30px); }
.hero__panel img{ width:100%; aspect-ratio:1/1; object-fit:cover; }

.hero__caption{
  position:absolute; left:-16px; bottom:26px; z-index:8;
  background:var(--paper); border:var(--border) solid var(--ink);
  box-shadow:var(--pop-xs); padding:10px 16px; border-radius:10px;
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  font-size:.8rem; letter-spacing:.06em; transform:rotate(-4deg);
  max-width:240px;
}
.hero__sticker{
  position:absolute; right:-22px; top:-28px; z-index:9;
  width:122px; height:122px; font-size:.92rem; text-align:center; padding:14px;
  transform:rotate(12deg);
  animation:stickerPulse 3.4s ease-in-out infinite;
}
@keyframes stickerPulse{ 50%{ transform:rotate(12deg) scale(1.07); } }

.hero__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; max-width:520px;
}
.stat{
  background:var(--paper); border:3px solid var(--ink); border-radius:12px;
  box-shadow:var(--pop-xs); padding:12px 10px; text-align:center;
}
.stat b{ display:block; font-family:var(--font-display); font-size:1.16rem; }
.stat span{ font-family:var(--font-head); font-weight:700; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }

/* marquee ribbon */
.ribbon{
  margin-top:clamp(50px,6vw,90px);
  background:var(--ink); color:var(--yellow);
  border-top:var(--border) solid var(--ink); border-bottom:var(--border) solid var(--ink);
  transform:rotate(-1.4deg) scale(1.045);
  overflow:hidden; white-space:nowrap; padding:14px 0;
  box-shadow:0 14px 0 rgba(0,0,0,.16);
}
.ribbon__track{ display:inline-flex; align-items:center; gap:0; animation:marquee 28s linear infinite; }
.ribbon__track span{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:.05em; padding-right:38px; white-space:nowrap; }
.ribbon__track em{ color:var(--orange); font-style:normal; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   9. ABOUT  —  comic strip fanned in 3D
   ========================================================================== */

.strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  transform-style:preserve-3d;
}
.strip__panel{ padding:0; }
.strip__panel .strip__body{ padding:24px 24px 28px; position:relative; z-index:3; }
.strip__panel:nth-child(1){ transform:rotateY(9deg) translateZ(-30px) rotate(-1.2deg); }
.strip__panel:nth-child(2){ transform:rotateY(0deg) translateZ(26px) rotate(.6deg); }
.strip__panel:nth-child(3){ transform:rotateY(-9deg) translateZ(-30px) rotate(1.4deg); }
.strip__panel:hover{ transform:rotateY(0deg) translateZ(60px) rotate(0deg); }

.strip__no{
  position:absolute; top:-18px; left:-16px; width:56px; height:56px;
  z-index:7; font-size:1.4rem;
}
.strip__head{
  font-family:var(--font-display); font-size:1.45rem; text-transform:uppercase;
  margin:6px 0 10px; color:var(--ink);
}
.strip__band{
  height:92px; background:linear-gradient(135deg,var(--blue),var(--blue-lite) 60%,var(--cyan));
  border-bottom:var(--border) solid var(--ink); position:relative; overflow:hidden;
}
.strip__band i{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:2.6rem; color:#fff; text-shadow:3px 3px 0 var(--ink);
}

/* what is fbros bubble row */
.about__bubble{ margin-top:64px; display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; }
.about__avatar{
  width:150px; height:150px; border-radius:24px; object-fit:cover; object-position:30% 40%;
  border:var(--border) solid var(--ink); box-shadow:var(--pop-sm); transform:rotate(-3deg);
}

/* meet the bros — two cards angled toward each other like an open book */
.bros{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:78px; transform-style:preserve-3d; }
.bro{ padding:0; }
.bro--duck { transform:rotateY(11deg) translateZ(-12px); transform-origin:right center; }
.bro--goose{ transform:rotateY(-11deg) translateZ(-12px); transform-origin:left center; }
.bro:hover{ transform:rotateY(0deg) translateZ(36px); }
.bro__pic{ height:290px; overflow:hidden; border-bottom:var(--border) solid var(--ink); position:relative; }
.bro__pic img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.bro:hover .bro__pic img{ transform:scale(1.06); }
.bro--duck  .bro__pic img{ object-position:22% 42%; transform:scale(1.35); }
.bro--goose .bro__pic img{ object-position:78% 30%; transform:scale(1.35); }
.bro--duck:hover  .bro__pic img{ transform:scale(1.44); }
.bro--goose:hover .bro__pic img{ transform:scale(1.44); }
.bro__tag{
  position:absolute; left:16px; bottom:16px; z-index:5;
  background:var(--yellow); border:3px solid var(--ink); box-shadow:var(--pop-xs);
  padding:6px 14px; border-radius:999px;
  font-family:var(--font-display); font-size:.95rem; letter-spacing:.04em;
}
.bro__body{ padding:24px 26px 28px; position:relative; z-index:3; }
.bro__body h4{ font-family:var(--font-display); font-size:1.6rem; margin:0 0 8px; text-transform:uppercase; }

/* bro code — stamp cards on a perspective grid */
.code-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:78px; transform-style:preserve-3d; }
.code-card{
  padding:26px 22px 28px; text-align:center;
  transform:rotateX(9deg) translateZ(0);
}
.code-card:nth-child(even){ transform:rotateX(9deg) translateY(18px); }
.code-card:hover{ transform:rotateX(0deg) translateZ(40px) translateY(0); }
.code-card__ico{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; font-size:1.55rem; color:#fff;
  background:linear-gradient(140deg,var(--blue),var(--blue-lite));
  border:3px solid var(--ink); box-shadow:var(--pop-xs);
  position:relative; z-index:3;
}
.code-card h4{ font-family:var(--font-display); font-size:1.16rem; margin:0 0 8px; text-transform:uppercase; position:relative; z-index:3; }
.code-card p{ margin:0; font-size:.94rem; line-height:1.6; color:var(--ink-soft); position:relative; z-index:3; }

/* roadmap — flight path chips */
.roadmap{ margin-top:80px; }
.roadmap__rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; transform-style:preserve-3d; }
.phase{
  padding:22px 20px 24px; border-radius:14px;
  background:var(--ink); color:#fff; border:var(--border) solid var(--ink);
  box-shadow:var(--pop-sm); position:relative; overflow:hidden;
  transform:rotateY(6deg) translateZ(-10px);
}
.phase:nth-child(2){ transform:rotateY(2deg) translateZ(6px); }
.phase:nth-child(3){ transform:rotateY(-2deg) translateZ(6px); }
.phase:nth-child(4){ transform:rotateY(-6deg) translateZ(-10px); }
.phase:hover{ transform:translateZ(34px) rotateY(0); }
.phase b{ display:block; font-family:var(--font-display); font-size:1.15rem; color:var(--yellow); text-transform:uppercase; margin-bottom:6px; }
.phase small{ font-family:var(--font-head); font-weight:800; letter-spacing:.14em; font-size:.66rem; color:var(--cyan); text-transform:uppercase; }
.phase p{ margin:8px 0 0; font-size:.9rem; line-height:1.55; color:#dbe7ff; }

/* ==========================================================================
   10. HOW TO BUY  —  receding flight path
   ========================================================================== */

.flight{ position:relative; transform-style:preserve-3d; }
.flight__path{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.flight__path path{ stroke:rgba(255,255,255,.75); stroke-width:5; stroke-dasharray:14 16; fill:none; animation:dash 3.5s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-60; } }

.steps{ display:grid; gap:26px; position:relative; z-index:2; }
.step{
  display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:center;
  padding:22px 26px; width:min(760px,100%);
}
.step:nth-child(1){ margin-right:auto;  transform:rotateY(7deg)  translateZ(30px); }
.step:nth-child(2){ margin-left:auto;   transform:rotateY(-7deg) translateZ(12px); }
.step:nth-child(3){ margin-right:auto;  transform:rotateY(7deg)  translateZ(-8px); }
.step:nth-child(4){ margin-left:auto;   transform:rotateY(-7deg) translateZ(-26px); }
.step:nth-child(5){ margin-right:auto;  transform:rotateY(7deg)  translateZ(-44px); }
.step:hover{ transform:rotateY(0deg) translateZ(56px); }
.step__no{ width:82px; height:82px; font-size:1.9rem; position:relative; z-index:3; }
.step__txt{ position:relative; z-index:3; }
.step__txt h4{ font-family:var(--font-display); font-size:1.35rem; margin:0 0 6px; text-transform:uppercase; }
.step__txt p{ margin:0; color:var(--ink-soft); line-height:1.6; font-size:.98rem; }
.step__txt i.bi{ color:var(--blue); }

/* contract address box */
.ca-box{
  margin-top:56px; padding:26px; display:grid; gap:16px;
  background:var(--ink); border-radius:18px; border:var(--border) solid var(--ink);
  box-shadow:var(--pop); position:relative; overflow:hidden;
}
.ca-box__label{
  font-family:var(--font-head); font-weight:800; letter-spacing:.16em; font-size:.72rem;
  text-transform:uppercase; color:var(--cyan);
}
.ca-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.ca-value{
  flex:1 1 340px; min-width:0;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:.98rem; color:#fff; background:rgba(255,255,255,.08);
  border:3px dashed rgba(255,255,255,.35); border-radius:12px;
  padding:14px 16px; overflow-wrap:anywhere;
}
.ca-note{ color:#b9cdf2; font-size:.86rem; margin:0; }
.ca-note i{ color:var(--yellow); }

.buy-cta{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:34px; }

/* ==========================================================================
   11. CHART  —  arcade / TV cabinet
   ========================================================================== */

.cabinet{
  padding:0; border-radius:26px;
  background:linear-gradient(160deg,#132043,#0a1020 60%);
  border:6px solid var(--ink);
  box-shadow:14px 14px 0 rgba(10,16,32,.85), 0 30px 60px rgba(0,10,40,.5);
  transform:rotateX(7deg) rotateZ(-.7deg);
  transform-style:preserve-3d;
}
.cabinet:hover{ transform:rotateX(0deg) rotateZ(0deg) translateZ(24px); }
.cabinet__bar{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; background:var(--yellow);
  border-bottom:6px solid var(--ink);
}
.cabinet__bar b{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; }
.cabinet__bar .bolts{ margin-left:auto; display:flex; gap:8px; }
.bolt{ width:14px; height:14px; border-radius:50%; background:var(--ink); box-shadow:inset -2px -2px 0 rgba(255,255,255,.25); }
.cabinet__screen{
  position:relative; padding:14px; background:#05070f;
}
.cabinet__screen iframe{
  display:block; width:100%; height:min(74vh, 620px);
  border:0; border-radius:12px; background:#05070f;
}
.scanlines{
  position:absolute; inset:14px; pointer-events:none; border-radius:12px; z-index:3;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  mix-blend-mode:overlay;
}
.chart-links{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:38px; }

/* ==========================================================================
   12. JOIN US
   ========================================================================== */

.join{ }
.banner-frame{
  position:relative; padding:16px; border-radius:20px; background:var(--paper);
  border:var(--border) solid var(--ink); box-shadow:var(--pop);
  transform:rotateX(6deg) rotateZ(-1.2deg); transform-style:preserve-3d;
}
.banner-frame:hover{ transform:rotateX(0) rotateZ(0) translateZ(26px); }
.banner-frame img{ width:100%; border-radius:12px; border:3px solid var(--ink); }
.banner-frame .tape--l{ top:-16px; left:34px; transform:rotate(-7deg); }
.banner-frame .tape--r{ top:-16px; right:34px; transform:rotate(6deg); }
.banner-cap{
  margin:14px 4px 2px; text-align:center;
  font-family:var(--font-head); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; font-size:.82rem; color:var(--ink-soft);
}

.socials{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; transform-style:preserve-3d; }
.social{
  display:grid; gap:10px; place-items:center; text-align:center;
  padding:28px 20px; border-radius:16px;
  background:var(--paper); border:var(--border) solid var(--ink); box-shadow:var(--pop-sm);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
  position:relative; overflow:hidden;
}
.social:nth-child(1){ transform:rotate(-1.6deg); }
.social:nth-child(2){ transform:rotate(.8deg) translateZ(16px); }
.social:nth-child(3){ transform:rotate(1.6deg); }
.social:hover{ transform:translateZ(40px) rotate(0deg); box-shadow:12px 12px 0 var(--ink); }
.social__ico{
  width:70px; height:70px; border-radius:18px; display:grid; place-items:center;
  border:3px solid var(--ink); box-shadow:var(--pop-xs); color:#fff; font-size:1.8rem;
  position:relative; z-index:3;
}
.social__ico .brandmark{ width:34px; height:34px; }
.social--x  .social__ico{ background:var(--ink); }
.social--ps .social__ico{ background:linear-gradient(140deg,#22c55e,#0f8f4a); }
.social--ds .social__ico{ background:linear-gradient(140deg,#5b6bff,#2a2f6b); }
.social b{ font-family:var(--font-display); font-size:1.12rem; text-transform:uppercase; position:relative; z-index:3; }
.social span{ font-size:.88rem; color:var(--ink-soft); position:relative; z-index:3; }

.closing{
  margin-top:64px; text-align:center; padding:44px 26px;
  background:var(--ink); border:var(--border) solid var(--ink); border-radius:20px;
  box-shadow:var(--pop); position:relative; overflow:hidden;
}
.closing h3{ font-family:var(--font-display); font-size:clamp(1.9rem,5vw,3.2rem); color:#fff; margin:0 0 10px; text-transform:uppercase; text-shadow:3px 3px 0 var(--orange); }
.closing p{ color:#cfe0ff; margin:0 auto 26px; max-width:60ch; line-height:1.65; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.footer{ position:relative; padding:58px 0 40px; background:rgba(6,14,38,.86); border-top:var(--border) solid var(--ink); }
.footer__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:34px; align-items:start; }
.footer h5{ font-family:var(--font-display); color:var(--yellow); text-transform:uppercase; font-size:1.05rem; margin:0 0 14px; }
.footer p, .footer li{ color:#c6d8f7; font-size:.92rem; line-height:1.65; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer li b{ color:#fff; }
.disclaimer{
  margin-top:38px; padding:18px 22px; border-radius:14px;
  background:rgba(255,255,255,.05); border:2px dashed rgba(255,255,255,.25);
  color:#a9c0e6; font-size:.84rem; line-height:1.6;
}
.footer__base{ margin-top:26px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:#8fa8d4; font-size:.82rem; }

/* ==========================================================================
   14. HELPERS + RESPONSIVE
   ========================================================================== */

.copy-ok{ background:#22c55e !important; color:#fff !important; }

@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ max-width:520px; margin:0 auto; }
  .strip, .code-grid, .roadmap__rail, .socials{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .step{ width:100%; }
  .step:nth-child(n){ transform:none; }
  .strip__panel:nth-child(n), .bro, .phase, .code-card, .social:nth-child(n){ transform:none; }
  .cabinet, .banner-frame{ transform:none; }
}
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .about__bubble{ grid-template-columns:1fr; text-align:center; }
  .about__avatar{ margin:0 auto; }
  .bubble::after,.bubble::before{ left:50%; transform:translateX(-50%); }
}
@media (max-width:640px){
  .strip, .code-grid, .roadmap__rail, .socials, .bros{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__stats{ grid-template-columns:1fr 1fr; }
  .step{ grid-template-columns:1fr; text-align:center; }
  .step__no{ margin:0 auto; }
  .hero__sticker{ width:96px; height:96px; font-size:.78rem; right:-8px; top:-18px; }
  .cabinet__screen iframe{ height:66vh; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---- late additions ------------------------------------------------------ */
.btn--yellow{ --btn-bg:var(--yellow); }

/* brand marks (pumpswap / dexscreener / solana) need an explicit box */
.brandmark{ width:1.15em; height:1.15em; display:inline-block; flex:none; }

.footer a{ transition:color .15s ease; }
.footer a:hover{ color:var(--yellow); }
.footer ul a i, .footer ul a .brandmark{ margin-right:6px; }

@media (max-width:520px){
  .nav__inner .btn{ display:none; }
  .brand__img{ width:42px; height:42px; }
}

/* ---- chart states (loading / blocked fallback) --------------------------- */
.cabinet__screen{ min-height:420px; }
.cabinet__screen iframe{ visibility:hidden; }

.dex-state{
  position:absolute; inset:14px; z-index:4; border-radius:12px;
  display:grid; place-items:center; text-align:center; padding:40px;
  color:#cfe0ff; background:#05070f;
}
.dex-state h3{ color:#fff; font-size:1.6rem; margin:0 0 8px; }
.dex-state p{ margin:0 auto; max-width:46ch; line-height:1.6; font-size:.95rem; }
.dex-state .burst{ display:grid; place-items:center; }

.dex-spinner{
  width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
  border:6px solid rgba(255,255,255,.14);
  border-top-color:var(--yellow);
  border-right-color:var(--orange);
  animation:dexSpin 1s linear infinite;
}
@keyframes dexSpin{ to{ transform:rotate(360deg); } }