/* Growth Marketing House: Foliora layout, Bravio menu bar and services, UPSIDE green and dot grid.
   Apple system fonts for everything, Instrument Serif italic for the green words, Kalam for notes. */
@font-face { font-family: "Inter Tight"; src: url("/fonts/inter-tight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("/fonts/kalam.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #09090b; --text: #1d1d1f; --muted: #5b5b63; --faint: #8e8e96;
  --bg: #ffffff; --soft: #f6f7f9; --line: #ececf0; --dash: #e6e6ea;
  /* One green everywhere, taken from the main button */
  --green-1: #2ee27a; --green-2: #04a945; --green: #10bf55; --green-soft: rgba(16, 191, 85, 0.12); --neon-glow: rgba(16, 200, 90, 0.26);
  --neon: var(--green); --lime: var(--green);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter Tight", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "New York", Georgia, serif;
  --hand: "Kalam", "Bradley Hand", cursive;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.5; letter-spacing: -0.015em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--green-soft); color: var(--ink); }

/* The green words: UPSIDE's italic serif, in a neon green that reads on white */
.neon { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--green); background: linear-gradient(180deg, var(--green-1), var(--green-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 16px var(--neon-glow)); padding-right: .06em; }

/* Foliora frame: a centred column with dashed guide lines, and hatched bands between sections */
.frame { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 56px; }
.section { position: relative; padding: 110px 0; }
.section::before, .hero::before { content: ""; position: absolute; inset: 0; max-width: 1200px; margin: 0 auto; border-inline: 1px dashed var(--dash); pointer-events: none; }
.hatch { height: 34px; border-block: 1px solid var(--line); background: repeating-linear-gradient(-45deg, transparent 0 7px, #eeeef1 7px 8px), var(--bg); }

/* UPSIDE dot grid across the whole site: grey dots and plus marks on the page itself, and one layer of
   green dots that light up around the pointer. Both sit behind every card and panel, so solid surfaces
   (the services board, cards, the form) cover them and only the open page shows the grid. */
body { position: relative; background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132'%3E%3Cpath d='M66 61v10M61 66h10' stroke='%2309090b' stroke-opacity='.12' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(rgba(9, 9, 11, 0.12) 1px, transparent 1.3px); background-size: 132px 132px, 22px 22px; background-position: center top; }
.glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; --mx: -999px; --my: -999px; background-image: radial-gradient(rgba(0, 200, 80, 0.95) 1.3px, transparent 1.7px); background-size: 22px 22px; background-position: center top; -webkit-mask-image: radial-gradient(170px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 45%, transparent 75%); mask-image: radial-gradient(170px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 45%, transparent 75%); opacity: 0; transition: opacity .4s ease; }
.glow.lit { opacity: 1; }

/* Menu bar: Bravio's dark pill */
.nav-wrap { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav { pointer-events: auto; display: flex; align-items: center; gap: 28px; height: 62px; padding: 0 9px 0 9px; border-radius: 20px; background: rgba(28, 29, 32, 0.92); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 10px 30px rgba(0,0,0,.14); color: #fff; transition: transform .5s var(--ease); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
.brand img { width: 44px; height: 44px; border-radius: 12px; }
.nav-links { display: flex; gap: 26px; font-size: 15px; color: #c9c9cf; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: #fff; }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 20px; border-radius: 13px; background: linear-gradient(180deg, var(--green-1), var(--green-2)); color: #fff; font-weight: 600; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px -8px rgba(0,190,80,.7); transition: transform .3s var(--ease); }
.nav-cta .arrow { background: rgba(255,255,255,.22); color: #fff; }
.nav-cta:hover { transform: translateY(-1px); }
.arrow { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform .35s var(--ease); }
.arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a:hover > .arrow { transform: rotate(45deg); }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); position: relative; cursor: pointer; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1.6px; background: #fff; transition: transform .3s ease; }
.menu-btn span:first-child { top: 18px; } .menu-btn span:last-child { top: 25px; }

/* Glossy pill button (Foliora), in green */
.cta-glossy { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 64px; padding: 0 40px; border: 0; border-radius: 22px; cursor: pointer; font: inherit; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: #fff; background: linear-gradient(180deg, var(--green-1), var(--green-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,80,30,.25), 0 12px 30px -8px rgba(0, 190, 80, .65), 0 0 0 1px rgba(0,140,60,.35); transition: transform .35s var(--ease), box-shadow .35s var(--ease); overflow: hidden; }
.cta-glossy::before { content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: 21px 21px 40% 40%; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events: none; }
.cta-glossy:hover { transform: translateY(-2px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,80,30,.25), 0 18px 40px -8px rgba(0, 200, 85, .75), 0 0 0 1px rgba(0,140,60,.35); }
.cta-glossy:active { transform: translateY(1px) scale(.97); }
.cta-roll { position: relative; display: block; height: 1.3em; overflow: hidden; line-height: 1.3em; }
.cta-roll > span { display: block; text-align: center; transition: transform .5s var(--ease); }
.cta-glossy:hover .cta-roll > span, .cta-glossy:focus-visible .cta-roll > span { transform: translateY(-100%); }
.cta-glossy.small { height: 54px; border-radius: 18px; font-size: 17px; width: 100%; }

/* Reusable labels */
.tag { display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.bracket { position: relative; display: inline-block; padding: 4px 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
.bracket::before, .bracket::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1.5px solid var(--neon); }
.bracket::before { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.bracket::after { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; font-weight: 500; letter-spacing: -0.045em; color: var(--ink); }
.h2 .neon { font-size: 1.12em; }
.grey { color: #a1a1aa; }
.sub { margin-top: 14px; color: var(--muted); font-size: 18px; line-height: 1.5; }
.head-center { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.head-center .h2 { margin-top: 14px; }
.head-left { max-width: 720px; margin-bottom: 46px; }
.head-left .h2 { margin-top: 10px; }
.pill-link { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 18px; border-radius: 13px; border: 1px solid var(--line); background: #fff; font-size: 15px; font-weight: 500; transition: border-color .2s ease, transform .3s var(--ease); }
.pill-link:hover { border-color: #cfcfd6; transform: translateY(-1px); }
.pill-link .arrow { width: 32px; height: 32px; background: var(--soft); color: var(--ink); }
.pill-link.light { border-color: transparent; color: var(--ink); }

/* Entrance animations (Foliora): blur, lift and fade, word by word for the headline */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal, .js .reveal-stagger > * { opacity: 0; filter: blur(10px); transform: translateY(24px); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); }
  .js .reveal.in, .js .reveal-stagger.in > * { opacity: 1; filter: none; transform: none; }
  .js .reveal-stagger.in > *:nth-child(2) { transition-delay: .1s; }
  .js .reveal-stagger.in > *:nth-child(3) { transition-delay: .2s; }
  .js .reveal-stagger.in > *:nth-child(4) { transition-delay: .3s; }
  .js .reveal-stagger.in > *:nth-child(5) { transition-delay: .4s; }
  .js .reveal-words .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(30px); transition: opacity 1s var(--ease), filter 1s var(--ease), transform 1s var(--ease); }
  .js .reveal-words.in .w { opacity: 1; filter: none; transform: none; }
}