@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#f7f5ef;--ink:#151414;--muted:#77736d;--pink:#f25d68;--yellow:#f4d35e;--line:#d8d4cd;--green:#b9d9bd}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.45}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.site-header{height:84px;display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto;padding:0 5vw;border-bottom:1px solid var(--line)}.brand{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.04em;display:flex;align-items:center;gap:9px}.brand-mark{background:var(--pink);width:26px;height:26px;display:inline-grid;place-items:center;border-radius:50%;font-size:21px;line-height:1}.desktop-nav{display:flex;gap:28px;color:#55514d;font-size:14px}.desktop-nav a:hover,.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}.header-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:13px 17px;font-size:13px;font-weight:700}.header-cta{border-bottom:1px solid var(--ink);padding:5px 0}.header-cta span,.button span{font-size:18px;font-weight:400}.section-pad{padding:110px 8vw;max-width:1440px;margin:auto}.eyebrow,.section-kicker{font:500 11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow-dot{width:7px;height:7px;background:var(--pink);display:inline-block;border-radius:50%}.hero{min-height:690px;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;padding-top:75px;padding-bottom:90px;overflow:hidden}.hero h1,.split-heading h2,.showcase h2,.builder-copy h2,.profile-card h2,.faq h2,.final-cta h2{font:600 clamp(52px,6.2vw,94px)/.94 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:28px 0}.hero h1 em,.split-heading em,.showcase em,.builder-copy em,.profile-card em,.faq em,.final-cta em{font-style:normal;color:var(--pink)}.hero-intro{max-width:440px;font-size:18px;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:32px}.button-dark{background:var(--ink);color:var(--paper)}.button-light{border:1px solid var(--paper);color:var(--paper)}.text-link,.arrow-link{font-size:13px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:4px}.hero-art{min-height:520px;position:relative}.sun-shape{position:absolute;width:370px;height:370px;border-radius:50%;background:var(--yellow);left:50%;top:50%;transform:translate(-50%,-50%)}.helmet{position:absolute;width:330px;height:250px;border-radius:52% 52% 20% 20%;background:#252525;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);box-shadow:20px 25px 0 rgba(21,20,20,.12)}.helmet-shine{position:absolute;inset:14px 22px auto;height:65px;border-radius:50%;background:rgba(255,255,255,.1)}.helmet-stripe{position:absolute;inset:0 42%;background:var(--pink);transform:rotate(8deg)}.helmet-vent{position:absolute;width:28px;height:8px;border-radius:8px;background:#111;transform:rotate(-8deg)}.vent-one{top:65px;left:66px}.vent-two{top:49px;left:126px}.vent-three{top:43px;left:185px}.sticker{position:absolute;right:36px;bottom:28px;width:112px;height:135px;background:var(--paper);padding:10px;transform:rotate(8deg);text-align:center}.mini-brand{font:700 10px 'DM Mono',monospace}.mini-brand span{color:var(--pink)}.qr{background:repeating-linear-gradient(45deg,#111 0 3px,#fff 3px 6px);border:5px solid #fff}.qr-small{width:64px;height:64px;margin:7px auto}.sticker strong{font:700 8px 'DM Mono',monospace;line-height:1.1}.floating-note{position:absolute;z-index:2;background:var(--paper);padding:12px 14px;display:flex;gap:10px;box-shadow:0 8px 20px rgba(21,20,20,.12);font-size:12px}.floating-note small{display:block;color:var(--muted);font-size:10px}.note-one{top:62px;left:0}.note-two{right:0;bottom:62px}.note-icon{color:var(--pink);font-size:20px}.art-caption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;font:10px 'DM Mono',monospace;text-transform:uppercase}.ticker{display:flex;align-items:center;justify-content:space-around;gap:20px;padding:18px 5vw;background:var(--pink);font:700 12px 'DM Mono',monospace;overflow:hidden}.ticker span{font-size:18px}.section-kicker{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px;color:var(--muted)}.split-heading{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end}.split-heading h2{margin-top:58px}.large-support{font-size:21px;max-width:440px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw;margin-top:82px}.feature-number{font:11px 'DM Mono',monospace;color:var(--muted)}.feature-grid h3{font:600 32px/.95 'Space Grotesk',sans-serif;letter-spacing:-.05em}.feature-grid em{font-style:normal;color:var(--pink)}.feature-grid p,.showcase-heading>p{color:var(--muted);max-width:300px}.showcase{background:var(--yellow)}.showcase-heading{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end}.showcase-heading h2{margin-bottom:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:82px}.step{position:relative}.step>span{font:11px 'DM Mono',monospace}.step h3{font:600 30px 'Space Grotesk',sans-serif;margin:22px 0 8px}.step p{color:#5e574b;max-width:240px}.step-line{height:1px;background:var(--ink);margin-top:35px}.tag-builder{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:#dcebdc}.builder-copy h2{margin-bottom:22px}.builder-copy>p{color:var(--muted);max-width:420px}.selector{display:flex;margin:34px 0 25px}.selector-button{border:1px solid var(--ink);background:transparent;padding:10px 15px;cursor:pointer}.selector-button.active{background:var(--ink);color:var(--paper)}.price-line{display:flex;align-items:baseline;gap:8px;margin-bottom:22px}.price-line strong{font:600 34px 'Space Grotesk',sans-serif}.price-line span{color:var(--muted);font-size:13px}.tag-preview{background:#202020;color:var(--paper);min-height:480px;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center}.preview-label,.preview-foot{width:100%;font:10px 'DM Mono',monospace}.preview-label{text-align:left}.preview-label span{color:var(--pink)}.large-sticker{width:250px;height:250px;background:var(--paper);color:var(--ink);padding:22px;text-align:center;margin:30px auto}.mini-brand.large{font-size:12px}.qr-large{width:135px;height:135px;margin:13px auto}.large-sticker h3{font:700 21px/.95 'DM Mono',monospace;margin:0}.large-sticker p{font:9px 'DM Mono',monospace}.preview-foot{display:flex;justify-content:space-between;color:#aaa}.profile{background:var(--ink);color:var(--paper)}.profile-card{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.profile-card h2{margin-top:28px}.profile-details{padding-top:18px}.profile-details>p{font-size:20px;color:#c4c0b7;max-width:460px}.detail-row{display:flex;justify-content:space-between;border-bottom:1px solid #474541;padding:16px 0;font:12px 'DM Mono',monospace}.detail-row strong{color:var(--green);font-weight:400}.light-link{display:inline-block;margin-top:28px;color:var(--paper)}.faq h2{margin-bottom:70px}.faq-list{max-width:850px;margin-left:auto}.faq details{border-top:1px solid var(--line);padding:22px 0}.faq summary{display:flex;justify-content:space-between;cursor:pointer;font-size:20px}.faq summary span{font-size:25px}.faq details p{color:var(--muted);max-width:600px}.final-cta{position:relative;min-height:480px;display:flex;align-items:center;justify-content:space-between;background:var(--pink)}.final-cta h2{margin:25px 0}.final-scribble{font:italic 20px 'Space Grotesk',sans-serif;transform:rotate(-8deg)}.site-footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:55px 8vw 35px;background:#242323;color:var(--paper)}.site-footer p{color:#aaa}.site-footer>div{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}.site-footer small{grid-column:1/-1;color:#888;font:10px 'DM Mono',monospace}
.about-hero{padding-top:96px;padding-bottom:116px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:8vw;align-items:end}.about-hero h1{max-width:820px;margin:28px 0 0;font:600 clamp(56px,8vw,116px)/.92 'Space Grotesk',sans-serif;letter-spacing:-.065em}.about-hero h1 em,.about-section h2 em{font-style:normal;color:var(--pink)}.about-hero-copy{max-width:390px;padding-bottom:10px;font-size:20px}.about-rule{border-top:1px solid var(--line)}.about-section{padding-top:104px;padding-bottom:104px}.about-section:nth-of-type(odd){background:#f0ede5}.about-grid{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:10vw;margin-top:54px}.about-section h2{margin:0;font:600 clamp(42px,5vw,74px)/.94 'Space Grotesk',sans-serif;letter-spacing:-.06em}.about-copy{max-width:700px}.about-copy p{margin:0 0 24px;font-size:18px;line-height:1.65}.about-copy p:last-child{margin-bottom:0}.about-copy em{font-style:italic}.about-point{padding-top:17px;border-top:1px solid var(--line)}.about-point strong{font:600 13px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}.about-values{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:60px;border:1px solid var(--line)}.about-value{background:var(--paper);padding:30px 28px 34px;min-height:190px}.about-value h3{margin:0 0 14px;font:600 24px 'Space Grotesk',sans-serif}.about-value p{margin:0;color:#595550;line-height:1.6}.about-quote{margin:0;padding:44px 0 0;border-top:1px solid var(--line);font:500 clamp(27px,3.3vw,47px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-.04em}.about-quote em{color:var(--pink);font-style:normal}
@media(max-width:800px){.site-header{height:70px;padding:0 6vw}.desktop-nav{display:none}.header-cta{font-size:12px}.section-pad{padding:76px 7vw}.hero{display:block;min-height:auto;padding-top:70px}.hero h1{font-size:clamp(52px,14vw,80px)}.hero-art{margin-top:65px;min-height:405px}.helmet{transform:translate(-50%,-50%) rotate(-8deg) scale(.78)}.ticker{gap:22px;justify-content:flex-start;padding-left:7vw}.ticker div:nth-of-type(2),.ticker div:nth-of-type(4),.ticker span:nth-of-type(3){display:none}.split-heading,.tag-builder,.profile-card,.showcase-heading{display:block}.split-heading h2{margin:42px 0 28px}.large-support{font-size:17px}.feature-grid{grid-template-columns:1fr;gap:37px;margin-top:55px}.showcase-heading>p{margin-bottom:42px}.showcase h2{margin-bottom:30px}.steps{grid-template-columns:1fr;gap:38px}.step-line{margin-top:18px}.tag-preview{margin-top:65px;min-height:420px}.large-sticker{width:205px;height:205px;padding:18px}.qr-large{width:104px;height:104px}.large-sticker h3{font-size:19px}.profile-card h2{margin:24px 0 55px}.faq h2{margin-bottom:48px}.faq summary{font-size:18px;gap:25px}.final-cta{display:block;min-height:510px}.final-scribble{position:absolute;bottom:65px;right:7vw}.site-footer{display:block}.site-footer p{margin:20px 0 28px}.site-footer small{display:block;margin-top:30px}.site-footer>div{flex-wrap:wrap}.about-hero{display:block;padding-top:74px;padding-bottom:76px}.about-hero h1{font-size:clamp(52px,14vw,80px)}.about-hero-copy{padding-top:34px;font-size:18px}.about-section{padding-top:74px;padding-bottom:74px}.about-grid{display:block;margin-top:42px}.about-section h2{margin-bottom:38px}.about-copy p{font-size:17px}.about-values{grid-template-columns:1fr;margin-top:46px}.about-value{min-height:auto}}

.testimonials{background:var(--ink);color:var(--paper);max-width:none}.testimonials .section-kicker{color:#aaa;border-color:#454441}.testimonials-heading{display:flex;align-items:end;justify-content:space-between;gap:40px}.testimonials h2{font:600 clamp(48px,6vw,84px)/.94 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:48px 0 25px}.testimonials h2 em{font-style:normal;color:var(--pink)}.testimonials-heading p{max-width:530px;color:#c4c0b7;font-size:18px}.testimonial-stars{color:var(--yellow);font-size:22px;letter-spacing:4px;padding-bottom:30px}.testimonial-window{overflow:hidden;margin-top:55px}.testimonial-track{display:flex;transition:transform .8s cubic-bezier(.22,.61,.36,1)}.testimonial-card{flex:0 0 100%;min-height:260px;padding:38px 5vw 35px 0;border-top:1px solid #454441;border-bottom:1px solid #454441;display:flex;flex-direction:column;justify-content:space-between}.testimonial-card p{max-width:900px;margin:0;font:500 clamp(24px,3vw,42px)/1.12 'Space Grotesk',sans-serif;letter-spacing:-.04em}.testimonial-card footer{margin-top:34px;color:#aaa;font:12px 'DM Mono',monospace;text-transform:uppercase}.testimonial-card footer span{color:var(--yellow);margin-left:12px;letter-spacing:2px}.trust-line{max-width:700px;margin:38px 0 0;color:var(--green);font-size:17px}.testimonials:has(.testimonial-track:hover) .testimonial-track{transition-duration:1.2s}
@media(prefers-reduced-motion:reduce){.testimonial-track{transition:none}.testimonial-track{transform:none!important}}
@media(max-width:800px){.testimonials-heading{display:block}.testimonials h2{margin-top:42px}.testimonial-stars{display:block;padding-bottom:0;margin-top:30px}.testimonial-card{padding:30px 0;min-height:390px}.testimonial-card p{font-size:25px}.trust-line{font-size:16px}}
/* Container bar */
.ticker {
  background-color: #ff5a60; /* Adjust this to match your exact coral/red shade */
  color: #111111;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  display: flex;
  align-items: center;
  padding: 14px 0;
  width: 100%;
}

/* Flex wrapper holding both identical copies */
.ticker-track {
  display: flex;
  width: max-content;
  /* Runs infinitely from left to right */
  animation: scroll-left-to-right 22s linear infinite;
}

/* Pause scroll when a user hovers over it */
.ticker:hover .ticker-track {
  animation-play-state: paused;
}

/* Content block styling */
.ticker-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  flex-shrink: 0;
}

.ticker-sep {
  opacity: 0.6;
  font-size: 0.9em;
}

/* Keyframes: Starts translated left (-50%) and glides to 0 to move left-to-right */
@keyframes scroll-left-to-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0%);
  }
}
.card-stars {
  color: #ff9800;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Gray out the unlit 5th star on 4-star reviews */
.card-stars .star-dim {
  color: #d1d5db;
}

/* Small, subtle rating number badge next to stars */
.card-stars .score {
  font-size: 0.75rem;
  font-weight: 700;
  color: #4b5563;
  margin-left: 0.35rem;
  letter-spacing: normal;
}
/* ===== TESTIMONIALS SECTION ===== */
.testimonials{
  background: var(--ink);
  color: var(--paper);
  max-width: none;
}
.testimonials .section-kicker{
  color: #aaa;
  border-color: #454441;
}
.testimonials-heading{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}
.testimonials h2{
  font: 600 clamp(48px,6vw,84px)/.94 'Space Grotesk',sans-serif;
  letter-spacing: -.065em;
  margin: 48px 0 25px;
}
.testimonials h2 em{
  font-style: normal;
  color: var(--pink);
}
.testimonials-heading p{
  max-width: 530px;
  color: #c4c0b7;
  font-size: 18px;
}
.testimonial-stars{
  color: var(--yellow);
  font-size: 22px;
  letter-spacing: 4px;
  padding-bottom: 30px;
}

/* ----- THE SLIDING WINDOW ----- */
.testimonial-window{
  overflow: hidden;
  margin-top: 55px;
  position: relative;
  /* soft fade on both edges for polish */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.testimonial-track{
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: testimonial-scroll 40s linear infinite;
}
.testimonial-window:hover .testimonial-track{
  animation-play-state: paused;
}

@keyframes testimonial-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----- CARD ----- */
.testimonial-card{
  flex: 0 0 auto;
  width: min(640px, 84vw);
  min-height: 260px;
  padding: 38px 2.5rem;
  border-top: 1px solid #454441;
  border-bottom: 1px solid #454441;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
}
.testimonial-card p{
  max-width: 900px;
  margin: 0;
  font: 500 clamp(22px,2.4vw,34px)/1.15 'Space Grotesk',sans-serif;
  letter-spacing: -.04em;
}
.testimonial-card footer{
  margin-top: 34px;
  color: #aaa;
  font: 12px 'DM Mono',monospace;
  text-transform: uppercase;
}
.testimonial-card footer span{
  color: var(--yellow);
  margin-left: 12px;
  letter-spacing: 2px;
}
.trust-line{
  max-width: 700px;
  margin: 38px 0 0;
  color: var(--green);
  font-size: 17px;
}

/* ----- STARS (themed) ----- */
.card-stars{
  color: var(--yellow);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.card-stars .star-dim{
  color: #6b6760;
}
.card-stars .score{
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green);
  margin-left: 0.35rem;
  letter-spacing: normal;
}

/* ----- REDUCED MOTION ----- */
@media (prefers-reduced-motion: reduce){
  .testimonial-track{ animation: none; }
}

/* ----- MOBILE ----- */
@media(max-width:800px){
  .testimonials-heading{ display: block; }
  .testimonials h2{ margin-top: 42px; }
  .testimonial-stars{ display: block; padding-bottom: 0; margin-top: 30px; }
  .testimonial-card{
    padding: 30px 1.5rem;
    min-height: 360px;
    width: min(560px, 88vw);
  }
  .testimonial-card p{ font-size: 22px; }
  .trust-line{ font-size: 16px; }
}
/* ============================================
   LOGO & BRAND
   ============================================ */
.brand img {
  display: block;
  width: 180px;
  height: 56px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 600px) {
  .brand img {
    width: 145px;
    height: 46px;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  color: #55514d;
  font-size: 14px;
}

.site-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer {
  display: block;
  background-color: #1a1a1a;
  color: #e0e0e0;
  padding: 36px 8vw;
  font-family: sans-serif;
  width: 100%;
}

.footer-container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-content: initial;
  align-items: center;
  gap: 24px 48px;
}

.site-footer > .footer-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  justify-content: initial;
  flex-wrap: nowrap;
  gap: 24px 48px;
}

.footer-logo-section {
  grid-column: 1;
  display: block;
}

.footer-logo {
  display: block;
  width: 260px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  max-width: 100%;
}

.footer-text-section {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.footer-text-section > p {
  margin: 0 0 18px;
  color: #aaa;
}

.footer-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 16px;
}

.footer-nav a {
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: #ff4d4d;
}

.footer-bottom {
  width: 100%;
  border-top: 1px solid #333;
  padding-top: 12px;
}

.footer-bottom p {
  margin: 0;
  color: #888;
  font-size: 12px;
}

@media (max-width: 768px) {
  .site-nav {
    gap: 16px;
  }

  .footer-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .site-footer > .footer-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .footer-logo-section,
  .footer-text-section {
    grid-column: 1;
    grid-row: auto;
  }

  .footer-logo {
    height: 84px;
  }

  .footer-text-section {
    align-items: flex-start;
    text-align: left;
  }

  .footer-nav {
    justify-content: flex-start;
  }
}

.hero-art {
  min-width: 0;
  min-height: 560px;
}

.hero-carousel {
  position: absolute;
  inset: 0 0 64px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

.hero-carousel::-webkit-scrollbar {
  display: none;
}

.hero-carousel-track {
  display: flex;
  height: 100%;
}

.hero-slide {
  position: relative;
  display: grid;
  flex: 0 0 100%;
  place-items: center;
  min-width: 0;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.product-display {
  position: relative;
  display: flex;
  width: min(300px, 72vw);
  height: 320px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 18px 30px;
  background: var(--paper);
  box-shadow: 14px 18px 0 rgba(21, 20, 20, 0.1);
  text-align: center;
}

.product-icon {
  display: block;
  margin-bottom: 4px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 104px;
  line-height: 1.15;
}

.product-display > strong {
  font: 700 15px "DM Mono", monospace;
  letter-spacing: 0.08em;
}

.product-subtitle {
  max-width: 190px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.product-qr {
  position: absolute;
  right: -25px;
  bottom: -16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 7px 5px;
  background: var(--paper);
  box-shadow: 0 8px 20px rgba(21, 20, 20, 0.16);
  transform: rotate(5deg);
}

.product-qr .qr-small {
  margin: 0;
}

.product-qr > span {
  margin-top: 3px;
  color: var(--ink);
  font: 700 7px "DM Mono", monospace;
}

.hero-slide-helmet .helmet {
  left: 50%;
  top: 50%;
}

.hero-carousel-controls {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 24px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.carousel-arrow,
.carousel-pause,
.carousel-dot {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(21, 20, 20, 0.25);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}

.carousel-arrow,
.carousel-pause {
  width: 30px;
  height: 30px;
  font-size: 19px;
  line-height: 1;
}

.carousel-pause {
  margin-left: 4px;
  font-size: 12px;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border: 0;
  background: rgba(21, 20, 20, 0.35);
}

.carousel-dot.is-active {
  width: 20px;
  border-radius: 8px;
  background: var(--pink);
}

.carousel-arrow:focus-visible,
.carousel-pause:focus-visible,
.carousel-dot:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.hero-art .art-caption {
  z-index: 2;
  bottom: 0;
}

@media (max-width: 800px) {
  .hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .hero-copy,
  .builder-copy,
  .profile-card > *,
  .split-heading > *,
  .showcase-heading > * {
    min-width: 0;
  }

  .split-heading,
  .showcase-heading,
  .tag-builder,
  .profile-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .split-heading h2 {
    margin-top: 38px;
  }

  .feature-grid,
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    margin-top: 48px;
  }

  .step-line {
    margin-top: 24px;
  }

  .tag-preview {
    min-width: 0;
  }

  .profile-details {
    padding-top: 0;
  }

  .faq h2 {
    margin-bottom: 42px;
  }

  .faq-list {
    margin-left: 0;
  }

  .final-cta {
    min-height: 400px;
    flex-wrap: wrap;
    gap: 24px;
  }

  .site-footer > .footer-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .footer-logo-section,
  .footer-text-section {
    grid-column: 1;
    grid-row: auto;
  }

  .footer-logo {
    width: min(220px, 70vw);
    height: 84px;
  }

  .footer-text-section {
    align-items: flex-start;
    text-align: left;
  }

  .footer-nav {
    justify-content: flex-start;
  }

  .hero-art {
    min-height: 500px;
  }

  .hero-carousel {
    bottom: 64px;
  }

  .product-display {
    width: min(270px, 68vw);
    height: 290px;
  }

  .product-icon {
    font-size: 88px;
  }

  .hero-art .sun-shape {
    width: min(340px, 78vw);
    height: min(340px, 78vw);
  }

  .hero-art .floating-note {
    font-size: 11px;
  }

  .hero-art .note-one {
    top: 30px;
  }

  .hero-art .note-two {
    bottom: 65px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel {
    scroll-behavior: auto;
  }
}

@media (max-width: 600px) {
  .section-pad {
    padding: 64px 6vw;
  }

  .hero {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .hero h1 {
    font-size: clamp(46px, 13vw, 68px);
  }

  .hero-intro {
    font-size: 16px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 18px;
  }

  .hero-actions .button {
    min-height: 48px;
  }

  .hero-art {
    min-height: 440px;
    margin-top: 42px;
  }

  .hero-carousel {
    bottom: 58px;
  }

  .product-display {
    width: min(250px, 66vw);
    height: 270px;
  }

  .product-icon {
    font-size: 80px;
  }

  .hero-carousel-controls {
    bottom: 19px;
    gap: 9px;
  }

  .carousel-arrow,
  .carousel-pause {
    width: 36px;
    height: 36px;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
  }

  .hero-art .floating-note {
    padding: 9px 10px;
  }

  .hero-art .note-one {
    top: 20px;
  }

  .hero-art .note-two {
    bottom: 58px;
  }

  .art-caption {
    font-size: 8px;
  }

  .selector {
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 20px;
  }

  .selector-button {
    min-height: 44px;
  }

  .tag-preview {
    min-height: 380px;
    padding: 20px 14px;
  }

  .preview-foot {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .detail-row {
    gap: 14px;
    font-size: 11px;
  }

  .faq summary {
    font-size: 16px;
  }

  .final-cta {
    min-height: 430px;
  }

  .site-footer {
    padding: 28px 6vw;
  }

  .footer-logo {
    width: min(220px, 70vw);
    height: 84px;
  }

  .footer-nav {
    gap: 12px 18px;
  }
}

@media (max-width: 380px) {
  .section-pad {
    padding-right: 5vw;
    padding-left: 5vw;
  }

  .hero-art {
    min-height: 400px;
  }

  .product-display {
    width: min(220px, 64vw);
    height: 245px;
  }

  .product-icon {
    font-size: 70px;
  }

  .hero-art .floating-note {
    font-size: 10px;
  }

  .hero-art .note-two {
    right: -4px;
  }

  .carousel-dots {
    gap: 5px;
  }

  .hero-carousel-controls {
    gap: 7px;
  }
}