:root{
  --ink:#0a1026; --panel:#0e1636; --sky:#4da3ff; --vio:#7c65ff; --muted:#b7c5e8;
  --wrap:min(1180px,92vw); --r:14px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#eaf1ff;background:#070b1a}
.wrap{width:var(--wrap);margin-inline:auto}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(7,11,26,.75);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{font-weight:800;color:#eaf1ff;text-decoration:none}
.nav{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav a{color:#eaf1ff;text-decoration:none;padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,var(--sky),var(--vio));color:#071024;font-weight:800;text-decoration:none;border:0;cursor:pointer}
.btn.wide{width:100%} .btn.alt{background:linear-gradient(135deg,#4af1cf,#4da3ff)} .ghost-btn{background:rgba(255,255,255,.08);color:#eaf1ff;border:1px solid rgba(255,255,255,.18)}

/* sections */
.stage{position:relative;min-height:100vh;display:grid;place-items:stretch;background-size:cover;background-position:center;background-repeat:no-repeat}
.stage::before{content:"";display:block} /* iOS paint fix */
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,20,.35),rgba(5,8,20,.6) 60%,rgba(5,8,20,.82));pointer-events:none}
.overlay{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:100vh;gap:12px}
h1{font-size:clamp(36px,6vw,72px);line-height:1.04;margin:0}
h2{font-size:clamp(24px,3.4vw,36px);margin:.2em 0}
p{max-width:60ch;margin:0}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* content blocks */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);border-radius:var(--r);padding:18px}
.card ul{margin:.4rem 0 0 1.1rem}
.card ul.clean{list-style:none;margin:0;padding:0}
.card ul.clean li{margin:.25rem 0}

.towers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end}
.tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);border-radius:16px;padding:14px}
.tile.t1{box-shadow:0 0 0 2px rgba(77,163,255,.35) inset}
.tile.t2{box-shadow:0 0 0 2px rgba(124,101,255,.35) inset}
.tile.t3{box-shadow:0 0 0 2px rgba(74,241,207,.35) inset}
.tile.t4{box-shadow:0 0 0 2px rgba(254,61,208,.35) inset}

.marquee{overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04)}
.track{display:flex;gap:40px;padding:12px 18px;white-space:nowrap;animation:scroll 28s linear infinite}
.track span{opacity:.92}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.actions{display:grid;gap:10px;margin:6px 0 12px}
.sep{border:0;height:1px;background:rgba(255,255,255,.14);margin:8px 0 14px}
.crm{display:grid;gap:10px}
label{display:grid;gap:6px;font-size:.95rem;color:#d8e3ff}
input,select,textarea{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(10,16,40,.65);color:#eaf1ff}
small{color:#b7c5e8}
.ghost{border:1px dashed rgba(255,255,255,.25);border-radius:16px;min-height:260px;opacity:.6}

.foot{align-items:center;justify-content:flex-end;padding-bottom:26px}
.foot nav a{color:#eaf1ff;text-decoration:none}

.cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:36px;height:36px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:transparent;z-index:3}
.cue span{display:block;width:10px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin:10px auto}
.cue:hover{background:rgba(255,255,255,.08)}

/* background images */
.stage-hero{background-image:url("../assets/picture/circuittelligence-hero1-portal-street.png")}
.stage-bq{background-image:url("../assets/picture/circuittelligence-hero1-portal-street.png")} /* reuse hero or swap */
.stage-about{background-image:url("../assets/picture/circuittelligence-about-neighborhood-blocks.png")}
.stage-services{background-image:url("../assets/picture/circuittelligence-services-infrastucture-towers.png")}
.stage-proof{background-image:url("../assets/picture/circuittelligence-proof-voices-of-the-city.png")}
.stage-book{background-image:url("../assets/picture/circuittelligence-book-a-call-gateway-plaza.png")}
.stage-footer{background-image:url("../assets/picture/circuittelligence-footer-neighborhood-at-night.png")}

/* responsive */
@media (max-width:1020px){
  .grid{grid-template-columns:1fr}
  .towers{grid-template-columns:repeat(2,1fr)}
  .book-grid{grid-template-columns:1fr}
}
@media (max-width:640px){ .nav{display:none} }