/* ============ BASE ============ */
:root{
  --bg:#05070c;
  --bg-alt:#0a0f18;
  --bg-alt-2:#0d1420;
  --cyan:#65e8f4;
  --cyan-dim:rgba(101,232,244,.35);
  --pink:#ff2e93;
  --pink-bright:#ff4fa3;
  --pink-dim:rgba(255,79,163,.35);
  --text:#e7ecf2;
  --text-dim:#aab4c2;
  --serif:'Gilda Display', Georgia, serif;
  --sans:'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --script:'Sacramento', cursive;
}

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

html{scroll-behavior:smooth;background:var(--bg);overscroll-behavior-y:none;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}

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

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:.3px;
}

/* Gradient + glow headings */
.hero-headline,.h2-sub,.section-title span,
.about-copy h2,.collection-content h3,.versions-copy h2,.cta-copy h2{
  --g:linear-gradient(180deg,#ffffff 15%,#cdf7fb 100%);
  --gs:rgba(225,250,252,.85);
  --glow:rgba(101,232,244,.35);
  background:var(--g);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:.6px var(--gs);
  filter:drop-shadow(0 0 10px var(--glow));
}
.hero-headline,.h2-sub,.section-title span{
  --g:linear-gradient(180deg,#d4fbff 0%,#86eefa 45%,#4fd9e8 100%);
  --gs:rgba(134,238,250,.8);
  --glow:rgba(101,232,244,.45);
}
.collection-card.pink h3{
  --g:linear-gradient(180deg,#ffc2e0 0%,#ff6db6 55%,#ff3d9a 100%);
  --gs:rgba(255,109,182,.8);
  --glow:rgba(255,46,147,.45);
}

a{text-decoration:none;color:inherit;}
ul{list-style:none;}

.eyebrow{
  color:var(--cyan);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:14px;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:1.2px;
  text-transform:uppercase;
  white-space:nowrap;
  padding:16px 32px;
  border-radius:40px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-pink{
  background:linear-gradient(135deg,var(--pink-bright),var(--pink));
  color:#fff;
  box-shadow:0 8px 24px rgba(255,46,147,.35);
}
.btn-pink:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,46,147,.5);}
.btn .arrow{font-size:1.1rem;line-height:1;}
.btn-small{padding:11px 22px;font-size:.72rem;letter-spacing:1px;}
.btn-large{
  padding:0 32px 0 30px;
  height:60px;
  gap:0;
  font-size:1.2rem;
  font-weight:500;
  letter-spacing:1.3px;
  background:linear-gradient(180deg,#ff4aa6,#ff1f84);
  box-shadow:0 0 22px rgba(255,31,132,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-large .arrow{margin-left:22px;font-size:1.5rem;font-weight:300;}
.patreon-mark{width:27px;height:27px;fill:#fff;margin-right:28px;flex-shrink:0;}

/* ============ CHECK LISTS ============ */
.check-list li{
  position:relative;
  padding-left:30px;
  margin-bottom:10px;
  font-size:.92rem;
  color:var(--text-dim);
}
.check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:19px;
  height:19px;
  border-radius:50%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px;
}
.check-list.pink li::before{
  border:1.5px solid var(--pink-bright);
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4fa3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.check-list.cyan li::before{
  border:1.5px solid var(--cyan);
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365e8f4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ============ SCRIPT TEXT ============ */
.script-text{
  font-family:var(--script);
  color:#ff4fb0;
  font-size:2.1rem;
  line-height:1.2;
  -webkit-text-stroke:.7px #ff4fb0;
  text-shadow:0 0 4px rgba(255,79,176,.9), 0 0 14px rgba(255,31,132,.8), 0 0 30px rgba(255,31,132,.5);
}
.heart-suffix{font-size:.85em;}

/* ============ HEADER ============ */
.site-header{
  background:var(--bg);
  padding:18px 0;
  border-bottom:1px solid rgba(101,232,244,.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{height:52px;width:auto;}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:620px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:68% 8%;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(3,4,8,.88) 0%, rgba(3,4,8,.72) 28%, rgba(3,4,8,.35) 46%, rgba(3,4,8,0) 62%),
    linear-gradient(0deg, rgba(3,4,8,.55) 0%, rgba(3,4,8,0) 22%);
}
.hero .container{padding:0 55px;}
.hero-inner{
  position:relative;
  z-index:2;
  padding-top:40px;
  padding-bottom:40px;
}
.hero-copy{max-width:560px;}
.hero-logo{
  width:445px;
  max-width:100%;
  margin:0 0 14px -6px;
}
.hero-headline{
  font-size:2.2rem;
  line-height:1.08;
  letter-spacing:-.6px;
  -webkit-text-stroke-width:.8px;
  margin-bottom:14px;
}
.hero-text{
  color:#f1f3f6;
  font-size:.98rem;
  font-weight:400;
  line-height:1.42;
  max-width:385px;
  margin-bottom:18px;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.hero-copy .btn{margin-bottom:20px;}
.hero .check-list{padding-left:14px;}
.hero .check-list li{
  color:#f1f3f6;
  font-size:.9rem;
  margin-bottom:5px;
  padding-left:32px;
}
.hero-script{
  position:absolute;
  z-index:2;
  right:max(2.5%, calc((100% - 1200px) / 2 + 30px));
  bottom:7%;
  font-size:2.6rem;
  line-height:1.02;
  -webkit-text-stroke:.35px #ff4fb0;
  text-align:center;
  transform:rotate(-11deg);
  transform-origin:right bottom;
}

/* ============ ICON STRIP ============ */
.icon-strip{
  background:var(--bg-alt);
  border-top:1px solid rgba(101,232,244,.3);
  border-bottom:1px solid rgba(101,232,244,.3);
  padding:30px 0 28px;
}
.icon-strip-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:24px;
}
.icon-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}
.icon-item img{width:34px;height:34px;}
.icon-item span{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.8px;
  color:var(--text-dim);
}
.icon-strip .icon-item{gap:8px;}
.icon-strip .icon-item img{
  width:52px;
  height:52px;
  filter:drop-shadow(0 0 6px rgba(101,232,244,.55));
}
.icon-strip .icon-item span{
  font-size:.95rem;
  font-weight:700;
  letter-spacing:1.2px;
  line-height:1.2;
  color:#f1f3f6;
}

/* ============ ABOUT ============ */
.about{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 45% 80% at 100% 65%, rgba(255,46,147,.16), transparent 70%),
    linear-gradient(90deg, var(--bg) 30%, #0a0d16 100%);
  border-bottom:1px solid rgba(101,232,244,.3);
  box-shadow:inset 0 -1px 12px rgba(101,232,244,.06);
}
.about-image{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:max(36%, calc(50% - 190px));
  background-size:cover;
  background-position:30% 25%;
  -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 62%,transparent 100%);
}
.about-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:0;
  align-items:center;
  padding-top:44px;
  padding-bottom:44px;
  padding-left:430px;
}
.about-copy{padding-right:36px;}
.about-copy .eyebrow{color:#c9c4ef;font-weight:500;margin-bottom:8px;}
.about-copy h2{
  font-size:2.35rem;
  line-height:1.12;
  margin-bottom:18px;
}
.h2-sub{
  display:block;
  font-size:1.62rem;
  margin-top:6px;
}
.about-copy p{
  color:#e3e7ee;
  font-size:.98rem;
  line-height:1.45;
  margin-bottom:16px;
  max-width:440px;
}
.about-copy p:last-child{margin-bottom:0;}
.about-for{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid rgba(101,232,244,.22);
  padding-left:26px;
}
.about-for .eyebrow{color:#fff;font-weight:700;margin-bottom:14px;}
.for-list li{
  display:flex;
  align-items:center;
  gap:20px;
  padding:9px 0;
  font-size:.9rem;
  line-height:1.4;
  color:#eef1f5;
}
.for-list img{
  width:34px;
  height:34px;
  flex-shrink:0;
  filter:drop-shadow(0 0 5px rgba(101,232,244,.5));
}

/* ============ COLLECTIONS ============ */
.collections{
  background:
    radial-gradient(ellipse 40% 70% at 100% 50%, rgba(255,46,147,.1), transparent 70%),
    radial-gradient(ellipse 40% 70% at 0% 50%, rgba(101,232,244,.07), transparent 70%),
    var(--bg-alt);
  padding:48px 0 64px;
}
.section-title{
  text-align:center;
  color:var(--cyan);
  font-size:1.6rem;
  letter-spacing:3px;
  margin-bottom:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
}
.section-title::before,.section-title::after{
  content:"";
  flex:0 0 54px;
  height:2px;
  border-radius:2px;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(101,232,244,.7);
}
.section-title span{white-space:nowrap;}

.collections-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}
.collection-card{
  --tint:4,16,22;
  position:relative;
  min-height:360px;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:rgb(var(--tint));
}
.collection-card.cyan{
  border:1.5px solid rgba(101,232,244,.8);
  box-shadow:0 0 20px rgba(101,232,244,.35), inset 0 0 22px rgba(101,232,244,.14);
}
.collection-card.pink{
  --tint:44,6,28;
  border:1.5px solid rgba(255,79,163,.85);
  box-shadow:0 0 20px rgba(255,46,147,.38), inset 0 0 22px rgba(255,46,147,.16);
}
.collection-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:right 30%;
}
.collection-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(var(--tint),.96) 0%, rgba(var(--tint),.86) 36%, rgba(var(--tint),.35) 60%, rgba(var(--tint),0) 80%);
}
.collection-card.pink .collection-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,46,147,.1);
  mix-blend-mode:screen;
}
.collection-content{
  position:relative;
  z-index:1;
  max-width:60%;
  padding:30px 0 30px 30px;
}
.collection-content h3{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:2.05rem;
  line-height:1.02;
  margin-bottom:16px;
}
.collection-content h3 img{width:48px;height:48px;flex-shrink:0;}
.collection-content p{
  color:#eef1f5;
  font-size:.95rem;
  line-height:1.4;
  margin-bottom:18px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.collection-content .check-list li{
  color:#eef1f5;
  font-size:.9rem;
  margin-bottom:6px;
  padding-left:28px;
}
.collection-content .check-list li::before{width:17px;height:17px;background-size:10px;}

/* ============ VERSIONS ============ */
.versions{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 45% 90% at 100% 50%, rgba(101,232,244,.07), transparent 70%),
    linear-gradient(90deg, var(--bg) 30%, #07101a 100%);
  border-top:1px solid rgba(101,232,244,.3);
  border-bottom:1px solid rgba(101,232,244,.3);
}
.versions-image{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:max(36%, calc(50% - 190px));
  background-size:cover;
  background-position:40% 35%;
  -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 60%,transparent 100%);
}
.versions-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 390px;
  column-gap:34px;
  row-gap:18px;
  align-items:center;
  padding-top:34px;
  padding-bottom:30px;
  padding-left:430px;
}
.versions-copy h2{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:2.6px;
  line-height:1.3;
  -webkit-text-stroke-width:0;
  margin-bottom:12px;
}
.versions-copy > p{
  color:#e3e7ee;
  font-size:.95rem;
  line-height:1.45;
}
.versions-boxes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.version-box{
  text-align:center;
  border:1.5px solid rgba(101,232,244,.55);
  border-radius:10px;
  padding:18px 14px 16px;
  background:rgba(6,18,26,.6);
  box-shadow:0 0 14px rgba(101,232,244,.18), inset 0 0 14px rgba(101,232,244,.08);
}
.version-box img{
  width:44px;
  height:44px;
  margin:0 auto 10px;
  filter:drop-shadow(0 0 6px rgba(101,232,244,.6));
}
.version-box h4{
  color:var(--cyan);
  font-family:var(--sans);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:1.2px;
  margin-bottom:6px;
}
.version-box p{color:#e3e7ee;font-size:.84rem;line-height:1.35;}
.note{grid-column:1 / -1;color:#e3e7ee;font-size:.95rem;}
.note strong{color:#fff;}

/* ============ CTA ============ */
.cta{
  position:relative;
  overflow:hidden;
  min-height:460px;
  display:flex;
  align-items:center;
  border-top:1px solid rgba(101,232,244,.3);
}
.cta-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 40%;
  transform:scaleX(-1);
}
.cta-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(270deg, rgba(3,4,8,.15) 0%, rgba(3,4,8,.2) 35%, rgba(3,4,8,.68) 55%, rgba(3,4,8,.8) 100%),
    linear-gradient(0deg, rgba(3,4,8,.55) 0%, rgba(3,4,8,0) 30%);
}
.cta-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,540px) 1fr;
  align-items:center;
  padding-top:44px;
  padding-bottom:40px;
}
.cta-copy{grid-column:1;text-align:left;}
.cta-copy h2{
  font-size:2.6rem;
  line-height:1.1;
  margin-bottom:16px;
}
.cta-copy > p{
  color:#eef1f5;
  font-size:1rem;
  line-height:1.45;
  max-width:470px;
  margin:0 0 24px;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.cta-copy .btn{margin-bottom:26px;}
.cta-icons{
  display:flex;
  justify-content:flex-start;
  gap:44px;
}
.cta-icons .icon-item{gap:8px;}
.cta-icons .icon-item img{
  width:32px;
  height:32px;
  filter:drop-shadow(0 0 6px rgba(101,232,244,.6));
}
.cta-icons .icon-item span{
  color:#f1f3f6;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:1px;
  line-height:1.25;
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--bg-alt);
  border-top:1px solid rgba(101,232,244,.1);
  padding:36px 0 24px;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer-logo{height:44px;}
.copyright{
  text-align:center;
  color:var(--text-dim);
  font-size:.78rem;
  margin-top:26px;
  opacity:.7;
}

/* ============ RESPONSIVE ============ */

/* Laptop: tighten type, keep the composition */
@media (max-width:1440px){
  .hero{min-height:580px;}
  .hero .container{padding:0 40px;}
  .hero-logo{width:390px;}
  .hero-headline{font-size:1.95rem;}
  .hero-text{font-size:.93rem;max-width:360px;}
  .btn-large{height:54px;font-size:1.05rem;padding:0 28px 0 26px;}
  .patreon-mark{width:23px;height:23px;margin-right:22px;}
  .btn-large .arrow{margin-left:18px;}
  .hero .check-list li{font-size:.86rem;}
  .hero-script{font-size:2.25rem;}
  .about-copy h2{font-size:2.1rem;}
  .h2-sub{font-size:1.45rem;}
  .cta-copy h2{font-size:2.15rem;}
  .collection-content h3{font-size:1.8rem;}
  .collection-content h3 img{width:42px;height:42px;}
  .collection-card{min-height:340px;}
  .versions-copy h2{font-size:1.15rem;letter-spacing:2.4px;}
}

@media (max-width:1200px){
  .about-grid{padding-left:38%;grid-template-columns:1fr 270px;}
  .about-copy h2{font-size:1.85rem;}
  .h2-sub{font-size:1.3rem;}
  .versions-grid{padding-left:38%;grid-template-columns:1fr 310px;column-gap:26px;}
  .versions-copy h2{font-size:1rem;letter-spacing:1.8px;}
}

@media (max-width:1024px){
  .about-image{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background-position:30% 22%;
    -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
  }
  .about-grid{
    grid-template-columns:1fr;
    padding-left:32px;
    padding-top:0;
    margin-top:-40px;
    padding-bottom:56px;
    row-gap:36px;
  }
  .about-copy{padding-right:0;}
  .about-copy p{max-width:620px;}
  .about-for{border-left:none;padding-left:0;padding-top:28px;border-top:1px solid rgba(101,232,244,.22);}
  .versions-image{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
  }
  .versions-grid{
    grid-template-columns:1fr;
    padding-left:32px;
    padding-top:0;
    margin-top:-40px;
    padding-bottom:44px;
    row-gap:24px;
  }
  .versions-boxes{max-width:520px;}
  .versions-copy h2{font-size:1.2rem;letter-spacing:2.5px;}
}

/* Tablet */
@media (max-width:980px){
  .hero{min-height:540px;}
  .hero-bg{background-position:72% 22%;}
  .hero-overlay{
    background:
      linear-gradient(90deg, rgba(3,4,8,.92) 0%, rgba(3,4,8,.8) 40%, rgba(3,4,8,.3) 65%, rgba(3,4,8,0) 80%),
      linear-gradient(0deg, rgba(3,4,8,.6) 0%, rgba(3,4,8,0) 25%);
  }
  .hero-copy{max-width:460px;}
  .hero-logo{width:340px;}
  .hero-headline{font-size:1.75rem;}
  .hero-script{font-size:1.85rem;bottom:5%;}
  .collections-grid{grid-template-columns:1fr;}
  .icon-strip-grid{grid-template-columns:repeat(3,1fr);row-gap:28px;}
  .cta-inner{grid-template-columns:1fr;}
  .cta-copy{grid-column:1;}
  .cta-overlay{background:linear-gradient(180deg, rgba(3,4,8,.55) 0%, rgba(3,4,8,.75) 45%, rgba(3,4,8,.9) 100%);}
}

/* Mobile: stacked layout, photo on top, copy below */
@media (max-width:768px){
  .container{padding:0 20px;}
  .hero{display:block;min-height:0;}
  .hero-bg{
    position:relative;
    inset:auto;
    aspect-ratio:5/4;
    background-position:66% 18%;
  }
  .hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(5,7,12,0) 45%, rgba(5,7,12,.75) 78%, var(--bg) 100%);
  }
  .hero-overlay{display:none;}
  .hero .container{padding:0 20px;}
  .hero-inner{margin-top:-80px;padding:0 0 28px;text-align:center;}
  .hero-copy{max-width:none;}
  .hero-logo{width:min(300px,78%);margin:0 auto 16px;}
  .hero-headline{font-size:1.65rem;line-height:1.12;}
  .hero-text{font-size:.98rem;max-width:420px;margin:0 auto 22px;}
  .hero-copy .btn{width:100%;max-width:380px;justify-content:center;margin-bottom:22px;}
  .btn-large{height:56px;font-size:1rem;padding:0 22px;}
  .patreon-mark{width:22px;height:22px;margin-right:16px;}
  .btn-large .arrow{margin-left:14px;}
  .hero .check-list{display:inline-block;text-align:left;padding-left:0;}
  .hero-script{
    position:static;
    font-size:2.1rem;
    transform:rotate(-6deg);
    margin:4px auto 44px;
  }
  .header-inner{flex-direction:column;gap:14px;}
  .icon-strip .icon-item img{width:42px;height:42px;}
  .icon-strip .icon-item span{font-size:.82rem;}
  .about-grid{padding-left:20px;margin-top:-24px;padding-bottom:48px;}
  .versions-grid{padding-left:20px;margin-top:-24px;}
  .versions-image{aspect-ratio:4/3;}
  .versions-boxes{gap:10px;}
  .version-box{padding:16px 10px 14px;}
  .about-image{aspect-ratio:4/3;}
  .about-copy h2{font-size:1.8rem;}
  .h2-sub{font-size:1.3rem;}
  .collections{padding:64px 0 72px;}
  .collections{padding:40px 0 56px;}
  .collection-card{flex-direction:column-reverse;align-items:stretch;min-height:0;}
  .collection-photo{position:relative;inset:auto;aspect-ratio:16/10;background-position:right 30%;}
  .collection-photo::before{background:linear-gradient(180deg, rgba(var(--tint),0) 35%, rgba(var(--tint),.6) 70%, rgb(var(--tint)) 99%);}
  .collection-card.pink .collection-photo::after{display:none;}
  .collection-content{max-width:none;padding:6px 20px 24px;}
  .collection-content h3{font-size:1.7rem;}
  .collection-content h3 img{width:40px;height:40px;}
  .footer-inner{flex-direction:column;gap:16px;text-align:center;}
  .cta{min-height:0;}
  .cta-inner{padding-top:56px;padding-bottom:56px;}
  .cta-bg{background-position:30% center;}
  .cta-copy h2{font-size:1.9rem;}
  .cta-copy .btn{width:100%;max-width:380px;justify-content:center;}
  .cta-icons{gap:26px;justify-content:space-between;max-width:380px;}
}

@media (max-width:480px){
  .icon-strip-grid{grid-template-columns:repeat(2,1fr);}
  .section-title{font-size:1.05rem;letter-spacing:2px;gap:12px;}
  .section-title::before,.section-title::after{flex-basis:22px;}
}

@media (max-width:400px){
  .section-title{font-size:.92rem;letter-spacing:1.2px;gap:8px;}
  .section-title::before,.section-title::after{flex-basis:14px;}
  .btn-large{font-size:.92rem;letter-spacing:.8px;padding:0 18px;}
  .patreon-mark{margin-right:12px;}
  .btn-large .arrow{margin-left:10px;}
}

/* ============ TABLET & PHONE OPTIMIZATIONS ============ */

/* Tablet (769–1024): shorter banner photos, side-by-side content */
@media (min-width:769px) and (max-width:1024px){
  .about-image{aspect-ratio:21/9;background-position:30% 30%;}
  .about-grid{grid-template-columns:1fr 280px;column-gap:34px;row-gap:0;margin-top:-30px;align-items:start;}
  .about-for{border-top:none;padding-top:0;border-left:1px solid rgba(101,232,244,.22);padding-left:24px;justify-content:flex-start;}
  .collections-grid{grid-template-columns:1fr;max-width:780px;margin:0 auto;}
  .collection-card{min-height:320px;}
  .collection-content{max-width:56%;}
  .versions-image{aspect-ratio:21/9;background-position:40% 40%;}
  .versions-grid{margin-top:-30px;}
}

@media (min-width:900px) and (max-width:1024px){
  .versions-grid{grid-template-columns:1fr 1fr;column-gap:30px;}
  .versions-boxes{max-width:none;}
}

/* Tablet portrait: give the hero photo more height */
@media (min-width:769px) and (max-width:1024px) and (orientation:portrait){
  .hero{min-height:600px;}
}

/* Large phone / small tablet (601–768) */
@media (min-width:601px) and (max-width:768px){
  .hero-bg{aspect-ratio:16/10;}
  .about-image,.versions-image{aspect-ratio:16/9;}
  .collection-card{flex-direction:row;align-items:center;min-height:320px;}
  .collection-photo{position:absolute;inset:0;aspect-ratio:auto;}
  .collection-photo::before{background:linear-gradient(90deg, rgba(var(--tint),.96) 0%, rgba(var(--tint),.86) 40%, rgba(var(--tint),.3) 65%, rgba(var(--tint),0) 85%);}
  .collection-card.pink .collection-photo::after{display:block;}
  .collection-content{max-width:58%;padding:26px 0 26px 26px;}
}

/* All phones & small tablets */
@media (max-width:768px){
  .hero .check-list{display:table;margin:0 auto;}
  .icon-strip{padding:26px 0;}
}

/* Phones (≤600): readable body text */
@media (max-width:600px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  .hero-text,.about-copy p,.versions-copy > p,.cta-copy > p,.collection-content p{font-size:1rem;}
  .hero .check-list li,.collection-content .check-list li,.for-list li,.note{font-size:.95rem;}
  .version-box p{font-size:.88rem;}
  .hero-script{font-size:1.9rem;margin-bottom:36px;}
  .icon-strip-grid{row-gap:22px;}
}

/* Phone landscape: keep the hero within one screen */
@media (max-height:500px) and (orientation:landscape){
  .hero{min-height:0;}
  .hero-inner{padding-top:24px;padding-bottom:24px;}
  .hero-logo{width:280px;}
}

/* Touch devices: no sticky hover lift, give tap feedback instead */
@media (hover:none){
  .btn-pink:hover{transform:none;}
  .btn:active{transform:scale(.98);}
}

/* Tablet: audio-version boxes span the full content width */
@media (min-width:601px) and (max-width:899px){
  .versions-boxes{max-width:none;}
}

/* Links to the About page */
.text-link{
  display:inline-block;
  margin-top:4px;
  color:var(--cyan);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.4px;
  border-bottom:1px solid rgba(101,232,244,.4);
  transition:border-color .2s ease;
}
.text-link:hover{border-bottom-color:var(--cyan);}
.home-footer-nav{text-align:center;margin-top:16px;}
.home-footer-nav a{
  color:#e3e7ee;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.home-footer-nav a:hover{color:var(--cyan);}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* ============ SEMANTIC / SEO MARKUP SUPPORT ============ */

/* Hero photo as a real <img> (LCP) — same crops as the former background */
.hero-bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:68% 8%;
}
@media (max-width:980px){ .hero-bg img{object-position:72% 22%;} }
@media (max-width:768px){ .hero-bg img{object-position:66% 18%;} }

/* width/height attributes must not distort scaled images */
.hero-logo,.footer-logo{height:auto;}
.footer-logo{height:44px;width:auto;}

/* "Who is BEAU for?" is now an h3 — keep the eyebrow look */
.about-for h3.eyebrow{font-family:var(--sans);letter-spacing:2px;}

/* Audio-version titles moved from h4 to h3 */
.version-box h3{
  color:var(--cyan);
  font-family:var(--sans);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:1.2px;
  margin-bottom:6px;
}

/* Small partner discovery note */
.partner-note{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(101,232,244,.18);
}
.partner-note h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:0;
  color:#fff;
  margin-bottom:4px;
}
.partner-note p{color:#c9cfd9;font-size:.84rem;line-height:1.45;margin-bottom:6px;}
.partner-note .text-link{font-size:.84rem;}

/* Footer */
.home-footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 30px;padding:0 20px;}
.home-footer-nav a[aria-current="page"]{color:var(--cyan);}
.footer-text{text-align:center;}
.footer-desc{color:#aab4c2;font-size:.82rem;line-height:1.5;max-width:620px;margin:18px auto 0;}
.footer-text .copyright{margin-top:12px;}
.footer-disclaimer{color:#8d97a6;font-size:.74rem;font-style:italic;line-height:1.5;margin-top:6px;opacity:.85;}