/* ===================== IBULL Innovation Technology — "Monsoon Ink" =====================
   Corporate site. Rebuilt 20 Sep 2026, replacing the inherited violet/pink
   gradient theme.
   ...
   WHY NEAR-MONOCHROME, WHEN BOTH PRODUCTS ARE COLOURFUL
   GullySport is saffron on warm paper. GullyReels is terracotta and clay. If the
   parent brand arrives with a third strong palette, every page carrying a
   product logo has three identities competing in it, and the parent — which
   should be the frame — ends up shouting loudest.
   So this is ink on paper with exactly one accent, and the product colours are
   used ONLY as product identifiers: a rule above a card, a dot beside a name.
   The parent frames; the children are the colour.
   ...
   The other reason is the audience. This site is read by investors, partners
   and prospective hires deciding whether a young company is serious. Restraint
   reads as confidence; a gradient-heavy template reads as a template.
   ...
   CONTRAST
   Every ink token below was computed against all three surfaces (paper, alt,
   white) before being written, not adjusted afterwards. The lowest is 4.57.
   The one value that needed changing was the GullySport saffron: #F2740B scores
   2.76 as text on paper, so text uses a darkened #B05408 while the true brand
   colour is kept for rules and fills where nothing sits on top of it.
   ====================================================================== */

:root {
  /* Paper */
  --paper:     #FAFAF8;
  --paper-alt: #F2F2EE;
  --surface:   #FFFFFF;

  /* Ink — warm near-black, not pure black. Pure #000 on off-white reads
     harsh and slightly cheap at large sizes. */
  --ink:       #121212;   /* 17.93 on paper */
  --ink-soft:  #3A3A35;   /* 10.94 */
  --ink-muted: #55554E;   /*  7.19 — body copy */
  --ink-dim:   #6E6E68;   /*  4.91 — the lightest permitted on paper */

  --rule:        #E4E4E0;
  --rule-strong: #C9C9C3;

  /* The single accent. Used for links, one call to action, and nothing else.
     An accent that appears everywhere is not an accent, it is a second body
     colour. */
  --accent:      #2D3FE7;   /* 6.75 on paper, white on it 7.06 */
  --accent-deep: #1F2CA8;

  /* Product identity. FILL values — the real brand colours, for rules and
     blocks. Never put text directly on --gullysport. */
  --gullysport:  #F2740B;
  --gullyreels:  #8E3C1B;
  /* TEXT values, darkened to clear AA on paper. */
  --gullysport-ink: #B05408;   /* 4.88 on paper */
  --gullyreels-ink: #8E3C1B;   /* 7.15 — already fine */

  --max-width: 1120px;
  --measure: 34rem;          /* ~65 characters: the readable line length */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink-muted);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }
.measure { max-width: var(--measure); }

/* ---------- Type ----------
   One family, four weights, tight tracking on headings. The whole design rests
   on typography, so the scale is deliberate rather than a set of ad-hoc sizes. */
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 18px; }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }

p { color: var(--ink-muted); }
p + p { margin-top: 16px; }
.lead { font-size: 1.15rem; color: var(--ink-soft); line-height: 1.6; }

strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow--quiet { color: var(--ink-dim); }

/* ---------- Layout ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--paper-alt); }
.section--ruled { border-top: 1px solid var(--rule); }
.section-head { margin-bottom: 52px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; max-width: 40rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 248, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 28px;
  max-width: var(--max-width); margin: 0 auto; position: relative;
}
.brand { display: inline-flex; align-items: center; font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.brand-logo { width: 28px; height: 28px; margin-right: 10px; flex-shrink: 0; }
.site-footer .brand-logo { width: 24px; height: 24px; margin-right: 8px; }
.brand .slash { color: var(--rule-strong); margin: 0 1px; }
.brand-sub { color: var(--ink-dim); font-weight: 400; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 0.92rem; color: var(--ink-muted);
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav-links a.active { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule-strong);
  border-radius: 4px; width: 40px; height: 40px; color: var(--ink);
  font-size: 1.1rem; cursor: pointer;
}

/* ---------- Buttons ----------
   Square-ish corners. Pills read friendly and consumer; this site is neither. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 3px;
  font-size: 0.92rem; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--paper); }          /* 17.93 */
.btn-primary:hover { background: var(--accent); }
.btn-ghost { border-color: var(--rule-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* A text link that behaves like a call to action. */
.link-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 0.92rem; font-weight: 500;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-cta:hover { color: var(--accent-deep); }

/* ---------- Hero ---------- */
.hero { padding: 108px 0 88px; }
.hero h1 { max-width: 17ch; margin-bottom: 24px; }
.hero .lead { max-width: var(--measure); }

/* ---------- Verticals ----------
   Two products. The coloured rule is the only place a product palette appears
   on this site, which is what keeps them legible as separate brands. */
.verticals { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.vertical {
  padding: 36px 34px 34px; border-right: 1px solid var(--rule);
  background: var(--paper); position: relative;
  transition: background 0.18s ease;
}
.vertical:last-child { border-right: 0; }
.vertical:hover { background: var(--surface); }
.vertical::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: var(--brandColor, var(--ink));
}
.vertical--sport { --brandColor: var(--gullysport); }
.vertical--reels { --brandColor: var(--gullyreels); }
.vertical .num {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink-dim); margin-bottom: 12px; display: block;
}
.vertical h3 { font-size: 1.35rem; margin-bottom: 6px; }
.vertical p { font-size: 0.95rem; }
.vertical .links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.cell { background: var(--paper); padding: 30px 28px; }
.cell .num {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink-dim); display: block; margin-bottom: 14px;
}
.cell p { font-size: 0.94rem; }

/* Plain bordered card, for pages that need a standalone block. */
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 4px; padding: 32px 30px;
}

/* ---------- Stats ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.stat { background: var(--paper); padding: 26px 24px; }
.stat .n { font-size: 2rem; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 0.8rem; color: var(--ink-dim); margin-top: 6px; }

/* ---------- Editorial list ---------- */
.ed-list { border-top: 1px solid var(--rule); }
.ed-item {
  display: grid; grid-template-columns: 52px 1fr; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--rule);
}
.ed-item .k { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-dim); padding-top: 4px; }
.ed-item p { font-size: 0.95rem; }

/* ---------- Quote ---------- */
.pull {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 26px; margin: 34px 0;
  font-size: 1.25rem; line-height: 1.5; color: var(--ink); letter-spacing: -0.015em;
}
.pull cite { display: block; font-size: 0.88rem; color: var(--ink-dim); font-style: normal; margin-top: 12px; }

/* ---------- Forms ---------- */
.form-row { margin-bottom: 20px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 7px; }
input, textarea, select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45, 63, 231, 0.13);
}
textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: 0.82rem; color: var(--ink-dim); margin-top: 12px; }

/* ---------- Callout ---------- */
.callout {
  border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  background: var(--surface); padding: 20px 24px;
  font-size: 0.94rem; color: var(--ink-soft); border-radius: 0 4px 4px 0;
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--paper); padding: 72px 0; }
.cta-band h2 { color: var(--paper); }
.cta-band p { color: #B9B9B2; max-width: var(--measure); }   /* 8.1 on ink */
.cta-band .btn-primary { background: var(--paper); color: var(--ink); }
.cta-band .btn-primary:hover { background: var(--accent); color: #fff; }
.cta-band .btn-ghost { border-color: #4A4A44; color: var(--paper); }
.cta-band .btn-ghost:hover { border-color: var(--paper); background: transparent; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: 56px 0 28px; background: var(--paper-alt); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer-col h4 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col p { font-size: 0.9rem; color: var(--ink-muted); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  border-top: 1px solid var(--rule); padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.83rem; color: var(--ink-dim);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .hero { padding: 72px 0 56px; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px 28px 16px;
  }
  .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--rule); }
  .site-header.open .nav-links { display: flex; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .verticals, .grid-2, .grid-3, .form-row.two { grid-template-columns: 1fr; }
  .vertical { border-right: 0; border-bottom: 1px solid var(--rule); }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .ed-item { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   INNER-PAGE COMPONENTS
   ...
   These class names come from the pages written before this rebuild —
   about, verticals, investors, leadership, contact and the two business
   plans. When style.css was replaced, the homepage was rewritten to the new
   system but those seven pages were not, so every one of them rendered
   unstyled. Nineteen orphaned classes, live, before anyone noticed.
   ...
   The fix is to implement them in Monsoon Ink rather than to rewrite seven
   pages of real content. Same names, new language: hairlines instead of
   shadows, squared corners instead of pills, ink instead of gradients.
   ===================================================================== */

/* ---------- Inner page hero ---------- */
.page-hero {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
  padding: 68px 0 56px;
}
.page-hero h1 { max-width: 20ch; margin-bottom: 18px; }
.page-hero p { max-width: var(--measure); font-size: 1.08rem; color: var(--ink-soft); }

/* ---------- Nav extras ---------- */
.nav-cta { display: flex; align-items: center; gap: 12px; }


/* ---------- Cards in a hairline grid ----------
   .grid already paints a 1px rule behind a 1px gap, so a bordered, rounded
   card inside it doubles every line. Cards sitting in a grid go flush. */
.grid > .card { border: 0; border-radius: 0; }

.card-icon {
  width: 38px; height: 38px; border-radius: 3px;
  background: var(--paper-alt); border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; margin-bottom: 16px;
}

/* ---------- Tags ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tag {
  font-size: 0.76rem; font-weight: 500;
  padding: 5px 11px; border-radius: 2px;
  background: var(--surface); color: var(--ink-muted);
  border: 1px solid var(--rule-strong);
}

/* ---------- Value / responsibility grids ---------- */
.value-grid, .resp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.value-item, .resp-item {
  background: var(--paper); padding: 20px 22px;
  font-size: 0.92rem; font-weight: 500; color: var(--ink);
}
.value-item .num {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; color: var(--ink-dim); margin-bottom: 8px;
}

/* ---------- CTA banner ----------
   The older pages call this .cta-banner; the homepage uses .cta-band. Same
   treatment, so the site reads as one thing. */
.cta-banner {
  background: var(--ink); color: var(--paper);
  padding: 52px 48px; border-radius: 4px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-banner h2 { color: var(--paper); margin-bottom: 8px; }
.cta-banner p { color: #B9B9B2; margin: 0; max-width: 46ch; }   /* 8.1 on ink */
.cta-banner .btn-row { margin-top: 0; }
.cta-banner .btn-primary { background: var(--paper); color: var(--ink); }
.cta-banner .btn-primary:hover { background: var(--accent); color: #fff; }
.cta-banner .btn-ghost { border-color: #4A4A44; color: var(--paper); background: transparent; }
.cta-banner .btn-ghost:hover { border-color: var(--paper); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 4px; padding: 34px 32px;
}

/* ---------- Contact list ---------- */
.info-list { display: flex; flex-direction: column; gap: 4px; }
.info-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.info-item:last-child { border-bottom: 0; }
.info-icon {
  width: 34px; height: 34px; border-radius: 3px; flex-shrink: 0;
  background: var(--paper-alt); border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.info-item h4 { font-size: 0.92rem; margin-bottom: 3px; }
.info-item p { font-size: 0.9rem; margin: 0; }

/* ---------- Leadership ---------- */
.leader-card {
  display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: start;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 4px; padding: 38px 36px;
}
.leader-avatar {
  width: 100%; aspect-ratio: 1; border-radius: 4px;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 600; letter-spacing: -0.03em;
}
.leader-role {
  color: var(--accent); font-weight: 500; font-size: 0.9rem;
  letter-spacing: 0.02em; margin-bottom: 18px;
}

/* ---------- Pull quote ---------- */
.quote-block {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px; margin: 26px 0;
  font-size: 1.15rem; line-height: 1.55; color: var(--ink);
  letter-spacing: -0.012em; font-style: normal;
}

@media (max-width: 720px) {
  .page-hero { padding: 48px 0 40px; }
  .cta-banner { flex-direction: column; align-items: flex-start; padding: 36px 26px; }
  .leader-card { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; }
  .leader-avatar { max-width: 140px; }
}