@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Montserrat:wght@500;700&family=Poppins:wght@400;600;700&display=swap');

:root{
  --ink:#101828;
  --muted:#64748b;
  --line:#dbe3ee;
  --paper:#ffffff;
  --bg:#f5f7fb;
  --brand:#006d77;
  --brand-dark:#064e55;
  --danger:#c2410c;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 6vw;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.brand{font-weight:800;font-size:26px;letter-spacing:0}
.brand span{color:var(--brand)}
.logo-brand{display:flex;align-items:center}
.logo-brand img{width:156px;height:44px;object-fit:contain;object-position:left center;display:block;mix-blend-mode:multiply}
.nav nav{display:flex;gap:20px;align-items:center;font-weight:700;color:#334155}
.nav-tools{display:flex;align-items:center;gap:10px}
.cart-link{display:inline-flex;align-items:center;gap:8px;border:1px solid #d7e2ee;border-radius:10px;background:#fff;padding:8px 10px;font-weight:800;color:#101828;box-shadow:0 8px 22px #1018280b}
.cart-link b{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:#101828;color:#fff;font-size:12px}
.format-menu{position:sticky;top:72px;z-index:9;display:flex;gap:10px;align-items:center;overflow:auto;padding:10px 6vw;background:rgba(255,255,255,.72);border-bottom:1px solid #dbe7f1;backdrop-filter:blur(16px);box-shadow:0 10px 28px #1018280a}
.format-menu a{white-space:nowrap;border:1px solid #d6e2ee;background:#fff;border-radius:999px;padding:9px 13px;font-weight:800;color:#26364d;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.format-menu a:hover{transform:translateY(-2px);box-shadow:0 12px 28px #10182814;border-color:#9fb2c7}
.lang-switch{display:flex;gap:4px;border:1px solid var(--line);background:#eef3f7;padding:4px;border-radius:8px}
.lang-switch a{font-size:12px;font-weight:800;padding:7px 9px;border-radius:6px;color:#475569}
.lang-switch a.active{background:var(--paper);color:var(--brand-dark);box-shadow:0 1px 4px #14213d14}
.lang-switch.compact{border-color:#cbd5e1;background:#f8fafc}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:36px;align-items:center;padding:58px 6vw 46px;background:linear-gradient(180deg,#ffffff 0%,#edf6f4 100%)}
.hero h1{font-size:clamp(34px,5vw,62px);line-height:1;margin:10px 0 16px;letter-spacing:0;max-width:780px}
.hero p{font-size:18px;line-height:1.6;max-width:650px;color:#475569}
.eyebrow{font-size:13px!important;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-dark)!important;font-weight:800}
.btn,button,.upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;background:var(--ink);color:#fff;padding:12px 16px;font-weight:800;cursor:pointer;line-height:1.2;min-height:44px}
.btn:hover,button:hover,.upload:hover{filter:brightness(.97)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-card{background:var(--ink);color:#fff;padding:28px;border-radius:8px;min-height:230px;display:flex;flex-direction:column;justify-content:end;box-shadow:0 18px 42px #14213d28}
.hero-card b{font-size:28px;line-height:1.15}
.hero-card span{color:#cbd5e1;margin-top:8px}
.home-hero{min-height:620px;isolation:isolate}
.home-hero:before{content:"";position:absolute;inset:-16%;z-index:0;background:radial-gradient(circle at var(--mx,18%) var(--my,32%),#00a0aa24,transparent 20%),radial-gradient(circle at 82% 18%,#10182812,transparent 26%),radial-gradient(circle at 50% 95%,#f59e0b18,transparent 24%);animation:meshDrift 14s ease-in-out infinite;pointer-events:none}
.hero-logo-ghost{position:absolute;left:-2vw;right:auto;top:18%;z-index:0;font-size:clamp(82px,13vw,190px);font-weight:900;line-height:.8;color:#101828;opacity:.055;white-space:nowrap;pointer-events:none;animation:ghostSlide 12s ease-in-out infinite}
.hero-copy{align-self:center;position:relative;z-index:2}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-points span{display:inline-flex;border:1px solid #c9dce8;background:#ffffffb8;border-radius:999px;padding:9px 12px;font-weight:800;color:#26364d;box-shadow:0 8px 22px #1018280b}
.hero-showcase{position:relative;z-index:2;min-height:430px;display:grid;place-items:center;perspective:1000px}
.hero-showcase:before{content:"";position:absolute;width:360px;height:360px;border-radius:999px;background:radial-gradient(circle,#00a0aa25,transparent 68%);animation:pulseGlow 4s ease-in-out infinite}
.showcase-card{position:absolute;width:min(460px,86%);border-radius:18px;background:#fff;padding:12px;box-shadow:0 26px 60px #1018281f;border:1px solid #ffffffcc;animation:showcaseFloat 7s ease-in-out infinite;translate:var(--px,0) var(--py,0);transition:translate .16s ease-out;will-change:translate}
.showcase-card img{display:block;width:100%;border-radius:10px}
.showcase-card.card-a{transform:rotate(-7deg) translate(-72px,-22px);z-index:3}
.showcase-card.card-b{transform:rotate(8deg) translate(78px,52px) scale(.86);z-index:2;animation-delay:.45s}
.showcase-card.card-c{transform:rotate(1deg) translate(10px,162px) scale(.74);z-index:1;animation-delay:.9s}
.orbit-ring{position:absolute;inset:28px;border:1px dashed #006d7740;border-radius:999px;animation:orbitSpin 18s linear infinite}
.orbit-ring span{position:absolute;display:grid;place-items:center;min-width:54px;height:34px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid #d6e5ee;box-shadow:0 12px 28px #10182814;font-size:12px;font-weight:900;color:#26364d}
.orbit-ring span:nth-child(1){top:-17px;left:50%;transform:translateX(-50%)}
.orbit-ring span:nth-child(2){right:-20px;top:47%}
.orbit-ring span:nth-child(3){bottom:-17px;left:50%;transform:translateX(-50%)}
.orbit-ring span:nth-child(4){left:-18px;top:47%}
.marquee-band{overflow:hidden;border-block:1px solid #dbe7f1;background:#101828;color:#fff}
.marquee-band div{display:flex;width:max-content;gap:34px;padding:15px 0;animation:marqueeMove 24s linear infinite}
.marquee-band span{font-weight:900;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;opacity:.88}
.cursor-glow{position:absolute;left:0;top:0;z-index:1;width:210px;height:210px;border-radius:999px;background:radial-gradient(circle,#00a0aa1e,transparent 68%);pointer-events:none;translate:-50% -50%;opacity:.8}
.wrap{padding:38px 6vw}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px}
.section-head h2{margin-bottom:4px}
.wrap h1,.wrap h2{letter-spacing:0}
.grid{display:grid;gap:18px}
.cats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cats a{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;font-weight:800;box-shadow:0 6px 20px #14213d0a}
.cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:9px;box-shadow:0 8px 24px #14213d0d}
.card img{width:100%;aspect-ratio:1.4/1;object-fit:contain;border-radius:6px;background:#eef2f7}
.card b{line-height:1.25}
.card span,.muted,.tiny{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.steps h2{grid-column:1/-1}
.steps div{background:#fff;border-radius:8px;padding:20px;border:1px solid var(--line);font-weight:700}
.steps b{background:var(--brand);color:#fff;border-radius:999px;padding:8px 12px;margin-right:8px}
.process-section{padding-top:54px}
.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.process-grid div{background:rgba(255,255,255,.76);border:1px solid #d7e2ee;border-radius:16px;padding:22px;box-shadow:0 18px 45px #10182810;backdrop-filter:blur(12px)}
.process-grid b{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#101828;color:#fff;margin-bottom:20px}
.process-grid h3{margin:0 0 8px}
.process-grid p{color:#64748b;line-height:1.55;margin:0}
footer{text-align:center;padding:30px;color:var(--muted)}

.editor-top{min-height:64px;display:flex;gap:14px;align-items:center;justify-content:space-between;padding:10px 18px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px);box-shadow:0 8px 24px #1018280a}
.editor-top b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-actions{display:flex;gap:10px;align-items:center}
.editor-quickbar{position:sticky;top:64px;z-index:18;display:flex;gap:8px;align-items:center;overflow:auto;padding:10px 16px;background:rgba(248,251,255,.82);border-bottom:1px solid #d5e1ed;backdrop-filter:blur(18px)}
.editor-quickbar button{width:auto;min-height:38px;border-radius:999px;background:#fff;color:#172033;border:1px solid #cbd8e7;padding:8px 13px;box-shadow:0 8px 20px #1018280b;white-space:nowrap}
.editor-quickbar button:hover{transform:translateY(-1px);box-shadow:0 12px 26px #10182814}
.editor-layout{display:grid;grid-template-columns:300px minmax(360px,1fr) 300px;gap:16px;padding:16px;background:linear-gradient(180deg,#f8fbff 0,#eef3f8 100%)}
.panel{background:rgba(255,255,255,.92);border:1px solid #d7e2ee;border-radius:12px;padding:16px;height:calc(100vh - 96px);overflow:auto;box-shadow:0 18px 45px #10182812;backdrop-filter:blur(12px)}
.panel h3{margin:4px 0 10px;font-size:16px}
.panel button,.panel input,.panel select,.upload{width:100%;margin:7px 0}
.panel input,.panel select{border:1px solid #cbd5e1;border-radius:8px;padding:12px;min-height:44px;background:#fff;color:var(--ink)}
.range-label{display:block;font-size:13px;font-weight:800;color:#475569;margin-top:8px}
.range-label input{padding:0;min-height:auto}
.panel hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}
.quick-tools button{margin:0;background:#edf2f7;color:#101828;border:1px solid #d7e0ea;min-height:40px;padding:9px;font-size:13px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.quick-tools button:hover,.icon-grid button:hover,.layer:hover{transform:translateY(-1px);box-shadow:0 8px 20px #10182812}
.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px}
.icon-grid button{height:48px;min-height:48px;margin:0;background:#fff;border:1px solid #d7e0ea;padding:8px;transition:transform .18s ease,box-shadow .18s ease}
.icon-grid svg{width:28px;height:28px;display:block}
.upload input{display:none}
.danger{background:var(--danger)}
.canvas-wrap{display:grid;place-items:center;min-height:calc(100vh - 96px);overflow:auto;padding:18px;background:radial-gradient(circle at center,#ffffff 0,#edf3f9 64%,#dce7f2 100%);border-radius:14px;border:1px solid #d7e2ee}
.canvas{width:min(820px,100%);background:#fff;position:relative;box-shadow:0 28px 80px #10182828,0 0 0 1px #ffffff;overflow:hidden;animation:canvasIn .34s ease both}
.canvas .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.el{position:absolute;min-width:44px;min-height:24px;padding:4px;cursor:move;outline:1px dashed transparent;touch-action:none;user-select:none;overflow:visible;display:flex;align-items:center}
.el.active{outline:2px solid var(--brand);background:#0f766e12;box-shadow:0 0 0 6px #006d7720}
.text-content{display:block;width:100%;line-height:1.12;white-space:pre-wrap;outline:0}
.text-content[contenteditable="true"]{cursor:text;background:#ffffff55;outline:2px solid #00a0aa!important}
.el img,.el canvas,.el svg{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.resize{display:none;position:absolute;right:-8px;bottom:-8px;width:18px;height:18px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 4px 14px #10182836;cursor:nwse-resize}
.el.active .resize{display:block}
.floating-tools{position:absolute;z-index:999;display:flex;gap:4px;align-items:center;transform:translate(-50%,-100%) translateY(-8px);opacity:0;pointer-events:none;background:#101828;color:#fff;border:1px solid #ffffff22;border-radius:10px;padding:4px;box-shadow:0 14px 34px #10182844;transition:opacity .16s ease,transform .16s ease}
.floating-tools.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-100%) translateY(-5px)}
.floating-tools[data-placement="below"]{transform:translate(-50%,0) translateY(8px)}
.floating-tools[data-placement="below"].visible{transform:translate(-50%,0) translateY(5px)}
.floating-tools button{width:auto;min-height:28px;margin:0;border-radius:7px;padding:5px 8px;background:#ffffff14;color:#fff;font-size:10px}
.floating-tools button[data-action="delete"]{background:#dc2626}
.layer{display:flex;justify-content:space-between;align-items:center;text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px;margin:6px 0;min-height:40px;padding:10px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.layer.active{border-color:var(--brand);background:#eefaf8}
.layer-delete{font-size:11px;color:#b42318;background:#fff1f1;border:1px solid #ffd1d1;border-radius:999px;padding:4px 8px;margin-left:8px}
.tiny{font-size:13px;line-height:1.5}
.tiny.error{color:#b42318;font-weight:700}

@keyframes canvasIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:40px}
  .editor-layout{grid-template-columns:1fr;padding:10px}
  .tools-panel{order:2}
  .canvas-wrap{order:1;min-height:45vh;padding:0}
  .order-panel{order:3}
  .panel{height:auto;max-height:none}
  .canvas{width:100%}
  .icon-grid{grid-template-columns:repeat(6,1fr)}
}

@media(max-width:680px){
  .nav{padding:10px 16px;flex-wrap:wrap}
  .nav nav{order:3;width:100%;justify-content:flex-start}
  .hero{padding:34px 16px}
  .wrap{padding:30px 16px}
  .hero h1{font-size:34px}
  .hero-card{min-height:180px}
  .editor-top{align-items:flex-start;flex-direction:column;gap:8px}
  .editor-actions{width:100%;justify-content:space-between}
  .editor-actions button{width:auto}
  .editor-layout{padding:8px;gap:10px}
  .canvas-wrap{position:sticky;top:170px;z-index:5;min-height:0;padding:8px;border:1px solid var(--line);border-radius:8px}
  .panel{padding:12px}
  .quick-tools{grid-template-columns:repeat(4,minmax(0,1fr))}
  .quick-tools button{font-size:12px;padding:8px 6px}
  .icon-grid{grid-template-columns:repeat(4,1fr)}
}

/* Polished market-ready layer */
body:not(.editor-page){background:linear-gradient(180deg,#ffffff 0,#f4f8fb 42%,#eef4f8 100%)}
body:not(.editor-page) .nav{box-shadow:0 10px 35px #1018280a}
body:not(.editor-page) .hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffffff 0,#edf7f6 52%,#f7fbff 100%)}
body:not(.editor-page) .hero:after{content:"";position:absolute;left:6vw;right:6vw;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#006d7755,transparent)}
body:not(.editor-page) .hero>.hero-copy,body:not(.editor-page) .hero>.hero-showcase{position:relative;z-index:2;animation:fadeLift .55s ease both}
body:not(.editor-page) .hero-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#101828 0,#17324d 62%,#006d77 100%);animation:floatCard 5.5s ease-in-out infinite}
body:not(.editor-page) .hero-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.16) 38%,transparent 62%);transform:translateX(-100%);animation:shine 3.8s ease-in-out infinite}
body:not(.editor-page) .card,body:not(.editor-page) .cats a,body:not(.editor-page) .steps div{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;animation:fadeLift .5s ease both}
body:not(.editor-page) .card:nth-child(2),body:not(.editor-page) .cats a:nth-child(2){animation-delay:.04s}
body:not(.editor-page) .card:nth-child(3),body:not(.editor-page) .cats a:nth-child(3){animation-delay:.08s}
body:not(.editor-page) .card:nth-child(4),body:not(.editor-page) .cats a:nth-child(4){animation-delay:.12s}
body:not(.editor-page) .card:nth-child(5),body:not(.editor-page) .cats a:nth-child(5){animation-delay:.16s}
body:not(.editor-page) .card:nth-child(6){animation-delay:.2s}
body:not(.editor-page) .card:hover,body:not(.editor-page) .cats a:hover,body:not(.editor-page) .steps div:hover{transform:translateY(-5px);box-shadow:0 18px 45px #10182818;border-color:#b8c7d8}
body:not(.editor-page) .card img{background:linear-gradient(110deg,#e7eef6 8%,#f8fbff 18%,#e7eef6 33%);background-size:220% 100%;animation:shimmer 2.2s linear infinite}

.editor-page{background:#eaf1f7}
.editor-page .editor-top{background:rgba(255,255,255,.78);border-bottom-color:#cdd9e7;box-shadow:0 16px 50px #10182812}
.editor-page .editor-top>a{font-weight:700;color:#26364d}
.editor-page .editor-top b{font-size:18px}
.editor-page .editor-actions button{background:linear-gradient(135deg,#111827,#26364d);box-shadow:0 10px 22px #10182820}
.editor-page .editor-layout{background:linear-gradient(135deg,#edf4fb 0,#f8fbff 44%,#e9f2f5 100%);gap:18px}
.editor-page .panel{background:rgba(255,255,255,.72);border:1px solid rgba(178,195,214,.75);box-shadow:0 24px 65px #10182814,inset 0 1px 0 #ffffffcc;border-radius:16px}
.editor-page .panel h3{display:flex;align-items:center;gap:8px;margin:8px 0 12px;font-size:15px;color:#0f1f35;text-transform:uppercase;letter-spacing:.04em}
.editor-page .panel h3:before{content:"";width:8px;height:8px;border-radius:99px;background:#006d77;box-shadow:0 0 0 5px #006d7714}
.editor-page .panel input,.editor-page .panel select{background:rgba(255,255,255,.82);border-color:#c8d6e5;box-shadow:inset 0 1px 0 #fff;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.editor-page .panel input:focus,.editor-page .panel select:focus{outline:0;border-color:#006d77;box-shadow:0 0 0 4px #006d7718;transform:translateY(-1px)}
.editor-page .primary-tool{background:linear-gradient(135deg,#101828,#203756);box-shadow:0 12px 24px #1018281f}
.editor-page .quick-tools button{background:rgba(255,255,255,.74);border-color:#c8d6e5;color:#172033}
.editor-page .quick-tools button:hover,.editor-page .icon-grid button:hover{background:#fff;border-color:#9fb2c7}
.editor-page .icon-grid button{border-radius:12px;background:rgba(255,255,255,.72)}
.editor-page .canvas-wrap{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(221,233,243,.86));box-shadow:inset 0 1px 0 #fff,0 24px 70px #10182812}
.editor-page .canvas-wrap:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(180deg,rgba(0,0,0,.45),transparent 72%);pointer-events:none}
.editor-page .canvas{border-radius:2px;box-shadow:0 34px 90px #10182830,0 0 0 1px #ffffffdd}
.editor-page .el{transition:box-shadow .14s ease,background .14s ease,outline-color .14s ease}
.editor-page .el.active{outline-color:#00a0aa;background:#00a0aa12;box-shadow:0 0 0 7px #00a0aa18}
.editor-page .text-content[contenteditable="true"]{box-shadow:0 0 0 8px #00a0aa22,0 12px 26px #10182818}
.editor-page .resize{background:#00a0aa}
.editor-page .layer{background:rgba(255,255,255,.8);border-color:#cad8e7}
.editor-page .layer.active{background:linear-gradient(135deg,#eefcfb,#f8ffff);border-color:#008c95;box-shadow:0 10px 24px #006d7716}
.editor-page .floating-tools{background:rgba(16,24,40,.9);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.18);box-shadow:0 18px 45px #10182855}
.editor-page .floating-tools button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);font-weight:800}
.editor-page .floating-tools button:hover{background:rgba(255,255,255,.2)}
.mockup-modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(9,15,26,.62);backdrop-filter:blur(18px)}
.mockup-modal.open{display:flex;animation:fadeLift .22s ease both}
.mockup-dialog{position:relative;width:min(980px,100%);border:1px solid rgba(255,255,255,.22);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(238,246,250,.82));box-shadow:0 34px 110px #00000055;overflow:hidden}
.mockup-close{position:absolute;right:16px;top:16px;z-index:4;width:auto;min-height:36px;padding:8px 12px;border-radius:999px;background:rgba(16,24,40,.86);color:#fff;backdrop-filter:blur(12px)}
.mockup-scene{position:relative;min-height:560px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 30% 16%,#ffffff 0,#eaf5f4 38%,#cbd8e5 100%)}
.mockup-light{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 0,#ffffffd9,transparent 28%),radial-gradient(circle at 75% 42%,#00a0aa22,transparent 24%);animation:meshDrift 9s ease-in-out infinite}
.mockup-table{position:relative;width:min(760px,86vw);height:430px;border-radius:32px;background:linear-gradient(135deg,#2a3445,#111827 48%,#36465a);box-shadow:0 34px 90px #10182855,inset 0 1px 0 #ffffff25;transform:rotateX(58deg) rotateZ(-8deg);transform-style:preserve-3d}
.mockup-table:before{content:"";position:absolute;inset:24px;border-radius:24px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 42%)}
.mockup-table:after{content:"";position:absolute;left:8%;right:8%;bottom:-44px;height:54px;border-radius:999px;background:#00000045;filter:blur(18px)}
.mockup-wallet-shell{position:absolute;left:8%;top:18%;width:52%;height:62%;border-radius:28px;background:linear-gradient(145deg,#10151f,#25344a);box-shadow:0 24px 50px #00000070,inset 0 1px 0 #ffffff20;transform:translateZ(22px)}
.mockup-wallet-shell:before{content:"";position:absolute;left:12%;right:12%;top:18%;height:22%;border-radius:18px;background:#ffffff12;border:1px solid #ffffff18}
.mockup-wallet-shell:after{content:"";position:absolute;left:10%;right:10%;bottom:16%;height:16%;border-radius:999px;background:#00000035}
.mockup-menu-paper,.mockup-banner-wall{display:none}
#mockupDesign{position:absolute;z-index:3;display:block;object-fit:cover;background:#fff;box-shadow:0 24px 55px #00000055;transform-style:preserve-3d}
.mockup-wallet #mockupDesign{left:25%;top:32%;width:44%;height:auto;border-radius:8px;transform:translateZ(44px) rotateZ(2deg);animation:mockupPop .42s ease both}
.mockup-menu .mockup-wallet-shell{display:none}
.mockup-menu .mockup-menu-paper{display:block;position:absolute;left:18%;top:8%;width:58%;height:84%;border-radius:14px;background:linear-gradient(135deg,#fff,#f2f5f7);box-shadow:0 26px 60px #00000045;transform:translateZ(18px) rotateZ(5deg)}
.mockup-menu .mockup-menu-paper:before{content:"";position:absolute;left:10%;right:10%;top:9%;height:10px;border-radius:999px;background:#d6dee7;box-shadow:0 34px 0 #d6dee7,0 68px 0 #d6dee7,0 102px 0 #d6dee7}
.mockup-menu #mockupDesign{left:30%;top:12%;width:42%;height:auto;border-radius:8px;transform:translateZ(48px) rotateZ(-3deg);animation:mockupPop .42s ease both}
.mockup-banner .mockup-table{height:360px;transform:rotateX(46deg) rotateZ(-2deg);background:linear-gradient(135deg,#d9e3ec,#f8fbff 42%,#b9c9d8)}
.mockup-banner .mockup-wallet-shell,.mockup-banner .mockup-menu-paper{display:none}
.mockup-banner .mockup-banner-wall{display:block;position:absolute;left:8%;right:8%;top:20%;height:42%;border-radius:18px;background:linear-gradient(135deg,#182235,#0f172a);box-shadow:0 24px 60px #10182855;transform:translateZ(20px)}
.mockup-banner #mockupDesign{left:15%;top:27%;width:70%;height:auto;border-radius:10px;transform:translateZ(54px);animation:mockupPop .42s ease both}
.mockup-caption{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px 22px;background:rgba(255,255,255,.78);border-top:1px solid #d8e4ef}
.mockup-caption b{font-size:18px}
.mockup-caption span{color:#64748b;line-height:1.45}
@keyframes mockupPop{from{opacity:0;scale:.88;filter:blur(6px)}to{opacity:1;scale:1;filter:blur(0)}}

@keyframes fadeLift{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:-220% 0}}
@keyframes shine{0%,42%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes showcaseFloat{0%,100%{margin-top:0}50%{margin-top:-14px}}
@keyframes pulseGlow{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.08);opacity:1}}
@keyframes meshDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(1.5%,-1.5%,0) scale(1.04)}}
@keyframes ghostSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(2.2%)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes marqueeMove{to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .cursor-glow{display:none}
}

.admin-page{background:linear-gradient(135deg,#edf4fb,#f9fbfd 48%,#eaf4f3)}
.admin-page .nav{background:rgba(255,255,255,.82);backdrop-filter:blur(16px);box-shadow:0 12px 38px #10182810}
.admin-wrap{max-width:1180px;margin:0 auto}
.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
.admin-stats a,.admin-panel,.admin-template-card{background:rgba(255,255,255,.78);border:1px solid #d2deea;border-radius:16px;box-shadow:0 22px 55px #10182810;backdrop-filter:blur(14px)}
.admin-stats a{padding:22px;display:flex;flex-direction:column;gap:10px}
.admin-stats span,.admin-row span,.admin-template-card span{color:#64748b}
.admin-stats b{font-size:34px}
.admin-panel{padding:18px;margin-bottom:18px}
.admin-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}
.admin-panel-head h1,.admin-panel-head h2,.admin-panel h2{margin:0}
.admin-table{display:grid;gap:10px}
.admin-row{display:flex;justify-content:space-between;gap:14px;align-items:center;background:#fff;border:1px solid #dce6ef;border-radius:10px;padding:12px}
.admin-template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.admin-template-card{padding:12px;display:grid;gap:12px}
.admin-template-card img{width:100%;aspect-ratio:1.4/1;object-fit:contain;background:#eef3f8;border-radius:10px}
.admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.admin-actions form,.admin-panel form{margin:0}
.admin-actions form button,.admin-panel form button{width:100%}
.admin-actions .danger{background:#b42318;color:#fff}
.admin-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.admin-form label{display:grid;gap:7px;font-weight:800;color:#334155;margin-bottom:12px}
.admin-form input,.admin-form select,.admin-form textarea{width:100%;border:1px solid #c9d7e6;border-radius:10px;padding:12px;background:rgba(255,255,255,.86);font:inherit;color:#101828}
.admin-form textarea{min-height:150px;resize:vertical;font-family:Consolas,monospace}
.admin-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}
.admin-check input{width:auto}
.admin-preview{width:100%;max-height:180px;object-fit:contain;background:#eef3f8;border-radius:10px;margin-bottom:12px}
.admin-badge{display:inline-flex;align-items:center;border-radius:999px;padding:8px 12px;background:#e6fffb;color:#006d77;font-weight:800;border:1px solid #b8efea}
.admin-panel textarea{width:100%;min-height:120px;border:1px solid #c9d7e6;border-radius:10px;padding:12px;background:#fff;font:13px/1.4 Consolas,monospace;color:#334155;margin-bottom:12px}

@media(max-width:900px){
  .admin-form,.admin-stats{grid-template-columns:1fr}
  .admin-panel-head{align-items:flex-start;flex-direction:column}
}

@media(max-width:980px){
  .home-hero{min-height:auto}
  .hero-showcase{min-height:360px}
  .orbit-ring{inset:16px}
  .process-grid{grid-template-columns:1fr}
  .section-head{align-items:flex-start;flex-direction:column}
}

@media(max-width:680px){
  .logo-brand img{width:124px;height:38px}
  .format-menu{top:116px;padding:8px 16px}
  .nav-tools{width:100%;justify-content:space-between}
  .cart-link{padding:7px 9px}
  .hero-showcase{min-height:310px;overflow:hidden}
  .hero-logo-ghost{font-size:88px;top:10%;opacity:.03}
  .cursor-glow,.orbit-ring{display:none}
  .marquee-band div{animation-duration:18s}
  .showcase-card{width:82%}
  .showcase-card.card-a{transform:rotate(-5deg) translate(-28px,-8px)}
  .showcase-card.card-b{transform:rotate(7deg) translate(42px,55px) scale(.84)}
  .showcase-card.card-c{transform:rotate(1deg) translate(4px,132px) scale(.72)}
  .mockup-modal{padding:10px}
  .mockup-dialog{border-radius:16px}
  .mockup-scene{min-height:430px}
  .mockup-table{width:92vw;height:330px}
  .mockup-wallet #mockupDesign{left:20%;top:34%;width:55%}
  .mockup-menu #mockupDesign{left:25%;top:13%;width:52%}
  .mockup-banner #mockupDesign{left:10%;width:80%}
  .mockup-caption{align-items:flex-start;flex-direction:column;padding:16px}
}

/* Extra homepage energy, tuned to stay readable */
.actions .btn:first-child{position:relative;overflow:hidden}
.actions .btn:first-child:after{content:"";position:absolute;inset:-80% -30%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.28),transparent 60%);transform:translateX(-90%);animation:buttonSweep 3.6s ease-in-out infinite;pointer-events:none}
.format-menu a:nth-child(odd){animation:softBob 5.5s ease-in-out infinite}
.format-menu a:nth-child(even){animation:softBob 6.2s ease-in-out infinite reverse}
.hero-points span{animation:chipBreathe 4.8s ease-in-out infinite}
.hero-points span:nth-child(2){animation-delay:.25s}
.hero-points span:nth-child(3){animation-delay:.5s}
@keyframes buttonSweep{0%,48%{transform:translateX(-90%)}78%,100%{transform:translateX(90%)}}
@keyframes softBob{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes chipBreathe{0%,100%{transform:translateY(0);box-shadow:0 8px 22px #1018280b}50%{transform:translateY(-2px);box-shadow:0 13px 30px #10182814}}