/* Minecore - Optimized Responsive Stylesheet 2025 */
:root{
  --bg: #fafcfb;
  --green: #00d98e;
  --green-2: #00b574;
  --muted: #64748b;
  --card: rgba(255,255,255,0.75);
  --glass: rgba(255,255,255,0.65);
  --shadow: 0 20px 60px rgba(0,217,142,0.12), 0 8px 24px rgba(0,181,116,0.08);
  --radius: 20px;
  --accent: linear-gradient(135deg,#00d98e 0%,#00b574 100%);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --nav-height: 96px;
}

/* Reset & Base - CRITICAL for responsive */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,body{height:100%;margin:0;overflow-x:hidden;width:100%}
body{
  background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 50%,#d1fae5 100%);
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  min-height:100vh;
  color:#0f172a;
  line-height:1.6;
  font-size:clamp(14px,2vw,16px);
  padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px) + 16px);
  position:relative;
  width:100%;
  max-width:100vw;
}

/* Layout - Prevent overflow */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(12px,3vw,20px);
  width:100%;
  box-sizing:border-box;
}

/* Hero Section - Fully Responsive */
.hero{
  padding:clamp(20px,5vw,40px) 0;
  position:relative;
  overflow:hidden;
  width:100%;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:center;
  position:relative;
  justify-items:center;
  min-height:clamp(320px,60vw,500px);
  width:100%;
  max-width:100%;
}
.hero-content{
  position:absolute;
  z-index:10;
  text-align:center;
  max-width:min(90%,700px);
  padding:clamp(12px,3vw,20px);
  left:50%;
  transform:translateX(-50%);
  width:90%;
}
.hero-content h2{
  font-size:clamp(22px,5vw,36px);
  font-weight:800;
  margin:0 0 clamp(10px,2vw,16px);
  line-height:1.2;
  background:linear-gradient(135deg,#0f172a 0%,#00b574 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  word-wrap:break-word;
}
.lead{
  font-size:clamp(13px,2.5vw,16px);
  color:var(--muted);
  margin-bottom:clamp(16px,3vw,24px);
  line-height:1.7;
  text-shadow:0 2px 8px rgba(255,255,255,0.9);
  font-weight:500;
}
.hero-features{
  list-style:none;
  padding:0;
  margin:clamp(12px,2vw,20px) 0;
  display:flex;
  flex-direction:column;
  gap:clamp(6px,1.5vw,10px);
  align-items:center;
}
.hero-features li{
  display:flex;
  align-items:center;
  gap:clamp(6px,1.5vw,10px);
  font-size:clamp(12px,2.2vw,15px);
  font-weight:600;
  color:#0f172a;
  text-shadow:0 2px 8px rgba(255,255,255,0.9);
}
.hero-features i{
  color:var(--green);
  font-size:clamp(14px,2.5vw,18px);
  flex-shrink:0;
}
.hero-actions{
  display:flex;
  gap:clamp(8px,2vw,12px);
  margin-top:clamp(16px,3vw,24px);
  justify-content:center;
  flex-wrap:wrap;
}
.hero-media{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  width:100%;
  pointer-events:none;
}
.coin-card{
  position:relative;
  width:clamp(220px,50vw,400px);
  height:clamp(220px,50vw,400px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.coin{
  width:clamp(180px,45vw,350px);
  height:clamp(180px,45vw,350px);
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 24px 64px rgba(0,217,142,0.25);
  animation:float-coin 3800ms ease-in-out infinite;
  position:relative;
  z-index:2;
  border:clamp(2px,0.5vw,4px) solid rgba(255,255,255,0.6);
  filter:blur(clamp(6px,1.5vw,10px));
  opacity:0.35;
}
.coin-glow{
  position:absolute;
  width:clamp(200px,47vw,380px);
  height:clamp(200px,47vw,380px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,217,142,0.3),transparent 70%);
  z-index:1;
  animation:pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.1);opacity:0.9}}
@keyframes float-coin{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(-4deg)}}

/* Quick Actions - Responsive Grid */
.quick-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100px,100%),1fr));
  gap:clamp(10px,2vw,16px);
  margin:clamp(20px,4vw,40px) auto;
  max-width:100%;
}
.quick{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(6px,1.5vw,10px);
  padding:clamp(16px,3vw,24px);
  background:rgba(255,255,255,0.75);
  border-radius:clamp(14px,2.5vw,20px);
  box-shadow:0 16px 48px rgba(0,217,142,0.12);
  text-decoration:none;
  color:#334155;
  font-weight:600;
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.5);
  font-size:clamp(12px,2vw,14px);
}
.quick:hover{
  transform:translateY(-6px);
  color:var(--green);
  box-shadow:0 20px 60px rgba(0,217,142,0.18);
}
.quick i{
  font-size:clamp(24px,5vw,32px);
  background:var(--accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Plans Section - Responsive */
.plans-section{
  padding:clamp(30px,8vw,60px) clamp(12px,3vw,20px);
}
.section-header{
  text-align:center;
  margin-bottom:clamp(25px,5vw,40px);
}
.section-header h3{
  font-size:clamp(24px,5vw,36px);
  font-weight:800;
  margin:0 0 clamp(8px,1.5vw,12px);
  background:var(--accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Machine Cards - Optimized Responsive */
.machines-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:clamp(16px,3vw,24px);
  margin-top:clamp(20px,4vw,40px);
  width:100%;
}
.machine-card{
  background:rgba(255,255,255,0.75);
  border-radius:clamp(16px,3vw,24px);
  padding:clamp(18px,3.5vw,28px) clamp(16px,3vw,20px);
  text-align:center;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(20px);
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}
.machine-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:4px;
  background:var(--accent);
  border-radius:24px 24px 0 0;
}
.machine-card:hover{
  transform:translateY(-10px);
  box-shadow:0 32px 90px rgba(0,217,142,0.22);
}
.machine-card.pro:hover{
  box-shadow:0 36px 100px rgba(255,215,0,0.35),0 12px 40px rgba(255,200,0,0.25);
}
.machine-card.enrollment:hover{
  box-shadow:0 36px 100px rgba(255,215,0,0.35),0 12px 40px rgba(255,200,0,0.25);
}
/* Machine Cards - Premium Variants */
.machine-card.pro{
  background:linear-gradient(135deg,rgba(255,215,0,0.2),rgba(255,255,255,0.85));
  border:2px solid rgba(255,215,0,0.5);
  box-shadow:0 24px 72px rgba(255,215,0,0.25),0 8px 24px rgba(255,200,0,0.15);
  position:relative;
  overflow:visible;
}
.machine-card.pro::before{
  background:linear-gradient(90deg,#ffd700,#ffed4e,#ffd700);
  height:5px;
  animation:shimmer-gold 3s linear infinite;
}
@keyframes shimmer-gold{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}
.machine-card.pro::after{
  content:'⭐ PREMIUM';
  position:absolute;
  top:-12px;
  right:15px;
  background:linear-gradient(135deg,#ffd700,#ffb700);
  color:#000;
  padding:4px 12px;
  border-radius:20px;
  font-size:10px;
  font-weight:900;
  letter-spacing:0.5px;
  box-shadow:0 6px 20px rgba(255,215,0,0.4);
  z-index:10;
}
.machine-card.enrollment{
  border:2px solid rgba(255,215,0,0.5);
  background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,255,255,0.85));
  box-shadow:0 24px 72px rgba(255,215,0,0.25),0 8px 24px rgba(255,200,0,0.15);
  position:relative;
  overflow:visible;
}
.machine-card.enrollment::before{
  background:linear-gradient(90deg,#ffd700,#ffed4e,#ffd700);
  height:5px;
  animation:shimmer-gold 3s linear infinite;
}
.machine-card.enrollment::after{
  content:'🎓 SPECIAL';
  position:absolute;
  top:-12px;
  right:15px;
  background:linear-gradient(135deg,#ffd700,#ffb700);
  color:#000;
  padding:4px 12px;
  border-radius:20px;
  font-size:10px;
  font-weight:900;
  letter-spacing:0.5px;
  box-shadow:0 6px 20px rgba(255,215,0,0.4);
  z-index:10;
}
.machine-icon img{
  width:clamp(52px,10vw,68px);
  height:clamp(52px,10vw,68px);
  border-radius:clamp(12px,2.5vw,18px);
  object-fit:cover;
  box-shadow:0 12px 32px rgba(0,217,142,0.25);
  margin-bottom:clamp(12px,2.5vw,16px);
}
.machine-card h4{
  margin:0 0 clamp(8px,1.5vw,12px);
  font-size:clamp(16px,3vw,18px);
  font-weight:700;
  color:#0f172a;
}
.machine-price{
  font-size:clamp(32px,6vw,42px);
  font-weight:800;
  background:var(--accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:clamp(6px,1.5vw,8px) 0 clamp(3px,1vw,4px);
}
.validity{
  font-size:clamp(12px,2vw,14px);
  color:var(--muted);
  margin:clamp(6px,1.5vw,8px) 0 clamp(12px,2.5vw,16px);
}
.earnings{
  font-size:clamp(12px,2vw,14px);
  color:#334155;
  line-height:1.7;
  margin:clamp(12px,2.5vw,16px) 0;
  padding:clamp(10px,2vw,12px);
  background:rgba(0,217,142,0.06);
  border-radius:clamp(10px,2vw,14px);
  border:1px solid rgba(0,217,142,0.15);
}
.machine-actions{
  margin-top:clamp(16px,3vw,20px);
  display:flex;
  flex-direction:column;
  gap:clamp(8px,1.5vw,10px);
}
.machine-form{
  display:block;
  margin:0;
  padding:0;
  width:100%;
}
.machine-form > .machine-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Buttons - Responsive */
.btn{
  font-weight:600;
  border:0;
  border-radius:clamp(10px,2vw,14px);
  padding:clamp(10px,2vw,12px) clamp(18px,3.5vw,24px);
  cursor:pointer;
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
  font-size:clamp(13px,2.5vw,15px);
  width:100%;
  box-sizing:border-box;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent);
  color:white;
  box-shadow:0 8px 24px rgba(0,217,142,0.25),0 4px 12px rgba(0,181,116,0.15);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,217,142,0.35),0 6px 16px rgba(0,181,116,0.2);
}
.btn-ghost{
  background:rgba(255,255,255,0.7);
  color:var(--green);
  border:1px solid rgba(0,217,142,0.2);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.9);
  border-color:rgba(0,217,142,0.4);
}
.btn-outline{
  background:rgba(255,255,255,0.5);
  color:var(--green);
  border:1px solid rgba(0,217,142,0.25);
  backdrop-filter:blur(10px);
}

/* Footer - Responsive */
.site-footer{
  background:rgba(255,255,255,0.8);
  border-top:1px solid rgba(0,217,142,0.12);
  padding:clamp(20px,4vw,30px) 0;
  margin-top:clamp(40px,8vw,80px);
  backdrop-filter:blur(20px);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:clamp(12px,2.5vw,20px);
  padding:0 clamp(12px,3vw,20px);
}
.footer-right{
  display:flex;
  gap:clamp(12px,2.5vw,20px);
  flex-wrap:wrap;
}
.footer-right a{
  text-decoration:none;
  font-size:clamp(12px,2vw,14px);
  transition:color .2s;
}

/* Header & Nav - Responsive */
.site-header{
  border-bottom:1px solid rgba(0,217,142,0.12);
  background:linear-gradient(180deg,rgba(255,255,255,0.85),rgba(255,255,255,0.65));
  backdrop-filter:blur(20px);
  position:sticky;
  top:0;
  z-index:100;
  width:100%;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(10px,2vw,16px);
  padding:clamp(10px,2vw,12px) clamp(12px,3vw,20px);
  max-width:1200px;
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,14px);
}
.logo{
  height:clamp(38px,7vw,46px);
  width:clamp(38px,7vw,46px);
  border-radius:clamp(10px,2vw,14px);
  object-fit:cover;
  box-shadow:0 8px 24px rgba(0,217,142,0.18),0 2px 8px rgba(0,181,116,0.12);
  flex-shrink:0;
}
.brand-text h1{
  margin:0;
  font-size:clamp(16px,3vw,18px);
  background:var(--accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:700;
}
.brand-text .tag{
  margin:0;
  color:var(--muted);
  font-size:clamp(11px,2vw,13px);
  font-weight:500;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(8px,1.5vw,12px);
}
.nav-link{
  color:var(--muted);
  text-decoration:none;
  padding:clamp(8px,1.5vw,10px) clamp(12px,2.5vw,16px);
  border-radius:clamp(8px,1.5vw,12px);
  transition:all .3s;
  font-weight:500;
  font-size:clamp(13px,2vw,15px);
  white-space:nowrap;
}

/* Bottom Navigation - FIXED Responsive */
.bottom-nav{
  position:fixed;
  left:clamp(8px,2vw,12px);
  right:clamp(8px,2vw,12px);
  bottom:clamp(10px,2vw,14px);
  bottom:calc(clamp(10px,2vw,14px) + env(safe-area-inset-bottom,0px));
  height:var(--nav-height);
  max-height:96px;
  background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(250,252,251,0.9));
  border-radius:clamp(20px,4vw,32px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(8px,2vw,14px);
  box-shadow:0 28px 80px rgba(0,217,142,0.15),0 12px 32px rgba(0,181,116,0.1);
  border:1px solid rgba(255,255,255,0.6);
  z-index:1300;
  backdrop-filter:blur(24px);
  overflow:visible;
  box-sizing:border-box;
}
.bn-item{
  flex:1;
  text-align:center;
  color:rgba(15,23,42,0.6);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(4px,1vw,6px);
  padding:clamp(6px,1.5vw,10px) clamp(4px,1vw,6px);
  font-size:clamp(10px,2vw,12px);
  transition:all .3s;
  border-radius:clamp(10px,2vw,16px);
  font-weight:500;
  min-width:0;
}
.bn-item i{
  font-size:clamp(18px,4vw,22px);
  transition:all .3s;
}
.bn-item:hover{
  color:var(--green);
  background:rgba(0,217,142,0.08);
}
.bn-item:hover i{
  transform:scale(1.1);
}
.bn-item[aria-current="page"],.bn-item.active{
  color:var(--green);
  transform:translateY(-6px) scale(1.05);
  background:rgba(0,217,142,0.12);
}
.bn-label{
  font-size:clamp(9px,1.8vw,11px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.bn-middle{
  position:relative;
  width:clamp(72px,15vw,96px);
  height:clamp(72px,15vw,96px);
  margin-top:calc(-1*(clamp(72px,15vw,96px)/2));
  flex-shrink:0;
}
.middle-coin-wrap{
  width:clamp(64px,13vw,84px);
  height:clamp(64px,13vw,84px);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 24px 64px rgba(0,217,142,0.3),0 8px 24px rgba(0,181,116,0.2);
  padding:clamp(6px,1.5vw,8px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:clamp(2px,0.5vw,3px) solid rgba(255,255,255,0.8);
}
.middle-coin{
  width:clamp(48px,10vw,62px);
  height:clamp(48px,10vw,62px);
  border-radius:clamp(10px,2vw,16px);
  background:white;
  padding:clamp(4px,1vw,6px);
  object-fit:cover;
  box-shadow:0 12px 32px rgba(0,0,0,0.2),0 4px 12px rgba(0,0,0,0.1);
  animation:float-coin 3800ms ease-in-out infinite;
}

/* Auth Pages - Responsive */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 50%,#d1fae5 100%);
  padding:clamp(12px,3vw,20px);
}
.auth-panel{
  max-width:min(420px,100%);
  width:100%;
  background:rgba(255,255,255,0.8);
  padding:clamp(24px,5vw,40px);
  border-radius:clamp(18px,3vw,24px);
  box-shadow:0 24px 64px rgba(0,217,142,0.15),0 8px 24px rgba(0,181,116,0.1);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.5);
  box-sizing:border-box;
}
.form-group{
  position:relative;
  margin-bottom:clamp(16px,3vw,20px);
}
.form-group i{
  position:absolute;
  left:clamp(14px,3vw,18px);
  top:clamp(16px,3.5vw,18px);
  color:var(--green);
  z-index:5;
  font-size:clamp(18px,3.5vw,20px);
}
.form-control{
  padding-left:clamp(46px,9vw,54px);
  height:clamp(52px,10vw,60px);
  border-radius:clamp(12px,2.5vw,16px);
  border:1px solid rgba(0,217,142,0.2);
  background:rgba(255,255,255,0.9);
  transition:all .3s;
  font-size:clamp(14px,2.5vw,15px);
  width:100%;
  box-sizing:border-box;
}
.form-control:focus{
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(0,217,142,0.15),0 8px 16px rgba(0,217,142,0.08);
  outline:none;
}

/* Deposit Page - Responsive */
.page-header{
  background:var(--accent);
  color:white;
  padding:clamp(20px,4vw,30px) clamp(12px,3vw,20px);
  text-align:center;
  border-radius:0 0 clamp(20px,4vw,28px) clamp(20px,4vw,28px);
  box-shadow:0 20px 60px rgba(0,217,142,0.25);
  position:relative;
  overflow:hidden;
}
.page-header h3{
  margin:0 0 clamp(6px,1.5vw,8px);
  font-size:clamp(20px,4vw,26px);
  font-weight:800;
  position:relative;
  z-index:2;
}
.page-header p{
  margin:0;
  opacity:0.9;
  position:relative;
  z-index:2;
  font-size:clamp(12px,2vw,14px);
}
.deposit-card{
  background:rgba(255,255,255,0.85);
  margin:clamp(12px,2.5vw,20px);
  padding:clamp(20px,4vw,28px);
  border-radius:clamp(18px,3vw,24px);
  box-shadow:0 20px 60px rgba(0,217,142,0.12);
  border:1px solid rgba(255,255,255,0.6);
  backdrop-filter:blur(20px);
  box-sizing:border-box;
}

/* Modal - Responsive */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:clamp(12px,3vw,20px);
}
.modal.show{display:flex}
.modal-panel{
  background:rgba(255,255,255,0.95);
  border-radius:clamp(18px,3vw,24px);
  max-width:min(480px,100%);
  width:100%;
  padding:clamp(24px,5vw,36px);
  box-shadow:0 28px 80px rgba(0,0,0,0.3);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.5);
  position:relative;
  box-sizing:border-box;
}

/* Utilities */
.w-100{width:100%!important}
.text-center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:clamp(11px,2vw,13px)}

/* Dashboard Styles - Complete */
.profile-header{
  background:var(--accent);
  color:white;
  padding:clamp(35px,7vw,50px) clamp(12px,3vw,20px);
  text-align:center;
  border-radius:0 0 clamp(24px,4vw,32px) clamp(24px,4vw,32px);
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,217,142,0.25);
}
.profile-header::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);
  animation:shimmer 8s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{transform:translate(-25%,-25%) rotate(0deg)}
  50%{transform:translate(-10%,-10%) rotate(180deg)}
}
.profile-avatar{
  width:clamp(70px,15vw,100px);
  height:clamp(70px,15vw,100px);
  border-radius:50%;
  border:clamp(3px,0.8vw,5px) solid rgba(255,255,255,0.4);
  object-fit:cover;
  box-shadow:0 12px 32px rgba(0,0,0,0.2);
  position:relative;
  z-index:2;
  margin:0 auto clamp(12px,2vw,16px);
}
.profile-header h2{
  font-size:clamp(18px,4vw,24px);
  margin:clamp(10px,2vw,14px) 0 clamp(4px,1vw,6px);
  position:relative;
  z-index:2;
  font-weight:800;
}
.profile-header p{
  font-size:clamp(12px,2vw,14px);
  opacity:0.9;
  position:relative;
  z-index:2;
  margin:0;
}
.stat-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px,2.5vw,16px);
  margin:clamp(-25px,4vw,-30px) clamp(12px,3vw,20px) clamp(16px,3vw,20px);
  position:relative;
  z-index:10;
}
.stat-grid > .stat-card:first-child{
  grid-column:1/-1;
  padding:clamp(18px,4vw,24px);
}
.stat-card{
  background:rgba(255,255,255,0.85);
  padding:clamp(16px,3vw,20px);
  border-radius:clamp(14px,2.5vw,20px);
  text-align:center;
  box-shadow:0 20px 60px rgba(0,217,142,0.12);
  border:1px solid rgba(255,255,255,0.6);
  backdrop-filter:blur(20px);
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
}
.stat-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 72px rgba(0,217,142,0.18);
}
.stat-card p{
  color:var(--muted);
  font-size:clamp(11px,2vw,13px);
  margin:0 0 clamp(8px,1.5vw,12px);
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:600;
}
.stat-card h3{
  background:var(--accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:800;
  margin:0;
  font-size:clamp(20px,4vw,26px);
}
.action-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));
  gap:clamp(12px,2.5vw,16px);
  margin:clamp(20px,4vw,30px) clamp(12px,3vw,20px);
}
.action-item{
  background:rgba(255,255,255,0.85);
  padding:clamp(20px,4vw,28px) clamp(16px,3vw,20px);
  border-radius:clamp(14px,2.5vw,20px);
  text-align:center;
  box-shadow:0 16px 48px rgba(0,217,142,0.12);
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
  border:1px solid rgba(255,255,255,0.6);
  backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(8px,1.5vw,12px);
}
.action-item:hover{
  transform:translateY(-8px);
  color:var(--green);
  box-shadow:0 20px 60px rgba(0,217,142,0.2);
}
.action-icon{
  font-size:clamp(28px,6vw,36px);
  background:var(--accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:0;
}
.action-item span{
  font-size:clamp(12px,2vw,14px);
  font-weight:600;
}
.ref-card{
  background:rgba(255,255,255,0.85);
  margin:clamp(16px,3vw,20px);
  padding:clamp(24px,5vw,32px);
  border-radius:clamp(18px,3vw,24px);
  text-align:center;
  box-shadow:0 20px 60px rgba(0,217,142,0.12);
  border:1px solid rgba(255,255,255,0.6);
  backdrop-filter:blur(20px);
}
.ref-card h3{
  background:var(--accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:0 0 clamp(16px,3vw,20px);
  font-weight:800;
  font-size:clamp(20px,4vw,24px);
}
.ref-card input{
  width:100%;
  padding:clamp(12px,2.5vw,16px);
  border-radius:clamp(10px,2vw,14px);
  border:1px solid rgba(0,217,142,0.2);
  margin:clamp(10px,2vw,12px) 0;
  font-size:clamp(13px,2vw,14px);
  background:rgba(255,255,255,0.9);
  transition:all .3s;
  box-sizing:border-box;
}
.ref-card input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(0,217,142,0.15);
  outline:none;
}
.copy-btn{
  background:var(--accent);
  color:white;
  border:none;
  padding:clamp(12px,2.5vw,14px) clamp(24px,5vw,32px);
  border-radius:clamp(10px,2vw,14px);
  margin-top:clamp(14px,3vw,18px);
  font-weight:700;
  cursor:pointer;
  font-size:clamp(13px,2vw,15px);
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 8px 24px rgba(0,217,142,0.25);
}
.copy-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,217,142,0.35);
}
.profile-icon{
  font-size:clamp(60px,12vw,80px);
  background:var(--accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:1;
  display:inline-block;
}

/* Responsive Breakpoints */
@media (max-width:600px){
  .main-nav{display:none}
  .hero-actions{width:100%;max-width:100%}
  .hero-actions .btn{width:100%}
  .quick-actions{grid-template-columns:repeat(2,1fr);padding:0 10px}
  .machines-grid{grid-template-columns:1fr;padding:0 10px}
  .footer-inner{flex-direction:column;text-align:center}
  .footer-right{flex-direction:column}
  .stat-grid{grid-template-columns:1fr!important}
  .action-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:601px) and (max-width:920px){
  .machines-grid{grid-template-columns:repeat(2,1fr)}
  .quick-actions{grid-template-columns:repeat(4,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid > .stat-card:first-child{grid-column:1/-1}
  .action-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:921px){
  .machines-grid{grid-template-columns:repeat(3,1fr)}
  .quick-actions{grid-template-columns:repeat(4,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid > .stat-card:first-child{grid-column:1/-1}
  .action-grid{grid-template-columns:repeat(3,1fr)}
}