@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap";.hero-section{width:100vw;margin-left:calc(50% - 50vw);position:relative;overflow:hidden}.hero-section .grain-overlay{pointer-events:none;z-index:1;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px;position:absolute;inset:0}.page-enter{animation:fadeInUp .5s var(--ease-out) both}.product-card{transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);transform-style:preserve-3d;perspective:1000px}.product-card:hover{box-shadow:var(--shadow-brutal-lg);transform:translateY(-4px)rotateX(2deg)rotateY(-2deg)}.filter-pill{font-size:.85rem;font-weight:700;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.5px;border:var(--border-thick);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background:#fff;padding:8px 20px;position:relative;overflow:hidden}.filter-pill:hover{box-shadow:var(--shadow-brutal-hover);transform:translate(2px,2px)}.filter-pill.active{background:var(--text-main);color:#fff;box-shadow:var(--shadow-brutal-active);transform:translate(5px,5px)}.progress-track{border:2px solid var(--text-main);background:#0000001a;height:6px;position:relative;overflow:hidden}.progress-fill{background:var(--accent-3);height:100%;transition:width var(--duration-slow) var(--ease-out)}.step-dot{border:var(--border-thick);width:36px;height:36px;font-size:.85rem;font-weight:800;font-family:var(--font-heading);transition:all var(--duration-normal) var(--ease-out);background:#fff;justify-content:center;align-items:center;display:flex;position:relative}.step-dot.active{background:var(--accent-3);box-shadow:var(--shadow-brutal);transform:scale(1.15)}.step-dot.completed{background:var(--accent-6);color:#fff}.step-connector{height:3px;transition:background var(--duration-normal);background:#00000026;flex:1}.step-connector.filled{background:var(--accent-3)}.editor-layout{border:var(--border-thick);background:#fff;height:calc(100vh - 140px);display:flex;overflow:hidden}.editor-sidebar{border-right:var(--border-thick);background:#fafaf8;flex-direction:column;width:260px;display:flex;overflow:hidden}.editor-sidebar-header{border-bottom:var(--border-medium);background:#fff;padding:16px}.editor-sidebar-content{flex:1;padding:12px;overflow-y:auto}.editor-canvas-area{background:var(--bg-color);background-image:radial-gradient(circle,#0000000f 1px,#0000 1px);background-size:20px 20px;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:auto}.editor-properties{border-left:var(--border-thick);background:#fafaf8;flex-direction:column;width:280px;display:flex;overflow:hidden}.editor-properties-header{border-bottom:var(--border-medium);background:#fff;padding:16px}.editor-properties-content{flex:1;padding:16px;overflow-y:auto}.editor-toolbar{border:var(--border-thick);background:#fff;border-bottom:none;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;display:flex}.toolbar-group{border-right:var(--border-thin);align-items:center;gap:4px;padding:0 8px;display:flex}.toolbar-group:last-child{border-right:none}.toolbar-btn{cursor:pointer;width:34px;height:34px;transition:all var(--duration-fast);background:0 0;border:2px solid #0000;justify-content:center;align-items:center;font-size:.85rem;display:flex}.toolbar-btn:hover{background:var(--accent-2);border-color:var(--text-main)}.toolbar-btn:active{transform:scale(.95)}.toolbar-btn.active{background:var(--accent-3);border-color:var(--text-main)}.toolbar-btn:disabled{opacity:.3;cursor:not-allowed}.sidebar-module-item{border:var(--border-thick);cursor:grab;font-size:.85rem;font-weight:700;font-family:var(--font-heading);transition:all var(--duration-fast) var(--ease-out);text-transform:uppercase;letter-spacing:.3px;background:#fff;align-items:center;gap:10px;margin-bottom:8px;padding:10px 14px;display:flex;box-shadow:3px 3px #111}.sidebar-module-item:hover{background:var(--accent-2);transform:translate(2px,2px);box-shadow:1px 1px #111}.sidebar-module-item:active{cursor:grabbing;transform:translate(3px,3px);box-shadow:0 0 #111}.sidebar-module-item .module-icon{justify-content:center;align-items:center;width:24px;height:24px;font-size:1rem;display:flex}.prop-section{margin-bottom:16px}.prop-section-header{border-bottom:var(--border-medium);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:800;font-family:var(--font-heading);color:var(--text-muted);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:8px 0;display:flex}.prop-section-header:hover{color:var(--text-main)}.prop-section-body{padding:12px 0}.prop-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.prop-label{color:var(--text-muted);font-size:.8rem;font-weight:600}.page-tab{font-size:.8rem;font-weight:700;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.5px;border:var(--border-thick);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background:#fff;padding:8px 20px;position:relative}.page-tab.active{background:var(--text-main);color:#fff;box-shadow:var(--shadow-brutal)}.page-tab:not(.active):hover{background:var(--accent-2)}.align-guide{background:var(--accent-1);z-index:50;pointer-events:none;opacity:.6;position:absolute}.align-guide.horizontal{width:100%;height:1px;left:0}.align-guide.vertical{width:1px;height:100%;top:0}.layer-item{cursor:pointer;transition:all var(--duration-fast);border:2px solid #0000;align-items:center;gap:8px;padding:8px 10px;font-size:.8rem;font-weight:600;display:flex}.layer-item:hover{background:#00000008}.layer-item.selected{border-color:var(--accent-3);background:#00cecb14}.flipbook-container{perspective:1200px;justify-content:center;display:flex}.flipbook-page{background:var(--bg-color);width:300px;height:420px;box-shadow:var(--shadow-brutal);border-radius:var(--border-radius-sm);transition:transform .6s var(--ease-out);transform-origin:0;backface-visibility:hidden;border:1px solid #fff6}.flipbook-page.flipped{transform:rotateY(-180deg)}.checkout-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-soft);border-radius:var(--border-radius);background:#ffffff40;border:1px solid #ffffff2e;padding:32px}.checkout-divider{border:none;border-top:2px dashed #0003;margin:16px 0}.stat-counter{text-align:center;animation:fadeInUp .6s var(--ease-out) both}.stat-counter .stat-value{font-size:3.5rem;font-weight:900;font-family:var(--font-heading);margin-bottom:4px;line-height:1}.stat-counter .stat-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-size:.85rem;font-weight:700}.trust-badge{text-transform:uppercase;background:var(--bg-color);letter-spacing:.5px;border:1px solid #fff3;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:.75rem;font-weight:700;display:inline-flex;box-shadow:inset 3px 3px 6px #a3b1c680,inset -3px -3px 6px #ffffff80}:root{--bg-color:#e0e5ec;--bg-dark:#2d3142;--text-main:#2b2b2b;--text-muted:#6b6b6b;--text-light:#999;--accent-1:#ff7675;--accent-1-light:#ff9a99;--accent-2:#ffeaa7;--accent-2-light:#fff3c4;--accent-3:#81ecec;--accent-3-light:#a3f3f3;--accent-4:#a29bfe;--accent-4-light:#c2beff;--accent-5:#fab1a0;--accent-6:#55efc4;--font-heading:"Space Grotesk", "Inter", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--border-thick:1px solid #fff6;--border-medium:1px solid #fff3;--border-thin:1px solid #ffffff1a;--border-radius:20px;--border-radius-sm:10px;--border-radius-lg:30px;--shadow-brutal:9px 9px 16px #a3b1c699, -9px -9px 16px #ffffff80;--shadow-brutal-hover:12px 12px 20px #a3b1c6b3, -12px -12px 20px #fff9;--shadow-brutal-active:inset 6px 6px 10px #a3b1c699, inset -6px -6px 10px #ffffff80;--shadow-brutal-lg:15px 15px 30px #a3b1c699, -15px -15px 30px #ffffff80;--shadow-soft:0 8px 32px 0 #1f26871a;--shadow-glow-teal:0 0 30px #00cecb4d;--shadow-glow-purple:0 0 30px #8b68f54d;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s;--z-canvas:1;--z-modules:10;--z-toolbar:100;--z-modal:500;--z-popup:600;--z-toast:700}*,:before,:after{box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px;position:fixed;inset:0}::selection{background:var(--accent-2);color:var(--text-main)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{border:2px solid var(--bg-color);background:#ccc}::-webkit-scrollbar-thumb:hover{background:#aaa}.nb-button{background-color:var(--bg-color);box-shadow:var(--shadow-brutal);font-size:1rem;font-weight:700;font-family:var(--font-heading);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);text-transform:uppercase;letter-spacing:.5px;border-radius:var(--border-radius-sm);color:var(--accent-4);border:none;padding:12px 24px;position:relative;overflow:hidden}.nb-button:hover{box-shadow:var(--shadow-brutal-hover);transform:translateY(-2px)}.nb-button:active{box-shadow:var(--shadow-brutal-active);transform:translateY(0)}.nb-button .ripple{pointer-events:none;background:#ffffff80;border-radius:50%;animation:.5s ease-out forwards rippleExpand;position:absolute;transform:scale(0)}.nb-card{background-color:var(--bg-color);box-shadow:var(--shadow-brutal);border-radius:var(--border-radius);transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);border:1px solid #fff6;padding:24px;position:relative}.nb-card.hoverable:hover{box-shadow:var(--shadow-brutal-lg);transform:translateY(-4px)}.glass-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-soft);border-radius:var(--border-radius);background:#ffffff40;border:1px solid #ffffff2e}.nb-card.layered:after{content:"";border:var(--border-thick);z-index:-1;background:var(--bg-color);pointer-events:none;position:absolute;inset:-2px;transform:translate(10px,10px)}.nb-input{background-color:var(--bg-color);font-size:1rem;font-family:var(--font-body);transition:all var(--duration-fast) var(--ease-out);box-sizing:border-box;border-radius:var(--border-radius-sm);border:none;width:100%;padding:12px 16px;box-shadow:inset 5px 5px 10px #a3b1c680,inset -5px -5px 10px #ffffff80}.nb-input:focus{outline:none;box-shadow:inset 8px 8px 15px #a3b1c699,inset -8px -8px 15px #fff9}.nb-input::placeholder{color:var(--text-light);font-weight:500}.nb-title{text-transform:uppercase;font-size:3rem;font-weight:900;font-family:var(--font-heading);letter-spacing:-1px;margin-bottom:1rem;line-height:1.1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes pulseRing{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes rippleExpand{to{opacity:0;transform:scale(4)}}@keyframes progressFill{0%{width:0%}}@keyframes countUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes typeReveal{0%{width:0}to{width:100%}}@keyframes borderDash{to{stroke-dashoffset:0}}.animate-in{animation:fadeInUp .6s var(--ease-out) both}.animate-fade{animation:fadeIn .5s var(--ease-out) both}.animate-scale{animation:scaleIn .4s var(--ease-bounce) both}.animate-bounce{animation:bounceIn .5s var(--ease-bounce) both}.animate-float{animation:3s ease-in-out infinite float}.animate-pulse{animation:2s ease-in-out infinite pulse}.animate-shimmer{background:linear-gradient(90deg,#0000 0%,#fff6 50%,#0000 100%) 0 0/200% 100%;animation:2s linear infinite shimmer}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.stagger-4{animation-delay:.4s}.stagger-5{animation-delay:.5s}.stagger-6{animation-delay:.6s}.stagger-7{animation-delay:.7s}.stagger-8{animation-delay:.8s}.flex-center{justify-content:center;align-items:center;display:flex}.w-full{width:100%}.grain-bg{position:relative}.grain-bg:after{content:"";pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px 200px;position:absolute;inset:0}.glass-panel{-webkit-backdrop-filter:blur(12px);background:#ffffffb3;border:1px solid #ffffff4d}.section-full{width:100vw;margin-left:calc(50% - 50vw);padding:5rem 2rem}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.badge{text-transform:uppercase;letter-spacing:.5px;border:2px solid var(--text-main);background:var(--accent-2);font-size:.75rem;font-weight:700;font-family:var(--font-heading);align-items:center;gap:4px;padding:4px 10px;display:inline-flex}.tooltip{position:relative}.tooltip:after{content:attr(data-tip);background:var(--text-main);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast), transform var(--duration-fast);border:2px solid var(--text-main);padding:6px 12px;font-size:.75rem;font-weight:600;position:absolute;bottom:100%;left:50%;transform:translate(-50%)translateY(-4px)}.tooltip:hover:after{opacity:1;transform:translate(-50%)translateY(-8px)}.separator{background:var(--text-main);width:100%;height:3px;margin:3rem 0}@media (width<=768px){.editor-layout{flex-direction:column!important;position:relative!important}.editor-sidebar,.editor-properties{z-index:50!important;background:#fff!important;border:none!important;height:100%!important;max-height:none!important;transition:transform .3s!important;position:absolute!important;top:0!important;box-shadow:10px 0 20px #0000001a!important}.editor-properties{right:0!important;box-shadow:-10px 0 20px #0000001a!important}.canvas-wrapper{flex:1;padding:10px;overflow:auto}.section-full{padding:3rem 1rem!important}.container{padding:0 1rem!important}.nb-title{font-size:2.5rem!important}}.marquee-container{background:var(--accent-3);width:100vw;color:var(--text-main);border-top:var(--border-thick);border-bottom:var(--border-thick);white-space:nowrap;z-index:10;margin-left:calc(50% - 50vw);padding:1rem 0;display:flex;overflow:hidden;box-shadow:0 10px #000}.marquee-content{min-width:100%;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:2px;flex-shrink:0;font-size:2rem;font-weight:900;animation:20s linear infinite marquee;display:flex}.marquee-content span{margin:0 2rem}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}.bento-grid{grid-template-columns:repeat(12,1fr);gap:1.5rem;width:100%;max-width:1200px;margin:0 auto;display:grid}.bento-item{border:var(--border-thick);border-radius:var(--border-radius);box-shadow:var(--shadow-brutal);transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);padding:2.5rem;position:relative;overflow:hidden}.bento-item:hover{transform:translate(-4px,-4px);box-shadow:12px 12px #000}.bento-span-4{grid-column:span 4}.bento-span-8{grid-column:span 8}.bento-span-6{grid-column:span 6}.bento-span-12{grid-column:span 12}@media (width<=900px){.bento-span-4,.bento-span-8,.bento-span-6{grid-column:span 12}}.nb-sticker{font-family:var(--font-heading);text-transform:uppercase;border:var(--border-thick);background:var(--accent-2);color:var(--text-main);transition:transform var(--duration-fast);justify-content:center;align-items:center;padding:.5rem 1rem;font-size:1rem;font-weight:900;display:inline-flex;transform:rotate(-2deg);box-shadow:4px 4px #000}.nb-sticker:hover{transform:rotate(2deg)scale(1.05)}.nb-sticker.pink{background:var(--accent-1);color:#fff}.nb-sticker.lime{background:var(--accent-3)}.nb-sticker.cyan{background:var(--accent-4);color:#fff}
