.web-design-page{color:#fff;z-index:1;min-height:100vh;position:relative}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.hero-section{justify-content:space-between;align-items:center;gap:4rem;padding:100px 0;display:flex}.hero-content{flex:1}.hero-headline{background:linear-gradient(90deg,#fff,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1.5rem;font-size:3.5rem;font-weight:800;line-height:1.1}.hero-intro{color:#ffffffb3;margin-bottom:2.5rem;font-size:1.25rem;line-height:1.6}.hero-visual{flex:1;justify-content:center;align-items:center;display:flex;position:relative}.visual-box{aspect-ratio:16/10;width:100%;position:relative;overflow:hidden}.blueprint-lines{background-image:linear-gradient(#a855f71a 1px,#0000 1px),linear-gradient(90deg,#a855f71a 1px,#0000 1px);background-size:20px 20px;animation:20s linear infinite move-grid;position:absolute;inset:0}@keyframes move-grid{0%{background-position:0 0}to{background-position:40px 40px}}.section{padding:80px 0}.two-column{align-items:center;gap:4rem;display:flex}.reverse{flex-direction:row-reverse}.section-title{margin-bottom:1rem;font-size:2.5rem;font-weight:700}.section-subtitle{color:#a855f7;margin-bottom:2rem;font-size:1.1rem;display:block}.key-points{flex-direction:column;gap:2rem;display:flex}.key-point{gap:1.5rem;display:flex}.point-icon{border-radius:var(--square-radius);background:#a855f71a;flex-shrink:0;justify-content:center;align-items:center;width:47px;height:47px;padding:5px;font-size:1.5rem;display:flex}.point-content h4{margin-bottom:.5rem;font-size:1.25rem}.point-content p{color:#fff9;line-height:1.5}.micro-copy{color:#fff6;margin-top:2rem;font-size:.9rem;font-style:italic}.visual-placeholder{aspect-ratio:4/3;border-radius:1rem;flex:1;justify-content:center;align-items:center;display:flex}.full-width-section{background:#ffffff05;padding:100px 0}.text-center{text-align:center;margin-bottom:4rem}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:3rem;display:grid}.feature-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:1rem;padding:2rem;transition:transform .3s,border-color .3s}.feature-card:hover{border-color:#a855f7;transform:translateY(-5px)}.feature-card h4{margin-bottom:.5rem;font-size:1.25rem}.supporting-line{text-align:center;color:#ffffff80}.mb-12{margin-bottom:3rem}.mt-16{margin-top:4rem}.mt-6{margin-top:1.5rem}.dynamic-visual{justify-content:center;align-items:center;gap:10px;height:60px;margin:10px 0;display:flex;position:relative}.floating-dot{background:#a855f7;border-radius:50%;width:12px;height:12px;animation:3s ease-in-out infinite float}.floating-dot:nth-child(2){background:#3b82f6;animation-delay:.5s}.floating-dot:nth-child(3){background:#ec4899;animation-delay:1s}@keyframes float{0%,to{opacity:.6;transform:translateY(0)scale(1)}50%{opacity:1;transform:translateY(-20px)scale(1.2)}}.glow-line{background:linear-gradient(90deg,#0000,#a855f7,#3b82f6,#0000) 0 0/200% 100%;width:100%;height:2px;animation:3s linear infinite glow-move}@keyframes glow-move{0%{background-position:100% 0}to{background-position:-100% 0}}.section-intro{color:#ffffffb3;max-width:800px;margin:0 auto;font-size:1.1rem;line-height:1.6}.seo-grid{grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:4rem;display:grid}.seo-main{background:#ffffff0b;border:1px solid #ffffff0d;border-radius:1.5rem;grid-column:span 2;padding:3rem}.seo-main h3{margin-bottom:1.5rem;font-size:2rem}.custom-list{grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0;list-style:none;display:grid}.custom-list li{color:#fffc;align-items:center;gap:.75rem;display:flex}.custom-list li:before{content:"→";color:#a855f7}.highlight-text{color:#ffffffe6;border-left:2px solid #a855f7;padding-left:1.5rem;font-style:italic}.seo-feature-card{background:#ffffff05;border:1px solid #ffffff0d;border-radius:1rem;flex-direction:column;gap:1rem;padding:2rem;display:flex}.seo-feature-card h4{color:#a855f7;font-size:1.25rem}.seo-feature-card.highlight{background:#a855f70d;border-color:#a855f733}.feature-results{border-top:1px solid #ffffff0d;margin-top:auto;padding-top:1.5rem}.feature-results h5{color:#fff;margin-bottom:.75rem}.feature-results ul{margin-bottom:1rem;list-style:none}.feature-results ul li{color:#fff9;margin-bottom:.25rem;font-size:.9rem}.result-tag{color:#a855f7;background:#a855f71a;border-radius:.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;display:inline-block}.security-box{background:linear-gradient(90deg,#a855f70d,#3b82f60d);border:1px solid #ffffff1a;border-radius:1.5rem;padding:3rem}.align-start{align-items:flex-start}.grid-list{grid-template-columns:repeat(2,1fr);gap:.5rem;display:grid}.check-list{list-style:none}.check-list li:before{content:"✓";color:#10b981;margin-right:.75rem}.security-content{flex:1}.security-benefits{background:#ffffff08;border-radius:1rem;flex:1;padding:2rem}.interactive-card{background:#a855f70d;border-color:#a855f733;grid-column:span 1}.interactive-examples{justify-content:space-around;align-items:center;gap:1.5rem;padding:1.5rem 0;display:flex}.example-box{flex-direction:column;align-items:center;gap:.75rem;display:flex}.example-box span{color:#fff9;font-size:.85rem;font-weight:500}.rocket-btn{cursor:pointer;background:0 0;border:none;font-size:2.5rem;transition:transform .3s;position:relative}.rocket-btn:hover{transform:scale(1.1)}.rocket-btn.launched{animation:1.5s cubic-bezier(.4,0,.2,1) forwards rocket-launch}@keyframes rocket-launch{0%{transform:translateY(0)rotate(0)}20%{transform:translateY(10px)rotate(0)}to{opacity:0;transform:translateY(-100vh)rotate(-10deg)}}.jiggle-circle{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:70px;height:70px;padding:0;display:flex;position:relative}.circle-inner{background:radial-gradient(circle at 35% 35%,hsla(var(--circle-hue,280),90%,95%,.9)0%,hsla(var(--circle-hue,280),80%,70%,.6)20%,hsla(var(--circle-hue,280),70%,50%,.4)50%,hsla(var(--circle-hue,280),60%,30%,.7)100%);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid hsla(var(--circle-hue,280),100%,80%,.3);width:50px;height:50px;box-shadow:0 10px 20px hsla(var(--circle-hue,280),80%,40%,.3),inset 0 0 15px hsla(var(--circle-hue,280),100%,80%,.2),inset 0 2px 5px #fffc,inset -5px -5px 15px hsla(var(--circle-hue,280),100%,20%,.5);border-radius:50%;transition:all .4s;position:relative}.circle-inner:after{content:"";filter:blur(1px);background:linear-gradient(#ffffffb3,#0000);border-radius:50%;width:30%;height:20%;position:absolute;top:10%;left:20%;transform:rotate(-25deg)}.circle-inner:before{content:"";background:hsla(var(--circle-hue,280),100%,80%,.2);filter:blur(3px);border-radius:50%;width:25%;height:15%;position:absolute;bottom:10%;right:15%}.jiggle-circle.jiggling .circle-inner{opacity:.9;animation:.8s ease-in-out gelatin-free;-webkit-mask-image:radial-gradient(circle,#000 40%,#0000 98%);mask-image:radial-gradient(circle,#000 40%,#0000 98%)}@keyframes gelatin-free{0%,to{transform:scale(1)rotate(0)}15%{transform:scale(1.3,.7)rotate(-5deg)}30%{transform:scale(.7,1.3)rotate(5deg)}45%{transform:scale(1.2,.8)rotate(-3deg)}60%{transform:scale(.8,1.2)rotate(3deg)}75%{transform:scale(1.1,.9)rotate(-1deg)}90%{transform:scale(.95,1.05)}}.color-slider-container{background:#0b0c1acc;border-radius:4px;justify-content:center;width:70px;margin-top:10px;padding:4px;display:flex;position:relative}.color-slider-container:before{content:"";z-index:-1;opacity:.8;background:linear-gradient(90deg,#a855f7,#3b82f6,#ec4899);border-radius:5px;position:absolute;inset:-1px}.color-slider{-webkit-appearance:none;cursor:pointer;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);border-radius:2px;outline:none;width:100%;height:8px}.color-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#a855f7;border:1px solid #ffffff80;border-radius:2px;width:12px;height:18px;transition:all .2s;box-shadow:0 0 5px #00000080}.color-slider::-webkit-slider-thumb:hover{background:#3b82f6;transform:scale(1.1)}.color-slider::-moz-range-thumb{cursor:pointer;background:#a855f7;border:1px solid #ffffff80;border-radius:2px;width:12px;height:18px;transition:all .2s;box-shadow:0 0 5px #00000080}@media (max-width:992px){.interactive-card{grid-column:span 1}.interactive-examples{flex-direction:column;gap:2rem}}.who-for-section{padding:80px 2rem}.who-for-grid{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:3rem;display:flex}.who-for-tag{background:#a855f71a;border:1px solid #a855f733;border-radius:999px;padding:1rem 2rem;font-weight:500;transition:all .3s}.who-for-tag:hover{color:#fff;background:#a855f7}.final-cta-section{padding:120px 2rem}.cta-block{text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(135deg,#a855f733 0%,#3b82f633 100%);border:1px solid #ffffff1a;border-radius:2rem;padding:5rem 2rem}.cta-block h2{margin-bottom:1.5rem;font-size:3rem}.cta-block p{color:#ffffffb3;max-width:700px;margin-bottom:3rem;margin-left:auto;margin-right:auto;font-size:1.25rem}.cta-buttons{justify-content:center;gap:1.5rem;display:flex}.btn-primary{color:#000;background:#fff;border-radius:999px;padding:1rem 2.5rem;font-weight:600;transition:all .3s}.btn-primary:hover{color:#fff;background:#a855f7;transform:scale(1.05)}.btn-secondary{color:#fff;background:0 0;border:1px solid #fff3;border-radius:999px;padding:1rem 2.5rem;font-weight:600;transition:all .3s}.btn-secondary:hover{background:#ffffff1a;transform:scale(1.05)}@media (max-width:992px){.hero-section,.two-column{text-align:center;flex-direction:column}.hero-headline{font-size:2.5rem}.two-column.reverse{flex-direction:column}.key-point{flex-direction:column;align-items:center}.seo-grid,.custom-list,.grid-list{grid-template-columns:1fr}.seo-main,.interactive-card{grid-column:span 1}.security-box .two-column{flex-direction:column;gap:2rem}.security-benefits{flex:1;width:100%}.seo-main,.security-box{padding:2rem 1.5rem}.cta-block{padding:3rem 1.5rem}.cta-block h2{font-size:2rem}.cta-buttons{flex-direction:column;gap:1rem;width:100%;max-width:300px;margin:0 auto}.btn-primary,.btn-secondary{width:100%;padding:1rem 2rem}.seo-main h3{font-size:1.5rem}.final-cta-section{padding-top:8rem;padding-left:2rem;padding-right:2rem}}@media (max-width:480px){.container{padding:0 1rem}.section{padding:40px 0}.hero-headline{font-size:2rem}.seo-main,.seo-feature-card,.security-box{padding:1.5rem 1rem}.custom-list li{font-size:.9rem}.final-cta-section{padding:6rem 1rem 4rem}}
