:root{--accent:#4F46E5;--accent-h:#4338CA;--a-light:#EEF2FF;--a-dim:#818CF8;--green:#10B981;--ease:cubic-bezier(.4,0,.2,1);}
[data-theme="light"]{--bg:#F9FAFB;--bg-2:#F3F4F6;--bg-3:#E5E7EB;--surface:#FFFFFF;--ink:#111827;--ink-2:#374151;--muted:#6B7280;--border:#E5E7EB;--shadow:0 4px 24px rgba(0,0,0,.07);--shadow-lg:0 16px 56px rgba(0,0,0,.13);}
[data-theme="dark"]{--bg:#09090B;--bg-2:#18181B;--bg-3:#27272A;--surface:#18181B;--ink:#FAFAFA;--ink-2:#A1A1AA;--muted:#71717A;--border:#27272A;--shadow:0 4px 24px rgba(0,0,0,.3);--shadow-lg:0 16px 56px rgba(0,0,0,.55);}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--ink);font-family:'Inter', sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 48px;}
@media(max-width:768px){.container{padding:0 20px;}}

/* TOPBAR */
.tb{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--ink);padding:10px 0;}
[data-theme="dark"] .tb{background:var(--bg-2);border-bottom:1px solid var(--border);}
.tb-i{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tb-left{display:flex;align-items:center;gap:12px;}
.tb-mark{width:26px;height:26px;border-radius:5px;background:var(--accent);display:flex;align-items:center;justify-content:center;}
.tb-name{font-family:'Outfit', sans-serif;font-size:15px;color:#fff;}
[data-theme="dark"] .tb-name{color:var(--ink);}
.tb-name span{opacity:.5;}
.tb-sep{width:1px;height:16px;background:rgba(255,255,255,.2);}
[data-theme="dark"] .tb-sep{background:var(--border);}
.tb-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);}
[data-theme="dark"] .tb-label{color:var(--muted);}
.tb-badge{padding:3px 10px;background:rgba(16,185,129,.2);border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#34D399;}
.tb-right{display:flex;align-items:center;gap:8px;}
.tb-device{width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;border:1px solid transparent;}
[data-theme="dark"] .tb-device{background:var(--bg-3);}
.tb-device.active{background:var(--accent);border-color:var(--accent);}
.tb-device svg{width:14px;height:14px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;}
.tb-device.active svg{stroke:#fff;}
.tb-back{display:flex;align-items:center;gap:6px;padding:7px 13px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border-radius:6px;font-size:12px;font-weight:600;transition:background .2s;}
[data-theme="dark"] .tb-back{background:var(--bg-3);color:var(--muted);}
.tb-back:hover{background:rgba(255,255,255,.2);color:#fff;}
.tb-back svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}

/* VIEWPORT */
.vp-wrap{margin-top:50px;padding:20px;background:var(--bg-3);min-height:calc(100vh - 50px);display:flex;align-items:flex-start;justify-content:center;transition:background .3s;}
.vp{width:100%;max-width:1200px;background:var(--surface);box-shadow:var(--shadow-lg);transition:all .4s var(--ease);border-radius:2px;overflow:hidden;}
.vp.mobile{max-width:390px;border-radius:12px;}

/* SITE HEADER */
.s-nav{background:#fff;border-bottom:1px solid #E5E7EB;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;}
.s-nav-logo{display:flex;align-items:center;gap:10px;}
.s-mark{width:30px;height:30px;border-radius:6px;background:#4F46E5;display:flex;align-items:center;justify-content:center;}
.s-word{font-family:'Outfit', sans-serif;font-size:18px;letter-spacing:-.3px;color:#111827;}
.s-word span{color:#4F46E5;}
.s-links{display:flex;gap:4px;}
.s-lnk{padding:6px 12px;font-size:13px;font-weight:500;color:#6b7280;border-radius:5px;cursor:pointer;transition:color .15s,background .15s;}
.s-lnk:hover{color:#111827;background:#F3F4F6;}
.s-cta{padding:8px 18px;background:#4F46E5;color:#fff;border-radius:5px;font-size:13px;font-weight:600;}

/* PAGE CONTENT */
.s-page{display:none;}
.s-page.active{display:block;}

/* HOME */
.home-hero{background:linear-gradient(135deg,#f8f8f5 0%,#EEF2FF 100%);padding:72px 40px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
.hh-title{font-family:'Outfit', sans-serif;font-size:48px;letter-spacing:-2.5px;line-height:1.05;color:#111827;margin-bottom:12px;}
.hh-title em{font-style:italic;color:#4F46E5;}
.hh-sub{font-size:15px;color:#6b7280;line-height:1.75;max-width:440px;margin-bottom:28px;}
.hh-btns{display:flex;gap:10px;}
.hh-btn{padding:11px 22px;border-radius:6px;font-size:14px;font-weight:600;}
.hh-btn.p{background:#4F46E5;color:#fff;}
.hh-btn.s{border:1.5px solid #E5E7EB;color:#374151;}
.hh-stats{display:flex;flex-direction:column;gap:3px;}
.hs{background:#fff;border:1px solid #E5E7EB;padding:18px 22px;text-align:right;}
.hs-n{font-family:'Outfit', sans-serif;font-size:28px;color:#111827;}
.hs-n span{color:#4F46E5;}
.hs-l{font-size:11px;color:#6b7280;margin-top:2px;}
.home-about{padding:56px 40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;border-bottom:1px solid #E5E7EB;}
.ha-title{font-family:'Outfit', sans-serif;font-size:30px;letter-spacing:-1px;color:#111827;margin-bottom:10px;}
.ha-sub{font-size:14px;color:#6b7280;line-height:1.8;}
.ha-cards{display:flex;flex-direction:column;gap:3px;}
.ha-card{padding:14px 16px;background:#F3F4F6;border-left:3px solid transparent;transition:border-color .15s;}
.ha-card:hover{border-left-color:#4F46E5;}
.ha-ct{font-size:13px;font-weight:600;margin-bottom:3px;}
.ha-cd{font-size:12px;color:#6b7280;}
.home-svc{padding:56px 40px;}
.hs-title{font-family:'Outfit', sans-serif;font-size:30px;letter-spacing:-1px;color:#111827;margin-bottom:6px;}
.hs-sub{font-size:13px;color:#6b7280;margin-bottom:28px;}
.svc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
.svc-c{padding:24px 20px;background:#F3F4F6;border-top:2px solid transparent;transition:all .15s;cursor:pointer;}
.svc-c:hover{background:#fff;border-top-color:#4F46E5;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08);}
.svc-cn{font-family:'Outfit', sans-serif;font-size:16px;margin-bottom:6px;color:#111827;}
.svc-cd{font-size:12px;color:#6b7280;line-height:1.6;}
.home-footer{background:#111827;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;}
.hf-name{font-family:'Outfit', sans-serif;font-size:16px;color:#fff;}
.hf-name span{color:#818CF8;}
.hf-copy{font-size:12px;color:rgba(255,255,255,.2);}

/* ABOUT PAGE */
.about-page{padding:56px 40px;}
.ap-hero{background:#EEF2FF;padding:48px;border-radius:2px;margin-bottom:32px;}
.ap-ht{font-family:'Outfit', sans-serif;font-size:38px;letter-spacing:-1.5px;color:#111827;margin-bottom:10px;}
.ap-hs{font-size:15px;color:#6b7280;line-height:1.75;max-width:500px;}
.ap-cards{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.ap-card{padding:28px 24px;background:#F3F4F6;}
.ap-cn{font-size:14px;font-weight:600;margin-bottom:7px;color:#111827;}
.ap-cd{font-size:13px;color:#6b7280;line-height:1.65;}

/* CONTACT PAGE */
.contact-page{padding:56px 40px;max-width:600px;margin:0 auto;}
.cp-title{font-family:'Outfit', sans-serif;font-size:36px;letter-spacing:-1.5px;color:#111827;margin-bottom:8px;}
.cp-sub{font-size:14px;color:#6b7280;margin-bottom:32px;}
.cp-form{display:flex;flex-direction:column;gap:14px;}
.cp-field{display:flex;flex-direction:column;gap:6px;}
.cp-label{font-size:12px;font-weight:600;color:#374151;}
.cp-input{padding:11px 14px;background:#F3F4F6;border:1.5px solid #E5E7EB;border-radius:6px;font-size:14px;font-family:'Inter', sans-serif;color:#111827;outline:none;transition:border-color .15s;}
.cp-input:focus{border-color:#4F46E5;}
.cp-ta{resize:vertical;min-height:120px;}
.cp-submit{padding:13px;background:#4F46E5;color:#fff;border-radius:6px;font-size:14px;font-weight:600;text-align:center;cursor:pointer;transition:background .15s;}
.cp-submit:hover{background:#4338CA;}

/* MOBILE ADJUSTMENTS */
.vp.mobile .s-links,.vp.mobile .hh-stats{display:none;}
.vp.mobile .s-nav{padding:12px 20px;}
.vp.mobile .home-hero{padding:40px 20px;grid-template-columns:1fr;}
.vp.mobile .home-about{padding:32px 20px;grid-template-columns:1fr;gap:24px;}
.vp.mobile .home-svc{padding:32px 20px;}
.vp.mobile .svc-row{grid-template-columns:1fr;}
.vp.mobile .about-page,.vp.mobile .contact-page{padding:32px 20px;}
.vp.mobile .ap-cards{grid-template-columns:1fr;}
.vp.mobile .hh-title{font-size:32px;}
.vp.mobile .home-footer{padding:20px;}

@media(max-width:600px){
  .vp-wrap{padding:10px;}
  .tb-i{padding:0 16px;}
  .tb-label{display:none;}
  .tb-sep{display:none;}
}
/* --- GLOBAL DEMO UX OVERHAUL --- */
.tb {
  position: fixed !important;
  top: 16px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important; max-width: 1000px !important;
  background: rgba(17,24,39,0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 100px !important;
  padding: 12px 24px !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.3) !important;
  z-index: 9999 !important;
  transition: all 0.3s ease !important;
}
[data-theme="dark"] .tb {
  background: rgba(24,24,27,0.85) !important;
  border-color: rgba(255,255,255,0.05) !important;
}
.tb-left { gap: 16px !important; }
.tb-label { font-size: 13px !important; font-weight: 700 !important; color: #fff !important; }
.tb-badge { background: #10B981 !important; color: #fff !important; padding: 6px 14px !important; border-radius: 100px !important; font-size: 11px !important; font-weight: 700 !important; }
.tb-back {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: #fff !important;
  transition: all 0.2s !important;
}
.tb-back:hover { background: #fff !important; color: #000 !important; transform: scale(1.05) !important; }
.main-wrap, .vp-wrap { margin-top: 80px !important; height: calc(100vh - 80px) !important; }
@media(max-width: 600px) {
  .tb { top: 12px !important; padding: 10px 16px !important; border-radius: 24px !important; width: calc(100% - 24px) !important; }
  .tb-label { display: none !important; }
}

/* WEBSITE DEMO UX OVERHAUL */
.home-hero { padding: 120px 40px !important; background: var(--surface) !important; text-align: center !important; position: relative !important; overflow: hidden !important; }
.hh-title { font-size: clamp(48px, 6vw, 80px) !important; font-weight: 800 !important; letter-spacing: -2px !important; line-height: 1.1 !important; margin-bottom: 24px !important; }
.hh-sub { font-size: 20px !important; line-height: 1.6 !important; max-width: 600px !important; margin: 0 auto 40px !important; }
.hh-cta { background: var(--ink) !important; color: var(--bg) !important; border-radius: 100px !important; padding: 18px 40px !important; font-size: 16px !important; font-weight: 700 !important; display: inline-block !important; transition: transform 0.2s !important; }
.hh-cta:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important; }
.home-products { padding: 80px 40px !important; background: var(--bg-2) !important; }
.hp-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 32px !important; }
.hp-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 24px !important; padding: 32px !important; transition: transform 0.3s !important; text-align: center !important; }
.hp-card:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.05) !important; }
.hp-thumb { height: 200px !important; background: var(--bg) !important; border-radius: 16px !important; margin-bottom: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 64px !important; }
.hp-name { font-size: 20px !important; font-weight: 700 !important; margin-bottom: 8px !important; }
.hp-price { font-size: 18px !important; font-weight: 800 !important; color: var(--accent) !important; margin-bottom: 24px !important; }
.hp-btn { width: 100% !important; background: var(--bg-2) !important; color: var(--ink) !important; padding: 12px !important; border-radius: 100px !important; font-weight: 600 !important; border: 1px solid var(--border) !important; transition: all 0.2s !important; }
.hp-btn:hover { background: var(--ink) !important; color: var(--bg) !important; }