:root{
  --navy:#052c63;
  --navy-2:#073875;
  --blue:#0d66c2;
  --sky:#32b6f0;
  --cyan:#21c3e6;
  --yellow:#ffd22e;
  --yellow-2:#ffbf00;
  --ink:#10233f;
  --muted:#67758a;
  --soft:#f2f6fa;
  --line:#dce5ef;
  --white:#fff;
  --radius:26px;
  --shadow:0 24px 70px rgba(5,44,99,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Montserrat",Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.asset-failed{display:none!important}

.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid rgba(5,44,99,.08);box-shadow:0 7px 28px rgba(5,44,99,.035)}
.header-inner{width:min(1240px,calc(100% - 40px));height:88px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:36px}
.brand{display:flex;align-items:center;min-width:190px}
.brand img{width:216px;max-height:62px;object-fit:contain;object-position:left center}
.brand-fallback{display:none;color:var(--navy);font-size:27px;font-weight:900;letter-spacing:-1.5px}.brand-fallback b{color:var(--yellow-2)}
.brand img.asset-failed + .brand-fallback{display:block}
.main-nav{display:flex;align-items:center;justify-content:flex-end;gap:34px;margin-left:auto;font-size:12px;font-weight:800;color:#173e67;text-transform:uppercase;letter-spacing:.035em}
.main-nav a{position:relative;padding:34px 0 32px;transition:color .18s ease}
.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:25px;height:2px;background:var(--yellow-2);transition:right .2s ease}
.main-nav a:hover{color:var(--blue)}
.main-nav a:hover:after{right:0}
.menu-toggle{display:none;width:46px;height:46px;border:0;background:transparent;padding:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{display:block;width:25px;height:2px;background:var(--navy);border-radius:10px;transition:transform .2s ease,opacity .2s ease}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;background:#fff;border-top:1px solid #e6edf4;padding:8px 20px 18px;box-shadow:0 18px 30px rgba(5,44,99,.08)}
.mobile-nav a{display:block;padding:14px 2px;border-bottom:1px solid #eef3f7;color:var(--navy);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.035em}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav.open{display:block}

.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#052c63 0%,#06447f 52%,#0878bf 100%);color:#fff;min-height:610px}
.hero:after{content:"";position:absolute;left:-6%;bottom:-130px;width:70%;height:230px;background:var(--yellow);transform:rotate(-5deg);border-radius:50% 50% 0 0/26% 26% 0 0;opacity:.98}
.hero-inner{position:relative;z-index:4;width:min(1240px,calc(100% - 40px));min-height:610px;margin:auto;display:grid;grid-template-columns:1.02fr .98fr;align-items:center}
.hero-copy{padding:78px 0 114px;max-width:690px}
.hero-tag{display:inline-flex;align-items:center;background:var(--yellow);color:var(--navy);padding:9px 14px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.08em;margin-bottom:19px}
.hero h1{margin:0;font-size:clamp(48px,5.3vw,78px);line-height:.95;letter-spacing:-.055em;font-weight:900;max-width:770px}
.hero h1 span{display:block;color:var(--yellow)}
.hero-copy>p{max-width:640px;margin:23px 0 18px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.86);font-weight:500}
.hero-points{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 28px}.hero-points span{padding:8px 11px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:11px;font-weight:700;background:rgba(255,255,255,.07)}
.hero-button{display:inline-flex;align-items:center;gap:16px;background:#fff;color:var(--navy);font-weight:900;padding:16px 21px;border-radius:13px;box-shadow:0 15px 35px rgba(0,0,0,.14);transition:.2s}.hero-button:hover{transform:translateY(-2px)}.hero-button span{font-size:20px;color:var(--blue)}
.hero-photo-wrap{position:relative;align-self:end;height:560px;display:flex;align-items:flex-end;justify-content:center;z-index:3}
.hero-photo-halo{position:absolute;width:470px;height:470px;border-radius:50%;background:linear-gradient(145deg,var(--yellow) 0 42%,#fff 42% 48%,rgba(255,255,255,.08) 48%);right:8%;bottom:35px;opacity:.98}
.hero-photo{position:relative;z-index:3;max-height:560px;max-width:590px;width:auto;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 16px 30px rgba(0,0,0,.2))}
.hero-number{position:absolute;right:0;bottom:55px;z-index:5;font-size:78px;line-height:1;font-weight:900;letter-spacing:-6px;color:var(--yellow);text-shadow:0 6px 22px rgba(0,0,0,.18);transform:rotate(-4deg)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.18}.orb-one{width:440px;height:440px;border:80px solid #fff;right:-190px;top:-120px}.orb-two{width:260px;height:260px;background:var(--cyan);left:46%;top:95px;opacity:.1}
.hero-lines{position:absolute;inset:0;opacity:.08;background-image:linear-gradient(120deg,transparent 48%,#fff 49%,transparent 50%);background-size:55px 55px}

.creator-section{position:relative;z-index:8;padding:94px 0 104px;background:linear-gradient(180deg,#fff,#f6f9fc)}
.section-intro{width:min(850px,calc(100% - 40px));margin:0 auto 42px;text-align:center}
.eyebrow{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--blue);margin-bottom:12px}
.section-intro h2{margin:0;font-size:clamp(34px,4.2vw,56px);line-height:1.02;letter-spacing:-.045em;font-weight:900;color:var(--navy)}
.section-intro h2 strong{color:var(--blue)}
.section-intro p{margin:17px auto 0;max-width:720px;color:var(--muted);font-size:15px;line-height:1.65;font-weight:500}
.creator-shell{width:min(1240px,calc(100% - 40px));margin:auto;background:#fff;border:1px solid #dce6f0;border-radius:32px;box-shadow:var(--shadow);display:grid;grid-template-columns:420px minmax(0,1fr);overflow:hidden}
.steps-panel{padding:27px;background:#fff;border-right:1px solid var(--line)}
.step-block{padding:20px 0 24px;border-bottom:1px solid #e8eef4}.step-block:first-child{padding-top:4px}.step-block:last-child{border:0;padding-bottom:4px}
.step-heading{display:flex;align-items:center;gap:12px;margin-bottom:15px}.step-heading>span{flex:0 0 31px;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:900;box-shadow:0 6px 14px rgba(5,44,99,.17)}.step-heading div{display:flex;flex-direction:column;gap:2px}.step-heading b{font-size:14px;color:var(--navy)}.step-heading small{font-size:11px;color:var(--muted);font-weight:600}
.format-options{display:grid;grid-template-columns:1fr;gap:8px}
.format-btn{width:100%;display:flex;align-items:center;gap:13px;text-align:left;border:1px solid #dde6ef;background:#fff;border-radius:14px;padding:12px 13px;color:var(--ink);transition:.18s}.format-btn:hover{border-color:#a9c5de}.format-btn.active{border-color:var(--blue);background:#f5faff;box-shadow:0 0 0 3px rgba(13,102,194,.08)}.format-btn span{display:flex;flex-direction:column;gap:2px}.format-btn b{font-size:12px}.format-btn small{font-size:10px;color:var(--muted)}
.ratio-icon{display:block;border:2px solid var(--blue);background:rgba(13,102,194,.08);border-radius:4px;flex:0 0 auto}.ratio-square{width:30px;height:30px}.ratio-feed{width:25px;height:33px;margin-left:2px;margin-right:3px}.ratio-story{width:21px;height:36px;margin-left:4px;margin-right:5px}
.upload-button{display:flex;align-items:center;gap:12px;border:1.5px dashed #adc7dc;border-radius:15px;padding:13px;background:#f7fbfe;cursor:pointer;transition:.18s}.upload-button:hover{border-color:var(--blue);background:#f2f9ff}.upload-button input{display:none}.upload-plus{width:38px;height:38px;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:24px;line-height:1}.upload-button>span:last-child{display:flex;flex-direction:column;gap:2px}.upload-button b{font-size:12px;color:var(--navy)}.upload-button small{font-size:10px;color:var(--muted)}
.adjustments{margin-top:15px;display:grid;gap:10px;transition:.2s}.adjustments.disabled{opacity:.45}.slider-row{display:grid;grid-template-columns:63px 1fr;align-items:center;gap:10px;font-size:10px;font-weight:800;color:var(--navy)}.slider-row input{width:100%;accent-color:var(--blue)}
.small-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.small-actions button{border:1px solid #d9e3ed;background:#fff;color:#34516d;border-radius:10px;padding:9px 8px;font-size:10px;font-weight:800}.small-actions button:not(:disabled):hover{border-color:#9ebbd4}.small-actions button:disabled{cursor:not-allowed;opacity:.5}
.sticker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sticker-option{aspect-ratio:1/1;border:1px solid #dbe5ee;border-radius:12px;background:linear-gradient(135deg,#f4f8fb,#e8f1f8);overflow:hidden;padding:5px;position:relative}.sticker-option:after{content:"";position:absolute;inset:0;background-image:linear-gradient(45deg,rgba(13,102,194,.035) 25%,transparent 25%,transparent 75%,rgba(13,102,194,.035) 75%),linear-gradient(45deg,rgba(13,102,194,.035) 25%,transparent 25%,transparent 75%,rgba(13,102,194,.035) 75%);background-size:12px 12px;background-position:0 0,6px 6px;z-index:0}.sticker-option img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}.sticker-option.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(13,102,194,.1)}.sticker-option .missing{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:5px;font-size:9px;font-weight:800;color:#668099;line-height:1.2}.sticker-badge{position:absolute;left:7px;top:7px;z-index:3;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:9px;font-weight:900}
.download-button,.new-button{width:100%;border-radius:12px;padding:13px 14px;font-weight:900;font-size:12px}.download-button{border:0;background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:var(--navy);box-shadow:0 10px 22px rgba(255,191,0,.21)}.download-button:disabled{filter:grayscale(.5);opacity:.45;cursor:not-allowed;box-shadow:none}.new-button{margin-top:8px;border:1px solid #dbe5ee;background:#fff;color:#415c76}

.preview-panel{min-width:0;background:linear-gradient(145deg,#eef6fc,#f9fbfd);display:flex;flex-direction:column;min-height:830px}.preview-topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 28px;border-bottom:1px solid #dfe8f0;background:rgba(255,255,255,.68)}.preview-topbar>div:first-child{display:flex;flex-direction:column;gap:3px}.preview-topbar span{font-size:9px;letter-spacing:.12em;color:var(--blue);font-weight:900}.preview-topbar b{font-size:12px;color:var(--navy)}.drag-hint{font-size:10px;color:#698098;font-weight:700;background:#fff;border:1px solid #dce6ef;border-radius:999px;padding:8px 11px}
.stage-wrap{flex:1;min-height:650px;padding:34px;display:grid;place-items:center;background-image:radial-gradient(circle at 50% 42%,rgba(50,182,240,.11),transparent 44%)}
.canvas-stage{position:relative;display:grid;place-items:center;max-width:100%;max-height:100%;touch-action:none}
#editorCanvas{display:block;background:#fff;box-shadow:0 22px 55px rgba(5,44,99,.18);border-radius:4px;touch-action:none;cursor:grab;max-width:100%}#editorCanvas:active{cursor:grabbing}
.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#7590aa;text-align:center}.empty-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#edf5fb;border:1px dashed #9dbad1;color:var(--blue);font-size:30px;margin-bottom:12px}.empty-state b{font-size:13px;color:#45627d}.empty-state small{font-size:10px;margin-top:4px}
.circle-guide{position:absolute;border:2px dashed rgba(255,255,255,.88);border-radius:50%;pointer-events:none;box-shadow:0 0 0 9999px rgba(0,0,0,.12),0 0 0 1px rgba(5,44,99,.18);display:none}
.preview-help{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:19px 28px 22px;border-top:1px solid #dfe8f0;background:#fff}.preview-help div{display:flex;flex-direction:column;gap:3px}.preview-help b{font-size:10px;color:var(--navy)}.preview-help span{font-size:9px;line-height:1.4;color:var(--muted);font-weight:600}

.campaign-band{background:var(--yellow);padding:48px 0;position:relative;overflow:hidden}.campaign-band:before{content:"";position:absolute;right:-100px;top:-180px;width:440px;height:440px;border:70px solid rgba(5,44,99,.07);border-radius:50%}.campaign-band-inner{width:min(1240px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:2}.campaign-band span{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--blue)}.campaign-band h2{margin:5px 0 0;font-size:clamp(34px,4vw,54px);line-height:1;font-weight:900;letter-spacing:-.04em;color:var(--navy)}.campaign-band img{width:225px;max-height:100px;object-fit:contain}
.site-footer{background:#031d43;color:#fff;padding:42px 0}.footer-inner{width:min(1240px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-brand{display:flex;align-items:center}.footer-brand img{width:220px;max-height:90px;object-fit:contain;object-position:left center}.footer-fallback{display:none;font-size:25px;font-weight:900;color:var(--yellow)}.footer-brand img.asset-failed + .footer-fallback{display:block}.footer-copy{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}.footer-copy b{font-size:12px}.footer-copy span{font-size:10px;color:rgba(255,255,255,.6)}
.toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,18px);background:#071e3d;color:#fff;border-radius:999px;padding:12px 17px;font-size:11px;font-weight:800;box-shadow:0 15px 40px rgba(0,0,0,.24);opacity:0;pointer-events:none;transition:.22s;max-width:calc(100% - 32px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:980px){
  .main-nav{display:none}.menu-toggle{display:flex}.header-inner{height:74px}.brand img{width:182px}
  .hero{min-height:auto}.hero-inner{grid-template-columns:1fr;min-height:0}.hero-copy{padding:66px 0 35px;max-width:760px}.hero-photo-wrap{height:410px;max-width:560px;margin:auto;width:100%}.hero-photo{max-height:440px}.hero-photo-halo{width:350px;height:350px;right:10%;bottom:22px}.hero-number{right:5%;font-size:60px;bottom:35px}.hero:after{bottom:-145px;height:205px;width:100%}
  .creator-shell{grid-template-columns:1fr}.steps-panel{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.step-block:nth-child(3),.step-block:nth-child(4){border-bottom:0}.preview-panel{min-height:auto}.stage-wrap{min-height:620px}
}

@media(max-width:640px){
  .header-inner,.hero-inner,.creator-shell,.campaign-band-inner,.footer-inner{width:min(100% - 26px,1240px)}.section-intro{width:min(100% - 26px,850px)}
  .header-inner{height:68px}.brand img{width:158px;max-height:50px}.menu-toggle{width:42px;height:42px}
  .hero-copy{padding:47px 0 24px}.hero-tag{font-size:10px;margin-bottom:14px}.hero h1{font-size:44px;max-width:440px}.hero-copy>p{font-size:14px;line-height:1.55;margin-top:18px}.hero-points{gap:6px}.hero-points span{font-size:9px;padding:7px 9px}.hero-button{font-size:12px;padding:13px 16px}.hero-photo-wrap{height:340px}.hero-photo{max-height:360px;max-width:100%}.hero-photo-halo{width:280px;height:280px;right:7%;bottom:25px}.hero-number{font-size:48px;right:1%;bottom:45px;letter-spacing:-4px}.hero:after{height:180px;bottom:-142px}
  .creator-section{padding:68px 0 72px}.section-intro{margin-bottom:28px}.section-intro h2{font-size:37px}.section-intro p{font-size:13px}.creator-shell{border-radius:23px}.steps-panel{padding:20px;display:block}.step-block{padding:17px 0 20px}.format-options{grid-template-columns:repeat(3,1fr);gap:6px}.format-btn{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px}.format-btn small{font-size:8px}.ratio-feed,.ratio-story{margin-left:0;margin-right:0}.sticker-grid{gap:7px}
  .preview-topbar{padding:16px 18px}.drag-hint{display:none}.stage-wrap{min-height:520px;padding:22px 14px}.preview-help{padding:15px 18px;gap:10px}.preview-help span{font-size:8px}
  .campaign-band{padding:37px 0}.campaign-band-inner{align-items:flex-start;flex-direction:column}.campaign-band h2{font-size:39px}.campaign-band img{width:180px}.footer-inner{flex-direction:column;align-items:flex-start}.footer-copy{align-items:flex-start;text-align:left}.footer-brand img{width:185px}
}

@media(max-width:390px){.hero h1{font-size:39px}.format-btn b{font-size:10px}.format-btn small{font-size:7px}.stage-wrap{min-height:470px}}