/* =====================================================================
   JENSEN SSC SERVICES LLC — DESIGN SYSTEM
   Palette: Blueprint Navy / Steel Gray / Alloy White / Structural Red
   Display: 'Sora' | Body: 'Inter' | Data/Mono: 'JetBrains Mono'
   Signature element: the I-beam cross-section rule (--beam-rule) used as
   a section divider — a nod to the literal product this company draws.
===================================================================== */

:root{
  --navy-950:#060f22;
  --navy-900:#0b1e3a;
  --navy-800:#132a4d;
  --navy-700:#1c3a63;
  --steel-500:#5b6b7f;
  --steel-300:#9aa7b6;
  --steel-100:#e7ebf0;
  --white:#ffffff;
  --red-600:#c8102e;
  --red-500:#e0142f;
  --red-100:#fdeaec;
  --ink:#0f172a;

  --font-display:'Sora', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:4px;
  --radius-md:10px;
  --radius-lg:20px;
  --shadow-card: 0 10px 30px -12px rgba(6,15,34,.25);
  --shadow-card-hover: 0 20px 45px -15px rgba(6,15,34,.35);
  --container-max: 1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  color:var(--navy-900);
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0 0 .5em;
}
p{line-height:1.7;color:var(--steel-500);}
a{color:var(--navy-800);text-decoration:none;}
.container-xl{max-width:var(--container-max);margin:0 auto;padding:0 24px;}

::selection{background:var(--red-100);color:var(--navy-900);}

:focus-visible{outline:3px solid var(--red-500);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------------- Eyebrow / label ---------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-600);
  font-weight:600;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';width:22px;height:2px;background:var(--red-600);display:inline-block;
}

/* ---------------- Signature: I-beam cross-section divider ---------------- */
.beam-rule{
  display:flex;align-items:center;justify-content:center;
  gap:14px;margin:64px 0;color:var(--steel-300);
}
.beam-rule .line{flex:1;height:1px;background:linear-gradient(90deg, transparent, var(--steel-100) 20%, var(--steel-100) 80%, transparent);}
.beam-rule svg{width:26px;height:26px;flex-shrink:0;opacity:.8;}

/* ---------------- Navbar ---------------- */
.navbar-jensen{
  background:var(--navy-950);
  padding:14px 0;
  position:sticky;top:0;z-index:1000;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar-jensen .navbar-brand{
  font-family:var(--font-display);color:var(--white);font-weight:700;font-size:20px;
  display:flex;align-items:center;gap:10px;
}
.navbar-jensen .navbar-brand small{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--steel-300);font-weight:400;
}
.navbar-jensen .nav-link{
  color:var(--steel-100) !important;font-weight:500;font-size:14.5px;padding:10px 16px !important;
  transition:color .2s;
}
.navbar-jensen .nav-link:hover{color:var(--white) !important;}
.navbar-jensen .dropdown-menu{background:var(--navy-900);border:1px solid rgba(255,255,255,.08);}
.navbar-jensen .dropdown-item{color:var(--steel-100);font-size:14px;padding:10px 18px;}
.navbar-jensen .dropdown-item:hover{background:var(--navy-800);color:var(--white);}
.btn-topbar-call{
  color:var(--white);font-family:var(--font-mono);font-size:13px;border:1.5px solid rgba(255,255,255,.2);
  padding:14px;
  border-radius:100px;
}
.top-strip{background:var(--red-600);color:var(--white);font-size:12.5px;padding:6px 0;}
.top-strip a{color:var(--white);text-decoration:underline;}

/* ---------------- Buttons ---------------- */
.btn{border-radius:6px;font-weight:600;font-size:14.5px;padding:12px 24px;transition:all .2s ease;}
.btn-primary-red{background:var(--red-600);border:1px solid var(--red-600);color:var(--white);}
.btn-primary-red:hover{background:var(--red-500);border-color:var(--red-500);color:var(--white);transform:translateY(-2px);}
.btn-outline-light-jensen{background:transparent;border:1px solid rgba(255,255,255,.4);color:var(--white);}
.btn-outline-light-jensen:hover{background:rgba(255,255,255,.1);color:var(--white);}
.btn-outline-navy{background:transparent;border:1px solid var(--navy-900);color:var(--navy-900);}
.btn-outline-navy:hover{background:var(--navy-900);color:var(--white);}
.btn-lg-cta{padding:16px 30px;font-size:15.5px;}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  background:radial-gradient(ellipse at 20% 20%, var(--navy-800), var(--navy-950) 60%);
  color:var(--white);
  overflow:hidden;
  padding:150px 0 120px;
}
.hero-grid-bg{
  position:absolute;inset:0;opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero canvas#heroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.hero-content{position:relative;z-index:2;max-width:760px;}
.hero h1{
  color:var(--white);font-size:clamp(2.4rem, 5vw, 3.85rem);line-height:1.08;font-weight:700;
}
.hero h1 .accent{color:var(--red-500);}
.hero .lead-sub{color:var(--steel-100);font-size:18px;max-width:600px;margin-bottom:32px;}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;}
.hero-stats-strip{
  position:relative;z-index:2;margin-top:80px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:32px;
}
.hero-stats-strip .stat-num{font-family:var(--font-display);font-size:34px;color:var(--white);font-weight:700;}
.hero-stats-strip .stat-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-300);}
@media (max-width:768px){.hero-stats-strip{grid-template-columns:repeat(2,1fr);}}

/* ---------------- Section spacing ---------------- */
.section{padding:96px 0;}
.section-tight{padding:64px 0;}
.section-navy{background:var(--navy-900);color:var(--white);}
.section-navy h2, .section-navy h3{color:var(--white);}
.section-navy p{color:var(--steel-300);}
.section-alloy{background:var(--steel-100);}
.section-head{max-width:680px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------------- Cards ---------------- */
.card-jensen{
  background:var(--white);border:1px solid var(--steel-100);border-radius:var(--radius-md);
  padding:32px 28px;height:100%;box-shadow:var(--shadow-card);transition:transform .25s, box-shadow .25s;
}
.card-jensen:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);}
.card-jensen .icon-box{
  width:52px;height:52px;border-radius:12px;background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--white);
}
.card-jensen h3{font-size:19px;margin-bottom:10px;}
.card-jensen p{font-size:14.5px;margin-bottom:16px;}
.card-jensen .card-link{font-family:var(--font-mono);font-size:12.5px;color:var(--red-600);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}

.card-dark{
  background:var(--navy-800);border-radius:var(--radius-md);padding:32px;color:var(--white);height:100%;
  border:1px solid rgba(255,255,255,.08);
}
.card-dark h3{color:var(--white);}
.card-dark p{color:var(--steel-300);}

/* ---------------- Process timeline ---------------- */
.process-step{position:relative;padding-left:64px;margin-bottom:40px;}
.process-step .step-num{
  position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  background:var(--navy-900);color:var(--white);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:14px;
}
.process-step h4{font-size:17px;margin-bottom:6px;}

/* ---------------- Timeline (journey) ---------------- */
.timeline-jensen{position:relative;margin-left:20px;padding-left:36px;border-left:2px solid var(--steel-100);}
.timeline-item{position:relative;margin-bottom:42px;}
.timeline-item::before{
  content:'';position:absolute;left:-44px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--red-600);border:3px solid var(--white);box-shadow:0 0 0 2px var(--red-600);
}
.timeline-item .year{font-family:var(--font-mono);color:var(--red-600);font-weight:700;font-size:13px;letter-spacing:.05em;}

/* ---------------- Stats counters ---------------- */
.counter-block{text-align:center;}
.counter-block .num{font-family:var(--font-display);font-size:44px;color:var(--navy-900);font-weight:700;}
.counter-block .lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-500);}

/* ---------------- Testimonials ---------------- */
.testi-card{background:var(--white);border:1px solid var(--steel-100);border-radius:var(--radius-md);padding:30px;box-shadow:var(--shadow-card);}
.testi-card .quote-mark{font-family:var(--font-display);font-size:48px;color:var(--red-100);line-height:1;margin-bottom:8px;}
.testi-card .client-name{font-weight:700;color:var(--navy-900);}
.testi-card .client-role{font-size:12.5px;color:var(--steel-500);}

/* ---------------- Forms ---------------- */
.form-control-jensen, .form-select-jensen{
  border:1px solid var(--steel-100);border-radius:6px;padding:12px 14px;font-size:14.5px;width:100%;
  background:var(--white);transition:border-color .2s, box-shadow .2s;
}
.form-control-jensen:focus, .form-select-jensen:focus{
  border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(11,30,58,.1);outline:none;
}
.form-label-jensen{font-size:13px;font-weight:600;color:var(--navy-900);margin-bottom:6px;display:block;}
.form-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card-hover);padding:44px;border:1px solid var(--steel-100);}
.honeypot-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;}
.form-alert{padding:14px 18px;border-radius:8px;font-size:14px;margin-bottom:20px;display:none;}
.form-alert.success{background:#e7f7ee;color:#1a7a44;border:1px solid #b6e6c9;}
.form-alert.error{background:var(--red-100);color:var(--red-600);border:1px solid #f6c4cc;}

/* ---------------- CTA band ---------------- */
.cta-band{
  background:linear-gradient(120deg, var(--navy-950), var(--navy-800));
  border-radius:var(--radius-lg);padding:56px;color:var(--white);position:relative;overflow:hidden;
}
.cta-band::after{
  content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, rgba(200,16,46,.25), transparent 70%);
}
.cta-band h2{color:var(--white);}
.cta-band p{color:var(--steel-300);}

/* ---------------- Footer ---------------- */
.footer-jensen{background:var(--navy-950);color:var(--steel-300);padding:80px 0 0;}
.footer-jensen h5{color:var(--white);font-family:var(--font-display);font-size:15px;margin-bottom:20px;}
.footer-jensen a{color:var(--steel-300);font-size:auto;display:block;margin-bottom:10px;}
.footer-jensen a:hover{color:var(--white);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:56px;padding:22px 0;font-size:13px;}
.social-chip{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:inline-flex;align-items:center;justify-content:center;color:var(--white);margin-right:8px;
  transition:background .2s;
}
.social-chip:hover{background:var(--red-600);border-color:var(--red-600);}

/* ---------------- Badges ---------------- */
.badge-soft{background:var(--steel-100);color:var(--navy-900);font-weight:600;font-size:11.5px;padding:6px 12px;border-radius:100px;letter-spacing:.03em;}
.badge-red-soft{background:var(--red-100);color:var(--red-600);font-weight:600;font-size:11.5px;padding:6px 12px;border-radius:100px;}

/* ---------------- Accordion FAQ ---------------- */
.faq-item{border-bottom:1px solid var(--steel-100);padding:22px 0;}
.faq-question{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;color:var(--navy-900);font-size:16px;}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:14.5px;}
.faq-item.active .faq-answer{max-height:400px;margin-top:14px;}
.faq-item.active .faq-toggle{transform:rotate(45deg);}
.faq-toggle{transition:transform .2s;color:var(--red-600);font-size:20px;}

/* ---------------- Whatsapp float ---------------- */
.float-actions{position:fixed;right:22px;bottom:43px;z-index:1200;display:flex;flex-direction:column;gap:12px;}
.float-btn{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 10px 25px -8px rgba(0,0,0,.4);transition:transform .2s;
}
.float-btn:hover{transform:scale(1.08);}
.float-btn.whatsapp{background:#25D366;}
.float-btn.call{background:var(--red-600);}
.float-btn.chat{background:var(--navy-900);}

/* ---------------- Utility ---------------- */
.text-red-jensen{color:var(--red-600) !important;}
.bg-navy{background:var(--navy-900) !important;}
.rounded-lg-jensen{border-radius:var(--radius-lg) !important;}
.chip-software{
  display:inline-flex;align-items:center;gap:8px;background:var(--steel-100);color:var(--navy-900);
  padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;margin:0 8px 8px 0;
}

/* AOS-lite fallback (in case AOS CDN unavailable) */
[data-aos]{opacity:0;transition:opacity .6s ease, transform .6s ease;}
[data-aos].aos-animate{opacity:1;transform:none !important;}
[data-aos="fade-up"]{transform:translateY(24px);}
[data-aos="fade-right"]{transform:translateX(-24px);}
[data-aos="fade-left"]{transform:translateX(24px);}

/* Dark mode toggle support */
body.dark-mode{background:var(--navy-950);color:var(--steel-100);}
body.dark-mode .card-jensen{background:var(--navy-800);border-color:rgba(255,255,255,.08);}
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4{color:var(--white);}
body.dark-mode .section-alloy{background:var(--navy-900);}