/* ==========================================================================
   Ocean Ventures — homepage
   Loaded only by the homepage, which carries a section system no other page
   uses. Hand-written, no build step, same tokens as ocean.css.

   Colour rule throughout: light is the base, dark redefines only what changes,
   and any surface that keeps a deep-ocean ground in BOTH themes takes its ink
   from the --hero-* tokens so nothing goes low-contrast at night.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */
.hp-section { padding: clamp(52px, 7vw, 96px) 0; }
.hp-section + .hp-section { padding-top: clamp(40px, 5.5vw, 78px); }

.hp-head { margin-bottom: clamp(26px, 3.6vw, 46px); }
.hp-head h2 {
  margin: 12px 0 0;
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.12; letter-spacing: -.025em; font-weight: 800; color: var(--ink);
  text-wrap: balance;
}
.hp-sub {
  margin: 14px 0 0; max-width: 62ch;
  font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.65; color: var(--muted);
}
.hp-sub-wide { max-width: 80ch; }
.hp-head-center { text-align: center; }
.hp-head-center .hp-sub { margin-inline: auto; }

.hp-head-row { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .hp-head-row { grid-template-columns: 1fr auto; align-items: end; }
  .hp-head-action { white-space: nowrap; }
}
@media (max-width: 899px) { .hp-head-action { display: none; } }

.hp-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: #fff;
}
/* The same pill on an ordinary page ground. */
.hp-eyebrow-ink {
  background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 24%, transparent);
  color: var(--info);
}

.hp-center { margin-top: clamp(26px, 3.5vw, 40px); text-align: center; }
.hp-center-sm { margin-top: 22px; }

/* A CTA that sits on a dark ground and must read as the primary action. It
   carries the same orange fill as .btn-primary so "press this" looks the same
   everywhere on the page. */
.btn-on-white {
  --btn-line: transparent; --btn-ink: var(--action-ink);
  background: linear-gradient(135deg, var(--action-from), var(--action-to));
  box-shadow: var(--shadow-action);
}
.btn-on-white:hover {
  background: linear-gradient(135deg, var(--action-from-hover), var(--action-to-hover));
}

.btn-hero-ghost {
  --btn-bg: transparent; --btn-ink: #fff; --btn-line: rgba(255, 255, 255, .38);
}
.btn-hero-ghost:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-line: rgba(255, 255, 255, .6); }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(40px, 6vw, 84px) 0 clamp(70px, 8vw, 116px);
  background:
    radial-gradient(1200px 680px at 82% -12%, color-mix(in srgb, var(--cyan-500) 30%, transparent), transparent 62%),
    radial-gradient(900px 560px at 8% 8%, color-mix(in srgb, var(--ocean-600) 46%, transparent), transparent 66%),
    linear-gradient(168deg, var(--hero-base) 0%, var(--hero-base-2) 100%);
  color: var(--hero-ink);
}
.hp-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hp-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
}
.hp-orb-a {
  width: 420px; height: 420px; top: -120px; right: -60px;
  background: radial-gradient(circle, var(--cyan-500), transparent 68%);
  animation: hp-orb-a 22s ease-in-out infinite;
}
.hp-orb-b {
  width: 340px; height: 340px; bottom: -110px; left: -70px;
  background: radial-gradient(circle, var(--ocean-500), transparent 70%);
  animation: hp-orb-b 28s ease-in-out infinite;
}
@keyframes hp-orb-a { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-38px, 34px, 0); } }
@keyframes hp-orb-b { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(30px, -28px, 0); } }

/* A faint engineering grid, so the ground has texture without an image. */
.hp-grid {
  position: absolute; inset: 0; opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(72% 60% at 50% 32%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 60% at 50% 32%, #000 0%, transparent 78%);
}

.hp-hero-inner { display: grid; gap: clamp(34px, 5vw, 56px); align-items: center; }
@media (min-width: 1000px) { .hp-hero-inner { grid-template-columns: 1.06fr .94fr; } }

.hp-h1 {
  margin: 18px 0 0;
  font-size: clamp(36px, 6.2vw, 68px); line-height: 1.04;
  letter-spacing: -.035em; font-weight: 800; color: #fff;
}
.hp-accent {
  background: linear-gradient(96deg, var(--cyan-300), #fff 58%, var(--cyan-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hp-lede {
  margin: 18px 0 0; max-width: 56ch;
  font-size: clamp(15.5px, 1.35vw, 18.5px); line-height: 1.62; color: var(--hero-ink-2);
}

.hp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hp-hero-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hp-contact-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07);
  font-size: 14px; font-weight: 650; color: #fff; text-decoration: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.hp-contact-pill:hover {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4);
  text-decoration: none; transform: translateY(-1px);
}
.hp-contact-wa { border-color: rgba(37, 211, 102, .55); background: rgba(37, 211, 102, .16); }
.hp-contact-wa:hover { background: rgba(37, 211, 102, .28); border-color: rgba(37, 211, 102, .8); }

.hp-hero-points {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.hp-hero-points li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--hero-ink-2);
}
.hp-hero-points svg { color: var(--cyan-300); flex: none; }

/* The stage ----------------------------------------------------------------
   Sized in percentages of its own box, with the photographs held to an aspect
   ratio, so the whole composition scales with the column instead of being a
   set of fixed pixel boxes that collide once the viewport narrows. The
   positions below are chosen so no card or chip overlaps another's content at
   any width the stage is shown at. */
.hp-stage { position: relative; display: none; }
@media (min-width: 1000px) { .hp-stage { display: block; } }

.hp-stage-inner {
  position: relative; width: 100%; aspect-ratio: 575 / 540; min-height: 380px;
  perspective: 1400px; transform-style: preserve-3d;
}
.hp-card {
  position: absolute; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 12, 40, .45);
}
.hp-card-shot { display: block; background: #fff; }
.hp-card-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hp-card-main {
  top: 5%; left: 12%; width: 51%;
  transform: rotateY(-13deg) rotateX(5deg) rotateZ(-1.5deg);
}
.hp-card-main .hp-card-shot { aspect-ratio: 10 / 9; }
.hp-card-foot {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; background: rgba(0, 18, 51, .72);
}
.hp-card-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cyan-300);
}
.hp-card-value { font-size: 14.5px; font-weight: 700; color: #fff; }

.hp-card-b {
  top: -2%; right: 1%; width: 31%;
  transform: rotateY(-16deg) rotateX(7deg) rotateZ(3deg);
}
.hp-card-b .hp-card-shot { aspect-ratio: 1; }

.hp-card-c {
  bottom: 5%; right: 11%; width: 27%;
  transform: rotateY(-10deg) rotateX(-5deg) rotateZ(-3deg);
}
.hp-card-c .hp-card-shot { aspect-ratio: 1; }

.hp-chip {
  position: absolute; display: flex; align-items: center; gap: 11px;
  padding: 11px 15px; border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(4, 24, 60, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0, 10, 35, .5);
  white-space: nowrap;
}
.hp-chip-ico {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, var(--cyan-500), var(--ocean-600)); color: #fff;
}
.hp-chip-text { display: flex; flex-direction: column; line-height: 1.3; }
.hp-chip-text b { font-size: 13.5px; font-weight: 700; color: #fff; }
.hp-chip-text span { font-size: 11.5px; color: rgba(255, 255, 255, .74); }

/* Right gutter, between the top and bottom photographs. */
.hp-chip-price { top: 35%; right: 0; }
/* Left, clear of the main card's caption. */
.hp-chip-bill { bottom: 16%; left: 0; }
/* Bottom left, clear of the chip above it and the photograph to its right. */
.hp-chip-cat { bottom: 0; left: 8%; }

/* The chips carry text, so they do not shrink with the stage the way the
   photographs do. Below this width they are tightened to keep the same
   clearances. */
@media (max-width: 1179px) {
  .hp-chip { padding: 9px 12px; gap: 9px; border-radius: var(--r); }
  .hp-chip-ico { width: 30px; height: 30px; border-radius: 9px; }
  .hp-chip-text b { font-size: 12.5px; }
  .hp-chip-text span { font-size: 10.5px; }
  /* Two chips, not three: on a stage this size the third crowds the card it
     sits under, and everything it says is already in the hero's point list. */
  .hp-chip-cat { display: none; }
  .hp-chip-bill { bottom: 4%; }
}

@keyframes hp-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes hp-drift-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
.hp-chip.hp-drift { animation: hp-drift 7.5s ease-in-out infinite; }
.hp-chip.hp-drift-slow { animation: hp-drift-slow 11s ease-in-out infinite; }
/* The layered cards already carry a 3D transform, so they drift with their own
   keyframes rather than having it overwritten by a plain translate. */
@keyframes hp-drift-b {
  0%,100% { transform: rotateY(-16deg) rotateX(7deg) rotateZ(3deg) translateY(0); }
  50%     { transform: rotateY(-16deg) rotateX(7deg) rotateZ(3deg) translateY(-16px); }
}
@keyframes hp-drift-c {
  0%,100% { transform: rotateY(-10deg) rotateX(-5deg) rotateZ(-3deg) translateY(0); }
  50%     { transform: rotateY(-10deg) rotateX(-5deg) rotateZ(-3deg) translateY(-20px); }
}
.hp-card-b.hp-drift { animation: hp-drift-b 8s ease-in-out infinite; }
.hp-card-c.hp-drift-slow { animation: hp-drift-c 12s ease-in-out infinite; }

.hp-wave { display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: clamp(38px, 5vw, 74px); color: var(--bg); }

/* --------------------------------------------------------------------------
   2. Shop account access
   -------------------------------------------------------------------------- */
.hp-access { position: relative; margin-top: clamp(-46px, -4vw, -30px); z-index: 2; }
.hp-access-card {
  display: grid; gap: 22px; align-items: center;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-xl); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-xl);
}
@media (min-width: 900px) { .hp-access-card { grid-template-columns: 1fr auto; gap: 34px; } }

.hp-access-copy { display: flex; gap: 16px; align-items: flex-start; }
.hp-access-ico {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: var(--r);
  background: linear-gradient(140deg, var(--ocean-600), var(--ocean-800)); color: #fff;
}
.hp-access-copy h2 { margin: 0 0 6px; font-size: clamp(19px, 2vw, 23px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.hp-access-copy p { margin: 0; max-width: 64ch; font-size: 14.5px; line-height: 1.62; color: var(--muted); }

.hp-access-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hp-access-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--muted);
}
.hp-access-note svg { color: var(--info); }

/* --------------------------------------------------------------------------
   3. Brand marquee
   -------------------------------------------------------------------------- */
.hp-brands-showcase { padding-bottom: clamp(40px, 5vw, 70px); }

.hp-marquee {
  margin: clamp(24px, 3vw, 36px) 0 clamp(6px, 1vw, 12px);
  display: grid; gap: 14px;
  /* The tracks are several times wider than the viewport, so the row is
     clipped here. Without this the page itself scrolls sideways. */
  overflow: hidden;
  /* Fade the ends so tiles enter and leave rather than being cut off. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hp-marquee-row { display: flex; width: max-content; animation: hp-scroll 46s linear infinite; }
.hp-marquee-reverse { animation-duration: 58s; animation-direction: reverse; }
.hp-marquee:hover .hp-marquee-row { animation-play-state: paused; }
@keyframes hp-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.hp-marquee-track { display: flex; gap: 14px; padding-right: 14px; flex: none; }

.hp-brand-tile {
  display: flex; align-items: center; gap: 12px; flex: none;
  min-width: 214px; padding: 13px 18px 13px 13px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
a.hp-brand-tile:hover {
  transform: translateY(-3px); text-decoration: none;
  box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ocean-500) 42%, var(--line));
}
.hp-brand-tile-mark {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 11px; overflow: hidden;
  background: linear-gradient(140deg, var(--ocean-600), var(--ocean-900)); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
}
.hp-brand-tile-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.hp-brand-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-brand-tile-name {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}
.hp-brand-tile-count { font-size: 12px; font-weight: 600; color: var(--muted); }

/* --------------------------------------------------------------------------
   4. What is Ocean Ventures
   -------------------------------------------------------------------------- */
.hp-what { background: var(--bg-alt); border-block: 1px solid var(--line); }

.hp-what-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .hp-what-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .hp-what-grid { grid-template-columns: repeat(4, 1fr); } }

.hp-what-card {
  position: relative; overflow: hidden;
  padding: 26px 22px 24px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.hp-what-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--cyan-500), var(--ocean-600));
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.hp-what-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ocean-500) 34%, var(--line)); }
.hp-what-card:hover::before { transform: scaleX(1); }
.hp-what-ico {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px;
  border-radius: 14px; color: var(--info);
  background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 20%, transparent);
}
.hp-what-card h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.hp-what-card p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--muted); }

/* --------------------------------------------------------------------------
   5. Built for shops & businesses
   -------------------------------------------------------------------------- */
.hp-built-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .hp-built-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .hp-built-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .hp-built-grid { grid-template-columns: repeat(4, 1fr); } }

.hp-built-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.hp-built-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background: var(--bg-alt); }
.hp-built-ico {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--surface-3); color: var(--ink-2);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.hp-built-card:hover .hp-built-ico { background: linear-gradient(140deg, var(--ocean-600), var(--ocean-800)); color: #fff; }
.hp-built-card h3 { margin: 0; font-size: 15.5px; font-weight: 750; color: var(--ink); }
.hp-built-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* --------------------------------------------------------------------------
   6. Stats strip
   -------------------------------------------------------------------------- */
.hp-stats { padding: clamp(30px, 4vw, 48px) 0; }
.hp-stats-grid {
  display: grid; gap: 1px; overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
  border-radius: var(--r-xl);
  background:
    linear-gradient(150deg, var(--hero-base) 0%, var(--hero-base-2) 100%);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, .1);
}
@media (min-width: 900px) { .hp-stats-grid { grid-template-columns: repeat(4, 1fr); } }

.hp-stat {
  position: relative; padding: clamp(24px, 3.2vw, 36px) clamp(16px, 2.4vw, 26px);
  text-align: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
}
.hp-stat-k {
  font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  background: linear-gradient(100deg, #fff, var(--cyan-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.hp-stat-l { margin-top: 9px; font-size: 13px; font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, .76); }

/* --------------------------------------------------------------------------
   7. Categories
   -------------------------------------------------------------------------- */
.hp-cat-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px)  { .hp-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) {
  .hp-cat-grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
  /* One hero tile so the section reads as a composition, not a table of boxes.
     Dense packing fills the rest of the row whatever the category count is. */
  .hp-cat-card:first-child { grid-column: span 2; grid-row: span 2; }
}

.hp-cat-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); text-decoration: none;
  background: var(--surface-3); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.hp-cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); text-decoration: none; }

.hp-cat-media { display: block; position: absolute; inset: 0; }
.hp-cat-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease-out);
}
.hp-cat-card:hover .hp-cat-media img { transform: scale(1.07); }
.hp-cat-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); }

.hp-cat-body {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  min-height: 208px; padding: 18px 16px 16px;
  justify-content: flex-end;
  /* A gradient, not a flat scrim: the photograph stays visible at the top and
     the text sits on something solid enough to read in both themes. */
  background: linear-gradient(180deg,
    rgba(0, 18, 51, 0) 0%,
    rgba(0, 18, 51, .30) 26%,
    rgba(0, 18, 51, .82) 60%,
    rgba(0, 18, 51, .96) 100%);
}
@media (min-width: 1100px) {
  .hp-cat-card:first-child .hp-cat-body { min-height: 432px; }
  .hp-cat-card:first-child .hp-cat-name { font-size: 26px; }
}
.hp-cat-name { font-size: 17px; font-weight: 750; letter-spacing: -.015em; color: #fff; }
.hp-cat-desc { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.hp-cat-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--action-on-dark);
  transition: gap .22s var(--ease);
}
.hp-cat-card:hover .hp-cat-go { gap: 11px; }

/* Phones: a swipeable rail rather than a squeezed grid. The rail scrolls inside
   itself, so the page body never scrolls sideways. */
@media (max-width: 639px) {
  .hp-cat-scroller .shell { padding-inline: 0; }
  .hp-cat-grid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px var(--gutter) 10px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hp-cat-grid::-webkit-scrollbar { display: none; }
  .hp-cat-card { flex: 0 0 74%; scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   8. Services
   -------------------------------------------------------------------------- */
.hp-services { background: var(--bg-alt); border-block: 1px solid var(--line); }

.hp-svc-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .hp-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hp-svc-grid { grid-template-columns: repeat(3, 1fr); } }

.hp-svc-card {
  position: relative; overflow: hidden;
  padding: 28px 24px 26px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.hp-svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ocean-500) 34%, var(--line)); }
.hp-svc-n {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--mono); font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--ink); opacity: .07;
}
.hp-svc-ico {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px;
  border-radius: 14px; color: #fff;
  background: linear-gradient(140deg, var(--ocean-600), var(--ocean-900));
  box-shadow: var(--shadow-brand);
}
.hp-svc-card h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 750; color: var(--ink); }
.hp-svc-card p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--muted); }

/* --------------------------------------------------------------------------
   9. How it works
   -------------------------------------------------------------------------- */
.hp-steps {
  position: relative; display: grid; gap: 18px;
  margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .hp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hp-steps { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

/* The connecting line. Drawn once behind the badges on a wide screen, and
   redrawn vertically on a phone so the sequence still reads as a path. */
.hp-steps-rail { display: none; }
@media (min-width: 1100px) {
  .hp-steps-rail {
    display: block; position: absolute; top: 33px; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
  }
  .hp-steps-rail::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--cyan-500), transparent);
    background-size: 34% 100%; background-repeat: no-repeat;
    animation: hp-rail 5.5s var(--ease) infinite;
  }
  @keyframes hp-rail { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
}

.hp-step { position: relative; text-align: center; padding: 0 8px; }
.hp-step-badge {
  position: relative; display: grid; place-items: center;
  width: 68px; height: 68px; margin: 0 auto 16px;
  border-radius: 20px; color: #fff;
  background: linear-gradient(150deg, var(--ocean-600), var(--ocean-900));
  box-shadow: var(--shadow-brand);
  border: 3px solid var(--bg);
}
.hp-step-n {
  position: absolute; top: -8px; right: -10px;
  min-width: 26px; padding: 2px 6px; border-radius: var(--r-full);
  background: var(--cyan-500); color: var(--ocean-950);
  font-family: var(--mono); font-size: 11px; font-weight: 800; line-height: 1.5;
  border: 2px solid var(--bg);
}
.hp-step h3 { margin: 0 0 7px; font-size: 16px; font-weight: 750; color: var(--ink); }
.hp-step p { margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--muted); }

/* Below the five-across layout each step becomes a row: badge on the left,
   title and description stacked beside it.
   The three children are placed explicitly. Left to auto-placement the
   paragraph dropped into the second row of the FIRST column - under the badge
   - which squeezed the heading into a narrow strip on the right and let the
   description run the full width beneath it. */
@media (max-width: 1099px) {
  .hp-step {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px; row-gap: 4px; text-align: left; padding: 0;
    align-items: start;
  }
  .hp-step-badge {
    grid-column: 1; grid-row: 1 / span 2;
    width: 56px; height: 56px; margin: 0; border-radius: 17px;
  }
  .hp-step h3 { grid-column: 2; grid-row: 1; margin: 4px 0 0; }
  .hp-step p  { grid-column: 2; grid-row: 2; }
}

/* --------------------------------------------------------------------------
   10. Shopkeeper journey
   -------------------------------------------------------------------------- */
.hp-journey {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--hero-base) 0%, var(--hero-base-2) 100%);
  color: var(--hero-ink);
}
.hp-journey .hp-head h2 { color: #fff; }
.hp-journey .hp-sub { color: var(--hero-ink-2); }

.hp-journey-list {
  display: grid; gap: 0; margin: 0; padding: 0; list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .hp-journey-list { grid-template-columns: repeat(2, 1fr); column-gap: 34px; } }
@media (min-width: 1100px) { .hp-journey-list { grid-template-columns: repeat(3, 1fr); column-gap: 30px; } }

.hp-journey-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; padding-bottom: 30px; }
.hp-journey-mark { position: relative; display: flex; justify-content: center; }
.hp-journey-ico {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 14px; color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hp-journey-line {
  position: absolute; top: 52px; bottom: -14px; left: 50%; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .04));
}
.hp-journey-body { padding-top: 2px; }
.hp-journey-n {
  display: inline-block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-300);
}
.hp-journey-step h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 750; color: #fff; }
.hp-journey-step p { margin: 0; max-width: 42ch; font-size: 14px; line-height: 1.62; color: var(--hero-ink-2); }

/* On a multi-column layout the vertical connector between cards is misleading,
   so it is only drawn in the single-column (phone) arrangement. */
@media (min-width: 700px) { .hp-journey-line { display: none; } }

/* --------------------------------------------------------------------------
   11. Why businesses choose Ocean Ventures
   -------------------------------------------------------------------------- */
.hp-why-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .hp-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .hp-why-grid { grid-template-columns: repeat(3, 1fr); } }

.hp-why-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px 22px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hp-why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ocean-500) 32%, var(--line)); }
.hp-why-ico {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--info-soft); color: var(--info);
  border: 1px solid color-mix(in srgb, var(--info) 20%, transparent);
}
.hp-why-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 750; color: var(--ink); }
.hp-why-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Product preview
   -------------------------------------------------------------------------- */
/* Four across at most. Six columns made each photograph about 190px wide on a
   1440px screen; four gives it roughly 300px, which is the point of the
   section. */
.hp-product-rail { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .hp-product-rail { gap: 16px; grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .hp-product-rail { grid-template-columns: repeat(4, 1fr); } }

.hp-price-note {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--info-soft); color: var(--info);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Brand explorer
   -------------------------------------------------------------------------- */
.hp-brand-explore { background: var(--bg-alt); border-block: 1px solid var(--line); }

.hp-brand-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.hp-chip-btn {
  padding: 8px 15px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.hp-chip-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.hp-chip-btn.is-active {
  background: linear-gradient(140deg, var(--ocean-600), var(--ocean-800));
  border-color: transparent; color: #fff;
}

.hp-brand-wall { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px)  { .hp-brand-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px)  { .hp-brand-wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .hp-brand-wall { grid-template-columns: repeat(6, 1fr); } }

.hp-brand-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 14px 20px; text-align: center;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.hp-brand-card:hover {
  transform: translateY(-5px); text-decoration: none;
  box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ocean-500) 42%, var(--line));
}
.hp-brand-card[hidden] { display: none; }
.hp-brand-mark {
  display: grid; place-items: center; overflow: hidden;
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(145deg, var(--ocean-600), var(--ocean-900)); color: #fff;
  font-size: 19px; font-weight: 800;
}
.hp-brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.hp-brand-name {
  font-size: 14px; font-weight: 750; color: var(--ink); line-height: 1.35;
  overflow-wrap: anywhere;
}
.hp-brand-count { font-size: 12px; font-weight: 600; color: var(--muted); }
.hp-brand-go {
  display: grid; place-items: center; width: 26px; height: 26px; margin-top: 2px;
  border-radius: 50%; background: var(--surface-3); color: var(--ink-2);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.hp-brand-card:hover .hp-brand-go {
  opacity: 1; transform: none;
  background: linear-gradient(140deg, var(--action-from), var(--action-to)); color: var(--action-ink);
}
.hp-brand-empty { margin-top: 26px; text-align: center; font-size: 14.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   14. Guides
   -------------------------------------------------------------------------- */
.hp-guide-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .hp-guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .hp-guide-grid { grid-template-columns: repeat(3, 1fr); } }

.hp-guide-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hp-guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
@media (min-width: 1040px) { .hp-guide-lead { grid-column: span 1; } }
.hp-guide-ico {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 13px; background: var(--surface-3); color: var(--info);
}
.hp-guide-card h3 { margin: 0; font-size: 16px; font-weight: 750; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.hp-guide-card p { margin: 0; font-size: 13.8px; line-height: 1.65; color: var(--muted); }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.hp-faq { background: var(--bg-alt); border-block: 1px solid var(--line); }
.hp-faq-layout { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 980px) { .hp-faq-layout { grid-template-columns: .8fr 1.2fr; align-items: start; } }
@media (min-width: 980px) { .hp-faq-aside { position: sticky; top: 96px; } }

.hp-faq-aside h2 {
  margin: 12px 0 0; font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12; letter-spacing: -.025em; font-weight: 800; color: var(--ink);
}
.hp-faq-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.hp-faq-list { display: grid; gap: 10px; }
.hp-faq-item {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hp-faq-item[open] { border-color: color-mix(in srgb, var(--ocean-500) 38%, var(--line)); box-shadow: var(--shadow-md); }
.hp-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 700; color: var(--ink);
}
.hp-faq-item summary::-webkit-details-marker { display: none; }
.hp-faq-item summary:hover { background: var(--surface-2); }
.hp-faq-item summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.hp-faq-mark {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  transition: transform .26s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.hp-faq-item[open] .hp-faq-mark {
  transform: rotate(180deg);
  background: linear-gradient(140deg, var(--cyan-500), var(--ocean-600)); color: #fff;
}
.hp-faq-answer { padding: 0 20px 20px; }
.hp-faq-answer p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
@keyframes hp-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hp-faq-item[open] .hp-faq-answer { animation: hp-faq-in .26s var(--ease-out); }

/* --------------------------------------------------------------------------
   16. Final CTA
   -------------------------------------------------------------------------- */
.hp-cta {
  position: relative; overflow: hidden;
  padding: clamp(38px, 6vw, 72px) clamp(22px, 4vw, 60px);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--hero-base) 0%, var(--hero-base-2) 100%);
  color: var(--hero-ink); box-shadow: var(--shadow-xl);
  text-align: center;
}
.hp-cta-glow {
  position: absolute; inset: -40% -10% auto; height: 420px;
  background: radial-gradient(closest-side, var(--hero-glow), transparent 72%);
  pointer-events: none;
}
.hp-cta-inner { position: relative; }
.hp-cta h2 {
  margin: 16px 0 0; font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.1; letter-spacing: -.03em; font-weight: 800; color: #fff;
  text-wrap: balance;
}
.hp-cta p {
  margin: 14px auto 0; max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.6; color: var(--hero-ink-2);
}
.hp-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */
.hp-contact-grid { display: grid; gap: clamp(24px, 3.4vw, 40px); }
@media (min-width: 900px) { .hp-contact-grid { grid-template-columns: 1.05fr .95fr; align-items: start; } }

.hp-contact-details {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-xl); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-md);
}
.hp-contact-details h3 { margin: 0 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.hp-contact-list { display: grid; gap: 15px; margin: 0; }
.hp-contact-list > div { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: start; }
@media (max-width: 519px) { .hp-contact-list > div { grid-template-columns: 1fr; gap: 3px; } }
.hp-contact-list dt {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.hp-contact-list dt svg { color: var(--info); flex: none; }
.hp-contact-list dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.hp-contact-list dd a { color: var(--ink); font-weight: 650; }

.hp-contact-actions { display: grid; gap: 12px; align-content: start; }
.hp-contact-btn {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 16px 18px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); text-decoration: none; color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hp-contact-btn:hover {
  transform: translateY(-2px); text-decoration: none;
  box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ocean-500) 40%, var(--line));
}
.hp-contact-btn-ico {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 13px; color: #fff;
  background: linear-gradient(140deg, var(--ocean-600), var(--ocean-900));
}
.hp-contact-btn > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-contact-btn b { font-size: 15px; font-weight: 750; color: var(--ink); }
.hp-contact-btn > span:nth-child(2) > span {
  font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-contact-btn > svg { color: var(--faint); }
.hp-contact-btn-wa .hp-contact-btn-ico { background: linear-gradient(140deg, #25d366, #128c7e); }

/* --------------------------------------------------------------------------
   Reduced motion
   ocean.css already flattens transitions globally; these are the looping
   decorative animations, which must stop outright rather than run fast.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hp-marquee-row,
  .hp-orb-a, .hp-orb-b,
  .hp-chip.hp-drift, .hp-chip.hp-drift-slow,
  .hp-card-b.hp-drift, .hp-card-c.hp-drift-slow,
  .hp-steps-rail::after { animation: none !important; }
  .hp-marquee-row { transform: none; }
}