/* ============================================================================
   Lucky Cat AI Solutions — site system
   ----------------------------------------------------------------------------
   Follows the existing luckycat.ie: same tokens, same fonts, same rhythm of
   alternating light and dark bands, gold as the accent that carries emphasis.
   Green is the brand, not the wallpaper.
   ========================================================================= */

:root {
  /* tokens carried over from the live site, unchanged */
  --green:   #3db54a; --green-l:#52c960; --green-d:#2a9e37; --green-xl:#e6f7e8;
  --orange:  #f5a01e; --orange-d:#e08c0a;
  --forest:  #111f0c; --forest-2:#0d1708; --forest-3:#1a2f13;
  --gold:    #d4a843; --gold-l:#e8c975; --gold-xl:rgba(212,168,67,.12);
  --ink:     #1a1206; --white:#ffffff; --cream:#fdf9f4; --off:#f4f1ec;
  --muted:   #7a6a52; --border:#e4dcd2;

  /* on dark bands */
  --d-ink:   #f6f3ec; --d-muted:#b9b0a0; --d-faint:#8d8577; --d-line:#25361d;

  /* per-product colourways, taken from each product's own brand kit */
  --ownly-deep:  #14342b;  --ownly-gold: #e0a458;
  --tillr-orange:#c96b10;  --tillr-cream:#fdf6ec;
  --pp-green:    #3db54a;
  --nock-deep:   #0d3a63;  --nock-flag: #cc5217;   /* blue fixed by Nock's identity spec */

  --fd: "Bricolage Grotesque", system-ui, sans-serif;
  --fb: "DM Sans", system-ui, sans-serif;

  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(4rem, 9vw, 7rem);
  --max: 78rem;
  --z-sticky: 50;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--fb); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--green-d); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--ink); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); }
.tnum { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: var(--ink); padding: 12px 20px; font-family: var(--fd); font-weight: 700; }
.skip:focus { left: 0; }

h1, h2, h3 { margin: 0; font-family: var(--fd); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.025em; line-height: 1.15; }
p  { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(1.075rem, 1.7vw, 1.25rem); line-height: 1.6; color: var(--muted); max-width: 56ch; }

/* --- bands ---------------------------------------------------------------- */
/* The live site alternates light and dark. Keeping that rhythm is most of why
   it reads as the same site. */
.band-dark { background: var(--forest-2); color: var(--d-ink); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .lead { color: var(--d-muted); }
.band-off  { background: var(--off); }
.band-cream{ background: var(--cream); }

/* --- pill kicker (the site's own device, used once per band) -------------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-xl); color: var(--gold); border: 1px solid rgba(212,168,67,.3);
  font-family: var(--fd); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.band-off .pill, .band-cream .pill { color: #5c4610; background: rgba(212,168,67,.24); border-color: rgba(212,168,67,.5); }

/* --- header --------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(253,249,244,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; }
.lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lockup img { height: 32px; width: auto; flex-shrink: 0; }
.lockup .rule { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }
.lockup .word { font-family: var(--fd); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.04em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.nav-links .nl { font-family: var(--fd); font-weight: 600; font-size: 0.92rem; color: var(--ink); opacity: .78; }
.nav-links .nl:hover { opacity: 1; color: var(--green-d); }
@media (max-width: 860px) { .nav-links .nl { display: none; } }

/* --- buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--fd); font-weight: 700; font-size: 0.97rem; min-height: 46px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .18s cubic-bezier(.22,1,.36,1), background-color .18s, border-color .18s, color .18s; }
.btn-gold  { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-l); transform: translateY(-2px); }
.btn-dark  { background: var(--forest-2); color: #fff; }
.btn-dark:hover { background: var(--forest); transform: translateY(-2px); }
.btn-line  { border-color: var(--border); color: var(--ink); background: #fff; }
.btn-line:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-line-d { border-color: rgba(255,255,255,.3); color: #fff; }
.btn-line-d:hover { border-color: #fff; transform: translateY(-2px); }
.btn-lg { font-size: 1.05rem; padding: 15px 28px; min-height: 54px; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* --- centred hero --------------------------------------------------------- */
.hero-mid { text-align: center; display: grid; justify-items: center; gap: 0; }
.hero-mid h1 { margin-inline: auto; }
.hero-mid .lead { margin-inline: auto; max-width: 58ch; }
.hero-mid .cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --- hero stage: the products themselves, not a description of them -------
   A studio's strongest opening argument is the work. The ownly window sits
   centre, the customer-facing apps lean in from the sides. Dotted field and a
   soft glow behind, both from the live site's own vocabulary. */
.hero-band { position: relative; overflow: hidden; }
.hero-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(212,168,67,.16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 35%, transparent 78%);
}
.hero-band > * { position: relative; }

.stage { position: relative; width: 100%; max-width: 46rem; margin: clamp(2.5rem,5vw,4rem) auto 0; }
.stage-glow {
  position: absolute; left: 50%; top: 8%; translate: -50% 0;
  width: 70%; aspect-ratio: 2 / 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212,168,67,.28), transparent 70%);
  filter: blur(30px); pointer-events: none;
}
/* ownly is a tablet product on the counter, so it gets a tablet, not a browser
   window. Even bezel all round, no chrome, one small camera dot. */
.stage-tablet {
  position: relative; border-radius: 26px; padding: 13px;
  background: #12170f; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px -35px rgba(0,0,0,.85);
}
.stage-tablet img { width: 100%; display: block; border-radius: 14px; }
.stage-tablet::before {
  content: ""; position: absolute; top: 5px; left: 50%; translate: -50% 0;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.22);
}

.stage-phone {
  position: absolute; bottom: -7%; width: 26%; max-width: 158px;
  border-radius: 20px; padding: 5px; background: #0b1207;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 55px -22px rgba(0,0,0,.9);
}
.stage-phone img { width: 100%; border-radius: 15px; display: block; aspect-ratio: 250/430; object-fit: cover; object-position: top center; }
.stage-phone.is-left  { left: -11%; rotate: -6deg; }
.stage-phone.is-right { right: -11%; rotate: 6deg; }
@media (max-width: 860px) {
  .stage-phone { display: none; }
  .stage { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .stage-phone { rotate: none; } }

.hero-proof {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(3.5rem, 7vw, 5rem); color: var(--d-muted); font-size: 0.95rem;
}
.hero-proof b { color: #fff; font-family: var(--fd); font-weight: 800; }

/* --- product grid: side by side, each in its own colourway --------------- */
.pgrid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .pgrid { grid-template-columns: repeat(2, 1fr); } }

/* The restaurant platform is one product sold as two apps, so it gets one box
   split down the middle rather than two boxes pretending to be separate. */
.pcard-pair {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr;
  border-radius: 22px; overflow: hidden; border: 1px solid var(--border);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.pcard-pair:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(26,18,6,.45); }
@media (prefers-reduced-motion: reduce) { .pcard-pair:hover { transform: none; } }
@media (min-width: 760px) { .pcard-pair { grid-template-columns: 1fr 1fr; } }
.pair-half { padding: clamp(1.5rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 0.85rem; }
.pair-half p { font-size: 0.98rem; line-height: 1.6; opacity: .9; }
.pair-half ul { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 9px; font-size: 0.94rem; }
.pair-half li { display: flex; gap: 10px; align-items: flex-start; opacity: .92; }
.pair-ownly { background: var(--ownly-deep); color: #eef2ec; }
.pair-tillr { background: var(--tillr-cream); color: var(--ink); border-top: 1px solid #ecdfc9; }
@media (min-width: 760px) { .pair-tillr { border-top: 0; border-left: 1px solid rgba(0,0,0,.08); } }
.pair-foot {
  grid-column: 1 / -1; background: var(--ink); color: #fff;
  padding: 14px clamp(1.5rem, 2.6vw, 2rem);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--fd); font-weight: 700; font-size: 0.95rem;
}
.pcard-pair:hover .arw { transform: translateX(5px); }

.pcard {
  border-radius: 22px; padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex; flex-direction: column; gap: 0.9rem;
  border: 1px solid transparent; position: relative; overflow: hidden;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(26,18,6,.45); }
@media (prefers-reduced-motion: reduce) { .pcard:hover { transform: none; } }

/* each card wears its product's own brand, not the site's */
.pcard-ownly { background: var(--ownly-deep); color: #eef2ec; }
.pcard-tillr { background: var(--tillr-cream); color: var(--ink); border-color: #ecdfc9; }
.pcard-nock  { background: var(--nock-deep); color: #e9f2ee; }
.pcard-pp    { background: #fff; color: var(--ink); border-color: var(--border); }
.pcard-open  { background: transparent; border: 1.5px dashed var(--border); color: var(--ink); }

/* ...including its typeface. Nock is set in Archivo and pitchpilot in Poppins
   over Hanken Grotesk, exactly as their own sites are. ownly and tillr
   already share the Lucky Cat faces, so they are left alone.
   Doubled-up selectors so these beat the generic `.pcard .go` rule that is
   declared further down the file. */
.pcard.pcard-nock,
.pcard.pcard-nock h3,
.pcard.pcard-nock .go,
.pcard.pcard-nock .wm-sub { font-family: Archivo, ui-sans-serif, system-ui, sans-serif; }
.pcard.pcard-nock h3 { letter-spacing: -0.03em; }

.pcard.pcard-pp,
.pcard.pcard-pp .wm-sub { font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; }
.pcard.pcard-pp h3,
.pcard.pcard-pp .go { font-family: Poppins, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.015em; }

.pcard-head { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.pcard-head img { height: 38px; width: auto; }
.pcard-for { font-family: var(--fd); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; opacity: .72; }
.pcard h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.pcard p { font-size: 0.98rem; line-height: 1.6; opacity: .88; }
.pcard ul { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 8px; font-size: 0.94rem; }
.pcard li { display: flex; gap: 9px; align-items: flex-start; opacity: .9; }
.pcard .go { margin-top: auto; padding-top: 0.9rem; font-family: var(--fd); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.pcard:hover .arw { transform: translateX(5px); }
.arw { transition: transform .25s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) { .arw { transition: none; } }

/* wordmarks rendered in each product's own type, as the apps do */
.wm { font-family: Nunito, system-ui, sans-serif; font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-size: 1.5rem; }
/* Bigger and at full opacity: at 10px and 70% these labels measured 2.6–4.0:1. */
.wm-sub { font-family: var(--fd); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 1; display: block; margin-top: 4px; }

/* --- feature rows --------------------------------------------------------- */
.frow { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fitem h3 { margin-bottom: 0.5rem; }
.fitem p { color: var(--muted); font-size: 0.98rem; }
.band-dark .fitem p { color: var(--d-muted); }

/* --- numbered steps ------------------------------------------------------- */
/* A real sequence, so it is an <ol> and the numbers carry meaning. The rule on
   top of each step reads as one line across the row at desktop widths. */
.steps { list-style: none; margin: 0; padding: 0; display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.steps li { border-top: 2px solid var(--border); padding-top: 1.15rem; }
.steps li:first-child { border-top-color: var(--gold); }
.step-n { display: block; font-family: var(--fd); font-weight: 800;
  font-size: 0.82rem; letter-spacing: 0.14em; color: var(--muted);
  margin-bottom: 0.6rem; }
.steps h3 { margin-bottom: 0.5rem; }
.steps p { color: var(--muted); font-size: 0.98rem; }

/* --- product lineup ------------------------------------------------------- */
/* Four products and an open slot. The dashed chip is the whole argument for
   custom work, so it has to read as "next one", not as a fifth product. */
.lineup { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 17px; border-radius: 13px;
  background: #fff; border: 1px solid var(--border);
  font-size: 1.05rem; line-height: 1;
}
.chip img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.chip-open {
  background: transparent; border-style: dashed; border-color: #cfc4b4;
  color: var(--muted);
}
.chip-open b { font-family: var(--fd); font-weight: 700; letter-spacing: -0.02em; }
.chip-plus {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--off); color: var(--muted); border: 1px dashed #cfc4b4;
  font-family: var(--fd); font-weight: 800; font-size: 0.95rem;
}

/* --- tick list ------------------------------------------------------------ */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; }
.tk { color: var(--gold); font-family: var(--fd); font-weight: 800; flex-shrink: 0; }

/* --- footer --------------------------------------------------------------- */
.foot { background: var(--forest-2); color: var(--d-ink); padding-block: clamp(3rem, 6vw, 4.5rem); }
.foot-grid { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 5rem); justify-content: space-between; }
.foot h4 { font-family: var(--fd); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-faint); margin: 0 0 12px; }
.foot a { display: block; color: var(--d-muted); padding-block: 8px; font-size: 0.96rem; }
.foot a:hover { color: var(--gold-l); }
.foot .word { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .8s cubic-bezier(.16,1,.3,1) backwards; }
  .rise-2 { animation-delay: .08s; } .rise-3 { animation-delay: .16s; } .rise-4 { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
}