:root{--purple:#6247f5;--teal:#08bec7;--coral:#ff6878;--paper:#fbfaff;--ink:#202344;--muted:#73778f;--line:#e8e6f2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Inter,system-ui,Arial,sans-serif;overflow-x:hidden}
a{color:inherit}button,input,textarea,select{font:inherit}
body:before{content:"";position:fixed;z-index:-2;inset:-20%;pointer-events:none;background:radial-gradient(ellipse at 12% 18%,#08bec71c,transparent 34%),radial-gradient(ellipse at 86% 22%,#6247f51c,transparent 34%),radial-gradient(ellipse at 60% 88%,#ff68781a,transparent 38%);animation:ambient 25s ease-in-out infinite alternate}
body:after{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(#6247f50b 1px,transparent 1px),linear-gradient(90deg,#08bec70b 1px,transparent 1px);background-size:55px 55px;animation:grid 30s linear infinite}
.top{background:linear-gradient(100deg,#202344,#6044c9,#078f9a,#202344);background-size:250% 100%;color:white;text-align:center;padding:8px 12px;font-size:12px;animation:topglow 18s ease infinite}
header{position:sticky;top:0;z-index:20;background:#ffffffeb;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav{max-width:1200px;margin:auto;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{text-decoration:none;font-weight:950;display:flex;align-items:center;gap:10px}.logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:white;font-size:21px;background:linear-gradient(135deg,var(--purple),var(--teal));animation:logo 7s ease infinite}
.navlinks{display:flex;gap:5px;flex-wrap:wrap}.navlinks a{padding:9px 12px;border-radius:10px;text-decoration:none;font-size:13px;font-weight:850}.navlinks a:hover,.navlinks .active{background:#6247f51a;color:var(--purple)}.navlinks .cta{background:var(--purple);color:white}
main{width:min(1200px,calc(100% - 40px));margin:auto;padding:32px 0 58px}
h1{font-size:clamp(38px,5.2vw,64px);line-height:1.04;letter-spacing:-1.8px;margin:14px 0 16px}h2{font-size:clamp(27px,3.2vw,39px);line-height:1.1;margin:0}h3{line-height:1.25}
.kicker{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:950;color:var(--purple)}
.lead{font-size:17px;color:var(--muted);max-width:700px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:0;border-radius:12px;text-decoration:none;font-weight:900;color:white;background:linear-gradient(100deg,var(--purple),#8b69ff,var(--teal));background-size:200% 100%;box-shadow:0 9px 22px #6247f52e;cursor:pointer;animation:btnflow 12s ease infinite;transition:transform .18s}.btn:hover{transform:translateY(-2px)}.btn.coral{background:var(--coral);animation:none}.btn.light{background:white;color:var(--purple);animation:none;box-shadow:none}.btn.outline{background:transparent;color:var(--purple);border:1px solid var(--line);animation:none;box-shadow:none}
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;padding:clamp(28px,5vw,60px);display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;color:white;background:linear-gradient(115deg,var(--purple),#7d55ef 52%,var(--teal));box-shadow:0 18px 50px #4439a51b;animation:rise .8s ease both}
.hero:before,.hero:after{content:"";position:absolute;z-index:-1;border-radius:50%;background:#ffffff20}.hero:before{width:390px;height:390px;right:-100px;top:-210px}.hero:after{width:250px;height:250px;right:24%;bottom:-180px}
.hero .kicker{color:white;background:#ffffff27;border:1px solid #ffffff45;border-radius:30px;padding:7px 12px}.hero .lead{color:#f4f1ff}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.hero-panel{background:#ffffff20;border:1px solid #ffffff45;border-radius:22px;padding:22px;backdrop-filter:blur(10px);animation:float 8s ease-in-out infinite}
.hero-panel h3{margin:0 0 12px}.hero-row{padding:11px 0;border-top:1px solid #ffffff40;display:flex;align-items:center;gap:11px;font-size:14px}
.icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#ffffff30;font-size:18px}
.page-banner{padding:36px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(110deg,#6247f51a,#08bec71b);position:relative;overflow:hidden;animation:breathe 14s ease-in-out infinite alternate}
.page-banner:after{content:"";position:absolute;width:260px;height:260px;right:-60px;top:-150px;border:1px solid #6247f544;border-radius:50%;box-shadow:0 0 0 30px #08bec711,0 0 0 60px #ff687811;animation:ring 6s ease-in-out infinite}
.section{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:42px 0 16px}.section p{margin:6px 0 0;color:var(--muted)}
.grid3,.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.feature,.product,.formcard,.content{background:white;border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 26px #2623540b;animation:rise .7s ease both}
.feature{padding:21px}.feature-icon{width:45px;height:45px;border-radius:14px;background:#08bec71b;display:grid;place-items:center;font-size:22px}.feature h3{margin:12px 0 4px}.feature p,.product p,.content p{color:var(--muted);font-size:14px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.filters input,.filters select,.field input,.field textarea{border:1px solid var(--line);border-radius:11px;background:white;padding:11px 13px;font:inherit;color:var(--ink)}.filters input{width:min(370px,100%)}
.product{overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .18s}.product:hover{transform:translateY(-4px)}
.pic{height:185px;background:linear-gradient(135deg,#eafaff,#f1edff);display:grid;place-items:center;font-size:55px;overflow:hidden;position:relative}.pic img{width:100%;height:100%;object-fit:cover}
.pbody{padding:17px;display:flex;flex-direction:column;gap:7px;flex:1}.pill{align-self:flex-start;background:#08bec71a;color:var(--purple);padding:4px 9px;border-radius:30px;font-size:10px;font-weight:900;text-transform:uppercase}.pbody h3{margin:0}.pbody p{margin:0;flex:1}.price{font-weight:950;color:var(--purple);font-size:20px}.actions{display:flex;gap:8px;margin-top:7px}.actions input{width:62px;min-width:0;border:1px solid var(--line);border-radius:9px;padding:8px}.actions button{flex:1;padding:9px;font-size:13px}
.comments-toggle{margin-top:9px;border:0;background:none;color:var(--purple);font-weight:900;text-align:left;cursor:pointer;padding:7px 0}.comments{border-top:1px solid var(--line);padding-top:10px;margin-top:7px}.comment{padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}.comment p{margin:3px 0}.comment-form input,.comment-form textarea{display:block;width:100%;padding:9px;border:1px solid var(--line);border-radius:9px;margin:6px 0;font:inherit}.comment-form textarea{min-height:60px}
.empty{grid-column:1/-1;text-align:center;padding:36px;border:2px dashed #d8d2f2;border-radius:19px;background:white;color:var(--muted)}.empty strong{display:block;color:var(--ink);font-size:18px}
.orderhero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,5vw,58px);margin-bottom:22px;border-radius:29px;color:white;background:linear-gradient(125deg,#211b55,#5733bc 48%,#067f9c)}
.orderhero:before{content:"";position:absolute;z-index:-2;inset:-40%;background:conic-gradient(from 0deg,transparent 0 18%,#2de5e233 27%,transparent 38%,#ff689044 53%,transparent 66%,#9d7dff44 84%,transparent);animation:spin 23s linear infinite}
.orderhero:after{content:"";position:absolute;z-index:-1;inset:0;opacity:.2;background-image:linear-gradient(#ffffff40 1px,transparent 1px),linear-gradient(90deg,#ffffff40 1px,transparent 1px);background-size:48px 48px;animation:gridmove 18s linear infinite}
.orb{position:absolute;z-index:-1;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#25e8e188,transparent 70%);right:8%;top:5%;animation:float 8s ease-in-out infinite}
.orderhero .kicker{color:white}.orderhero .lead{color:#eeeeff}
.flow{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.flow span{border:1px solid #ffffff55;background:#ffffff20;padding:8px 12px;border-radius:40px;font-size:12px;font-weight:850}
.orderlayout{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}.orderaside{padding:26px;border-radius:23px;background:linear-gradient(145deg,#24204e,#5136ae,#087f97);color:white}.orderaside p,.orderaside li{color:#ecebff}
.formcard,.content{padding:24px}.formgrid,.twocol{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field{margin-bottom:13px}.field label{display:block;font-weight:850;font-size:13px;margin-bottom:5px}.field input,.field textarea{display:block;width:100%}.field textarea{min-height:80px;resize:vertical}
.cartbox{background:#f7f6ff;border:1px solid var(--line);border-radius:15px;padding:15px;margin:12px 0}.cartline{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.cartline:last-child{border-bottom:0}.remove{border:0;background:none;color:var(--coral);font-weight:900;cursor:pointer}
.banner{margin-top:30px;padding:23px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(105deg,#ff68781a,#08bec71a);display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.banner p{margin:5px 0 0;color:var(--muted)}
footer{background:#202344;color:#f3f2ff;padding:26px 20px;margin-top:20px}.foot{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.footlinks{display:flex;gap:12px;flex-wrap:wrap;font-size:13px}.foot a{color:white}.small{color:#c9c8df;font-size:12px}.copyright{border:0;color:#c9c8df;background:none;font-size:12px;cursor:pointer;padding:2px}
.owner-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px;background:#100d36b8;backdrop-filter:blur(9px)}.owner-modal.open{display:flex}.modalcard{width:min(430px,100%);background:white;border-radius:22px;padding:25px;box-shadow:0 25px 90px #0004;animation:rise .25s ease}.modalcard p{color:var(--muted);font-size:13px}.modalcard input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;margin:8px 0 12px}
.adminwrap{max-width:1200px;margin:auto;padding:25px 20px 65px}.adminbox{background:white;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}.adminlayout{display:grid;grid-template-columns:255px 1fr;gap:17px}.adminmenu button{display:block;width:100%;text-align:left;padding:12px;border:0;border-radius:10px;margin:6px 0;font-weight:850;cursor:pointer;background:#f5f3ff}.adminmenu button.active{background:var(--purple);color:white}.pane{display:none}.pane.active{display:block}.adminfields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.adminfield{margin:12px 0}.adminfield label{display:block;font-weight:850;font-size:13px;margin-bottom:5px}.adminfield input,.adminfield textarea,.adminfield select{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;font:inherit}.adminfield textarea{min-height:70px}.adminrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.adminrow img{width:48px;height:48px;object-fit:cover;border-radius:8px}.status{padding:10px;background:#f3f0ff;color:var(--purple);border-radius:9px;font-size:13px}.hidden{display:none!important}
@keyframes ambient{from{transform:translate(-2%,0) rotate(0);background-position:0 20%}to{transform:translate(2%,1%) rotate(2deg);background-position:100% 80%}}@keyframes grid{to{background-position:110px 55px}}@keyframes topglow{50%{background-position:100% 50%}}@keyframes logo{50%{filter:saturate(1.5) brightness(1.12)}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes rise{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:none}}@keyframes breath{to{background-position:100% 50%}}@keyframes ring{50%{transform:scale(1.07);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes gridmove{to{background-position:96px 48px}}@keyframes btnflow{50%{background-position:100% 50%}}
@media(min-width:2500px){nav,.foot{max-width:1900px}.container{width:min(1900px,calc(100% - 100px));padding-top:58px}nav{padding:21px 44px}.hero,.orderhero{padding:90px}.hero h1,.orderhero h1{font-size:clamp(76px,4.8vw,110px)}.lead{font-size:23px}.products,.grid3{gap:28px}.pic{height:300px}.pbody{padding:28px}.pbody h3{font-size:26px}.btn{font-size:18px;padding:17px 25px}}
@media(max-width:850px){.hero,.orderlayout,.twocol{grid-template-columns:1fr}.products,.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.adminlayout{grid-template-columns:1fr}}
@media(max-width:580px){nav{display:block;padding:11px 13px}.brand{margin-bottom:8px}.navlinks a{font-size:11px;padding:8px}.container,main{width:calc(100% - 26px);padding:20px 0 40px}.hero{padding:25px}.products,.grid3,.formgrid,.adminfields{grid-template-columns:1fr}.pic{height:175px}.section{align-items:start;flex-direction:column}.page-banner{padding:25px}.orderhero{padding:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}