/* CSS Reset (modern)
   Inspired by Andy Bell & Josh Comeau */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{height:100%}
body{line-height:1.5;-webkit-font-smoothing:antialiased;}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
#root,#__next{isolation:isolate}

:root{
  --bg: #0b0d12;
  --surface: #0f1218;
  --surface-2: #131723;
  --text: #e8edf7;
  --muted: #9aa6bf;
  --brand: #66b2ff;
  --brand-2: #4dd0e1;
  --accent: #7ee081;
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1160px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #ffffff;
    --surface: #f8fafc;
    --surface-2: #f2f5fa;
    --text: #0b1220;
    --muted: #5a6b87;
    --brand: #0066ff;
    --brand-2: #00bcd4;
    --accent: #1a7f37;
    --danger: #b00020;
  }
}

html{scroll-behavior:smooth; background: var(--bg)}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  position: relative;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(102,178,255,.12), transparent 50%),
    radial-gradient(1400px 900px at 90% -20%, rgba(77,208,225,.12), transparent 50%),
    var(--bg);
}

/* Fixed full-viewport gradient behind content (no tiling) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
      hsla(220, 90%, 60%, 0.14) 0%,
      hsla(270, 80%, 60%, 0.12) 50%,
      hsla(160, 60%, 45%, 0.10) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.container{width:min(100% - 2rem, var(--container));margin-inline:auto}
.section{padding: clamp(56px, 8vw, 120px) 0; background-color: color-mix(in srgb, var(--surface) 50%, transparent)}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0)) color-mix(in srgb, var(--surface) 45%, transparent)}
/* Keep hero clear so the background image shines through */
.hero.section{background: transparent}
.grid{display:grid;gap:clamp(20px,2.5vw,32px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 960px){.grid-2,.grid-3{grid-template-columns:1fr}}
@media (max-width: 960px){.grid-4{grid-template-columns:1fr}}

/* Custom widths for the Problem section grid */
#problem-grid{grid-template-columns: 1fr calc(1fr + 175px)}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:var(--text);color:var(--bg);padding:.5rem 1rem;border-radius:999px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 72%, transparent);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid rgb(255 255 255 / .06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-weight:700}
.brand img{height:28px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.nav-links{display:flex;align-items:center;gap:1rem;list-style:none}
.nav-links a{color:var(--text);text-decoration:none;opacity:.9}
.nav-links a:hover{opacity:1}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text)}

@media (max-width: 860px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed;inset:64px 0 auto;display:grid;gap:0;background:var(--surface);padding:.5rem;border-bottom:1px solid rgb(255 255 255 / .06);transform:translateY(-110%);transition:transform .35s ease}
  .nav-links[data-open="true"]{transform:translateY(0)}
  .nav-links li{padding:.25rem .5rem}
}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:0 1rem;border-radius:999px;border:1px solid rgb(255 255 255 / .16);color:var(--text);text-decoration:none;transition:transform .2s ease, background .2s ease; height:50px; min-width:125px; text-align:center; opacity:1; line-height:50px}
.cta:hover{transform:translateY(-1px)}
.cta.primary{
  background: linear-gradient(135deg, #1185ff 0%, #00c8ff 50%, #1fd0b0 100%);
  color:white;border:0;
  box-shadow:0 12px 26px rgba(17,133,255,.25), 0 8px 20px rgba(31,208,176,.18);
  opacity:1
}
.cta.primary:hover{filter:brightness(1.06)}
.cta.primary.large{padding:0 1.25rem;font-weight:700}
.cta.ghost{background:transparent}

.headline{font-size:clamp(2rem, 4.8vw, 4rem);line-height:1.05;letter-spacing:-.02em;font-weight:800;transition:text-shadow .25s ease}
.lede{margin-top:1rem;font-size:clamp(1rem, 1.5vw, 1.25rem);color:var(--muted);max-width:60ch}
/* Make ProblemDiv lede paragraphs 75px wider than default */
#ProblemDiv .lede{max-width: calc(60ch + 75px)}
/* Ensure hero lead text is white for contrast over imagery */
.hero .lede{color:#ffffff}
.hero .headline{color:#ffffff}
.hero .badge{color:#ffffff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
.hero .cta.ghost{color:#ffffff;border-color:rgba(255,255,255,.5)}

/* Headline glow on section rollover (hover/focus) */
@media (hover: hover){
  .section:hover .headline{ 
    text-shadow:
      0 0 10px color-mix(in srgb, currentColor 55%, transparent),
      0 0 22px color-mix(in srgb, var(--brand) 35%, transparent);
  }
}
.section:focus-within .headline{
  text-shadow:
    0 0 10px color-mix(in srgb, currentColor 55%, transparent),
    0 0 22px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* Hero */
.hero{position:relative;min-height:min(92vh, 900px);display:grid;align-items:end}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.media-overlay{position:absolute;inset:0;background:none !important}
.hero-logo-overlay{
  position:absolute;inset:auto 0 auto 0;top:4vh;margin-inline:auto;z-index:2;
  width:min(33vw, 520px);height:auto;filter:drop-shadow(0 14px 40px rgba(0,0,0,.45));
}
.hero-content{position:relative;z-index:2;padding-top:18vh;padding-bottom:8vh}
.hero-ctas{display:flex;gap:.75rem;margin-top:1.25rem}
.hero-ctas .cta{white-space:nowrap}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.badge{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:999px;background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .16);font-size:.875rem;color:var(--text)}

/* Cards */
.card{background:linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .03));border:1px solid rgb(255 255 255 / .08);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.card-media{aspect-ratio:16/10;object-fit:cover}
.card-body{padding:1rem 1rem 1.2rem}
.card h3{font-size:1.25rem;margin-bottom:.5rem}
.bullets{margin-top:.5rem;display:grid;gap:.35rem;color:var(--muted);padding-left:1.1rem}

/* Transparent round image card (icon-style) */
.card.transparent{background: transparent; border: 0; box-shadow: none}
.card.round-media{text-align:center}
.card.round-media .card-media{
  width:157.5px;height:157.5px;border-radius:50%;object-fit:cover;margin:0 auto;
  border:2px solid rgba(255,255,255,0.95);
  box-shadow:none;transition:box-shadow .25s ease, filter .25s ease
}
.card.round-media:hover .card-media{
  box-shadow:
    0 0 10px color-mix(in srgb, currentColor 55%, transparent),
    0 0 22px color-mix(in srgb, var(--brand) 35%, transparent)
}
.card.round-media .card-body{padding:.5rem 0 35px}

/* 3D flip container and faces */
.card.round-media{perspective:1200px}
.card.round-media .flip-3d{position:relative;width:157.5px;height:200px;margin:0 auto;transform-style:preserve-3d;transition:transform 1s ease}
.card.round-media:hover .flip-3d{transform:rotateY(180deg)}
.card.round-media .flip-face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden}
.card.round-media .flip-front{z-index:2}
.card.round-media .flip-back{transform:rotateY(180deg)}
.card.round-media .front-wrap{position:relative;display:grid;gap:.35rem;justify-items:center;margin-top:35px;transform-style:preserve-3d}
.card.round-media .front-wrap .card-media{transform:translateZ(30px)}
.card.round-media .round-label{font-weight:700;color:var(--text)}
.card.round-media .flip-front .round-label{display:block}
.card.round-media .front-wrap .round-label{transform:translateZ(15px); padding-top:10px}
.card.round-media:hover .round-label{
  text-shadow:
    0 0 10px color-mix(in srgb, currentColor 55%, transparent),
    0 0 22px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* Spinning border ring atop image, opposite spin */
.card.round-media .ring{position:absolute;top:-6px;left:50%;transform:translate(-50%,0) translateZ(40px);width:calc(157.5px + 12px);height:calc(157.5px + 12px);border:2px solid rgba(255,255,255,0.95);border-radius:50%;z-index:3;pointer-events:none}
.card.round-media:hover .ring{animation:ring-spin 1s linear;box-shadow:0 0 18px rgba(17,133,255,.8)}
@keyframes ring-spin{from{transform:translate(-50%,0) translateZ(40px) rotateZ(0deg)} to{transform:translate(-50%,0) translateZ(40px) rotateZ(-360deg)}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:1rem}
.step{background:linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));border:1px solid rgb(255 255 255 / .08);border-radius:var(--radius-sm);padding:1rem;position:relative}
.step-num{position:absolute;top:.8rem;right:.8rem;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .14);font-weight:700}
@media (max-width: 960px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.steps{grid-template-columns:1fr}}

/* Chips & media */
.chip-list{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.4rem .7rem;border-radius:999px;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .12);font-size:.9rem}
.chip{display:inline-flex;align-items:center;line-height:1}
.feature-media{margin:0}
.feature-media img{border-radius:var(--radius);box-shadow:var(--shadow)}

/* Quality */
.quality-art{display:grid;place-items:center}
.quality-art img{max-width:520px;width:100%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}

/* CTA band */
.cta-band{background:radial-gradient(900px 600px at 10% -10%, rgba(102,178,255,.16), transparent 40%),radial-gradient(900px 600px at 100% 0%, rgba(77,208,225,.14), transparent 40%), color-mix(in srgb, var(--surface-2) 45%, transparent);border-block:1px solid rgb(255 255 255 / .08)}
.cta-band-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
@media (max-width: 800px){.cta-band-inner{flex-direction:column;text-align:center}}

/* Contact */
.contact-list{display:grid;gap:.6rem;margin-top:.75rem}
.contact-list a{color:var(--brand)}
.contact-form{background:transparent;border:0;border-radius:var(--radius);padding:1rem;box-shadow:none}
.form-row{display:grid;gap:.4rem;margin-bottom:.8rem}
.form-row.grid-2{grid-template-columns:1fr 1fr;gap:.8rem}
.form-row label{font-weight:600}
.form-row input,.form-row textarea{background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .14);padding:.65rem .75rem;border-radius:10px;color:var(--text)}
.form-row input:focus,.form-row textarea:focus{outline:2px solid color-mix(in srgb, var(--brand) 70%, white 0%);outline-offset:2px}
.form-actions{display:flex;align-items:center;gap:.8rem;margin-top:.4rem}
.form-note{font-size:.85rem;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid rgb(255 255 255 / .08);background:color-mix(in srgb, var(--bg) 85%, transparent)}
.footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem 0}
.footer-brand{display:flex;align-items:center;gap:.6rem}
.footer-brand img{height:24px;width:auto}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap;list-style:none}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}
.legal{color:var(--muted)}
@media (max-width: 720px){.footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* Reveal on scroll */
.reveal{view-timeline-name: --section; animation-timeline: --section; animation-name: reveal; animation-duration:1ms; animation-range: entry 25% cover 30%; animation-fill-mode:both}
@keyframes reveal{from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none}}

/* Parallax */
.parallax{transform:translateZ(0)}

/* Zoom parallax optimization */
[data-zoom-parallax]{will-change: transform; transform-origin: center center}

/* Match Solutions section typography to Hero text */
@media (prefers-color-scheme: dark){
  #solutions .headline{color:#ffffff}
  #solutions .lede{color:#ffffff}
}

/* Match How It Works typography to Hero text (dark mode) */
@media (prefers-color-scheme: dark){
  #how-it-works .headline{color:#ffffff}
}

/* Match Industries section typography to Hero text (dark mode) */
@media (prefers-color-scheme: dark){
  #industries .headline{color:#ffffff}
}

/* Match Orgs/Zero-Cost section typography to Hero text (dark mode) */
@media (prefers-color-scheme: dark){
  [aria-labelledby="orgs-title"] .headline{color:#ffffff}
}

/* Match Quality section typography to Hero text (dark mode) */
@media (prefers-color-scheme: dark){
  #quality .headline{color:#ffffff}
}

/* Scroll to Top button */
.scroll-top{
  position: fixed; right: 20px; bottom: 20px; z-index: 1000;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #ffffff; color: #0b0d12; font-weight: 900;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  opacity: .7; /* 30% transparent */
  transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
  visibility: hidden; pointer-events: none; transform: translateY(12px);
}
.scroll-top:hover{opacity: 1}
.scroll-top[data-visible="true"]{visibility: visible; pointer-events: auto; transform: translateY(0)}

/* Heavier arrow styling for SVG */
.scroll-top svg{stroke: currentColor; stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round}