*{box-sizing:border-box}
:root{--pink:#ec4899;--sky:#0ea5e9;--dark:#0f172a;--muted:#64748b;--green:#10b981;--yellow:#f59e0b}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;color:var(--dark);background:linear-gradient(135deg,#dff6ff 0%,#fff1f6 45%,#fff8dc 100%)}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 10% 10%,rgba(236,72,153,.20),transparent 24%),radial-gradient(circle at 90% 20%,rgba(14,165,233,.18),transparent 26%),radial-gradient(circle at 70% 90%,rgba(245,158,11,.16),transparent 24%);pointer-events:none}
.container{width:min(1180px,92%);margin:auto;position:relative}
.nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.logo{display:flex;gap:12px;align-items:center}
.logo-icon{width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#fb7185,#38bdf8);display:grid;place-items:center;color:white;font-size:25px;box-shadow:0 15px 35px rgba(236,72,153,.25)}
.brand{font-size:26px;font-weight:900}.brand span{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.nav-links{display:flex;gap:12px;align-items:center}
.btn{display:inline-block;border:0;border-radius:16px;background:var(--pink);color:white;padding:13px 22px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 12px 26px rgba(236,72,153,.25)}
.btn:hover{filter:brightness(.95)}.btn.dark{background:var(--dark);box-shadow:0 12px 26px rgba(15,23,42,.18)}.btn.sky{background:var(--sky);box-shadow:0 12px 26px rgba(14,165,233,.22)}
.hero{display:grid;grid-template-columns:1fr .92fr;gap:34px;align-items:center;padding:36px 0 24px}
.badge{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.8);border-radius:999px;padding:10px 15px;font-weight:800;color:#be185d;box-shadow:0 10px 25px rgba(15,23,42,.06)}
h1{font-size:58px;line-height:1.02;margin:18px 0 18px;letter-spacing:-2px}.lead{font-size:19px;line-height:1.75;color:#475569;max-width:660px}
.hero-art{width:100%;filter:drop-shadow(0 28px 45px rgba(15,23,42,.14));border-radius:38px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.stat{background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.8);padding:18px;border-radius:24px;box-shadow:0 12px 30px rgba(15,23,42,.05)}
.stat b{font-size:24px}.stat span{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.card{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);border-radius:32px;padding:28px;box-shadow:0 24px 65px rgba(15,23,42,.10)}
.section{padding:32px 0}.section-title{text-align:center;margin:0 0 22px;font-size:34px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{margin-bottom:15px}label{display:block;font-weight:800;font-size:14px;margin-bottom:8px;color:#334155}
input,textarea,select{width:100%;border:1px solid #dbeafe;border-radius:16px;padding:13px 15px;font-size:15px;background:#fff;outline:none;transition:.2s}
input:focus,textarea:focus,select:focus{border-color:#f9a8d4;box-shadow:0 0 0 4px #fce7f3}textarea{min-height:120px;resize:vertical}
.notice{padding:15px 18px;border-radius:18px;margin:16px 0;font-weight:700}.success{background:#dcfce7;color:#166534;border:1px solid #86efac}.error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.track-card{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center;background:linear-gradient(135deg,#0f172a,#1e3a8a);color:white;border-radius:34px;padding:30px;box-shadow:0 24px 60px rgba(15,23,42,.20)}
.track-card p{color:#dbeafe}.track-box{background:white;color:var(--dark);border-radius:24px;padding:18px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{padding:24px;border-radius:28px;background:white;box-shadow:0 15px 35px rgba(15,23,42,.06)}.feature .icon{font-size:34px}.feature p,.small{color:var(--muted);line-height:1.55}.footer{text-align:center;color:var(--muted);padding:32px}
.table{width:100%;border-collapse:collapse;background:white;border-radius:18px;overflow:hidden}.table th,.table td{padding:13px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}.table th{background:#f8fafc}.admin-wrap{padding:30px 0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.image-thumb{width:76px;height:76px;object-fit:cover;border-radius:16px}
.login-card{max-width:430px;margin:60px auto}.pill{display:inline-block;padding:7px 12px;border-radius:999px;background:#f1f5f9;font-size:13px;font-weight:800}
@media(max-width:900px){.hero,.track-card,.grid2,.features,.stats{grid-template-columns:1fr}h1{font-size:40px}.nav{align-items:flex-start;gap:16px;flex-direction:column}.nav-links{width:100%;justify-content:space-between}.card{padding:22px}}

/* Beautiful beside hero form update */
.hero{grid-template-columns:.95fr 1.05fr;align-items:start;padding:36px 0 20px}
.hero-left{padding-top:22px}
.request-side-card{position:relative;overflow:hidden;border-radius:36px;background:rgba(255,255,255,.96);box-shadow:0 30px 80px rgba(236,72,153,.16),0 18px 45px rgba(14,165,233,.12);border:1px solid rgba(255,255,255,.95);padding:0}
.request-side-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(236,72,153,.16),transparent 35%),radial-gradient(circle at bottom right,rgba(14,165,233,.14),transparent 35%);pointer-events:none}
.form-header{position:relative;padding:24px 26px;background:linear-gradient(135deg,#ec4899,#38bdf8);color:white}
.form-header h2{margin:0;font-size:27px}
.form-header p{margin:7px 0 0;color:rgba(255,255,255,.9);line-height:1.5}
.form-body{position:relative;padding:24px 26px 26px}
.form-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-section-title{display:flex;align-items:center;gap:8px;margin:18px 0 12px;font-size:15px;font-weight:900;color:#be185d}
.form-section-title span{height:28px;width:28px;border-radius:10px;background:#fce7f3;display:grid;place-items:center}
.request-side-card input,.request-side-card textarea{background:#fbfdff;border-color:#e0f2fe}
.request-side-card label{color:#334155}
.submit-wide{width:100%;font-size:16px;margin-top:5px;padding:15px 20px}
.hero-art-small{margin-top:20px;width:100%;max-width:430px;border-radius:30px;filter:drop-shadow(0 22px 35px rgba(15,23,42,.12))}
.section.request-old{display:none}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-left{padding-top:0}
  .form-mini-grid{grid-template-columns:1fr}
}


.request-success-box{
  margin-top:16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:linear-gradient(135deg,#dcfce7,#ecfdf5);
  border:1px solid #86efac;
  color:#14532d;
  padding:16px;
  border-radius:20px;
  box-shadow:0 14px 30px rgba(16,185,129,.12);
}
.request-success-box .success-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:#22c55e;
  color:white;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
  flex:0 0 auto;
}
.request-success-box h3{
  margin:0 0 5px;
  font-size:18px;
}
.request-success-box p{
  margin:0 0 8px;
  color:#166534;
  font-size:14px;
}
.request-success-box strong{
  display:inline-block;
  background:white;
  border:1px dashed #22c55e;
  padding:8px 12px;
  border-radius:12px;
  font-size:18px;
  letter-spacing:.5px;
}


/* FINAL UI FIX */
.big-happiness{
  display:inline-block;
  font-size:1.18em;
  background:linear-gradient(135deg,#ec4899,#f59e0b,#0ea5e9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.05;
}

.stats-two{
  grid-template-columns:repeat(2,1fr)!important;
  max-width:560px;
}

.stat-modern{
  display:flex;
  gap:14px;
  align-items:center;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  padding:20px;
}

.stat-modern .stat-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:26px;
  background:linear-gradient(135deg,#fce7f3,#e0f2fe);
}

.stat-modern b{
  font-size:34px;
  line-height:1;
}

.stat-modern span{
  font-size:14px;
  font-weight:800;
}

.request-receipt-box{
  margin:22px 26px 0;
  padding:20px;
  border-radius:26px;
  background:linear-gradient(135deg,#dcfce7,#f0fdf4);
  border:2px solid #86efac;
  box-shadow:0 18px 45px rgba(22,163,74,.18);
  color:#14532d;
  position:relative;
  z-index:2;
}

.receipt-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.receipt-check{
  width:48px;
  height:48px;
  border-radius:18px;
  background:#22c55e;
  color:white;
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:900;
  flex:0 0 auto;
}

.request-receipt-box h3{
  margin:0 0 6px;
  font-size:22px;
}

.request-receipt-box p{
  margin:0;
  color:#166534;
  line-height:1.5;
}

.receipt-code{
  margin-top:15px;
  background:white;
  border:2px dashed #22c55e;
  border-radius:18px;
  padding:14px;
  text-align:center;
  font-size:24px;
  font-weight:900;
  letter-spacing:1px;
  color:#064e3b;
}

.receipt-track-btn{
  display:block;
  margin-top:12px;
  text-align:center;
  background:#14532d;
  color:white;
  text-decoration:none;
  font-weight:900;
  padding:12px 16px;
  border-radius:16px;
}

.request-success-box{
  display:none!important;
}

.hero-art-small{
  max-width:520px!important;
}

@media(max-width:900px){
  .stats-two{
    grid-template-columns:1fr!important;
  }
}