:root{--cream:#f7f1e6;--ink:#101010;--blue:#1b58ff;--orange:#ff6128;--yellow:#ffd83d;--green:#27bf6a;--purple:#8757f5;--line:rgba(16,16,16,.14);--shadow:0 18px 38px rgba(20,16,8,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#eee8dc}body{margin:0;background:linear-gradient(180deg,#eee8dc 0%,#f7f1e6 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh}.page{width:min(1500px,calc(100% - 28px));margin:14px auto;background:var(--cream);border-radius:30px;overflow:hidden;min-height:calc(100vh - 28px);box-shadow:0 22px 60px rgba(20,16,8,.12)}a{color:inherit;text-decoration:none}button,input{font:inherit}
header{display:flex;align-items:center;justify-content:space-between;padding:24px 48px;position:sticky;top:0;background:rgba(247,241,230,.89);backdrop-filter:blur(18px);z-index:10}.logo{font-size:28px;font-weight:950;letter-spacing:-.065em}.logo small{font-size:14px;color:var(--blue);letter-spacing:-.02em}.nav{display:flex;gap:34px;font-size:15px}.nav a{position:relative}.nav a:first-child:after{content:"";position:absolute;left:50%;bottom:-10px;width:5px;height:5px;background:var(--blue);border-radius:50%}.round{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.3);display:grid;place-items:center;cursor:pointer;font-weight:850;transition:.18s}.round:hover{background:#fff;transform:rotate(4deg) scale(1.04)}
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:30px;padding:44px 56px 20px;min-height:510px}.hero-copy{position:relative;z-index:2}.hero h1{margin:0;font-size:clamp(78px,11vw,162px);line-height:.82;letter-spacing:-.09em;font-weight:950}.hero h2{font-size:clamp(29px,3vw,48px);line-height:1.03;letter-spacing:-.055em;max-width:690px;margin:31px 0}.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.surprise{display:inline-flex;align-items:center;gap:16px;border:0;background:var(--blue);color:#fff;padding:16px 19px 16px 24px;border-radius:999px;font-size:19px;font-weight:850;box-shadow:0 9px 0 rgba(27,88,255,.16);cursor:pointer;transition:transform .16s,box-shadow .16s}.surprise:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 13px 0 rgba(27,88,255,.13)}.dice{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);position:relative}.dice:before{content:"";width:14px;height:14px;border:2px solid currentColor;border-radius:3px;transform:rotate(12deg);background:radial-gradient(circle at 32% 32%,currentColor 0 1.5px,transparent 2px),radial-gradient(circle at 68% 68%,currentColor 0 1.5px,transparent 2px),radial-gradient(circle at 68% 32%,currentColor 0 1.5px,transparent 2px)}.scribble{color:var(--blue);font-family:"Comic Sans MS","Segoe Print",cursive;font-size:15px;transform:rotate(-4deg)}
.art{--mx1:0px;--my1:0px;--mx2:0px;--my2:0px;--mx3:0px;--my3:0px;--mx4:0px;--my4:0px;min-height:430px;position:relative;cursor:pointer;isolation:isolate}.art:before{content:"";position:absolute;width:140px;height:140px;border:2px dotted rgba(16,16,16,.2);border-radius:50%;right:10px;bottom:6px;opacity:.35;transform:translate(var(--mx1),var(--my1));transition:transform .32s cubic-bezier(.2,.78,.22,1)}.box-shadow{position:absolute;left:28%;top:182px;width:246px;height:175px;background:rgba(0,0,0,.06);transform:translate(calc(18px + var(--mx1)),calc(18px + var(--my1))) rotate(-3deg);transition:transform .32s cubic-bezier(.2,.78,.22,1)}.box{position:absolute;left:28%;top:170px;width:246px;height:182px;background:var(--yellow);transform:translate(var(--mx2),var(--my2)) rotate(-3deg);box-shadow:inset -12px -10px 0 rgba(255,171,0,.12);transition:transform .3s cubic-bezier(.2,.78,.22,1)}.box:before{content:"";position:absolute;width:66px;height:66px;left:30px;top:52px;background:var(--orange);clip-path:polygon(50% 0,61% 35%,98% 22%,72% 52%,100% 75%,63% 68%,50% 100%,38% 68%,0 75%,28% 52%,2% 22%,39% 35%)}.box:after{content:"";position:absolute;right:36px;top:58px;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:58px solid var(--blue);transform:rotate(8deg)}.lid{position:absolute;left:42%;top:99px;width:224px;height:120px;background:var(--blue);transform:translate(var(--mx2),var(--my2)) rotate(-13deg);border-radius:13px;box-shadow:0 12px 22px rgba(27,88,255,.13);transition:transform .3s cubic-bezier(.2,.78,.22,1)}.spring{position:absolute;left:45.5%;top:85px;width:86px;height:140px;border:7px solid #171717;border-left-color:transparent;border-right-color:transparent;border-radius:50%;transform:translate(var(--mx3),var(--my3)) rotate(6deg);box-shadow:0 24px 0 -18px #171717,0 47px 0 -18px #171717;transition:transform .28s cubic-bezier(.2,.78,.22,1)}.face{position:absolute;left:40%;top:2px;width:128px;height:128px;border-radius:50%;background:var(--orange);display:grid;place-items:center;box-shadow:0 15px 30px rgba(0,0,0,.11);animation:bob 3.4s ease-in-out infinite;will-change:transform}.face svg{width:72px;height:72px}.star{position:absolute;left:7%;top:140px;width:58px;height:58px;background:var(--green);clip-path:polygon(50% 0,62% 36%,100% 50%,62% 63%,50% 100%,37% 63%,0 50%,37% 36%);transform:translate(var(--mx1),var(--my1)) rotate(14deg);transition:transform .34s cubic-bezier(.2,.78,.22,1)}.dot{position:absolute;right:10%;top:55px;width:22px;height:22px;border-radius:50%;background:var(--purple);transform:translate(var(--mx4),var(--my4));transition:transform .34s cubic-bezier(.2,.78,.22,1)}.confetti{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 8% 55%,var(--orange) 0 3px,transparent 4px),radial-gradient(circle at 78% 20%,var(--green) 0 3px,transparent 4px),radial-gradient(circle at 91% 62%,var(--blue) 0 3px,transparent 4px);transform:translate(var(--mx1),var(--my1));transition:transform .36s cubic-bezier(.2,.78,.22,1)}.note{position:absolute;right:2%;top:120px;width:212px;background:#fff0bf;padding:24px;border-radius:17px;transform:translate(var(--mx4),var(--my4)) rotate(5deg);box-shadow:0 14px 28px rgba(0,0,0,.07);font:17px/1.38 "Comic Sans MS","Segoe Print",cursive;transition:transform .3s cubic-bezier(.2,.78,.22,1)}.note:before{content:"";position:absolute;top:-14px;left:70px;width:72px;height:30px;background:#d8cdfc;opacity:.72;transform:rotate(1deg)}.spark{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:3px;pointer-events:none;z-index:30;animation:sparkFly .72s cubic-bezier(.1,.8,.2,1) forwards;transform:translate(-50%,-50%)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:30px 52px 44px}.card{min-height:340px;border-radius:24px;padding:24px;position:relative;box-shadow:var(--shadow);border:1px solid rgba(16,16,16,.035);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-8px) rotate(0deg)!important;box-shadow:0 24px 44px rgba(20,16,8,.12)}.card:nth-child(1){background:#e8dcff;transform:rotate(-1.7deg)}.card:nth-child(2){background:#dbf2e2;transform:rotate(1.3deg)}.card:nth-child(3){background:#ffefa5;transform:rotate(-.9deg)}.card:nth-child(4){background:#dbe8ff;transform:rotate(1.6deg)}.badge{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900}.card:nth-child(1) .badge{background:var(--purple)}.card:nth-child(2) .badge{background:var(--green)}.card:nth-child(3) .badge{background:var(--orange)}.card:nth-child(4) .badge{background:var(--blue)}.card h3{font-size:29px;line-height:.97;letter-spacing:-.05em;margin:31px 0 12px;max-width:230px}.card p{font-size:14px;line-height:1.5;max-width:220px;margin:0}.tool-visual{position:absolute;right:28px;bottom:68px;width:96px;height:96px;filter:drop-shadow(0 13px 10px rgba(0,0,0,.09));transition:transform .22s}.card:hover .tool-visual{transform:rotate(4deg) scale(1.05)}.tool-visual svg{width:100%;height:100%;overflow:visible}.go{position:absolute;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px;transition:transform .18s}.card:hover .go{transform:rotate(-10deg) scale(1.05)}.card:nth-child(1) .go{background:var(--purple)}.card:nth-child(2) .go{background:var(--green)}.card:nth-child(3) .go{background:var(--orange)}.card:nth-child(4) .go{background:var(--blue)}
.stripe{margin:10px 52px 36px;border:1px solid var(--line);border-radius:20px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(255,255,255,.18)}.stripe strong{font-size:17px}.email{display:flex;gap:8px;flex:1;max-width:440px}.email input{flex:1;border:1px solid var(--line);background:#fff;border-radius:999px;padding:12px 16px;outline:none}.email input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,88,255,.08)}.email button{border:0;border-radius:999px;background:var(--yellow);padding:12px 18px;font-weight:850;cursor:pointer;transition:transform .15s}.email button:hover{transform:translateY(-2px) rotate(-1deg)}footer{display:grid;grid-template-columns:1fr auto;gap:20px;padding:28px 52px 36px}.elsewhere{display:flex;gap:30px;align-items:flex-start}.elsewhere a{font-weight:950;font-size:22px}.elsewhere small{display:block;font-size:12px;font-weight:500;margin-top:5px}.bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;font-size:12px}.peeker{position:fixed;left:50%;bottom:-39px;transform:translateX(-50%);width:90px;height:90px;border:0;border-radius:50%;background:var(--orange);display:grid;place-items:center;z-index:18;cursor:pointer;box-shadow:0 -8px 24px rgba(255,97,40,.12);transition:bottom .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1)}.peeker:hover{bottom:-22px;transform:translateX(-50%) scale(1.06)}.peeker.peeked{bottom:10px;transform:translateX(-50%) scale(1.08) rotate(5deg)}.peeker svg{width:52px;height:52px}
@keyframes bob{0%,100%{transform:translate(var(--mx3),var(--my3)) rotate(4deg)}50%{transform:translate(var(--mx3),calc(var(--my3) - 9px)) rotate(2deg)}}@keyframes sparkFly{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(var(--sr)) scale(.3)}}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.art{min-height:370px}.cards{grid-template-columns:repeat(2,1fr)}.note{right:8%}}
@media(max-width:700px){.page{width:100%;margin:0;border-radius:0}header{padding:18px}.nav{display:none}.hero{padding:30px 20px 10px;min-height:0}.hero h1{font-size:clamp(64px,22vw,105px)}.hero h2{font-size:30px}.hero-actions{align-items:flex-start}.scribble{display:block;width:100%;margin-left:8px}.art{min-height:335px;transform:scale(.82);transform-origin:left top;width:121%;margin-bottom:-45px;cursor:default}.cards{grid-template-columns:1fr;padding:16px 20px 36px}.card{min-height:310px}.stripe{margin:0 20px 28px;flex-direction:column;align-items:stretch}.email{max-width:none;flex-direction:column}.stripe button{width:100%}footer{padding:24px 20px 90px;grid-template-columns:1fr}.elsewhere{flex-direction:column}.bottom{flex-direction:column;gap:8px}.peeker{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}.spark{display:none}}