/* ==========================================================================
   Hackgenix — site components
   ========================================================================== */

/* -------------------------------------------------------------- header -- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 1.15rem;
  transition: background-color .4s var(--ease), padding .4s var(--ease),
              box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}

.header__logo img { height: 34px; width: auto; }
.header__logo .logo--light { display: block; }
.header__logo .logo--dark  { display: none; }

/* Solid state — once scrolled, or on any page with a light hero. */
.header.is-solid,
.header.is-light {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}
.header.is-solid { padding-block: .75rem; }
.header.is-solid .logo--light,
.header.is-light .logo--light { display: none; }
.header.is-solid .logo--dark,
.header.is-light .logo--dark  { display: block; }
.header.is-solid .nav__link,
.header.is-light .nav__link { color: var(--graphite); }
.header.is-solid .nav__link:hover,
.header.is-light .nav__link:hover { color: var(--ink); }
.header.is-solid .nav__toggle span,
.header.is-light .nav__toggle span { background: var(--ink); }

/* ----------------------------------------------------------------- nav -- */

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav__list { display: flex; align-items: center; gap: 2.1rem; }

.nav__link {
  position: relative;
  font-family: var(--display);
  font-size: .9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  transition: color .25s var(--ease);
  padding-block: .35rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 0; cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}
.nav__toggle span {
  display: block; height: 2px; width: 22px;
  background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease), width .35s var(--ease);
}
.nav__toggle span:nth-child(2) { width: 15px; }

@media (max-width: 1023px) {
  /* The header sets backdrop-filter once scrolled, and that creates a
     containing block for position:fixed descendants — so the drawer anchored
     itself to the header box instead of the viewport and got clipped, with
     the close button buried underneath. Suppressing the filter while the menu
     is open puts the drawer back on the viewport. */
  .header { z-index: 200; }

  .nav__toggle { display: flex; position: relative; z-index: 210; }

  /* The drawer is a child of the header, so within the header's stacking
     context it paints over the logo unless the logo is lifted too. */
  .header__logo { position: relative; z-index: 210; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 190;
    width: 100%;
    background: var(--void);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    padding: 6.5rem var(--gutter) 2.5rem;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: none; }

  .nav__list { flex-direction: column; align-items: flex-start; gap: .25rem; width: 100%; }
  .nav__link { font-size: 1.5rem; font-weight: 600; color: #fff; padding-block: .55rem; }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 2rem; }
  .nav__cta .btn { width: 100%; justify-content: center; }

  /* While the menu is open the bar itself goes transparent so the dark drawer
     runs to the top of the screen, and the logo and burger stay legible. */
  body.nav-open .header,
  body.nav-open .header.is-solid,
  body.nav-open .header.is-light {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  body.nav-open .logo--dark  { display: none; }
  body.nav-open .logo--light { display: block; }
  body.nav-open .nav__toggle span { background: #fff; }

  .nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 22px; }
  .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 22px; }

  /* Paired with the JS scroll lock: fixing the body is what actually stops
     iOS scrolling the page behind the drawer. */
  body.nav-open { position: fixed; width: 100%; overflow: hidden; }
}

.nav__backdrop {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(1, 0, 10, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.nav__backdrop.is-open { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  background: var(--void);
  color: var(--dark-text);
  padding-block: clamp(9rem, 17vw, 13rem) clamp(4.5rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* Two soft brand-coloured light sources. This is the only decoration in
   the hero — the mark itself does the rest of the work. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  right: -6vw; top: 4vh;
  background: radial-gradient(circle, rgba(251, 17, 85, .5), transparent 68%);
}
.hero::after {
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  right: 16vw; bottom: -8vh;
  background: radial-gradient(circle, rgba(255, 136, 4, .32), transparent 70%);
}

.hero__grid { display: grid; gap: clamp(3rem, 6vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.hero h1 { color: #fff; margin-bottom: 1.5rem; }

.hero__lede {
  font-size: clamp(1.0625rem, 1.65vw, 1.3125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
  max-width: 34rem;
  margin-bottom: 2.5rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__mark {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
}
.hero__mark img {
  width: clamp(210px, 30vw, 360px);
  filter: drop-shadow(0 24px 70px rgba(251, 17, 85, .42));
}

/* Ring that traces the mark once on load. */
.hero__ring {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1);
}
.hero__ring::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .06);
}

/* One orchestrated page-load sequence. */
.hero__anim { opacity: 0; transform: translateY(18px); animation: heroUp .9s var(--ease) forwards; }
.hero h1.hero__anim        { animation-delay: .05s; }
.hero__lede.hero__anim     { animation-delay: .18s; }
.hero__actions.hero__anim  { animation-delay: .3s; }
.hero__mark.hero__anim     { animation: heroMark 1.1s var(--ease) .12s forwards; }

@keyframes heroUp   { to { opacity: 1; transform: none; } }
@keyframes heroMark { from { opacity: 0; transform: scale(.86) rotate(-8deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__anim { opacity: 1; transform: none; animation: none; }
}

/* --------------------------------------------------------------- stats -- */

.stats {
  border-top: 1px solid var(--dark-line);
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 2rem 1rem;
  /* 88px keeps all three on one row at 360px wide rather than
     orphaning the third onto its own line. */
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}
.stat__value {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  color: #fff;
  margin-bottom: .4rem;
}
.stat__label { font-size: .9375rem; color: rgba(255, 255, 255, .5); }

/* ------------------------------------------------------------- clients -- */

.marquee {
  overflow: hidden;
  padding-block: 2.25rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: #A5A9B6;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.marquee__item:hover { color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ services -- */

/* Editorial list, not a card grid. On desktop the right panel crossfades
   to whichever row is hovered or focused. */
.services { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 1000px) {
  .services { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.svc__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-top: 1px solid var(--line);
  position: relative;
  transition: padding-left .4s var(--ease);
}
.svc__row:last-child { border-bottom: 1px solid var(--line); }
.svc__row::before {
  content: "";
  position: absolute; left: 0; top: -1px;
  height: 1px; width: 100%;
  background: var(--gradient);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.svc__row.is-active::before { transform: scaleX(1); }
@media (min-width: 1000px) {
  .svc__row.is-active { padding-left: 1.25rem; }
}

.svc__name {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: .3rem;
}
.svc__desc { font-size: .9875rem; margin: 0; max-width: 42ch; }

.svc__go {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink);
  flex-shrink: 0;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease);
}
.svc__row.is-active .svc__go {
  background: var(--ink); border-color: var(--ink);
  color: #fff; transform: rotate(-45deg);
}

/* Mobile thumbnail inside the row; hidden on desktop where the panel takes over. */
.svc__thumb {
  grid-column: 1 / -1;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-top: .35rem;
}
.svc__thumb img { width: 100%; height: 100%; object-fit: cover; }

.svc__panel { display: none; }
@media (min-width: 1000px) {
  .svc__thumb { display: none; }
  .svc__panel {
    display: block;
    position: sticky;
    top: 7rem;
    border-radius: var(--radius-l);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--cloud);
  }
  .svc__panel img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .6s var(--ease), transform .9s var(--ease);
  }
  .svc__panel img.is-active { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- case studies -- */

.cases { display: grid; gap: clamp(1.75rem, 3vw, 2.25rem); }
@media (min-width: 780px) { .cases { grid-template-columns: repeat(3, 1fr); } }

.case { position: relative; display: flex; flex-direction: column; }
.case__media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cloud);
  margin-bottom: 1.35rem;
}
.case__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.case:hover .case__media img { transform: scale(1.05); }

.case__industry {
  font-size: .8125rem;
  color: var(--slate);
  margin-bottom: .5rem;
}
.case__title {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: .5rem;
}
.case__summary { font-size: .9375rem; margin: 0; }
.case__link::after { content: ""; position: absolute; inset: 0; }

/* Placeholder tile used until real project imagery lands. */
.tile-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.tile-fallback::before {
  content: "";
  position: absolute;
  width: 150%; height: 150%;
  background: var(--gradient);
  opacity: .8;
  clip-path: polygon(0 62%, 38% 26%, 62% 52%, 100% 12%, 100% 100%, 0 100%);
}
.tile-fallback span {
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.03em;
  color: #fff;
  mix-blend-mode: normal;
}

/* ------------------------------------------------------------- process -- */

.process { display: grid; gap: clamp(2rem, 4vw, 3rem); counter-reset: step; }
@media (min-width: 800px) { .process { grid-template-columns: repeat(3, 1fr); } }

.step { position: relative; padding-top: 2.25rem; border-top: 2px solid var(--ink); }
.step__num {
  position: absolute; top: -.15rem; right: 0;
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--slate);
}
.step h3 { margin-bottom: .55rem; }
.step p { font-size: .9875rem; margin: 0; }

/* ---------------------------------------------------------- testimonial -- */

.quote { max-width: 54rem; }
.quote__text {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.8vw, 2.05rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.028em;
  color: #fff;
  margin-bottom: 1.75rem;
  text-wrap: pretty;
}
.quote__author { font-size: .9375rem; color: rgba(255,255,255,.6); }
.quote__author strong { color: #fff; font-weight: 600; }

.quote__nav { display: flex; gap: .6rem; margin-top: 2.5rem; }
.quote__dot {
  width: 30px; height: 3px;
  border-radius: 2px;
  border: 0; padding: 0;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: background-color .35s var(--ease);
}
.quote__dot.is-active { background: var(--pulse); }

.quote__slide { display: none; }
.quote__slide.is-active { display: block; animation: fadeIn .5s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- cta -- */

.cta {
  position: relative;
  border-radius: var(--radius-l);
  background: var(--ink);
  padding: clamp(2.75rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  right: -120px; top: -180px;
  border-radius: 50%;
  background: var(--gradient);
  opacity: .3;
  filter: blur(80px);
  z-index: -1;
}
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { color: rgba(255,255,255,.66); max-width: 46ch; margin-bottom: 2rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* -------------------------------------------------------------- footer -- */

.footer {
  background: var(--void);
  color: var(--dark-text);
  padding-block: clamp(3rem, 5.5vw, 4.5rem) 1.75rem;
}

/* Lead strip — the last chance to convert, so it comes before the links. */
.footer__lead {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding-bottom: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--dark-line);
}
@media (min-width: 860px) {
  .footer__lead { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}
.footer__leadKicker {
  font-size: .8125rem;
  color: var(--pulse);
  font-weight: 600;
  margin: 0 0 .4rem;
}
.footer__leadTitle {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.25;
  color: #fff;
  margin: 0;
  max-width: 26ch;
}
.footer__leadActions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Five columns instead of four — the contact block used to hang off the
   Company column and leave a tall void beside the shorter lists. */
.footer__grid { display: grid; gap: 2.25rem 1.5rem; }
@media (min-width: 620px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1140px) {
  .footer__grid { grid-template-columns: 1.6fr .9fr .9fr .9fr .9fr; gap: 2rem; }
}
@media (min-width: 620px) and (max-width: 1139px) {
  .footer__brand { grid-column: 1 / -1; }
}

.footer__logo img { height: 30px; width: auto; margin-bottom: 1.1rem; }
.footer__blurb {
  font-size: .9375rem;
  max-width: 32ch;
  color: rgba(255,255,255,.52);
  margin-bottom: 1.5rem;
}

.footer__title {
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 1rem;
}
.footer__title--gap { margin-top: 1.75rem; }

.footer__list li { margin-bottom: .6rem; }
.footer__list a {
  font-size: .9375rem;
  color: rgba(255,255,255,.52);
  transition: color .25s var(--ease);
}
.footer__list a:hover { color: #fff; }
.footer__list--contact a { color: rgba(255,255,255,.72); }

.footer__address--unused {
  font-style: normal;
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(255,255,255,.45);
}
.footer__address span { color: rgba(255,255,255,.35); }

.footer__social { display: flex; gap: .55rem; }
.footer__social a {
  width: 38px; height: 38px;
  border: 1px solid var(--dark-line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255,255,255,.7);
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.footer__social a:hover { color: #fff; border-color: transparent; background: var(--gradient); }

.footer__base {
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--dark-line);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: .875rem;
  color: rgba(255,255,255,.4);
}
.footer__base p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a { color: rgba(255,255,255,.4); transition: color .25s var(--ease); }
.footer__legal a:hover { color: #fff; }

/* ------------------------------------------------------- simple pages -- */

.simple { padding-block: clamp(9rem, 16vw, 12rem) var(--section); text-align: center; }
.simple h1 { margin-bottom: 1rem; }
.simple p { margin-inline: auto; }
.simple .btn { margin-top: 2rem; }

/* ========================================================================== */
/* Products shelf                                                             */
/*                                                                            */
/* On a light background the dashboards had nothing to push against and the   */
/* section read flat. Dark ground makes the light UIs the brightest thing on  */
/* screen, and each product carries its own accent so five platforms do not   */
/* look like five copies of one card.                                         */
/* ========================================================================== */

.pshelf {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
}
.pshelf > .wrap { position: relative; z-index: 1; }
.pshelf .head p { color: rgba(255, 255, 255, .58); }

/* ---------------------------------------------------------- shared bits -- */

.pmeta {
  display: flex; align-items: center; gap: .55rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .5);
  margin: 0 0 .85rem;
}
.pdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.plink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display);
  font-size: .9375rem; font-weight: 600;
  color: #fff;
  margin-top: 1.5rem;
}
.plink svg { transition: transform .35s var(--ease); }

.pchips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.25rem 0 0; }
.pchips li {
  font-size: .75rem;
  padding: .3rem .75rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .62);
}

/* Product window — browser chrome so a flat screengrab reads as live UI. */
.pwin {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0E1017;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
  padding-top: 22px;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.pwin__bar {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 22px;
  background: #171A23;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pwin__bar::before {
  content: "";
  position: absolute; top: 8px; left: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF5F56;
  box-shadow: 11px 0 0 #FFBD2E, 22px 0 0 #27C93F;
}
.pwin img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
}
.pwin--bare {
  padding-top: 0;
  background: transparent;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .45);
}
.pwin--bare .pwin__bar { display: none; }

.pwin--lg { border-radius: 14px; padding-top: 26px; }
.pwin--lg .pwin__bar { height: 26px; }
.pwin--lg .pwin__bar::before { top: 10px; left: 13px; width: 7px; height: 7px; box-shadow: 13px 0 0 #FFBD2E, 26px 0 0 #27C93F; }

/* ------------------------------------------------------ featured product -- */

.pfeat {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .09);
  overflow: hidden;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  transition: border-color .5s var(--ease);
}
@media (min-width: 940px) {
  .pfeat { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}
.pfeat:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pfeat:hover .pwin { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(0,0,0,.6); }
.pfeat:hover .plink svg { transform: translateX(4px); }

.pfeat__glow {
  position: absolute;
  width: 460px; height: 460px;
  top: -180px; left: -140px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .3;
  filter: blur(110px);
  z-index: -1;
  transition: opacity .6s var(--ease);
}
.pfeat:hover .pfeat__glow { opacity: .45; }

.pfeat__name {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  color: #fff;
  margin-bottom: .4rem;
}
.pfeat__tag {
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  font-weight: 500;
  color: var(--accent);
  margin-bottom: .9rem;
}
.pfeat__desc { font-size: 1rem; color: rgba(255,255,255,.6); margin: 0; max-width: 44ch; }

/* ---------------------------------------------------------- the other four -- */

.pgrid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 640px) {
  .pgrid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}
/* auto-fit, so however many products remain they fill the row evenly —
   a fixed 4-column track left a hole when the count dropped to three. */
@media (min-width: 1160px) {
  .pgrid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
}

.pcard2 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .09);
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.pcard2:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pcard2:hover .pwin { transform: translateY(-4px); }

.pcard2__glow {
  position: absolute;
  width: 240px; height: 240px;
  top: -110px; right: -90px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .26;
  filter: blur(70px);
  z-index: -1;
  transition: opacity .6s var(--ease);
}
.pcard2:hover .pcard2__glow { opacity: .42; }

.pcard2__name { font-size: 1.3rem; color: #fff; margin-bottom: .3rem; }
.pcard2__tag {
  font-size: .9375rem; font-weight: 500;
  color: var(--accent);
  margin-bottom: .6rem;
}
.pcard2__desc { font-size: .9375rem; color: rgba(255,255,255,.55); margin: 0 0 1.5rem; }
.pcard2 .pwin { margin-top: auto; }

.pshelf__foot { margin-top: clamp(2.5rem, 4.5vw, 3.75rem); }

/* Fallback for browsers without color-mix. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pfeat:hover, .pcard2:hover { border-color: rgba(255,255,255,.32); }
  .pdot { box-shadow: none; }
}

/* ==========================================================================
   Preloader, WhatsApp, toasts, scroll behaviour
   ========================================================================== */

/* --- preloader ---------------------------------------------------------- */
/* Sized in clamp() so the mark is proportionate on a phone and a 27" screen
   alike, and centred with grid rather than transforms so it cannot drift. */
.preload{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--void);
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.preload__mark{
  width:clamp(64px,7vw,92px);height:auto;
  animation:preloadSpin 1.1s cubic-bezier(.6,.05,.3,.95) infinite;
}
@keyframes preloadSpin{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(.86)}
  100%{transform:rotate(360deg) scale(1)}
}
body.is-ready .preload{opacity:0;visibility:hidden;pointer-events:none}
/* Never let the preloader trap the page if JS fails to run. */
.no-js .preload{display:none}

/* --- WhatsApp ----------------------------------------------------------- */
.wa{
  position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);
  z-index:120;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:#25D366;
  box-shadow:0 10px 30px rgba(37,211,102,.35);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(37,211,102,.45)}
.wa svg{position:relative;z-index:1}
.wa__pulse{
  position:absolute;inset:0;border-radius:50%;background:#25D366;
  animation:waPulse 2.4s ease-out infinite;z-index:0;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.7);opacity:0}
  100%{opacity:0}
}
@media (max-width:600px){ .wa{width:52px;height:52px} }

/* --- toast -------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:clamp(1rem,4vw,2rem);z-index:200;
  transform:translate(-50%,140%);
  display:flex;align-items:flex-start;gap:.7rem;
  max-width:min(420px,92vw);padding:.9rem 1.1rem;
  border-radius:12px;background:var(--ink);color:#fff;
  font-size:.9375rem;line-height:1.5;
  box-shadow:0 18px 45px rgba(0,0,0,.3);
  transition:transform .45s var(--ease),opacity .45s var(--ease);
  opacity:0;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}
.toast--ok  .toast__icon{background:#27C978}
.toast--bad .toast__icon{background:var(--pulse)}
.toast__icon{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;margin-top:.15rem;
  display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#fff;
}
.toast__close{background:none;border:0;color:rgba(255,255,255,.6);font-size:1.1rem;
  line-height:1;cursor:pointer;padding:0 0 0 .5rem;margin-left:auto}

/* --- scrolling ---------------------------------------------------------- */
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{overflow-x:hidden}

/* Promote only the elements that actually animate. Applying will-change
   broadly costs more than it saves — these are the ones that move. */
.js-reveal,.pwin,.wcard__media img,.srow__media img{will-change:transform,opacity}
.js-reveal.is-in{will-change:auto}

/* Everything honours the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .preload__mark{animation:none}
  .wa__pulse{animation:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}