/* ============================================================
   home.css — Page-specific styles for index.php
   Global tokens, layout, nav, footer, pricing cards, FAQ,
   migration, payment, testimonials, steps, compare table
   are all handled by base.css + theme.css + components.css.
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.header {
  padding: 160px 0;
  position: relative;
  overflow: hidden;
}

.header_h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.header_p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #cbd5e1;
  max-width: 520px;
}

body.light-mode .header_p { color: #475569; }

/* ── HERO ANIMATION (3D server) ──────────────────────────── */
.ani-padding { padding-top: 0; padding-bottom: 20px; }

.hmk-hero {
  position: relative;
  width: 560px;
  max-width: 100%;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55));
  transition: transform .3s ease-out;
}

.hp-scene { animation: hpFloat 7s ease-in-out infinite; }
.hp-scene svg { display: block; width: 100%; height: auto; overflow: visible; }

.amb { transform-box: fill-box; transform-origin: center; animation: hpGlow 9s ease-in-out infinite; }
.amb.a2 { animation-duration: 11s; animation-delay: -3s; }
.amb.a3 { animation-duration: 13s; animation-delay: -6s; }
.led    { animation: hpBlink 2.2s ease-in-out infinite; }
.led-h  { transform-box: fill-box; transform-origin: center; animation: hpHalo 2.2s ease-in-out infinite; }
.seam   { animation: hpSeam 3.4s ease-in-out infinite; }
.scan   { animation: hpScan 4.6s cubic-bezier(.4,0,.2,1) infinite; }
.dust   { transform-box: fill-box; transform-origin: center; animation: hpDust 8s linear infinite; }

@keyframes hpFloat   { 0%,100% { transform:translateY(0);     } 50% { transform:translateY(-15px); } }
@keyframes hpGlow    { 0%,100% { opacity:.32;transform:scale(1);   } 50% { opacity:.52;transform:scale(1.12); } }
@keyframes hpBlink   { 0%,100% { opacity:1; }  50% { opacity:.25; } }
@keyframes hpHalo    { 0%,100% { opacity:.4;transform:scale(1);  } 50% { opacity:.12;transform:scale(.7); } }
@keyframes hpSeam    { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes hpScan    { 0% { transform:translateY(-170px);opacity:0; } 12% { opacity:.9; } 88% { opacity:.9; } 100% { transform:translateY(360px);opacity:0; } }
@keyframes hpDust    { 0% { transform:translateY(20px);opacity:0; } 20% { opacity:.9; } 80% { opacity:.9; } 100% { transform:translateY(-130px);opacity:0; } }

/* Glass floating cards */
.hp-card {
  position: absolute;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; border-radius: 16px;
  background: linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 38px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.22);
}
.hp-card .ic { width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;box-shadow:0 8px 16px -6px rgba(0,0,0,.5); }
.hp-card .tx b  { display:block;color:#fff;font-size:13px;font-weight:600;line-height: 1.35; }
.hp-card .tx span { color:rgba(255,255,255,.6);font-size:10.5px; }

/* AI gauge card */
.hp-card.card-ai { top:12%;right:2%;animation:hpCard 5.5s ease-in-out infinite; }
.hp-gauge { position:relative;width:46px;height:46px;flex-shrink:0; }
.hp-gauge svg { width:46px;height:46px;display:block; }
.hp-gauge .g-track { fill:none;stroke:rgba(255,255,255,.12);stroke-width:5; }
.hp-gauge .g-fill  { fill:none;stroke:url(#aiGauge);stroke-width:5;stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:126;transform:rotate(-90deg);transform-origin:center;animation:hpGauge 3.4s ease-in-out infinite; }
.hp-gauge .g-num   { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff; }
.hp-card.card-ai .tx b { display:flex;align-items:center;gap:5px; }
.hp-card.card-ai .tx b .spark { width:11px;height:11px;background:linear-gradient(135deg,#9bf3fb,#8b5cf6);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:hpTwinkle 2.4s ease-in-out infinite; }

@keyframes hpGauge  { 0% { stroke-dashoffset:126; } 55%,100% { stroke-dashoffset:34; } }
@keyframes hpTwinkle { 0%,100% { opacity:1;transform:scale(1) rotate(0); } 50% { opacity:.45;transform:scale(.8) rotate(90deg); } }
@keyframes hpCard   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-16px); } }

.card-ssl { top:44%;left:-9%;animation:hpCard 6.8s ease-in-out infinite reverse; }
.card-ssl .ic { background:linear-gradient(135deg,#22d07e,#13a3a8); }
.card-up  { bottom:13%;right:-5%;animation:hpCard 7.6s ease-in-out infinite; }
.card-up  .ic { background:linear-gradient(135deg,#2f7bff,#16d3e0); }

.hp-pill {
  position:absolute;left:4%;bottom:8%;
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:30px;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 28px -8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);
  font-size:11px;font-weight:600;color:#fff;animation:hpCard 6s ease-in-out infinite;
}
.hp-pill .dot { width:8px;height:8px;border-radius:50%;background:#22d07e;box-shadow:0 0 8px #22d07e;animation:hpBlink 1.6s infinite; }

/* Light mode hero cards */
body.light-mode .hp-card { background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.1);box-shadow:0 8px 24px rgba(0,0,0,.1); }
body.light-mode .hp-card .tx b  { color:#0f172a; }
body.light-mode .hp-card .tx span { color:#64748b; }
body.light-mode .hp-gauge .g-num  { color:#0f172a; }
body.light-mode .hp-pill { background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.1);color:#0f172a; }

/* Hero responsive */
@media (max-width:1199px) { .hmk-hero { width:500px; } }
@media (max-width:991px) {
  .hmk-hero { width:430px; }
  .hp-card { padding:10px 12px;gap:9px;border-radius:14px; }
  .hp-card .ic { width:34px;height:34px;font-size:14px; }
  .hp-card .tx b { font-size:11.5px; }
  .hp-card .tx span { font-size:9.5px; }
  .hp-gauge, .hp-gauge svg { width:40px;height:40px; }
  .card-ai { top:4%;right:-2%; }
  .card-ssl { top:44%;left:-3%; }
  .card-up  { bottom:11%;right:-1%; }
  .hp-pill  { left:2%;bottom:6%; }
}
@media (max-width:767px) {
  .hmk-hero { width:340px;filter:drop-shadow(0 24px 36px rgba(0,0,0,.5)); }
  .card-ai  { top:1%;right:3%; }
  .card-ssl { top:42%;left:2%; }
  .card-up  { bottom:9%;right:3%; }
  .hp-card .tx span { display:none; }
}
@media (max-width:479px) {
  .hmk-hero { width:290px;margin:40px auto 0; }
  .hp-pill  { left:-6%; }
  .hp-card  { padding:8px 10px; }
  .hp-card .ic { width:30px;height:30px;font-size:12px; }
  .hp-gauge, .hp-gauge svg { width:34px;height:34px; }
  .hp-gauge .g-num { font-size:10px; }
  .hp-pill  { font-size:10px;padding:6px 10px; }
}
@media (prefers-reduced-motion:reduce) { .hmk-hero * { animation:none !important; } }

/* ── FEATURE CARDS (home variant with wider gap) ─────────── */
.container-custom.pb-5 > .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 2rem;
  padding-top: 4rem;
}
.container-custom.pb-5 .feature-card { height: 100%; }

@media (max-width:767px) {
  .container-custom.pb-5 > .row { padding-top: 0.5rem; }
  .container-custom.pb-5 .feature-card { text-align: center; }
  .container-custom.pb-5 .feature-card .icon-box { margin-left: auto; margin-right: auto; }
}

/* ── BACKGROUND COLOUR SECTIONS ─────────────────────────── */
body:not(.light-mode) { background-color: #0B1120; }
body:not(.light-mode) .hmk-payment-section  { background:#040a15; }
body:not(.light-mode) .hmk-faq-section,
body:not(.light-mode) .hmk-compare-section  { background:#06090f; }

/* ── COMPARISON TABLE ENHANCEMENTS ──────────────────────── */
.hmk-compare-table-wrapper {
  max-width:900px;margin:0 auto;
  box-shadow:0 30px 60px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05);
}
.hmk-compare-table th.hmk-col { border-top:4px solid var(--brand-blue) !important;overflow:hidden;position:relative; }
.hmk-compare-table thead .hmk-col::before {
  content:'';position:absolute;top:0;left:-150%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-25deg);animation:tableShine 5s infinite;pointer-events:none;
}
@keyframes tableShine { 0% { left:-150%; } 20% { left:150%; } 100% { left:150%; } }
.hmk-compare-table .hmk-col i.text-success { color:#22d07e !important;filter:drop-shadow(0 0 8px rgba(34,208,126,.7));font-size:1.2rem; }
.hmk-compare-table tbody tr:hover .hmk-col  { background:linear-gradient(180deg,rgba(47,134,255,.18) 0%,rgba(47,134,255,.08) 100%) !important; }
.hmk-compare-table tbody tr:hover .others-col { opacity:.3;filter:grayscale(1); }
.others-col { opacity:.7; }
.feature-col { padding-left:2rem !important;font-weight:600; }

@media (max-width:767px) {
  .feature-col { padding-left:1rem !important;width:35%;font-size:.82rem; }
  .hmk-brand-badge img { display:none; }
  .hmk-compare-table th, .hmk-compare-table td { padding:.85rem .5rem;font-size:.78rem; }
}

/* ── HOW IT WORKS — connecting line ─────────────────────── */
.hmk-steps-wrapper { position:relative; padding:2.5rem 0; isolation: isolate; }
.hmk-steps-wrapper::before {
  content:''; position:absolute; top:40%; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg,rgba(47,134,255,0) 0%,#2f86ff 20%,#7b61ff 80%,rgba(123,97,255,0) 100%);
  box-shadow:0 0 15px rgba(47,134,255,.6); z-index:0; transform:translateY(-50%);
  pointer-events: none;
}
.hmk-steps-wrapper .hmk-step-card {
  position: relative;
  z-index: 2;
  background: #0d1526;
  border: 1px solid rgba(255,255,255,.07);
}
body.light-mode .hmk-steps-wrapper .hmk-step-card {
  background: #ffffff;
}
@media (max-width:991px) {
  .hmk-steps-wrapper { display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:1.5rem;padding:2.5rem 1rem;margin:0 -15px;scrollbar-width:none; }
  .hmk-steps-wrapper::-webkit-scrollbar { display:none; }
  .hmk-steps-wrapper::before { display:none; }
  .hmk-step-card { flex:0 0 75%;scroll-snap-align:center; }
}
@media (max-width:575px) { .hmk-step-card { flex:0 0 88%; } }

/* ── MIGRATION SECTION BACKGROUND ───────────────────────── */
.hmk-migration-section { background:var(--bg-page); }

/* ── TESTIMONIAL SECTION ─────────────────────────────────── */
.hmk-testimonial-section { background:var(--bg-primary); }

/* ── PAYMENT SECTION LIGHT MODE ─────────────────────────── */
body.light-mode .hmk-payment-section { border-top-color:rgba(0,0,0,.08) !important; }

/* ── HERO SECTION SPACING FIX (narrow breakpoint) ───────── */
@media only screen and (min-width:991px) and (max-width:1097px) {
  .header { padding-top:100px; }
}
@media (max-width: 991px) {
  .header { padding-top: 90px; padding-bottom: 40px; }
}
@media (max-width: 767px) {
  .header { padding-top: 80px; padding-bottom: 30px; }
}