/* ================================================================
   Armitra — Home (Public) Theme: Modern Fintech
   Style: Gradient + Glassmorphism + Indigo/Purple/Cyan
   Loaded only by index.php and public marketing pages
   ================================================================ */

:root{
  --arm-primary:#6366f1;
  --arm-primary-2:#8b5cf6;
  --arm-accent:#06b6d4;
  --arm-gold:#f59e0b;
  --arm-bg:#0b1024;
  --arm-bg-2:#11173a;
  --arm-card:rgba(255,255,255,.06);
  --arm-card-border:rgba(255,255,255,.12);
  --arm-text:#e6e8ff;
  --arm-text-dim:#a3a8c7;
  --arm-success:#10b981;
  --arm-danger:#ef4444;
  --arm-radius:16px;
  --arm-shadow:0 20px 60px -20px rgba(99,102,241,.45);
  --arm-shadow-soft:0 8px 24px -8px rgba(2,6,23,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.armitra-home{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:#0b1024;
  color:var(--arm-text);
  overflow-x:hidden;
}

/* ---------- Animated Gradient Backdrop ---------- */
.arm-bg-orbs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.arm-bg-orbs::before,.arm-bg-orbs::after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  filter:blur(120px);opacity:.55;animation:armFloat 18s ease-in-out infinite;
}
.arm-bg-orbs::before{background:#6366f1;top:-160px;left:-120px}
.arm-bg-orbs::after{background:#06b6d4;bottom:-180px;right:-160px;animation-delay:-9s}
@keyframes armFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60px,40px) scale(1.15)}
}

/* ---------- Container ---------- */
.arm-container{max-width:1240px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* ---------- Top Bar ---------- */
.arm-topbar{
  background:rgba(8,11,32,.7);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13px;color:var(--arm-text-dim);padding:8px 0;position:relative;z-index:5
}
.arm-topbar .arm-container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.arm-topbar a{color:var(--arm-text-dim);text-decoration:none;margin-left:14px}
.arm-topbar a:hover{color:#fff}
.arm-topbar i{color:var(--arm-accent);margin-right:6px}

/* ---------- Header / Nav ---------- */
.arm-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,16,36,.75);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.arm-header .arm-container{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:24px}
.arm-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.arm-logo-mark{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--arm-primary),var(--arm-primary-2));
  font-weight:800;color:#fff;font-size:20px;
  box-shadow:0 10px 30px -8px rgba(139,92,246,.6);
}
.arm-logo b{font-size:22px;letter-spacing:.5px}
.arm-logo small{display:block;font-size:11px;color:var(--arm-text-dim);font-weight:500;margin-top:-2px}

.arm-nav{display:flex;gap:6px;align-items:center}
.arm-nav a{
  color:var(--arm-text-dim);text-decoration:none;font-size:14px;font-weight:500;
  padding:9px 14px;border-radius:999px;transition:.2s
}
.arm-nav a:hover,.arm-nav a.active{color:#fff;background:rgba(255,255,255,.07)}

.arm-cta{display:flex;gap:10px;align-items:center}
.arm-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:.25s;
}
.arm-btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.18);background:transparent}
.arm-btn-ghost:hover{background:rgba(255,255,255,.07)}
.arm-btn-primary{
  background:linear-gradient(135deg,var(--arm-primary),var(--arm-primary-2));color:#fff;
  box-shadow:0 10px 28px -8px rgba(99,102,241,.6);
}
.arm-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(99,102,241,.8)}
.arm-btn-accent{background:linear-gradient(135deg,var(--arm-accent),#0891b2);color:#fff}
.arm-btn-lg{padding:14px 28px;font-size:16px}

.arm-mobile-toggle{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer}

/* ---------- Hero ---------- */
.arm-hero{padding:90px 0 80px;position:relative}
.arm-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.arm-eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.35);
  font-size:12px;font-weight:600;color:#c7d2fe;letter-spacing:.5px;text-transform:uppercase
}
.arm-hero h1{
  font-size:clamp(34px,5.4vw,62px);line-height:1.05;margin:18px 0 18px;
  font-weight:800;letter-spacing:-1px;
  background:linear-gradient(135deg,#fff 0%,#c7d2fe 60%,#67e8f9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.arm-hero p.arm-lead{font-size:18px;color:var(--arm-text-dim);max-width:560px;line-height:1.7;margin:0 0 28px}
.arm-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}

.arm-trust{display:flex;gap:28px;flex-wrap:wrap;align-items:center;color:var(--arm-text-dim);font-size:13px}
.arm-trust b{color:#fff;font-size:22px;display:block;font-weight:700}

/* Hero floating card */
.arm-hero-visual{position:relative;height:480px}
.arm-glass-card{
  position:absolute;background:var(--arm-card);backdrop-filter:blur(20px);
  border:1px solid var(--arm-card-border);border-radius:var(--arm-radius);
  padding:18px 20px;box-shadow:var(--arm-shadow);
}
.arm-glass-card.main{
  inset:30px 20px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(6,182,212,.10));
}
.arm-glass-card.float-1{top:0;right:0;width:230px;animation:armFloat 6s ease-in-out infinite}
.arm-glass-card.float-2{bottom:0;left:-10px;width:240px;animation:armFloat 7s ease-in-out -3s infinite}
.arm-glass-card .arm-mini-icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;color:#fff;
  background:linear-gradient(135deg,var(--arm-primary),var(--arm-primary-2));margin-bottom:10px;
}
.arm-balance{font-size:36px;font-weight:800;letter-spacing:-.5px;color:#fff;margin:6px 0}
.arm-tx-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid rgba(255,255,255,.07);font-size:13px}
.arm-tx-row:first-of-type{border-top:none}

/* ---------- Section ---------- */
.arm-section{padding:80px 0;position:relative}
.arm-section-head{text-align:center;max-width:680px;margin:0 auto 50px}
.arm-section-head h2{
  font-size:clamp(28px,3.4vw,42px);font-weight:800;margin:10px 0;color:#fff;letter-spacing:-.5px
}
.arm-section-head p{color:var(--arm-text-dim);font-size:16px;line-height:1.7}

/* ---------- Services Grid ---------- */
.arm-cat-title{
  display:flex;align-items:center;gap:10px;margin:34px 0 16px;
  font-size:18px;font-weight:700;color:#fff;letter-spacing:.3px
}
.arm-cat-title i{color:var(--arm-primary)}
.arm-cat-title span{
  margin-left:6px;font-size:11px;font-weight:700;
  background:rgba(99,102,241,.18);color:#c7d2fe;
  padding:3px 9px;border-radius:999px;border:1px solid rgba(99,102,241,.35)
}
.arm-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:8px}
.arm-service-card{
  position:relative;background:var(--arm-card);border:1px solid var(--arm-card-border);
  border-radius:var(--arm-radius);padding:28px 22px;text-decoration:none;color:#fff;
  transition:.3s cubic-bezier(.4,0,.2,1);overflow:hidden;
}
.arm-service-card::before{
  content:"";position:absolute;inset:0;border-radius:var(--arm-radius);
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(6,182,212,.05));
  opacity:0;transition:.3s
}
.arm-service-card:hover{transform:translateY(-6px);border-color:rgba(99,102,241,.5);box-shadow:var(--arm-shadow)}
.arm-service-card:hover::before{opacity:1}
.arm-service-card>*{position:relative;z-index:1}
.arm-service-icon{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,var(--arm-primary),var(--arm-primary-2));color:#fff;
  margin-bottom:16px;box-shadow:0 10px 24px -8px rgba(99,102,241,.5)
}
.arm-service-card h3{margin:0 0 6px;font-size:17px;font-weight:700}
.arm-service-card p{margin:0;color:var(--arm-text-dim);font-size:13px;line-height:1.55}
.arm-service-card .arm-arrow{
  position:absolute;top:22px;right:22px;color:var(--arm-text-dim);transition:.3s
}
.arm-service-card:hover .arm-arrow{color:var(--arm-accent);transform:translate(4px,-4px)}

/* ---------- Stats ---------- */
.arm-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(6,182,212,.06));
  border:1px solid var(--arm-card-border);border-radius:24px;padding:40px 30px;
  backdrop-filter:blur(14px)
}
.arm-stat{text-align:center}
.arm-stat-num{font-size:42px;font-weight:800;color:#fff;letter-spacing:-1px;
  background:linear-gradient(135deg,#a5b4fc,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.arm-stat-label{color:var(--arm-text-dim);font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin-top:6px}

/* ---------- Features (Why Armitra) ---------- */
.arm-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.arm-feature{
  background:var(--arm-card);border:1px solid var(--arm-card-border);border-radius:var(--arm-radius);
  padding:28px;transition:.3s
}
.arm-feature:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.4)}
.arm-feature-icon{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:20px;
  background:linear-gradient(135deg,var(--arm-accent),#0891b2);margin-bottom:14px
}
.arm-feature h4{margin:0 0 8px;color:#fff;font-size:17px}
.arm-feature p{margin:0;color:var(--arm-text-dim);font-size:14px;line-height:1.6}

/* ---------- CTA banner ---------- */
.arm-cta-banner{
  background:linear-gradient(135deg,var(--arm-primary) 0%,var(--arm-primary-2) 50%,var(--arm-accent) 100%);
  border-radius:24px;padding:50px 40px;text-align:center;position:relative;overflow:hidden
}
.arm-cta-banner::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.2),transparent 50%);
}
.arm-cta-banner h2{color:#fff;font-size:32px;margin:0 0 10px;position:relative}
.arm-cta-banner p{color:rgba(255,255,255,.9);margin:0 0 26px;font-size:16px;position:relative}
.arm-cta-banner .arm-btn{position:relative;background:#fff;color:var(--arm-primary)}
.arm-cta-banner .arm-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -6px rgba(0,0,0,.4)}

/* ---------- Footer ---------- */
.arm-footer{
  background:#06091e;border-top:1px solid rgba(255,255,255,.06);padding:60px 0 24px;color:var(--arm-text-dim)
}
.arm-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.arm-footer h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin:0 0 16px}
.arm-footer ul{list-style:none;padding:0;margin:0}
.arm-footer ul li{margin-bottom:10px}
.arm-footer a{color:var(--arm-text-dim);text-decoration:none;font-size:14px}
.arm-footer a:hover{color:#fff}
.arm-footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px
}
.arm-social{display:flex;gap:10px;margin-top:14px}
.arm-social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);
  display:grid;place-items:center;color:#fff;transition:.2s
}
.arm-social a:hover{background:var(--arm-primary);transform:translateY(-2px)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .arm-hero-grid{grid-template-columns:1fr;gap:40px}
  .arm-hero-visual{height:380px;max-width:420px;margin:0 auto}
  .arm-footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .arm-nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(11,16,36,.96);
    flex-direction:column;align-items:stretch;padding:14px;gap:4px;border-bottom:1px solid rgba(255,255,255,.06)}
  .arm-nav.open{display:flex}
  .arm-nav a{padding:12px 16px;border-radius:10px}
  .arm-mobile-toggle{display:block}
  .arm-cta .arm-btn-ghost{display:none}
}
@media (max-width:520px){
  .arm-footer-grid{grid-template-columns:1fr}
  .arm-cta-banner{padding:40px 20px}
  .arm-cta-banner h2{font-size:24px}
  .arm-section{padding:56px 0}
  .arm-hero{padding:50px 0 40px}
}