:root{
  --bg:#0b0f17;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.56);
  --accent:#4a7dff;
  --accent2:#00ffb3;

  --max:1120px;
  --r:18px;
  --r2:26px;

  --h1:clamp(42px, 4.6vw, 66px);
  --h2:clamp(24px, 2.1vw, 34px);
  --shadow:0 18px 60px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:4px}
.wrap{width:min(var(--max), calc(100% - 48px)); margin:0 auto}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,15,23,.70);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px; font-weight:820; letter-spacing:.2px;}
.brand__mark{width:14px; height:14px; border-radius:4px; background:rgba(255,255,255,.95); box-shadow: 12px 0 0 var(--accent);}
.nav{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.nav a{color:var(--muted); font-weight:700; font-size:14px}
.nav a.active{color:var(--text); text-decoration:underline; text-underline-offset:6px}
.pillBtn{border:1px solid var(--line); background:rgba(255,255,255,.06); padding:9px 12px; border-radius:999px;}
.pillBtn:hover{box-shadow:var(--shadow); text-decoration:none}

.hero{position:relative; padding:54px 0 34px;}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("/test/assets/hero.svg");
  background-size:cover;
  background-position:center;
  opacity:1;
  pointer-events:none;
}
.hero__content{position:relative; display:grid; grid-template-columns: 1.25fr .85fr; gap:18px; align-items:start;}

.heroCard{border:1px solid var(--line); background:rgba(11,15,23,.45); border-radius:var(--r2); box-shadow:var(--shadow); padding:22px;}
.eyebrow{margin:0 0 12px; color:var(--muted2); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800;}
h1{margin:0 0 14px; font-size:var(--h1); line-height:1.02; letter-spacing:-0.9px}
.lede{margin:0 0 18px; font-size:18px; color:rgba(255,255,255,.86); max-width:75ch}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.smallNote{color:var(--muted); font-size:14px; margin-top:10px}

.btn{display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.06); font-weight:820; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow); text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#081027}
.btn.secondary{background:rgba(255,255,255,.10)}

.quick{display:grid; gap:10px}
.quickItem{border:1px solid var(--line); background:rgba(255,255,255,.06); border-radius:18px; padding:14px 14px;}
.quickLabel{color:var(--muted2); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:820; margin-bottom:6px}
.quickValue{font-weight:820}

.section{padding:54px 0}
.sectionHead{display:grid; gap:10px; margin-bottom:18px}
h2{margin:0; font-size:var(--h2); letter-spacing:-0.2px}
.sub{margin:0; color:var(--muted); max-width:90ch}
.band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.03);}

.tiles{display:grid; grid-template-columns:repeat(12, 1fr); gap:14px}
.tile{grid-column: span 4; border:1px solid var(--line); background:var(--panel); border-radius:var(--r2); padding:18px; box-shadow:0 1px 0 rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; overflow:hidden; position:relative;}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow); background:rgba(255,255,255,.08); text-decoration:none}
.tile.wide{grid-column: span 8}
.tile.tall{min-height:270px}
.kicker{color:var(--muted2); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:820;}
.title{margin-top:8px; font-size:18px; font-weight:900; letter-spacing:-0.2px}
.desc{margin-top:8px; color:var(--muted)}
.cta{margin-top:12px; font-weight:850}
.tileBg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55; filter:saturate(1.1) contrast(1.05); pointer-events:none;}
.tileContent{position:relative}
.tileBg.one{background-image:url("/test/assets/abstract-1.svg")}
.tileBg.two{background-image:url("/test/assets/abstract-2.svg")}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.card{border:1px solid var(--line); background:var(--panel); border-radius:var(--r2); padding:18px;}
.card h3{margin:0 0 10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2);}
.list{margin:0; padding-left:18px; color:rgba(255,255,255,.86);}
.list li{margin:10px 0; color:rgba(255,255,255,.84);}

.contactGrid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px}
.contactCard{border:1px solid var(--line); background:var(--panel); border-radius:var(--r2); padding:18px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;}
.contactCard:hover{transform:translateY(-3px); box-shadow:var(--shadow); background:rgba(255,255,255,.08); text-decoration:none}
.contactCard .label{color:var(--muted2); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:820; margin-bottom:10px;}
.contactCard .value{font-weight:900; margin-bottom:8px}
.contactCard .hint{color:var(--muted); font-weight:820}

.footer{padding:26px 0 44px; border-top:1px solid var(--line); background:rgba(11,15,23,.65);}
.footerInner{display:flex; justify-content:space-between; align-items:center; color:var(--muted);}
.tag{border:1px solid var(--line); padding:7px 10px; border-radius:999px; color:var(--muted); font-weight:780; font-size:13px;}

@media (max-width: 1020px){
  .hero__content{grid-template-columns:1fr}
  .tile{grid-column:span 12}
  .tile.wide{grid-column:span 12}
  .grid2{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
}

/* --- Mobile-first refinements (v7) --- */
@media (max-width: 860px){
  .wrap{ width: min(var(--max), calc(100% - 28px)); }
  .topbar__inner{ padding: 12px 0; }
  .nav{ gap: 10px; }
  .pillBtn{ padding: 8px 10px; }
  .hero{ padding: 42px 0 26px; }
  .heroCard{ padding: 18px; }
  .lede{ font-size: 17px; }
  .actions .btn{ height: 44px; }
  .section{ padding: 44px 0; }
}

@media (max-width: 720px){
  /* Make the nav usable on phones without rebuilding the header */
  .topbar__inner{ align-items: flex-start; gap: 10px; }
  .nav{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{
    white-space: nowrap;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
  }
  .nav a.active{ background: rgba(255,255,255,.08); }
  .pillBtn{ background: rgba(74,125,255,.18); border-color: rgba(74,125,255,.35); }

  .hero::before{ opacity: .95; }
  h1{ letter-spacing: -0.6px; }
  .hero__content{ grid-template-columns: 1fr; }
  .quick{ grid-template-columns: 1fr; }
  .quickItem{ padding: 14px; border-radius: 18px; }

  /* Earlier collapse for “meat” sections */
  .tiles{ grid-template-columns: 1fr; }
  .tile, .tile.wide{ grid-column: auto; }
  .tile.tall{ min-height: 0; }
  .grid2{ grid-template-columns: 1fr; }
  .contactGrid{ grid-template-columns: 1fr; }

  /* Better tap targets / spacing */
  .btn.primary, .btn.secondary{ width: 100%; justify-content: center; }
  .actions{ display: grid; grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 420px){
  .wrap{ width: min(var(--max), calc(100% - 22px)); }
  .hero{ padding: 36px 0 22px; }
  .heroCard{ padding: 16px; border-radius: 22px; }
  .lede{ font-size: 16px; }
  .smallNote{ font-size: 13px; }
  .footerInner{ flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- Header polish for mobile (v8) --- */
@media (max-width: 720px){
  .topbar__inner{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .brand{
    white-space: nowrap;
    gap: 10px;           /* slightly tighter than desktop */
    letter-spacing: 0;   /* avoid any perceived spacing */
    word-spacing: 0;     /* ensure normal first/last spacing */
  }
  .brand__mark{ flex: 0 0 auto; }
  .nav{ width: 100%; }
}