/* ==========================================================
   Alsaran Global — Shared Stylesheet
   Edit brand colors/fonts here to change the whole site.
   ========================================================== */

:root{
  --navy: #081B33;
  --navy-2: #0E2545;
  --gold: #C9A227;
  --gold-light: #E4C862;
  --white: #FFFFFF;
  --grey-bg: #F5F6F8;
  --up: #34D399;
  --whatsapp: #25D366;
  --text-dim: rgba(8,27,51,0.6);
  --text-dim-light: rgba(255,255,255,0.6);
  --border: rgba(8,27,51,0.08);
}

*{box-sizing:border-box; margin:0; padding:0;}
body{background: var(--grey-bg); font-family:'Inter', sans-serif; color: var(--navy);}
a{text-decoration:none; color:inherit;}

/* ---------- Nav ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 60px; background: var(--white); border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:100;
}
.logo{font-family:'Poppins', sans-serif; font-weight:700; font-size:20px;}
.logo span{color: var(--gold);}
.nav-links{display:flex; gap:32px; list-style:none; font-size:14px; font-weight:500;}
.nav-links li{transition: color 0.2s;}
.nav-links a:hover li{color: var(--gold);}
.nav-links li.active{color: var(--gold);}
.nav-cta{
  background: var(--navy); color:var(--white); padding:10px 22px; border-radius:8px;
  font-size:14px; font-weight:600; font-family:'Poppins',sans-serif; border:none; cursor:pointer;
}
.nav-cta:hover{background: var(--gold); color: var(--navy);}

/* ---------- Page hero band (used on inner pages) ---------- */
.page-hero{
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  padding: 70px 60px 60px; color: var(--white);
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color: var(--gold-light);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px;
}
.page-hero h1{font-family:'Poppins', sans-serif; font-weight:700; font-size:40px; letter-spacing:-0.02em; margin-bottom:14px;}
.page-hero p{color: var(--text-dim-light); max-width:560px; line-height:1.6;}

/* ---------- Shared buttons ---------- */
.btn-primary{
  background: var(--gold); color: var(--navy); border:none; padding:14px 26px;
  border-radius:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; cursor:pointer;
}
.btn-primary:hover{background: var(--gold-light);}
.btn-secondary{
  background: transparent; color: var(--white); border:1px solid rgba(255,255,255,0.25);
  padding:14px 26px; border-radius:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; cursor:pointer;
}
.btn-secondary:hover{background: rgba(255,255,255,0.1);}

/* ---------- Generic wrap ---------- */
.wrap{padding: 60px; max-width:1100px; margin:0 auto;}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--navy); color: rgba(255,255,255,0.5); padding: 40px 60px 0;
  font-size:13px;
}
.site-footer .logo{color: var(--white);}
.footer-top{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding-bottom:28px;
}
.footer-links{display:flex; gap:24px; list-style:none;}
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0 26px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color: rgba(255,255,255,0.4);
}
.footer-legal-links{display:flex; gap:20px; list-style:none; flex-wrap:wrap;}
.footer-legal-links a:hover{color: rgba(255,255,255,0.75);}

/* ---------- Legal / policy pages ---------- */
.legal-wrap{padding: 50px 60px 80px; max-width:820px; margin:0 auto;}
.legal-disclaimer{
  background: rgba(201,162,39,0.08); border: 1px dashed var(--gold); border-radius:12px;
  padding: 18px 22px; font-size:13.5px; line-height:1.6; margin-bottom:36px;
}
.legal-wrap h2{font-family:'Poppins', sans-serif; font-weight:600; font-size:19px; margin: 34px 0 12px;}
.legal-wrap h2:first-of-type{margin-top:0;}
.legal-wrap p, .legal-wrap li{font-size:14.5px; line-height:1.7; color: var(--navy);}
.legal-wrap ul, .legal-wrap ol{padding-left:22px; margin: 10px 0;}
.legal-wrap li{margin-bottom:6px;}
.legal-updated{font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--text-dim); margin-bottom:8px;}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position:fixed; bottom:26px; right:26px; width:56px; height:56px; border-radius:50%;
  background: var(--whatsapp); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(37,211,102,0.4); cursor:pointer; z-index:200;
}

/* ---------- Back-to-top floating button ---------- */
.back-to-top{
  position:fixed; bottom:92px; right:26px; width:48px; height:48px; border-radius:50%;
  background: var(--navy); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(8,27,51,0.35); cursor:pointer; z-index:200;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, background 0.2s;
}
.back-to-top.visible{opacity:1; pointer-events:auto; transform: translateY(0);}
.back-to-top:hover{background: var(--gold); }
.back-to-top svg{width:20px; height:20px;}

/* ================= HOME / HERO ================= */
.hero{
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  display:grid; grid-template-columns: 1.1fr 1fr;
  align-items:center; padding: 90px 60px; gap: 50px; overflow:hidden; position:relative;
}
.hero::before{
  content:''; position:absolute; top:-200px; right:-200px; width:500px; height:500px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,162,39,0.15), transparent 70%);
  animation: floatBlob1 9s ease-in-out infinite;
}
.hero::after{
  content:''; position:absolute; bottom:-180px; left:-120px; width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(52,211,153,0.12), transparent 70%);
  animation: floatBlob2 11s ease-in-out infinite;
}
@keyframes floatBlob1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, 40px) scale(1.08); }
}
@keyframes floatBlob2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(25px, -30px) scale(1.06); }
}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px;}
.hero .eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background: var(--up); box-shadow:0 0 8px var(--up);}
.hero h1{font-family:'Poppins', sans-serif; font-weight:700; font-size:48px; line-height:1.12; color: var(--white); letter-spacing:-0.02em; margin-bottom:22px;}
.hero h1 em{color: var(--gold-light); font-style:normal;}
.hero .sub{color: var(--text-dim-light); font-size:16px; line-height:1.6; max-width:480px; margin-bottom:34px;}
.cta-row{display:flex; gap:14px;}

.dash-frame{
  position:relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
  border-radius:16px; padding: 22px; backdrop-filter: blur(6px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); height: 380px;
}
.dash-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.dash-dots{display:flex; gap:6px;}
.dash-dots span{width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,0.15);}
.dash-tabs{display:flex; gap:6px;}
.dash-tab{width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.15); transition: background 0.4s;}
.dash-tab.active{background: var(--gold);}

.panel{display:none; animation: fadeIn 0.6s ease forwards;}
.panel.active{display:block;}
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.panel-label{font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--text-dim-light); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px;}
.panel-figure{font-family:'Poppins', sans-serif; font-weight:700; font-size:30px; color:var(--white); margin-bottom:2px;}
.panel-delta{font-family:'IBM Plex Mono', monospace; font-size:13px; color: var(--up); margin-bottom:18px;}

.bars{display:flex; align-items:flex-end; gap:10px; height:150px;}
.bar{flex:1; background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-radius: 4px 4px 0 0; transform-origin:bottom; transform:scaleY(0); animation: growBar 0.8s ease forwards;}
@keyframes growBar{ to{transform:scaleY(1);} }

svg.linechart{width:100%; height:150px;}
.line-path{fill:none; stroke: var(--up); stroke-width:2.5; stroke-dasharray: 500; stroke-dashoffset:500; animation: draw 1.4s ease forwards;}
.area-fill{opacity:0; animation: fadeArea 0.8s 0.6s ease forwards;}
@keyframes draw{ to{stroke-dashoffset:0;} }
@keyframes fadeArea{ to{opacity:0.15;} }

.gauge-wrap{display:flex; align-items:center; gap:24px;}
.ring{transform:rotate(-90deg);}
.ring-bg{fill:none; stroke:rgba(255,255,255,0.1); stroke-width:10;}
.ring-fg{fill:none; stroke: var(--gold); stroke-width:10; stroke-linecap:round; stroke-dasharray: 340; stroke-dashoffset:340; animation: ringFill 1.2s ease forwards;}
@keyframes ringFill{ to{stroke-dashoffset:65;} }
.gauge-center{font-family:'Poppins',sans-serif; font-weight:700; font-size:22px; fill:var(--white);}
.metric-list{display:flex; flex-direction:column; gap:10px;}
.metric-row{display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim-light); font-family:'IBM Plex Mono', monospace; width:160px;}
.metric-row b{color:var(--white);}

/* ---------- Trust strip ---------- */
.trust-strip{background: var(--white); padding: 34px 60px; text-align:center; border-bottom:1px solid var(--border);}
.trust-strip .label{font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px;}
.trust-logos{display:flex; justify-content:center; gap:40px; flex-wrap:wrap; font-family:'Poppins', sans-serif; font-weight:600; color: var(--text-dim); font-size:15px;}

/* ---------- Home services preview grid ---------- */
.section-title-row{max-width:1100px; margin: 0 auto 30px; padding: 0 60px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px;}
.section-title-row h2{font-family:'Poppins', sans-serif; font-weight:700; font-size:28px;}
.section-title-row a{font-family:'Poppins', sans-serif; font-weight:600; font-size:14px; color: var(--navy);}
.preview-grid{max-width:1100px; margin: 0 auto; padding: 0 60px 70px; display:grid; grid-template-columns: repeat(3,1fr); gap:18px;}
.preview-card{background: var(--white); border:1px solid var(--border); border-radius:14px; padding:26px; transition: box-shadow 0.25s, transform 0.25s;}
.preview-card:hover{box-shadow: 0 20px 40px -20px rgba(8,27,51,0.18); transform: translateY(-2px);}
.preview-icon{width:44px; height:44px; border-radius:10px; background: linear-gradient(160deg, var(--navy), var(--navy-2)); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-weight:600; color: var(--gold-light); font-size:11px; margin-bottom:16px;}
.preview-card h3{font-family:'Poppins', sans-serif; font-weight:600; font-size:16px; margin-bottom:8px;}
.preview-card p{font-size:13.5px; color: var(--text-dim); line-height:1.55;}

/* ---------- Home CTA band ---------- */
.cta-band{
  background: var(--navy); border-radius:16px; padding:50px; margin: 0 60px 70px; max-width: 1100px;
  margin-left:auto; margin-right:auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.cta-band h3{font-family:'Poppins', sans-serif; color:var(--white); font-size:24px; font-weight:600;}
.cta-band p{color: rgba(255,255,255,0.6); font-size:14px; margin-top:6px;}

/* ================= SERVICES PAGE ================= */
.services-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; margin-bottom:20px;}
.services-grid .service-card{grid-template-columns:1fr; gap:14px; margin-bottom:0;}
.services-grid .service-cta{align-self:flex-start;}
.service-card{
  display:grid; grid-template-columns: 60px 1fr auto; gap: 26px; align-items:start;
  background: var(--white); border:1px solid var(--border); border-radius:14px;
  padding: 30px 32px; margin-bottom:18px; transition: box-shadow 0.25s, transform 0.25s;
}
.service-card:hover{box-shadow: 0 20px 40px -20px rgba(8,27,51,0.18); transform: translateY(-2px);}
.icon-box{width:52px; height:52px; border-radius:12px; background: linear-gradient(160deg, var(--navy), var(--navy-2)); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-weight:600; color: var(--gold-light); font-size:13px;}
.service-tag{font-family:'IBM Plex Mono', monospace; font-size:11px; color: var(--gold); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; display:block;}
.service-title{font-family:'Poppins', sans-serif; font-weight:600; font-size:19px; margin-bottom:8px;}
.service-desc{color: var(--text-dim); font-size:14.5px; line-height:1.6; max-width:520px;}
.service-points{display:flex; gap:16px; margin-top:12px; flex-wrap:wrap;}
.point{font-size:12.5px; color: var(--navy); background: var(--grey-bg); padding:5px 12px; border-radius:20px; font-weight:500;}
.service-cta{align-self:center; background: transparent; border:1px solid var(--border); color: var(--navy); font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px; padding: 10px 18px; border-radius:8px; cursor:pointer; white-space:nowrap;}
.service-cta:hover{background: var(--navy); color:var(--white); border-color:var(--navy);}

/* ================= STORE LINKS PAGE ================= */
.grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:22px;}
.store-card{background: var(--white); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition: box-shadow 0.25s, transform 0.25s;}
.store-card:hover{box-shadow: 0 24px 44px -22px rgba(8,27,51,0.2); transform: translateY(-3px);}
.store-banner{height:110px; position:relative; display:flex; align-items:center; padding: 0 24px;}
.store-banner.ebay{background: linear-gradient(120deg, #0064D2, #E53238);}
.store-banner.shopify{background: linear-gradient(120deg, #95BF47, #5E8E3E);}
.store-banner.etsy{background: linear-gradient(120deg, #F1641E, #D9550F);}
.store-banner.woo{background: linear-gradient(120deg, #7F54B3, #52307C);}
.platform-badge{background: rgba(255,255,255,0.2); color:var(--white); font-family:'IBM Plex Mono', monospace; font-size:11px; padding:5px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:0.05em; backdrop-filter: blur(4px);}
.store-body{padding: 22px 24px 24px;}
.store-name{font-family:'Poppins', sans-serif; font-weight:600; font-size:18px; margin-bottom:6px;}
.store-desc{font-size:14px; color: var(--text-dim); line-height:1.55; margin-bottom:18px;}
.store-footer{display:flex; align-items:center; justify-content:space-between;}
.store-stats{font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--text-dim);}
.visit-btn{background: var(--navy); color: var(--white); border:none; padding:10px 20px; border-radius:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; cursor:pointer;}
.visit-btn:hover{background: var(--gold); color: var(--navy);}

/* ================= RESULTS PAGE ================= */
.case-card{background: var(--white); border:1px solid var(--border); border-radius:16px; padding: 34px 36px; margin-bottom:24px;}
.case-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.case-platform{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--gold); background: rgba(201,162,39,0.1); padding:5px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:0.05em;}
.case-title{font-family:'Poppins', sans-serif; font-weight:600; font-size:20px; margin-top:10px;}
.case-flow{display:grid; grid-template-columns: 1fr 1fr; gap:24px; margin-bottom:24px;}
.flow-block h4{font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); margin-bottom:8px;}
.flow-block p{font-size:14px; line-height:1.6; color: var(--navy);}
.metrics-row{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; padding-top:20px; border-top:1px solid var(--border);}
.metric-num{font-family:'Poppins', sans-serif; font-weight:700; font-size:26px; color: var(--navy);}
.metric-num span{color: var(--up); font-size:15px; font-weight:600; margin-left:6px;}
.metric-label{font-size:12.5px; color: var(--text-dim); margin-top:4px;}
.placeholder-tag{display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; color: var(--text-dim); margin-bottom:10px;}
.note{margin-top:20px; padding: 20px 24px; border-radius:12px; background: rgba(201,162,39,0.08); border:1px dashed var(--gold); font-size:13.5px; line-height:1.6;}

/* ================= CONTACT PAGE ================= */
.contact-wrap{padding:60px; max-width:1100px; margin:0 auto; display:grid; grid-template-columns: 1.2fr 1fr; gap:36px;}
.form-card{background: var(--white); border:1px solid var(--border); border-radius:16px; padding:34px 36px;}
.form-title{font-family:'Poppins', sans-serif; font-weight:600; font-size:19px; margin-bottom:6px;}
.form-sub{font-size:13.5px; color: var(--text-dim); margin-bottom:26px;}
.field-row{display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column: 1 / -1;}
label{font-size:12.5px; font-weight:600; color: var(--navy);}
input, select, textarea{border:1px solid var(--border); border-radius:8px; padding:11px 13px; font-family:'Inter', sans-serif; font-size:14px; color:var(--navy); background: var(--grey-bg); width:100%;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px; background:var(--white);}
textarea{resize:vertical; min-height:90px;}
.submit-row{display:flex; gap:12px; margin-top:8px; flex-wrap:wrap;}
.btn-whatsapp{background: var(--whatsapp); color: var(--white); border:none; padding:13px 26px; border-radius:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; cursor:pointer; display:flex; align-items:center; gap:8px;}
.side-col{display:flex; flex-direction:column; gap:20px;}
.direct-card{background: var(--white); border:1px solid var(--border); border-radius:16px; padding:26px 28px;}
.direct-card h4{font-family:'Poppins', sans-serif; font-size:15px; margin-bottom:14px;}
.direct-row{display:flex; justify-content:space-between; font-size:13.5px; padding: 9px 0; border-bottom:1px solid var(--border);}
.direct-row:last-child{border-bottom:none;}
.direct-row span:first-child{color: var(--text-dim);}
.direct-row span:last-child{font-weight:600;}
.map-placeholder{height:140px; border-radius:12px; background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 10px, #e6e8ec 10px, #e6e8ec 20px); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--text-dim); border: 1px solid var(--border);}


/* ---------- Platform dashboard showcase (dummy data visuals) ---------- */
.platform-grid{
  max-width:1100px; margin:0 auto; padding: 0 60px 20px;
  display:grid; grid-template-columns: repeat(2, 1fr); gap:20px;
}
.platform-card{border-radius:16px; overflow:hidden; border:1px solid var(--border); background: var(--white); transition: box-shadow 0.25s, transform 0.25s;}
.platform-card:hover{box-shadow: 0 24px 44px -22px rgba(8,27,51,0.22); transform: translateY(-3px);}
.platform-card-header{
  padding:14px 20px; display:flex; align-items:center; justify-content:space-between; color:var(--white);
}
.platform-card-header.ph-ebay{background: linear-gradient(120deg, #0064D2, #E53238);}
.platform-card-header.ph-shopify{background: linear-gradient(120deg, #95BF47, #5E8E3E);}
.platform-card-header.ph-etsy{background: linear-gradient(120deg, #F1641E, #D9550F);}
.platform-card-header.ph-woo{background: linear-gradient(120deg, #7F54B3, #52307C);}
.platform-card-header .ph-name{font-family:'Poppins', sans-serif; font-weight:600; font-size:14px;}
.platform-card-header .ph-tag{font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; opacity:0.85;}
.platform-dashboard{background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); padding:20px 22px 22px;}
.ph-figure{font-family:'Poppins', sans-serif; font-weight:700; font-size:22px; color:var(--white);}
.ph-delta{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color: var(--up); margin-bottom:12px;}
.ph-chart-mini{height:80px;}
.ph-bars-mini{display:flex; align-items:flex-end; gap:6px; height:80px;}
.ph-bars-mini .bar{border-radius:3px 3px 0 0;}
.ph-stats-row{display:flex; gap:14px; margin-top:14px; flex-wrap:wrap;}
.ph-stat{flex:1; min-width:70px;}
.ph-stat-num{font-family:'Poppins', sans-serif; font-weight:700; font-size:15px; color: var(--gold-light);}
.ph-stat-label{font-family:'IBM Plex Mono', monospace; font-size:9.5px; color: rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px;}
.ph-dummy-tag{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10px; color: rgba(255,255,255,0.35);
  margin-top:10px;
}

/* ---------- Consultation packages ---------- */
.package-grid{
  max-width:1100px; margin: 0 auto; padding: 0 60px 20px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
.package-card{
  background: var(--white); border:1px solid var(--border); border-radius:16px;
  padding: 28px 26px; position:relative; transition: box-shadow 0.25s, transform 0.25s;
}
.package-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  border-radius: 16px 16px 0 0;
}
.package-card.tier-silver::before{background: linear-gradient(90deg, #C9CED6, #9AA3AF);}
.package-card.tier-bronze::before{background: linear-gradient(90deg, #D9A66C, #B87C3E);}
.package-card.tier-software::before{background: linear-gradient(90deg, var(--up), #1EA97C);}
.package-icon-box{
  width:44px; height:44px; border-radius:10px; margin-bottom:16px;
  background: linear-gradient(160deg, var(--navy), var(--navy-2));
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-weight:600; color: var(--gold-light); font-size:11px;
}
.package-card:hover{box-shadow: 0 20px 40px -20px rgba(8,27,51,0.18); transform: translateY(-2px);}
.package-card.highlight{border: 1.5px solid var(--gold);}
.package-badge{
  position:absolute; top:-12px; right:24px; background: var(--gold); color: var(--navy);
  font-family:'Poppins', sans-serif; font-weight:600; font-size:11.5px; padding: 5px 14px; border-radius:20px;
  z-index:2; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.package-duration{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--gold); text-transform:uppercase;
  letter-spacing:0.06em; margin-bottom:10px;
}
.package-title{font-family:'Poppins', sans-serif; font-weight:600; font-size:19px; margin-bottom:8px;}
.package-price{font-family:'Poppins', sans-serif; font-weight:700; font-size:22px; margin-bottom:12px; color: var(--navy);}
.package-price span{font-family:'Inter', sans-serif; font-weight:400; font-size:13px; color: var(--text-dim);}
.package-desc{font-size:13.5px; color: var(--text-dim); line-height:1.6; margin-bottom:18px; min-height:60px;}
.package-cta{
  width:100%; background: var(--navy); color: var(--white); border:none; padding:12px; border-radius:8px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px; cursor:pointer;
}
.package-cta:hover{background: var(--gold); color: var(--navy);}
.package-card.highlight .package-cta{background: var(--gold); color: var(--navy);}
.package-card.highlight .package-cta:hover{background: var(--gold-light);}

/* ---------- Consultancy packages (category 2) ---------- */
.consultancy-grid{
  max-width:1100px; margin: 0 auto; padding: 0 60px 40px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:20px;
}
.consultancy-subhead{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--text-dim);
  text-transform:uppercase; letter-spacing:0.06em; margin: 30px 0 14px; max-width:1100px;
  margin-left:auto; margin-right:auto; padding: 0 60px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:60px 24px;}
  .hero h1{font-size:34px;}
  .nav{padding:18px 24px;}
  .nav-links{display:none;}
  .page-hero, .wrap, .contact-wrap, .site-footer{padding-left:24px; padding-right:24px;}
  .section-title-row, .preview-grid{padding-left:24px; padding-right:24px;}
  .preview-grid{grid-template-columns:1fr;}
  .cta-band{margin-left:24px; margin-right:24px;}
  .service-card{grid-template-columns:1fr; gap:14px;}
  .services-grid{grid-template-columns:1fr;}
  .grid, .case-flow, .metrics-row, .contact-wrap, .field-row{grid-template-columns:1fr;}
  .package-grid{grid-template-columns:1fr; padding-left:24px; padding-right:24px;}
  .consultancy-grid{padding-left:24px; padding-right:24px;}
  .consultancy-subhead{padding-left:24px; padding-right:24px;}
  .platform-grid{grid-template-columns:1fr; padding-left:24px; padding-right:24px;}
}

/* ================= SCROLL-REVEAL ANIMATIONS ================= */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:0.08s;}
.reveal-delay-2{transition-delay:0.16s;}
.reveal-delay-3{transition-delay:0.24s;}
.reveal-delay-4{transition-delay:0.32s;}
.reveal-delay-5{transition-delay:0.4s;}

/* ---------- Preview card variant for 5-item software grid ---------- */
.preview-grid-flex{
  max-width:1100px; margin:0 auto; padding: 0 60px 70px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:18px;
}

/* ---------- Nav link underline animation ---------- */
.nav-links a{position:relative;}
.nav-links a li::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background: var(--gold);
  transition: width 0.25s ease;
}
.nav-links a:hover li::after{width:100%;}

/* ---------- Stats counter band ---------- */
.stats-band{
  background: var(--navy); padding: 56px 60px; display:grid; grid-template-columns: repeat(4,1fr);
  gap: 20px; text-align:center;
}
.stat-num{font-family:'Poppins', sans-serif; font-weight:700; font-size:36px; color: var(--gold-light);}
.stat-label{font-family:'IBM Plex Mono', monospace; font-size:12px; color: rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.06em; margin-top:8px;}

/* ---------- Node-sync graphic (dashboard panel 4) ---------- */
.node-diagram{position:relative; height:150px; display:flex; align-items:center; justify-content:center;}
.node-center{
  width:70px; height:70px; border-radius:14px; background: linear-gradient(160deg, var(--gold-light), var(--gold));
  display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700;
  font-size:10px; color: var(--navy); text-align:center; z-index:2; box-shadow: 0 0 30px rgba(201,162,39,0.4);
  animation: pulseCenter 2.4s ease-in-out infinite;
}
@keyframes pulseCenter{ 0%,100%{ box-shadow: 0 0 20px rgba(201,162,39,0.3);} 50%{ box-shadow: 0 0 34px rgba(201,162,39,0.55);} }
.node-orbit{position:absolute; width:34px; height:34px; border-radius:9px; background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:9px; color: var(--text-dim-light);}
.node-1{top:8px; left:20%; animation: floatNode 3.2s ease-in-out infinite;}
.node-2{top:8px; right:20%; animation: floatNode 3.6s ease-in-out infinite 0.3s;}
.node-3{bottom:8px; left:12%; animation: floatNode 3.4s ease-in-out infinite 0.6s;}
.node-4{bottom:8px; right:12%; animation: floatNode 3.8s ease-in-out infinite 0.9s;}
@keyframes floatNode{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.node-line{position:absolute; background: rgba(201,162,39,0.35); height:1.5px; transform-origin: 0 0; z-index:1;}