@font-face{font-family:Weblox;src:url('/assets/fonts/manrope-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Weblox;src:url('/assets/fonts/manrope-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:WebloxEditorial;src:url('/assets/fonts/cormorant-italic-600.woff2') format('woff2');font-style:italic;font-weight:600;font-display:swap}
:root{font-family:Weblox,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:500;background:#fbfaf7;--ink:#242230;--muted:#77727f;--line:#e5e0e9;--violet:#7950df}
body{background:#fbfaf7}
.header{height:110px;position:relative;z-index:2}
.header nav{font-size:12px;gap:28px;color:#625b70}
.header .brand img{width:165px}
.header-actions .dark{background:linear-gradient(135deg,#383042,#201d2e);box-shadow:0 5px 15px #241a3112}
#landing{background-image:linear-gradient(180deg,#fbfaf700 40%,#fbfaf7 100%),url('/assets/premium-weblox-atmosphere.webp');background-repeat:no-repeat;background-position:center top,center -100px;background-size:100% 1100px,100% auto}
.hero{min-height:750px;gap:50px;padding-top:65px;padding-bottom:90px}
.hero-copy{position:relative;z-index:1}
.hero .eyebrow{display:inline-flex;padding:9px 13px;border:1px solid #e4d9ef;border-radius:30px;background:#fffc;font-size:11px;letter-spacing:.1px;box-shadow:0 5px 18px #50357306;margin-bottom:30px}
.hero h1{font-size:clamp(44px,3.1vw,57px);font-weight:700;line-height:1.13;letter-spacing:-2px;margin-bottom:26px}
.hero h1 span{font-family:inherit;font-size:1em;font-style:normal;font-weight:700;letter-spacing:inherit;white-space:nowrap;color:#7850d4}
.hero-description{font-size:17px;color:#635a70;line-height:1.75;margin-bottom:28px}
.hero .caption{font-size:11px;color:#81788b}
.hero-actions{gap:12px;margin-bottom:18px}
.hero-actions .button{padding:18px 23px;border-radius:12px;font-size:13px;gap:21px}
.button.primary{background:linear-gradient(120deg,#9368ee,#7450df 75%,#6740ca);box-shadow:0 8px 22px #7850df22;border-color:#ffffff26}
.button.primary:hover{background:linear-gradient(120deg,#8754ea,#6940d1);box-shadow:0 12px 25px #7850df2c}
.hero .outline{background:#fff8;border-color:#cfc5df;color:#544461}
.hero-product{position:relative;min-height:565px}
.hero-sculpture{position:absolute;top:-28px;left:-9%;width:118%;max-width:none;height:88%;object-fit:contain;opacity:.6;pointer-events:none;user-select:none;filter:drop-shadow(0 22px 28px #7455b516)}
.fan-deck{z-index:1}
.hero-product .floating-pill{background:#fffffff0;border-color:#e4d7f2;box-shadow:0 8px 32px #5b39721c;padding:12px 16px;font-size:10px;top:-25px}
.fan-card{border:2px solid #fff;border-radius:14px;box-shadow:0 16px 28px #37234f18}
.fan-card[data-position=active]{box-shadow:0 20px 50px #37234f2b}
.fan-navigation{gap:23px;margin:18px 0 20px}
.fan-status{min-width:180px}
#fan-name{font-size:11px}
.slider-arrow{background:#fffc;border-color:#ded4eb;box-shadow:0 3px 10px #32214005}
.hero-product .product-steps{background:#ffffffd9;border-color:#e4dced;box-shadow:0 5px 20px #4c2f6508}
.section{padding-top:52px;padding-bottom:70px}
.overline{font-size:9px;letter-spacing:2.1px;color:#8761c6}
h2{font-weight:700;letter-spacing:-1.6px;line-height:1.2}
.section-heading>p,.section-heading p{line-height:1.75}
#how .section-heading{margin-bottom:40px}
#how h2{font-size:clamp(28px,3vw,40px)}
.step-grid{gap:24px}
.step-card{position:relative;border-color:#e7dff0;background:radial-gradient(ellipse at 100% 0,#e9dcfa80,transparent 58%),linear-gradient(145deg,#fffdf9ed,#fffefbf5);border-radius:22px;padding:30px 27px 25px;box-shadow:0 8px 32px #47335504}
.step-number{border:1px solid #e3d6f3;background:linear-gradient(135deg,#f8f4ff,#eee5fc);color:#7850cf;width:42px;height:36px;border-radius:11px;font-size:13px;margin-bottom:22px}
.step-card h3{font-size:21px;letter-spacing:-.6px}
.step-card>p{font-size:13px;line-height:1.7;color:#7b7186;min-height:91px}
.mini-prompt{background:#ffffffdb;border-color:#e5deed;box-shadow:0 8px 18px #33204705}
.mini-window,.mini-result{box-shadow:0 8px 18px #33204708}
.examples-heading h2{font-size:clamp(28px,2.9vw,40px)}
.examples-heading p{font-size:12px;color:#8b8195}
.example-track .example-label strong{font-size:13px;color:#4b4058;font-weight:700}
.example-track .example-label>span{font-size:10px;color:#93879e}
.example-track .example-image{border:1px solid #e5dced;border-radius:18px;box-shadow:0 5px 18px #2d1f3a05}
.examples-progress{background:#e9e0f1}
.studio-section{padding-top:65px;padding-bottom:85px}
.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);align-items:center;gap:85px}
.studio-visual{position:relative;min-width:0;margin:0;padding:12px;background:linear-gradient(135deg,#e4d4f7,#f5e7dd 48%,#d9c2f3);border:1px solid #eadff0;border-radius:28px;box-shadow:0 18px 50px #7652960c}
.studio-visual>img{width:100%;height:auto;aspect-ratio:1.14;object-fit:cover;border-radius:18px}
.studio-visual figcaption{position:absolute;left:34px;right:34px;bottom:32px;display:flex;align-items:center;gap:11px;padding:15px 17px;background:#fffffff0;border:1px solid #f3edf7;border-radius:12px;font-size:10px;color:#695678;box-shadow:0 10px 24px #3b2b4c12}
.studio-visual figcaption>span:last-child{margin-left:auto;color:var(--violet);font-size:22px}
.studio-copy h2{font-size:clamp(30px,3.2vw,43px);line-height:1.14;margin-bottom:20px}
.studio-copy h2 em{font-family:WebloxEditorial,Georgia,serif;font-size:1.2em;font-weight:600;color:#7950d4;letter-spacing:-.9px}
.studio-intro{font-size:14px;color:#86798f;line-height:1.8;max-width:385px;margin-bottom:29px}
.studio-copy .feature-strip{display:grid;grid-template-columns:1fr;gap:23px;padding:0;border:0}
.studio-copy .feature-strip>div{position:static;display:flex;align-items:start;gap:17px;padding:0}
.studio-copy .feature-icon{position:static;display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #e4d8f2;border-radius:11px;background:#f4edfbb3;font-size:22px;color:#9c7bc6;margin:0}
.studio-copy .feature-strip h3{font-size:15px;margin:0 0 6px;font-weight:700;letter-spacing:-.3px}
.studio-copy .feature-strip p{font-size:12px;line-height:1.7;color:#8a7e94;max-width:350px}
.module-tabs{background:#eee8f5;border-color:#e2d8ed;box-shadow:inset 0 1px 4px #47325503}
.module-tab[aria-selected=true]{box-shadow:0 3px 12px #6b438910}
.module-panel{padding:45px;border-radius:26px;background:linear-gradient(105deg,#fffdfafc,#faf5fbde 55%,#ece0f3d9),url('/assets/premium-weblox-atmosphere.webp') right center/cover;box-shadow:0 12px 38px #5a397708}
.module-copy h3{font-weight:700}
.module-preview{box-shadow:0 16px 36px #43225413;border-color:#e1d6ec}
.security-card{position:relative;background:radial-gradient(ellipse at 95% 0,#7955bc66,transparent 62%),linear-gradient(130deg,#302735,#1d1b2a 75%);border-color:#4e3a62;box-shadow:0 18px 44px #34243b13;color:#f3ecfa;overflow:hidden}
.security-card::before{content:'';position:absolute;inset:0;background:url('/assets/premium-weblox-hero-sculpture.webp') 114% -90px/650px auto no-repeat;opacity:.1;pointer-events:none}
.security-card>div{position:relative;z-index:1}
.security-card .overline{color:#bda0e2}
.security-copy>p{color:#c0afcc}
.security-copy>p.security-note{color:#a18cb1;border-color:#59445f}
.security-emblem{border-color:#5e4969}
.security-emblem svg{stroke:#c2a4ef;filter:drop-shadow(0 0 15px #aa7ae329)}
.security-emblem svg path:first-child{fill:#79609738}
.security-points li>span{background:#6d4e843b;color:#c1a0e5}
.security-points p{color:#b39cc5}
.final-cta{position:relative;min-height:215px;padding:46px 48px;border-radius:26px;border:1px solid #dfcfee;background:linear-gradient(105deg,#f2eaf9f2,#f2eaf9b8 55%,#e5d2f0a1),url('/assets/premium-weblox-atmosphere.webp') center 65%/cover;box-shadow:0 15px 40px #6d448a08;margin-top:0;margin-bottom:65px}
.final-cta h2{font-size:30px;letter-spacing:-1px;margin-bottom:12px}
.final-cta p{font-size:13px;color:#9b81ad;margin:0}
.final-cta .button{padding:19px 25px;flex:none}
.footer{border-color:#e8deef;color:#a28eb1;font-size:11px}
@media(min-width:1440px){.hero{min-height:770px;padding-top:65px;padding-bottom:85px}.hero-product{min-height:570px}}
@media(max-width:1100px){.header{height:98px}.header nav{font-size:11px;gap:20px}.header .brand img{width:145px}.hero{min-height:650px;gap:28px;padding-top:50px;padding-bottom:70px}.hero h1{font-size:clamp(32px,3.7vw,42px);letter-spacing:-1.5px}.hero-description{font-size:14px}.hero-actions .button{font-size:11px;padding:16px 18px;gap:14px}.hero-product{min-height:470px}.hero .eyebrow{font-size:9px;padding:8px 11px;gap:7px}.hero-sculpture{top:0;height:81%}.step-card{padding:25px 22px}.step-card h3{font-size:19px}.step-card>p{font-size:12px}.studio-grid{gap:45px}.studio-copy h2{font-size:36px}.studio-visual>img{aspect-ratio:.9}.studio-visual figcaption{left:24px;right:24px;font-size:9px;padding:12px}.module-panel{padding:32px}.final-cta{padding:35px}.final-cta h2{font-size:26px}}
@media(max-width:800px){.header{height:85px}.header nav{display:none}.hero{grid-template-columns:1fr;gap:45px;min-height:0;padding-top:40px;padding-bottom:65px}.hero h1{font-size:clamp(36px,6vw,48px)}.hero-copy{text-align:center}.hero .eyebrow{margin-inline:auto;font-size:10px}.hero-description{font-size:16px}.hero-product{min-height:0;width:min(540px,100%);margin-top:16px}.hero-sculpture{width:110%;left:-5%;height:87%;top:-4%}.hero-product .floating-pill{top:-24px}.section{padding-top:40px;padding-bottom:55px}.step-grid{gap:15px}.step-card{padding:22px 17px}.step-card h3{font-size:17px}.step-card>p{font-size:11px;min-height:110px}.studio-grid{gap:32px;grid-template-columns:1fr 1fr}.studio-copy h2{font-size:29px}.studio-visual{padding:8px;border-radius:22px}.studio-visual>img{aspect-ratio:.68;border-radius:15px}.studio-visual figcaption{left:18px;right:18px;bottom:22px;line-height:1.6;font-size:9px}.studio-intro{font-size:12px}.studio-copy .feature-strip{gap:19px}.studio-copy .feature-icon{width:31px;height:31px;font-size:19px}.studio-copy .feature-strip>div{gap:12px}.studio-copy .feature-strip h3{font-size:13px}.studio-copy .feature-strip p{font-size:10px}.module-panel{padding:30px}.final-cta{gap:25px}.final-cta h2{font-size:23px}.final-cta .button{font-size:11px;padding:17px 20px}}
@media(max-width:560px){.header{height:76px;gap:12px}.header .brand img{width:120px}.header-actions{font-size:9px;gap:12px}.header-actions .button{font-size:9px;padding:11px 12px}.hero{gap:40px;padding-top:29px;padding-bottom:55px}.hero h1{font-size:clamp(27px,9vw,36px);letter-spacing:-1.5px;margin-bottom:22px}.hero h1 span{font-size:1em;letter-spacing:inherit}.hero .eyebrow{font-size:8px;margin-bottom:23px;padding:8px 10px}.hero .eyebrow .dot{width:6px;height:6px}.hero-description{font-size:13px;line-height:1.8;margin-bottom:24px}.hero-actions{gap:9px}.hero-actions .button{font-size:10px;padding:15px 14px;gap:12px}.hero .caption{font-size:9px}.hero-product .floating-pill{font-size:8px;top:-20px;padding:9px 12px}.hero-sculpture{left:0;width:100%;opacity:.55;height:84%}.fan-navigation{gap:16px;margin:17px 0}.fan-status{min-width:155px}#fan-name{font-size:10px}.hero-product .product-steps{font-size:7px;padding:6px 8px}.hero-product .product-caption{font-size:8px}#landing{background-size:100% 1050px,auto 850px;background-position:center top,70% -50px}.section{padding-top:35px;padding-bottom:45px}.section-heading .overline{font-size:8px;letter-spacing:1.6px}#how h2{font-size:27px;letter-spacing:-1px}.section-heading p{font-size:11px}.step-grid{gap:18px}.step-card{padding:26px;border-radius:20px}.step-card h3{font-size:22px}.step-card>p{font-size:12px;min-height:0}.step-number{margin-bottom:20px}.examples-heading h2{font-size:25px;letter-spacing:-1px}.examples-heading .overline{font-size:8px}.example-track .example-image{border-radius:14px}.studio-section{padding-top:50px}.studio-grid{grid-template-columns:1fr;gap:33px}.studio-visual{padding:9px}.studio-visual>img{aspect-ratio:1.12}.studio-visual figcaption{left:22px;right:22px;bottom:24px;font-size:9px}.studio-copy h2{font-size:34px}.studio-intro{font-size:13px;margin-bottom:26px;max-width:330px}.studio-copy .feature-strip{gap:23px}.studio-copy .feature-strip>div{gap:16px}.studio-copy .feature-icon{width:37px;height:37px;font-size:21px}.studio-copy .feature-strip h3{font-size:14px}.studio-copy .feature-strip p{font-size:12px;max-width:285px}.module-panel{padding:25px 20px 20px;border-radius:19px}.security-card{border-radius:20px}.security-card::before{background-size:440px;background-position:130% 10px;opacity:.08}.final-cta{padding:31px 25px;min-height:250px;gap:26px;border-radius:20px;margin-bottom:40px}.final-cta h2{font-size:27px;line-height:1.25}.final-cta p{font-size:12px;line-height:1.75}.final-cta .button{font-size:12px;padding:17px 20px}.footer{font-size:9px}.footer .brand img{width:100px}}
@media(min-width:801px) and (max-width:1100px){.hero-sculpture{width:108%;left:-4%}.fan-deck{width:90%;margin-inline:auto}}
@media(max-width:360px){.header .brand img{width:102px}.header-actions{gap:9px}.header-actions .quiet{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.button.primary{transition:none}}