:root{
    --bg:#0B1013;
    --bg-2:#131A1F;
    --bg-3:#1B242A;
    --ink:#E9EDEF;
    --muted:rgba(233,237,239,0.6);
    --muted-2:rgba(233,237,239,0.4);
    --teal:#4FA6A0;
    --teal-dim:rgba(79,166,160,0.15);
    --copper:#B98B3E;
    --line:rgba(233,237,239,0.10);
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
    html{ scroll-behavior:auto; }
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 6vw; }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--teal);
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    margin-bottom:1.2rem;
  }
  .eyebrow::before{ content:""; width:14px; height:1px; background:var(--teal); display:inline-block; }

  section{ position:relative; }

  /* -------- reveal -------- */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.8s ease, transform 0.8s ease; }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  /* -------- NAV -------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding:1.1rem 6vw;
    display:flex; align-items:center; justify-content:space-between;
    backdrop-filter: blur(10px);
    background:rgba(11,16,19,0.55);
    border-bottom:1px solid var(--line);
  }
  .logo{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:0.02em; }
  .logo span{ color:var(--teal); }
  nav{ display:flex; gap:2.1rem; align-items:center; }
  nav a{ font-size:0.85rem; color:var(--muted); transition:color 0.25s ease; }
  nav a:hover{ color:var(--ink); }
  .btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.76rem;
    letter-spacing:0.05em;
    padding:0.65rem 1.3rem;
    border:1px solid var(--teal);
    color:var(--teal);
    border-radius:2px;
    transition: background 0.25s ease, color 0.25s ease;
    white-space:nowrap;
  }
  .btn:hover{ background:var(--teal); color:var(--bg); }
  .nav-links{ display:flex; }
  @media (max-width:780px){ .nav-links{ display:none; } }

  /* -------- HERO -------- */
  .hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:6rem;
    background:
      radial-gradient(70% 60% at 82% 20%, rgba(79,166,160,0.10) 0%, transparent 60%),
      radial-gradient(50% 40% at 10% 90%, rgba(185,139,62,0.08) 0%, transparent 60%),
      var(--bg);
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap:3rem;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(2.6rem, 5.6vw, 4.4rem);
    line-height:1.04;
  }
  .hero h1 em{ font-style:normal; color:var(--teal); }
  .hero p{
    margin-top:1.4rem;
    font-size:1.02rem;
    color:var(--muted);
    max-width:34rem;
    line-height:1.7;
    font-weight:300;
  }
  .hero-cta{ margin-top:2.2rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
  .btn-lg{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.82rem;
    letter-spacing:0.05em;
    padding:0.95rem 1.7rem;
    background:var(--teal);
    color:var(--bg);
    border-radius:2px;
    transition: opacity 0.25s ease;
  }
  .btn-lg:hover{ opacity:0.85; }
  .link-ghost{ font-size:0.85rem; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:0.15rem; }

  /* hero ripple visual */
  .ripple-stage{ position:relative; height:min(56vh,480px); display:flex; align-items:center; justify-content:center; }
  .ripple-stage svg{ width:100%; height:100%; }
  .ripple-ring{ fill:none; stroke:var(--teal); stroke-width:1; opacity:0; animation: ripple 4.5s ease-out infinite; }
  .ripple-ring.r2{ animation-delay:1.1s; }
  .ripple-ring.r3{ animation-delay:2.2s; }
  .ripple-ring.r4{ animation-delay:3.3s; }
  @keyframes ripple{
    0%{ r:6; opacity:0.9; stroke-width:2; }
    100%{ r:150; opacity:0; stroke-width:0.4; }
  }
  .ripple-dot{ fill:var(--teal); }

  /* -------- STAT STRIP -------- */
  .stats{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--bg-2);
  }
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
  }
  .stat{
    padding:2.4rem 1.5rem;
    border-left:1px solid var(--line);
    text-align:left;
  }
  .stat:first-child{ border-left:none; }
  .stat .num{ font-family:'Space Grotesk', sans-serif; font-size:2.2rem; font-weight:700; color:var(--ink); }
  .stat .num span{ color:var(--teal); }
  .stat .lbl{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); margin-top:0.5rem; display:block; }
  @media (max-width:780px){
    .stats-grid{ grid-template-columns:repeat(2,1fr); }
    .stat{ border-left:none; border-top:1px solid var(--line); }
    .stat:nth-child(odd){ border-right:1px solid var(--line); }
  }

  /* -------- SECTION HEAD (generic) -------- */
  .section{ padding:7.5rem 0; }
  .section-head{ max-width:36rem; margin-bottom:4rem; }
  .section-head h2{ font-size:clamp(2rem,4.4vw,2.9rem); }
  .section-head p{ margin-top:1rem; color:var(--muted); line-height:1.7; }

  /* -------- HOW IT WORKS / DIAGRAM -------- */
  .how{ background:var(--bg-2); }
  .how-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:4rem; align-items:center; }
  .how-copy p{ color:var(--muted); line-height:1.75; margin-top:1rem; }
  .how-steps{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1.1rem; }
  .how-step{ display:flex; gap:1rem; align-items:baseline; }
  .how-step .n{ font-family:'IBM Plex Mono', monospace; color:var(--teal); font-size:0.85rem; }
  .how-step .t{ font-family:'Space Grotesk', sans-serif; font-size:1rem; font-weight:500; }

  .diagram{ position:relative; }
  .diagram svg{ width:100%; height:auto; }
  .pore{ fill:var(--muted-2); opacity:0.35; transition: fill 0.6s ease, opacity 0.6s ease; }
  .diagram.is-visible .pore{ fill:var(--teal); opacity:0.85; transition-delay: var(--pd,0s); }
  .drop-path{ stroke:var(--copper); stroke-width:2; fill:none; stroke-dasharray:120; stroke-dashoffset:120; transition: stroke-dashoffset 1.2s cubic-bezier(0.65,0,0.35,1); }
  .diagram.is-visible .drop-path{ stroke-dashoffset:0; }
  .surface-line{ stroke:var(--ink); stroke-width:1.4; opacity:0.5; }
  .tile-grid line{ stroke:rgba(233,237,239,0.14); stroke-width:1; }
  .dg-label{ font-family:'IBM Plex Mono', monospace; font-size:9px; fill:var(--muted); letter-spacing:0.06em; }

  /* -------- APPLICATIONS -------- */
  .apps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
  .app-card{
    padding:2rem 1.6rem;
    border:1px solid var(--line);
    border-radius:3px;
    background:linear-gradient(160deg, var(--bg-2) 0%, var(--bg) 100%);
    transition: border-color 0.3s ease, transform 0.3s ease;
  }
  .app-card:hover{ border-color:rgba(79,166,160,0.4); transform:translateY(-4px); }
  .app-card .ic{ width:34px; height:34px; color:var(--teal); margin-bottom:1.2rem; }
  .app-card h3{ font-size:1.05rem; margin-bottom:0.6rem; }
  .app-card p{ font-size:0.86rem; color:var(--muted); line-height:1.6; }
  @media (max-width:900px){ .apps-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .apps-grid{ grid-template-columns:1fr; } }

  /* -------- WHY US -------- */
  .why{ background:var(--bg-2); }
  .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
  .why-item{ padding:2.6rem 2.2rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .why-item .n{ font-family:'IBM Plex Mono', monospace; color:var(--copper); font-size:0.78rem; letter-spacing:0.1em; }
  .why-item h3{ margin-top:0.9rem; font-size:1.2rem; }
  .why-item p{ margin-top:0.7rem; font-size:0.9rem; color:var(--muted); line-height:1.65; }
  @media (max-width:780px){ .why-grid{ grid-template-columns:1fr; } }

  /* -------- PROCESS -------- */
  .process-list{ display:flex; flex-direction:column; }
  .process-row{
    display:grid; grid-template-columns:80px 1fr;
    gap:2rem;
    padding:2.2rem 0;
    border-top:1px solid var(--line);
    align-items:baseline;
  }
  .process-list .process-row:last-child{ border-bottom:1px solid var(--line); }
  .process-row .idx{ font-family:'IBM Plex Mono', monospace; color:var(--muted-2); font-size:0.85rem; }
  .process-row h3{ font-size:1.25rem; margin-bottom:0.5rem; }
  .process-row p{ color:var(--muted); font-size:0.92rem; max-width:38rem; line-height:1.6; }

  /* -------- SECTORS -------- */
  .sectors{ background:var(--bg-2); }
  .sector-chips{ display:flex; flex-wrap:wrap; gap:0.8rem; }
  .chip{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.03em;
    padding:0.75rem 1.3rem;
    border:1px solid var(--line);
    border-radius:20px;
    color:var(--muted);
  }

  /* -------- CONTACT -------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
  .contact-info p{ color:var(--muted); line-height:1.7; margin-top:1rem; max-width:26rem; }
  .contact-detail{ margin-top:2.2rem; display:flex; flex-direction:column; gap:0.9rem; }
  .contact-detail div{ display:flex; gap:0.8rem; font-size:0.92rem; }
  .contact-detail .k{ color:var(--muted-2); font-family:'IBM Plex Mono', monospace; font-size:0.72rem; min-width:5.5rem; padding-top:0.15rem; }

  form{ display:flex; flex-direction:column; gap:1.1rem; }
  .field{ display:flex; flex-direction:column; gap:0.5rem; }
  .field label{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); }
  .field input, .field select, .field textarea{
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:2px;
    padding:0.85rem 1rem;
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:0.92rem;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); }
  .field textarea{ resize:vertical; min-height:90px; }
  .form-note{ font-size:0.76rem; color:var(--muted-2); margin-top:0.4rem; }
  .submit-btn{
    align-self:flex-start;
    margin-top:0.4rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.82rem;
    letter-spacing:0.05em;
    padding:0.95rem 1.8rem;
    background:var(--teal);
    color:var(--bg);
    border:none;
    border-radius:2px;
    cursor:pointer;
    transition:opacity 0.25s ease;
  }
  .submit-btn:hover{ opacity:0.85; }

  footer{
    border-top:1px solid var(--line);
    padding:2.4rem 0 2.6rem;
  }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
  .foot-row .logo{ font-size:0.95rem; }
  footer p{ font-size:0.78rem; color:var(--muted-2); }
  .foot-links{ display:flex; gap:1.4rem; }
  .foot-links a{ font-size:0.78rem; color:var(--muted-2); }
  .foot-links a:hover{ color:var(--ink); }

  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; }
    .how-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; gap:2.6rem; }
    .stats-grid{ }
  }

  /* -------- INNER PAGE HERO -------- */
  .page-hero{
    padding:9.5rem 0 4.5rem;
    background:
      radial-gradient(60% 50% at 85% 0%, rgba(79,166,160,0.10) 0%, transparent 60%),
      var(--bg);
    border-bottom:1px solid var(--line);
  }
  .breadcrumb{ font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--muted-2); margin-bottom:1.6rem; }
  .breadcrumb a{ color:var(--muted); }
  .breadcrumb a:hover{ color:var(--teal); }
  .page-hero h1{ font-size:clamp(2.2rem,5vw,3.6rem); max-width:32rem; line-height:1.08; }
  .page-hero .lede{ margin-top:1.2rem; max-width:38rem; color:var(--muted); font-size:1.02rem; line-height:1.75; }

  /* -------- DETAILED PROCESS (how it works page) -------- */
  .steps-detailed{ display:flex; flex-direction:column; }
  .step-detailed{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:2.4rem;
    padding:2.8rem 0;
    border-top:1px solid var(--line);
    align-items:flex-start;
  }
  .steps-detailed .step-detailed:last-child{ border-bottom:1px solid var(--line); }
  .step-detailed .idx{ font-family:'Space Grotesk', sans-serif; font-size:2.4rem; font-weight:700; color:var(--bg-3); -webkit-text-stroke:1px var(--teal); }
  .step-detailed h3{ font-size:1.3rem; margin-bottom:0.7rem; }
  .step-detailed p{ color:var(--muted); line-height:1.75; max-width:42rem; font-size:0.95rem; }

  /* -------- COMPARISON TABLE -------- */
  .compare{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
  }
  .compare > div{ padding:1.2rem 1.4rem; font-size:0.88rem; border-bottom:1px solid var(--line); display:flex; align-items:center; }
  .compare > div:nth-child(3n+1){ color:var(--muted); font-family:'IBM Plex Mono', monospace; font-size:0.78rem; }
  .compare-head{ font-family:'Space Grotesk', sans-serif !important; font-weight:600; font-size:0.95rem !important; color:var(--ink) !important; }
  .compare-head.teal{ color:var(--teal) !important; }
  .cell-yes{ color:var(--teal); }
  .cell-no{ color:var(--muted-2); }
  @media (max-width:640px){
    .compare{ grid-template-columns:1fr; }
    .compare > div{ border-bottom:none; padding:0.7rem 1.2rem; }
    .compare > div:nth-child(3n+1){ border-top:1px solid var(--line); padding-top:1.2rem; color:var(--ink); font-family:'Space Grotesk', sans-serif; font-weight:600; }
  }

  /* -------- COF BAR CHART -------- */
  .cof{ display:flex; flex-direction:column; gap:1.8rem; max-width:34rem; }
  .cof-row .lbl-row{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--muted); margin-bottom:0.5rem; }
  .cof-row .bar-track{ height:10px; background:var(--bg-3); border-radius:6px; overflow:hidden; }
  .cof-row .bar-fill{ height:100%; border-radius:6px; width:0%; transition:width 1.2s cubic-bezier(0.65,0,0.35,1); }
  .cof-row.before .bar-fill{ background:var(--copper); }
  .cof-row.after .bar-fill{ background:var(--teal); }
  .cof.is-visible .cof-row.before .bar-fill{ width:32%; }
  .cof.is-visible .cof-row.after .bar-fill{ width:68%; }
  .cof-note{ font-size:0.78rem; color:var(--muted-2); margin-top:0.4rem; }