/* =========================================================
   Infobyte UK — design system
   Direction: "engineering precision meets the City of London"
   Display: Space Grotesk · Body: IBM Plex Sans · Labels: IBM Plex Mono
   Palette: deep ink navy + cool paper + a single brass accent
   ========================================================= */

:root{
  --ink:      #0A1521;
  --ink-2:    #0F2031;
  --ink-3:    #173249;
  --hair-dk:  rgba(146,170,190,.18);

  --paper:    #F3F5F8;
  --paper-2:  #FFFFFF;
  --line:     #DCE2E9;

  --text:     #0C1A28;
  --slate:    #566576;
  --on-dark:  #C3D0DC;
  --on-dark-dim:#8499AB;

  --brass:    #C2A15A;
  --brass-hi: #D6B66E;
  --brass-dk: #9C7F3E;

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --r: 4px;
}

*,*::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;
  font-family:var(--body);
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- shared label / eyebrow ---------- */
.kicker{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass-dk);
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before{ content:"//"; color:var(--brass); font-weight:600; }
.section--dark .kicker{ color:var(--brass-hi); }
.section--dark .kicker::before{ color:var(--brass); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--brass); --fg:var(--ink);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:14px; letter-spacing:.04em;
  padding:.85em 1.4em; border:1px solid var(--bg); border-radius:var(--r);
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ background:var(--brass-hi); border-color:var(--brass-hi); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.section--dark .btn--ghost,
.hero .btn--ghost,
.ctaband .btn--ghost{ color:var(--on-dark); border-color:var(--hair-dk); }
.btn--ghost:hover{ background:transparent; transform:translateY(-2px); border-color:var(--brass); color:var(--brass-dk); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.ctaband .btn--ghost:hover{ color:var(--brass-hi); border-color:var(--brass); }
.btn .arr{ transition:transform .15s ease; }
.btn:hover .arr{ transform:translateX(3px); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(243,245,248,.82);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.site-header.scrolled{ border-bottom-color:var(--line); }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:70px; }
.brand{ display:inline-flex; align-items:baseline; gap:2px; font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.03em; color:var(--ink); }
.brand .uk{ font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.05em; color:var(--brass-dk); align-self:center; transform:translateY(-1px); }
.brand .dot{ width:7px; height:7px; background:var(--brass); border-radius:50%; align-self:center; margin-left:3px; }

.menu{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.menu a{ font-size:15px; color:var(--slate); position:relative; padding:4px 0; transition:color .15s ease; }
.menu a:hover{ color:var(--text); }
.menu a[aria-current="page"]{ color:var(--text); }
.menu a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--brass); }
.header-cta{ display:flex; align-items:center; gap:14px; }

.nav-toggle{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2); cursor:pointer; padding:0; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-open .nav-toggle span{ background:transparent; }
.nav-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }

/* ---------- sections ---------- */
.section{ padding-block:clamp(64px,9vw,120px); position:relative; }
.section--light{ background:var(--paper); }
.section--paper2{ background:var(--paper-2); }
.section--dark{ background:var(--ink); color:var(--on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }
.section-head{ max-width:680px; }
.section-head h2{ font-size:clamp(28px,4vw,42px); margin-top:14px; }
.section-head p{ margin-top:16px; color:var(--slate); font-size:18px; }
.section--dark .section-head p{ color:var(--on-dark); }

/* ---------- hero ---------- */
.hero{ background:var(--ink); color:var(--on-dark); position:relative; overflow:hidden; }
.hero-grid{ position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(var(--hair-dk) 1px, transparent 1px),
                   linear-gradient(90deg, var(--hair-dk) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 12%, #000 30%, transparent 75%);
          mask-image:radial-gradient(120% 90% at 78% 12%, #000 30%, transparent 75%);
}
.hero-glow{ position:absolute; z-index:0; top:-20%; right:-10%; width:60vw; height:60vw; max-width:760px; max-height:760px;
  background:radial-gradient(circle at center, rgba(194,161,90,.16), transparent 62%); pointer-events:none; }
.hero-inner{ position:relative; z-index:1; padding-block:clamp(72px,11vw,132px); display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero-title{ font-size:clamp(38px,6.2vw,72px); color:#fff; margin-top:22px; }
.hero-title .accent{ color:var(--brass-hi); }
.hero-sub{ margin-top:24px; max-width:46ch; color:var(--on-dark); font-size:clamp(17px,2.1vw,20px); }
.hero-actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }

.data-strip{ margin-top:46px; display:grid; grid-template-columns:repeat(3,auto); gap:34px; padding-top:26px; border-top:1px solid var(--hair-dk); }
.data-strip .num{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,38px); color:#fff; letter-spacing:-.03em; }
.data-strip .lab{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-dim); margin-top:6px; }

/* hero schematic card */
.schematic{ border:1px solid var(--hair-dk); border-radius:8px; background:linear-gradient(160deg, rgba(23,50,73,.55), rgba(10,21,33,.2)); padding:22px; }
.schematic-top{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:14px; }
.schematic-top .dotrow{ display:flex; gap:6px; }
.schematic-top .dotrow i{ width:8px; height:8px; border-radius:50%; background:var(--hair-dk); display:block; }
.schematic-top .dotrow i:first-child{ background:var(--brass); }
.schematic svg{ width:100%; height:auto; }

/* ---------- ticker / trust ---------- */
.trust{ background:var(--ink-2); color:var(--on-dark); border-top:1px solid var(--hair-dk); }
.trust .container{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px; padding-block:18px; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-dim); }
.trust b{ color:var(--brass-hi); font-weight:500; }
.trust .sep{ color:var(--hair-dk); }

/* ---------- cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.card{ background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:30px 26px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(10,21,33,.4); border-color:#cdd6df; }
.card .tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-dk); }
.card h3{ font-size:21px; margin-top:16px; }
.card p{ margin-top:12px; color:var(--slate); font-size:16px; }
.card .idx{ font-family:var(--mono); font-size:12px; color:var(--line); float:right; }

/* ---------- stats band ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.stat .num{ font-family:var(--display); font-weight:600; font-size:clamp(34px,5vw,52px); color:#fff; letter-spacing:-.03em; line-height:1; }
.stat .num .accent{ color:var(--brass-hi); }
.stat .lab{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-dim); margin-top:12px; }

/* ---------- capabilities / feature rows ---------- */
.feature-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:48px; }
.panel{ border:1px solid var(--line); border-radius:8px; background:var(--paper-2); padding:32px; }
.panel h3{ font-size:22px; }
.panel p{ margin-top:12px; color:var(--slate); }
.panel .tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-dk); }

/* ---------- quotes ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.quote{ background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:28px; display:flex; flex-direction:column; }
.section--dark .quote{ background:var(--ink-2); border-color:var(--hair-dk); }
.quote .stars{ color:var(--brass); letter-spacing:2px; font-size:14px; }
.quote blockquote{ margin:16px 0 0; font-size:17px; color:var(--text); }
.section--dark .quote blockquote{ color:#fff; }
.quote .who{ margin-top:auto; padding-top:20px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); }
.section--dark .quote .who{ color:var(--on-dark-dim); }
.quote .who b{ color:var(--brass-dk); font-weight:600; }
.section--dark .quote .who b{ color:var(--brass-hi); }

/* ---------- cta band ---------- */
.ctaband{ background:var(--ink); color:#fff; border-radius:12px; padding:clamp(36px,6vw,64px); position:relative; overflow:hidden; }
.ctaband .hero-grid{ -webkit-mask-image:radial-gradient(120% 120% at 90% 10%, #000 20%, transparent 70%); mask-image:radial-gradient(120% 120% at 90% 10%, #000 20%, transparent 70%); }
.ctaband-inner{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.ctaband h2{ font-size:clamp(26px,4vw,40px); max-width:18ch; }
.ctaband p{ color:var(--on-dark); margin-top:12px; max-width:42ch; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px; align-items:start; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
.field label .req{ color:var(--brass-dk); }
.field input,.field textarea{ width:100%; font-family:var(--body); font-size:16px; color:var(--text); background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(194,161,90,.18); }
.form-note{ font-size:13.5px; color:var(--slate); margin-top:10px; }
.info-block{ border:1px solid var(--line); border-radius:8px; background:var(--paper-2); padding:30px; }
.info-block + .info-block{ margin-top:20px; }
.info-block .tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-dk); }
.info-block h3{ font-size:18px; margin-top:10px; }
.info-block p{ margin-top:6px; color:var(--slate); }
.info-block a{ color:var(--text); border-bottom:1px solid var(--line); }
.info-block a:hover{ border-color:var(--brass); color:var(--brass-dk); }

/* ---------- store placeholder ---------- */
.placeholder{ text-align:center; max-width:560px; margin-inline:auto; }
.placeholder .badge{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-dk); border:1px solid var(--line); border-radius:99px; padding:6px 14px; background:var(--paper-2); }
.placeholder h1{ font-size:clamp(30px,5vw,46px); margin-top:22px; }
.placeholder p{ margin-top:16px; color:var(--slate); font-size:18px; }
.placeholder .hero-actions{ justify-content:center; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:var(--on-dark); padding-block:64px 30px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot-brand .brand{ color:#fff; font-size:24px; }
.foot-brand p{ margin-top:16px; color:var(--on-dark-dim); max-width:34ch; font-size:15px; }
.foot-col h4{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-dim); margin:0 0 16px; font-weight:500; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-col a{ color:var(--on-dark); font-size:15px; }
.foot-col a:hover{ color:var(--brass-hi); }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-top:48px; padding-top:22px; border-top:1px solid var(--hair-dk); font-size:13px; color:var(--on-dark-dim); }
.foot-bottom .mono{ font-family:var(--mono); letter-spacing:.04em; }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; gap:40px; }
  .schematic{ order:-1; }
  .grid-3,.quotes{ grid-template-columns:1fr 1fr; }
  .feature-row{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; gap:34px 24px; }
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  .menu, .header-cta .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .site-header.nav-open .menu{
    display:flex; position:absolute; left:0; right:0; top:70px;
    flex-direction:column; align-items:flex-start; gap:4px;
    background:var(--paper-2); border-bottom:1px solid var(--line);
    padding:14px var(--pad) 22px;
  }
  .site-header.nav-open .menu a{ padding:10px 0; font-size:17px; width:100%; }
  .grid-3,.quotes,.stats{ grid-template-columns:1fr; }
  .data-strip{ grid-template-columns:1fr 1fr; gap:24px; }
  .foot-top{ grid-template-columns:1fr; }
}