@import "https://fonts.googleapis.com/css2?family=Righteous&family=Courier+Prime:wght@400;700&family=Alfa+Slab+One&display=swap";
:root{--teal:#007991;--coral:#ff6b6b;--cream:#fff5e6;--chocolate:#3d1e0f;--mustard:#ffb627;--olive:#6b7a3a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--chocolate);color:var(--cream);font-family:Courier Prime,monospace;line-height:1.6;position:relative;overflow-x:hidden}body:before{content:"";background:radial-gradient(circle at 20% 50%,var(--teal)0%,transparent 50%),radial-gradient(circle at 80% 80%,var(--coral)0%,transparent 50%),radial-gradient(circle at 40% 20%,var(--mustard)0%,transparent 40%);opacity:.15;z-index:0;pointer-events:none;width:100%;height:100%;animation:20s ease-in-out infinite bgPulse;position:fixed;top:0;left:0}body:after{content:"";background-image:radial-gradient(circle,var(--chocolate)1px,transparent 1px);opacity:.4;pointer-events:none;z-index:1;background-size:8px 8px;width:100%;height:100%;position:fixed;top:0;left:0}main{z-index:2;position:relative}@keyframes bgPulse{0%,to{opacity:.15}50%{opacity:.25}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(100px)rotate(5deg)}to{opacity:1;transform:translate(0)rotate(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.5)rotate(-10deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:.95;transform:translateY(0)}}h1{margin:0;font-family:Righteous,sans-serif;font-size:clamp(3rem,10vw,8rem);line-height:1.1}h2{margin:0;font-family:Righteous,sans-serif;font-size:clamp(3rem,7vw,5rem);line-height:1.2}h3{font-family:Righteous,sans-serif;font-size:clamp(1.5rem,4vw,2.5rem);line-height:1.3}p{font-size:clamp(1.1rem,2.5vw,1.3rem);line-height:1.6}.logo{color:var(--mustard);font-family:Alfa Slab One,serif;font-size:clamp(2rem,5vw,3rem);animation:.8s cubic-bezier(.16,1,.3,1) backwards slideInLeft}.cta-button{background:var(--coral);color:var(--chocolate);cursor:pointer;text-align:center;border:none;padding:22px 60px;font-family:Righteous,sans-serif;font-size:1.3rem;text-decoration:none;transition:transform .2s;display:inline-block;position:relative;overflow:hidden}.cta-button:before{content:"";background:var(--mustard);z-index:-1;width:100%;height:100%;transition:left .3s;position:absolute;top:0;left:-100%}.cta-button:hover:before{left:0}.cta-button:hover{transform:scale(1.05)}.section{max-width:1200px;margin:0 auto;padding:100px 20px}.hero{flex-direction:column;justify-content:center;max-width:1200px;min-height:100vh;margin:0 auto;padding:40px 20px;display:flex}.hero-content{max-width:900px}.hero h1{margin-bottom:20px;animation:.8s cubic-bezier(.16,1,.3,1) .2s backwards slideInRight}.hero-words{display:inline}.hero-word{margin-right:.2em;display:inline-block}.hero-word:first-child{animation:.5s cubic-bezier(.16,1,.3,1) .3s backwards popIn}.hero-word:nth-child(2){animation:.5s cubic-bezier(.16,1,.3,1) .4s backwards popIn}.hero-word:nth-child(3){animation:.5s cubic-bezier(.16,1,.3,1) .5s backwards popIn}.hero-word:nth-child(4){animation:.5s cubic-bezier(.16,1,.3,1) .6s backwards popIn}.hero-subtitle{opacity:.95;max-width:700px;margin-bottom:40px;font-size:clamp(1.1rem,2.5vw,1.5rem);animation:.8s cubic-bezier(.16,1,.3,1) .7s backwards fadeInUp}.hero .cta-button{animation:.8s cubic-bezier(.16,1,.3,1) .9s backwards fadeInUp}.problem-section{background:var(--teal);clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);padding:120px 20px;position:relative}.problem-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:60px;max-width:1200px;margin:0 auto;display:grid}.problem-box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:8px solid var(--mustard);background:#ffffff1a;padding:50px;transition:transform .3s}.problem-box:first-child{transform:rotate(-1deg)}.problem-box:last-child{transform:rotate(1deg)}.problem-box:hover{transform:rotate(0)scale(1.02)}.problem-box h2{color:var(--mustard);margin-bottom:20px}.steps-section{padding:100px 20px}.steps-title{text-align:center;color:var(--mustard);margin-bottom:80px}.steps-grid{gap:80px;max-width:900px;margin:0 auto;display:grid}.step{background:var(--teal);padding:50px;transition:transform .3s;position:relative}.step:hover{transform:scale(1.03)}.step:first-child{clip-path:polygon(0 0,100% 5%,100% 100%,0 95%);margin-left:0}.step:nth-child(2){clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);margin-left:60px}.step:nth-child(3){clip-path:polygon(0 0,100% 5%,100% 100%,0 95%);margin-left:0}.step-number{color:var(--coral);opacity:.3;font-family:Alfa Slab One,serif;font-size:8rem;line-height:1;position:absolute;top:-20px;right:20px}.step h3{color:var(--mustard);margin-bottom:15px}.demo-section{background:var(--coral);padding:100px 20px}.demo-container{text-align:center;max-width:900px;margin:0 auto}.demo-title{color:var(--chocolate);margin-bottom:30px}.demo-description{color:var(--chocolate);opacity:.9;margin-bottom:50px;font-size:1.3rem}.demo-buttons{background:var(--chocolate);border:12px solid var(--mustard);box-shadow:20px 20px 0 var(--olive);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:50px;display:grid}.ai-button{background:var(--teal);color:var(--cream);text-align:center;border:4px solid var(--cream);padding:25px;font-family:Righteous,sans-serif;font-size:1.1rem;text-decoration:none;transition:all .2s;display:block}.ai-button:hover{background:var(--mustard);color:var(--chocolate);box-shadow:5px 5px 0 var(--coral);transform:translate(-5px,-5px)}.demo-note{color:var(--chocolate);opacity:.8;margin-top:40px;font-style:italic}.stats-section{padding:100px 20px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;max-width:1200px;margin:0 auto;display:grid}.stat{text-align:center;background:var(--olive);aspect-ratio:1;border-radius:50%;flex-direction:column;justify-content:center;padding:40px;transition:transform .3s;display:flex}.stat:hover{transform:rotate(5deg)scale(1.1)}.stat-number{color:var(--mustard);margin-bottom:10px;font-family:Alfa Slab One,serif;font-size:5rem;line-height:1}.stat-label{color:var(--cream);font-family:Righteous,sans-serif;font-size:1.2rem}.final-cta{background:linear-gradient(45deg,var(--teal)25%,transparent 25%),linear-gradient(-45deg,var(--teal)25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--coral)75%),linear-gradient(-45deg,transparent 75%,var(--coral)75%);text-align:center;background-position:0 0,0 30px,30px -30px,-30px 0;background-size:60px 60px;padding:150px 20px}.final-cta h2{color:var(--cream);text-shadow:5px 5px 0 var(--chocolate);margin-bottom:50px}.generator-section{background:var(--chocolate);padding:100px 20px}.generator-title{text-align:center;color:var(--mustard);margin-bottom:60px}.generator-container{max-width:900px;margin:0 auto}.generator-form{border-left:8px solid var(--coral);background:#0079911a;margin-bottom:60px;padding:40px}.form-group{margin-bottom:30px}.form-group label{color:var(--mustard);margin-bottom:10px;font-family:Righteous,sans-serif;font-size:1.2rem;display:block}.form-input,.form-select{background:var(--cream);width:100%;color:var(--chocolate);border:3px solid var(--teal);outline:none;padding:15px;font-family:Courier Prime,monospace;font-size:1.1rem;transition:border-color .2s}.form-input:focus,.form-select:focus{border-color:var(--coral)}.template-preview{border-left:3px solid var(--mustard);color:var(--cream);opacity:.9;background:#ffb6271a;margin-top:15px;padding:15px;font-size:.95rem}.platform-checkboxes{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:15px;display:grid}.platform-checkbox{border:2px solid var(--teal);cursor:pointer;background:#fff5e60d;align-items:center;gap:10px;padding:12px;transition:all .2s;display:flex}.platform-checkbox:hover{border-color:var(--coral);background:#fff5e61a}.platform-checkbox input[type=checkbox]{cursor:pointer;width:20px;height:20px}.platform-checkbox span{color:var(--cream);font-size:1rem}.generate-button{width:100%;margin-top:20px}.results-section{border-left:8px solid var(--mustard);background:#6b7a3a1a;padding:40px}.results-section h3{color:var(--coral);margin-bottom:30px;font-family:Righteous,sans-serif;font-size:2rem}.links-list{margin-bottom:40px}.link-item{border:2px solid var(--teal);background:#fff5e60d;margin-bottom:20px;padding:20px}.link-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px;display:flex}.link-platform{color:var(--mustard);font-family:Righteous,sans-serif;font-size:1.2rem}.link-actions{gap:10px;display:flex}.copy-button,.test-button{border:2px solid var(--cream);background:var(--teal);color:var(--cream);cursor:pointer;padding:8px 20px;font-family:Courier Prime,monospace;font-size:.9rem;text-decoration:none;transition:all .2s;display:inline-block}.copy-button:hover,.test-button:hover{background:var(--coral);transform:translateY(-2px)}.link-url{background:var(--chocolate);width:100%;color:var(--cream);border:2px solid var(--teal);outline:none;padding:12px;font-family:Courier Prime,monospace;font-size:.9rem}.html-code-section{border-top:2px solid var(--teal);margin-top:40px;padding-top:40px}.html-description{color:var(--cream);opacity:.9;margin-bottom:20px}.code-block{background:var(--chocolate);border:3px solid var(--mustard);padding:20px;position:relative;overflow-x:auto}.code-block pre{color:var(--cream);white-space:pre-wrap;word-wrap:break-word;margin:0;font-family:Courier Prime,monospace;font-size:.9rem}.copy-button-code{background:var(--coral);color:var(--chocolate);cursor:pointer;border:none;padding:8px 16px;font-family:Courier Prime,monospace;font-size:.85rem;transition:all .2s;position:absolute;top:10px;right:10px}.copy-button-code:hover{background:var(--mustard);transform:scale(1.05)}@media (max-width:768px){h1{font-size:2.5rem}.step:nth-child(2n){margin-left:0}.demo-buttons{box-shadow:10px 10px 0 var(--olive);border-width:6px;padding:30px 20px}.stat{aspect-ratio:auto;border-radius:0;padding:30px}.step-number{font-size:4rem}.generator-form{padding:20px}.platform-checkboxes{grid-template-columns:1fr}.link-header{flex-direction:column;align-items:flex-start}.code-block{padding:15px}.copy-button-code{width:100%;margin-top:15px;position:static}}