/* =============================================
   TBEagent — Marketing site design system
   Official InstruNexus Design System (premium light theme).
   Shared by home.php and contact.php.
   ============================================= */

:root{
  /* Layered light backgrounds — never flat white */
  --bg-main:#F8FAFC;
  --bg-secondary:#F2F6FA;
  --bg-wash:#EDF5FB;
  --bg-card:rgba(255,255,255,0.82);
  --bg-card-solid:#FFFFFF;
  --warm-white:#FEFCF9;

  /* Official InstruNexus brand palette */
  --navy:#15304C;          /* Primary Engineering Navy */
  --navy-2:#314A63;        /* Secondary Navy */
  --navy-deep:#0C2033;     /* derived — gradient depth only */
  --brick:#9B2C2C;         /* Brick Red — official accent (brightened from spec's #59242A, which rendered as brown) */
  --brick-hover:#B33A3A;   /* derived — lighter brick for hover */
  --brick-light:#E3A0A0;   /* derived — brick tint readable on dark navy */
  --eng-blue:#2E8BFF;      /* Engineering Blue */
  --ai-cyan:#00C8FF;       /* AI Accent Blue */
  --ai-ink:#0A6E8A;        /* derived — readable text on cyan tint */
  --steel:#A2A6AC;         /* Steel Gray */
  --slate:#687685;         /* Slate Gray */
  --border:#DCE5EE;
  --text:#15304C;
  --text-secondary:#687685;
  --text-muted:#A2A6AC;

  --success:#20C997; --success-soft:rgba(32,201,151,.12); --success-ink:#128763;
  --warning:#F5A524; --warn-soft:rgba(245,165,36,.14); --warn-ink:#8A5510;
  --danger:#D64545; --danger-soft:rgba(214,69,69,.12); --danger-ink:#A22E2E;
  --accent-soft:rgba(155,44,44,.10); --accent-ink:var(--brick);

  --radius-sm:10px; --radius:16px; --radius-lg:24px; --radius-pill:999px;
  --grad-ai:linear-gradient(135deg, var(--eng-blue), var(--ai-cyan));
  --grad-navy:linear-gradient(160deg, var(--navy), var(--navy-deep));
  --grad-brick:linear-gradient(135deg, var(--brick), #C0433D);

  --font-display:'Poppins','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'Cascadia Code',Consolas,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  color:var(--text-secondary);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  background:
    radial-gradient(ellipse 900px 560px at 12% -8%, rgba(46,139,255,.13), transparent 60%),
    radial-gradient(ellipse 760px 520px at 92% 6%, rgba(0,200,255,.11), transparent 60%),
    radial-gradient(ellipse 900px 620px at 50% 105%, rgba(21,48,76,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-main), var(--bg-secondary) 55%, var(--bg-wash));
  background-attachment:fixed;
}
a{color:inherit;}
img,svg{max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:1;}
h1,h2,h3{font-family:var(--font-display); color:var(--text); font-weight:700; margin:0; text-wrap:balance; letter-spacing:-.01em;}
p{line-height:1.7;}
.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brick); font-weight:600;
}
.mono{font-family:var(--font-mono);}
.grad-text{background:var(--grad-brick); -webkit-background-clip:text; background-clip:text; color:transparent;}
::selection{background:rgba(0,200,255,.22); color:var(--navy-deep);}

/* ---------- Ambient background layer: aurora blobs + blueprint grid ---------- */
.ambient{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.aurora{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform;}
.aurora-1{width:520px; height:520px; top:-160px; left:-120px; background:radial-gradient(circle, rgba(46,139,255,.32), transparent 70%); animation:auroraDrift1 26s ease-in-out infinite;}
.aurora-2{width:460px; height:460px; top:10%; right:-140px; background:radial-gradient(circle, rgba(0,200,255,.28), transparent 70%); animation:auroraDrift2 32s ease-in-out infinite;}
.aurora-3{width:600px; height:600px; bottom:-220px; left:35%; background:radial-gradient(circle, rgba(155,44,44,.13), transparent 70%); animation:auroraDrift3 38s ease-in-out infinite;}
@keyframes auroraDrift1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(60px,50px) scale(1.12);}}
@keyframes auroraDrift2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-50px,60px) scale(1.08);}}
@keyframes auroraDrift3{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-40px) scale(1.06);}}
.blueprint-grid{
  position:absolute; inset:-2px; opacity:.5;
  background-image:
    linear-gradient(rgba(21,48,76,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,48,76,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 85%);
}
@media (prefers-reduced-motion: reduce){ .aurora{animation:none;} }

/* ---------- Nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(248,250,252,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--border); }
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--text); text-decoration:none;}
.brand-mark{
  width:34px; height:34px; background:var(--grad-navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; border-radius:10px;
  font-family:var(--font-display); box-shadow:0 6px 16px -4px rgba(12,32,51,.4);
}
.brand-logo{width:34px; height:34px; flex:none; display:block;}
.nav-left{display:flex; align-items:center; gap:16px;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{font-size:14.5px; color:var(--navy); text-decoration:none; font-weight:500;}
.nav-links a:hover{color:var(--brick);}

/* AI-Powered badge */
.ai-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--navy); background:rgba(0,200,255,.10); border:1px solid rgba(0,200,255,.3);
  padding:6px 12px 6px 10px; border-radius:var(--radius-pill); white-space:nowrap;
}
.ai-dot{width:6px; height:6px; border-radius:50%; background:var(--ai-cyan); position:relative; flex:none;}
.ai-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--ai-cyan);
  animation:aiPing 1.8s ease-out infinite;
}
@keyframes aiPing{0%{transform:scale(.4); opacity:.9;} 100%{transform:scale(1.8); opacity:0;}}
.eyebrow-ai{display:inline-flex; align-items:center; gap:8px;}
@media (prefers-reduced-motion: reduce){ .ai-dot::after{animation:none; display:none;} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  padding:14px 26px; border-radius:var(--radius-pill); text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.btn-accent{background:var(--brick); color:#fff; box-shadow:0 10px 26px -8px rgba(155,44,44,.5);}
.btn-accent:hover{background:var(--brick-hover); transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(155,44,44,.6);}
.btn-accent::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg);
}
.btn-accent:hover::after{animation:shine .85s ease;}
@keyframes shine{from{left:-60%;} to{left:130%;}}
.btn-line{
  background:rgba(255,255,255,.55); border-color:var(--navy); color:var(--navy);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn-line:hover{border-color:var(--navy); background:rgba(21,48,76,.08); color:var(--navy); transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(21,48,76,.3);}
.btn-ghost{background:transparent; color:var(--text-secondary); border-color:transparent;}
.btn-ghost:hover{color:var(--brick); background:rgba(155,44,44,.06);}
.btn-sm{padding:10px 18px; font-size:13px;}
@media (prefers-reduced-motion: reduce){ .btn-accent:hover::after{animation:none; display:none;} }

/* Sliding underline on text nav links */
.nav-links a:not(.btn){position:relative; padding-bottom:2px;}
.nav-links a:not(.btn)::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background:var(--brick); transition:right .28s ease;
}
.nav-links a:not(.btn):hover::after{right:0;}

/* ---------- Glass card system ---------- */
.glass{
  background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
             linear-gradient(135deg, var(--border), var(--border)) border-box;
  border:1px solid transparent; border-radius:var(--radius);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 24px -8px rgba(21,48,76,.08);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background .4s ease;
}
.glass-hover:hover{
  transform:translateY(-6px);
  background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
             var(--grad-brick) border-box;
  box-shadow:0 26px 50px -18px rgba(155,44,44,.3);
}
.glass-solid{background:var(--bg-card-solid);}

/* ---------- Section / scroll reveal ---------- */
section{padding:88px 0; position:relative;}
.section-head{max-width:660px; margin-bottom:48px;}
.section-head h2{font-size:32px; margin-top:12px; line-height:1.2;}
.section-head p{color:var(--text-secondary); font-size:16.5px; margin-top:14px;}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

.stagger > *{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.stagger.in > *{opacity:1; transform:none;}
.stagger.in > *:nth-child(1){transition-delay:.02s;} .stagger.in > *:nth-child(2){transition-delay:.08s;}
.stagger.in > *:nth-child(3){transition-delay:.14s;} .stagger.in > *:nth-child(4){transition-delay:.20s;}
.stagger.in > *:nth-child(5){transition-delay:.26s;} .stagger.in > *:nth-child(6){transition-delay:.32s;}
.stagger.in > *:nth-child(7){transition-delay:.38s;} .stagger.in > *:nth-child(8){transition-delay:.44s;}
.stagger.in > *:nth-child(9){transition-delay:.50s;} .stagger.in > *:nth-child(10){transition-delay:.56s;}
.stagger.in > *:nth-child(11){transition-delay:.62s;} .stagger.in > *:nth-child(12){transition-delay:.68s;}
.stagger.in > *:nth-child(13){transition-delay:.74s;} .stagger.in > *:nth-child(14){transition-delay:.80s;}
@media (prefers-reduced-motion: reduce){ .stagger > *{opacity:1; transform:none; transition:none;} }

/* ---------- Flow connectors (animated pipeline lines) ---------- */
.flow-connector{
  width:2px; height:34px; margin:0 auto;
  background:repeating-linear-gradient(180deg, var(--ai-cyan) 0 6px, transparent 6px 13px);
  background-size:2px 26px; opacity:.8;
  animation:flowDash 1s linear infinite;
}
@keyframes flowDash{to{background-position:0 26px;}}
@media (prefers-reduced-motion: reduce){ .flow-connector{animation:none;} }

/* ---------- Footer ---------- */
footer{padding:44px 0; background:var(--grad-navy); position:relative;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; position:relative; z-index:1;}
.foot-brand{font-family:var(--font-display); font-weight:700; color:#fff; font-size:15px;}
footer .fine{font-size:12.5px; color:rgba(255,255,255,.68);}
footer a{text-decoration:none; color:rgba(255,255,255,.85);}
footer a:hover{color:var(--brick-light);}

/* ---------- Floating WhatsApp click-to-chat button ---------- */
/* WhatsApp's own brand green is kept as-is — a third-party mark, not part of the InstruNexus palette. */
@keyframes waFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
.wa-fab{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.55);
  animation:waFloat 3.2s ease-in-out infinite;
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-fab:hover{transform:translateY(-3px) scale(1.07); box-shadow:0 16px 34px -8px rgba(37,211,102,.65);}
.wa-fab svg{width:28px; height:28px;}
@media (prefers-reduced-motion: reduce){ .wa-fab{animation:none;} }
/* Floating Contact us button: above the WhatsApp button, on every page of the public site */
.ct-fab{position:fixed; right:24px; bottom:calc(96px + env(safe-area-inset-bottom, 0px)); z-index:60; display:flex; align-items:center; justify-content:center; height:48px; min-width:48px; padding:0 14px; border-radius:99px; overflow:hidden;
  background:var(--grad-brick); color:#fff; font-family:var(--font-display); font-weight:600; font-size:14.5px; text-decoration:none; white-space:nowrap;
  box-shadow:0 12px 26px -8px rgba(155,44,44,.55); transition:transform .25s ease, box-shadow .25s ease;}
.ct-fab svg{width:20px; height:20px; flex:none;}
/* icon only; the words slide out on hover or keyboard focus */
.ct-fab span{max-width:0; opacity:0; overflow:hidden; margin-left:0; transition:max-width .35s ease, opacity .25s ease, margin-left .3s ease;}
.ct-fab:hover span, .ct-fab:focus-visible span{max-width:120px; opacity:1; margin-left:9px;}
.ct-fab:hover{transform:translateY(-3px); box-shadow:0 16px 32px -8px rgba(155,44,44,.65); color:#fff;}
.wa-fab{bottom:calc(24px + env(safe-area-inset-bottom, 0px));}
@media (max-width:520px){
  .ct-fab{right:16px; bottom:calc(88px + env(safe-area-inset-bottom, 0px)); height:44px; min-width:44px; padding:0 12px;}
  .wa-fab{right:16px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); width:54px; height:54px;}
  footer{padding-bottom:150px;}
}


@media (max-width:920px){
  .nav-links{display:none;}
}

/* ---------- Footer columns + mobile nav (shared chrome: includes/marketing.php) ---------- */
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:28px; position:relative; z-index:1;}
.foot-col{display:flex; flex-direction:column; gap:7px;}
.foot-col h5{font-family:var(--font-display); color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 4px;}
.foot-col a{font-size:13px; color:rgba(255,255,255,.78);}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:28px; padding-top:18px; position:relative; z-index:1;}
.nav-mobile{display:none; gap:16px;}
.nav-mobile a{font-size:14px; color:var(--navy); font-weight:600; text-decoration:none;}
@media (max-width:920px){
  .nav-mobile{display:flex;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }

/* nav button keeps white text (nav link colour would override it) */
.nav-links a.btn-accent, .nav-links a.btn-accent:hover{color:#fff;}
.nav-links a.btn-accent::after{display:none;}