/* ═══════════════════════════════════════════
   AlignBridge.tech — Shared Stylesheet
   Brand: Navy #0B1F3B | Blue #2F80ED | White
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --navy:#0B1F3B;
  --navy-90:rgba(11,31,59,.92);
  --navy-10:rgba(11,31,59,.06);
  --blue:#2F80ED;
  --blue-m:#4A93F0;
  --blue-l:#6AAAF4;
  --blue-pale:#EBF3FE;
  --blue-10:rgba(47,128,237,.10);
  --blue-20:rgba(47,128,237,.20);
  --blue-30:rgba(47,128,237,.30);
  --white:#FFFFFF;
  --off:#F5F7FA;
  --off2:#EDF2F7;
  --border:rgba(11,31,59,.10);
  --border-b:rgba(47,128,237,.18);
  --text:#0B1F3B;
  --text-mid:#2C4A6E;
  --text-soft:#5A7A9E;
  --text-faint:#8AAAC8;
  --grad:linear-gradient(90deg,#0B1F3B,#2F80ED);
  --grad-d:linear-gradient(135deg,#0B1F3B,#2F80ED);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#fff;color:var(--text);overflow-x:hidden;line-height:1.65;padding-top:62px;}

/* ══════════ NAV ══════════ */
nav{
  position:fixed;top:0;left:0;width:100%;z-index:999;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 4%;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
  height:62px;
}
.nav-logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;}
.nav-logo-svg{height:32px;width:auto;}
.nav-wordmark{font-family:'Sora',sans-serif;font-size:1.15rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.nav-wordmark .b{color:var(--blue);}
.nav-wordmark .t{color:var(--text-soft);font-weight:400;font-size:.9rem;}
.nav-links{display:flex;gap:.15rem;list-style:none;align-items:center;}
.nav-links li a{
  display:flex;align-items:center;gap:.3rem;
  font-size:.74rem;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-soft);
  text-decoration:none;padding:.42rem .8rem;border-radius:5px;
  transition:all .2s;white-space:nowrap;
}
.nav-links li a:hover{color:var(--navy);background:var(--off);}
.nav-links li a.active{color:var(--blue);background:var(--blue-pale);font-weight:600;}
.nav-icon{font-size:.85rem;}
.nav-cta{
  background:var(--navy);color:#fff;border:none;
  padding:.52rem 1.3rem;font-family:'Inter',sans-serif;
  font-size:.78rem;font-weight:600;cursor:pointer;border-radius:5px;
  transition:all .2s;text-decoration:none;display:inline-block;
}
.nav-cta:hover{background:var(--blue);transform:translateY(-1px);box-shadow:0 4px 14px var(--blue-20);}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:4px;}
.burger span{width:22px;height:2px;background:var(--navy);border-radius:2px;transition:all .3s;}
.mobile-nav{display:none;flex-direction:column;position:fixed;top:62px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:1rem 4%;gap:.2rem;z-index:998;}
.mobile-nav.open{display:flex;}
.mobile-nav a{font-size:.82rem;font-weight:500;color:var(--text-soft);text-decoration:none;padding:.6rem .8rem;border-radius:5px;transition:all .2s;display:flex;align-items:center;gap:.5rem;}
.mobile-nav a:hover,.mobile-nav a.active{color:var(--blue);background:var(--blue-pale);}

/* ══════════ PAGE BANNER ══════════ */
.page-banner{
  background:var(--navy);
  padding:4.5rem 5% 4rem;
  position:relative;overflow:hidden;
}
.page-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 80% at 80% 50%,rgba(47,128,237,.18),transparent);}
.page-banner::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(47,128,237,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,128,237,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);}
.page-banner-inner{position:relative;z-index:1;max-width:760px;}
.page-eyebrow{display:inline-flex;align-items:center;gap:.45rem;background:rgba(47,128,237,.12);border:1px solid rgba(47,128,237,.25);padding:.3rem .9rem;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--blue-l);letter-spacing:.1em;margin-bottom:.9rem;}
.page-banner h1{font-family:'Sora',sans-serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.02em;margin-bottom:.85rem;}
.page-banner h1 span{color:var(--blue-l);}
.page-banner p{font-size:.98rem;color:rgba(255,255,255,.55);max-width:580px;line-height:1.8;}
.banner-breadcrumb{display:flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;font-family:'JetBrains Mono',monospace;font-size:.65rem;color:rgba(255,255,255,.35);letter-spacing:.06em;}
.banner-breadcrumb a{color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s;}
.banner-breadcrumb a:hover{color:var(--blue-l);}
.banner-breadcrumb span{color:var(--blue-l);}

/* ══════════ SHARED LAYOUT ══════════ */
.sec{padding:5rem 5%;}
.sec-sm{padding:3.5rem 5%;}
.s-white{background:#fff;}
.s-off{background:var(--off);}
.s-navy{background:var(--navy);}
.sec-tag{font-family:'JetBrains Mono',monospace;font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:.7rem;}
h2{font-family:'Sora',sans-serif;font-size:clamp(1.75rem,2.8vw,2.5rem);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--navy);margin-bottom:.9rem;}
h2 .b{color:var(--blue);}
.intro{color:var(--text-soft);font-size:.96rem;line-height:1.8;max-width:560px;margin-bottom:2.8rem;}
.intro.wide{max-width:760px;}

/* ══════════ REVEAL ANIMATIONS ══════════ */
.rev{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.rev.on{opacity:1;transform:none;}
.rev-l{opacity:0;transform:translateX(-18px);transition:opacity .6s ease,transform .6s ease;}
.rev-l.on{opacity:1;transform:none;}
.rev-r{opacity:0;transform:translateX(18px);transition:opacity .6s ease,transform .6s ease;}
.rev-r.on{opacity:1;transform:none;}

/* ══════════ BUTTONS ══════════ */
.btn-navy{background:var(--navy);color:#fff;border:none;padding:.82rem 1.9rem;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;border-radius:5px;transition:all .2s;text-decoration:none;display:inline-block;}
.btn-navy:hover{background:var(--blue);transform:translateY(-2px);box-shadow:0 8px 22px var(--blue-20);}
.btn-blue{background:var(--blue);color:#fff;border:none;padding:.82rem 1.9rem;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;border-radius:5px;transition:all .2s;text-decoration:none;display:inline-block;}
.btn-blue:hover{background:var(--blue-m);transform:translateY(-2px);box-shadow:0 8px 22px var(--blue-20);}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);padding:.82rem 1.9rem;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;border-radius:5px;transition:all .2s;text-decoration:none;display:inline-block;}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);}
.btn-white{background:#fff;color:var(--navy);border:none;padding:.88rem 2rem;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;border-radius:5px;transition:all .2s;text-decoration:none;display:inline-block;}
.btn-white:hover{background:var(--off2);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12);}
.btn-ghost-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3);padding:.88rem 2rem;font-family:'Inter',sans-serif;font-size:.88rem;cursor:pointer;border-radius:5px;transition:all .2s;text-decoration:none;display:inline-block;}
.btn-ghost-w:hover{border-color:#fff;background:rgba(255,255,255,.07);}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}

/* ══════════ CTA BAND ══════════ */
.cta-band{background:var(--grad-d);padding:5.5rem 5%;text-align:center;position:relative;overflow:hidden;}
.cta-band::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;}
.cta-band>*{position:relative;}
.cta-band .sec-tag{color:rgba(255,255,255,.5);}
.cta-band h2{color:#fff;max-width:680px;margin:0 auto .9rem;}
.cta-band p{color:rgba(255,255,255,.55);font-size:.95rem;max-width:500px;margin:0 auto 2rem;line-height:1.8;}
.cta-band .btn-row{justify-content:center;}

/* ══════════ FOOTER ══════════ */
footer{background:#fff;border-top:1.5px solid var(--off2);padding:2.5rem 5%;}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem;padding-bottom:1.8rem;border-bottom:1px solid var(--off2);margin-bottom:1.3rem;}
.ft-logo-row{display:flex;align-items:center;gap:.55rem;margin-bottom:.45rem;}
.ft-logo-svg{height:28px;width:auto;}
.ft-name{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:var(--navy);}
.ft-name span{color:var(--blue);}
.ft-tag{font-size:.75rem;color:var(--text-soft);margin-top:.18rem;}
.ft-email{font-size:.78rem;color:var(--blue);margin-top:.3rem;font-weight:500;}
.ft-nav{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;}
.ft-nav a{font-size:.78rem;color:var(--text-soft);text-decoration:none;transition:color .2s;}
.ft-nav a:hover{color:var(--blue);}
.ft-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;}
.ft-copy{font-size:.72rem;color:var(--text-faint);}
.ft-social{display:flex;gap:.65rem;}
.ft-social a{font-size:.72rem;color:var(--text-soft);text-decoration:none;border:1px solid var(--border);padding:.25rem .68rem;border-radius:3px;transition:all .2s;}
.ft-social a:hover{color:var(--blue);border-color:var(--blue);}

/* ══════════ BACK TO TOP ══════════ */
#btt{position:fixed;bottom:1.8rem;right:1.8rem;z-index:998;width:42px;height:42px;background:var(--navy);border:none;cursor:pointer;border-radius:5px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s,background .2s;pointer-events:none;box-shadow:0 4px 14px rgba(11,31,59,.2);}
#btt.show{opacity:1;transform:none;pointer-events:auto;}
#btt:hover{background:var(--blue);}

/* ══════════ TAG ══════════ */
.tag{display:inline-block;font-size:.66rem;font-family:'JetBrains Mono',monospace;padding:.24rem .62rem;background:var(--blue-pale);border:1px solid var(--blue-20);color:var(--blue);letter-spacing:.04em;border-radius:3px;}
.tag-new{background:var(--navy);color:var(--blue-l);border-color:transparent;}

/* ══════════ CARDS ══════════ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;}
.card{background:#fff;border:1px solid var(--border);padding:2rem;position:relative;overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s;}
.card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 12px 36px var(--blue-10);}
.card-accent{position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.card:hover .card-accent{transform:scaleX(1);}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:900px){
  .nav-links{display:none;}
  .burger{display:flex;}
  body{padding-top:62px;}
}
@media(max-width:640px){
  .sec{padding:3.5rem 4%;}
  .page-banner{padding:3rem 4% 2.8rem;}
  h2{font-size:1.7rem;}
}
