/* ===========================================================
   PAGE-SPECIFIC STYLES
   =========================================================== */

/* ---------- HERO (home) ---------- */
.hero { position: relative; padding: 90px 0 100px; overflow: hidden; }
.hero::before {
  content:""; position:absolute; top:-200px; right:-160px;
  width:620px; height:620px; border-radius:50%;
  background: radial-gradient(circle, rgba(111,167,3,.16), transparent 62%);
  z-index:0;
}
.hero::after {
  content:""; position:absolute; bottom:-240px; left:-180px;
  width:560px; height:560px; border-radius:50%;
  background: radial-gradient(circle, rgba(4,124,196,.14), transparent 62%);
  z-index:0;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4rem); font-weight: 800;
  margin: 22px 0 20px;
}
.hero h1 em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p.lead { font-size: 1.13rem; color: var(--ink-soft); max-width: 480px; }
.hero-actions { display:flex; gap:14px; margin-top: 32px; flex-wrap: wrap; }
.hero-stats {
  display:flex; gap: 36px; margin-top: 44px;
  padding-top: 30px; border-top: 1px solid var(--line);
}
.hero-stats .num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.85rem;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent;
}
.hero-stats .lbl { font-size: .86rem; color: var(--ink-faint); }

/* dashboard mockup card */
.hero-visual { position: relative; }
.dash {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 22px; position: relative;
}
.dash-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.dash-top h4 { font-size: 1rem; }
.dash-live {
  font-size:.72rem; font-weight:600; color: var(--green);
  display:flex; align-items:center; gap:6px;
}
.dash-live::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--green-light); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(111,167,3,.5);} 50%{opacity:.6; box-shadow:0 0 0 7px rgba(111,167,3,0);} }

.dash-big {
  background: var(--grad-brand); border-radius: 14px; padding: 20px 22px; color:#fff; margin-bottom:14px;
}
.dash-big .v { font-family:var(--font-display); font-weight:800; font-size:2.1rem; }
.dash-big .c { font-size:.82rem; opacity:.85; }
.dash-cells { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.dash-cell { background: var(--bg-soft); border-radius:12px; padding:14px; }
.dash-cell .k { font-size:.74rem; color:var(--ink-faint); }
.dash-cell .v { font-family:var(--font-display); font-weight:700; font-size:1.25rem; margin-top:3px; }
.dash-cell .v.green { color: var(--green); }
.dash-cell .v.blue { color: var(--blue); }
.dash-chart { display:flex; align-items:flex-end; gap:8px; height:92px; padding-top:6px; }
.dash-chart .bar { flex:1; border-radius:6px 6px 0 0; background: var(--grad-green); opacity:.9; animation: grow 1.1s ease both; }
.dash-chart .bar:nth-child(even){ background: var(--grad-blue); }
@keyframes grow { from{ height:0; } }
.float-badge {
  position:absolute; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow: var(--shadow-md); padding:12px 16px;
  display:flex; align-items:center; gap:10px;
}
.float-badge .ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; }
.float-badge .ic.g { background: var(--grad-green); }
.float-badge .ic.b { background: var(--grad-blue); }
.float-badge .ic svg { width:18px; height:18px; stroke:#fff; }
.float-badge .t { font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.float-badge .s { font-size:.72rem; color:var(--ink-faint); }
.fb-1 { top:-26px; left:-34px; animation: floaty 4s ease-in-out infinite; }
.fb-2 { bottom:34px; right:-38px; animation: floaty 4s ease-in-out infinite 1.5s; }
@keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* ---------- EMS FEATURE PANEL (hero visual) ---------- */
.ems-panel {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow: var(--shadow-lg); padding:26px; position:relative;
}
.ems-panel-head {
  display:flex; align-items:center; gap:10px;
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line);
}
.ems-panel-head h4 { font-size:1.05rem; }
.ems-dot {
  width:10px; height:10px; border-radius:50%; background:var(--green-light);
  animation: pulse 1.8s infinite;
}
.ems-feature {
  display:flex; align-items:center; gap:14px;
  padding:14px; border-radius:14px; background:var(--bg-soft);
  margin-bottom:12px; transition:transform .25s ease, background .25s ease;
}
.ems-feature:hover { transform:translateX(5px); background:var(--bg-tint); }
.ems-feature-ic {
  flex-shrink:0; width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center;
}
.ems-feature-ic.g { background:var(--grad-green); }
.ems-feature-ic.b { background:var(--grad-blue); }
.ems-feature-ic svg { width:22px; height:22px; stroke:#fff; }
.ems-feature strong { font-family:var(--font-display); font-size:.98rem; display:block; }
.ems-feature span { font-size:.85rem; color:var(--ink-soft); }
.ems-wave {
  display:flex; align-items:flex-end; gap:8px; height:70px;
  margin-top:18px; padding-top:8px;
}
.ems-wave .bar { flex:1; border-radius:6px 6px 0 0; background:var(--grad-green); opacity:.9; animation: grow 1.1s ease both; }
.ems-wave .bar:nth-child(even) { background:var(--grad-blue); }

/* ---------- LOGO STRIP ---------- */
.trust { padding: 44px 0; border-bottom:1px solid var(--line); }
.trust p { text-align:center; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:22px; }
.trust-row { display:flex; justify-content:center; gap:54px; flex-wrap:wrap; }
.trust-row span { font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:#c0c7d4; }

/* ---------- FEATURE CARDS ---------- */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.fcard {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition: transform .3s, box-shadow .3s, border-color .3s;
}
.fcard:hover { transform: translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.fcard .fic {
  width:52px; height:52px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px;
}
.fcard .fic.g { background: var(--grad-green); }
.fcard .fic.b { background: var(--grad-blue); }
.fcard .fic svg { width:24px; height:24px; stroke:#fff; }
.fcard h3 { font-size:1.18rem; margin-bottom:9px; }
.fcard p { font-size:.96rem; color:var(--ink-soft); }

/* ---------- HOW IT WORKS ---------- */
.how { background: var(--bg-soft); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.step { position:relative; padding-top:14px; }
.step .n {
  font-family:var(--font-display); font-weight:800; font-size:3.2rem;
  background: var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1; opacity:.9;
}
.step h3 { font-size:1.2rem; margin:12px 0 8px; }
.step p { font-size:.96rem; color:var(--ink-soft); }

/* ---------- SPLIT / METRICS ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split-list { margin-top:24px; }
.split-list li { display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.split-list li:last-child { border-bottom:none; }
.split-list .ck {
  flex-shrink:0; width:26px; height:26px; border-radius:8px;
  background: var(--bg-tint); display:grid; place-items:center;
}
.split-list .ck svg { width:14px; height:14px; stroke:var(--green); }
.split-list strong { font-family:var(--font-display); font-size:1rem; display:block; }
.split-list span { font-size:.92rem; color:var(--ink-soft); }
.metric-card {
  background: var(--grad-brand); border-radius:var(--radius-lg);
  padding:42px; color:#fff;
}
.metric-card .mrow { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.metric-card .num { font-family:var(--font-display); font-weight:800; font-size:2.6rem; }
.metric-card .lbl { font-size:.9rem; opacity:.82; }
.metric-card .div { height:1px; background:rgba(255,255,255,.18); margin:30px 0; }

/* ---------- CTA BANNER ---------- */
.cta-banner { padding: 84px 0; }
.cta-box {
  background: var(--grad-brand); border-radius: var(--radius-lg);
  padding: 64px 56px; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.cta-box::before {
  content:""; position:absolute; top:-120px; right:-80px; width:340px; height:340px;
  border-radius:50%; background:rgba(255,255,255,.08);
}
.cta-box h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:14px; position:relative; }
.cta-box p { opacity:.9; max-width:520px; margin:0 auto 28px; position:relative; }
.cta-box .hero-actions { justify-content:center; position:relative; }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero { padding: 74px 0 64px; background: var(--bg-soft); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero::after {
  content:""; position:absolute; top:-160px; right:-120px; width:440px; height:440px;
  border-radius:50%; background: radial-gradient(circle, rgba(4,124,196,.12), transparent 65%);
}
.page-hero .container { position:relative; }
.page-hero h1 { font-size:clamp(2.2rem,4.5vw,3.3rem); margin:16px 0 14px; }
.page-hero p { font-size:1.1rem; color:var(--ink-soft); max-width:580px; }
.crumb { font-size:.86rem; color:var(--ink-faint); }
.crumb a:hover { color:var(--green); }

/* ---------- ABOUT ---------- */
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vcard { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.vcard .vic { font-size:1.6rem; margin-bottom:12px; }
.vcard h3 { font-size:1.12rem; margin-bottom:7px; }
.vcard p { font-size:.94rem; color:var(--ink-soft); }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tcard { text-align:center; }
.tcard .avatar {
  width:100%; aspect-ratio:1; border-radius:var(--radius);
  display:grid; place-items:center; margin-bottom:14px;
  font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:#fff;
}
.tcard:nth-child(odd) .avatar { background:var(--grad-green); }
.tcard:nth-child(even) .avatar { background:var(--grad-blue); }
.tcard h4 { font-size:1.05rem; }
.tcard span { font-size:.88rem; color:var(--ink-faint); }

/* ---------- ACHIEVEMENT STATS ---------- */
.achieve-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; max-width:860px; margin:0 auto; }
.achieve { text-align:center; }
.achieve-ic {
  width:64px; height:64px; margin:0 auto 18px; border-radius:16px;
  display:grid; place-items:center;
}
.achieve-ic.g { background:var(--grad-green); }
.achieve-ic.b { background:var(--grad-blue); }
.achieve-ic svg { width:30px; height:30px; stroke:#fff; }
.achieve-box {
  position:relative; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:38px 28px; transition:transform .3s, box-shadow .3s;
}
.achieve-box:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.achieve-box::before, .achieve-box::after {
  content:""; position:absolute; width:26px; height:26px;
}
.achieve-box::before {
  top:-1px; left:-1px;
  border-top:3px solid var(--green); border-left:3px solid var(--green);
  border-radius:var(--radius) 0 0 0;
}
.achieve-box::after {
  bottom:-1px; right:-1px;
  border-bottom:3px solid var(--blue); border-right:3px solid var(--blue);
  border-radius:0 0 var(--radius) 0;
}
.achieve-num {
  font-family:var(--font-display); font-weight:800; font-size:3.6rem; line-height:1;
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.achieve-label {
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  margin-top:10px;
}
.achieve-desc { font-size:.97rem; color:var(--ink-soft); margin-top:18px; }

/* ---------- BLOG ---------- */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.post {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .3s, box-shadow .3s;
}
.post:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.post-img { height:180px; display:grid; place-items:center; position:relative; }
.post:nth-child(3n+1) .post-img { background:var(--grad-green); }
.post:nth-child(3n+2) .post-img { background:var(--grad-blue); }
.post:nth-child(3n) .post-img { background: linear-gradient(150deg,#2F9E14,#047CC4); }
.post-img svg { width:60px; height:60px; stroke:rgba(255,255,255,.85); }
.post-body { padding:24px; }
.post-tag {
  font-family:var(--font-display); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; color:var(--green);
}
.post-body h3 { font-size:1.2rem; margin:10px 0 8px; }
.post-body p { font-size:.94rem; color:var(--ink-soft); }
.post-meta { display:flex; gap:14px; margin-top:16px; font-size:.82rem; color:var(--ink-faint); }
.featured-post {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:46px;
}
.featured-post .fp-img { background:var(--grad-brand); min-height:320px; display:grid; place-items:center; }
.featured-post .fp-img svg { width:90px; height:90px; stroke:rgba(255,255,255,.9); }
.featured-post .fp-body { padding:46px; }
.featured-post .fp-body h2 { font-size:1.9rem; margin:12px 0 12px; }
.featured-post .fp-body p { color:var(--ink-soft); margin-bottom:20px; }

/* ---------- CONTACT ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:54px; align-items:start; }
.contact-info .ci-item { display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-info .ci-item:last-child { border-bottom:none; }
.contact-info .ci-ic {
  flex-shrink:0; width:48px; height:48px; border-radius:12px;
  background:var(--bg-tint); display:grid; place-items:center;
}
.contact-info .ci-ic svg { width:21px; height:21px; stroke:var(--green); }
.contact-info h4 { font-size:1rem; margin-bottom:3px; }
.contact-info p { font-size:.95rem; color:var(--ink-soft); }
.contact-info p a { color:var(--ink-soft); transition:color .2s; }
.contact-info p a:hover { color:var(--green); }
.form-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:40px; box-shadow:var(--shadow-md);
}
.field { margin-bottom:20px; }
.field label { font-family:var(--font-display); font-weight:600; font-size:.88rem; display:block; margin-bottom:7px; }
.field input, .field select, .field textarea {
  width:100%; font-family:var(--font-body); font-size:.97rem;
  padding:13px 15px; border:1.5px solid var(--line); border-radius:11px;
  background:var(--bg-soft); color:var(--ink); transition:border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--green-light); background:#fff;
}
.field textarea { resize:vertical; min-height:120px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note { font-size:.84rem; color:var(--ink-faint); margin-top:14px; text-align:center; }
.form-success {
  display:none; background:var(--bg-tint); border:1px solid var(--green-light);
  border-radius:12px; padding:14px 16px; color:var(--green-deep);
  font-size:.93rem; font-weight:500; margin-bottom:20px;
}
.form-success.show { display:block; }

/* ---------- FAQ ---------- */
.faq { max-width:760px; margin:0 auto; }
.faq-item { border:1px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden; }
.faq-q {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 24px; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1.03rem;
}
.faq-q .pm { flex-shrink:0; width:24px; height:24px; transition:transform .3s; }
.faq-q .pm svg { width:24px; height:24px; stroke:var(--green); }
.faq-item.open .faq-q .pm { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p { padding:0 24px 22px; color:var(--ink-soft); font-size:.96rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .hero-grid, .split, .contact-grid, .featured-post { grid-template-columns:1fr; }
  .features-grid, .steps, .value-grid, .blog-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .achieve-grid { grid-template-columns:1fr; gap:24px; }
  .achieve-num { font-size:3rem; }
  .hero { padding:54px 0 70px; }
  .fb-1 { left:-10px; } .fb-2 { right:-10px; }
  .cta-box { padding:48px 28px; }
  .form-card { padding:28px; }
  .field-row { grid-template-columns:1fr; }
  .metric-card { padding:32px; }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns:1fr; }
  .hero-stats { gap:22px; }
  .trust-row { gap:30px; }
}