/* =========================================================
   NovaBridge India — novabridgeind.com
   Structural engineering / bridge construction landing page
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===================== TOKENS ===================== */
:root{
  --graphite:#191F25;
  --graphite-soft:#232B33;
  --graphite-soft-2:#2C3640;
  --blueprint-cyan:#4FB6E8;
  --blueprint-cyan-dim:#3A93BE;
  --safety-amber:#E8811E;
  --safety-amber-dim:#C76E17;
  --concrete:#E7E4DD;
  --concrete-deep:#DBD6CB;
  --steel-white:#F4F5F5;
  --ink:#191F25;
  --ink-soft:#5B6570;
  --line-dark:rgba(244,245,245,0.14);
  --line-light:rgba(25,31,37,0.13);
  --shadow-card:0 26px 60px -22px rgba(15,19,23,0.5);
  --shadow-soft:0 14px 32px -16px rgba(15,19,23,0.25);
  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:22px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-tech:'JetBrains Mono', monospace;
  --maxw:1180px;
}

/* ===================== RESET ===================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);color:var(--ink);background:var(--steel-white);line-height:1.6;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-0.01em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:104px 0;position:relative;}
@media (max-width:860px){.section{padding:70px 0;}}
:focus-visible{outline:3px solid var(--safety-amber);outline-offset:3px;}

.eyebrow{
  font-family:var(--font-tech);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--safety-amber-dim);display:flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:600;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--safety-amber);display:inline-block;}
.on-dark .eyebrow{color:var(--safety-amber);}

.section-head{max-width:660px;margin-bottom:52px;}
.section-head h2{font-size:clamp(30px,4vw,44px);}
.section-head .lede{margin-top:16px;font-size:17.5px;color:var(--ink-soft);max-width:56ch;}
.on-dark .section-head .lede{color:#AEB7C0;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:14.5px;
  padding:15px 27px;border-radius:var(--radius-sm);transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--safety-amber);color:#241000;box-shadow:var(--shadow-soft);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(232,129,30,0.5);}
.btn-ghost{border:1.5px solid var(--line-light);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost.on-dark{border-color:var(--line-dark);color:var(--steel-white);}
.btn-ghost.on-dark:hover{border-color:var(--steel-white);}

.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* ===================== SPEC CHIP (signature component) ===================== */
.spec-chip{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-tech);font-size:11.5px;font-weight:500;
  color:var(--blueprint-cyan);border:1px solid var(--blueprint-cyan-dim);padding:7px 12px;border-radius:5px;
  background:rgba(79,182,232,0.08);letter-spacing:0.03em;white-space:nowrap;
}
.spec-chip .lbl{color:#8CA3AF;}

/* ===================== TRUSS DIVIDER (secondary signature) ===================== */
.truss-divider{
  height:26px;
  background-image:
    linear-gradient(115deg, transparent 49%, var(--blueprint-cyan-dim) 49.5%, var(--blueprint-cyan-dim) 50.5%, transparent 51%),
    linear-gradient(65deg, transparent 49%, var(--blueprint-cyan-dim) 49.5%, var(--blueprint-cyan-dim) 50.5%, transparent 51%);
  background-size:52px 26px;
  background-repeat:repeat-x;
  background-position:center;
  opacity:0.4;
}

/* ===================== NAV ===================== */
.nav{position:sticky;top:0;z-index:70;background:rgba(25,31,37,0.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dark);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:var(--maxw);margin:0 auto;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--steel-white);letter-spacing:-0.01em;}
.logo svg{width:24px;height:24px;color:var(--safety-amber);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a:not(.btn){font-family:var(--font-body);font-size:14px;font-weight:500;color:#AEB7C0;transition:color .15s ease;}
.nav-links a:hover:not(.btn){color:var(--steel-white);}
.nav-cta{display:flex;align-items:center;gap:16px;}
.nav-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;}
.nav-toggle svg{width:22px;height:22px;color:var(--steel-white);}
.nav-toggle .icon-close{display:none;}
.nav.open .nav-toggle .icon-menu{display:none;}
.nav.open .nav-toggle .icon-close{display:block;}
.nav-links-cta{display:none;}
.header-cta{display:inline-flex;}
@media (max-width:940px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .header-cta{display:none;}
  .nav.open .nav-links{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--graphite);padding:20px 28px 28px;gap:18px;border-bottom:1px solid var(--line-dark);
  }
  .nav-links-cta{display:block;margin-top:6px;padding-top:18px;border-top:1px solid var(--line-dark);}
  .nav-links-cta .btn{display:flex;width:100%;}
}

/* ===================== HERO ===================== */
.hero{background:var(--graphite);color:var(--steel-white);position:relative;overflow:hidden;padding:84px 0 0;}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 900px 500px at 70% 20%, black 40%, transparent 75%);
}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2;display:grid;grid-template-columns:0.92fr 1.08fr;gap:52px;align-items:center;}
@media (max-width:980px){.hero-inner{grid-template-columns:1fr;gap:48px;}}
.hero-copy h1{font-size:clamp(34px,4.6vw,54px);color:var(--steel-white);}
.hero-copy h1 em{font-style:normal;color:var(--safety-amber);}
.hero-copy .lede{margin-top:20px;font-size:18px;color:#AEB7C0;max-width:48ch;}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px;}

.bridge-visual{position:relative;}
.bridge-svg{width:100%;height:auto;}
.bridge-svg .bl{stroke:var(--blueprint-cyan);}
.bridge-visual .spec-chip{position:absolute;}
.bridge-visual .sc-span{bottom:2%;left:50%;transform:translateX(-50%);}
.bridge-visual .sc-clear{bottom:22%;left:1%;}
.bridge-visual .sc-load{top:6%;right:2%;}

/* trust strip */
.trust-strip{background:var(--graphite-soft);border-top:1px solid var(--line-dark);}
.trust-inner{max-width:var(--maxw);margin:0 auto;padding:28px 28px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;}
.trust-tag{display:flex;align-items:baseline;gap:9px;font-family:var(--font-tech);color:#AEB7C0;border-left:2px solid var(--safety-amber);padding-left:12px;}
.trust-tag strong{font-size:21px;color:var(--steel-white);font-weight:600;}
.trust-tag span{font-size:12.5px;}

/* ===================== CAPABILITIES ===================== */
.capabilities{background:var(--steel-white);}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--radius-md);overflow:hidden;}
@media (max-width:860px){.cap-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.cap-grid{grid-template-columns:1fr;}}
.cap-card{background:var(--steel-white);padding:30px 26px;}
.cap-card .code{font-family:var(--font-tech);font-size:11px;color:var(--blueprint-cyan-dim);letter-spacing:0.06em;}
.cap-card svg{width:22px;height:22px;color:var(--safety-amber-dim);margin-top:14px;}
.cap-card h4{font-size:18px;margin-top:14px;}
.cap-card .desc{margin-top:8px;font-size:14.5px;color:var(--ink-soft);}

/* ===================== PROCESS ===================== */
.process{background:var(--graphite);color:var(--steel-white);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.steps{grid-template-columns:1fr;}}
.step{border-top:2px solid var(--line-dark);padding-top:20px;}
.step .num{font-family:var(--font-tech);font-size:13px;color:var(--safety-amber);font-weight:600;letter-spacing:0.04em;}
.step h3{font-size:21px;margin-top:12px;}
.step .desc{margin-top:10px;font-size:14.5px;color:#AEB7C0;max-width:32ch;}

/* ===================== PROJECTS (title-block cards) ===================== */
.projects{background:var(--concrete);}
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:760px){.proj-grid{grid-template-columns:1fr;}}
.proj-card{background:var(--steel-white);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid var(--line-light);}
.proj-top{padding:26px 26px 20px;}
.proj-top .loc{font-family:var(--font-tech);font-size:11.5px;color:var(--blueprint-cyan-dim);letter-spacing:0.05em;text-transform:uppercase;}
.proj-top h4{font-size:22px;margin-top:8px;}
.proj-specs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-light);background:var(--concrete);}
.proj-specs div{padding:14px 12px;border-right:1px solid var(--line-light);}
.proj-specs div:last-child{border-right:none;}
.proj-specs .k{font-family:var(--font-tech);font-size:9.5px;color:var(--ink-soft);letter-spacing:0.06em;display:block;}
.proj-specs .v{font-family:var(--font-tech);font-size:13px;font-weight:600;margin-top:3px;display:block;}

/* ===================== SAFETY & COMPLIANCE ===================== */
.safety{background:var(--graphite);color:var(--steel-white);}
.safety-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
@media (max-width:860px){.safety-grid{grid-template-columns:1fr;gap:40px;}}
.safety-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.safety-stat .num{font-family:var(--font-display);font-size:40px;color:var(--safety-amber);}
.safety-stat .lbl{margin-top:6px;font-size:13.5px;color:#AEB7C0;max-width:22ch;}
.safety-list{display:flex;flex-direction:column;gap:2px;}
.safety-list li{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line-dark);font-size:15px;color:#D5DAE0;}
.safety-list li:first-child{border-top:none;}
.safety-list svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;color:var(--blueprint-cyan);}

/* ===================== TESTIMONIALS ===================== */
.stories{background:var(--steel-white);}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.story-grid{grid-template-columns:1fr;}}
.story-card{background:var(--concrete);border-radius:var(--radius-md);padding:28px 26px;display:flex;flex-direction:column;height:100%;}
.story-card .quote{font-size:16px;line-height:1.55;flex-grow:1;}
.story-card .who{margin-top:20px;font-family:var(--font-tech);font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line-light);padding-top:14px;}

/* ===================== FAQ ===================== */
.faq{background:var(--concrete);}
.faq-list{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line-light);}
.faq-item:first-child{border-top:1px solid var(--line-light);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;text-align:left;}
.faq-q .txt{font-size:17px;font-weight:600;font-family:var(--font-body);}
.faq-q svg{width:18px;height:18px;color:var(--safety-amber-dim);flex-shrink:0;transition:transform .3s ease;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;}
.faq-item.open .faq-panel{grid-template-rows:1fr;}
.faq-panel-inner{overflow:hidden;}
.faq-panel .ans{padding:0 4px 24px;max-width:66ch;color:var(--ink-soft);font-size:15px;}

/* ===================== FINAL CTA ===================== */
.final-cta{background:var(--graphite);color:var(--steel-white);text-align:center;padding:104px 0;position:relative;overflow:hidden;}
.final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, rgba(232,129,30,0.15), transparent 60%);}
.final-cta-inner{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:0 28px;}
.final-cta h2{font-size:clamp(28px,4.2vw,42px);}
.final-cta .lede{margin-top:16px;font-size:17px;color:#AEB7C0;}
.final-cta .btn{margin-top:30px;}

/* ===================== FOOTER ===================== */
.footer{background:var(--graphite-soft);color:#AEB7C0;padding:64px 0 28px;}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid var(--line-dark);}
@media (max-width:760px){.footer-top{grid-template-columns:1fr 1fr;}}
.footer .logo{color:var(--steel-white);}
.footer-about p{margin-top:14px;font-size:14px;max-width:32ch;color:#8B95A0;}
.footer h5{font-family:var(--font-tech);font-size:11.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--safety-amber);margin-bottom:16px;}
.footer ul{display:flex;flex-direction:column;gap:11px;}
.footer .col-links a{font-size:14px;color:#AEB7C0;transition:color .15s ease;}
.footer .col-links a:hover{color:var(--steel-white);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-family:var(--font-tech);font-size:12px;color:#7A8390;}

/* ===================== SCROLL REVEAL (motion-safe only) ===================== */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .bridge-svg .bl{stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 2.2s ease forwards;}
  .bridge-svg .bl.cable{animation-delay:.9s;animation-duration:1s;}
  @keyframes draw{to{stroke-dashoffset:0;}}
}