
/* ==========================================================
   M TEK — PREMIUM CORPORATE UI LAYER
   Visual-only enhancement layer. No content/data changes.
========================================================== */
:root{
  --mtek-navy:#07111f;
  --mtek-navy-2:#0c1a2c;
  --mtek-panel:#101d30;
  --mtek-panel-2:#14243a;
  --mtek-line:rgba(148,163,184,.14);
  --mtek-gold:#f5c84c;
  --mtek-gold-2:#ffdf73;
  --mtek-teal:#24d6ad;
  --mtek-blue:#69a9ff;
  --mtek-text:#f7fbff;
  --mtek-muted:#91a4bb;
  --mtek-shadow:0 18px 55px rgba(1,8,20,.28);
}

body{
  background:radial-gradient(circle at 10% 0%,rgba(245,200,76,.055),transparent 28%),
             radial-gradient(circle at 100% 20%,rgba(36,214,173,.045),transparent 24%),
             linear-gradient(180deg,#06101d 0%,#091526 52%,#07111f 100%) !important;
}

.page-container,
.dashboard-content,
.main-content{
  color:var(--mtek-text);
}

.hero-card,
.wallet-card,
.table-card,
.settings-card,
.profile-card,
.security-card,
.support-card,
.dashboard-card,
.stat-card,
.toolbar,
.form-card,
.content-card{
  border:1px solid var(--mtek-line) !important;
  background:linear-gradient(145deg,rgba(18,34,56,.96),rgba(10,22,38,.96)) !important;
  box-shadow:var(--mtek-shadow) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.hero-card,
.table-card,
.dashboard-card,
.wallet-card,
.settings-card,
.profile-card,
.security-card,
.support-card,
.form-card,
.content-card{border-radius:22px !important;}

.hero-card,
.dashboard-hero{
  position:relative;
  overflow:hidden;
}
.hero-card::after,
.dashboard-hero::after{
  content:"";
  position:absolute;
  inset:auto -8% -60% 48%;
  height:180px;
  background:radial-gradient(circle,rgba(245,200,76,.13),transparent 68%);
  pointer-events:none;
}

.section-title-row,
.card-heading,
.table-header{margin-bottom:16px;}
.section-title-row h3,
.card-heading h3,
.table-header h3,
.hero-card h1,
.dashboard-card h3{color:#fff !important;letter-spacing:-.015em;}

.section-kicker,
.hero-tag,
.eyebrow{
  color:var(--mtek-gold-2) !important;
  letter-spacing:.12em !important;
  text-transform:uppercase;
  font-weight:800 !important;
}

button,.btn,.soft-btn,.btn-search,.btn-reset,
a.invest-btn,.invest-btn{
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease !important;
}
button:hover,.btn:hover,.soft-btn:hover,.btn-search:hover,.btn-reset:hover,
a.invest-btn:hover,.invest-btn:hover{
  transform:translateY(-1px);
}

input,select,textarea{
  border-color:rgba(148,163,184,.18) !important;
  background:rgba(8,18,32,.72) !important;
  color:#f4f8fc !important;
  border-radius:12px !important;
}
input::placeholder,textarea::placeholder{color:#71839a !important;}
input:focus,select:focus,textarea:focus{
  border-color:rgba(245,200,76,.55) !important;
  box-shadow:0 0 0 3px rgba(245,200,76,.09) !important;
  outline:none !important;
}

.stat-card:hover,.dashboard-card:hover,.table-card:hover,.plan-card:hover,.wallet-card:hover{
  border-color:rgba(245,200,76,.24) !important;
}

.stat-card strong,
.stat-card h3,
.wallet-info h3,
.hero-balance h2{font-variant-numeric:tabular-nums;}

@media(max-width:700px){
  .hero-card,.dashboard-hero,.dashboard-card,.table-card,.wallet-card,
  .settings-card,.profile-card,.security-card,.support-card,.form-card,.content-card{border-radius:18px !important;}
  .section-title-row h3,.card-heading h3,.table-header h3{font-size:17px !important;}
  .hero-card h1{font-size:25px !important;line-height:1.15 !important;}
  input,select,textarea{min-height:44px;}
}


/* ==========================================================
   M TEK FUTURE CORPORATE 2030 VISUAL LAYER
   Visual-only: no layout/data/logic changes.
========================================================== */
body{
  background:
    radial-gradient(900px 420px at 8% -5%,rgba(82,145,255,.08),transparent 55%),
    radial-gradient(760px 420px at 98% 4%,rgba(26,214,171,.06),transparent 52%),
    linear-gradient(180deg,#050d18 0%,#081321 48%,#06101b 100%) !important;
}
.main-content::before,
.page-container::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.012),transparent 32%,rgba(255,255,255,.008) 68%,transparent);
  mix-blend-mode:screen;
  opacity:.8;
}
.main-content{position:relative;isolation:isolate;}
.dashboard-card,
.stat-card,
.table-card,
.wallet-card,
.hero-card,
.form-card,
.content-card,
.settings-card,
.profile-card,
.security-card,
.support-card,
.plan-card{
  border-color:rgba(126,170,214,.13) !important;
  background:linear-gradient(145deg,rgba(17,31,51,.97),rgba(9,20,35,.97)) !important;
  box-shadow:0 20px 60px rgba(1,7,16,.28),inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.dashboard-card:hover,
.stat-card:hover,
.plan-card:hover,
.content-card:hover,
.table-card:hover{
  transform:translateY(-1px);
  border-color:rgba(90,210,188,.20) !important;
}
.btn-primary,.register-btn,.otp-btn,.verify-btn{
  box-shadow:0 10px 28px rgba(25,199,132,.16),inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.section-title-row h3,
.card-heading h3,
.table-header h3,
.dashboard-card h3{ text-shadow:0 0 18px rgba(126,170,214,.08); }
@media(max-width:700px){
  .main-content::before{opacity:.35;}
  .dashboard-card,.stat-card,.table-card,.wallet-card,.hero-card,.content-card{box-shadow:0 12px 34px rgba(0,0,0,.22) !important;}
}
