/* =========================================================
   GYANMARK AI — Premium UI Design System v2.0
   Modern • Colorful • Responsive • Smooth
   ========================================================= */

:root{
  /* Brand colors — vibrant gradient */
  --primary:      #6366f1;
  --primary-dark: #4f46e5;
  --primary-light:#818cf8;
  --accent:       #ec4899;
  --accent-2:     #f59e0b;
  --success:      #10b981;
  --danger:       #ef4444;

  /* Neutrals */
  --dark:         #0f172a;
  --darker:       #020617;
  --gray:         #64748b;
  --gray-light:   #94a3b8;
  --light:        #f8fafc;
  --lighter:      #f1f5f9;
  --border:       #e2e8f0;

  /* Gradients */
  --grad-primary: linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%);
  --grad-hero:    linear-gradient(135deg,#0f172a 0%,#1e1b4b 40%,#4c1d95 75%,#831843 100%);
  --grad-accent:  linear-gradient(135deg,#f59e0b,#ef4444);
  --grad-cool:    linear-gradient(135deg,#06b6d4,#6366f1);

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08);
  --shadow-lg: 0 20px 50px rgba(15,23,42,.12);
  --shadow-xl: 0 30px 60px rgba(15,23,42,.18);
  --shadow-glow: 0 10px 40px rgba(99,102,241,.35);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--dark);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}

/* ============ CONTAINER ============ */
.container{max-width:1280px;margin:0 auto;padding:0 24px;}

/* ============ HEADER / NAVBAR ============ */
.site-header{position:sticky;top:0;z-index:100;}

.topbar{
  background:var(--darker);
  color:#cbd5e1;
  font-size:.82rem;
  padding:.55rem 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar-inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;
}
.topbar a{color:#cbd5e1;transition:.2s;}
.topbar a:hover{color:#a5b4fc;}

.navbar{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.02);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 24px;gap:1.5rem;
}

.logo{
  font-size:1.35rem;font-weight:800;letter-spacing:-.6px;
  display:flex;align-items:center;gap:.6rem;
  color:var(--dark);transition:.2s;
}
.logo:hover{transform:scale(1.02);}
.logo img{height:44px;width:auto;display:block;}
.logo-mark{
  background:var(--grad-primary);
  color:#fff;width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:12px;font-size:1.1rem;
  box-shadow:0 6px 20px rgba(99,102,241,.35);
}

.nav-menu{
  display:flex;align-items:center;gap:.15rem;
  list-style:none;
}
.nav-menu a{
  padding:.55rem .9rem;border-radius:10px;
  font-weight:500;color:#334155;font-size:.92rem;
  transition:.2s;position:relative;
}
.nav-menu a:hover,.nav-menu a.active{
  color:var(--primary);background:rgba(99,102,241,.08);
}
.nav-menu a.active::after{
  content:'';position:absolute;bottom:-4px;left:50%;
  transform:translateX(-50%);
  width:20px;height:3px;border-radius:2px;
  background:var(--grad-primary);
}
.btn-nav{
  background:var(--grad-primary)!important;
  color:#fff!important;
  box-shadow:0 4px 15px rgba(99,102,241,.3);
}
.btn-nav:hover{
  box-shadow:0 8px 25px rgba(99,102,241,.4)!important;
  transform:translateY(-1px);
}

.nav-search{
  display:flex;align-items:center;
  background:var(--lighter);
  border-radius:12px;overflow:hidden;
  margin-left:.5rem;
  border:1.5px solid transparent;
  transition:.2s;
}
.nav-search:focus-within{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 4px rgba(99,102,241,.1);
}
.nav-search input{
  border:none;background:none;padding:.5rem .9rem;
  font-size:.88rem;width:130px;font-family:inherit;outline:none;
}
.nav-search button{
  border:none;background:none;padding:.5rem .8rem;
  cursor:pointer;font-size:.95rem;color:var(--gray);
  transition:.2s;
}
.nav-search button:hover{color:var(--primary);}

.nav-toggle{
  display:none;background:none;border:none;
  font-size:1.5rem;cursor:pointer;color:var(--dark);
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 2rem;
  background:var(--grad-primary);
  color:#fff;border:none;border-radius:12px;
  font-weight:600;font-size:.95rem;cursor:pointer;
  transition:.25s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-glow);
  position:relative;overflow:hidden;
}
.btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#8b5cf6,#ec4899);
  opacity:0;transition:.3s;
}
.btn:hover::before{opacity:1;}
.btn span,.btn{position:relative;z-index:1;}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(99,102,241,.45);
}
.btn:active{transform:translateY(-1px);}

.btn-outline{
  background:#fff;color:var(--primary);
  border:2px solid var(--primary);
  box-shadow:0 4px 15px rgba(99,102,241,.15);
}
.btn-outline::before{background:var(--primary);}
.btn-outline:hover{
  color:#fff;box-shadow:0 15px 40px rgba(99,102,241,.4);
}

.btn-sm{padding:.55rem 1.15rem;font-size:.85rem;border-radius:8px;}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 6px 20px rgba(239,68,68,.3);}
.btn-success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 20px rgba(16,185,129,.3);}

/* ============ HERO ============ */
.hero{
  background:var(--grad-hero);
  color:#fff;
  padding:8rem 0 7rem;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;
  top:-30%;right:-15%;width:700px;height:700px;
  background:radial-gradient(circle,rgba(236,72,153,.3),transparent 60%);
  border-radius:50%;
  animation:float 20s ease-in-out infinite;
}
.hero::after{
  content:'';position:absolute;
  bottom:-40%;left:-15%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(99,102,241,.35),transparent 60%);
  border-radius:50%;
  animation:float 25s ease-in-out infinite reverse;
}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(30px,-30px) scale(1.05);}
}
.hero-inner{max-width:780px;position:relative;z-index:2;}
.hero h1{
  font-size:4rem;font-weight:900;
  letter-spacing:-2.5px;line-height:1.02;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#fff,#c7d2fe,#fbcfe8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p{
  font-size:1.25rem;color:#cbd5e1;
  margin-bottom:2.5rem;max-width:600px;
  line-height:1.7;
}
.hero .btn-outline{
  background:rgba(255,255,255,.1);
  color:#fff;
  border:2px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px);
}
.hero .btn-outline:hover{
  background:#fff;color:var(--primary);
}

/* ============ SECTIONS ============ */
.section{padding:6rem 0;position:relative;}
.section-head{
  text-align:center;max-width:720px;margin:0 auto 4rem;
}
.section-eyebrow{
  display:inline-block;
  color:var(--primary);
  font-weight:700;text-transform:uppercase;
  letter-spacing:3px;font-size:.75rem;
  margin-bottom:1rem;
  padding:.35rem 1rem;
  background:rgba(99,102,241,.1);
  border-radius:50px;
}
.section-head h2{
  font-size:2.75rem;font-weight:800;
  letter-spacing:-1.5px;margin-bottom:1rem;
  line-height:1.15;
}
.section-head p{color:var(--gray);font-size:1.1rem;line-height:1.7;}

/* ============ PRODUCT GRID ============ */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:2rem;
}
.product-card{
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  transition:.4s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  position:relative;
}
.product-card::before{
  content:'';position:absolute;inset:0;
  border-radius:var(--radius-lg);
  padding:2px;
  background:var(--grad-primary);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;transition:.3s;
  pointer-events:none;
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-xl);
  border-color:transparent;
}
.product-card:hover::before{opacity:1;}
.product-card .thumb{
  height:240px;background:var(--lighter);
  overflow:hidden;position:relative;
}
.product-card .thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:.6s cubic-bezier(.4,0,.2,1);
}
.product-card:hover .thumb img{transform:scale(1.08);}
.product-card .body{
  padding:1.5rem;flex:1;display:flex;flex-direction:column;
}
.brand{
  color:var(--primary);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;
  display:inline-block;
  padding:.25rem .6rem;
  background:rgba(99,102,241,.1);
  border-radius:6px;width:fit-content;
}
.product-card h3{
  font-size:1.15rem;font-weight:700;
  margin:.75rem 0 .5rem;line-height:1.35;
}
.product-card .price{
  font-size:1.4rem;font-weight:800;
  color:var(--dark);
  background:var(--grad-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.product-card .warranty{
  font-size:.82rem;color:var(--gray);
  margin-top:.4rem;
  display:flex;align-items:center;gap:.3rem;
}
.product-card .card-link{margin-top:auto;padding-top:1.25rem;}
.product-card .card-link .btn{
  width:100%;justify-content:center;
  box-shadow:none;
}

/* ============ PRODUCT DETAIL ============ */
.detail{
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;align-items:start;padding:5rem 0;
}
.detail-img{
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--lighter);
  box-shadow:var(--shadow-lg);
  position:sticky;top:100px;
}
.detail-info h1{
  font-size:2.85rem;font-weight:800;
  letter-spacing:-1.5px;margin:.5rem 0 1rem;
  line-height:1.1;
}
.detail-info .price{
  font-size:2.2rem;font-weight:800;
  margin:1rem 0;
  background:var(--grad-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.detail-desc{color:#475569;margin:1rem 0 1.5rem;font-size:1.05rem;line-height:1.8;}
.feature-box{
  background:linear-gradient(135deg,#f0f4ff,#fdf4ff);
  padding:1.75rem;border-radius:var(--radius);
  margin:1.5rem 0;
  border:1px solid rgba(99,102,241,.15);
}
.feature-box h3{font-size:1.1rem;margin-bottom:1rem;font-weight:700;}
.feature-box ul{list-style:none;padding:0;}
.feature-box li{
  padding:.5rem 0;color:#334155;
  display:flex;align-items:start;gap:.5rem;
}
.feature-box li::before{
  content:'✓';
  color:var(--primary);font-weight:900;
  background:rgba(99,102,241,.15);
  width:22px;height:22px;flex-shrink:0;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:.75rem;margin-top:.15rem;
}
.warranty-highlight{
  background:linear-gradient(135deg,#fef3c7,#fed7aa);
  padding:1.5rem;border-radius:var(--radius);
  margin:1.5rem 0;
  border-left:4px solid var(--accent-2);
  color:#78350f;
}
.specs-table{
  width:100%;border-collapse:collapse;
  background:#fff;border-radius:var(--radius);
  overflow:hidden;margin-top:2rem;
  box-shadow:var(--shadow-md);
}
.specs-table td{
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.specs-table tr:last-child td{border:none;}
.specs-table td:first-child{
  font-weight:600;background:var(--lighter);width:35%;
}

/* ============ FORMS ============ */
.form-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:2.5rem;
  box-shadow:var(--shadow-md);
  border:1px solid var(--border);
  max-width:600px;
}
.form-group{margin-bottom:1.35rem;}
.form-group label{
  display:block;font-weight:600;font-size:.9rem;
  margin-bottom:.55rem;color:var(--dark);
}
.form-group input,
.form-group textarea,
.form-group select{
  width:100%;padding:1rem 1.15rem;
  border:1.5px solid var(--border);
  border-radius:12px;
  font-size:.95rem;font-family:inherit;
  background:#fff;transition:.2s;
  color:var(--dark);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}
.form-group textarea{resize:vertical;min-height:110px;}

/* ============ ALERTS ============ */
.alert{
  padding:1.15rem 1.4rem;
  border-radius:12px;margin-bottom:1.5rem;
  font-size:.95rem;font-weight:500;
  display:flex;align-items:center;gap:.5rem;
}
.alert-success{
  background:linear-gradient(135deg,#d1fae5,#a7f3d0);
  color:#065f46;
  border-left:4px solid var(--success);
}
.alert-error{
  background:linear-gradient(135deg,#fee2e2,#fecaca);
  color:#991b1b;
  border-left:4px solid var(--danger);
}
.alert-info{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  color:#1e40af;
  border-left:4px solid #3b82f6;
}

/* ============ CARDS / PANELS ============ */
.card{
  background:#fff;border-radius:var(--radius);
  padding:2rem;border:1px solid var(--border);
  transition:.3s;
}
.card:hover{box-shadow:var(--shadow-md);border-color:rgba(99,102,241,.3);}
.card h3{font-size:1.15rem;margin-bottom:.75rem;font-weight:700;}

/* ============ TABS ============ */
.tabs{
  display:flex;gap:.5rem;margin-bottom:2.5rem;
  border-bottom:2px solid var(--border);
  overflow-x:auto;
}
.tabs button{
  background:none;border:none;
  padding:1rem 1.4rem;
  font-weight:600;font-size:.95rem;
  color:var(--gray);cursor:pointer;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;font-family:inherit;
  transition:.2s;white-space:nowrap;
}
.tabs button:hover{color:var(--primary);}
.tabs button.active{
  color:var(--primary);
  border-bottom-color:var(--primary);
}

/* ============ WARRANTY RESULT ============ */
.warranty-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:2.25rem;border:1px solid var(--border);
  margin-top:1.5rem;
  box-shadow:var(--shadow-md);
}
.warranty-card h3{
  font-size:1.5rem;margin-bottom:1.25rem;font-weight:800;
}
.warranty-card .row{
  display:flex;padding:.85rem 0;
  border-bottom:1px solid var(--border);
  gap:1rem;
}
.warranty-card .row:last-child{border:none;}
.warranty-card .row strong{
  min-width:140px;color:var(--gray);
  font-weight:600;font-size:.9rem;
}
.badge{
  display:inline-block;
  padding:.4rem .9rem;border-radius:50px;
  font-size:.75rem;font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.badge-ok{background:#d1fae5;color:#065f46;}
.badge-warn{background:#fef3c7;color:#92400e;}
.badge-void{background:#fee2e2;color:#991b1b;}

/* ============ TABLES ============ */
.table{
  width:100%;border-collapse:collapse;
  background:#fff;border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.table th{
  background:var(--lighter);
  padding:1.1rem 1rem;text-align:left;
  font-size:.75rem;text-transform:uppercase;
  letter-spacing:1px;color:var(--gray);
  font-weight:700;
}
.table td{
  padding:1rem;border-top:1px solid var(--border);
  font-size:.92rem;
}
.table tr:hover td{background:#fafbff;}
.table code{
  background:var(--lighter);
  padding:.25rem .55rem;border-radius:6px;
  font-size:.85rem;color:var(--primary);
  font-weight:600;
}

/* ============ VIDEO REVIEWS ============ */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:2rem;
}
.video-card{
  background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--border);
  cursor:pointer;transition:.4s cubic-bezier(.4,0,.2,1);
}
.video-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-xl);
  border-color:transparent;
}
.video-thumb{
  position:relative;aspect-ratio:16/9;
  background:var(--dark);overflow:hidden;
}
.video-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:.5s;
}
.video-card:hover .video-thumb img{transform:scale(1.06);}
.play-btn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;
  background:rgba(255,255,255,.95);
  color:var(--primary);
  display:grid;place-items:center;
  font-size:1.6rem;padding-left:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  transition:.3s;
}
.video-card:hover .play-btn{
  transform:translate(-50%,-50%) scale(1.12);
  background:var(--primary);color:#fff;
}
.video-body{padding:1.4rem;}
.video-body .stars{font-size:.85rem;margin-bottom:.6rem;}
.video-body h3{
  font-size:1.05rem;font-weight:700;
  margin-bottom:.85rem;line-height:1.4;
}
.reviewer{display:flex;align-items:center;gap:.75rem;}
.reviewer-avatar{
  width:42px;height:42px;border-radius:50%;
  object-fit:cover;background:var(--lighter);
  border:2px solid var(--primary-light);
}
.reviewer small{color:var(--gray);font-size:.82rem;}
.reviewer strong{font-size:.92rem;}

/* Video Modal */
.video-modal{
  position:fixed;inset:0;
  background:rgba(2,6,23,.95);
  backdrop-filter:blur(8px);
  z-index:1000;display:none;
  align-items:center;justify-content:center;
  padding:2rem;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.video-modal.open{display:flex;}
.video-modal-inner{
  width:100%;max-width:1000px;position:relative;
  animation:scaleIn .4s cubic-bezier(.4,0,.2,1);
}
@keyframes scaleIn{
  from{transform:scale(.92);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.video-modal-inner iframe,
.video-modal-inner video{
  width:100%;aspect-ratio:16/9;
  border-radius:var(--radius);border:none;
  background:#000;
  box-shadow:0 20px 80px rgba(0,0,0,.6);
}
.video-close{
  position:absolute;top:-52px;right:0;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  border:none;color:#fff;
  font-size:1.3rem;cursor:pointer;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  transition:.2s;
}
.video-close:hover{background:var(--danger);transform:rotate(90deg);}

/* ============ ADMIN PANEL ============ */
.admin-layout{display:flex;min-height:100vh;background:var(--light);}
.sidebar{
  width:270px;
  background:var(--darker);
  color:#cbd5e1;
  padding:2rem 0;
  flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar .logo{
  padding:0 1.75rem 1.75rem;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:1.25rem;
}
.sidebar nav a{
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1.75rem;
  color:#94a3b8;
  font-size:.92rem;font-weight:500;
  transition:.2s;
  border-left:3px solid transparent;
}
.sidebar nav a:hover,
.sidebar nav a.active{
  background:rgba(99,102,241,.1);
  color:#fff;
  border-left-color:var(--primary);
}
.admin-main{
  flex:1;padding:2.5rem;overflow-x:auto;
}
.admin-header{
  display:flex;justify-content:space-between;
  align-items:center;margin-bottom:2.5rem;
  flex-wrap:wrap;gap:1rem;
}
.admin-header h1{
  font-size:2rem;font-weight:800;
  letter-spacing:-1px;
}

/* ============ STATS ============ */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;margin-bottom:2.5rem;
}
.stat-card{
  background:#fff;padding:1.75rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  position:relative;overflow:hidden;
  transition:.3s;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;
  width:100%;height:4px;
  background:var(--grad-primary);
}
.stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.stat-card .label{
  color:var(--gray);font-size:.8rem;
  font-weight:600;text-transform:uppercase;
  letter-spacing:1px;
}
.stat-card .value{
  font-size:2.5rem;font-weight:800;
  margin-top:.6rem;letter-spacing:-1.5px;
  background:var(--grad-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ============ BARCODE ITEMS ============ */
.barcode-item{
  background:#fff;padding:1.75rem;
  border-radius:var(--radius);
  margin-bottom:1rem;text-align:center;
  border:1px solid var(--border);
  transition:.3s;
}
.barcode-item:hover{
  box-shadow:var(--shadow-md);
  border-color:var(--primary-light);
}
.barcode-item img{margin:0 auto;max-width:100%;}
.barcode-item code{
  display:block;margin-top:1rem;
  color:var(--primary);font-weight:700;
  font-size:.95rem;
  background:var(--lighter);
  padding:.4rem .8rem;border-radius:6px;
  width:fit-content;margin-left:auto;margin-right:auto;
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--darker);
  color:#94a3b8;
  padding:5rem 0 0;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:'';position:absolute;
  top:-50%;right:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(99,102,241,.15),transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:3.5rem;padding-bottom:3.5rem;
  position:relative;z-index:1;
}
.footer-grid h4{
  color:#fff;margin-bottom:1.25rem;
  font-size:1.05rem;font-weight:700;
}
.footer-grid p{
  font-size:.92rem;line-height:1.75;
  margin-bottom:.6rem;
}
.footer-grid ul{list-style:none;}
.footer-grid li{padding:.45rem 0;font-size:.92rem;}
.footer-grid a{transition:.2s;}
.footer-grid a:hover{color:var(--primary-light);padding-left:4px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:1.75rem 0;text-align:center;
  font-size:.88rem;position:relative;z-index:1;
}

/* ============ UTIL ============ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.text-center{text-align:center;}
.hidden{display:none!important;}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr;}
}

@media (max-width:900px){
  .nav-toggle{display:block;order:3;}
  .logo{order:1;}
  .nav-menu{
    display:none;position:absolute;
    top:100%;left:0;right:0;
    background:#fff;flex-direction:column;
    padding:1rem;border-bottom:1px solid var(--border);
    box-shadow:0 20px 40px rgba(15,23,42,.08);
    max-height:80vh;overflow-y:auto;
  }
  .nav-menu.open{display:flex;}
  .nav-menu a{width:100%;text-align:left;}
  .nav-search{width:100%;margin:.5rem 0;}

  .hero{padding:5rem 0 4.5rem;}
  .hero h1{font-size:2.6rem;letter-spacing:-1.5px;}
  .hero p{font-size:1.05rem;}

  .section{padding:4rem 0;}
  .section-head{margin-bottom:2.5rem;}
  .section-head h2{font-size:2rem;letter-spacing:-1px;}

  .detail{grid-template-columns:1fr;gap:2.5rem;padding:3rem 0;}
  .detail-img{position:static;}
  .detail-info h1{font-size:2rem;}

  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem;}
  .grid-2{grid-template-columns:1fr;}
  .admin-layout{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:static;padding:1rem 0;}
  .admin-main{padding:1.5rem;}
  .admin-header h1{font-size:1.5rem;}
}

@media (max-width:600px){
  .container{padding:0 18px;}
  .hero h1{font-size:2rem;}
  .hero p{font-size:1rem;}
  .section-head h2{font-size:1.6rem;}
  .product-grid,
  .video-grid{grid-template-columns:1fr;gap:1.5rem;}
  .footer-grid{grid-template-columns:1fr;gap:2rem;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .stat-card{padding:1.25rem;}
  .stat-card .value{font-size:1.8rem;}
  .form-card{padding:1.75rem;}
  .topbar-inner{font-size:.75rem;justify-content:center;text-align:center;}
  .admin-header{flex-direction:column;align-items:flex-start;}
  .table{font-size:.82rem;}
  .table th,.table td{padding:.7rem .6rem;}
}