/* ==========================================================
   MicroHub · AMC Maintenance
   Premium SaaS / enterprise redesign — same visual language
   as the HR & Payroll page.
   ========================================================== */

:root{
  --it-primary:#2563EB;
  --it-secondary:#3B82F6;
  --it-accent:#06B6D4;
  --it-dark:#0F172A;
  --it-gray:#64748B;
  --it-bg:#F8FAFC;
  --it-r:32px;
  --it-shadow:0 30px 70px -30px rgba(15,23,42,.28);
  --it-shadow-sm:0 14px 34px -18px rgba(15,23,42,.30);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--it-bg); }

.it-page{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--it-dark);
  background:var(--it-bg);
  overflow-x:hidden;
}
.it-page h1,.it-page h2,.it-page h3{
  font-family:'Poppins','Inter',sans-serif;
  letter-spacing:-.02em; margin:0;
}
.it-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* ---------- shared bits ---------- */
.it-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:999px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  color:var(--it-primary);
  font-size:12.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.it-badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--it-accent); box-shadow:0 0 0 0 rgba(6,182,212,.5);
  animation:itPulse 2.4s ease-out infinite;
}
@keyframes itPulse{
  0%{ box-shadow:0 0 0 0 rgba(6,182,212,.5); }
  70%{ box-shadow:0 0 0 9px rgba(6,182,212,0); }
  100%{ box-shadow:0 0 0 0 rgba(6,182,212,0); }
}

.it-head{ max-width:820px; margin:0 auto 56px; text-align:center; }
.it-head h2{
  font-size:clamp(28px,3.6vw,46px); line-height:1.12;
  margin:20px 0 16px; font-weight:700;
}
.it-head p{ color:var(--it-gray); font-size:16.5px; line-height:1.75; margin:0; }

.it-btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:999px;
  font-size:15px; font-weight:600; text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease;
  will-change:transform;
}
.it-btn .it-arrow{ transition:transform .3s ease; }
.it-btn:hover .it-arrow{ transform:translateX(4px); }
.it-btn--primary{
  color:#fff;
  background:linear-gradient(120deg,var(--it-primary),var(--it-secondary) 55%,var(--it-accent));
  background-size:200% 100%;
  box-shadow:0 20px 40px -18px rgba(37,99,235,.75);
  animation:itGradShift 7s ease-in-out infinite;
}
@keyframes itGradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.it-btn--primary:hover{ box-shadow:0 26px 52px -18px rgba(37,99,235,.85); }
.it-btn--glass{
  color:var(--it-dark);
  background:rgba(255,255,255,.7);
  border:1px solid rgba(15,23,42,.10);
  backdrop-filter:blur(14px);
}
.it-btn--glass:hover{ background:rgba(255,255,255,.92); }
.it-btn--light{ background:#fff; color:var(--it-dark); box-shadow:0 20px 40px -22px rgba(2,6,23,.6); }
.it-btn--ghost{ color:#fff; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); backdrop-filter:blur(10px); }

/* ---------- reveal ---------- */
.it-rv{ opacity:0; transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.it-rv[data-rv="up"],.it-rv[data-rv="stagger"]{ transform:translateY(38px); }
.it-rv[data-rv="left"]{ transform:translateX(-40px); }
.it-rv[data-rv="zoom"]{ transform:scale(.94); }
.it-rv[data-rv="blur"]{ filter:blur(14px); transform:translateY(24px); }
.it-rv.in{ opacity:1; transform:none; filter:none; }

/* ==========================================================
   HERO
   ========================================================== */
.it-hero{
  position:relative; overflow:hidden;
  padding:110px 0 120px;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(59,130,246,.20), transparent 60%),
    radial-gradient(760px 480px at 88% 10%, rgba(6,182,212,.18), transparent 62%),
    linear-gradient(180deg,#EEF4FF 0%, #F8FAFC 62%);
}
.it-mesh{ position:absolute; inset:0; pointer-events:none; }
.it-orb{
  position:absolute; border-radius:50%; filter:blur(70px);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.it-orb--1{ width:420px; height:420px; top:-90px; left:-60px; background:rgba(37,99,235,.35); animation:itFloat 16s ease-in-out infinite; }
.it-orb--2{ width:360px; height:360px; top:120px; right:-80px; background:rgba(6,182,212,.32); animation:itFloat 19s ease-in-out infinite reverse; }
.it-orb--3{ width:300px; height:300px; bottom:-120px; left:45%; background:rgba(99,102,241,.26); animation:itFloat 22s ease-in-out infinite; }
@keyframes itFloat{
  0%,100%{ translate:0 0; }
  33%{ translate:36px -26px; }
  66%{ translate:-28px 22px; }
}
.it-grid{
  position:absolute; inset:0; opacity:.55;
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 78%);
  animation:itGridPan 26s linear infinite;
}
@keyframes itGridPan{ to{ background-position:56px 56px, 56px 56px; } }

.it-hero-inner{
  position:relative; z-index:2;
  max-width:1120px; margin:0 auto; padding:0 24px;
  text-align:center; perspective:1200px;
}
.it-hero-title{
  font-size:clamp(34px,5.4vw,66px); line-height:1.06; font-weight:800;
  margin:22px auto 20px; max-width:940px;
}
.it-hero-title em{
  font-style:normal;
  background:linear-gradient(110deg,var(--it-primary),var(--it-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.it-hero-sub{
  max-width:720px; margin:0 auto 32px;
  color:var(--it-gray); font-size:17.5px; line-height:1.75;
}
.it-hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.it-hero-chips{
  list-style:none; display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center; padding:0; margin:30px 0 0;
}
.it-hero-chips li{
  padding:9px 18px; border-radius:999px;
  background:rgba(255,255,255,.72); border:1px solid rgba(15,23,42,.07);
  backdrop-filter:blur(12px);
  font-size:13.5px; font-weight:600; color:#334155;
  box-shadow:var(--it-shadow-sm);
}

/* hero dashboard */







/* ==========================================================
   STATISTICS
   ========================================================== */
.it-stats{ padding:0 0 90px; margin-top:-40px; position:relative; z-index:4; }
.it-stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.it-stat{
  padding:32px 24px; border-radius:var(--it-r); text-align:center;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
  box-shadow:var(--it-shadow);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.it-stat:hover{ transform:translateY(-8px); box-shadow:0 40px 80px -34px rgba(37,99,235,.45); }
.it-stat b{
  display:block; font-family:'Poppins',sans-serif; font-weight:800;
  font-size:clamp(30px,3.4vw,44px); line-height:1;
  background:linear-gradient(120deg,var(--it-primary),var(--it-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.it-stat small{ display:block; margin-top:10px; color:var(--it-gray); font-size:13.5px; font-weight:600; letter-spacing:.02em; }

/* ==========================================================
   SERVICE CARDS
   ========================================================== */
.it-services{ padding:90px 0; }
.it-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.it-card{
  position:relative; display:flex; flex-direction:column;
  padding:30px 26px 26px; border-radius:var(--it-r);
  background:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
  box-shadow:var(--it-shadow-sm);
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  transform-style:preserve-3d;
}
.it-card::before{
  content:""; position:absolute; inset:0; border-radius:var(--it-r);
  padding:1.4px; opacity:0; transition:opacity .4s ease;
  background:conic-gradient(from var(--a,0deg), var(--it-primary), var(--it-accent), var(--it-secondary), var(--it-primary));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:itSpin 5s linear infinite;
}
@property --a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes itSpin{ to{ --a:360deg; } }
.it-card:hover::before{ opacity:1; }
.it-card:hover{ box-shadow:0 44px 80px -34px rgba(37,99,235,.42); }
.it-card-glow{
  position:absolute; inset:-40%; opacity:0; pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%), rgba(37,99,235,.18), transparent 70%);
  transition:opacity .4s ease;
}
.it-card:hover .it-card-glow{ opacity:1; }
.it-card-ico{
  width:60px; height:60px; border-radius:20px; display:grid; place-items:center;
  color:var(--it-primary);
  background:linear-gradient(140deg,rgba(37,99,235,.14),rgba(6,182,212,.14));
  border:1px solid rgba(37,99,235,.16);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.it-card:hover .it-card-ico{ transform:rotate(-6deg) scale(1.08); }
.it-card-ico svg{ width:30px; height:30px; }
.it-card h3{ font-size:19px; font-weight:700; margin:20px 0 10px; }
.it-card p{ color:var(--it-gray); font-size:14.5px; line-height:1.7; margin:0 0 20px; flex:1; }
.it-learn{ font-size:13.5px; font-weight:700; color:var(--it-primary); display:inline-flex; gap:8px; align-items:center; }
.it-learn i{ font-style:normal; transition:transform .3s ease; }
.it-card:hover .it-learn i{ transform:translateX(5px); }

/* ==========================================================
   LARGE FEATURE SECTIONS
   ========================================================== */
.it-features{
  padding:90px 0;
  background:
    radial-gradient(700px 400px at 90% 8%, rgba(6,182,212,.12), transparent 60%),
    radial-gradient(700px 420px at 4% 60%, rgba(37,99,235,.12), transparent 62%),
    #fff;
}
.it-feature{
  display:grid; grid-template-columns:55% 45%; align-items:center;
  gap:44px; padding:38px; margin-bottom:34px;
  border-radius:var(--it-r);
  background:rgba(255,255,255,.8);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:var(--it-shadow-sm);
  backdrop-filter:blur(14px);
}
.it-feature--rev .it-feature-copy{ order:2; }
.it-feature--rev .it-feature-media{ order:1; }
.it-mini{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--it-accent); margin-bottom:14px;
}
.it-feature-copy h3{ font-size:clamp(21px,2.3vw,30px); line-height:1.28; font-weight:700; }
.it-checks{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.it-checks li{ display:flex; gap:12px; align-items:center; font-size:14.5px; color:#334155; }
.it-checks i{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-style:normal; font-size:12px; color:#fff;
  background:linear-gradient(135deg,var(--it-primary),var(--it-accent));
  box-shadow:0 6px 14px -6px rgba(37,99,235,.8);
}
.it-feature-media{
  position:relative; border-radius:26px; overflow:hidden;
  background:linear-gradient(160deg,#0F172A,#1e293b);
  box-shadow:0 34px 70px -34px rgba(15,23,42,.6);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
}
.it-feature-media img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.it-feature-media:hover img{ transform:scale(1.06); }
.it-media-tag{
  position:absolute; left:16px; bottom:16px; z-index:2;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--it-dark);
}
.it-mock{ padding:18px; color:#e2e8f0; }
.it-mock-bar{ display:flex; align-items:center; gap:6px; margin-bottom:16px; }
.it-mock-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.2); }
.it-mock-bar b{ margin-left:8px; font-size:11.5px; font-family:'JetBrains Mono',monospace; color:#94a3b8; }
.it-mock-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.it-mock-cell{
  padding:14px; border-radius:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
}
.it-mock-cell small{ display:block; color:#94a3b8; font-size:11.5px; }
.it-mock-cell b{ display:block; margin-top:5px; font-size:17px; font-family:'Poppins',sans-serif; color:#fff; }
.it-mock-line{ margin-top:14px; height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.it-mock-line i{
  display:block; height:100%; width:40%; border-radius:99px;
  background:linear-gradient(90deg,var(--it-secondary),var(--it-accent));
  animation:itScanBar 2.6s ease-in-out infinite;
}
@keyframes itScanBar{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(260%);} }

/* ==========================================================
   WHY CHOOSE / OUTCOME SIGNALS
   ========================================================== */
.it-why{ padding:90px 0; }
.it-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.it-why-card{
  padding:30px 26px; border-radius:var(--it-r);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  box-shadow:var(--it-shadow-sm);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.it-why-card:hover{ transform:translateY(-10px); box-shadow:0 44px 80px -36px rgba(37,99,235,.4); }
.it-tagchip{
  display:inline-block; padding:6px 13px; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--it-primary); background:rgba(37,99,235,.1);
}
.it-why-card h3{ font-size:18.5px; font-weight:700; margin:16px 0 10px; }
.it-why-card p{ color:var(--it-gray); font-size:14.5px; line-height:1.7; margin:0; }

/* ==========================================================
   PROCESS TIMELINE
   ========================================================== */
.it-process{
  padding:90px 0;
  background:linear-gradient(180deg,#fff, #EEF4FF);
}
.it-timeline{
  list-style:none; padding:0; margin:0; position:relative;
  max-width:900px; margin-inline:auto;
}
.it-timeline::before{
  content:""; position:absolute; left:38px; top:20px; bottom:20px; width:2px;
  background:linear-gradient(180deg,transparent,rgba(37,99,235,.4),rgba(6,182,212,.4),transparent);
}
.it-step{
  position:relative; display:grid; grid-template-columns:78px 1fr; gap:22px;
  align-items:flex-start; padding:22px 26px 22px 0; margin-bottom:18px;
  border-radius:var(--it-r);
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  box-shadow:var(--it-shadow-sm);
  transition:transform .4s ease, box-shadow .4s ease;
}
.it-step:hover{ transform:translateX(8px); box-shadow:0 34px 70px -34px rgba(37,99,235,.45); }
.it-step-num{
  justify-self:center; width:56px; height:56px; border-radius:20px;
  display:grid; place-items:center; margin-left:10px;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:18px; color:#fff;
  background:linear-gradient(135deg,var(--it-primary),var(--it-accent));
  box-shadow:0 16px 30px -14px rgba(37,99,235,.8);
}
.it-step h3{ font-size:19px; font-weight:700; margin:8px 0 8px; }
.it-step p{ color:var(--it-gray); font-size:14.5px; line-height:1.7; margin:0; }

/* ==========================================================
   TECHNOLOGY PARTNERS
   ========================================================== */
.it-partners{ padding:90px 0; }
.it-partner-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.it-partner{
  display:grid; place-items:center; height:96px; border-radius:24px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(15,23,42,.06);
  backdrop-filter:blur(14px);
  font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:#334155;
  box-shadow:var(--it-shadow-sm);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), color .3s ease, box-shadow .4s ease;
}
.it-partner:hover{
  transform:translateY(-8px) scale(1.03); color:var(--it-primary);
  box-shadow:0 34px 64px -30px rgba(37,99,235,.45);
}

/* ==========================================================
   SPECIALIST MODULES
   ========================================================== */
.it-modules{ padding:90px 0; background:#fff; }
.it-modules-layout{ display:grid; grid-template-columns:320px 1fr; gap:32px; align-items:start; }
.it-module-lead{
  position:sticky; top:96px;
  padding:30px; border-radius:var(--it-r); color:#fff;
  background:linear-gradient(150deg,#0F172A,#1e3a8a 70%,#0e7490);
  box-shadow:0 40px 80px -36px rgba(15,23,42,.7);
}
.it-module-lead h3{ font-size:22px; font-weight:700; margin-bottom:12px; }
.it-module-lead p{ color:#cbd5e1; font-size:14.5px; line-height:1.75; margin:0; }
.it-module-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.it-module{
  display:block; padding:24px; border-radius:26px; text-decoration:none;
  background:rgba(248,250,252,.9);
  border:1px solid rgba(15,23,42,.06);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background .3s ease;
}
.it-module strong{ display:block; font-size:16.5px; font-weight:700; color:var(--it-dark); margin-bottom:8px; font-family:'Poppins',sans-serif; }
.it-module span{ color:var(--it-gray); font-size:14px; line-height:1.65; }
.it-module:hover{ transform:translateY(-6px); background:#fff; box-shadow:0 34px 64px -32px rgba(37,99,235,.4); }

/* ==========================================================
   FAQ
   ========================================================== */
.it-faq{ padding:90px 0; }
.it-faq-list{ max-width:880px; margin:0 auto; display:grid; gap:14px; }
.it-faq-item{
  border-radius:26px; padding:22px 26px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(15,23,42,.06);
  backdrop-filter:blur(14px);
  box-shadow:var(--it-shadow-sm);
  transition:box-shadow .35s ease;
}
.it-faq-item[open]{ box-shadow:0 34px 64px -34px rgba(37,99,235,.4); }
.it-faq-item summary{
  cursor:pointer; list-style:none;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:16.5px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.it-faq-item summary::-webkit-details-marker{ display:none; }
.it-faq-item summary::after{
  content:"+"; font-size:22px; color:var(--it-primary); line-height:1;
  transition:transform .3s ease;
}
.it-faq-item[open] summary::after{ transform:rotate(45deg); }
.it-faq-item p{
  color:var(--it-gray); font-size:14.8px; line-height:1.75; margin:14px 0 0;
  animation:itFadeUp .4s ease both;
}
@keyframes itFadeUp{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }

/* ==========================================================
   CTA
   ========================================================== */
.it-cta{ position:relative; overflow:hidden; padding:100px 24px; }
.it-cta-bg{
  position:absolute; inset:0;
  background:linear-gradient(120deg,#0F172A,#1d4ed8 48%,#0891b2);
  background-size:200% 200%;
  animation:itGradShift 12s ease-in-out infinite;
}
.it-cta-bg::after{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(600px 380px at 20% 20%, rgba(255,255,255,.22), transparent 60%),
             radial-gradient(560px 360px at 80% 70%, rgba(6,182,212,.35), transparent 62%);
  animation:itFloat 18s ease-in-out infinite;
}
.it-cta-inner{
  position:relative; z-index:2; max-width:820px; margin:0 auto; text-align:center; color:#fff;
}
.it-cta-inner h2{ font-size:clamp(28px,4vw,46px); line-height:1.14; font-weight:800; }
.it-cta-inner p{ margin:18px auto 30px; max-width:620px; color:rgba(255,255,255,.86); font-size:17px; line-height:1.75; }
.it-cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1100px){
  .it-cards{ grid-template-columns:repeat(2,1fr); }
  .it-why-grid{ grid-template-columns:repeat(2,1fr); }
  .it-modules-layout{ grid-template-columns:1fr; }
  .it-module-lead{ position:static; }
}
@media (max-width:900px){
  .it-hero{ padding:80px 0 90px; }
  .it-feature{ grid-template-columns:1fr; padding:26px; }
  .it-feature--rev .it-feature-copy,
  .it-feature--rev .it-feature-media{ order:initial; }
  .it-stats-grid{ grid-template-columns:repeat(2,1fr); }
  .it-module-grid{ grid-template-columns:1fr; }
  .it-fc{ display:none; }
}
@media (max-width:620px){
  .it-cards{ grid-template-columns:1fr; }
  .it-why-grid{ grid-template-columns:1fr; }
  .it-dash-kpis{ grid-template-columns:1fr; }
  .it-step{ grid-template-columns:60px 1fr; gap:14px; padding-right:18px; }
  .it-step-num{ width:46px; height:46px; border-radius:16px; font-size:15px; margin-left:6px; }
  .it-timeline::before{ left:32px; }
  .it-btn{ padding:13px 22px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}
}/* ================================================================
   NAVBAR + FOOTER (standalone version of microhub.css chrome
   so this page renders correctly outside the main site)
   ================================================================ */
body{ margin:0; font-family:'Inter',system-ui,sans-serif; color:#0f172a; background:#fff; }
a{ color:inherit; text-decoration:none; }

.navbar{
  position:fixed; top:0; left:0; right:0; width:100%; top:0; z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid #eef1f6;
}
.navbar-container{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; gap:24px;
}
.logo-text{
  font-family:'JetBrains Mono',monospace; font-weight:800;
  font-size:18px; letter-spacing:.02em; color:#0f172a;
}
.logo-text span{ color:#0877c9; }
.logo-text.white{ color:#fff; }
.logo-text.white span{ color:#5ab8ff; }

.nav-menu{ display:flex; align-items:center; gap:26px; }
.nav-menu > a,
.nav-item > a{
  font-size:14.5px; font-weight:500; color:#334155;
  padding:8px 2px; transition:color .2s ease; cursor:pointer;
}
.nav-menu > a:hover,
.nav-item > a:hover{ color:#0877c9; }

.nav-item.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute; top:calc(100% + 10px); left:-14px;
  min-width:280px; background:#fff;
  border:1px solid #eef1f6; border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(15,23,42,.25);
  padding:10px; opacity:0; visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:120;
}
.nav-item.dropdown:hover .dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-menu a{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:10px;
  font-size:14px; color:#0f172a;
  transition:background .15s ease;
}
.dropdown-menu a:hover{ background:#f4f7fb; color:#0877c9; }
.dropdown-menu a strong{ font-weight:600; font-size:14px; }
.dropdown-menu a small{ color:#64748b; font-size:12px; }

.nav-actions{ display:flex; align-items:center; gap:12px; }
.primary-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#0f172a; color:#fff;
  padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:600;
  border:1px solid #0f172a;
  transition:transform .25s ease, background .25s ease;
}
.primary-btn.small{ padding:9px 16px; font-size:13.5px; }
.primary-btn:hover{ background:#0877c9; border-color:#0877c9; transform:translateY(-1px); }
.primary-btn span{ transition:transform .25s ease; }
.primary-btn:hover span{ transform:translateX(3px); }

.mobile-menu{
  display:none; background:transparent; border:0; cursor:pointer;
  width:36px; height:36px; padding:8px;
  flex-direction:column; justify-content:space-between;
}
.mobile-menu span{ display:block; height:2px; background:#0f172a; border-radius:2px; }

@media (max-width: 960px){
  .nav-menu{ display:none; }
  .mobile-menu{ display:flex; }
}

/* ================= FOOTER ================= */
footer{
  background:#0b0d12; color:#cbd5e1;
  padding:64px 6vw 32px;
  border-top:1px solid rgba(255,255,255,.05);
  position:relative;
}
.footer-container{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.footer-brand p{
  margin-top:14px; color:#94a3b8; font-size:14px; line-height:1.65;
  max-width:340px;
}
footer h4{
  color:#fff; font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 16px;
}
footer a{
  display:block; color:#94a3b8; font-size:14px;
  padding:6px 0; transition:color .2s ease;
}
footer a:hover{ color:#5ab8ff; }
.footer-bottom{
  max-width:1280px; margin:40px auto 0;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; gap:16px;
  color:#64748b; font-size:12.5px; letter-spacing:.03em;
}
.footer-watermark{
  position:relative; overflow:hidden; background:#0b0d12;
  line-height:0; pointer-events:none;
}
.footer-watermark span{
  display:block; text-align:center;
  font-family:'JetBrains Mono',monospace; font-weight:800;
  font-size:clamp(60px,16vw,220px); line-height:.9;
  background:linear-gradient(180deg,rgba(90,184,255,.14),rgba(90,184,255,0));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.02em; padding:20px 0 30px;
}

@media (max-width: 900px){
  .footer-container{ grid-template-columns:1fr 1fr; }
  .footer-bottom{ flex-direction:column; }
}
@media (max-width: 520px){
  .footer-container{ grid-template-columns:1fr; }
}

/* ==========================================================
   HERO BACKGROUND PHOTO
   ========================================================== */
.it-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../../img/img-service/amc-hero.jpg") center/cover no-repeat;
  opacity:.30;
  animation:itHeroZoom 24s ease-in-out infinite alternate;
}
.it-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(238,244,255,.80) 0%, rgba(238,244,255,.62) 38%, rgba(248,250,252,.94) 100%),
    radial-gradient(760px 460px at 50% 20%, rgba(255,255,255,.55), transparent 70%);
}
.it-hero .it-mesh{ z-index:1; }
@keyframes itHeroZoom{ from{ transform:scale(1) } to{ transform:scale(1.09) } }

/* ==========================================================
   SPLIT: copy left · cards right
   ========================================================== */
.it-split{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start;
}
.it-split .it-split-copy{
  position:sticky; top:96px; text-align:left; max-width:none; margin:0;
}
.it-split .it-split-copy h2{ text-align:left; }
.it-split .it-split-copy p{ text-align:left; margin-left:0; }
.it-split-copy .it-btn{ margin-top:26px; }
.it-split-copy .it-split-deco{
  display:block; margin-top:34px; height:3px; width:120px; border-radius:99px;
  background:linear-gradient(90deg,var(--it-primary),var(--it-accent));
  animation:itDecoGrow 3.6s ease-in-out infinite;
}
@keyframes itDecoGrow{ 0%,100%{ width:90px; opacity:.7 } 50%{ width:190px; opacity:1 } }
.it-split .it-cards{ grid-template-columns:repeat(2,1fr); }
.it-split .it-card:nth-child(even){ transform:translateY(28px); }
.it-split .it-card:nth-child(even):hover{ transform:translateY(18px) scale(1.02); }
.it-split .it-card:nth-child(odd):hover{ transform:translateY(-10px) scale(1.02); }
.it-split .it-card .it-card-ico{ transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.it-split .it-card:hover .it-card-ico{ transform:rotate(-8deg) scale(1.08); }
.it-split .it-card .it-learn i{ transition:transform .35s ease; display:inline-block; }
.it-split .it-card:hover .it-learn i{ transform:translateX(6px); }

@media (max-width:980px){
  .it-split{ grid-template-columns:1fr; gap:36px; }
  .it-split .it-split-copy{ position:static; }
  .it-split .it-cards{ grid-template-columns:1fr; }
  .it-split .it-card:nth-child(even){ transform:none; }
  .it-hero::before{ opacity:.22; }
}

/* ==========================================================
   OUTCOME SIGNALS — split layout (copy left · cards right)
   ========================================================== */
.it-why .it-split{ align-items:start; }
.it-why .it-why-grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
.it-why .it-why-card{
  position:relative; overflow:hidden; isolation:isolate;
  padding:32px 26px 30px;
}
.it-why .it-why-card:nth-child(even){ transform:translateY(30px); }
.it-why .it-why-card::before{
  content:""; position:absolute; inset:0 auto auto 0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--it-primary),var(--it-accent));
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.it-why .it-why-card::after{
  content:""; position:absolute; z-index:-1; width:230px; height:230px; right:-90px; bottom:-110px;
  border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.28),transparent 70%);
  opacity:0; transform:scale(.6); transition:opacity .55s ease, transform .55s ease;
}
.it-why .it-why-card:hover::before{ transform:scaleX(1); }
.it-why .it-why-card:hover::after{ opacity:1; transform:scale(1); }
.it-why .it-why-card:nth-child(even):hover{ transform:translateY(20px) scale(1.02); }
.it-why .it-why-card:nth-child(odd):hover{ transform:translateY(-10px) scale(1.02); }

/* animated signal meter inside each card */
.it-why .it-why-card h3{ display:flex; align-items:center; gap:10px; }
.it-why .it-why-card h3::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:var(--it-primary); box-shadow:0 0 0 0 rgba(37,99,235,.45);
  animation:itSignalPulse 2.4s ease-out infinite;
}
.it-why .it-why-card:nth-child(2) h3::before{ animation-delay:.4s; }
.it-why .it-why-card:nth-child(3) h3::before{ animation-delay:.8s; }
.it-why .it-why-card:nth-child(4) h3::before{ animation-delay:1.2s; }
@keyframes itSignalPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,99,235,.45); }
  70%{ box-shadow:0 0 0 12px rgba(37,99,235,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,99,235,0); }
}
.it-why .it-tagchip{ transition:transform .4s ease, background .4s ease, color .4s ease; }
.it-why .it-why-card:hover .it-tagchip{
  transform:translateY(-2px); color:#fff;
  background:linear-gradient(135deg,var(--it-primary),var(--it-accent));
}

@media (max-width:980px){
  .it-why .it-why-grid{ grid-template-columns:1fr; }
  .it-why .it-why-card:nth-child(even){ transform:none; }
  .it-why .it-why-card:nth-child(even):hover{ transform:translateY(-8px) scale(1.01); }
}