/* ============================================================
 * SCRIPTIFYZONE v2.0 — main.css
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --brand-cyan:      #00C4D4;
  --brand-navy:      #1A2B5E;
  --brand-navy-deep: #0A1628;
  --brand-amber:     #F5A914;
  --brand-orange:    #F97316;
  --brand-teal:      #00E5F2;
  --grad-cta:        linear-gradient(135deg,#F5A914 0%,#F97316 100%);
  --grad-brand:      linear-gradient(135deg,#00C4D4 0%,#F5A914 100%);
  --grad-primary:    linear-gradient(135deg,#00C4D4 0%,#1A2B5E 60%,#0A1628 100%);
  --bg-base:         #060C18;
  --bg-surface:      #0C1525;
  --bg-elevated:     #111D30;
  --bg-glass:        rgba(0,196,212,.05);
  --border-subtle:   rgba(0,196,212,.08);
  --border-brand:    rgba(0,196,212,.22);
  --border-glow:     rgba(0,196,212,.45);
  --border-amber:    rgba(245,169,20,.28);
  --text-primary:    #E8F4F8;
  --text-secondary:  #8FA8BE;
  --text-muted:      #445A72;
  --text-cyan:       #00C4D4;
  --text-amber:      #F5A914;
  --text-orange:     #F97316;
  --accent-success:  #10B981;
  --accent-error:    #EF4444;
  --accent-warning:  #F5A914;
  --glow-cyan:       0 0 40px rgba(0,196,212,.28);
  --glow-amber:      0 0 40px rgba(245,169,20,.22);
  --shadow-card:     0 8px 32px rgba(0,0,0,.5),0 0 0 1px var(--border-subtle);
  --shadow-hover:    0 20px 60px rgba(0,0,0,.6),0 0 0 1px var(--border-brand),var(--glow-cyan);
  --shadow-cta:      0 8px 24px rgba(249,115,22,.35),0 4px 12px rgba(245,169,20,.20);
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;
  --space-xl:40px;--space-2xl:64px;--space-3xl:96px;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;
  --text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.75rem;
  --text-hero:clamp(2.8rem,6vw,5.5rem);
  --radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:32px;--radius-pill:999px;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:150ms;--dur-base:250ms;--dur-slow:400ms;
}

[data-theme="light"] {
  --bg-base:#F0F8FA;--bg-surface:#FFFFFF;--bg-elevated:#E8F5F8;--bg-glass:rgba(0,196,212,.06);
  --border-subtle:rgba(26,43,94,.10);--border-brand:rgba(0,196,212,.35);--border-glow:rgba(0,196,212,.55);
  --text-primary:#0A1628;--text-secondary:#2A4060;--text-muted:#5A7898;
  --shadow-card:0 4px 20px rgba(10,22,40,.10),0 0 0 1px var(--border-subtle);
  --shadow-hover:0 8px 32px rgba(10,22,40,.15),0 0 0 1px var(--border-brand);
  --glow-cyan:0 0 30px rgba(0,196,212,.15);
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg-base);color:var(--text-primary);font-family:'DM Sans',system-ui,sans-serif;font-size:var(--text-base);line-height:1.65;min-height:100vh;overflow-x:hidden;transition:background var(--dur-slow),color var(--dur-slow);}
img{display:block;max-width:100%;}
a{color:var(--text-cyan);text-decoration:none;transition:color var(--dur-fast);}
a:hover{color:var(--brand-teal);}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,textarea,select{font-family:inherit;}
ul{list-style:none;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg-base);}
::-webkit-scrollbar-thumb{background:var(--brand-cyan);border-radius:3px;}

/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:'Syne',sans-serif;line-height:1.15;font-weight:700;}
.gradient-text{background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-headline{font-family:'Syne',sans-serif;font-size:var(--text-hero);font-weight:800;letter-spacing:-.03em;background:linear-gradient(120deg,#00E5F2 0%,#00C4D4 25%,#fff 50%,#F5A914 75%,#F97316 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:shimmerText 5s linear infinite;}
@keyframes shimmerText{0%{background-position:0% center}100%{background-position:200% center}}
.brand-wordmark{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:-.02em;}
.brand-wordmark .script{color:var(--text-primary);}
.brand-wordmark .ify{color:var(--brand-orange);}

/* ── Layout ─────────────────────────────────────────────── */
.container{max-width:1280px;margin-inline:auto;padding-inline:var(--space-lg);}
.section{padding-block:var(--space-3xl);}
.section-header{text-align:center;margin-bottom:var(--space-2xl);}
.section-header h2{margin-bottom:var(--space-sm);}
.section-header p{color:var(--text-secondary);max-width:560px;margin-inline:auto;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg);}

/* ── NAVBAR ─────────────────────────────────────────────── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(6,12,24,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border-subtle);transition:all var(--dur-base);}
.navbar.scrolled{background:rgba(6,12,24,.96);border-bottom-color:var(--border-brand);}
.navbar-inner{display:flex;align-items:center;gap:var(--space-lg);padding-block:14px;}
.nav-logo{font-size:1.3rem;}
.nav-links{display:flex;align-items:center;gap:var(--space-md);margin-left:var(--space-xl);}
.nav-link{color:var(--text-secondary);font-size:var(--text-sm);font-weight:500;transition:color var(--dur-fast);padding:6px 0;position:relative;}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--grad-brand);transform:scaleX(0);transition:transform var(--dur-base) var(--ease-out);}
.nav-link:hover,.nav-link.active{color:var(--brand-cyan);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-actions{display:flex;align-items:center;gap:var(--space-sm);margin-left:auto;}
.nav-search{position:relative;}
.nav-search input{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);color:var(--text-primary);padding:8px 16px 8px 40px;width:220px;font-size:var(--text-sm);transition:all var(--dur-base);}
.nav-search input:focus{outline:none;border-color:var(--brand-cyan);width:280px;box-shadow:var(--glow-cyan);}
.nav-search .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;width:16px;height:16px;}
.search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg-elevated);border:1px solid var(--border-brand);border-radius:var(--radius-md);box-shadow:var(--shadow-hover);z-index:100;display:none;max-height:360px;overflow-y:auto;}
.search-dropdown.open{display:block;}
.search-result-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);border-bottom:1px solid var(--border-subtle);transition:background var(--dur-fast);}
.search-result-item:hover{background:var(--bg-glass);}
.search-result-item img{width:40px;height:40px;border-radius:var(--radius-sm);object-fit:cover;}
.cart-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-subtle);color:var(--text-secondary);transition:all var(--dur-base);}
.cart-btn:hover{border-color:var(--border-brand);color:var(--brand-cyan);}
.cart-count{position:absolute;top:-4px;right:-4px;background:var(--grad-cta);color:#fff;font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-subtle);color:var(--text-secondary);transition:all var(--dur-base);}
.theme-toggle:hover{border-color:var(--border-brand);color:var(--brand-amber);}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:1px;transition:all var(--dur-base);}

/* ── HERO ────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:80px;}
#particles-js{position:absolute;inset:0;z-index:0;}
.hero-bg{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 80% 60% at 30% 20%,rgba(0,196,212,.10) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 70%,rgba(245,169,20,.06) 0%,transparent 60%),radial-gradient(ellipse 100% 100% at 50% 100%,rgba(26,43,94,.3) 0%,transparent 50%);}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:center;position:relative;z-index:2;width:100%;padding-block:var(--space-3xl);}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,196,212,.08);border:1px solid var(--border-brand);border-radius:var(--radius-pill);padding:6px 16px;font-size:var(--text-sm);font-weight:500;color:var(--text-cyan);margin-bottom:var(--space-lg);}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-success);animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hero-sub{font-size:var(--text-xl);color:var(--text-secondary);margin-top:var(--space-lg);margin-bottom:var(--space-xl);line-height:1.7;}
.hero-actions{display:flex;gap:var(--space-md);flex-wrap:wrap;}
.hero-stats{display:flex;gap:var(--space-xl);margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--border-subtle);}
.hero-stat-value{font-family:'Syne',sans-serif;font-size:var(--text-3xl);font-weight:800;}
.hero-stat-label{font-size:var(--text-sm);color:var(--text-muted);margin-top:4px;}

/* ── CODE ANIMATION WINDOW ───────────────────────────────── */
.code-window{background:rgba(6,12,24,.95);border:1px solid var(--border-brand);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-hover);position:relative;}
.code-window-header{display:flex;align-items:center;gap:8px;padding:14px 20px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);}
.code-dot{width:12px;height:12px;border-radius:50%;}
.code-dot.red{background:#EF4444;}.code-dot.yellow{background:#F5A914;}.code-dot.green{background:#10B981;}
.code-window-title{font-size:var(--text-sm);color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-left:auto;margin-right:auto;}
.code-body{padding:var(--space-xl);font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.8;overflow:hidden;min-height:360px;}
.code-line{display:flex;gap:12px;opacity:0;animation:fadeInLine .3s ease forwards;}
.code-line-num{color:var(--text-muted);min-width:24px;text-align:right;user-select:none;}
.c-keyword{color:#C792EA;}
.c-string{color:#C3E88D;}
.c-func{color:#82AAFF;}
.c-class{color:#FFCB6B;}
.c-comment{color:#546E7A;font-style:italic;}
.c-var{color:#F78C6C;}
.c-punct{color:#89DDFF;}
.c-num{color:#F78C6C;}
.c-operator{color:#89DDFF;}
.code-cursor{display:inline-block;width:2px;height:1em;background:var(--brand-cyan);animation:blink 1s infinite;vertical-align:text-bottom;}
@keyframes fadeInLine{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* Floating badges on code window */
.code-badge{position:absolute;background:var(--bg-elevated);border:1px solid var(--border-brand);border-radius:var(--radius-md);padding:10px 16px;font-size:var(--text-sm);display:flex;align-items:center;gap:8px;backdrop-filter:blur(8px);box-shadow:var(--shadow-card);}
.code-badge-tl{top:-20px;left:-20px;animation:float2 5s ease-in-out infinite;}
.code-badge-br{bottom:-20px;right:-20px;animation:float2 5s ease-in-out infinite .8s;}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);transition:all var(--dur-base) var(--ease-out);cursor:pointer;border:none;text-decoration:none;}
.btn-primary{background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-cta);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(249,115,22,.45);filter:brightness(1.08);color:#fff;}
.btn-secondary{background:transparent;border:1px solid var(--border-brand);color:var(--text-cyan);}
.btn-secondary:hover{background:var(--bg-glass);border-color:var(--border-glow);box-shadow:var(--glow-cyan);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text-secondary);}
.btn-ghost:hover{color:var(--text-primary);}
.btn-danger{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:var(--accent-error);}
.btn-danger:hover{background:rgba(239,68,68,.25);}
.btn-sm{padding:8px 16px;font-size:var(--text-xs);}
.btn-lg{padding:16px 32px;font-size:var(--text-base);}
.btn-full{width:100%;}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);color:var(--text-muted);}
.btn-icon:hover{border-color:var(--border-brand);color:var(--brand-cyan);}

/* ── PRODUCT CARD ────────────────────────────────────────── */
.product-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--dur-slow) var(--ease-out);display:flex;flex-direction:column;position:relative;}
.product-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-hover);transform:translateY(-4px);}
.product-thumb{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--bg-elevated);}
.product-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow);}
.product-card:hover .product-thumb img{transform:scale(1.05);}
.product-thumb-overlay{position:absolute;inset:0;background:rgba(6,12,24,.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur-base);gap:var(--space-sm);}
.product-card:hover .product-thumb-overlay{opacity:1;}
.product-body{padding:var(--space-lg);flex:1;display:flex;flex-direction:column;gap:var(--space-sm);}
.product-category{font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-cyan);}
.product-name{font-family:'Syne',sans-serif;font-size:var(--text-lg);font-weight:700;color:var(--text-primary);line-height:1.3;transition:color var(--dur-fast);}
.product-card:hover .product-name{color:var(--brand-cyan);}
.product-desc{font-size:var(--text-sm);color:var(--text-secondary);flex:1;}
.product-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--space-md);border-top:1px solid var(--border-subtle);}
.product-price{font-family:'Syne',sans-serif;font-size:var(--text-xl);font-weight:800;background:var(--grad-cta);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.product-price-original{font-size:var(--text-sm);color:var(--text-muted);text-decoration:line-through;margin-left:6px;-webkit-text-fill-color:var(--text-muted);}
.product-badges{position:absolute;top:var(--space-md);left:var(--space-md);display:flex;flex-direction:column;gap:4px;z-index:1;}

/* ── BADGES ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.badge-featured{background:var(--grad-cta);color:#fff;}
.badge-category{background:rgba(0,196,212,.15);color:var(--brand-cyan);}
.badge-sale{background:var(--brand-orange);color:#fff;}
.badge-success{background:rgba(16,185,129,.18);color:var(--accent-success);}
.badge-error{background:rgba(239,68,68,.18);color:var(--accent-error);}
.badge-pending{background:rgba(245,169,20,.18);color:var(--brand-amber);}
.badge-info{background:rgba(0,196,212,.15);color:var(--brand-cyan);}
.badge-vendor{background:rgba(139,92,246,.18);color:#A78BFA;}

/* ── STATS BAR ───────────────────────────────────────────── */
.stats-bar{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);display:flex;justify-content:space-around;align-items:center;padding:var(--space-xl) var(--space-2xl);backdrop-filter:blur(16px);margin-block:var(--space-3xl);}
.stat-item{text-align:center;}
.stat-number{font-family:'Syne',sans-serif;font-size:var(--text-4xl);font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-label{font-size:var(--text-sm);color:var(--text-secondary);margin-top:4px;}

/* ── CATEGORY CARD ───────────────────────────────────────── */
.category-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-lg);text-align:center;transition:all var(--dur-slow) var(--ease-out);cursor:pointer;display:block;}
.category-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-hover);transform:translateY(-4px);}
.category-icon{width:56px;height:56px;border-radius:var(--radius-md);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;margin-inline:auto;margin-bottom:var(--space-md);font-size:24px;transition:all var(--dur-base);}
.category-card:hover .category-icon{background:var(--bg-glass);box-shadow:var(--glow-cyan);}
.category-name{font-family:'Syne',sans-serif;font-weight:700;margin-bottom:4px;}
.category-count{font-size:var(--text-sm);color:var(--text-muted);}

/* ── STEPS ───────────────────────────────────────────────── */
.steps{display:flex;gap:0;position:relative;}
.steps::before{content:'';position:absolute;top:28px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border-brand),transparent);z-index:0;}
.step{flex:1;text-align:center;position:relative;z-index:1;padding-inline:var(--space-lg);}
.step-num{width:56px;height:56px;border-radius:50%;background:var(--grad-cta);display:flex;align-items:center;justify-content:center;margin-inline:auto;margin-bottom:var(--space-lg);font-family:'Syne',sans-serif;font-weight:800;font-size:var(--text-lg);color:#fff;box-shadow:var(--shadow-cta);}
.step-title{font-family:'Syne',sans-serif;font-weight:700;margin-bottom:var(--space-sm);}
.step-desc{font-size:var(--text-sm);color:var(--text-secondary);}

/* ── TESTIMONIALS ────────────────────────────────────────── */
.testimonial-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl);position:relative;}
.testimonial-card::before{content:'"';font-size:5rem;line-height:1;color:var(--brand-cyan);opacity:.18;position:absolute;top:var(--space-md);left:var(--space-xl);font-family:'Syne',sans-serif;}
.testimonial-body{color:var(--text-secondary);font-style:italic;margin-bottom:var(--space-lg);line-height:1.8;position:relative;z-index:1;}
.testimonial-author{display:flex;align-items:center;gap:var(--space-md);}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);color:#fff;flex-shrink:0;}

/* ── NEWSLETTER ──────────────────────────────────────────── */
.newsletter-section{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(0,196,212,.07) 0%,rgba(245,169,20,.04) 100%);border:1px solid var(--border-brand);border-radius:var(--radius-xl);padding:var(--space-3xl);text-align:center;}
.newsletter-form{display:flex;gap:var(--space-md);max-width:480px;margin-inline:auto;margin-top:var(--space-xl);}
.newsletter-form input{flex:1;background:var(--bg-elevated);border:1px solid var(--border-brand);border-radius:var(--radius-md);color:var(--text-primary);padding:12px 16px;font-size:var(--text-sm);}
.newsletter-form input:focus{outline:none;border-color:var(--border-glow);box-shadow:var(--glow-cyan);}

/* ── FOOTER ──────────────────────────────────────────────── */
.footer{background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding-block:var(--space-3xl) var(--space-xl);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-2xl);}
.footer-brand p{color:var(--text-secondary);font-size:var(--text-sm);margin-top:var(--space-md);line-height:1.7;}
.footer-heading{font-family:'Syne',sans-serif;font-weight:700;font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);margin-bottom:var(--space-lg);}
.footer-links{display:flex;flex-direction:column;gap:var(--space-sm);}
.footer-links a{font-size:var(--text-sm);color:var(--text-secondary);transition:color var(--dur-fast);}
.footer-links a:hover{color:var(--brand-cyan);}
.footer-bottom{border-top:1px solid var(--border-subtle);margin-top:var(--space-2xl);padding-top:var(--space-lg);display:flex;align-items:center;justify-content:space-between;}
.footer-bottom p{font-size:var(--text-sm);color:var(--text-muted);}
.social-links{display:flex;gap:var(--space-md);}
.social-link{width:36px;height:36px;border-radius:50%;border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:14px;transition:all var(--dur-base);}
.social-link:hover{border-color:var(--border-brand);color:var(--brand-cyan);}

/* ── FORMS ───────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-lg);}
.form-label{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);}
.form-input{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);padding:12px 16px;font-size:var(--text-base);transition:all var(--dur-base);width:100%;}
.form-input:focus{outline:none;border-color:var(--border-glow);box-shadow:var(--glow-cyan);}
.form-input::placeholder{color:var(--text-muted);}
.form-input-icon{position:relative;}
.form-input-icon input{padding-left:44px;}
.form-input-icon .input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);}
.form-error{font-size:var(--text-sm);color:var(--accent-error);}
.form-hint{font-size:var(--text-xs);color:var(--text-muted);}
.auth-card{background:rgba(11,21,37,.85);border:1px solid var(--border-brand);border-radius:var(--radius-xl);padding:var(--space-2xl);backdrop-filter:blur(24px);width:100%;max-width:460px;}

/* ── CART DRAWER ─────────────────────────────────────────── */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:2000;opacity:0;visibility:hidden;transition:all var(--dur-slow);}
.cart-overlay.open{opacity:1;visibility:visible;}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;background:var(--bg-elevated);border-left:1px solid var(--border-brand);z-index:2001;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);display:flex;flex-direction:column;}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--border-subtle);}
.cart-drawer-body{flex:1;overflow-y:auto;padding:var(--space-lg) var(--space-xl);}
.cart-drawer-footer{padding:var(--space-xl);border-top:1px solid var(--border-subtle);background:var(--bg-surface);}
.cart-item{display:flex;gap:var(--space-md);padding-block:var(--space-lg);border-bottom:1px solid var(--border-subtle);}
.cart-item-img{width:60px;height:60px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;background:var(--bg-elevated);}
.cart-item-name{font-weight:600;font-size:var(--text-sm);}
.cart-item-price{color:var(--text-amber);font-weight:700;font-size:var(--text-sm);}
.cart-summary-row{display:flex;justify-content:space-between;font-size:var(--text-sm);margin-bottom:8px;}
.cart-summary-row.total{font-size:var(--text-lg);font-weight:700;color:var(--brand-cyan);padding-top:8px;border-top:1px solid var(--border-subtle);}

/* ── TABLES ──────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);}
table{width:100%;border-collapse:collapse;}
thead{background:var(--bg-elevated);}
th{padding:var(--space-md) var(--space-lg);text-align:left;font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
td{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--bg-glass);}

/* ── PAGINATION ──────────────────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-top:var(--space-2xl);}
.page-btn{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:500;border:1px solid var(--border-subtle);color:var(--text-secondary);transition:all var(--dur-base);}
.page-btn:hover,.page-btn.active{background:var(--brand-cyan);color:#fff;border-color:var(--brand-cyan);}

/* ── ALERTS / TOAST ──────────────────────────────────────── */
.alert{padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-lg);display:flex;align-items:center;gap:var(--space-md);}
.alert-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--accent-success);}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--accent-error);}
.alert-info{background:rgba(0,196,212,.08);border:1px solid var(--border-brand);color:var(--text-cyan);}
.alert-warning{background:rgba(245,169,20,.08);border:1px solid var(--border-amber);color:var(--text-amber);}
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--bg-elevated);border:1px solid var(--border-brand);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);font-size:var(--text-sm);min-width:280px;box-shadow:var(--shadow-hover);animation:slideInToast var(--dur-base) var(--ease-out);}
@keyframes slideInToast{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── COUNTDOWN ───────────────────────────────────────────── */
.countdown{display:flex;gap:var(--space-sm);align-items:center;}
.countdown-block{background:var(--brand-navy);border-radius:var(--radius-sm);padding:8px 12px;text-align:center;min-width:56px;}
.countdown-num{font-size:var(--text-xl);font-weight:700;color:var(--brand-amber);font-family:'JetBrains Mono',monospace;}
.countdown-unit{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;}

/* ── SKELETON ────────────────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-glass) 50%,var(--bg-elevated) 75%);background-size:400px 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-sm);}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}

/* ── SHOP LAYOUT ─────────────────────────────────────────── */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--space-2xl);}
.sidebar{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl);height:fit-content;position:sticky;top:90px;}
.sidebar-section{margin-bottom:var(--space-xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--border-subtle);}
.sidebar-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.sidebar-title{font-family:'Syne',sans-serif;font-weight:700;font-size:var(--text-sm);margin-bottom:var(--space-md);}

/* ── PRODUCT DETAIL ──────────────────────────────────────── */
.product-detail{display:grid;grid-template-columns:1fr 380px;gap:var(--space-2xl);align-items:start;}
.product-gallery .main-img{aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-elevated);border:1px solid var(--border-subtle);}
.product-gallery .main-img img{width:100%;height:100%;object-fit:cover;}
.gallery-thumbs{display:flex;gap:var(--space-sm);margin-top:var(--space-sm);flex-wrap:wrap;}
.gallery-thumb{width:72px;height:52px;border-radius:var(--radius-sm);object-fit:cover;cursor:pointer;border:2px solid transparent;transition:border-color var(--dur-fast);opacity:.7;}
.gallery-thumb.active,.gallery-thumb:hover{border-color:var(--brand-cyan);opacity:1;}
.purchase-box{background:var(--bg-surface);border:1px solid var(--border-brand);border-radius:var(--radius-lg);padding:var(--space-xl);position:sticky;top:90px;}
.purchase-price{font-family:'Syne',sans-serif;font-size:var(--text-4xl);font-weight:800;background:var(--grad-cta);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-xl);}
.tab-btn{padding:12px var(--space-lg);font-size:var(--text-sm);font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;transition:all var(--dur-base);cursor:pointer;white-space:nowrap;}
.tab-btn.active,.tab-btn:hover{color:var(--brand-cyan);border-bottom-color:var(--brand-cyan);}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* ── STARS ───────────────────────────────────────────────── */
.stars{color:var(--text-muted);}
.stars .filled{color:var(--brand-amber);}
.rating-row{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--text-muted);}

/* ── FLASH SALE BANNER ───────────────────────────────────── */
.flash-banner{background:linear-gradient(90deg,#F97316,#F5A914,#F97316);background-size:200% auto;animation:gradientMove 3s linear infinite;color:#fff;text-align:center;padding:10px;font-weight:600;font-size:var(--text-sm);}
@keyframes gradientMove{0%{background-position:0% center}100%{background-position:200% center}}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .hero-grid{grid-template-columns:1fr;}
  .code-window,.code-badge-tl,.code-badge-br{display:none;}
  .product-detail{grid-template-columns:1fr;}
  .purchase-box{position:static;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .shop-layout{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .nav-links,.nav-search{display:none;}
  .hamburger{display:flex;}
  .steps{flex-direction:column;gap:var(--space-xl);}
  .steps::before{display:none;}
  .stats-bar{flex-direction:column;gap:var(--space-xl);}
  .footer-grid{grid-template-columns:1fr;}
  .newsletter-form{flex-direction:column;}
  .cart-drawer{width:100%;}
  .hero-stats{flex-wrap:wrap;gap:var(--space-lg);}
}