/* QuantaTensor landing page — base styles
   Font pairing: IBM Plex Sans (UI/body) + IBM Plex Mono (data/code), loaded via Google Fonts in index.html */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

    :root{
      --bg:#161616;
      --surface:#1c1c1e;
      --surface-2:#212123;
      --border:rgba(244,244,244,0.12);
      --border-strong:rgba(244,244,244,0.22);
      --text:#f4f4f4;
      --text-2:rgba(244,244,244,0.72);
      --text-3:rgba(244,244,244,0.48);
      --blue60:#0043ce;
      --blue50:#0f62fe;
      --blue70:#002d9c;
      --cyan40:#1192e8;
      --cyan30:#08bdba;
    }
    *{box-sizing:border-box;}
    body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans', system-ui, sans-serif;}
    a{color:var(--cyan40);text-decoration:none;}
    a:hover{color:var(--cyan30);}
    .mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
    .page{position:relative;width:100%;background:var(--bg);overflow:hidden;}
    .grid-bg{
      position:absolute;inset:0;pointer-events:none;
      background-image:
        linear-gradient(to right, rgba(244,244,244,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(244,244,244,0.035) 1px, transparent 1px);
      background-size:64px 64px;
      mask-image:linear-gradient(to bottom, black, black 55%, transparent 100%);
    }
    .wrap{max-width:1200px;margin:0 auto;padding:0 56px;position:relative;z-index:1;}
    .kicker{
      font-family:'IBM Plex Mono', monospace;font-size:12px;font-weight:500;letter-spacing:0.14em;
      color:var(--cyan40);text-transform:uppercase;margin:0 0 16px 0;display:flex;align-items:center;gap:10px;
    }
    .kicker::before{content:"";width:24px;height:1px;background:var(--cyan40);display:inline-block;}
    h1,h2,h3,h4{font-family:'IBM Plex Sans', sans-serif;margin:0;font-weight:600;letter-spacing:-0.01em;}
    p{margin:0;line-height:1.6;}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      height:48px;padding:0 24px;font-family:'IBM Plex Sans', sans-serif;font-size:15px;font-weight:500;
      border:1px solid transparent;cursor:pointer;white-space:nowrap;
    }
    .btn-primary{background:var(--blue60);color:#ffffff;}
    .btn-primary:hover{background:var(--blue70);}
    .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border-strong);}
    .btn-ghost:hover{border-color:var(--cyan40);color:var(--cyan40);}
    section{position:relative;}
    .section-pad{padding:112px 0;}
    .divider{height:1px;background:var(--border);width:100%;}
    .eyebrow-title{font-size:34px;line-height:1.25;margin-bottom:14px;}
    .section-sub{font-size:17px;color:var(--text-2);max-width:640px;line-height:1.6;}
    .card{background:var(--surface);border:1px solid var(--border);padding:40px;}
    .feat-list{list-style:none;margin:24px 0 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
    .feat-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-2);}
    .icon-chip{
      width:52px;height:52px;display:flex;align-items:center;justify-content:center;
      background:rgba(17,146,232,0.1);border:1px solid rgba(17,146,232,0.3);margin-bottom:24px;
    }

/* ================= Mobile navigation ================= */
.nav-links{ display:flex; align-items:center; gap:36px; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;
  height:40px;
  flex:none;
  background:transparent;
  border:1px solid var(--border-strong);
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:var(--text);
  transition:transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ================= Responsive breakpoints ================= */
@media (max-width: 1080px) and (min-width: 881px){
  .grid-3{ grid-template-columns:repeat(2,1fr) !important; }
}

@media (max-width: 880px){
  .nav-toggle{ display:flex; }

  .nav-links{
    position:fixed;
    top:72px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(20,20,20,0.98);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height 0.3s ease, opacity 0.2s ease;
    z-index:49;
  }
  .nav-links.is-open{
    max-height:calc(100vh - 72px);
    opacity:1;
    overflow-y:auto;
  }
  .nav-links a{
    padding:18px 24px;
    border-bottom:1px solid var(--border);
    font-size:15px;
  }
  .nav-links .btn{
    margin:20px 24px;
    width:calc(100% - 48px);
  }
  body.nav-open{ overflow:hidden; }

  .hero-grid{
    grid-template-columns:1fr !important;
    padding-top:48px !important;
    padding-bottom:48px !important;
    gap:40px !important;
    min-height:auto !important;
  }
  .hero-title{ font-size:36px !important; }
  .hero-visual{ height:320px !important; }

  .grid-2, .grid-3, .docs-grid, .about-grid, .contact-grid, .form-grid-2{
    grid-template-columns:1fr !important;
  }

  .section-pad{ padding:64px 0 !important; }
  .eyebrow-title{ font-size:26px !important; }
  .section-sub{ font-size:15.5px !important; }
  .wrap{ padding:0 20px; }
  .card{ padding:28px !important; }

  .footer-bar{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px;
  }
}

@media (max-width: 480px){
  .hero-title{ font-size:29px !important; }
  .wrap{ padding:0 16px; }
  .card{ padding:22px !important; }
}