/* ==========================================================================
   Fairspine Digital: modern design layer
   Loaded after style.css. Delete the <link> to modern.css (and modern.js)
   in a page's <head>/<body> to see that page in the previous design.
   ========================================================================== */

/* ---------- fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ink: #060f1a;
  --navy: #0a1828;
  --navy-mid: #112238;
  --teal: #1eb882;
  --teal-mid: #0e9a6b;
  --teal-light: #d8f6ea;
  --mint: #7cf2c8;
  --offwhite: #f2f6f5;
  --white: #ffffff;
  --gray-100: #e7eeed;
  --gray-300: #c2cfd0;
  --gray-500: #66777d;
  --gray-700: #33444b;
  --text: #0a1828;

  --radius: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow-card: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(10,24,40,.05), 0 22px 44px -26px rgba(10,24,40,.35);
}

/* ---------- base type ---------- */
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  background: var(--white);
  font-feature-settings: 'ss01', 'kern';
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .logo, .section-title, .stat-item .num {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}
h3, h4 { font-weight: 600; }
::selection { background: var(--teal); color: #04150f; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

/* ---------- nav ---------- */
nav {
  background: rgba(6, 15, 26, .94);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
nav.is-scrolled { background: rgba(6, 15, 26, .9); box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
.nav-links a { font-size: .93rem; font-weight: 500; position: relative; padding: .3rem 0; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.logo { font-weight: 700; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: .95rem; letter-spacing: -0.005em;
  padding: .72rem 1.55rem; border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
}
.btn-primary {
  background: linear-gradient(180deg, #34dea5 0%, #1eb882 100%);
  color: #04150f;
  box-shadow: 0 10px 26px -10px rgba(30,184,130,.75), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #4aeab4 0%, #22c48b 100%); color: #04150f;
  transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(30,184,130,.85), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-dark {
  background: linear-gradient(180deg, #14283f 0%, #0a1828 100%);
  box-shadow: 0 10px 24px -12px rgba(10,24,40,.7), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-dark:hover { background: linear-gradient(180deg, #1a3350 0%, #0e2036 100%); transform: translateY(-2px); }
.btn-outline {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-outline:hover { background: rgba(30,184,130,.1); border-color: var(--teal); color: var(--mint); transform: translateY(-2px); }
.btn .arr { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- page hero (inner pages): 3D grid floor ---------- */
.page-hero {
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(30,184,130,.2) 0%, rgba(30,184,130,0) 60%),
    linear-gradient(180deg, #0d2238 0%, var(--navy) 55%, var(--ink) 100%);
  perspective: 800px;
}
.page-hero::before { background: radial-gradient(60% 50% at 50% 0%, rgba(124,242,200,.1) 0%, transparent 70%); }
.page-hero::after, .cta-section::after, .hero3d::after {
  content: ''; position: absolute; left: -25%; right: -25%; bottom: -2px; height: 62%;
  background-image:
    linear-gradient(rgba(30,184,130,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,184,130,.34) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(560px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 82%);
  mask-image: linear-gradient(to top, #000 0%, transparent 82%);
  opacity: .5; pointer-events: none; z-index: 0;
  animation: grid-flow 7s linear infinite;
}
@keyframes grid-flow { to { background-position: 0 64px, 64px 0; } }
.page-hero h1 { font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
.page-hero p { font-size: 1.12rem; color: rgba(255,255,255,.66); }
.page-hero .eyebrow {
  text-transform: none; letter-spacing: .01em; font-size: .88rem; font-weight: 600;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--mint);
  padding: .4rem 1rem .4rem .85rem; gap: .55rem; align-items: center;
}
.page-hero .eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 0 rgba(30,184,130,.6); animation: dot-pulse 2.4s ease-out infinite;
}
@keyframes dot-pulse { 70%, 100% { box-shadow: 0 0 0 9px rgba(30,184,130,0); } }

/* ---------- sections ---------- */
.section { padding: 6.5rem 2rem; }
.section-tag {
  background: none; border: 0; padding: 0; margin-bottom: 1.1rem; border-radius: 0;
  color: var(--teal-mid); text-transform: none; letter-spacing: .01em; font-size: .92rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .6rem;
}
.section-tag::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.section-title { font-size: clamp(2rem, 4.4vw, 3.15rem); font-weight: 650; line-height: 1.04; letter-spacing: -0.035em; max-width: 760px; }
.section-sub { font-size: 1.12rem; color: var(--gray-500); max-width: 600px; }

/* ---------- cards: depth + 3D ---------- */
.service-card, .pv-card, .job-card, .how-step {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
  border: 1px solid rgba(10,24,40,.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  position: relative;
}
.service-card { padding: 2.1rem; }
.service-card:hover, .pv-card:hover, .job-card:hover {
  border-color: rgba(30,184,130,.55);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 30px 60px -28px rgba(30,184,130,.45), 0 12px 24px -16px rgba(10,24,40,.3);
}
.how-step { background: linear-gradient(180deg, #f6faf9 0%, #eef5f3 100%); }
.service-card h3, .job-card h3 { font-size: 1.18rem; letter-spacing: -0.02em; }
.service-card p, .job-card p, .how-step p, .pv-card p { color: var(--gray-500); }
.sc-num { letter-spacing: .02em; text-transform: none; font-size: .82rem; color: var(--teal-mid); font-family: var(--font-display); font-weight: 600; }

.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(30,184,130,.2), rgba(30,184,130,0) 46%);
  transition: opacity .3s;
}
.tilt:hover::after { opacity: 1; }
.tilt > .sc-icon, .tilt > .icon, .tilt > h3, .tilt > h4 { transform: translateZ(34px); }
.tilt > p { transform: translateZ(14px); }

/* 3D entrance for cards */
.service-card.reveal, .pv-card.reveal, .how-step.reveal, .job-card.reveal {
  transform: perspective(1100px) translateY(38px) rotateX(16deg) scale(.97); transform-origin: 50% 100%;
}
.service-card.reveal.visible, .pv-card.reveal.visible, .how-step.reveal.visible, .job-card.reveal.visible {
  transform: perspective(1100px) translateY(0) rotateX(0) scale(1);
}

/* icons */
.mi-tile {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; color: var(--teal-mid); margin-bottom: 1.2rem !important;
  background: linear-gradient(145deg, rgba(30,184,130,.2), rgba(30,184,130,.05));
  border: 1px solid rgba(30,184,130,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 0 !important; line-height: 0;
}
.mi-tile .mi { width: 24px; height: 24px; }
.pv-card .icon.mi-tile { width: 42px; height: 42px; border-radius: 13px; margin-bottom: .8rem !important; }
.pv-card .icon.mi-tile .mi { width: 20px; height: 20px; }
[style*="background:var(--navy)"] .mi-tile, [style*="background:rgba(255,255,255,0.04)"] .mi-tile, .mi-tile.on-dark { color: var(--mint); }

/* ---------- stats band ---------- */
.stats-band { background: linear-gradient(180deg, #0c1d31 0%, var(--navy-mid) 100%) !important; position: relative; }
.stats-band .stat-item .num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; color: var(--mint); }
.stats-band .stat-item .label { text-transform: none; letter-spacing: .005em; font-size: .9rem; color: rgba(255,255,255,.55); }

/* ---------- cta panel ---------- */
.cta-section {
  position: relative; overflow: hidden; isolation: isolate;
  margin: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem) 5rem; border-radius: 34px;
  margin-top: clamp(3rem, 6vw, 5rem) !important;
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(30,184,130,.32) 0%, rgba(30,184,130,0) 60%),
    linear-gradient(160deg, #10304a 0%, var(--navy) 55%, var(--ink) 100%);
  padding: 6rem 2rem; color: #fff;
  box-shadow: 0 40px 80px -40px rgba(10,24,40,.7);
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -0.04em; max-width: 680px; line-height: 1.04; }
.cta-section p { color: rgba(255,255,255,.7); font-size: 1.1rem; }
.cta-section .btn-dark { background: #fff; color: var(--navy); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.cta-section .btn-dark:hover { background: #f0fff9; }
.cta-section::after { height: 55%; opacity: .4; }

/* ---------- footer ---------- */
footer { background: linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%); position: relative; }
footer::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,184,130,.55), transparent);
}
.footer-col h4 { letter-spacing: .02em; text-transform: none; font-size: .95rem; font-family: var(--font-display); }

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero3d {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(60% 70% at 72% 38%, rgba(30,184,130,.22) 0%, rgba(30,184,130,0) 65%),
    radial-gradient(110% 80% at 20% 0%, #12354f 0%, rgba(18,53,79,0) 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
}
.hero3d::after { height: 46%; opacity: .42; z-index: -1; }
.hero3d__inner {
  max-width: 1280px; margin: 0 auto; position: relative; z-index: 1;
  padding: clamp(3rem, 7vw, 5.5rem) 2rem clamp(3rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 1rem; align-items: center;
  min-height: min(86vh, 800px);
}
.hero3d__copy { max-width: 640px; }
.hero3d .eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.6rem;
  font-size: .9rem; font-weight: 600; color: var(--mint);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  padding: .42rem 1.05rem .42rem .85rem; border-radius: 999px;
}
.hero3d .eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: dot-pulse 2.4s ease-out infinite; }
.hero3d h1 {
  font-size: clamp(2.8rem, 5.6vw, 5rem); line-height: .98; letter-spacing: -0.05em; font-weight: 700;
  margin-bottom: 1.6rem; text-wrap: balance;
}
.hero3d h1 .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.hero3d h1 .ln > span { display: block; transform: translateY(105%); animation: ln-up 1.1s var(--ease) forwards; }
.hero3d h1 .ln:nth-child(2) > span { animation-delay: .14s; color: rgba(255,255,255,.64); }
@keyframes ln-up { to { transform: translateY(0); } }
.hero3d__lead { font-size: 1.2rem; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 33rem; margin-bottom: 2.2rem; opacity: 0; animation: fade-in .9s .45s var(--ease) forwards; }
.hero3d__cta { display: flex; flex-wrap: wrap; gap: .9rem; opacity: 0; animation: fade-in .9s .6s var(--ease) forwards; }
@keyframes fade-in { to { opacity: 1; } }
.hero3d__cta .btn { padding: .95rem 1.8rem; font-size: 1rem; }

.hero3d__stage { position: relative; height: clamp(420px, 56vw, 640px); perspective: 1100px; }
.hero3d__canvas { position: absolute; inset: -4% -8% -4% -8%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); }
.hero3d__fallback { position: absolute; inset: 0; margin: auto; width: 62%; opacity: 0; transition: opacity .6s; pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(30,184,130,.35)); }
.hero3d__stage.is-static .hero3d__fallback { opacity: .9; animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }

.hero3d__chip {
  position: absolute; display: flex; align-items: center; gap: .65rem; z-index: 2;
  padding: .55rem 1.05rem .55rem .6rem; border-radius: 999px; transform-style: preserve-3d;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .25s ease-out;
}
.hero3d__chip .ci { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #04150f; background: linear-gradient(180deg, #4aeab4, #1eb882); }
.hero3d__chip .ci svg { width: 17px; height: 17px; }
.hero3d__chip.c1 { left: 0; top: 12%; }
.hero3d__chip.c2 { left: 4%; bottom: 20%; }
.hero3d__chip.c3 { right: 2%; top: 22%; }
.hero3d__chip.c4 { right: 6%; bottom: 14%; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero3d__inner { grid-template-columns: 1fr; min-height: 0; padding-top: 3rem; gap: 0; }
  .hero3d__copy { max-width: 100%; }
  .hero3d__stage { height: min(112vw, 520px); margin-top: .5rem; }
  .hero3d__canvas { inset: -2% -4% 0 -4%; }
}
@media (max-width: 640px) {
  .hero3d__chip { display: none; }
  .hero3d h1 { font-size: clamp(2.6rem, 12.5vw, 3.6rem); }
  .hero3d__lead { font-size: 1.08rem; }
  .hero3d__cta .btn { width: 100%; justify-content: center; }
  .section { padding: 3.5rem 1.25rem !important; }
  .cta-section { margin: 0 .75rem 3rem; border-radius: 26px; padding: 3.5rem 1.25rem !important; }
  .stats-band .stat-item .num { font-size: 2rem; }
  .stats-band > div { grid-template-columns: repeat(2, 1fr) !important; gap: 1.6rem 1rem !important; }
  .stats-band .stat-item:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::after, .cta-section::after, .hero3d::after { animation: none; }
  .hero3d h1 .ln > span { animation: none; transform: none; }
  .hero3d__lead, .hero3d__cta { animation: none; opacity: 1; }
  .hero3d__stage.is-static .hero3d__fallback { animation: none; }
  .service-card.reveal, .pv-card.reveal, .how-step.reveal, .job-card.reveal { transform: none; }
}