/* ==========================================================
   MESTRO WEB SOLUTION — SHARED STYLESHEET
   ========================================================== */
:root{
  --navy:#0B1E3D;
  --navy-2:#122C55;
  --navy-3:#1A3564;
  --paper:#F6F7FA;
  --ink:#101826;
  --gold:#C9973B;
  --gold-soft:#E4B563;
  --azure:#3E6FC4;
  --slate:#5B6B82;
  --line:#2C4270;
  --white:#FFFFFF;
  --radius:14px;
  --radius-sm:8px;
  --ease:cubic-bezier(.16,.84,.44,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow.light{color:var(--gold-soft);}
.eyebrow.light::before{background:var(--gold-soft);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* ================= PAGE LOAD FADE ================= */
body{ opacity:0; }
body.loaded{ opacity:1; transition:opacity .5s var(--ease); }

/* ================= SCROLL REVEAL ================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-1{transition-delay:.05s;}
.reveal-2{transition-delay:.15s;}
.reveal-3{transition-delay:.25s;}
.reveal-4{transition-delay:.35s;}

/* ================= TOP PROGRESS BAR ================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  z-index:400; width:0%;
  transition:width .1s linear;
}

/* ================= NAV ================= */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,30,61,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:padding .25s ease, background .25s ease;
}
header.shrink{background:rgba(11,30,61,0.97);}
.navwrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  max-width:1180px; margin:0 auto;
  transition:padding .25s ease;
}
header.shrink .navwrap{padding:11px 24px;}
.logo{
  display:flex; flex-direction:column; color:var(--white);
  font-family:'Space Grotesk', sans-serif;
}
.logo .mark{font-size:1.15rem; font-weight:700; letter-spacing:0.01em;}
.logo .mark span{color:var(--gold);}
.logo .sub{font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.16em; color:#8CA0C4; text-transform:uppercase;}
nav.mainnav ul{
  display:flex; gap:34px; align-items:center;
}
nav.mainnav a{
  color:#D7E0F0; font-size:0.92rem; font-weight:500;
  position:relative; padding:6px 0;
}
nav.mainnav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold); transition:width .25s var(--ease);
}
nav.mainnav a:hover::after, nav.mainnav a.active::after{width:100%;}
nav.mainnav a:hover, nav.mainnav a.active{color:var(--white);}

/* ---- Services nav dropdown ---- */
.has-dropdown{position:relative; padding-bottom:8px; margin-bottom:-8px;}
.has-dropdown > a{display:inline-flex; align-items:center; gap:5px;}
.nav-caret{width:12px; height:12px; stroke:#8CA0C4; transition:transform .2s ease;}
.has-dropdown:hover .nav-caret{transform:rotate(180deg); stroke:var(--gold-soft);}
.nav-dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-4px);
  background:var(--white); border-radius:12px; box-shadow:0 20px 46px rgba(16,24,38,0.22);
  min-width:220px; padding:8px; list-style:none;
  opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index:120;
}
.has-dropdown:hover .nav-dropdown,
.nav-dropdown:hover{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.nav-dropdown li a{
  display:block; padding:11px 16px; border-radius:8px; font-size:0.88rem; color:var(--ink) !important;
  font-weight:500; white-space:nowrap;
}
.nav-dropdown li a:hover{background:var(--paper); color:var(--navy) !important;}
.nav-dropdown li a::after{display:none;}

.mobile-panel li.mobile-sub a{
  font-size:0.92rem; padding-left:16px; color:#AAB9D6 !important; font-weight:400;
  position:relative;
}
.mobile-panel li.mobile-sub a::before{content:'↳'; margin-right:8px; color:var(--gold-soft);}
.navcta{
  background:var(--gold);
  color:var(--navy) !important;
  padding:10px 20px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:0.88rem;
  white-space:nowrap;
}
.navcta:hover{background:var(--gold-soft);}
.navactions{display:flex; align-items:center; gap:18px;}

.hamburger{
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  width:26px; background:none; border:none; padding:4px;
}
.hamburger span{display:block; height:2px; width:100%; background:var(--white); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-panel{
  position:fixed; inset:0 0 0 auto; width:min(78vw, 320px); height:100vh;
  background:var(--navy-2); z-index:150;
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  padding:100px 32px 32px;
  box-shadow:-10px 0 40px rgba(0,0,0,0.3);
}
.mobile-panel.open{transform:translateX(0);}
.mobile-panel ul{display:flex; flex-direction:column; gap:26px;}
.mobile-panel a{color:var(--white); font-size:1.15rem; font-weight:500;}
.mobile-panel .navcta{display:inline-block; margin-top:10px;}
.scrim{
  position:fixed; inset:0; background:rgba(5,12,26,0.5); z-index:140;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.scrim.open{opacity:1; pointer-events:auto;}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:0.94rem;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--gold); color:var(--navy); box-shadow:0 8px 24px rgba(201,151,59,0.0);}
.btn-primary:hover{background:var(--gold-soft); box-shadow:0 10px 28px rgba(201,151,59,0.35);}
.btn-ghost{border-color:rgba(255,255,255,0.35); color:var(--white);}
.btn-whatsapp{
  background:#25D366; color:var(--white); border-color:#25D366;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-whatsapp svg{width:17px; height:17px; fill:var(--white); flex:none;}
.btn-whatsapp:hover{background:#1EBE5A; border-color:#1EBE5A;}
.btn-ghost:hover{background:rgba(255,255,255,0.08);}
.btn-dark{background:var(--navy); color:var(--white);}
.btn-dark:hover{background:var(--navy-2); box-shadow:0 10px 26px rgba(11,30,61,0.25);}

/* ================= PAGE HERO (inner pages) ================= */
.pagehero{
  position:relative;
  background:
    radial-gradient(900px 420px at 85% -15%, rgba(201,151,59,0.20), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:var(--white);
  padding:76px 0 84px;
  overflow:hidden;
}
.pagehero .blob{
  position:absolute; border-radius:50%; filter:blur(60px);
  opacity:0.35; pointer-events:none;
}
.pagehero .blob1{width:340px; height:340px; background:var(--gold); top:-120px; right:8%; animation:float1 12s ease-in-out infinite;}
.pagehero .blob2{width:260px; height:260px; background:var(--azure); bottom:-100px; left:6%; animation:float2 14s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,40px);}}
@keyframes float2{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-30px);}}
.pagehero h1{font-size:clamp(2rem, 4vw, 3rem); margin:16px 0 14px; position:relative;}
.pagehero p{color:#C4D0E6; max-width:560px; font-size:1.04rem; position:relative;}
.breadcrumb{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:#8CA0C4;
  margin-top:22px; position:relative;
}
.breadcrumb a:hover{color:var(--gold-soft);}

/* ================= SECTION SHELLS ================= */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.3rem); margin-top:14px;}
.section-head p{color:var(--slate); margin-top:14px; font-size:1.02rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ================= CARD HOVER LIFT ================= */
.lift{transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.lift:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(16,24,38,0.12);}

/* ================= STATS / COUNTERS ================= */
.stat-row{display:flex; gap:40px; flex-wrap:wrap;}
.stat-row div{min-width:120px;}
.stat-row .num{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.7rem; font-weight:700; color:var(--gold-soft);
}
.stat-row .lbl{font-size:0.82rem; color:#9FB2D4;}

/* ================= FOOTER ================= */
footer{background:var(--navy); color:#9FB2D4; padding:44px 0 28px;}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;
}
.footer-brand .mark{font-family:'Space Grotesk', sans-serif; color:var(--white); font-size:1.1rem; font-weight:700;}
.footer-brand .mark span{color:var(--gold);}
.footer-links{display:flex; gap:28px; flex-wrap:wrap;}
.footer-links a{font-size:0.88rem; color:#AAB9D6;}
.footer-links a:hover{color:var(--white);}
.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.footer-social a:hover{background:var(--gold); transform:translateY(-2px);}
.footer-social a svg{width:16px; height:16px; stroke:var(--white);}
.footer-legal{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:10px;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:20px;
  margin-top:24px;
  font-size:0.82rem;
}
.footer-legal a{color:#AAB9D6;}
.footer-legal a:hover{color:var(--gold-soft);}
.footer-legal .sep{color:rgba(255,255,255,0.25);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:18px;
  margin-top:18px;
  font-size:0.86rem;
}

/* ---- Professional multi-column footer ---- */
.footer-grid-pro{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px;
  padding-bottom:36px;
}
.footer-col-brand .mark{font-family:'Space Grotesk', sans-serif; color:var(--white); font-size:1.15rem; font-weight:700;}
.footer-col-brand .mark span{color:var(--gold);}
.footer-tagline{font-size:0.88rem; color:#9FB2D4; line-height:1.7; margin:14px 0 20px; max-width:320px;}
.footer-col h4{
  font-family:'Space Grotesk', sans-serif; color:var(--white); font-size:0.95rem;
  margin-bottom:18px; letter-spacing:0.01em;
}
.footer-col ul{display:flex; flex-direction:column; gap:12px;}
.footer-col ul li a{font-size:0.88rem; color:#9FB2D4; transition:color .2s ease;}
.footer-col ul li a:hover{color:var(--gold-soft);}
.footer-contact-list li{
  display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:#9FB2D4;
}
.footer-contact-list li svg{width:16px; height:16px; stroke:var(--gold-soft); flex:none; margin-top:2px;}
.footer-contact-list li a{color:#9FB2D4; transition:color .2s ease;}
.footer-contact-list li a:hover{color:var(--gold-soft);}
.footer-wa-btn{
  margin-top:22px; width:100%; justify-content:center; padding:12px 18px; font-size:0.9rem;
}
.footer-wa-btn svg{width:16px; height:16px;}

.footer-divider{height:1px; background:rgba(255,255,255,0.1);}
.footer-bottom-pro{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top:20px; font-size:0.84rem; color:#9FB2D4;
}
.footer-bottom-pro .footer-legal{
  border-top:none; margin-top:0; padding-top:0; justify-content:flex-end; gap:14px; font-size:0.84rem;
}

@media (max-width:1000px){
  .footer-grid-pro{grid-template-columns:1fr 1fr; row-gap:32px;}
  .footer-col-brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  .footer-grid-pro{grid-template-columns:1fr;}
  .footer-bottom-pro{flex-direction:column; align-items:flex-start;}
  .footer-bottom-pro .footer-legal{justify-content:flex-start;}
}

/* ================= WHATSAPP FLOAT ================= */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:200;
  width:60px; height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  transition:transform .2s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:30px; height:30px; fill:#fff;}
.wa-pulse{
  position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:0.55;
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1); opacity:0.55;}
  100%{transform:scale(1.9); opacity:0;}
}

/* ================= LIVE CHAT WIDGET ================= */
.livechat-float{
  position:fixed; bottom:26px; left:26px; z-index:200;
  width:60px; height:60px;
  background:var(--navy);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  transition:transform .2s var(--ease);
  border:none; cursor:pointer;
}
.livechat-float:hover{transform:scale(1.08);}
.livechat-float svg{width:26px; height:26px; stroke:var(--gold-soft);}
.livechat-badge{
  position:absolute; top:-4px; right:-4px;
  width:16px; height:16px; border-radius:50%;
  background:#E4483A; border:2px solid var(--paper);
}
.livechat-panel{
  position:fixed; bottom:98px; left:26px; z-index:201;
  width:310px; max-width:calc(100vw - 40px);
  background:var(--white); border-radius:16px;
  box-shadow:0 20px 50px rgba(16,24,38,0.25);
  overflow:hidden;
  opacity:0; transform:translateY(16px) scale(0.97);
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.livechat-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.livechat-head{
  background:var(--navy); color:var(--white); padding:18px 20px;
  display:flex; align-items:center; gap:12px;
}
.livechat-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--navy);
}
.livechat-head .name{font-size:0.95rem; font-weight:600;}
.livechat-head .status{font-size:0.76rem; color:#9FE0B0; display:flex; align-items:center; gap:6px;}
.livechat-head .status::before{content:''; width:7px; height:7px; border-radius:50%; background:#3ECF6E; display:inline-block;}
.livechat-body{padding:18px 20px; background:#F4F6FA;}
.livechat-bubble{
  background:var(--white); border-radius:12px 12px 12px 4px;
  padding:12px 14px; font-size:0.86rem; color:var(--ink);
  box-shadow:0 2px 8px rgba(16,24,38,0.06); margin-bottom:14px;
}
.livechat-options{display:flex; flex-direction:column; gap:8px;}
.livechat-options a{
  display:flex; align-items:center; gap:10px;
  background:var(--white); border:1px solid #E4E8F0; border-radius:10px;
  padding:11px 14px; font-size:0.85rem; font-weight:500; color:var(--ink);
  transition:border-color .2s ease, transform .2s ease;
}
.livechat-options a:hover{border-color:var(--gold); transform:translateX(3px);}
.livechat-options a svg{width:17px; height:17px; stroke:var(--gold); flex:none;}

/* ================= TOP UTILITY BAR ================= */
.topbar{
  background:#081428;
  color:#9FB2D4;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.topbar-wrap{
  max-width:1180px; margin:0 auto; padding:9px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar-contacts{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.topbar-contacts a{
  display:inline-flex; align-items:center; gap:7px; color:#C4D0E6;
  transition:color .2s ease;
}
.topbar-contacts a:hover{color:var(--gold-soft);}
.topbar-contacts svg{width:13px; height:13px; stroke:var(--gold-soft); flex:none;}
.topbar-tag{display:flex; align-items:center; gap:8px; color:#7F93BE; letter-spacing:0.04em;}
.topbar-tag .liv{width:6px; height:6px; border-radius:50%; background:#3ECF6E; display:inline-block; animation:dotpulse 2.4s ease-in-out infinite;}
@media (max-width:760px){
  .topbar-tag{display:none;}
  .topbar-contacts{gap:14px;}
}
@media (max-width:480px){
  .topbar-wrap{padding:8px 16px;}
  .topbar-contacts a span{display:none;}
}

/* header sits right below topbar, still sticky */
header{top:0;}

/* ================= LOGO — FULL NAME ================= */
.logo .mark{white-space:nowrap;}
.logo .mark .accent{color:var(--gold);}

/* ================= BUTTON SHINE ================= */
.btn{position:relative; overflow:hidden;}
.btn::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);
  transition:left .6s var(--ease);
}
.btn:hover::before{left:130%;}

/* ================= OFFERINGS (SERVICES DETAIL) ================= */
.offerings-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #E4E8F0;
  overflow-x:auto;
  scrollbar-width:none;
}
.offerings-nav::-webkit-scrollbar{display:none;}
.offerings-nav-wrap{
  display:flex; gap:6px; padding:14px 24px; max-width:1180px; margin:0 auto; width:max-content;
}
.offerings-nav a{
  flex:none; font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  padding:9px 16px; border-radius:30px; color:var(--slate); white-space:nowrap;
  border:1px solid transparent; transition:all .2s ease;
}
.offerings-nav a:hover{color:var(--ink); border-color:#E4E8F0; background:var(--paper);}
.offerings-nav a strong{color:var(--gold); margin-right:6px;}

.nav-slider-arrow{
  position:absolute; top:0; bottom:0; width:44px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer;
}
.nav-slider-arrow.prev{left:0; background:linear-gradient(90deg, rgba(255,255,255,0.97) 40%, transparent);}
.nav-slider-arrow.next{right:0; background:linear-gradient(270deg, rgba(255,255,255,0.97) 40%, transparent);}
.nav-slider-arrow svg{width:16px; height:16px; stroke:var(--navy);}
@media (max-width:700px){ .nav-slider-arrow{display:none;} }

/* ================= GENERIC CARD SLIDER (testimonials etc.) ================= */
.slider-shell{position:relative; padding:0 54px;}
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--white); border:1px solid #E4E8F0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(16,24,38,0.12);
  cursor:pointer; z-index:6; transition:background .2s ease, box-shadow .2s ease, transform .2s var(--ease);
}
.slider-arrow:hover{background:var(--navy); transform:translateY(-50%) scale(1.06);}
.slider-arrow:hover svg{stroke:var(--gold-soft);}
.slider-arrow svg{width:18px; height:18px; stroke:var(--ink); transition:stroke .2s ease;}
.slider-arrow.prev{left:0;}
.slider-arrow.next{right:0;}
@media (max-width:700px){
  .slider-shell{padding:0 8px;}
  .slider-arrow{width:38px; height:38px;}
}

.slider-dots{display:flex; justify-content:center; gap:8px; margin-top:26px;}
.slider-dots button{
  width:8px; height:8px; border-radius:50%; background:#D7DEE8; border:none; cursor:pointer;
  padding:0; transition:background .25s ease, width .25s ease;
}
.slider-dots button.active{background:var(--gold); width:22px; border-radius:5px;}

.offer-block{padding:96px 0; border-bottom:1px solid #ECEEF3;}
.offer-block:nth-child(even){background:var(--paper);}
.offer-block:last-of-type{border-bottom:none;}
.offer-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.offer-block.alt .offer-grid{grid-template-columns:0.95fr 1.05fr;}
.offer-block.alt .offer-text{order:2;}
.offer-block.alt .offer-visual{order:1;}

.offer-tag{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--gold);
  letter-spacing:0.08em; text-transform:uppercase; display:flex; align-items:center; gap:10px;
}
.offer-tag .n{
  width:30px; height:30px; border-radius:8px; background:rgba(201,151,59,0.12);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--gold);
}
.offer-text h2{font-size:clamp(1.5rem,2.6vw,2.05rem); margin:16px 0 14px;}
.offer-text p.desc{color:#33415A; font-size:1rem; margin-bottom:22px; max-width:540px;}
.offer-features{display:grid; gap:11px; margin-bottom:26px;}
.offer-features li{
  display:flex; gap:10px; align-items:flex-start; font-size:0.94rem; color:var(--ink);
}
.offer-features li::before{
  content:''; flex:none; width:8px; height:8px; margin-top:6px;
  background:var(--gold); border-radius:2px; transform:rotate(45deg);
}
.offer-cta{display:flex; gap:12px; flex-wrap:wrap;}
.offer-cta .btn{padding:12px 22px; font-size:0.88rem;}

/* Visual flow card */
.offer-visual{
  background:var(--navy); border-radius:var(--radius); padding:30px 28px;
  box-shadow:0 20px 50px rgba(11,30,61,0.18); position:relative; overflow:hidden;
}
.offer-visual::after{
  content:''; position:absolute; width:220px; height:220px; background:var(--gold);
  border-radius:50%; filter:blur(70px); opacity:0.16; top:-90px; right:-60px; pointer-events:none;
}
.offer-visual-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.08em;
  color:#8CA0C4; text-transform:uppercase; margin-bottom:22px; position:relative;
}
.offer-visual-head .live{display:flex; align-items:center; gap:6px; color:#7FE0A0;}
.offer-visual-head .live .liv{width:6px; height:6px; border-radius:50%; background:#3ECF6E; animation:dotpulse 2.2s ease-in-out infinite;}

.offer-flow{display:flex; flex-direction:column; gap:0; position:relative;}
.offer-step{display:flex; gap:16px; padding:13px 0; position:relative;}
.offer-step:not(:last-child)::before{
  content:''; position:absolute; left:14px; top:38px; bottom:-13px; width:1px;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,0.22) 0 6px, transparent 6px 11px);
}
.offer-step .node{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:rgba(201,151,59,0.14); border:1px solid rgba(201,151,59,0.4);
  display:flex; align-items:center; justify-content:center; z-index:1;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--gold-soft); font-weight:600;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.offer-step.active .node{background:var(--gold); color:var(--navy); border-color:var(--gold); transform:scale(1.08);}
.offer-step .txt{padding-top:3px; transition:opacity .3s ease;}
.offer-step .txt .t1{font-size:0.92rem; font-weight:600; color:var(--white);}
.offer-step .txt .t2{font-size:0.78rem; color:#93A6C9; margin-top:2px;}
.offer-step:not(.active) .txt{opacity:0.55;}

.offer-pillrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; position:relative;}
.offer-pillrow span{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:#AAB9D6;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  padding:6px 12px; border-radius:20px;
}

.svc-intro{background:var(--white);}
.svc-highlight{
  background:linear-gradient(120deg, #FBF3E4, #F6F7FA);
  border:1px solid #EBD9B4; border-radius:var(--radius);
  padding:8px 18px; display:inline-flex; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:600; color:#8A6416; margin-bottom:18px;
}
.svc-highlight svg{width:15px; height:15px; stroke:#8A6416;}

@media (max-width:900px){
  .offer-grid{grid-template-columns:1fr; gap:34px;}
  .offer-block.alt .offer-text, .offer-block.alt .offer-visual{order:0;}
}
@media (max-width:560px){
  .offer-block{padding:64px 0;}
}

/* ================= BLOG ================= */
.blog-section{background:var(--paper);}
.blog-head-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px;
}
.blog-head-row .section-head{margin-bottom:0;}
.blog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.blog-card{
  background:var(--white); border:1px solid #E4E8F0; border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.blog-card-top{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  padding:28px 24px; position:relative; overflow:hidden;
}
.blog-card-top::after{
  content:''; position:absolute; width:140px; height:140px; border-radius:50%;
  background:var(--gold); opacity:0.15; filter:blur(30px); top:-50px; right:-30px;
}
.blog-tag{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold-soft); background:rgba(201,151,59,0.15); border:1px solid rgba(201,151,59,0.35);
  padding:5px 12px; border-radius:20px; display:inline-block; position:relative;
}
.blog-card-body{padding:24px; display:flex; flex-direction:column; gap:12px; flex:1;}
.blog-card-body h3{font-size:1.08rem; line-height:1.35;}
.blog-card-body p{color:var(--slate); font-size:0.9rem;}
.blog-meta{display:flex; gap:14px; font-size:0.78rem; color:var(--slate); font-family:'IBM Plex Mono', monospace;}
.blog-read{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:0.88rem; color:var(--navy);
  transition:gap .2s ease;
}
.blog-card:hover .blog-read{gap:10px; color:var(--gold);}
.blog-read svg{width:15px; height:15px; stroke:currentColor;}
.blog-more{text-align:center; margin-top:40px;}

@media (max-width:900px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .blog-grid{grid-template-columns:1fr;} .blog-head-row{flex-direction:column; align-items:flex-start;} }

/* ================= ARTICLE PAGE ================= */
.article-hero{padding-bottom:64px;}
.article-hero .blog-tag{margin-bottom:16px;}
.article-hero .art-meta{display:flex; gap:18px; flex-wrap:wrap; margin-top:20px; font-size:0.85rem; color:#AAB9D6; font-family:'IBM Plex Mono', monospace; position:relative;}
.article-body{background:var(--white); padding:80px 0;}
.article-wrap{max-width:760px; margin:0 auto;}
.article-wrap h2{font-size:1.5rem; margin:40px 0 16px;}
.article-wrap h2:first-child{margin-top:0;}
.article-wrap h3{font-size:1.15rem; margin:28px 0 12px; color:var(--navy);}
.article-wrap p{color:#33415A; font-size:1rem; margin-bottom:16px; line-height:1.75;}
.article-wrap ul{margin:0 0 20px 0; display:flex; flex-direction:column; gap:10px;}
.article-wrap ul li{
  position:relative; padding-left:24px; color:#33415A; font-size:0.98rem; line-height:1.6;
}
.article-wrap ul li::before{
  content:''; position:absolute; left:0; top:8px; width:8px; height:8px; background:var(--gold); border-radius:2px; transform:rotate(45deg);
}
.article-callout{
  background:var(--paper); border-left:3px solid var(--gold); border-radius:0 12px 12px 0;
  padding:22px 26px; margin:28px 0; font-size:0.98rem; color:var(--ink); font-style:italic;
}
.article-cta-box{
  background:var(--navy); color:var(--white); border-radius:var(--radius);
  padding:36px; text-align:center; margin-top:48px;
}
.article-cta-box h3{font-size:1.3rem; margin-bottom:10px;}
.article-cta-box p{color:#C4D0E6; margin-bottom:22px; font-size:0.95rem;}
.article-cta-box .btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.article-author{
  display:flex; align-items:center; gap:14px; padding:20px 0; margin-bottom:8px;
  border-bottom:1px solid #E4E8F0;
}
.article-author .aa{
  width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700;
}
.article-author .an{font-size:0.92rem; font-weight:600;}
.article-author .ar{font-size:0.78rem; color:var(--slate);}
.article-back{display:inline-flex; align-items:center; gap:8px; font-size:0.86rem; color:var(--slate); margin-bottom:24px;}
.article-back svg{width:15px; height:15px; stroke:var(--slate);}
.article-back:hover{color:var(--navy);}

/* ================= DIRECTOR'S MESSAGE ================= */
.director{background:var(--white);}
.director-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:start;}
.director-photo{
  background:linear-gradient(150deg, var(--navy) 0%, var(--navy-3) 100%);
  border-radius:var(--radius); padding:40px 28px; color:var(--white);
  text-align:center; position:relative; overflow:hidden;
}
.director-photo::after{
  content:''; position:absolute; width:180px; height:180px; background:var(--gold); opacity:0.18;
  filter:blur(45px); border-radius:50%; top:-60px; right:-40px;
}
.director-avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 18px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-size:2rem; font-weight:700; color:var(--gold-soft);
  position:relative;
}
.director-photo .dname{font-size:1.1rem; font-weight:600; position:relative;}
.director-photo .drole{font-size:0.84rem; color:#AAB9D6; margin-top:4px; position:relative;}
.director-photo .dquote{
  margin-top:24px; font-size:0.92rem; color:#DCE4F2; font-style:italic; line-height:1.6; position:relative;
}
.director-copy{position:relative;}
.director-copy .big-quote-mark{
  font-family:'Space Grotesk', sans-serif; font-size:3.4rem; color:var(--gold); opacity:0.35; line-height:1; margin-bottom:-16px;
}
.director-copy p{color:#33415A; font-size:1rem; margin-bottom:16px; line-height:1.75;}
.director-copy p:first-of-type{font-size:1.08rem; color:var(--ink); font-weight:500;}
.director-copy .sign{margin-top:24px; font-family:'Space Grotesk', sans-serif; font-weight:700; color:var(--navy);}
.director-copy .sign span{display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:400; font-size:0.84rem; color:var(--slate); margin-top:2px;}
.director-note{
  background:var(--paper); border:1px solid #E4E8F0; border-radius:var(--radius);
  padding:28px 30px; margin-top:32px; font-size:0.95rem; color:#33415A; line-height:1.75; font-style:italic;
  position:relative;
}
.director-note::before{content:'"'; font-family:'Space Grotesk',sans-serif; font-size:2.6rem; color:var(--gold); opacity:0.4; position:absolute; top:6px; left:14px; line-height:1;}

@media (max-width:900px){ .director-grid{grid-template-columns:1fr;} }

/* ================= BACK TO TOP ================= */
.totop{
  position:fixed; bottom:26px; right:98px; z-index:200;
  width:44px; height:44px; border-radius:50%;
  background:var(--white); border:1px solid #E4E8F0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(16,24,38,0.15);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
}
.totop.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.totop svg{width:18px; height:18px; stroke:var(--navy);}

/* ================= TESTIMONIALS ================= */
.testimonials{background:var(--paper);}
.t-track-wrap{overflow:hidden; position:relative; margin:0 -24px;}
.t-track-wrap::before, .t-track-wrap::after{
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.t-track-wrap::before{left:0; background:linear-gradient(90deg, var(--paper), transparent);}
.t-track-wrap::after{right:0; background:linear-gradient(270deg, var(--paper), transparent);}
.t-track{display:flex; gap:22px; padding:6px 24px 20px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
.t-track::-webkit-scrollbar{height:6px;}
.t-track::-webkit-scrollbar-thumb{background:#D7DEE8; border-radius:4px;}
.t-card{
  flex:0 0 320px; scroll-snap-align:start;
  background:var(--white); border:1px solid #E4E8F0; border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; gap:16px;
}
.t-stars{display:flex; gap:3px;}
.t-stars svg{width:15px; height:15px; fill:var(--gold);}
.t-quote{color:var(--ink); font-size:0.96rem; line-height:1.65;}
.t-person{display:flex; align-items:center; gap:12px; margin-top:auto;}
.t-avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:linear-gradient(135deg, var(--navy), var(--azure));
  color:var(--white); display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:0.95rem;
}
.t-person .who{font-size:0.9rem; font-weight:600;}
.t-person .role{font-size:0.78rem; color:var(--slate);}
.t-note{font-size:0.8rem; color:var(--slate); text-align:center; margin-top:20px;}

/* ---- Google review enhancements ---- */
.t-card{position:relative;}
.t-top-row{display:flex; align-items:center; justify-content:space-between;}
.t-google-badge{
  display:flex; align-items:center; gap:5px; font-size:0.72rem; color:var(--slate);
  font-weight:600;
}
.t-google-badge svg{width:15px; height:15px;}
.t-date{font-size:0.76rem; color:#B7C0CE;}
.t-quote{flex:1;}

.reviews-summary{
  display:flex; align-items:center; justify-content:center; gap:18px;
  flex-wrap:wrap; margin-top:22px; margin-bottom:8px;
}
.reviews-summary-score{
  font-family:'Space Grotesk', sans-serif; font-size:2.6rem; font-weight:700; color:var(--navy); line-height:1;
}
.reviews-summary-mid{display:flex; flex-direction:column; gap:4px;}
.reviews-summary-mid .t-stars svg{width:20px; height:20px;}
.reviews-summary-mid .count{font-size:0.86rem; color:var(--slate);}
.reviews-summary-divider{width:1px; height:44px; background:#E4E8F0;}
.reviews-summary-google{display:flex; align-items:center; gap:8px;}
.reviews-summary-google svg{width:28px; height:28px;}
.reviews-summary-google .txt{display:flex; flex-direction:column; line-height:1.3;}
.reviews-summary-google .txt strong{font-size:0.9rem; color:var(--ink);}
.reviews-summary-google .txt span{font-size:0.76rem; color:var(--slate);}

.reviews-cta{text-align:center; margin-top:30px;}
.reviews-cta a{margin:0 6px;}

@media (max-width:560px){
  .reviews-summary{gap:12px;}
  .reviews-summary-divider{display:none;}
  .reviews-summary-score{font-size:2.1rem;}
}

.t-video-btn{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  background:rgba(201,151,59,0.12); color:var(--navy); border:1px solid rgba(201,151,59,0.35);
  padding:8px 14px; border-radius:20px; font-size:0.82rem; font-weight:600; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.t-video-btn svg{width:14px; height:14px; color:var(--gold);}
.t-video-btn:hover{background:var(--gold); color:var(--white); transform:translateY(-1px);}
.t-video-btn:hover svg{color:var(--white);}

/* ================= VIDEO TESTIMONIAL MODAL ================= */
.video-modal{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.video-modal.open{opacity:1; pointer-events:auto;}
.video-modal-backdrop{position:absolute; inset:0; background:rgba(8,14,28,0.82); backdrop-filter:blur(4px);}
.video-modal-box{
  position:relative; width:min(880px, 92vw); background:#000; border-radius:14px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.5); transform:scale(0.96); transition:transform .25s ease;
}
.video-modal-box.portrait{width:min(400px, 88vw);}
.video-modal.open .video-modal-box{transform:scale(1);}
.video-modal-frame{position:relative; width:100%; aspect-ratio:16/9; background:#000;}
.video-modal-frame.portrait{aspect-ratio:9/16; max-height:85vh;}
.video-modal-frame iframe, .video-modal-frame video{width:100%; height:100%; border:0; display:block;}
.video-modal-close{
  position:absolute; top:-44px; right:0; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.video-modal-close svg{width:18px; height:18px; stroke:var(--white);}
.video-modal-close:hover{background:var(--gold);}
@media (max-width:600px){
  .video-modal-close{top:-40px; right:4px;}
}

/* ================= LIVE CHAT WIDGET ================= */
.lc-launcher{
  position:fixed; bottom:26px; left:26px; z-index:200;
  width:58px; height:58px; border-radius:50%;
  background:var(--navy); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(11,30,61,0.35);
  transition:transform .2s var(--ease), background .2s ease;
}
.lc-launcher:hover{transform:scale(1.08); background:var(--navy-2);}
.lc-launcher svg{width:26px; height:26px; stroke:var(--gold-soft); transition:opacity .15s ease, transform .15s ease;}
.lc-launcher .lc-icon-close{position:absolute; opacity:0; transform:scale(.6) rotate(-45deg);}
.lc-launcher.open .lc-icon-chat{opacity:0; transform:scale(.6) rotate(45deg);}
.lc-launcher.open .lc-icon-close{opacity:1; transform:scale(1) rotate(0);}
.lc-badge{
  position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%;
  background:#E14B4B; border:2px solid var(--paper);
  animation:pulse 2.4s ease-out infinite;
}
.lc-panel{
  position:fixed; bottom:96px; left:26px; z-index:200;
  width:300px; max-width:calc(100vw - 52px);
  background:var(--white); border-radius:16px;
  box-shadow:0 20px 50px rgba(11,30,61,0.25);
  overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.lc-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.lc-head{
  background:linear-gradient(120deg, var(--navy), var(--navy-3));
  color:var(--white); padding:20px 20px 40px; position:relative;
}
.lc-head .lc-brand{display:flex; align-items:center; gap:10px;}
.lc-dot-live{width:9px; height:9px; border-radius:50%; background:#3EDC81; box-shadow:0 0 0 3px rgba(62,220,129,0.25);}
.lc-head h4{font-size:1rem; margin:0;}
.lc-head p{font-size:0.78rem; color:#AAB9D6; margin-top:3px;}
.lc-bubble{
  background:var(--white); margin:-24px 16px 16px; border-radius:12px; padding:14px 16px;
  box-shadow:0 6px 18px rgba(16,24,38,0.1); font-size:0.86rem; color:var(--ink); position:relative;
}
.lc-actions{padding:0 16px 18px; display:grid; gap:10px;}
.lc-action{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:10px; border:1px solid #E4E8F0;
  background:var(--paper); font-size:0.86rem; font-weight:500; color:var(--ink);
  transition:border-color .2s ease, transform .2s ease;
}
.lc-action:hover{border-color:var(--gold); transform:translateX(3px);}
.lc-action .ico{width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;}
.lc-action.wa .ico{background:#DFF6E7;}
.lc-action.wa .ico svg{fill:#25D366; width:16px; height:16px;}
.lc-action.call .ico{background:rgba(201,151,59,0.14);}
.lc-action.call .ico svg{stroke:var(--gold); width:16px; height:16px;}
.lc-action.mail .ico{background:rgba(62,111,196,0.12);}
.lc-action.mail .ico svg{stroke:var(--azure); width:16px; height:16px;}

@media (max-width:560px){
  .lc-panel{bottom:90px; left:16px;}
  .lc-launcher{left:16px;}
}

/* ================= BLOG (HOME PREVIEW + LISTING) ================= */
.blog-section{background:var(--paper);}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-card{
  background:var(--white); border:1px solid #E4E8F0; border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(16,24,38,0.12);}
.blog-card .thumb{
  height:150px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  display:flex; align-items:center; justify-content:center;
}
.blog-card .thumb::before{
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  background:var(--gold); opacity:0.18; filter:blur(40px); top:-60px; right:-40px;
}
.blog-card .thumb svg{width:38px; height:38px; stroke:var(--gold-soft); position:relative;}
.blog-card .body{padding:24px; display:flex; flex-direction:column; gap:12px; flex:1;}
.blog-cat{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.blog-card h3{font-size:1.05rem; line-height:1.35;}
.blog-card p.excerpt{color:var(--slate); font-size:0.88rem; flex:1;}
.blog-meta{display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--slate); margin-top:auto; padding-top:10px; border-top:1px solid #EEF1F6;}
.blog-readmore{display:inline-flex; align-items:center; gap:5px; color:var(--navy); font-weight:600; font-size:0.85rem;}
.blog-readmore svg{width:14px; height:14px; stroke:var(--gold); transition:transform .2s ease;}
.blog-card:hover .blog-readmore svg{transform:translateX(3px);}
.blog-viewall{text-align:center; margin-top:36px;}

@media (max-width:900px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .blog-grid{grid-template-columns:1fr;} }

/* ---- Blog listing page ---- */
.blog-listing{background:var(--paper);}
.blog-listing .blog-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){ .blog-listing .blog-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .blog-listing .blog-grid{grid-template-columns:1fr;} }

/* ---- Article page typography ---- */
.article-shell{background:var(--white);}
.article-wrap{max-width:760px; margin:0 auto;}
.article-meta-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:18px;}
.article-meta-row .blog-cat{background:rgba(201,151,59,0.12); padding:5px 12px; border-radius:20px;}
.article-meta-row span.dot{color:#C4CCDA;}
.article-meta-row .rt{font-size:0.82rem; color:var(--slate);}
.article-wrap h1{font-size:clamp(1.7rem,3.6vw,2.5rem); margin-bottom:18px;}
.article-lede{font-size:1.1rem; color:#33415A; margin-bottom:30px; line-height:1.7;}
.article-body h2{font-size:1.35rem; margin:38px 0 14px; color:var(--navy);}
.article-body h3{font-size:1.1rem; margin:26px 0 10px; color:var(--ink);}
.article-body p{color:#33415A; font-size:1rem; line-height:1.8; margin-bottom:16px;}
.article-body ul{margin:0 0 20px 0; display:grid; gap:10px;}
.article-body ul li{
  padding-left:24px; position:relative; color:#33415A; font-size:0.98rem; line-height:1.6;
}
.article-body ul li::before{
  content:''; position:absolute; left:0; top:9px; width:8px; height:8px; background:var(--gold);
  border-radius:2px; transform:rotate(45deg);
}
.article-body blockquote{
  border-left:3px solid var(--gold); padding:6px 0 6px 22px; margin:26px 0;
  font-size:1.08rem; font-style:italic; color:var(--navy);
}
.article-callout{
  background:var(--paper); border:1px solid #E4E8F0; border-radius:var(--radius);
  padding:26px 28px; margin:32px 0;
}
.article-callout h4{font-size:1.05rem; margin-bottom:12px; color:var(--navy);}
.article-callout ul{margin-bottom:0;}
.article-faq-item{border-bottom:1px solid #ECEEF3; padding:18px 0;}
.article-faq-item:first-child{padding-top:0;}
.article-faq-item .q{font-weight:600; color:var(--ink); margin-bottom:8px; font-size:0.98rem;}
.article-faq-item .a{color:var(--slate); font-size:0.94rem; line-height:1.6;}
.article-cta{
  background:linear-gradient(120deg, var(--navy), var(--navy-3));
  border-radius:var(--radius); padding:36px; text-align:center; color:var(--white); margin-top:44px;
}
.article-cta h3{font-size:1.4rem; margin-bottom:10px;}
.article-cta p{color:#C4D0E6; margin-bottom:22px; font-size:0.96rem;}
.article-share{display:flex; gap:10px; margin-top:26px; align-items:center;}
.article-share span{font-size:0.82rem; color:var(--slate); margin-right:4px;}
.article-share a{
  width:36px; height:36px; border-radius:50%; background:var(--paper); border:1px solid #E4E8F0;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.article-share a:hover{background:var(--gold);}
.article-share a svg{width:15px; height:15px; stroke:var(--navy);}
.article-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px;}
.article-tags a{
  font-family:'IBM Plex Mono', monospace; font-size:0.74rem; padding:6px 12px; border-radius:20px;
  background:var(--paper); border:1px solid #E4E8F0; color:var(--slate);
}
.related-posts{background:var(--paper); border-top:1px solid #ECEEF3;}

/* ================= DIRECTOR'S MESSAGE ================= */
.director{background:var(--navy); color:var(--white); position:relative; overflow:hidden;}
.director .blob{position:absolute; width:340px; height:340px; background:var(--gold); border-radius:50%; filter:blur(90px); opacity:0.16; top:-120px; right:-60px;}
.director-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:50px; align-items:start; position:relative;}
.director-card{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius);
  padding:30px; text-align:center;
}
.director-photo{
  width:96px; height:96px; border-radius:50%; margin:0 auto 18px; background:linear-gradient(135deg, var(--gold), var(--gold-soft));
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:1.7rem; color:var(--navy);
}
.director-card h4{font-size:1.05rem; margin-bottom:4px;}
.director-card p.role{font-size:0.85rem; color:#9FB2D4; margin-bottom:18px;}
.director-card .quote-mark{font-family:'Space Grotesk',sans-serif; font-size:2.4rem; color:var(--gold-soft); opacity:0.6; line-height:1;}
.director-copy h2{font-size:clamp(1.5rem,2.8vw,2rem); margin-bottom:20px;}
.director-copy p{color:#C4D0E6; font-size:0.98rem; line-height:1.8; margin-bottom:16px;}
.director-copy p.lead-line{color:var(--gold-soft); font-weight:600; font-size:1.05rem;}
.director-signoff{margin-top:24px; font-size:0.92rem; color:#9FB2D4;}
.director-signoff strong{display:block; color:var(--white); font-size:1rem; margin-bottom:2px;}
.director-note{
  margin-top:36px; background:rgba(255,255,255,0.05); border-left:3px solid var(--gold);
  padding:22px 26px; border-radius:0 var(--radius) var(--radius) 0; font-style:italic; color:#D7E0F0; font-size:0.96rem; line-height:1.75;
}

@media (max-width:900px){ .director-grid{grid-template-columns:1fr;} }

/* ================= SITEMAP PAGE ================= */
.sitemap-section{background:var(--white);}
.sitemap-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px;}
.sitemap-col h3{
  font-size:0.95rem; color:var(--navy); margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--gold);
  display:inline-block;
}
.sitemap-col ul{display:grid; gap:9px;}
.sitemap-col a{font-size:0.92rem; color:var(--slate); transition:color .2s ease;}
.sitemap-col a:hover{color:var(--gold);}
@media (max-width:900px){ .sitemap-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .sitemap-grid{grid-template-columns:1fr;} }

/* ================= AI BUSINESS GROWTH SOLUTIONS (FLAGSHIP) ================= */
.ai-hub{background:var(--navy); color:var(--white); position:relative; overflow:hidden;}
.ai-hub .blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:0.22; pointer-events:none;}
.ai-hub .blob1{width:420px; height:420px; background:var(--gold); top:-160px; right:-80px;}
.ai-hub .blob2{width:320px; height:320px; background:var(--azure); bottom:-140px; left:-60px;}
.ai-hub-intro{max-width:720px; margin:0 auto 48px; text-align:center; position:relative;}
.ai-hub-intro h2{font-size:clamp(1.7rem,3.4vw,2.5rem); margin:16px 0 16px;}
.ai-hub-intro p{color:#C4D0E6; font-size:1.05rem;}

.ai-cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; margin-bottom:44px;}
.ai-cat-card{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius);
  padding:24px; transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.ai-cat-card:hover{background:rgba(255,255,255,0.08); transform:translateY(-4px); border-color:rgba(201,151,59,0.4);}
.ai-cat-card .ico{
  width:42px; height:42px; border-radius:10px; background:rgba(201,151,59,0.14);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.ai-cat-card .ico svg{width:20px; height:20px; stroke:var(--gold-soft);}
.ai-cat-card h3{font-size:1rem; color:var(--white); margin-bottom:10px;}
.ai-cat-card ul{display:grid; gap:6px;}
.ai-cat-card ul li{
  font-size:0.84rem; color:#AAB9D6; padding-left:16px; position:relative;
}
.ai-cat-card ul li::before{
  content:''; position:absolute; left:0; top:7px; width:5px; height:5px; background:var(--gold-soft);
  border-radius:1px; transform:rotate(45deg);
}

.ai-why{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius);
  padding:30px 32px; margin-bottom:36px; position:relative;
}
.ai-why h4{font-size:1.05rem; margin-bottom:16px; color:var(--gold-soft);}
.ai-why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.ai-why-grid span{font-size:0.86rem; color:#D7E0F0; padding-left:18px; position:relative;}
.ai-why-grid span::before{content:''; position:absolute; left:0; top:7px; width:6px; height:6px; background:var(--gold); border-radius:50%;}

.ai-benefits{
  background:rgba(201,151,59,0.08); border:1px solid rgba(201,151,59,0.25); border-radius:var(--radius);
  padding:30px 32px; position:relative; margin-bottom:36px;
}
.ai-benefits h4{font-size:1.05rem; margin-bottom:16px; color:var(--white);}
.ai-benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px 20px;}
.ai-benefit-item{display:flex; gap:9px; align-items:flex-start; font-size:0.9rem; color:#E6ECF7;}
.ai-benefit-item svg{width:16px; height:16px; stroke:var(--gold-soft); flex:none; margin-top:2px;}
.ai-hub-tagline{
  text-align:center; font-family:'Space Grotesk',sans-serif; font-size:1.15rem; color:var(--gold-soft);
  margin-bottom:36px; position:relative;
}
.ai-hub-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative;}

@media (max-width:900px){
  .ai-cat-grid{grid-template-columns:1fr 1fr;}
  .ai-why-grid{grid-template-columns:1fr 1fr;}
  .ai-benefit-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .ai-cat-grid{grid-template-columns:1fr;}
  .ai-why-grid{grid-template-columns:1fr;}
  .ai-benefit-grid{grid-template-columns:1fr;}
}

/* ---- Compact AI teaser version for homepage ---- */
.ai-teaser{background:var(--navy); color:var(--white); position:relative; overflow:hidden;}
.ai-teaser .blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:0.22; pointer-events:none;}
.ai-teaser .blob1{width:400px; height:400px; background:var(--gold); top:-150px; right:-70px;}
.ai-teaser .blob2{width:300px; height:300px; background:var(--azure); bottom:-120px; left:-60px;}
.ai-teaser-head{max-width:680px; margin:0 auto 44px; text-align:center; position:relative;}
.ai-teaser-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin:16px 0;}
.ai-teaser-head p{color:#C4D0E6; font-size:1.02rem;}
.ai-teaser-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; margin-bottom:40px;}
.ai-teaser-card{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius);
  padding:22px; text-align:center; transition:background .25s ease, transform .25s ease;
}
.ai-teaser-card:hover{background:rgba(255,255,255,0.09); transform:translateY(-5px);}
.ai-teaser-card .ico{
  width:44px; height:44px; border-radius:10px; background:rgba(201,151,59,0.14); margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
}
.ai-teaser-card .ico svg{width:21px; height:21px; stroke:var(--gold-soft);}
.ai-teaser-card h3{font-size:0.92rem; color:var(--white); margin-bottom:6px;}
.ai-teaser-card p{font-size:0.78rem; color:#9FB2D4;}
.ai-teaser-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; position:relative; margin-bottom:36px;
  padding:22px; background:rgba(201,151,59,0.08); border:1px solid rgba(201,151,59,0.25); border-radius:var(--radius);
}
.ai-teaser-strip span{font-size:0.86rem; color:#E6ECF7; display:flex; align-items:center; gap:7px;}
.ai-teaser-strip svg{width:15px; height:15px; stroke:var(--gold-soft); flex:none;}
.ai-teaser-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative;}

@media (max-width:900px){ .ai-teaser-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .ai-teaser-grid{grid-template-columns:1fr;} .ai-teaser-strip{gap:10px;} }

/* ================= RESPONSIVE ================= */
/* ================= SERVICE EXPLORER DROPDOWN (services.html) ================= */
.mega-explorer{background:var(--paper);}
.explore-dropdown-wrap{max-width:640px; margin:0 auto; position:relative;}
.explore-dropdown-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:var(--navy); color:var(--white); border:none; border-radius:14px;
  padding:20px 26px; font-family:'Space Grotesk', sans-serif; font-size:1.05rem; font-weight:600;
  cursor:pointer; transition:background .2s ease;
}
.explore-dropdown-trigger:hover{background:var(--navy-2);}
.explore-dropdown-trigger svg{width:20px; height:20px; stroke:var(--gold-soft); transition:transform .25s var(--ease);}
.explore-dropdown-trigger.open svg{transform:rotate(180deg);}
.explore-dropdown-menu{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:10;
  background:var(--white); border:1px solid #E4E8F0; border-radius:14px;
  box-shadow:0 20px 50px rgba(16,24,38,0.16);
  overflow:hidden;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.explore-dropdown-menu.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.explore-dropdown-menu a{
  display:flex; align-items:center; gap:14px; padding:18px 24px;
  border-bottom:1px solid #EEF1F6; transition:background .2s ease;
}
.explore-dropdown-menu a:last-child{border-bottom:none;}
.explore-dropdown-menu a:hover{background:var(--paper);}
.explore-dropdown-menu .ico{
  width:42px; height:42px; border-radius:10px; background:rgba(201,151,59,0.12);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.explore-dropdown-menu .ico svg{width:20px; height:20px; stroke:var(--gold);}
.explore-dropdown-menu .txt .t1{font-weight:600; color:var(--ink); font-size:0.98rem;}
.explore-dropdown-menu .txt .t2{font-size:0.8rem; color:var(--slate); margin-top:2px;}
.explore-dropdown-menu .go{margin-left:auto; width:16px; height:16px; stroke:var(--gold); flex:none;}

/* ================= CATEGORY SWITCHER (websites.html, mobile-app-development.html, etc.) ================= */
.cat-switcher{background:var(--white); padding:26px 0; border-bottom:1px solid #E4E8F0;}
.cat-switcher-label{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.06em; color:var(--slate); text-transform:uppercase; margin-bottom:12px;}
.cat-switcher-row{display:flex; gap:12px; flex-wrap:wrap;}
.cat-switch-link{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:30px;
  border:1px solid #D7DEE8; color:var(--slate); font-weight:600; font-size:0.9rem;
  transition:all .2s ease;
}
.cat-switch-link svg{width:16px; height:16px; stroke:var(--gold); flex:none;}
.cat-switch-link:hover{border-color:var(--gold); color:var(--ink); background:var(--paper);}

/* ================= SERVICE CATALOG (bullet-point blocks, dedicated category pages) ================= */
.svc-catalog{background:var(--paper);}
.svc-block-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:22px;}
.svc-block-card{
  background:var(--white); border:1px solid #E4E8F0; border-radius:var(--radius);
  padding:26px 28px; transition:border-color .2s ease, transform .2s ease;
}
.svc-block-card:hover{border-color:var(--gold); transform:translateY(-3px);}
.svc-block-card h3{
  font-size:1.05rem; color:var(--navy); margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid #EEF1F6;
}
.svc-block-card .checklist{gap:10px;}
.svc-block-card .checklist li{font-size:0.92rem;}

.mega-cta{
  text-align:center; margin-top:34px; padding-top:30px; border-top:1px solid #E4E8F0;
}
.mega-cta p{color:var(--slate); font-size:0.95rem; margin-bottom:16px;}

@media (max-width:900px){
  .svc-block-grid{grid-template-columns:1fr;}
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  nav.mainnav{display:none;}
  .navactions .navcta{display:none;}
  .hamburger{display:flex;}
}
/* ================= VIDEO CLIENT STORIES (MARQUEE) ================= */
.video-stories{background:var(--white); overflow:hidden;}
.video-marquee-wrap{
  position:relative; overflow:hidden; margin-top:36px;
}
.video-marquee-wrap::before, .video-marquee-wrap::after{
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:3; pointer-events:none;
}
.video-marquee-wrap::before{left:0; background:linear-gradient(90deg, var(--white), transparent);}
.video-marquee-wrap::after{right:0; background:linear-gradient(270deg, var(--white), transparent);}
.video-marquee-track{
  display:flex; gap:20px; width:max-content;
  animation:videoMarquee 42s linear infinite;
}
.video-marquee-wrap:hover .video-marquee-track{animation-play-state:paused;}
@keyframes videoMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.video-card{
  position:relative; flex:0 0 210px; aspect-ratio:9/16; border-radius:18px; overflow:hidden;
  border:none; padding:0; cursor:pointer; background:#0B1E3D;
  box-shadow:0 10px 28px rgba(16,24,38,0.14);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.video-card:hover{transform:translateY(-6px); box-shadow:0 20px 44px rgba(16,24,38,0.24);}
.video-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.video-card:hover img{transform:scale(1.1);}
.video-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,30,61,0) 45%, rgba(11,30,61,0.75) 100%);
}
.video-play-badge{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
}
.video-play-badge svg{
  width:50px; height:50px; padding:14px; box-sizing:border-box; border-radius:50%;
  background:rgba(255,255,255,0.92); color:var(--navy); position:relative; z-index:2;
  transition:transform .25s var(--ease), background .25s ease, color .25s ease;
}
.video-card:hover .video-play-badge svg{transform:scale(1.15); background:var(--gold); color:var(--navy);}
.video-play-badge .ring{
  position:absolute; width:50px; height:50px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.85);
  animation:playPulse 2.2s ease-out infinite;
}
@keyframes playPulse{
  0%{transform:scale(1); opacity:0.9;}
  100%{transform:scale(1.7); opacity:0;}
}

@media (max-width:700px){
  .video-card{flex:0 0 150px;}
  .video-marquee-wrap::before, .video-marquee-wrap::after{width:60px;}
}

/* ---- Attention-grabbing pulse on primary hero CTA ---- */
.hero-ctas .btn-primary{position:relative;}
.hero-ctas .btn-primary::after{
  content:''; position:absolute; inset:0; border-radius:8px;
  box-shadow:0 0 0 0 rgba(201,151,59,0.55);
  animation:ctaPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(201,151,59,0.45);}
  70%{box-shadow:0 0 0 14px rgba(201,151,59,0);}
  100%{box-shadow:0 0 0 0 rgba(201,151,59,0);}
}

/* ================= CLIENTS SHOWCASE ================= */
.clients-showcase{background:var(--paper);}
.clients-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.client-card{
  background:var(--white); border:1px solid #E4E8F0; border-radius:16px;
  padding:30px 26px; text-align:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
  position:relative; overflow:hidden;
}
.client-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.client-card:hover::before{transform:scaleX(1);}
.client-card:hover{
  transform:translateY(-6px); box-shadow:0 20px 44px rgba(16,24,38,0.12); border-color:transparent;
}
.client-logo{
  width:58px; height:58px; margin:0 auto 16px; border-radius:14px;
  background:linear-gradient(135deg, var(--navy), var(--navy-3));
  color:var(--gold-soft); font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease);
}
.client-card:hover .client-logo{transform:scale(1.08) rotate(-3deg);}
.client-card h4{font-size:1.02rem; color:var(--ink); margin-bottom:6px;}
.client-tag{
  display:block; font-size:0.8rem; color:var(--slate); margin-bottom:16px;
}
.client-visit{
  display:inline-flex; align-items:center; gap:6px; font-size:0.84rem; font-weight:600; color:var(--navy);
}
.client-visit svg{width:14px; height:14px; stroke:var(--gold); transition:transform .25s ease;}
.client-card:hover .client-visit svg{transform:translate(2px,-2px);}

@media (max-width:900px){
  .clients-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .clients-grid{grid-template-columns:1fr;}
}

@media (max-width: 560px){
  section{padding:64px 0;}
  .stat-row{gap:24px;}
  .totop{right:26px; bottom:96px;}
}