/* Reset + scroll-behavior now in global.css */

  /* ── BREADCRUMB ── */
  .breadcrumb {
    max-width: min(1220px, calc(100vw - 48px));
    margin: 0 auto;
    padding: 16px 0 0;
  }
  .breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .breadcrumb li + li::before {
    content: '/';
    margin-right: 6px;
    color: var(--gray);
  }
  .breadcrumb a {
    color: var(--gray);
    text-decoration: none;
    transition: color 0.2s;
  }
  .breadcrumb a:hover { color: var(--pink-text); }
  .breadcrumb [aria-current="page"] {
    color: var(--white);
  }

  body {
    background: var(--black);
    color: var(--white);
    font-family: var(--sans);
    font-weight: 300;
    overflow-x: hidden;
    cursor: default;
  }

  /* NOISE OVERLAY — static layer, no will-change to save GPU memory */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1000;
    opacity: 0.4;
  }
  @media (max-width: 768px) {
    body::before { display: none; }
  }

  /* NAV: uses global.css */

  /* ── HERO ── */
  .hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 120px 64px 80px;
    position: relative;
    overflow: hidden;
    gap: 40px;
  }

  /* grid lines background */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(219,38,108,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(219,38,108,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 80%);
  }

  /* ambient glow shifted to the right for product side */
  .hero::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translate(0, -50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(219,38,108,0.12) 0%, rgba(219,38,108,0.04) 35%, transparent 70%);
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 560px;
    text-align: left;
  }

  .hero-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--pink-text);
    margin-bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .hero-tag::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--pink);
  }

  .hero-title {
    font-family: var(--serif);
    font-size: var(--type-hero-h1);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin-bottom: 12px;
  }
  .hero-title em {
    font-style: italic;
    color: var(--pink-text);
  }
  .hero-subtitle {
    font-family: var(--serif);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 300;
    color: var(--gray);
    font-style: italic;
    margin-bottom: 40px;
    letter-spacing: .01em;
    line-height: 1.4;
  }

  .hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .hero-actions .btn-whatsapp {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }
  .hero-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-light);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
  }
  .hero-links a:hover {
    border-color: var(--pink-text);
    color: var(--white);
    transform: translateY(-1px);
  }

  .btn-primary,
  .btn-whatsapp,
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
  }
  .btn-primary {
    background: var(--pink, #db266c);
    color: #fff;
    border: none;
  }
  .btn-primary:hover { background: var(--pink-hover, #c01f5c); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(219,38,108,0.3); }
  .btn-primary:visited { color: #fff; }

  .btn-whatsapp {
    background: var(--green, #107f38);
    color: #fff;
    border: none;
  }
  .btn-whatsapp:hover { background: var(--green-hover, #13993f); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(37,211,102,0.3); }
  .btn-whatsapp:visited { color: #fff; }

  .btn-ghost {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--border2);
  }
  .btn-ghost:hover { border-color: var(--pink-text); color: var(--pink-text); }

  /* Hero social proof line */
  .hero-proof {
    margin-top: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--gray);
  }
  .hero-proof span { color: var(--white); font-weight: 500; }

  /* ── HERO PRODUCT SHOWCASE ── */
  .hero-showcase {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: showcaseReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  }

  .hero-showcase-inner {
    position: relative;
    width: 100%;
    max-width: 520px;
    animation: showcaseFloat 8s ease-in-out infinite;
  }

  .hero-showcase-inner::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60px;
    background: radial-gradient(ellipse, rgba(219,38,108,0.14) 0%, rgba(219,38,108,0.04) 50%, transparent 80%);
    border-radius: 50%;
  }

  .hero-showcase-inner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    border-radius: 50%;
    border: 1px solid rgba(219,38,108,0.08);
    pointer-events: none;
  }

  .hero-showcase-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(219,38,108,0.12) 0%, rgba(219,38,108,0.03) 45%, transparent 70%);
    z-index: -1;
  }

  .hero-showcase img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5)) drop-shadow(0 4px 20px rgba(219,38,108,0.15));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Floating spec labels around the product */
  .hero-showcase-label {
    position: absolute;
    z-index: 3;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray);
    padding: 6px 12px;
    background: rgba(14,14,14,0.92);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    animation: labelFadeIn 0.7s ease forwards;
  }
  .hero-showcase-label span {
    color: var(--pink-text);
    font-weight: 500;
  }
  .hero-showcase-label:nth-child(1) {
    top: 12%;
    right: -8%;
    animation-delay: 0.1s;
  }
  .hero-showcase-label:nth-child(2) {
    bottom: 28%;
    left: -6%;
    animation-delay: 0.2s;
  }
  .hero-showcase-label:nth-child(3) {
    bottom: 10%;
    right: 5%;
    animation-delay: 0.3s;
  }

  /* Connector lines from labels to product */
  .hero-showcase-label::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(219,38,108,0.3));
    top: 50%;
  }
  .hero-showcase-label:nth-child(1)::before {
    left: -28px;
    background: linear-gradient(90deg, rgba(219,38,108,0.3), transparent);
  }
  .hero-showcase-label:nth-child(2)::before {
    right: -28px;
    background: linear-gradient(90deg, transparent, rgba(219,38,108,0.3));
  }
  .hero-showcase-label:nth-child(3)::before {
    left: -28px;
    background: linear-gradient(90deg, rgba(219,38,108,0.3), transparent);
  }

  .bridge-proof {
    padding: 36px 64px 0;
  }
  .bridge-proof-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px;
    background: linear-gradient(180deg, rgba(219,38,108,0.08) 0%, rgba(14,14,14,0.94) 22%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 80px rgba(0,0,0,0.22);
  }
  .bridge-proof-intro {
    max-width: 760px;
    margin-top: 16px;
    color: var(--gray-light);
    font-size: 16px;
    line-height: 1.8;
  }
  .bridge-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 24px;
  }
  .bridge-proof-card {
    padding: 18px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
  }
  .bridge-proof-label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pink-text);
  }
  .bridge-proof-card strong {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    color: var(--white);
  }
  .bridge-proof-card p {
    margin-top: 10px;
    color: var(--gray);
    font-size: 14px;
    line-height: 1.7;
  }
  .bridge-proof-note {
    margin-top: 18px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--pink);
    border-radius: 16px;
    color: var(--gray-light);
    font-size: 14px;
    line-height: 1.8;
  }
  .bridge-proof-note strong {
    color: var(--white);
  }
  .bridge-proof-note a {
    color: var(--pink-text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .bridge-proof-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }
  .bridge-proof-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
  }
  .bridge-proof-links a:hover {
    border-color: var(--pink-text);
    color: var(--pink-text);
    background: rgba(219,38,108,0.08);
    transform: translateY(-1px);
  }

  /* ── PRODUCT SHOWCASE CARD ── */
  .product-showcase-card {
    padding: 24px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    text-decoration: none;
    display: block;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .product-showcase-card:hover {
    border-color: rgba(219,38,108,0.3);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  }
  .product-showcase-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .product-showcase-badge--flagship {
    background: rgba(219,38,108,0.15);
    color: var(--pink-text);
    border: 1px solid rgba(219,38,108,0.25);
  }
  .product-showcase-badge--new {
    background: rgba(37,211,102,0.12);
    color: #25d366;
    border: 1px solid rgba(37,211,102,0.25);
  }
  .product-showcase-badge--blend {
    background: rgba(130,100,255,0.12);
    color: #a78bfa;
    border: 1px solid rgba(130,100,255,0.25);
  }
  .product-showcase-card strong {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    color: var(--white);
    margin-bottom: 8px;
  }
  .product-showcase-card p {
    color: var(--gray);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
  }
  .product-showcase-cta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pink-text);
  }

  @keyframes showcaseReveal {
    from {
      opacity: 0;
      transform: translateY(40px) scale(0.94);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes showcaseFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-14px); }
  }

  @keyframes labelFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Reduced motion: opacity-gated entrances must render instantly;
     the ambient showcaseFloat loop stops too */
  @media (prefers-reduced-motion: reduce) {
    .hero-showcase,
    .hero-showcase-inner,
    .hero-showcase-label {
      animation: none;
      opacity: 1;
    }
  }

  @media (max-width: 900px) {
    .bridge-proof {
      padding: 24px 20px 0;
    }
    .bridge-proof-inner {
      padding: 24px 18px;
      border-radius: var(--radius-lg);
    }
    .bridge-proof-intro {
      font-size: 15px;
    }
    .hero-links,
    .bridge-proof-links {
      gap: 10px;
    }
    .hero-links a,
    .bridge-proof-links a {
      width: 100%;
      justify-content: flex-start;
    }
  }

  /* Mobile: hide the .hero-tag pink dash. The 32px ::before line is a
     desktop-only decoration; on narrow viewports the centered eyebrow
     text wraps to two lines and the dash sits asymmetrically to its
     left, breaking the visual alignment. Placed at the end of the
     file so it wins the cascade against the base .hero-tag::before
     rule above. */
  @media (max-width: 768px) {
    .hero-tag::before { display: none; }
  }