@font-face{font-family:'Phudu';src:url('https://kth-electric.com/wp-content/fonts/DT-Phudu/DTPhudu-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Ganh';src:url('https://kth-electric.com/wp-content/fonts/Ganh/Ganh%20Type-Regular.otf') format('opentype');font-weight:400;font-display:swap}
:root{--void:#060810;--space:#0a0e1a;--nebula:#0f1628;--surface:rgba(255,255,255,.08);--glass:rgba(255,255,255,.10);--glass2:rgba(255,255,255,.06);--border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.12);--text:#f0f2ff;--text-dim:rgba(240,242,255,.65);--text-ghost:rgba(240,242,255,.35);--cyan:#00e5ff;--cyan-dim:rgba(0,229,255,.18);--violet:#7c4dff;--violet-dim:rgba(124,77,255,.18);--rose:#ff4081;--rose-dim:rgba(255,64,129,.12);--amber:#ffab40;--green:#69ff47;--green-dim:rgba(105,255,71,.12);--r:16px;--r-lg:24px;--font:'Ganh','Outfit',sans-serif;--font-head:'Phudu','Outfit',sans-serif;--mono:'Space Mono',monospace;--ease:cubic-bezier(.16,1,.3,1);--blur:blur(20px) saturate(1.4);--shadow:0 4px 24px rgba(0,0,0,.35);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--glow-cyan:0 0 24px rgba(0,229,255,.2);--glow-violet:0 0 24px rgba(124,77,255,.2)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--void);color:var(--text);min-height:100vh;overflow-x:hidden}
button{cursor:pointer;font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-head)}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ═══ ANIMATED BACKGROUND ═══ */
#bg-scene{position:fixed;inset:0;z-index:0;overflow:hidden}
#bg-scene::before{content:'';position:absolute;inset:-60%;background:radial-gradient(ellipse 80% 60% at 20% 30%,rgba(124,77,255,.22) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 70%,rgba(0,229,255,.18) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 50% 100%,rgba(255,64,129,.10) 0%,transparent 50%);animation:nebula-drift 16s ease-in-out infinite alternate}
#bg-scene::after{content:'';position:absolute;inset:-30%;background:radial-gradient(circle 400px at 60% 20%,rgba(0,229,255,.08),transparent),radial-gradient(circle 300px at 30% 80%,rgba(124,77,255,.10),transparent);animation:aurora-shift 12s ease-in-out infinite alternate-reverse}
@keyframes nebula-drift{0%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(3%,4%) scale(1.05) rotate(1deg)}66%{transform:translate(-3%,1%) scale(.96) rotate(-1deg)}100%{transform:translate(2%,-3%) scale(1.03) rotate(0.5deg)}}
@keyframes aurora-shift{0%{transform:translate(0,0) rotate(0deg);opacity:.6}50%{transform:translate(-5%,3%) rotate(2deg);opacity:1}100%{transform:translate(3%,-2%) rotate(-1deg);opacity:.7}}

/* Floating particles */
.bg-particle{position:fixed;border-radius:50%;pointer-events:none;z-index:1;animation:float-particle linear infinite;opacity:0}
@keyframes float-particle{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10vh) scale(1);opacity:0}}

#grain{position:fixed;inset:0;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;opacity:.35}
#app{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}

/* ═══ HEADER ═══ */
header{padding:16px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:none;background:rgba(6,8,16,.35);backdrop-filter:var(--blur);box-shadow:0 1px 0 var(--border)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--violet),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 0 16px rgba(124,77,255,.4)}
.logo-text{font-family:var(--font-head);font-size:1.1rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.logo-text span{color:var(--cyan)}
.kth-back{font-size:.72rem;padding:5px 12px;border-radius:6px;border:none;background:var(--glass);color:var(--text-dim);text-decoration:none;display:flex;align-items:center;gap:5px;transition:all .2s}
.kth-back:hover{color:var(--text);background:var(--cyan-dim);text-decoration:none}

/* ═══ HERO (old/fallback) ═══ */
.hero{text-align:center;padding:48px 20px 32px}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:12px;background:linear-gradient(135deg,#fff 30%,var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:var(--text-dim);font-size:1rem;max-width:600px;margin:0 auto 20px}
.hero-badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--glass);border:none;border-radius:50px;padding:6px 16px;font-size:.75rem;font-weight:600;color:var(--text-dim)}
.hero-badge i{color:var(--cyan)}

/* ═══ LAYOUT ═══ */
.container{max-width:1100px;margin:0 auto;padding:0 20px;width:100%}
.glass-panel{background:rgba(12,16,30,.55);border:none;border-radius:var(--r-lg);backdrop-filter:var(--blur);box-shadow:var(--shadow);padding:28px;margin-bottom:28px;transition:box-shadow .3s}
.glass-panel:hover{box-shadow:var(--shadow-lg),var(--glow-cyan)}

/* ═══ UPLOAD ═══ */
.upload-area{border:2px dashed rgba(255,255,255,.15);border-radius:var(--r-lg);padding:50px 20px;text-align:center;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.upload-area:hover,.upload-area.dragover{border-color:var(--cyan);background:var(--cyan-dim);box-shadow:var(--glow-cyan)}
.upload-icon{font-size:3.5rem;margin-bottom:12px;display:block}
.upload-title{font-size:1.1rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.upload-sub{font-size:.8rem;color:var(--text-ghost)}
.upload-btn{margin-top:14px;padding:10px 28px;border-radius:50px;border:none;background:linear-gradient(135deg,var(--violet),var(--cyan));color:#fff;font-family:var(--font-head);font-size:.95rem;font-weight:700;transition:all .2s;box-shadow:0 4px 16px rgba(0,229,255,.25)}
.upload-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,229,255,.35)}

/* ═══ MODE STRIP ═══ */
.mode-strip{display:flex;gap:4px;background:var(--glass2);border:none;border-radius:12px;padding:4px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}
.mode-pill{padding:8px 18px;border-radius:9px;border:none;background:transparent;color:var(--text-dim);font-size:.78rem;font-weight:600;letter-spacing:.04em;transition:all .2s;white-space:nowrap}
.mode-pill.active{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#fff;box-shadow:0 2px 12px rgba(124,77,255,.35)}
.mode-pill:hover:not(.active){color:var(--text);background:var(--glass)}

/* ═══ CONTROLS ═══ */
.controls-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.ctrl-group{display:flex;flex-direction:column;gap:6px}
.ctrl-label{font-size:.7rem;color:var(--text-ghost);letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-head);display:flex;justify-content:space-between}
.ctrl-label .val{color:var(--cyan);font-family:var(--mono)}
.ctrl-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;outline:none;background:linear-gradient(to right,var(--cyan) 0%,var(--cyan) var(--pct,50%),rgba(255,255,255,.1) var(--pct,50%),rgba(255,255,255,.1) 100%);cursor:pointer}
.ctrl-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(0,229,255,.4);transition:transform .15s}
.ctrl-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}
.btn-process{width:100%;padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--violet),var(--cyan));color:#fff;font-family:var(--font-head);font-size:1.1rem;font-weight:700;letter-spacing:.04em;transition:all .25s;box-shadow:0 4px 20px rgba(0,229,255,.25);position:relative;overflow:hidden}
.btn-process::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15),transparent);transform:translateX(-100%);transition:transform .6s}
.btn-process:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,229,255,.4)}
.btn-process:hover::before{transform:translateX(100%)}
.btn-process:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ═══ TOOLBAR ═══ */
.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;background:var(--glass2);border:none;border-radius:12px;padding:8px 12px;margin-bottom:12px;flex-wrap:wrap;gap:10px}
.tb-group{display:flex;align-items:center;gap:6px}
.tb-btn{background:transparent;border:none;color:var(--text-dim);font-size:.9rem;padding:6px 10px;border-radius:6px;transition:all .2s;display:flex;align-items:center;gap:6px}
.tb-btn:hover{background:var(--glass);color:var(--text)}
.tb-btn.active{background:var(--cyan-dim);color:var(--cyan)}
.tb-val{font-family:var(--mono);font-size:.8rem;color:var(--cyan);min-width:45px;text-align:center}
.brush-settings{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);padding:4px 10px;border-radius:20px;border:none}

/* ═══ COMPARE ═══ */
.compare-wrap{position:relative;width:100%;overflow:hidden;border-radius:var(--r);background:#000;touch-action:none;user-select:none;aspect-ratio:auto;cursor:crosshair}
.compare-wrap.panning{cursor:grab}
.compare-wrap.panning:active{cursor:grabbing}
.compare-wrap img,.compare-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.compare-after{clip-path:inset(0 0 0 50%)}
.compare-slider{position:absolute;top:0;bottom:0;width:3px;background:var(--cyan);cursor:ew-resize;z-index:5;left:50%;box-shadow:0 0 8px rgba(0,229,255,.4);pointer-events:auto}
.compare-slider::after{content:'⟷';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--cyan);color:var(--void);padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:700;white-space:nowrap}
.compare-label{position:absolute;top:10px;padding:4px 12px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;border-radius:6px;font-weight:600;z-index:4;font-family:var(--font-head);letter-spacing:.08em}
.compare-label.before{left:10px}.compare-label.after{right:10px}

/* ═══ RESULTS ═══ */
.result-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.btn-dl{padding:10px 24px;border-radius:10px;border:none;background:var(--glass);color:var(--text);font-size:.85rem;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:6px}
.btn-dl:hover{color:var(--cyan);background:var(--cyan-dim);box-shadow:var(--glow-cyan)}
.btn-dl.primary{background:linear-gradient(135deg,var(--violet),var(--cyan));border:none;color:#fff}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.stat-card{background:var(--glass);border:none;border-radius:10px;padding:12px;text-align:center;transition:box-shadow .3s}
.stat-card:hover{box-shadow:var(--glow-cyan)}
.stat-num{font-family:var(--mono);font-size:1.2rem;font-weight:700;color:var(--cyan)}
.stat-lbl{font-size:.6rem;color:var(--text-ghost);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;font-family:var(--font-head)}
.progress-bar{width:100%;height:4px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin:12px 0}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .3s;border-radius:4px}
.hidden{display:none!important}

/* ═══ SEO PANEL (legacy) ═══ */
.seo-panel{margin-top:40px}
.seo-toggle{width:100%;padding:14px 20px;border-radius:var(--r);border:none;background:var(--glass2);color:var(--text);font-family:var(--font-head);font-size:1rem;font-weight:700;text-align:left;display:flex;justify-content:space-between;align-items:center;transition:all .2s}
.seo-toggle:hover{background:var(--glass)}
.seo-body{background:rgba(10,14,26,.4);border:none;border-radius:0 0 var(--r) var(--r);padding:28px;line-height:1.8;font-size:.9rem;color:var(--text-dim);max-height:0;overflow:hidden;transition:max-height .4s ease}
.seo-body.open{max-height:5000px}
.seo-body h2{color:var(--text);font-size:1.3rem;margin:20px 0 10px}
.seo-body h3{color:var(--cyan);font-size:1rem;margin:16px 0 8px}
.seo-body p{margin-bottom:10px}
.seo-body ul{padding-left:20px;margin-bottom:10px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:20px 0}
.tool-link{padding:12px;border-radius:10px;border:none;background:var(--glass);text-decoration:none;color:var(--text-dim);font-size:.82rem;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:8px}
.tool-link:hover{color:var(--text);text-decoration:none;transform:translateY(-2px);background:var(--cyan-dim)}
footer{padding:16px 32px;text-align:center;border-top:none;background:rgba(6,8,16,.4);backdrop-filter:var(--blur);font-size:.7rem;color:var(--text-ghost);box-shadow:0 -1px 0 var(--border)}
footer a{color:var(--cyan)}

/* ═══════════════════════════════════════════
   LANDING PAGE LAYOUT
   ═══════════════════════════════════════════ */
.landing-hero{margin-bottom:60px;text-align:left;padding:20px 0}
.landing-title{font-size:clamp(2rem,4vw,3rem);font-weight:700;margin-bottom:15px;background:linear-gradient(135deg,#fff 20%,var(--cyan) 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}
.landing-desc{color:var(--text-dim);font-size:1.1rem;margin-bottom:30px;max-width:600px;line-height:1.7}
.landing-split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}

/* Demo compare card */
.landing-demo{background:rgba(12,16,30,.55);border:none;border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:box-shadow .4s}
.landing-demo:hover{box-shadow:var(--shadow-lg),var(--glow-cyan)}
.demo-compare{position:relative;flex:1;min-height:280px;border-radius:12px;overflow:hidden;margin-bottom:15px;cursor:col-resize}
.demo-compare::after{content:'← kéo →';position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:var(--cyan);padding:4px 14px;border-radius:20px;font-size:.7rem;font-weight:600;z-index:2;pointer-events:none;animation:pulse-hint 2s ease-in-out infinite}
@keyframes pulse-hint{0%,100%{opacity:.6}50%{opacity:1}}
.demo-img{width:100%;height:100%;object-fit:cover}
.demo-after{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);border-left:2px solid var(--cyan);transition:clip-path .05s}
.demo-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.d-mode{background:var(--glass);border:none;border-radius:8px;padding:10px 5px;text-align:center;font-size:.85rem;font-weight:600;color:var(--text-dim);cursor:pointer;transition:all .25s}
.d-mode:hover,.d-mode.active{background:var(--cyan-dim);color:var(--cyan);box-shadow:var(--glow-cyan)}
.d-mode i{display:block;margin-bottom:5px;font-size:1.2rem}

/* ═══ SEO BLOCKS ═══ */
.seo-block{padding:50px 0;border-top:none}
.seo-block h2{font-size:2rem;color:var(--text);line-height:1.3}
.tool-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.tool-pills .mode-pill{text-decoration:none;padding:10px 20px;border:none;background:var(--glass);transition:all .25s}
.tool-pills .mode-pill:hover{color:var(--cyan);background:var(--cyan-dim);box-shadow:var(--glow-cyan)}

/* Features Grid */
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f-card{background:rgba(12,16,30,.45);border:none;border-radius:16px;padding:28px;position:relative;overflow:hidden;transition:all .35s}
.f-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--glow-cyan)}
.f-num{position:absolute;top:10px;right:20px;font-size:80px;font-weight:800;color:rgba(255,255,255,.04);line-height:1;pointer-events:none}
.f-card h3{font-size:1.3rem;margin-bottom:12px;color:var(--cyan)}
.f-card p{color:var(--text-dim);line-height:1.7;font-size:.95rem}

/* Tabs */
.tabs-layout{display:flex;flex-direction:column;gap:20px;margin-top:30px}
.tabs-menu{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.tabs-menu::-webkit-scrollbar{display:none}
.tab-btn{background:var(--glass);border:none;border-radius:20px;padding:10px 24px;cursor:pointer;white-space:nowrap;color:var(--text-dim);font-weight:600;transition:all .25s}
.tab-btn.active,.tab-btn:hover{background:var(--cyan);color:var(--void);box-shadow:0 0 16px rgba(0,229,255,.3)}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:15px;margin-top:30px}
.faq-item{background:rgba(12,16,30,.45);border:none;border-radius:12px;padding:20px;cursor:pointer;transition:all .25s}
.faq-item:hover{background:rgba(12,16,30,.65);box-shadow:var(--glow-cyan)}
.faq-item summary{font-size:1.1rem;font-weight:600;color:var(--text);outline:none;display:flex;justify-content:space-between;align-items:center;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"▼";font-size:.8rem;color:var(--cyan);transition:transform .3s}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item p{margin-top:15px;color:var(--text-dim);line-height:1.7;border-top:none;padding-top:10px}

/* Step & Review cards */
.step-card{transition:transform .3s,box-shadow .3s}
.step-card:hover{transform:translateY(-6px);box-shadow:var(--glow-violet)}
.scroll-card{transition:border-color .3s,box-shadow .3s}
.scroll-card:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan)}

/* ═══ FADE-IN ANIMATION ═══ */
.fade-in-hidden{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.fade-in-visible{opacity:1;transform:translateY(0)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
header{padding:12px 16px;flex-wrap:wrap;gap:8px}
.hero{padding:32px 16px 20px}
.controls-grid{grid-template-columns:repeat(2,1fr)}
.stats-row{grid-template-columns:repeat(2,1fr)}
.container{padding:0 12px}
.glass-panel{padding:16px;margin-bottom:16px}
footer{padding:12px 16px}
.canvas-toolbar{flex-direction:column;align-items:flex-start}
.landing-split{grid-template-columns:1fr}
.features-grid{grid-template-columns:1fr}
.seo-block[style*="display:flex"]{flex-direction:column!important}
.sticky-left{position:static!important}
.steps-grid{grid-template-columns:1fr!important}
.reviews-grid{grid-template-columns:1fr!important}
.tabs-content .tab-pane{flex-direction:column!important}
.tabs-content .tab-pane img{max-width:100%!important}
.demo-modes{grid-template-columns:repeat(2,1fr)}
}