/* ===== Reset & Variables ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#2563eb;--primary-dark:#1d4ed8;--primary-light:#3b82f6;
  --accent:#06b6d4;--accent2:#8b5cf6;
  --bg:#09090b;--bg-card:#18181b;--bg-card-hover:#1f1f23;
  --surface:#27272a;--surface-2:#3f3f46;
  --text:#fafafa;--text-secondary:#a1a1aa;--text-muted:#71717a;
  --border:#27272a;--border-light:#3f3f46;
  --radius:12px;--radius-lg:20px;--radius-xl:28px;
  --transition:0.3s cubic-bezier(0.4,0,0.2,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SF Mono','Fira Code',monospace;
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media(max-width:768px){html{scroll-padding-top:72px}}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ===== Custom Text Selection ===== */
::selection{background:rgba(37,99,235,0.45);color:white}
::-moz-selection{background:rgba(37,99,235,0.45);color:white}

/* ===== Custom Cursor (Morphing) ===== */
@media(pointer:fine){
  *,a,button{cursor:none!important}
  input,textarea,select{cursor:none!important}
}
.cursor-morph{position:fixed;pointer-events:none;z-index:300000;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--primary);border-radius:50%;border:1.5px solid transparent;transition:width 0.4s cubic-bezier(0.23,1,0.32,1),height 0.4s cubic-bezier(0.23,1,0.32,1),border-radius 0.4s cubic-bezier(0.23,1,0.32,1),background 0.3s,border-color 0.3s,opacity 0.3s}
.cursor-morph.hovering{background:rgba(37,99,235,0.07);border-color:rgba(37,99,235,0.4)}
[data-theme="light"] .cursor-morph.hovering{background:rgba(37,99,235,0.05);border-color:rgba(37,99,235,0.25)}
.cursor-morph.text-mode{width:2px;height:22px;border-radius:1px;background:var(--primary);border-color:transparent;animation:cursorBlink 1s step-end infinite}
.cursor-morph.reading{width:5px;height:5px;background:var(--text-muted);border-color:transparent;opacity:0.5}
.cursor-morph.click{transform:translate(-50%,-50%) scale(0.85)}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0.3}}
@media(pointer:coarse){
  .cursor-morph{display:none}
}

/* ===== Cursor Glow ===== */
.cursor-glow{position:fixed;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity 0.4s;background:radial-gradient(circle,rgba(37,99,235,0.06) 0%,transparent 70%)}
body:hover .cursor-glow{opacity:1}

/* ===== Scroll Progress ===== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--accent2));z-index:10002;width:0;transition:none;border-radius:0 2px 2px 0}

/* ===== Nav Controls (lang + theme in navbar) ===== */
.nav-controls{display:flex;align-items:center;gap:14px;margin-left:20px}

/* ===== Back to Top ===== */
.back-to-top{position:fixed;bottom:32px;right:32px;z-index:999;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:var(--transition);box-shadow:0 4px 20px rgba(0,0,0,0.15)}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 24px rgba(37,99,235,0.2)}
[data-theme="light"] .back-to-top{box-shadow:0 2px 12px rgba(0,0,0,0.08)}

/* ===== Custom Context Menu ===== */
.ctx-menu{position:fixed;z-index:200001;min-width:200px;padding:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,0.3);opacity:0;pointer-events:none;transform:scale(0.95) translateY(-4px);transition:opacity 0.15s,transform 0.15s;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.ctx-menu.open{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}
.ctx-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;text-decoration:none;color:var(--text);font-size:0.85rem;font-weight:500;transition:background 0.15s;font-family:var(--font)}
.ctx-item:hover{background:rgba(37,99,235,0.08)}
.ctx-item svg{width:16px;height:16px;flex-shrink:0;color:var(--text-muted)}
.ctx-divider{height:1px;background:var(--border);margin:6px 8px}
.ctx-brand{pointer-events:none;opacity:0.5;font-size:0.72rem;font-weight:600;color:var(--text-muted)}
.ctx-brand svg,.ctx-brand img{width:18px;height:18px;object-fit:contain}
[data-theme="light"] .ctx-menu{background:rgba(255,255,255,0.95);box-shadow:0 8px 30px rgba(0,0,0,0.12)}

/* ===== Navigation ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(9,9,11,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:var(--transition)}
.nav.scrolled{border-bottom-color:var(--border)}
.nav-container{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:72px}
.nav-logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.nav-logo-img{height:64px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
[data-theme="light"] .nav-logo-img{filter:none}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{text-decoration:none;color:var(--text-secondary);font-size:0.88rem;font-weight:500;transition:var(--transition);position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a.active:not(.nav-cta){color:var(--text)}
.nav-links a.active:not(.nav-cta)::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--primary);border-radius:1px}
.nav-cta{background:var(--primary)!important;color:white!important;padding:8px 20px;border-radius:8px;font-weight:600!important}
.nav-cta:hover{background:var(--primary-dark)!important;transform:translateY(-1px)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}
.nav-backdrop{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,0);transition:background 0.35s ease}
.nav-backdrop.visible{display:block;background:rgba(0,0,0,0.5)}
[data-theme="light"] .nav-backdrop.visible{background:rgba(0,0,0,0.3)}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:72px}
.hero-canvas{position:absolute;inset:0;z-index:0}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.4;animation:orbFloat 20s ease-in-out infinite}
.hero-orb-1{width:500px;height:500px;background:var(--primary);top:-10%;left:-5%;animation-delay:0s}
.hero-orb-2{width:400px;height:400px;background:var(--accent);bottom:10%;right:-5%;animation-delay:-7s}
.hero-orb-3{width:300px;height:300px;background:var(--accent2);top:40%;left:50%;animation-delay:-14s}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-40px)}50%{transform:translate(-20px,30px)}75%{transform:translate(40px,20px)}}
.hero-content{position:relative;z-index:1;padding:60px 0 100px;max-width:720px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:100px;font-size:0.82rem;font-weight:500;color:var(--text-secondary);margin-bottom:32px;opacity:0;transform:translateY(12px);transition:opacity 0.6s ease,transform 0.6s ease}
.hero-eyebrow.hero-revealed{opacity:1;transform:translateY(0)}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e80;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.hero h1{font-size:clamp(2.8rem,6vw,4.5rem);font-weight:800;line-height:1.05;letter-spacing:-0.04em;margin-bottom:24px}
.hero-line{display:block;opacity:0;transition:opacity 0.4s ease}
.hero-line.scramble-ready{opacity:1}
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradShift 6s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-sub{font-size:1.15rem;color:var(--text-secondary);line-height:1.7;margin-bottom:40px;max-width:540px;opacity:0;transform:translateY(12px);transition:opacity 0.6s ease,transform 0.6s ease}
.hero-sub.hero-revealed{opacity:1;transform:translateY(0)}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px;opacity:0;transform:translateY(12px);transition:opacity 0.6s ease,transform 0.6s ease}
.hero-actions.hero-revealed{opacity:1;transform:translateY(0)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:10px;font-size:0.92rem;font-weight:600;text-decoration:none;transition:var(--transition);cursor:pointer;border:none;font-family:var(--font)}
.btn-primary{background:var(--primary);color:white;box-shadow:0 0 20px rgba(37,99,235,0.3)}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 0 30px rgba(37,99,235,0.5);transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,0.05);color:var(--text);border:1px solid rgba(255,255,255,0.1)}
.btn-glass:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}
.btn-play{font-size:0.7rem;opacity:0.7}
.btn-full{width:100%;justify-content:center;padding:16px}
.hero-badges{display:flex;gap:20px;flex-wrap:wrap;opacity:0;transform:translateY(12px);transition:opacity 0.6s ease,transform 0.6s ease}
.hero-badges.hero-revealed{opacity:1;transform:translateY(0)}
.hero-badge-item{display:flex;align-items:center;gap:6px;font-size:0.82rem;color:var(--text-muted);font-weight:500}
.hero-badge-item svg{color:var(--accent)}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--text-muted),transparent);animation:scrollDown 2s ease-in-out infinite}
@keyframes scrollDown{0%{opacity:0;transform:scaleY(0);transform-origin:top}50%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0);transform-origin:bottom}}

/* ===== Sections ===== */
.section{padding:120px 0;position:relative}
.section-dark{background:var(--bg-card)}
.section-header{text-align:center;margin-bottom:64px}
.section-tag{display:inline-block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;color:var(--primary-light);margin-bottom:16px;padding:4px 12px;background:rgba(37,99,235,0.1);border:1px solid rgba(37,99,235,0.15);border-radius:6px}
.section-header h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-0.03em;margin-bottom:16px}
.section-header p{font-size:1.05rem;color:var(--text-secondary);max-width:520px;margin:0 auto}

/* ===== Bento Grid ===== */
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bento-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;overflow:hidden;transition:var(--transition)}
.bento-card:hover{border-color:var(--border-light);transform:translateY(-2px)}
.bento-glow{position:absolute;inset:0;opacity:0;transition:opacity 0.4s;background:radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(37,99,235,0.06),transparent 60%)}
.bento-card:hover .bento-glow{opacity:1}
.bento-large{grid-column:span 2}
.bento-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:rgba(37,99,235,0.1);color:var(--primary-light)}
.bento-icon svg{width:22px;height:22px}
.icon-cyan{background:rgba(6,182,212,0.1);color:var(--accent)}
.icon-violet{background:rgba(139,92,246,0.1);color:#a78bfa}
.icon-emerald{background:rgba(16,185,129,0.1);color:#34d399}
.icon-amber{background:rgba(245,158,11,0.1);color:#fbbf24}
.bento-card h3{font-size:1.15rem;font-weight:700;margin-bottom:8px;letter-spacing:-0.01em}
.bento-card p{font-size:0.88rem;color:var(--text-secondary);line-height:1.6;margin-bottom:16px}
.bento-tags{display:flex;flex-wrap:wrap;gap:6px}
.bento-tags span{font-size:0.72rem;font-weight:500;padding:3px 10px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:6px;color:var(--text-muted)}

/* ===== Project Selector ===== */
.demo-projects{display:flex;justify-content:center;gap:10px;margin-bottom:32px;flex-wrap:wrap}
.demo-project{display:flex;align-items:center;gap:12px;padding:14px 24px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;cursor:pointer;transition:var(--transition);font-family:var(--font)}
.demo-project:hover{border-color:var(--border-light);background:rgba(255,255,255,0.03)}
.demo-project.active{border-color:var(--primary);background:rgba(37,99,235,0.08)}
.project-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden}
.project-icon::before{content:'';position:absolute;inset:0;background:var(--pc);opacity:0.12;border-radius:10px}
.project-icon svg{width:18px;height:18px;stroke:var(--pc);position:relative;z-index:1}
.project-info{text-align:left}
.project-name{display:block;font-size:0.85rem;font-weight:700;color:var(--text)}
.project-type{display:block;font-size:0.7rem;color:var(--text-muted);font-weight:500}
[data-theme="light"] .demo-project:hover{background:rgba(0,0,0,0.02)}
[data-theme="light"] .demo-project.active{background:rgba(37,99,235,0.06)}

/* ===== Demo Section ===== */
.demo-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:48px}
.demo-tab{display:flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:0.88rem;font-weight:600;cursor:pointer;transition:var(--transition)}
.demo-tab svg{width:18px;height:18px}
.demo-tab.active{background:var(--primary);border-color:var(--primary);color:white}
.demo-tab:not(.active):hover{border-color:var(--border-light);color:var(--text)}
.demo-container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.demo-container.hidden{display:none}

/* Demo Steps */
.demo-info{display:flex;flex-direction:column;gap:8px}
.demo-step{display:flex;gap:16px;padding:16px 20px;border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:1px solid transparent;align-items:flex-start}
.demo-step:hover{background:rgba(255,255,255,0.03)}
.demo-step.active{background:rgba(37,99,235,0.08);border-color:rgba(37,99,235,0.2)}
.demo-step-num{font-family:var(--mono);font-size:0.75rem;font-weight:600;color:var(--primary-light);min-width:28px;height:28px;border-radius:8px;background:rgba(37,99,235,0.1);display:flex;align-items:center;justify-content:center;margin-top:2px}
.demo-step.active .demo-step-num{background:var(--primary);color:white}
.demo-step h4{font-size:0.95rem;font-weight:700;margin-bottom:4px}
.demo-step p{font-size:0.82rem;color:var(--text-secondary);line-height:1.5}

/* ===== Phone Mockup ===== */
.phone-mockup{display:flex;justify-content:center}
.phone-frame{width:280px;height:580px;background:#000;border-radius:40px;padding:8px;position:relative;box-shadow:0 0 0 2px #333,0 20px 60px rgba(0,0,0,0.5),0 0 80px rgba(37,99,235,0.1)}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#000;border-radius:0 0 20px 20px;z-index:10;display:flex;align-items:center;justify-content:center}
.phone-camera{width:10px;height:10px;border-radius:50%;background:#1a1a2e;border:1px solid #333}
.phone-screen{width:100%;height:100%;border-radius:32px;overflow:hidden;background:#faf7f2;position:relative}
.app-screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity 0.4s ease,transform 0.4s ease;transform:translateX(20px)}
.app-screen.active{opacity:1;pointer-events:auto;transform:translateX(0)}

/* App Colors */
.app-header{padding:38px 14px 10px;background:#C8102E}
.app-logo-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.app-logo-icon{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.2)}
.app-title{color:white;font-size:0.85rem;font-weight:700}
.app-location{font-size:0.65rem;color:rgba(255,255,255,0.8);display:flex;align-items:center;gap:4px}
.app-location svg{stroke:rgba(255,255,255,0.8)}
.app-header-sm{padding:38px 14px 10px;background:white;border-bottom:1px solid #e8e4df}
.app-header-sm span{font-size:0.85rem;font-weight:700;color:#1a1a1a}
.app-search-bar{display:flex;align-items:center;gap:6px;margin-top:8px;padding:7px 10px;background:#f5f2ed;border-radius:10px;border:1px solid #e8e4df}
.app-search-bar svg{color:#999;flex-shrink:0}
.search-placeholder{font-size:0.7rem;color:#999}

/* App Deals */
.app-deals{display:flex;gap:8px;padding:10px 14px;overflow:hidden}
.app-deal-card{min-width:130px;border-radius:12px;background:white;border:1px solid #e8e4df;overflow:hidden;position:relative;box-shadow:0 2px 6px rgba(0,0,0,0.05)}
.deal-badge{position:absolute;top:6px;left:6px;background:#C8102E;color:white;font-size:0.55rem;font-weight:700;padding:2px 6px;border-radius:4px;z-index:1}
.deal-img{height:60px;background:linear-gradient(135deg,#f5e6d3,#e8d5c4)}
.deal-img-2{background:linear-gradient(135deg,#d4a574,#c49060)}
.deal-text{font-size:0.65rem;font-weight:600;color:#1a1a1a;padding:6px 8px 2px}
.deal-price{font-size:0.6rem;color:#C8102E;font-weight:600;padding:0 8px 6px}
.app-section-title{font-size:0.7rem;font-weight:700;color:#1a1a1a;padding:8px 14px 4px}

/* App Products */
.app-product-row{display:flex;gap:8px;padding:4px 14px 14px;overflow:hidden}
.app-product-mini{min-width:72px;text-align:center}
.app-prod-img{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,#f0dcc4,#e0c8aa);margin:0 auto 4px}
.app-prod-img.img-2{background:linear-gradient(135deg,#d4a574,#c49060)}
.app-prod-img.img-3{background:linear-gradient(135deg,#c9a96e,#b8935a)}
.app-prod-name{font-size:0.6rem;font-weight:600;color:#1a1a1a}
.app-prod-price{font-size:0.55rem;color:#C8102E;font-weight:600}
.app-categories{display:flex;gap:6px;padding:8px 14px;overflow:hidden}
.app-cat{font-size:0.6rem;font-weight:600;padding:5px 10px;border-radius:20px;background:#f5f2ed;color:#666;white-space:nowrap}
.app-cat.active{background:#C8102E;color:white}
.app-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 14px;flex:1;overflow:hidden}
.app-product-card{border-radius:14px;background:white;border:1px solid #e8e4df;overflow:hidden}
.app-card-img{height:60px;background:linear-gradient(135deg,#f0dcc4,#e0c8aa)}
.app-card-img.img-b{background:linear-gradient(135deg,#d4a574,#c49060)}
.app-card-img.img-c{background:linear-gradient(135deg,#c9a96e,#b8935a)}
.app-card-img.img-d{background:linear-gradient(135deg,#e8c8a0,#d4b088)}
.app-card-info{padding:6px 8px 8px}
.app-card-name{font-size:0.62rem;font-weight:600;color:#1a1a1a;margin-bottom:4px}
.app-card-bottom{display:flex;justify-content:space-between;align-items:center}
.app-card-price{font-size:0.6rem;font-weight:700;color:#C8102E}
.app-card-add{width:22px;height:22px;border-radius:7px;background:#C8102E;color:white;font-size:0.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.app-card-add.added{background:#22c55e;font-size:0.6rem}
.app-floating-cart{margin:0 14px 8px;padding:8px 12px;background:#C8102E;border-radius:14px;display:flex;align-items:center;gap:6px;color:white;font-size:0.65rem;font-weight:600;box-shadow:0 4px 12px rgba(200,16,46,0.3)}
.app-floating-cart svg{stroke:white;flex-shrink:0}
.cart-total{margin-left:auto;font-weight:700}

/* App Cart */
.cart-items{padding:12px 14px;flex:1}
.cart-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #e8e4df}
.cart-item-img{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#f0dcc4,#e0c8aa);flex-shrink:0}
.cart-item-img.img-b{background:linear-gradient(135deg,#e8c8a0,#d4b088)}
.cart-item-info{flex:1}
.cart-item-name{font-size:0.65rem;font-weight:600;color:#1a1a1a}
.cart-item-price{font-size:0.6rem;color:#C8102E;font-weight:600}
.cart-qty{display:flex;align-items:center;gap:6px;font-size:0.65rem;font-weight:600;color:#1a1a1a}
.qty-btn{width:22px;height:22px;border-radius:6px;background:#f5f2ed;display:flex;align-items:center;justify-content:center;font-size:0.7rem;color:#666}
.cart-pickup{padding:8px 14px}
.cart-label{font-size:0.6rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px}
.cart-pickup-row{display:flex;gap:8px}
.pickup-field{flex:1;padding:7px 10px;border-radius:8px;background:#f5f2ed;border:1px solid #e8e4df;font-size:0.62rem;font-weight:600;color:#1a1a1a;text-align:center}
.pickup-field.active{border-color:#C8102E;background:rgba(200,16,46,0.05)}
.cart-coupon{display:flex;align-items:center;gap:8px;padding:4px 14px;margin-bottom:4px}
.coupon-input{flex:1;padding:6px 10px;background:#f5f2ed;border-radius:8px;font-size:0.62rem;font-weight:600;color:#1a1a1a;font-family:var(--mono);border:1px solid #e8e4df}
.coupon-ok{padding:4px 8px;border-radius:6px;background:#dcfce7;color:#16a34a;font-size:0.55rem;font-weight:700}
.cart-summary{padding:8px 14px;border-top:1px solid #e8e4df}
.cart-sum-row{display:flex;justify-content:space-between;font-size:0.6rem;color:#666;padding:3px 0}
.cart-sum-row.discount{color:#16a34a}
.cart-sum-row.total{font-size:0.7rem;font-weight:700;color:#1a1a1a;border-top:1px solid #e8e4df;padding-top:6px;margin-top:2px}
.cart-checkout-btn{margin:8px 14px;padding:10px;background:#C8102E;border-radius:12px;color:white;text-align:center;font-size:0.7rem;font-weight:700;box-shadow:0 4px 12px rgba(200,16,46,0.3)}

/* App Order */
.order-success{text-align:center;padding:20px 14px 10px}
.order-check{width:48px;height:48px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.order-check svg{color:#16a34a}
.order-title{font-size:0.8rem;font-weight:700;color:#1a1a1a}
.order-id{font-size:0.65rem;color:#666;font-family:var(--mono)}
.order-timeline{display:flex;align-items:center;justify-content:center;gap:0;padding:16px 14px;flex-wrap:wrap}
.timeline-step{display:flex;flex-direction:column;align-items:center;gap:4px}
.timeline-step span{font-size:0.5rem;color:#666;font-weight:500;text-align:center;max-width:60px}
.timeline-dot{width:12px;height:12px;border-radius:50%;background:#e8e4df;border:2px solid #ccc}
.timeline-step.done .timeline-dot{background:#22c55e;border-color:#22c55e}
.timeline-step.current .timeline-dot{background:#C8102E;border-color:#C8102E}
.timeline-dot.pulse{animation:pulse 1.5s ease-in-out infinite;box-shadow:0 0 0 4px rgba(200,16,46,0.2)}
.timeline-line{width:16px;height:2px;background:#e8e4df;margin-bottom:16px}
.timeline-line.done{background:#22c55e}
.timeline-line.active-line{background:linear-gradient(90deg,#22c55e,#C8102E)}
.order-qr{text-align:center;padding:10px 14px}
.qr-placeholder{width:80px;height:80px;margin:0 auto 6px;background:#f5f2ed;border-radius:12px;display:flex;align-items:center;justify-content:center}
.qr-placeholder svg{color:#666}
.qr-label{font-size:0.6rem;color:#666}

/* App Nav */
.app-nav{display:flex;justify-content:space-around;padding:6px 0;border-top:1px solid #e8e4df;background:white;margin-top:auto}
.app-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:0.5rem;color:#999;padding:4px 8px;border-radius:8px}
.app-nav-item.active{color:#C8102E}
.app-nav-item.cart-badge{position:relative}
.app-nav-item.cart-badge::after{content:'2';position:absolute;top:0;right:2px;width:12px;height:12px;border-radius:50%;background:#C8102E;color:white;font-size:0.4rem;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ===== FitFlow App Styles ===== */
.fit-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 14px 10px}
.fit-stat-card{text-align:center;padding:8px 4px;background:white;border:1px solid #e8e4df;border-radius:10px}
.fit-stat-num{font-size:0.8rem;font-weight:800}
.fit-stat-label{font-size:0.5rem;color:#999;font-weight:500}
.fit-class-list{padding:4px 14px;flex:1;overflow:hidden;display:flex;flex-direction:column;gap:6px}
.fit-class-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;border:1px solid #e8e4df;background:white}
.fit-class-time{padding:6px 8px;border-radius:8px;font-size:0.6rem;font-weight:700;min-width:36px;text-align:center}
.fit-class-info{flex:1;min-width:0}
.fit-class-name{font-size:0.62rem;font-weight:700;color:#1a1a1a}
.fit-class-meta{font-size:0.5rem;color:#999}
.fit-book-btn{padding:5px 10px;border-radius:6px;color:white;font-size:0.5rem;font-weight:700;flex-shrink:0}
.fit-booking-details{padding:8px 14px}
.fit-detail-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #e8e4df;font-size:0.62rem}
.fit-detail-label{color:#999;font-weight:500}
.fit-detail-val{color:#1a1a1a;font-weight:600}
.fit-profile-header{text-align:center;padding:16px 14px 8px}
.fit-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.8rem;font-weight:800;margin:0 auto 8px}
.fit-profile-name{font-size:0.8rem;font-weight:700;color:#1a1a1a}
.fit-profile-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:0.55rem;font-weight:600;margin-top:4px}
.fit-achievements{padding:0 14px}
.fit-badge-row{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0}
.fit-ach{padding:5px 10px;border-radius:8px;font-size:0.55rem;font-weight:600;color:#1a1a1a}

/* ===== EventHub App Styles ===== */
.evt-event-list{padding:4px 14px;flex:1;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.evt-event-card{border-radius:12px;overflow:hidden;background:white;border:1px solid #e8e4df}
.evt-event-img{height:48px;position:relative;display:flex;align-items:flex-end;padding:6px}
.evt-date-badge{background:rgba(0,0,0,0.5);color:white;font-size:0.5rem;font-weight:700;padding:2px 6px;border-radius:4px;backdrop-filter:blur(4px)}
.evt-event-info{padding:6px 8px}
.evt-event-name{font-size:0.62rem;font-weight:700;color:#1a1a1a}
.evt-event-meta{font-size:0.5rem;color:#999}
.evt-detail-hero{padding:38px 14px 14px;color:white}
.evt-detail-back{font-size:0.8rem;margin-bottom:8px;opacity:0.8}
.evt-detail-title{font-size:0.9rem;font-weight:800}
.evt-detail-date{font-size:0.6rem;opacity:0.8;margin-top:2px}
.evt-detail-body{padding:10px 14px;flex:1;display:flex;flex-direction:column;gap:8px}
.evt-detail-section{padding-bottom:6px;border-bottom:1px solid #e8e4df}
.evt-detail-label{font-size:0.55rem;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:0.05em}
.evt-detail-val{font-size:0.65rem;font-weight:600;color:#1a1a1a;margin-top:2px}
.evt-lineup-tags{display:flex;gap:4px;margin-top:4px}
.evt-lineup-tag{padding:3px 8px;border-radius:4px;background:#f5f2ed;font-size:0.5rem;font-weight:600;color:#666}
.evt-ticket-options{display:flex;gap:6px}
.evt-ticket-opt{flex:1;padding:8px;border-radius:8px;border:1px solid #e8e4df;display:flex;justify-content:space-between;align-items:center;font-size:0.6rem;color:#1a1a1a;cursor:pointer}
.evt-ticket-opt.active{border-color:#7c3aed;background:rgba(124,58,237,0.05)}
.evt-ticket-card{margin:10px 14px;border-radius:14px;overflow:hidden;border:1px solid #e8e4df}
.evt-ticket-top{padding:14px;color:white}
.evt-ticket-event{font-size:0.75rem;font-weight:800}
.evt-ticket-date{font-size:0.55rem;opacity:0.8;margin-top:2px}
.evt-ticket-bottom{padding:10px 14px;background:white}
.evt-ticket-row{display:flex;justify-content:space-between;font-size:0.6rem;color:#666;padding:4px 0;border-bottom:1px solid #f0ede8}
.evt-ticket-qr{text-align:center;padding:10px 0}
.evt-wallet-btn{padding:8px;border-radius:8px;color:white;text-align:center;font-size:0.6rem;font-weight:700}

/* ===== LearnFlow App Styles ===== */
.learn-continue-card{border-radius:12px;padding:12px;background:linear-gradient(135deg,rgba(249,115,22,0.1),rgba(249,115,22,0.03));border:1px solid rgba(249,115,22,0.15);position:relative;overflow:hidden}
.learn-continue-progress{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#f97316,#fb923c);border-radius:0 3px 0 0}
.learn-continue-info{position:relative}
.learn-continue-badge{font-size:0.5rem;font-weight:600;color:#f97316;margin-bottom:4px}
.learn-continue-title{font-size:0.7rem;font-weight:700;color:#1a1a1a}
.learn-continue-meta{font-size:0.5rem;color:#999;margin-top:2px}
.learn-course-list{padding:0 14px;display:flex;flex-direction:column;gap:8px}
.learn-course-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid #e8e4df;background:white}
.learn-course-thumb{width:52px;height:52px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.learn-course-duration{position:absolute;bottom:2px;right:2px;font-size:0.42rem;font-weight:700;color:white;background:rgba(0,0,0,0.5);padding:1px 4px;border-radius:3px}
.learn-course-info{flex:1;min-width:0}
.learn-course-name{font-size:0.62rem;font-weight:700;color:#1a1a1a}
.learn-course-author{font-size:0.5rem;color:#999}
.learn-video-area{margin:0 14px 8px;border-radius:10px;overflow:hidden;background:#1a1a1a;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.learn-play-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center}
.learn-lesson-info{padding:4px 14px}
.learn-lesson-title{font-size:0.65rem;font-weight:700;color:#1a1a1a}
.learn-lesson-meta{font-size:0.5rem;color:#999;margin-top:2px}
.learn-progress-bar{height:4px;background:#e8e4df;border-radius:2px;margin:6px 14px;overflow:hidden}
.learn-progress-fill{height:100%;background:linear-gradient(90deg,#f97316,#fb923c);border-radius:2px}
.learn-chapter-list{padding:0 14px;display:flex;flex-direction:column;gap:4px}
.learn-chapter-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:0.55rem}
.learn-chapter-item.completed{color:#22c55e}
.learn-chapter-item.current{background:rgba(249,115,22,0.08);color:#f97316;font-weight:600}
.learn-chapter-item.locked{color:#ccc}
.learn-chapter-num{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.48rem;font-weight:700;flex-shrink:0;border:1.5px solid currentColor}
.learn-chapter-title{flex:1}
.learn-chapter-dur{font-size:0.48rem;color:#999}
.learn-quiz-card{padding:14px;border-radius:12px;border:1px solid #e8e4df}
.learn-quiz-progress{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:0.5rem;color:#999}
.learn-quiz-bar{flex:1;height:4px;background:#e8e4df;border-radius:2px;overflow:hidden}
.learn-quiz-fill{height:100%;background:#f97316;border-radius:2px}
.learn-quiz-question{font-size:0.65rem;font-weight:700;color:#1a1a1a;margin-bottom:10px}
.learn-quiz-options{display:flex;flex-direction:column;gap:6px}
.learn-quiz-option{padding:8px 10px;border-radius:8px;border:1.5px solid #e8e4df;font-size:0.55rem;font-weight:500;color:#666}
.learn-quiz-option.selected{border-color:#f97316;background:rgba(249,115,22,0.05);color:#f97316;font-weight:600}
.learn-quiz-option.correct{border-color:#22c55e;background:rgba(34,197,94,0.05);color:#22c55e}
.learn-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 14px}
.learn-stat-card{text-align:center;padding:10px 4px;border-radius:10px;border:1px solid #e8e4df}
.learn-stat-val{font-size:0.8rem;font-weight:800;color:#1a1a1a}
.learn-stat-label{font-size:0.45rem;color:#999;font-weight:500;margin-top:2px}
.learn-badge-row{display:flex;gap:8px;padding:4px 14px;overflow:hidden}
.learn-badge{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.9rem}
.learn-cert-list{padding:0 14px;display:flex;flex-direction:column;gap:6px}
.learn-cert-card{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;border:1px solid #e8e4df}
.learn-cert-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.8rem;flex-shrink:0}
.learn-cert-info{flex:1;min-width:0}
.learn-cert-name{font-size:0.6rem;font-weight:600;color:#1a1a1a}
.learn-cert-date{font-size:0.48rem;color:#999}

/* ===== PropFlow App Styles ===== */
.prop-listing-list{padding:0 14px;display:flex;flex-direction:column;gap:8px}
.prop-listing-card{border-radius:12px;border:1px solid #e8e4df;overflow:hidden;background:white}
.prop-listing-img{height:80px;position:relative;display:flex;align-items:flex-end;padding:6px}
.prop-listing-price{font-size:0.6rem;font-weight:800;color:white;background:rgba(0,0,0,0.6);padding:3px 8px;border-radius:6px}
.prop-listing-info{padding:8px 10px}
.prop-listing-title{font-size:0.62rem;font-weight:700;color:#1a1a1a}
.prop-listing-meta{font-size:0.5rem;color:#999;display:flex;gap:8px;margin-top:2px}
.prop-detail-hero{height:100px;margin:0 14px;border-radius:12px;position:relative;display:flex;align-items:flex-end;padding:10px;overflow:hidden}
.prop-detail-price{font-size:0.75rem;font-weight:800;color:white;text-shadow:0 1px 4px rgba(0,0,0,0.3)}
.prop-detail-type{font-size:0.5rem;color:rgba(255,255,255,0.8)}
.prop-specs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 14px}
.prop-spec-item{text-align:center;padding:8px 4px;border-radius:8px;border:1px solid #e8e4df}
.prop-spec-val{font-size:0.65rem;font-weight:800;color:#1a1a1a}
.prop-spec-label{font-size:0.42rem;color:#999;font-weight:500;margin-top:2px}
.prop-features{display:flex;flex-wrap:wrap;gap:4px;padding:0 14px 8px}
.prop-feature-tag{padding:4px 8px;border-radius:6px;font-size:0.48rem;font-weight:600;background:rgba(14,165,233,0.08);color:#0ea5e9}
.prop-agent-card{display:flex;align-items:center;gap:8px;margin:0 14px;padding:10px;border-radius:10px;border:1px solid #e8e4df}
.prop-agent-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.55rem;font-weight:800;flex-shrink:0}
.prop-agent-info{flex:1;min-width:0}
.prop-agent-name{font-size:0.6rem;font-weight:600;color:#1a1a1a}
.prop-agent-role{font-size:0.48rem;color:#999}
.prop-fav-list{padding:0 14px;display:flex;flex-direction:column;gap:6px}
.prop-fav-card{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;border:1px solid #e8e4df}
.prop-fav-thumb{width:48px;height:48px;border-radius:8px;flex-shrink:0}
.prop-fav-info{flex:1;min-width:0}
.prop-fav-title{font-size:0.6rem;font-weight:600;color:#1a1a1a}
.prop-fav-meta{font-size:0.48rem;color:#999}
.prop-fav-price{font-size:0.6rem;font-weight:700;color:#0ea5e9;flex-shrink:0}
.prop-map-placeholder{height:80px;margin:0 14px 8px;border-radius:10px;background:linear-gradient(135deg,#e0f2fe,#bae6fd);display:flex;align-items:center;justify-content:center;font-size:0.55rem;color:#0ea5e9;font-weight:600}
/* Shared calendar/slot styles (used by PropFlow booking) */
.doc-calendar{display:flex;gap:6px;padding:4px 14px 8px}
.doc-cal-day{flex:1;text-align:center;padding:8px 4px;border-radius:10px;border:1px solid #e8e4df;font-size:0.5rem;font-weight:600;color:#666;display:flex;flex-direction:column;gap:2px}
.doc-cal-day span{font-size:0.75rem;font-weight:800;color:#1a1a1a}
.doc-cal-day.active span{color:white}
.doc-time-slots{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 8px}
.doc-slot{padding:6px 10px;border-radius:8px;border:1px solid #e8e4df;font-size:0.55rem;font-weight:600;color:#666}
.doc-slot.active{border-color:transparent}

/* ===== Browser Mockup ===== */
.browser-mockup{display:flex;justify-content:center}
.browser-frame{width:100%;max-width:620px;background:#1a1a1a;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 80px rgba(37,99,235,0.08);border:1px solid #333}
.browser-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#252525;border-bottom:1px solid #333}
.browser-dots{display:flex;gap:6px}
.dot-red,.dot-yellow,.dot-green{width:10px;height:10px;border-radius:50%}
.dot-red{background:#ff5f57}.dot-yellow{background:#febc2e}.dot-green{background:#28c840}
.browser-url{flex:1;display:flex;align-items:center;gap:6px;padding:5px 12px;background:#1a1a1a;border-radius:6px;font-size:0.7rem;color:#888;font-family:var(--mono)}
.browser-url svg{color:#22c55e;flex-shrink:0}
.browser-screen{height:360px;position:relative;overflow:hidden;background:#faf9f7}
.admin-screen{position:absolute;inset:0;display:flex;opacity:0;pointer-events:none;transition:opacity 0.4s ease}
.admin-screen.active{opacity:1;pointer-events:auto}

/* Admin Sidebar */
.admin-sidebar{width:140px;background:#fff;border-right:1px solid #e8e4df;padding:10px 8px;flex-shrink:0}
.admin-sidebar-logo{display:flex;align-items:center;gap:6px;padding:4px 6px;margin-bottom:10px}
.admin-logo-icon{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#ea580c,#c2410c);flex-shrink:0}
.admin-sidebar-logo span{font-size:0.58rem;font-weight:700;color:#1a1a1a}
.admin-nav-items{display:flex;flex-direction:column;gap:2px}
.admin-nav-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;font-size:0.58rem;font-weight:500;color:#666;cursor:pointer;transition:0.2s}
.admin-nav-item.active{background:#fff7ed;color:#ea580c;font-weight:600}
.nav-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0.4}
.admin-nav-item.active .nav-dot{opacity:1}

/* Admin Main */
.admin-main{flex:1;padding:10px 14px;overflow:hidden}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.admin-greeting{font-size:0.72rem;font-weight:600;color:#1a1a1a}
.admin-page-title{font-size:0.8rem;font-weight:700;color:#1a1a1a}
.admin-user-badge{font-size:0.55rem;padding:3px 8px;border-radius:4px;background:#f5f2ed;color:#666}
.admin-export-btn{font-size:0.55rem;padding:4px 10px;border-radius:6px;background:#ea580c;color:white;font-weight:600}
.admin-date-range{font-size:0.55rem;padding:3px 8px;border-radius:4px;background:#f5f2ed;color:#666}
.admin-cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.admin-stat-card{padding:10px;border-radius:10px;background:white;border:1px solid #e8e4df}
.admin-stat-num{font-size:0.85rem;font-weight:800;color:#1a1a1a}
.admin-stat-label{font-size:0.5rem;color:#666;margin-top:2px}
.admin-stat-trend{font-size:0.5rem;font-weight:700;margin-top:3px}
.admin-stat-trend.up{color:#16a34a}
.admin-stat-trend.neutral{color:#999}
.admin-quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.admin-quick-card{padding:10px;border-radius:8px;background:white;border:1px solid #e8e4df;font-size:0.58rem;font-weight:600;color:#1a1a1a;text-align:center}

/* Admin Filters */
.admin-filters{display:flex;gap:4px;margin-bottom:8px}
.filter-pill{padding:4px 10px;border-radius:20px;font-size:0.55rem;font-weight:600;background:#f5f2ed;color:#666}
.filter-pill.active{background:#ea580c;color:white}

/* Admin Table */
.admin-table{font-size:0.55rem}
.table-header{display:grid;grid-template-columns:1fr 1fr 1fr 0.8fr 1fr;gap:4px;padding:6px 8px;background:#f5f2ed;border-radius:6px;font-weight:600;color:#666;margin-bottom:4px}
.table-row{display:grid;grid-template-columns:1fr 1fr 1fr 0.8fr 1fr;gap:4px;padding:6px 8px;border-bottom:1px solid #f0ede8;color:#1a1a1a;font-weight:500}
.status-badge{padding:2px 6px;border-radius:4px;font-size:0.5rem;font-weight:600;text-align:center}
.status-badge.ready{background:#dcfce7;color:#16a34a}
.status-badge.prep{background:#fef3c7;color:#d97706}
.status-badge.paid{background:#dbeafe;color:#2563eb}
.status-badge.done{background:#f5f2ed;color:#666}

/* Admin Products */
.admin-product-list{display:flex;flex-direction:column;gap:4px}
.admin-prod-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;border:1px solid #e8e4df;background:white}
.admin-prod-thumb{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#f0dcc4,#e0c8aa);flex-shrink:0}
.admin-prod-thumb.th-2{background:linear-gradient(135deg,#d4a574,#c49060)}
.admin-prod-thumb.th-3{background:linear-gradient(135deg,#c9a96e,#b8935a)}
.admin-prod-thumb.th-4{background:linear-gradient(135deg,#e8c8a0,#d4b088)}
.admin-prod-info{flex:1;min-width:0}
.admin-prod-name{font-size:0.6rem;font-weight:600;color:#1a1a1a}
.admin-prod-cat{font-size:0.5rem;color:#999}
.admin-prod-price{font-size:0.6rem;font-weight:700;color:#1a1a1a;min-width:40px;text-align:right}
.admin-prod-stock{font-size:0.5rem;font-weight:600;color:#16a34a;min-width:48px;text-align:right}
.admin-prod-stock.low{color:#d97706}

/* Admin Analytics */
.admin-chart-area{background:white;border:1px solid #e8e4df;border-radius:10px;padding:10px;margin-bottom:8px}
.chart-title{font-size:0.6rem;font-weight:700;color:#1a1a1a;margin-bottom:8px}
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:80px}
.chart-bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.chart-bar{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(to top,#ea580c,#fb923c);height:var(--h);margin-top:auto;transition:height 0.6s ease}
.chart-bar-group span{font-size:0.45rem;color:#999}
.admin-top-products{background:white;border:1px solid #e8e4df;border-radius:10px;padding:10px}
.top-prod{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:0.55rem}
.top-prod span:first-child{min-width:55px;color:#1a1a1a;font-weight:500}
.top-prod span:last-child{min-width:28px;text-align:right;color:#666}
.top-bar{flex:1;height:6px;background:#f5f2ed;border-radius:3px;overflow:hidden}
.top-fill{height:100%;background:linear-gradient(90deg,#ea580c,#fb923c);border-radius:3px;width:var(--w);transition:width 0.8s ease}

/* ===== Tech Marquee ===== */
.tech-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);padding:20px 0}
.marquee-track{display:flex;gap:12px;animation:marquee 30s linear infinite;width:max-content}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tech-chip{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;font-size:0.88rem;font-weight:500;color:var(--text-secondary);white-space:nowrap;flex-shrink:0}
.tc-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}

/* ===== Timeline / Process ===== */
.timeline{max-width:640px;margin:0 auto;position:relative}
.timeline::before{content:'';position:absolute;left:22px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{display:flex;gap:24px;padding:24px 0;position:relative}
.timeline-item::before{content:'';position:absolute;left:16px;top:36px;width:14px;height:14px;border-radius:50%;background:var(--bg-card);border:2px solid var(--primary);z-index:1}
.tl-number{font-family:var(--mono);font-size:0.72rem;font-weight:600;color:var(--primary-light);min-width:48px;padding-left:40px;padding-top:2px}
.tl-content h4{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.tl-content p{font-size:0.88rem;color:var(--text-secondary);line-height:1.6}

/* ===== Contact Form ===== */
.contact-layout{display:grid;grid-template-columns:1.2fr 0.8fr;gap:48px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:0.82rem;font-weight:600;color:var(--text)}
.optional{color:var(--text-muted);font-weight:400}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font);font-size:0.9rem;transition:var(--transition);outline:none}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.15)}
.form-group select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.form-group textarea{resize:vertical;min-height:120px}
.form-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-label{cursor:pointer}
.chip-label input{display:none}
.chip{display:inline-block;padding:8px 16px;border-radius:8px;border:1px solid var(--border);font-size:0.82rem;font-weight:500;color:var(--text-secondary);transition:var(--transition)}
.chip-label input:checked+.chip{background:rgba(37,99,235,0.1);border-color:var(--primary);color:var(--primary-light)}
.chip:hover{border-color:var(--border-light)}
.form-success{display:flex;align-items:center;gap:10px;padding:16px;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);border-radius:10px;color:#22c55e;font-size:0.9rem;font-weight:500}
.form-success.hidden{display:none}

/* Contact Aside */
.contact-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px}
.contact-card-v2{padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition)}
.contact-card-v2:hover{border-color:var(--border-light)}
.cc-icon{width:40px;height:40px;border-radius:10px;background:rgba(37,99,235,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.cc-icon svg{width:20px;height:20px;color:var(--primary-light)}
.cc-label{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:4px}
.cc-value{font-size:0.95rem;font-weight:600;color:var(--text);text-decoration:none}
a.cc-value:hover{color:var(--primary-light)}

/* ===== Footer ===== */
.footer{background:var(--bg);border-top:1px solid var(--border);padding:48px 0 32px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px}
.footer-tagline{font-size:0.88rem;color:var(--text-muted);margin-top:8px}
.footer-links{display:flex;gap:28px}
.footer-links a{text-decoration:none;color:var(--text-muted);font-size:0.88rem;font-weight:500;transition:var(--transition)}
.footer-links a:hover{color:var(--text)}
.footer-mid{display:flex;justify-content:space-between;align-items:center;padding:20px 0;margin-bottom:24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.footer-status{display:flex;align-items:center;gap:8px}
.footer-status-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.5);animation:founderPulse 2s ease-in-out infinite}
.footer-status-text{font-size:0.78rem;color:var(--text-muted);letter-spacing:0.02em}
.footer-built-label{font-size:0.78rem;color:var(--text-muted);font-style:italic;letter-spacing:0.01em}
.footer-bottom{display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-size:0.78rem;color:var(--text-muted)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{text-decoration:none;color:var(--text-muted);font-size:0.8rem;transition:var(--transition)}
.footer-legal a:hover{color:var(--text)}
.footer-sig{display:flex;align-items:center;gap:6px}
.footer-sig-dash{color:var(--text-muted);font-size:0.8rem}
.footer-sig-names{font-size:0.8rem;font-weight:600;background:linear-gradient(135deg,var(--primary),var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== Page Loader ===== */
.page-loader{position:fixed;inset:0;z-index:99999;background:#050507;display:flex;align-items:center;justify-content:center;overflow:hidden}
[data-theme="light"] .page-loader{background:#f8f9fa}
.page-loader.loaded{pointer-events:none;visibility:hidden}
body.loading{overflow:hidden}

/* Exit transition phases */
.page-loader.phase-flash .loader-flash{animation:exitFlash 0.4s ease-out both}
.page-loader.phase-flash .loader-logo-img{animation:exitLogoFlash 0.4s ease-out both}
.page-loader.phase-explode .loader-shockwave{animation:exitShockwave 0.7s cubic-bezier(.2,0,.2,1) both}
.page-loader.phase-explode .loader-ring{animation:exitRingExplode 0.5s ease-in both}
.page-loader.phase-explode .loader-glow{animation:exitGlowBurst 0.5s ease-out both}
.page-loader.phase-zoom .loader-center{animation:exitZoomThrough 0.6s cubic-bezier(.4,0,1,1) both}
.page-loader.phase-zoom .loader-grid{animation:exitGridZoom 0.6s ease-in both}
.page-loader.phase-zoom .loader-particles{animation:exitParticlesBurst 0.5s ease-out both}
.page-loader.phase-reveal{animation:exitCircleReveal 0.7s cubic-bezier(.4,0,.2,1) both}

/* Flash overlay */
.loader-flash{position:absolute;inset:0;z-index:10;background:radial-gradient(circle,rgba(37,99,235,0.8) 0%,rgba(6,182,212,0.4) 30%,transparent 70%);opacity:0;pointer-events:none}
@keyframes exitFlash{0%{opacity:0;transform:scale(0.5)}50%{opacity:1}100%{opacity:0;transform:scale(2)}}
@keyframes exitLogoFlash{0%{filter:brightness(0) invert(1) drop-shadow(0 0 30px rgba(37,99,235,0.3))}50%{filter:brightness(0) invert(1) drop-shadow(0 0 60px rgba(255,255,255,0.8)) brightness(1.5)}100%{filter:brightness(0) invert(1) drop-shadow(0 0 30px rgba(37,99,235,0.3))}}
[data-theme="light"] .page-loader.phase-flash .loader-logo-img{animation:exitLogoFlashLight 0.4s ease-out both}
@keyframes exitLogoFlashLight{0%{filter:drop-shadow(0 0 15px rgba(37,99,235,0.15))}50%{filter:drop-shadow(0 0 60px rgba(37,99,235,0.6)) brightness(1.3)}100%{filter:drop-shadow(0 0 15px rgba(37,99,235,0.15))}}

/* Shockwave ring */
.loader-shockwave{position:absolute;width:80px;height:80px;border-radius:50%;border:2px solid rgba(37,99,235,0.8);opacity:0;pointer-events:none;z-index:5}
@keyframes exitShockwave{0%{transform:scale(1);opacity:0.8;border-width:2px}100%{transform:scale(35);opacity:0;border-width:0.5px}}

/* Ring explodes outward */
@keyframes exitRingExplode{0%{transform:scale(1);opacity:1}100%{transform:scale(2.5);opacity:0}}

/* Glow burst */
@keyframes exitGlowBurst{0%{transform:scale(1);opacity:0.8}100%{transform:scale(3);opacity:0}}

/* Center content zooms through */
@keyframes exitZoomThrough{0%{transform:scale(1) translateZ(0);opacity:1;filter:blur(0)}100%{transform:scale(4);opacity:0;filter:blur(12px)}}

/* Grid zooms */
@keyframes exitGridZoom{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* Particles burst */
@keyframes exitParticlesBurst{0%{transform:scale(1);opacity:1}100%{transform:scale(2);opacity:0}}

/* Final circle reveal wipe */
@keyframes exitCircleReveal{0%{clip-path:circle(100% at 50% 50%)}100%{clip-path:circle(0% at 50% 50%)}}

/* Grid background */
.loader-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:60px 60px;animation:loaderGridFade 1.2s ease-out both}
[data-theme="light"] .loader-grid{background-image:linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px)}
@keyframes loaderGridFade{0%{opacity:0}100%{opacity:1}}

/* Center glow */
.loader-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,0.15) 0%,rgba(6,182,212,0.08) 40%,transparent 70%);animation:loaderGlowPulse 2.5s ease-in-out infinite;filter:blur(40px)}
[data-theme="light"] .loader-glow{background:radial-gradient(circle,rgba(37,99,235,0.1) 0%,rgba(6,182,212,0.05) 40%,transparent 70%)}
@keyframes loaderGlowPulse{0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.15);opacity:1}}

/* Center content */
.loader-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:28px}
.loader-logo-wrap{position:relative;display:flex;align-items:center;justify-content:center}

/* Spinning ring */
.loader-ring{position:absolute;width:440px;height:440px;top:50%;left:50%;margin-top:-220px;margin-left:-220px;border-radius:50%;animation:loaderRingSpin 3s linear infinite}
.loader-ring::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,0.06);animation:loaderRingGrow 0.8s ease-out both}
.loader-ring-fill{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#2563eb;border-right-color:rgba(6,182,212,0.5);filter:drop-shadow(0 0 8px rgba(37,99,235,0.4));animation:loaderRingGrow 0.6s ease-out both}
[data-theme="light"] .loader-ring::before{border-color:rgba(0,0,0,0.08)}
@keyframes loaderRingSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes loaderRingGrow{0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}

/* Logo */
.loader-logo{animation:loaderLogoReveal 0.9s cubic-bezier(.16,1,.3,1) 0.2s both}
.loader-logo-img{width:320px;height:auto;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 0 30px rgba(37,99,235,0.3))}
[data-theme="light"] .loader-logo-img{filter:drop-shadow(0 0 30px rgba(37,99,235,0.15))}
@keyframes loaderLogoReveal{0%{opacity:0;transform:scale(0.7) translateY(10px);filter:blur(8px)}100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}

/* Tagline */
.loader-tagline{font-family:'JetBrains Mono',monospace;font-size:0.82rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.4);animation:loaderTagline 0.8s ease-out 0.5s both}
[data-theme="light"] .loader-tagline{color:rgba(0,0,0,0.35)}
@keyframes loaderTagline{0%{opacity:0;transform:translateY(8px);letter-spacing:0.5em}100%{opacity:1;transform:translateY(0);letter-spacing:0.2em}}

/* Progress bar */
.loader-progress{display:flex;align-items:center;gap:12px;animation:loaderProgressFade 0.5s ease-out 0.7s both}
.loader-progress-track{width:140px;height:2px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden}
[data-theme="light"] .loader-progress-track{background:rgba(0,0,0,0.08)}
.loader-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#2563eb,#06b6d4);border-radius:2px;box-shadow:0 0 12px rgba(37,99,235,0.5);animation:loaderProgressBar 1.3s cubic-bezier(.4,0,.2,1) 0.8s forwards}
.loader-percent{font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:rgba(255,255,255,0.3);min-width:28px;text-align:right}
[data-theme="light"] .loader-percent{color:rgba(0,0,0,0.3)}
@keyframes loaderProgressFade{0%{opacity:0}100%{opacity:1}}
@keyframes loaderProgressBar{0%{width:0}100%{width:100%}}

/* Floating particles */
.loader-particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.loader-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(37,99,235,0.6);animation:loaderParticleFloat linear infinite}
.loader-particle:nth-child(odd){background:rgba(6,182,212,0.5)}
@keyframes loaderParticleFloat{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) scale(0);opacity:0}}

/* ===== Noise/Grain Overlay ===== */
.noise-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0}
.noise-overlay canvas{width:100%;height:100%}
body:not(.loading) .noise-overlay{opacity:0.03}
[data-theme="light"] body:not(.loading) .noise-overlay{opacity:0.02}

/* ===== Cursor Spotlight (Dark Mode only) ===== */
.cursor-spotlight{position:fixed;width:800px;height:800px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(120,160,255,0.07) 0%,rgba(80,130,255,0.035) 30%,transparent 65%);opacity:0;transition:opacity 0.6s;mix-blend-mode:screen}
[data-theme="dark"] body:hover .cursor-spotlight{opacity:1}
[data-theme="light"] .cursor-spotlight{opacity:0!important}

/* ===== Cursor Trail ===== */
.cursor-trail-dot{position:fixed;border-radius:50%;pointer-events:none;z-index:99997;background:var(--primary);will-change:transform,opacity}
@media(pointer:coarse){.cursor-trail-dot,.cursor-spotlight{display:none}}

/* ===== 3D Tilt on Bento Cards ===== */
@media(pointer:fine){
  .bento-card[data-tilt]{transform-style:preserve-3d;will-change:transform}
  .bento-card[data-tilt] .bento-icon,.bento-card[data-tilt] h3{transform:translateZ(20px);transition:transform 0.3s}
  .bento-card[data-tilt] p,.bento-card[data-tilt] .bento-tags{transform:translateZ(10px);transition:transform 0.3s}
}

/* ===== Text Scramble ===== */
.scramble-char{display:inline-block;opacity:0;transition:opacity 0.3s ease}
.scramble-char.revealed{opacity:1}
.scramble-char.glitch{color:var(--accent);opacity:0.6}

/* ===== Counter Section ===== */
.counter-section{padding:80px 0;position:relative;overflow:hidden}
.counter-section::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,99,235,0.04),rgba(6,182,212,0.04),rgba(139,92,246,0.04));z-index:0}
.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;position:relative;z-index:1}
.counter-item{padding:32px 16px}
.counter-num{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:900;letter-spacing:-0.04em;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:4px;font-variant-numeric:tabular-nums}
.counter-suffix{font-size:0.6em}
.counter-label{font-size:0.9rem;color:var(--text-secondary);font-weight:500}
.counter-divider{width:40px;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));margin:10px auto 0;border-radius:1px;opacity:0.4}

/* ===== Testimonials ===== */
.testimonial-track-wrapper{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 5%,black 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 5%,black 95%,transparent)}
.testimonial-track{display:flex;gap:24px;animation:testimonialScroll 45s linear infinite;width:max-content}
.testimonial-track:hover{animation-play-state:paused}
.testimonial-card{width:380px;flex-shrink:0;padding:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);position:relative;transition:var(--transition)}
.testimonial-card:hover{border-color:var(--border-light);transform:translateY(-2px)}
.testimonial-quote{position:absolute;top:14px;right:20px;font-size:2.5rem;color:var(--primary);opacity:0.12;font-family:Georgia,serif;line-height:1}
.testimonial-stars{display:flex;gap:2px;margin-bottom:12px;color:#fbbf24;font-size:0.85rem}
.testimonial-text{font-size:0.92rem;color:var(--text-secondary);line-height:1.7;margin-bottom:20px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.75rem;color:white;flex-shrink:0}
.testimonial-name{font-size:0.85rem;font-weight:700;color:var(--text)}
.testimonial-role{font-size:0.75rem;color:var(--text-muted)}
@keyframes testimonialScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== Founders ===== */
.founder-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:860px;margin:0 auto}
.founder-card{padding:32px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);position:relative;transition:var(--transition)}
.founder-card:hover{border-color:var(--border-light);transform:translateY(-4px)}
.founder-quote{position:absolute;top:14px;right:20px;font-size:2.5rem;color:var(--primary);opacity:0.12;font-family:Georgia,serif;line-height:1}
.founder-motto{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 14px;background:rgba(37,99,235,0.06);border:1px solid rgba(37,99,235,0.12);border-radius:8px}
.founder-motto-icon{font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:0.8rem;font-weight:700;color:var(--primary);opacity:0.7;flex-shrink:0}
.founder-motto-text{font-size:0.85rem;font-weight:600;color:var(--text);font-style:italic;line-height:1.4}
.founder-text{font-size:0.92rem;color:var(--text-secondary);line-height:1.7;margin-bottom:24px}
.founder-author{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.founder-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.78rem;color:white;flex-shrink:0}
.founder-name{font-size:0.9rem;font-weight:700;color:var(--text)}
.founder-role{font-size:0.75rem;color:var(--text-muted)}
.founder-signal{display:flex;align-items:center;gap:8px;padding-top:16px;border-top:1px solid var(--border)}
.founder-signal-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.5);animation:founderPulse 2s ease-in-out infinite}
.founder-signal-label{font-size:0.75rem;color:var(--text-muted);letter-spacing:0.03em}
@keyframes founderPulse{0%,100%{opacity:1;box-shadow:0 0 8px rgba(34,197,94,0.5)}50%{opacity:0.5;box-shadow:0 0 16px rgba(34,197,94,0.8)}}
@media(max-width:768px){.founder-grid{grid-template-columns:1fr;max-width:440px}}

/* ===== FAQ Accordion ===== */
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color 0.3s}
.faq-item:hover{border-color:var(--border-light)}
.faq-item.open{border-color:rgba(37,99,235,0.3)}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;cursor:pointer;font-size:0.95rem;font-weight:600;color:var(--text);background:transparent;border:none;width:100%;text-align:left;font-family:var(--font);transition:color 0.3s}
.faq-question:hover{color:var(--primary-light)}
.faq-icon{width:24px;height:24px;border-radius:6px;background:rgba(37,99,235,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.3s,background 0.3s}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--primary)}
.faq-icon svg{width:12px;height:12px;color:var(--primary)}
.faq-item.open .faq-icon svg{color:white}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1)}
.faq-answer-inner{padding:0 24px 20px;font-size:0.88rem;color:var(--text-secondary);line-height:1.7}

/* ===== Legal Modals ===== */
.legal-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s}
.legal-modal.active{opacity:1;pointer-events:auto}
.legal-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.legal-modal-content{position:relative;width:90%;max-width:680px;max-height:85vh;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;transform:translateY(20px);transition:transform 0.3s}
.legal-modal.active .legal-modal-content{transform:translateY(0)}
.legal-modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.legal-modal-header h2{font-size:1.25rem;font-weight:700;color:var(--text);margin:0}
.legal-modal-close{background:none;border:none;font-size:1.8rem;color:var(--text-muted);cursor:pointer;padding:0 4px;line-height:1;transition:color 0.2s}
.legal-modal-close:hover{color:var(--text)}
.legal-modal-body{padding:24px 28px 32px;overflow-y:auto;color:var(--text-secondary);font-size:0.9rem;line-height:1.75}
.legal-modal-body h3{font-size:1.05rem;font-weight:700;color:var(--text);margin:24px 0 8px}
.legal-modal-body h3:first-child{margin-top:0}
.legal-modal-body h4{font-size:0.95rem;font-weight:600;color:var(--text);margin:16px 0 6px}
.legal-modal-body p{margin:0 0 12px}
.legal-modal-body strong{color:var(--text)}
/* Legal modals mobile - now handled in 768px breakpoint above */

/* ===== Easter Egg Game ===== */
.game-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;pointer-events:none;transition:opacity 0.4s}
.game-overlay.active{opacity:1;pointer-events:auto;cursor:none}
.game-hud{display:flex;justify-content:space-between;width:480px;max-width:90vw;padding:0 0 10px;font-family:var(--mono);font-size:0.8rem;color:rgba(255,255,255,0.7)}
.game-hud span{font-weight:600}
.game-canvas{border-radius:12px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 0 60px rgba(37,99,235,0.2)}
.game-msg{position:absolute;color:white;font-family:var(--font);text-align:center;pointer-events:none}
.game-close{position:absolute;top:20px;right:24px;color:rgba(255,255,255,0.5);font-size:0.8rem;font-family:var(--mono);cursor:pointer;z-index:1}
.game-close:hover{color:white}

/* ===== Animations ===== */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ===== Language & Theme Toggle ===== */

/* Language Segmented Control */
.lang-switch{display:flex;position:relative;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:3px;gap:0}
.lang-slider{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);background:var(--primary);border-radius:9px;transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);z-index:0;box-shadow:0 1px 6px rgba(37,99,235,0.3)}
.lang-switch.en .lang-slider{transform:translateX(100%)}
.lang-opt{position:relative;z-index:1;padding:7px 16px;border:none;background:none;cursor:pointer;font-family:var(--font);font-size:0.8rem;font-weight:700;color:var(--text-muted);transition:color 0.3s;letter-spacing:0.05em}
.lang-opt.active{color:white}

/* Theme Toggle (Animated Track) */
.theme-switch{position:relative;width:52px;height:30px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:30px;cursor:pointer;padding:0;transition:var(--transition);flex-shrink:0}
.theme-switch:hover{border-color:rgba(255,255,255,0.25)}
.switch-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;transition:transform 0.35s cubic-bezier(0.4,0,0.2,1),box-shadow 0.35s;box-shadow:0 1px 6px rgba(37,99,235,0.4)}
[data-theme="dark"] .switch-thumb{transform:translateX(22px);box-shadow:0 1px 8px rgba(37,99,235,0.5)}
.icon-sun,.icon-moon{color:white;display:none}
[data-theme="light"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:block}

/* ===== Light Mode ===== */
[data-theme="light"]{
  --bg:#fafafa;--bg-card:#ffffff;--bg-card-hover:#f4f4f5;
  --surface:#f4f4f5;--surface-2:#e4e4e7;
  --text:#18181b;--text-secondary:#52525b;--text-muted:#71717a;
  --border:#e4e4e7;--border-light:#d4d4d8;
}
[data-theme="light"] body{-webkit-font-smoothing:auto}
[data-theme="light"] .nav{background:rgba(250,250,250,0.8)}
[data-theme="light"] .nav.scrolled{box-shadow:0 1px 3px rgba(0,0,0,0.08)}
[data-theme="light"] .cursor-glow{background:radial-gradient(circle,rgba(37,99,235,0.04) 0%,transparent 70%)}
[data-theme="light"] .hero-eyebrow{background:rgba(37,99,235,0.06);border-color:rgba(37,99,235,0.12);color:var(--text-secondary)}
[data-theme="light"] .btn-glass{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:var(--text)}
[data-theme="light"] .btn-glass:hover{background:rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.15)}
[data-theme="light"] .hero-orb{opacity:0.12}
[data-theme="light"] .section-dark{background:#f4f4f5}
[data-theme="light"] .bento-card{background:var(--bg-card);box-shadow:0 1px 3px rgba(0,0,0,0.06)}
[data-theme="light"] .bento-glow{background:radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(37,99,235,0.04),transparent 60%)}
[data-theme="light"] .bento-tags span{background:rgba(0,0,0,0.04)}
[data-theme="light"] .demo-step:hover{background:rgba(0,0,0,0.02)}
[data-theme="light"] .demo-step.active{background:rgba(37,99,235,0.06)}
[data-theme="light"] .tech-chip{background:var(--bg-card);box-shadow:0 1px 2px rgba(0,0,0,0.05)}
[data-theme="light"] .lang-switch{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1)}
[data-theme="light"] .lang-opt{color:var(--text-muted)}
[data-theme="light"] .lang-opt.active{color:white}
[data-theme="light"] .theme-switch{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1)}
[data-theme="light"] .theme-switch:hover{border-color:rgba(0,0,0,0.2)}
[data-theme="light"] .footer{background:#f4f4f5}
[data-theme="light"] .contact-card-v2{box-shadow:0 1px 3px rgba(0,0,0,0.06)}
[data-theme="light"] .form-group input,[data-theme="light"] .form-group textarea,[data-theme="light"] .form-group select{background:#f9fafb}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .bento-grid{grid-template-columns:1fr 1fr}
  .bento-large{grid-column:span 2}
  .demo-container{grid-template-columns:1fr;gap:32px}
  .phone-mockup,.browser-mockup{order:-1}
  .contact-layout{grid-template-columns:1fr}
  .contact-aside{position:static;flex-direction:row;flex-wrap:wrap}
  .contact-card-v2{flex:1;min-width:200px}
}

/* ===== Mobile (phones) ===== */
@media(max-width:768px){
  /* Container — full width with breathing room */
  .container{padding:0 20px}

  /* Nav */
  .nav{z-index:1001}
  .nav-container{height:60px;padding:0 16px}
  .nav-logo-img{height:48px}
  .nav-links{display:flex;position:absolute;top:60px;left:0;right:0;background:rgba(9,9,11,0.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);flex-direction:column;padding:0 24px;gap:0;border-bottom:1px solid var(--border);max-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease,transform 0.3s ease,padding 0.4s ease}
  [data-theme="light"] .nav-links{background:rgba(250,250,250,0.97)}
  .nav-links.open{max-height:400px;opacity:1;transform:translateY(0);padding:12px 24px 20px}
  .nav-links a{padding:16px 0;font-size:1rem;border-bottom:1px solid var(--border);width:100%;text-align:center;opacity:0;transform:translateY(-6px);transition:opacity 0.25s ease,transform 0.25s ease,color 0.2s}
  .nav-links.open a{opacity:1;transform:translateY(0)}
  .nav-links.open a:nth-child(1){transition-delay:0.06s}
  .nav-links.open a:nth-child(2){transition-delay:0.1s}
  .nav-links.open a:nth-child(3){transition-delay:0.14s}
  .nav-links.open a:nth-child(4){transition-delay:0.18s}
  .nav-links.open a:nth-child(5){transition-delay:0.22s}
  .nav-cta{margin-top:12px;border-bottom:none!important;width:100%!important;display:block!important;text-align:center;padding:14px 20px!important}
  .nav-toggle{display:flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;z-index:1002}
  .nav-toggle span{transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.2s}
  .nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  .nav-controls{margin-left:auto;margin-right:4px;gap:8px}
  .lang-opt{padding:6px 12px;font-size:0.75rem}
  .theme-switch{width:44px;height:26px}
  .switch-thumb{width:18px;height:18px}
  [data-theme="dark"] .switch-thumb{transform:translateX(18px)}
  .nav-links a.active:not(.nav-cta)::after{display:none}

  /* Hero — edge-to-edge feel on mobile */
  .hero{min-height:calc(100vh - 60px);min-height:calc(100svh - 60px);padding-top:60px;display:flex;align-items:center}
  .hero .container{padding:0 24px}
  .hero-content{padding:0 0 48px;max-width:100%}
  .hero h1{font-size:clamp(2.4rem,9vw,3.5rem);margin-bottom:20px;letter-spacing:-0.03em;line-height:1.15}
  .hero-eyebrow{margin-bottom:28px;font-size:0.82rem}
  .hero-sub{font-size:1.08rem;margin-bottom:36px;line-height:1.7;max-width:100%}
  .hero-actions{flex-direction:column;gap:12px;margin-bottom:40px}
  .btn{width:100%;justify-content:center;padding:16px 24px;font-size:0.95rem}
  .hero-badges{gap:12px;flex-wrap:wrap}
  .hero-badge-item{font-size:0.88rem}
  .hero-orb{filter:blur(80px);opacity:0.15}
  .hero-orb-1{width:280px;height:280px;top:-15%;left:-20%}
  .hero-orb-2{width:220px;height:220px;bottom:5%;right:-15%}
  .hero-orb-3{width:160px;height:160px}
  .hero-scroll{display:none}

  /* Sections — generous vertical spacing */
  .section{padding:72px 0}
  .section-header{margin-bottom:40px}
  .section-header h2{font-size:clamp(1.6rem,6vw,2.2rem)}
  .section-header p{font-size:0.95rem;max-width:100%}
  .section-tag{font-size:0.72rem}

  /* Bento — single column, cards fill width */
  .bento-grid{grid-template-columns:1fr;gap:12px}
  .bento-large{grid-column:span 1}
  .bento-card{padding:24px 20px}
  .bento-card h3{font-size:1.05rem}
  .bento-card p{font-size:0.85rem}

  /* Demo — stacked layout */
  .demo-projects{flex-direction:column;align-items:stretch;gap:8px}
  .demo-project{padding:14px 20px}
  .demo-tabs{flex-direction:column;align-items:stretch;gap:6px}
  .demo-tab{justify-content:center;padding:14px 20px}
  .demo-info{gap:8px}
  .demo-step{padding:14px 16px;gap:12px}
  .demo-step h4{font-size:0.92rem}
  .demo-step p{font-size:0.82rem}
  .phone-mockup{margin:0 auto}
  .browser-mockup{margin:0 auto}
  .browser-screen{height:280px}
  .admin-screen{transform:scale(0.58);transform-origin:top left;width:172.4%;height:172.4%}

  /* Counter — 2x2 grid, big and bold */
  .counter-section{padding:56px 0}
  .counter-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .counter-item{padding:24px 16px}
  .counter-num{font-size:clamp(2rem,6vw,2.8rem)}
  .counter-label{font-size:0.88rem}

  /* Testimonials */
  .testimonial-card{width:300px;padding:22px}

  /* Founders — single column */
  .founder-grid{max-width:100%}
  .founder-card{padding:28px 22px}
  .founder-motto{padding:12px 16px}
  .founder-motto-text{font-size:0.88rem}
  .founder-text{font-size:0.9rem;margin-bottom:22px;line-height:1.7}
  .founder-avatar{width:44px;height:44px;font-size:0.78rem}
  .founder-name{font-size:0.92rem}

  /* Timeline — compact but readable */
  .timeline{padding-left:0}
  .timeline::before{left:18px}
  .timeline-item{gap:16px;padding:20px 0}
  .timeline-item::before{left:12px;top:32px;width:12px;height:12px}
  .tl-number{min-width:44px;padding-left:36px;font-size:0.7rem}
  .tl-content h4{font-size:1rem}
  .tl-content p{font-size:0.88rem}

  /* FAQ — full width, tappable */
  .faq-list{gap:10px}
  .faq-question{padding:16px 20px;font-size:0.92rem}
  .faq-answer-inner{padding:0 20px 18px;font-size:0.88rem}

  /* Contact — full width form */
  .form-row{grid-template-columns:1fr}
  .form-group{gap:8px}
  .form-group label{font-size:0.88rem}
  .form-group input,.form-group textarea,.form-group select{padding:16px;font-size:1rem;border-radius:12px}
  .form-group textarea{min-height:140px}
  .form-chips{gap:8px}
  .chip{padding:12px 16px;font-size:0.85rem;border-radius:10px}
  .contact-card-v2{padding:22px}
  .cc-label{font-size:0.75rem}
  .cc-value{font-size:1rem}

  /* Footer — clean stack */
  .footer{padding:48px 0 28px}
  .footer-top{flex-direction:column;gap:24px;align-items:center;text-align:center}
  .footer-tagline{font-size:0.88rem}
  .footer-links{flex-wrap:wrap;gap:12px 24px;justify-content:center}
  .footer-links a{font-size:0.88rem}
  .footer-mid{flex-direction:column;gap:12px;text-align:center;padding:20px 0;margin-bottom:24px}
  .footer-status-text{font-size:0.82rem}
  .footer-built-label{font-size:0.82rem}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center}
  .footer-copy{font-size:0.82rem}
  .footer-legal{gap:24px;justify-content:center}
  .footer-legal a{font-size:0.85rem}
  .footer-sig-dash,.footer-sig-names{font-size:0.85rem}

  /* Back to Top */
  .back-to-top{bottom:20px;right:16px;width:44px;height:44px}

  /* Loader — mobile scaled */
  .loader-center{gap:20px}
  .loader-logo-wrap{width:240px;height:240px}
  .loader-logo-img{width:160px}
  .loader-ring{width:240px;height:240px;margin-top:-120px;margin-left:-120px}
  .loader-tagline{font-size:0.68rem;letter-spacing:0.1em}
  .loader-progress-track{width:120px}
  .loader-glow{width:260px;height:260px}

  /* Legal Modals — almost full screen */
  .legal-modal-content{width:96%;max-height:92vh;border-radius:14px}
  .legal-modal-header{padding:20px 20px 14px}
  .legal-modal-header h2{font-size:1.15rem}
  .legal-modal-body{padding:20px 20px 28px;font-size:0.88rem;line-height:1.7}
  .legal-modal-body h3{font-size:1rem;margin:20px 0 8px}
  .legal-modal-body h4{font-size:0.92rem;margin:14px 0 6px}
}

/* ===== Small phones (iPhone SE, older iPhones) ===== */
@media(max-width:390px){
  .container{padding:0 16px}
  .hero h1{font-size:2rem}
  .hero-sub{font-size:0.95rem}
  .section-header h2{font-size:1.5rem}
  .phone-frame{width:230px;height:480px}
  .browser-screen{height:220px}
  .admin-sidebar{width:70px}
  .counter-item{padding:20px 12px}
  .counter-num{font-size:1.8rem}
  .counter-label{font-size:0.82rem}
  .founder-card{padding:22px 18px}
  .founder-motto-text{font-size:0.82rem}
  .founder-text{font-size:0.85rem}
  .faq-question{padding:14px 16px;font-size:0.88rem}
  .faq-answer-inner{padding:0 16px 16px;font-size:0.82rem}
  .chip{padding:10px 14px;font-size:0.8rem}
  .form-group input,.form-group textarea,.form-group select{padding:14px;font-size:1rem}
  .testimonial-card{width:280px;padding:20px}
  .tl-content h4{font-size:0.92rem}
  .tl-content p{font-size:0.82rem}
  .loader-logo-wrap{width:200px;height:200px}
  .loader-logo-img{width:130px}
  .loader-ring{width:200px;height:200px;margin-top:-100px;margin-left:-100px}
}

/* ===== Extra small (iPhone SE 1st gen, 320px) ===== */
@media(max-width:360px){
  .container{padding:0 14px}
  .hero h1{font-size:1.75rem}
  .hero-sub{font-size:0.88rem}
  .hero-eyebrow{font-size:0.7rem}
  .section-header h2{font-size:1.35rem}
  .section-header p{font-size:0.85rem}
  .counter-num{font-size:1.6rem}
  .counter-label{font-size:0.78rem}
  .phone-frame{width:210px;height:440px}
  .founder-card{padding:18px 14px}
  .btn{padding:14px 20px;font-size:0.88rem}
  .nav-logo-img{height:40px}
  .nav-container{height:56px}
  .lang-opt{padding:4px 8px;font-size:0.68rem}
  .loader-logo-wrap{width:170px;height:170px}
  .loader-logo-img{width:110px}
  .loader-ring{width:170px;height:170px;margin-top:-85px;margin-left:-85px}
  .loader-tagline{font-size:0.58rem}
}

/* ===== Touch target safety ===== */
@media(pointer:coarse){
  .faq-question{min-height:48px}
  .chip-label .chip{min-height:44px;display:inline-flex;align-items:center}
  .footer-links a,.footer-legal a{min-height:44px;display:inline-flex;align-items:center}
  .nav-links a{min-height:48px;display:flex;align-items:center;justify-content:center}
  .demo-project{min-height:48px}
  .demo-tab{min-height:48px}
  .demo-step{min-height:48px}
}

/* ===== Prevent horizontal overflow ===== */
@media(max-width:768px){
  .hero-orb-1,.hero-orb-2,.hero-orb-3{will-change:auto}
  body{overflow-x:hidden}
  .hero{overflow:hidden}
  .counter-section{overflow:hidden}
  .section{overflow:hidden}
}