:root{--color-bg: #0a0a0a;--color-surface: #121212;--color-primary: #eab308;--color-primary-hover: #ca8a04;--color-text: #ffffff;--color-text-muted: #a3a3a3;--font-main: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);background-image:url(/charcoal-hero-bg.png);background-size:cover;background-attachment:fixed;background-position:center;color:var(--color-text);font-family:var(--font-main);line-height:1.6;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit;transition:.2s}.container{max-width:1280px;margin:0 auto;padding:0 24px}.text-gradient{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.1)}.navbar{position:fixed;top:0;width:100%;padding:24px 0;background:#0a0a0ae6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.05);z-index:1000}.nav-container{display:flex;justify-content:space-between;align-items:center}.logo{font-weight:800;font-size:1.4rem;letter-spacing:1px;text-transform:uppercase;color:#fff;border-left:3px solid var(--color-primary);padding-left:12px}.nav-links{display:flex;gap:40px}.nav-links a{color:var(--color-text-muted);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.nav-links a:hover{color:var(--color-primary)}.cta-btn.small{background:transparent;border:1px solid var(--color-primary);padding:8px 24px;color:var(--color-primary);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.cta-btn.small:hover{background:var(--color-primary);color:#000}.hero-section{padding-top:200px;padding-bottom:120px;text-align:center;display:flex;flex-direction:column;align-items:center}.pill-badge{display:inline-flex;align-items:center;gap:12px;background:#eab3081a;border-left:2px solid var(--color-primary);color:var(--color-primary);padding:8px 20px;font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:32px}.pill-badge .dot{display:none}.hero-content h1{font-size:5rem;font-weight:700;line-height:1;margin-bottom:32px;letter-spacing:-.03em;text-transform:uppercase}.subtitle{font-size:1.1rem;color:var(--color-text-muted);max-width:500px;margin:0 auto 48px;border-left:1px solid var(--color-primary);padding-left:20px;text-align:left}.hero-actions{display:flex;justify-content:center;gap:24px}.primary-btn{background:var(--color-primary);border:none;padding:18px 50px;text-align:center;color:#000;font-weight:800;font-size:.9rem;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s;clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px)}.primary-btn:hover{background:#fff;transform:translateY(-2px)}.secondary-btn{background:transparent;border:1px solid rgba(255,255,255,.2);padding:18px 50px;text-align:center;color:#fff;font-weight:800;font-size:.9rem;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s;clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px)}.secondary-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.features-section{padding:120px 0;background:#0003}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:40px}.feature-card{background:var(--color-surface);border:none;border-left:2px solid rgba(255,255,255,.1);padding:40px;transition:.3s}.feature-card:hover{border-left-color:var(--color-primary);background:#1a1a1a}.card-icon{font-size:1.5rem;margin-bottom:24px;color:var(--color-primary)}.feature-card h3{font-size:1.25rem;margin-bottom:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px}.feature-card p{color:var(--color-text-muted);font-size:.95rem;line-height:1.7}footer{border-top:1px solid rgba(255,255,255,.05);padding:60px 0;text-align:center;color:var(--color-text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:1px}.logo{border-left:none;padding-left:0}.nav-logo-img{height:40px;width:auto;object-fit:contain}.product-showcase{margin-top:60px;width:100%;max-width:1000px;margin-left:auto;margin-right:auto;position:relative;z-index:10}.product-showcase-img{width:100%;height:auto;border-radius:12px 12px 0 0;box-shadow:0 -20px 50px #00000080;-webkit-mask-image:linear-gradient(to bottom,black 40%,transparent 90%);mask-image:linear-gradient(to bottom,black 40%,transparent 90%)}.overlap-top{margin-top:-150px;position:relative;z-index:20;padding-top:0}.showcase-section{padding:80px 0;background:#0000004d}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;max-width:900px;margin:0 auto}.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;box-shadow:0 10px 30px #00000080;border:1px solid rgba(255,255,255,.1);transition:.3s}.video-wrapper:hover{border-color:var(--color-primary);transform:translateY(-2px)}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}.filter-header{text-align:center;margin-bottom:20px;color:var(--color-text-muted);font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.toggle-link{background:none;border:none;color:var(--color-primary);font-weight:700;cursor:pointer;text-decoration:underline;font-size:inherit;font-family:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;margin-left:5px}.toggle-link:hover{color:#fff}.filter-controls{display:flex;justify-content:center;gap:15px;margin-bottom:40px;flex-wrap:wrap}.filter-controls.hidden{display:none}.filter-btn{background:var(--color-surface);color:var(--color-text-dim);border:1px solid rgba(255,255,255,.1);padding:10px 24px;border-radius:30px;cursor:pointer;font-weight:600;transition:all .3s ease}.filter-btn:hover,.filter-btn.active{background:var(--color-primary);color:var(--color-bg);border-color:var(--color-primary);box-shadow:0 4px 15px #ffd7004d}.feature-card{transition:all .4s ease}.feature-card.hidden{display:none}.card-action{display:inline-block;margin-top:15px;font-size:.9rem;color:var(--color-primary);font-weight:600;transition:transform .3s ease}.feature-card:hover .card-action{transform:translate(5px)}.dropdown{position:relative;display:inline-block}.dropbtn{background-color:transparent;color:var(--color-text);padding:0;font-size:1rem;border:none;cursor:pointer;font-family:inherit;font-weight:500;transition:color .3s}.dropdown:hover .dropbtn,.dropbtn:hover{color:var(--color-primary)}.dropdown-content{display:none;position:absolute;background-color:var(--color-surface);min-width:160px;box-shadow:0 8px 16px #0003;z-index:1000;border-radius:8px;border:1px solid rgba(255,255,255,.1);padding:10px 0;top:100%;left:50%;transform:translate(-50%)}.dropdown:hover .dropdown-content{display:block}.dropdown-header{padding:8px 16px;font-size:.85rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.5px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:5px}.dropdown-header:not(:first-child){margin-top:10px;border-top:1px solid rgba(255,255,255,.05);padding-top:12px}.dropdown-content a{color:var(--color-text);padding:8px 16px;text-decoration:none;display:block;font-size:.95rem;transition:background .2s}.dropdown-content a:hover{background-color:#ffd7001a;color:var(--color-primary)}#page-loader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-bg);z-index:9999;display:flex;justify-content:center;align-items:center;transition:opacity .5s ease,visibility .5s ease}#page-loader.hidden{opacity:0;visibility:hidden}.spinner{width:50px;height:50px;border:4px solid var(--color-surface);border-top:4px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.navbar{padding:15px 0}.nav-container{flex-direction:row;justify-content:space-between;align-items:center;position:relative}.hamburger{display:flex;flex-direction:column;justify-content:space-between;width:30px;height:21px;cursor:pointer;z-index:1001}.hamburger span{display:block;width:100%;height:3px;background-color:var(--color-primary);border-radius:3px;transition:all .3s ease}.hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}.nav-links{position:fixed;top:70px;right:-100%;width:100%;height:calc(100vh - 70px);background-color:#0a0a0afa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;justify-content:start;align-items:center;padding-top:60px;gap:30px;transition:right .4s ease;border-top:1px solid rgba(255,255,255,.05)}.nav-links.active{right:0}.nav-links a{font-size:1.2rem}.nav-actions{display:none}.hero-section{padding-top:140px;padding-bottom:60px}.hero-content h1{font-size:2.5rem;margin-bottom:20px}.subtitle{font-size:1rem;padding-left:0;border-left:none;text-align:center;margin-bottom:30px}.hero-actions{flex-direction:column;width:100%;gap:15px}.primary-btn,.secondary-btn{width:100%;padding:15px 20px}.features-grid{grid-template-columns:1fr;padding:0 10px}.feature-card{padding:25px}.overlap-top{margin-top:0}.product-showcase{margin-top:40px}}.hamburger{display:none}@media(max-width:768px){.hamburger{display:flex}}.guide-wrapper{padding-top:120px;min-height:100vh;margin-bottom:60px}.guide-layout{display:flex;gap:60px;position:relative}.guide-sidebar{width:280px;flex-shrink:0;display:none}@media(min-width:992px){.guide-sidebar{display:block}}.sidebar-sticky{position:sticky;top:120px;background:var(--color-surface);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:24px}.guide-sidebar h3{font-size:1.1rem;margin-bottom:20px;color:var(--color-primary);text-transform:uppercase;letter-spacing:1px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.1)}.guide-nav{list-style:none}.guide-nav li{margin-bottom:12px}.guide-nav a{display:block;color:var(--color-text-muted);font-size:.9rem;padding:8px 12px;border-radius:6px;transition:all .2s}.guide-nav a:hover,.guide-nav a.active{color:#fff;background:#ffffff0d;padding-left:18px}.guide-nav a.active{border-left:3px solid var(--color-primary);background:linear-gradient(90deg,rgba(234,179,8,.1) 0%,transparent 100%)}.guide-content{flex:1;max-width:800px}.content-header{margin-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:40px}.content-header h1{font-size:3rem;margin-bottom:16px;line-height:1.1}.guide-intro{font-size:1.2rem;color:var(--color-text-muted)}.guide-section{margin-bottom:80px;scroll-margin-top:140px}.guide-section h2{font-size:2rem;color:var(--color-primary);margin-bottom:24px;display:flex;align-items:center;gap:15px}.guide-section h2:before{content:"";display:block;width:8px;height:32px;background:var(--color-primary);border-radius:2px}.guide-section p{font-size:1.05rem;color:#ccc;margin-bottom:20px;line-height:1.8}.step-card{background:var(--color-surface);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:30px;margin-bottom:30px}.step-card h3{margin-bottom:15px;font-size:1.2rem}.file-name{display:inline-block;background:#0000004d;padding:8px 16px;border-radius:6px;font-family:Consolas,monospace;color:var(--color-primary);border:1px dashed rgba(255,255,255,.2);margin-bottom:15px}.guide-steps{counter-reset:step-counter;list-style:none}.guide-steps>li{position:relative;padding-left:50px;margin-bottom:24px}.guide-steps>li:before{counter-increment:step-counter;content:counter(step-counter);position:absolute;left:0;top:0;width:32px;height:32px;background:var(--color-surface);border:1px solid var(--color-primary);color:var(--color-primary);border-radius:50%;text-align:center;line-height:32px;font-weight:700;font-size:.9rem}.guide-steps strong{color:#fff}.code-block{background:#000;padding:15px;border-radius:6px;border-left:3px solid var(--color-primary);font-family:Consolas,monospace;margin-top:10px;color:#e0e0e0}.alert-box{background:#eab3080d;border:1px solid rgba(234,179,8,.2);padding:20px;border-left:4px solid var(--color-primary);border-radius:6px;margin-top:24px}.alert-box.warning{background:#ef44441a;border-color:#ef444433;border-left-color:#ef4444}.alert-box.warning strong{color:#ef4444}.guide-image{margin-top:30px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#000}.guide-image img{width:100%;height:auto;display:block}@media(max-width:991px){.guide-layout{flex-direction:column}.content-header h1{font-size:2.5rem}}