/* ==========================================================================
   SiliCore — layout.css
   Page shell: container, site header/nav, sections, footer, grids.

   NOTE: the previous version of this file enabled `scroll-snap-type: y mandatory`
   for the old single-page design. Snap is intentionally gone — it is
   incompatible with the Lenis inertia scrolling now used site-wide.
   ========================================================================== */

/* ========= Container ========= */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(16px, 3vw, 28px);
}
.container--prose{max-width:var(--maxw-prose)}

/* ========= Site header ========= */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(10,18,40,.72);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--hairline);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap);
  min-height:64px;
}

/* Wordmark */
.brand{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--white);font-weight:800;letter-spacing:.4px;
  font-size:18px;
}
.brand:hover{color:var(--white)}
.brand__mark{
  width:26px;height:26px;flex:none;
  border-radius:7px;
  border:1px solid rgba(24,224,255,.5);
  background:
    radial-gradient(circle at 50% 50%, rgba(24,224,255,.35), transparent 62%),
    var(--surface-solid);
  position:relative;
}
/* four "pins" on the mark, two per side */
.brand__mark::before,
.brand__mark::after{
  content:"";position:absolute;left:-4px;right:-4px;height:1px;
  background:var(--cyan);opacity:.65;
}
.brand__mark::before{top:8px}
.brand__mark::after{bottom:8px}
.brand span em{color:var(--cyan);font-style:normal}

/* Primary nav */
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  color:var(--muted);
  font-weight:600;font-size:15px;
  transition:color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.06)}

/* Active page — set by scripts/site.js, and also settable in markup */
.nav a[aria-current="page"]{
  color:var(--cyan);
  background:rgba(24,224,255,.10);
}

/* Mobile toggle — hidden on desktop */
.nav-toggle{
  display:none;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  border:1px solid var(--hairline-strong);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  cursor:pointer;
}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle__close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:block}

@media (max-width: 860px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;
    left:0;right:0;top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:10px clamp(16px, 3vw, 28px) 16px;
    background:rgba(10,18,40,.97);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--hairline);
    /* collapsed by default on small screens */
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 14px;font-size:16px}

  /* No-JS fallback: the toggle cannot work, so always show the nav.
     Better a permanently-expanded menu than an unreachable one. */
  .no-js .nav{display:flex}
  .no-js .nav-toggle{display:none}
}

/* ========= Sections ========= */
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(36px, 5vw, 64px)}
.section + .section{border-top:1px solid rgba(255,255,255,.05)}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gap);flex-wrap:wrap;
  margin-bottom:clamp(20px, 3vw, 36px);
}
.section-head__text{max-width:62ch}
.section-head h2{margin-bottom:8px}
.section-sub{color:var(--muted);font-size:clamp(14px, 2vw, 16px)}

/* ========= Hero ========= */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(64px, 11vw, 148px);
  text-align:center;
}
/* Circuit-trace pattern — replaces the missing SiliCore-chips-tile PNG.
   Pure CSS, so there is no asset to go missing. */
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background-image:var(--chip-pattern);
  background-size:160px 160px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
/* Cyan glow wash over the traces */
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(24,224,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 34%);
  pointer-events:none;
}
.hero__inner{display:grid;gap:22px;justify-items:center}
.hero h1{max-width:22ch}
.hero .lead{max-width:60ch}
.hero .btnrow{justify-content:center}

/* Eyebrow line above the hero headline */
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--muted);
  font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
}
.hero__eyebrow::before,
.hero__eyebrow::after{
  content:"";width:26px;height:1px;background:rgba(24,224,255,.55);
}

/* ========= Page header (interior pages) ========= */
.page-head{
  padding-block:clamp(40px, 6vw, 76px) clamp(24px, 3vw, 36px);
  border-bottom:1px solid var(--hairline);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 100% at 12% 0%, rgba(24,224,255,.11), transparent 65%);
}
.page-head h1{margin-bottom:12px}
.page-head .lead{max-width:70ch}

/* Breadcrumb */
.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:16px;
  color:var(--muted);font-size:13px;
}
.crumbs a{color:var(--muted);font-weight:600}
.crumbs a:hover{color:var(--cyan)}
.crumbs__sep{opacity:.5}
.crumbs [aria-current="page"]{color:var(--white)}

/* ========= Grids ========= */
.grid{display:grid;gap:var(--gap)}
.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))}

/* Auto-fitting grid — used for blog cards and team cards so a row with a
   leftover item doesn't collapse awkwardly. */
.grid--auto{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

@media (max-width: 1024px){
  .grid--4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}

/* Split layout: content + aside */
.split{
  display:grid;
  gap:clamp(24px, 4vw, 48px);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width: 900px){
  .split{grid-template-columns:1fr}
}

/* ========= Footer ========= */
.site-footer{
  margin-top:auto;
  border-top:1px solid var(--hairline);
  background:rgba(8,14,32,.6);
  padding-block:clamp(32px, 5vw, 52px) 24px;
  color:var(--muted);
  font-size:14px;
}
.site-footer__grid{
  display:grid;
  gap:clamp(24px, 4vw, 40px);
  grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr));
  margin-bottom:32px;
}
@media (max-width: 860px){
  .site-footer__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .site-footer__grid{grid-template-columns:1fr}
}
.site-footer__about{
  margin-top:14px;
  max-width:36ch;
  line-height:1.6;
}
.site-footer h4{
  color:var(--white);
  font-size:13px;letter-spacing:1.2px;text-transform:uppercase;
  margin-bottom:12px;
}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:8px}
.site-footer li a{color:var(--muted);font-weight:500}
.site-footer li a:hover{color:var(--cyan)}
.site-footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap);flex-wrap:wrap;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:13px;
}

/* Body becomes a column so the footer can be pushed down on short pages */
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}