/* giti.css — Gotham IT Innovations corporate site
   Bronze + slate "dusk over the city" identity. Distinct from Longboxed gold. */
:root{
  --bg:#0E131C;--panel:#151D2A;--card:#1B2433;--card2:#232E40;
  --border:#27313F;--border2:#3A4658;
  --bronze:#C8852F;--bronze-h:#E0A94A;--bronze-soft:rgba(200,133,47,.12);
  --slate:#94A0B8;--steel:#5B7AB8;--gold:#F5C518;
  --text:#EAEEF6;--text2:#A2AEC4;--muted:#6B7894;--onbronze:#140D04;
  --disp:'Bricolage Grotesque',sans-serif;--mono:'JetBrains Mono',monospace;
  --maxw:1140px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
html,body{margin:0;background:var(--bg);}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--bronze);outline-offset:2px;border-radius:3px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media(max-width:560px){.wrap{padding:0 20px;}}
h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:-.02em;line-height:1.05;}
.skip{position:absolute;left:-9999px;top:8px;background:var(--bronze);color:var(--onbronze);padding:8px 14px;border-radius:8px;font-weight:700;z-index:100;}
.skip:focus{left:12px;}

.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);}
.btn{font-family:inherit;font-size:14px;font-weight:600;border-radius:8px;padding:10px 18px;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:8px;transition:background .15s,border-color .15s,color .15s,transform .08s;}
.btn:active{transform:translateY(1px);}
.btn.bronze{background:var(--bronze);color:var(--onbronze);}
.btn.bronze:hover{background:var(--bronze-h);}
.btn.ghost{background:transparent;border:1px solid var(--border2);color:var(--text);}
.btn.ghost:hover{border-color:var(--bronze);color:var(--bronze-h);}
.btn.lg{padding:14px 24px;font-size:15px;border-radius:10px;}

/* brand mark */
.giti-mark{display:block;flex-shrink:0;}
.giti-mark .city{fill:var(--slate);}
.giti-mark .lett{fill:var(--bronze);}
.brand{display:flex;align-items:center;gap:13px;color:var(--text);}
.brand .wm{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.01em;}
.brand .wm i{font-style:normal;color:var(--bronze);}

/* nav */
header.nav{position:sticky;top:0;z-index:40;background:rgba(14,19,28,.88);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s;}
header.nav.scrolled{border-bottom-color:var(--border);}
nav{display:flex;align-items:center;gap:14px;padding:16px 0;}
.nl{display:flex;gap:28px;margin-left:36px;}
.nl a{font-size:14px;color:var(--text2);font-weight:500;}
.nl a:hover{color:var(--text);}
.navr{margin-left:auto;display:flex;align-items:center;gap:14px;}
.navtoggle{display:none;background:none;border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:6px 9px;cursor:pointer;}
@media(max-width:840px){.nl{display:none;}.navtoggle{display:inline-flex;}.nl.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:14px;margin:0;padding:18px 32px;background:var(--panel);border-bottom:1px solid var(--border);}}

/* skyline motif divider */
.skyline{display:block;width:100%;height:46px;color:var(--panel);}
.skyline path{fill:currentColor;}

/* hero */
.hero{position:relative;padding:88px 0 96px;overflow:hidden;
  background:radial-gradient(80% 100% at 50% -10%,rgba(200,133,47,.10),transparent 60%);}
.hero-inner{max-width:860px;}
.hero h1{font-size:clamp(40px,6vw,72px);font-weight:800;margin:22px 0 0;}
.hero h1 .br{color:var(--bronze);}
.hero .sub{font-size:19px;color:var(--text2);margin:24px 0 0;max-width:620px;}
.hero .cta{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap;}
.hero-skyline{position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;opacity:.5;}
.hero-skyline svg{width:100%;height:100%;}

/* stat strip */
.stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--panel);}
.stats .row{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;padding:30px 0;}
.stat{display:flex;flex-direction:column;gap:4px;min-width:150px;}
.stat .n{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--bronze);}
.stat .l{font-size:13px;color:var(--text2);}

/* sections */
section.block{padding:88px 0;}
@media(max-width:640px){section.block{padding:60px 0;}}
.block h2{font-size:clamp(28px,4vw,40px);font-weight:800;}
.block .lede{color:var(--text2);font-size:17px;max-width:46em;margin:16px 0 0;}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;}
.cap{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:26px;}
.cap .ic{width:42px;height:42px;border-radius:10px;background:var(--bronze-soft);color:var(--bronze);display:grid;place-items:center;margin-bottom:16px;}
.cap .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.cap h3{font-size:18px;}
.cap p{color:var(--text2);font-size:14.5px;margin:8px 0 0;}
@media(max-width:820px){.caps{grid-template-columns:1fr;}}

/* products */
.prod-wrap{display:flex;flex-direction:column;gap:18px;margin-top:44px;}
.product{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.product .pinfo{padding:40px;}
.product .flag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,197,24,.3);border-radius:99px;padding:4px 12px;}
.product h3{font-family:var(--disp);font-weight:800;font-size:30px;margin:16px 0 0;}
.product h3 i{font-style:normal;color:var(--gold);}
.product p{color:var(--text2);font-size:15px;margin:12px 0 0;max-width:38em;}
.product .feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.product .feats span{font-size:12px;color:var(--text2);background:var(--card2);border-radius:99px;padding:5px 12px;}
.product .pcta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;}
.product .pvisual{position:relative;background:radial-gradient(70% 90% at 70% 20%,#16203a,#0A0E18);border-left:1px solid var(--border);display:grid;place-items:center;padding:30px;min-height:280px;}
/* mini longboxed cover wall */
.cwall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:300px;transform:rotate(-4deg);}
.cwall i{aspect-ratio:2/3;border-radius:4px;border:1px solid rgba(255,255,255,.12);position:relative;box-shadow:0 8px 18px rgba(0,0,0,.4);}
.cwall i::before{content:"";position:absolute;top:9%;left:8%;width:26%;height:30%;border:1px solid rgba(255,255,255,.3);border-radius:1px;}
.product.next{grid-template-columns:1fr;}
.product.next .pinfo{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.product.next .flag{color:var(--slate);border-color:var(--border2);}
.product.next h3{font-size:22px;color:var(--text2);margin:0;}
.product.next p{margin:0;flex:1;min-width:240px;}
@media(max-width:820px){.product{grid-template-columns:1fr;}.product .pvisual{border-left:0;border-top:1px solid var(--border);}}

/* principles */
.alt{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.prin{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.prin .p{background:var(--panel);padding:30px;}
.prin .p .num{font-family:var(--mono);font-size:13px;color:var(--bronze);}
.prin .p h3{font-size:19px;margin:10px 0 0;}
.prin .p p{color:var(--text2);font-size:14.5px;margin:8px 0 0;}
@media(max-width:680px){.prin{grid-template-columns:1fr;}}

/* about / founder */
.about{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center;}
.about .portrait{aspect-ratio:1;border-radius:16px;background:radial-gradient(60% 60% at 50% 35%,#1d2840,#0E131C);border:1px solid var(--border);position:relative;display:grid;place-items:center;overflow:hidden;}
.about .portrait .sky{position:absolute;left:0;right:0;bottom:0;opacity:.6;}
.about .portrait .mk{position:relative;}
.about h2{font-size:30px;}
.about p{color:var(--text2);font-size:15.5px;margin:14px 0 0;}
.about p b{color:var(--text);font-weight:600;}
.about .sig{font-family:var(--disp);font-weight:700;font-size:18px;margin-top:18px;color:var(--text);}
.about .sig span{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;margin-top:3px;}
@media(max-width:760px){.about{grid-template-columns:1fr;gap:28px;}.about .portrait{max-width:280px;}}

/* contact */
.contact{text-align:center;background:radial-gradient(70% 130% at 50% 0%,rgba(200,133,47,.10),transparent 60%);}
.contact h2{font-size:clamp(30px,5vw,48px);font-weight:800;}
.contact .lede{margin-left:auto;margin-right:auto;}
.contact .info{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:30px;font-family:var(--mono);font-size:15px;}
.contact .info a{color:var(--text);border-bottom:1px solid var(--border2);padding-bottom:2px;}
.contact .info a:hover{color:var(--bronze-h);border-color:var(--bronze);}
.contact .cta{display:flex;gap:13px;justify-content:center;margin-top:34px;flex-wrap:wrap;}

/* footer */
footer.site{border-top:1px solid var(--border);background:var(--panel);padding:46px 0 34px;}
footer.site .top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;}
footer.site p{color:var(--text2);font-size:13.5px;max-width:280px;margin:12px 0 0;}
footer.site .fl{display:flex;gap:48px;flex-wrap:wrap;}
footer.site .col h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--text2);margin:0 0 12px;}
footer.site .col a{display:block;color:var(--text2);font-size:14px;padding:4px 0;}
footer.site .col a:hover{color:var(--text);}
footer.site .legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;font-family:var(--mono);}
/* social icons */
footer.site .col .gsocial{display:flex;gap:10px;margin-top:2px;}
footer.site .col .gsocial a{width:34px;height:34px;border:1px solid var(--border2);border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0;color:var(--text2);transition:color .15s,border-color .15s,background .15s;}
footer.site .col .gsocial a svg{width:18px;height:18px;display:block;}
footer.site .col .gsocial a:hover{color:var(--bronze-h);border-color:var(--bronze);background:var(--bronze-soft);}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}