@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Nunito:wght@600;800&family=Caveat:wght@700&display=swap";
:root{--bg-cream:#fff8eb;--bg-yellow:#fde047;--bg-pink:#fbcfe8;--bg-cyan:#a5f3fc;--border-dark:#111;--primary:#facc15;--primary-hover:#eab308;--text-dark:#111;--text-muted:#555;--shadow-color:#111;--shadow-offset:6px;--shadow-offset-sm:4px;--radius-lg:16px;--radius-xl:24px;--radius-pill:9999px;--border-width:3px;--font-display:"Montserrat", sans-serif;--font-body:"Nunito", sans-serif;--font-handwritten:"Caveat", cursive}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--bg-cream);color:var(--text-dark);min-height:100vh;position:relative;overflow-x:hidden}body:before{content:"";z-index:-1;background-image:radial-gradient(var(--text-muted) 1px, transparent 1px);opacity:.15;background-size:24px 24px;position:fixed;inset:0}body:after{content:"";z-index:-2;background:radial-gradient(circle at 10% 20%,#fbcfe899 0%,#0000 40%),radial-gradient(circle at 90% 80%,#fde04780 0%,#0000 40%);position:fixed;inset:0}a{color:inherit;text-decoration:none}.neo-box{border:var(--border-width) solid var(--border-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);background:#fff;transition:transform .1s,box-shadow .1s}.neo-box:active{box-shadow:calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--shadow-color);transform:translate(2px,2px)}.neo-badge{background:var(--bg-cyan);border:var(--border-width) solid var(--border-dark);border-radius:var(--radius-pill);font-family:var(--font-display);text-transform:uppercase;letter-spacing:1px;padding:4px 16px;font-size:.8rem;font-weight:900;display:inline-block}.squiggly-line{background:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 20\" preserveAspectRatio=\"none\"><path d=\"M0,10 Q10,0 20,10 T40,10 T60,10 T80,10 T100,10\" fill=\"none\" stroke=\"%23111\" stroke-width=\"4\" stroke-linecap=\"round\"/></svg>") bottom/50px 10px repeat-x;padding-bottom:12px;display:inline-block}.btn-primary{background:var(--primary);color:var(--text-dark);border:var(--border-width) solid var(--border-dark);font-size:1.1rem;font-weight:900;font-family:var(--font-display);text-transform:uppercase;border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);justify-content:center;align-items:center;padding:16px 32px;transition:all .1s;display:inline-flex}.btn-primary:hover{background:var(--primary-hover);box-shadow:calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0px var(--shadow-color);transform:translate(-2px,-2px)}.btn-primary:active{transform:translate(var(--shadow-offset), var(--shadow-offset));box-shadow:0px 0px 0px var(--shadow-color)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);transform:none}.btn-icon{color:var(--text-dark);border:var(--border-width) solid var(--border-dark);border-radius:var(--radius-lg);cursor:pointer;width:56px;height:56px;box-shadow:var(--shadow-offset-sm) var(--shadow-offset-sm) 0px var(--shadow-color);background:#fff;justify-content:center;align-items:center;font-size:1.5rem;transition:all .1s;display:inline-flex}.btn-icon:hover{box-shadow:6px 6px 0px var(--shadow-color);transform:translate(-2px,-2px)}.btn-icon:active{box-shadow:0px 0px 0px var(--shadow-color);transform:translate(4px,4px)}.sender-page{flex-direction:column;align-items:center;min-height:100vh;padding:60px 16px 40px;display:flex}.sender-header{text-align:center;margin-bottom:40px}.sender-step-badge{background:var(--primary);border:2px solid var(--border-dark);border-radius:var(--radius-pill);font-family:var(--font-display);text-transform:uppercase;margin-bottom:16px;padding:6px 20px;font-size:.9rem;font-weight:900;display:inline-block}.sender-title{font-family:var(--font-display);text-transform:uppercase;color:var(--text-dark);margin-bottom:16px;font-size:clamp(2rem,5vw,3rem);font-weight:900;line-height:1.1}.sender-subtitle{font-family:var(--font-handwritten);color:var(--text-muted);font-size:1.5rem}.sender-form-wrapper{flex-direction:column;gap:32px;width:100%;max-width:500px;display:flex}.input-group{width:100%;position:relative}.input-badge{background:var(--bg-cyan);border:var(--border-width) solid var(--border-dark);border-radius:var(--radius-pill);font-family:var(--font-display);text-transform:uppercase;z-index:10;padding:2px 12px;font-size:.75rem;font-weight:900;position:absolute;top:-12px;left:20px}.input-badge.pink{background:var(--bg-pink)}.input-badge.yellow{background:var(--bg-yellow)}.sender-input,.sender-textarea{border:var(--border-width) solid var(--border-dark);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);color:var(--text-dark);font-size:1.1rem;font-weight:600;font-family:var(--font-body);background:#fff;outline:none;padding:24px 20px 16px;transition:transform .1s}.sender-input:focus,.sender-textarea:focus{box-shadow:8px 8px 0px var(--shadow-color);transform:translate(-2px,-2px)}.sender-input::placeholder,.sender-textarea::placeholder{color:#a3a3a3;font-weight:600}.sender-textarea{resize:vertical;min-height:120px}.form-actions{gap:16px;margin-top:20px;display:flex}.form-actions .btn-primary{flex:1}.sender-photo-upload{border:var(--border-width) dashed var(--border-dark);border-radius:var(--radius-lg);text-align:center;cursor:pointer;box-shadow:var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);background:#fff;padding:40px 20px;transition:all .1s}.sender-photo-upload:hover{background:var(--bg-cream);transform:translate(-2px,-2px)}.sender-photo-preview{border:var(--border-width) solid var(--border-dark);border-radius:calc(var(--radius-lg) - 4px);width:100%;margin-top:16px}.sender-options{grid-template-columns:1fr 1fr;gap:16px;display:grid}.sender-option{border:var(--border-width) solid var(--border-dark);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-offset-sm) var(--shadow-offset-sm) 0px var(--shadow-color);background:#fff;align-items:center;gap:10px;padding:16px;font-size:1rem;font-weight:800;display:flex}.sender-option.selected{background:var(--primary);box-shadow:2px 2px 0px var(--border-dark);transform:translate(2px,2px)}.navbar{z-index:100;background:var(--bg-yellow);border-bottom:var(--border-width) solid var(--border-dark);align-items:center;height:72px;padding:0 24px;display:flex;position:fixed;top:0;left:0;right:0}.navbar__container{justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto;display:flex}.navbar__brand{font-family:var(--font-display);color:var(--text-dark);align-items:center;gap:10px;font-size:1.5rem;font-weight:900;display:flex}.bento-card{border:var(--border-width) solid var(--border-dark);border-radius:var(--radius-xl);box-shadow:8px 8px 0px var(--border-dark);color:var(--text-dark);background:#fff;padding:32px 24px;transition:all .1s;position:relative}.bento-card:hover{box-shadow:12px 12px 0px var(--border-dark);transform:translate(-4px,-4px)}.bento-card__title{font-family:var(--font-display);text-transform:uppercase;margin-bottom:12px;font-size:1.5rem;font-weight:900}.bento-card__desc{color:var(--text-muted);margin-bottom:24px;font-weight:600;line-height:1.5}.bento-card__emoji{margin-bottom:20px;font-size:3rem;display:inline-block}.bento-card__cta{background:var(--primary);border:2px solid var(--border-dark);border-radius:var(--radius-pill);font-weight:800;font-family:var(--font-display);padding:6px 16px;display:inline-block}.share-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.share-modal{border:var(--border-width) solid var(--border-dark);border-radius:var(--radius-xl);box-shadow:12px 12px 0px var(--border-dark);text-align:center;background:#fff;width:100%;max-width:460px;padding:40px 32px}.share-modal__title{font-family:var(--font-display);text-transform:uppercase;margin-bottom:12px;font-size:2rem;font-weight:900}.share-link-input{border:2px solid var(--border-dark);background:var(--bg-cream);border-radius:8px;font-weight:700}.surprise-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:20px;display:flex;position:relative;overflow:hidden}@media (max-width:600px){.sender-title{font-size:2rem}.sender-options{grid-template-columns:1fr}}.navbar__links{gap:24px;list-style:none;display:flex}.navbar__link{color:var(--text-dark);text-transform:uppercase;font-size:1.1rem;font-weight:800}.navbar__link:hover{color:var(--text-muted)}.hero-section{text-align:center;max-width:800px;margin:0 auto;padding:140px 24px 80px}.hero-overline{color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px;font-weight:800}.hero-title{font-family:var(--font-display);text-transform:uppercase;margin-bottom:24px;font-size:clamp(3rem,8vw,5rem);font-weight:900;line-height:1.1}.hero-subtitle{color:var(--text-muted);margin-bottom:40px;font-size:1.25rem;font-weight:600;line-height:1.5}.bento-section{max-width:1200px;margin:0 auto;padding:60px 24px}.bento-section__title{font-family:var(--font-display);text-align:center;text-transform:uppercase;margin-bottom:40px;font-size:3rem;font-weight:900}.bento-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;display:grid}.how-section{max-width:1200px;margin:0 auto;padding:80px 24px}.how-section__title{font-family:var(--font-display);text-align:center;text-transform:uppercase;margin-bottom:40px;font-size:3rem;font-weight:900}.how-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;display:grid}.how-card{background:var(--bg-cyan);border:var(--border-width) solid var(--border-dark);border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);padding:32px 24px}.how-card__icon{margin-bottom:16px;font-size:4rem}.how-card__step{font-family:var(--font-display);text-transform:uppercase;margin-bottom:8px;font-size:1.5rem;font-weight:900}.how-card__text{color:var(--text-muted);font-weight:700}.footer{text-align:center;border-top:var(--border-width) solid var(--border-dark);background:#fff;padding:40px 24px;font-weight:700}