:root{--ink:#1d2127;--muted:#71767d;--line:#e2e4e5;--blue:#39d300;--lime:#39d300;--demo-primary:#49332c;--demo-accent:#ad5e4f}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#f2f3f2;font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,textarea{font:inherit;color:inherit}
.topbar{height:70px;padding:0 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:3px;width:max-content;color:var(--ink);text-decoration:none;font-size:22px;font-weight:800;letter-spacing:-1px}
.brand-mark{width:30px;height:30px;margin-right:5px;display:grid;place-items:center;color:var(--ink);background:var(--blue);border-radius:9px 9px 9px 3px}
.brand-ai{color:#2ba500}
.pilot{padding:7px 12px;color:#5c6070;background:#f5f5f7;border:1px solid #e6e7eb;border-radius:30px;font-size:12px;font-weight:600}
.pilot i,.preview-head small i{display:inline-block;width:7px;height:7px;margin-right:6px;background:#5ac576;border-radius:50%}
.login{justify-self:end;padding:10px 15px;border:1px solid #d8d9df;border-radius:10px;background:white;font-weight:650;cursor:pointer}
.workspace{max-width:1600px;min-height:calc(100vh - 70px);margin:auto;display:grid;grid-template-columns:minmax(460px,560px) minmax(600px,1fr)}
.builder{padding:52px clamp(34px,4vw,64px) 58px;background:#fff;border-right:1px solid var(--line)}
.intro{margin-bottom:34px}
.eyebrow{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.intro h1{max-width:470px;margin:12px 0;font-size:clamp(42px,4vw,58px);line-height:.98;letter-spacing:-.06em}
.intro p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.step{margin-top:27px}
.step-title{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.step-title>b{flex:0 0 25px;width:25px;height:25px;display:grid;place-items:center;color:#226f00;background:#eaffdf;border-radius:8px;font-size:11px}
.step-title>span{display:flex;flex-direction:column;gap:3px}
.step-title strong{font-size:14px}
.step-title small{color:#898c98;font-size:12px}
.types{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.type{padding:14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;border:1.5px solid #dfe0e7;border-radius:13px;background:#fff;text-align:left;cursor:pointer}
.type.selected{border-color:var(--blue);box-shadow:0 0 0 3px #dfffd3}
.type>i{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:#f1f1f5;font-style:normal;font-size:19px}
.type>span{display:flex;flex-direction:column;gap:3px}
.type strong{font-size:13px}
.type small{color:#898c98;font-size:11px}
.type em{width:18px;height:18px;display:none;place-items:center;color:#fff;background:var(--blue);border-radius:50%;font-size:10px;font-style:normal}
.type.selected em{display:grid}
.describe{padding:20px;border:1px solid #e2e3e9;border-radius:17px;background:#fafafd}
.voice{min-height:74px;padding:13px;display:flex;align-items:center;gap:13px;border:1px solid #dddfe7;border-radius:13px;background:#fff}
.mic{width:47px;height:47px;position:relative;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink);cursor:pointer}
.mic span{width:11px;height:17px;border:2px solid white;border-radius:8px;position:relative}
.mic span:after{content:"";width:15px;height:8px;position:absolute;left:-4px;top:9px;border:2px solid #fff;border-top:0;border-radius:0 0 10px 10px}
.mic.recording{background:#df5d63;animation:pulse 1.2s infinite}
.voice-copy{display:flex;flex:1;flex-direction:column;gap:4px}
.voice-copy strong{font-size:13px}
.voice-copy small{color:#898c98;font-size:11px}
.darija{padding:5px 8px;background:#f0f0f4;border-radius:7px;font-size:11px;font-weight:700}
.divider{margin:13px 0;display:flex;align-items:center;color:#a0a2ad;font-size:10px}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:#e4e5e9}
.divider span{padding:0 10px}
textarea{width:100%;min-height:110px;padding:14px;resize:vertical;border:1px solid #dddfe6;border-radius:12px;outline:0;background:#fff;font-size:12px;line-height:1.6}
textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #dfffd3}
.field-note{margin-top:8px;display:flex;justify-content:space-between;gap:12px;color:#9799a5;font-size:10px}
.field-note button{padding:0;border:0;color:var(--blue);background:none;cursor:pointer;font-size:10px;font-weight:700}
.languages{display:flex;justify-content:space-between;align-items:center}
.step-title.compact{margin:0;align-items:center}
.switch{max-width:100%;padding:3px;display:flex;flex-wrap:wrap;justify-content:flex-end;border:1px solid #dfe0e6;border-radius:10px;background:#f2f2f5}
.switch button{padding:7px 10px;border:0;border-radius:7px;color:#787b89;background:transparent;cursor:pointer;font-size:11px;font-weight:650}
.switch button.active{color:var(--ink);background:#fff;box-shadow:0 1px 4px #0002}
.generate{width:100%;height:53px;margin-top:28px;padding:0 18px 0 22px;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:13px;color:#fff;background:var(--ink);cursor:pointer;font-weight:700;box-shadow:0 10px 24px #1d212733}
.generate b{width:29px;height:29px;display:grid;place-items:center;color:var(--ink);background:var(--lime);border-radius:8px;font-size:17px}
.generate:disabled{opacity:.8}
.free{margin:10px 0 0;color:#8b8e9a;text-align:center;font-size:10px}
.preview-wrap{min-width:0;padding:36px clamp(28px,4vw,62px) 28px;background:radial-gradient(circle at 75% 10%,#39d30018,transparent 28%),#f2f3f2}
.preview-head{margin-bottom:18px;display:flex;align-items:center;justify-content:space-between}
.preview-head>span:first-child{display:flex;flex-direction:column;gap:7px}
.preview-head b{color:#777a89;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.preview-head small{color:#3b3e50;font-size:12px}
.devices{padding:8px 10px;background:#e5e5eb;border-radius:9px;color:#747786;font-size:13px}
.browser{min-height:570px;position:relative;overflow:hidden;border:1px solid #d8d9e1;border-radius:17px;background:#fff;box-shadow:0 24px 70px #1c1e3c24}
.browser-bar{height:39px;padding:0 12px;display:flex;align-items:center;gap:5px;background:#fafafa;border-bottom:1px solid #e7e8eb}
.browser-bar i{width:7px;height:7px;border-radius:50%;background:#d3d4da}
.browser-bar span{width:44%;margin:auto;padding:5px;color:#a0a2ac;background:#f0f0f2;border-radius:6px;text-align:center;font-size:8px}
.demo-site{min-width:610px;background:#fffaf3;font-family:Georgia,serif}
.demo-site nav{height:70px;padding:0 28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#49332c}
.demo-site nav strong{font-size:14px}
.demo-site nav em{color:#ad5e4f;font-weight:400}
.demo-site nav span{font-family:Arial,sans-serif;font-size:7px}
.demo-site nav button{justify-self:end;padding:8px 13px;border:0;border-radius:30px;color:#fff;background:#49332c;font-size:7px}
.hero{min-height:300px;padding:32px 38px 44px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;background:linear-gradient(120deg,#f8ecdd,#f3ddc7)}
.hero>div:first-child{position:relative;z-index:2}
.hero>div>small{color:#ad5e4f;font-family:Arial,sans-serif;font-size:7px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero h2{max-width:310px;margin:10px 0;color:#3e2923;font-size:clamp(27px,2.8vw,43px);line-height:1.03;letter-spacing:-.045em;font-weight:500}
.hero h2 em{color:#ad5f50;font-weight:400}
.hero p{max-width:240px;color:#7b625a;font-family:Arial,sans-serif;font-size:9px;line-height:1.5}
.hero button{margin:8px 5px 0 0;padding:9px 13px;border:1px solid #49332c;border-radius:30px;color:#fff;background:#49332c;font-size:7px}
.hero button.outline{color:#49332c;background:transparent}
.cake{height:220px;position:relative;filter:drop-shadow(0 18px 13px #502a2233)}
.plate{width:210px;height:16px;position:absolute;left:50%;bottom:20px;transform:translateX(-50%);border-radius:50%;background:#d8bda7;box-shadow:0 7px 0 #ae8d78}
.layer{position:absolute;left:50%;transform:translateX(-50%);border-radius:9px 9px 15px 15px;background:linear-gradient(90deg,#d8a889,#f4d7bf 45%,#c99373);box-shadow:inset 0 8px 0 #f8e9dc}
.layer.one{width:170px;height:65px;bottom:34px}
.layer.two{width:130px;height:57px;bottom:94px}
.layer.three{width:92px;height:48px;bottom:146px}
.berries{position:absolute;left:47%;bottom:190px;color:#9a3e3c;font-size:14px;letter-spacing:-1px}
.products{padding:24px 34px 30px}
.products h3{margin:0;color:#4d342c;font-size:14px;font-weight:500}
.products>div{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.products article{display:flex;flex-direction:column;gap:4px;color:#49332c;font-family:Arial,sans-serif;font-size:7px}
.product{height:66px;display:block;border-radius:7px;background:#ead8c5;position:relative}
.product:after{content:"";width:48px;height:38px;position:absolute;left:50%;top:14px;transform:translateX(-50%);border-radius:50% 50% 8px 8px;background:linear-gradient(#f5e3d2 0 20%,#a66551 21% 38%,#ecd0b5 39% 58%,#9d5b47 59% 78%,#e9c9aa 79%);box-shadow:0 5px 9px #5530252e}
.p2{background:#e6cdb6}
.p3{background:#e4d2c1}
.products article small{color:#9d7d70;font-size:6px}
.features{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;color:#747786;font-size:10px}
.features strong{color:var(--ink)}
.features span::first-letter{color:var(--blue)}
.loading{position:absolute;inset:39px 0 0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fffffff0;backdrop-filter:blur(7px);font-size:13px}
.loading[hidden]{display:none}
.loading small{color:#858895;font-size:10px}
.spinner{width:40px;height:40px;margin-bottom:6px;border:2px solid #d9efd1;border-top-color:var(--blue);border-radius:50%;animation:spin .9s linear infinite}
.fresh{animation:fresh .55s ease}
.login:hover,.type:hover,.generate:hover{transform:translateY(-1px)}
@keyframes spin{to{transform:rotate(360deg)}
}
@keyframes pulse{50%{box-shadow:0 0 0 8px #df5d6328}
}
@keyframes fresh{0%{transform:scale(.985);opacity:.75}
100%{transform:scale(1);opacity:1}
}
@media(max-width:900px){.topbar{grid-template-columns:1fr auto;padding:0 20px}
.pilot{display:none}
.workspace{display:block}
.builder{border-right:0}
.preview-wrap{min-height:720px}
}
@media(max-width:560px){.topbar{height:64px}
.builder{padding:36px 20px 44px}
.intro h1{font-size:43px}
.types{grid-template-columns:1fr}
.languages{align-items:flex-start;flex-direction:column;gap:14px}
.switch{width:100%}
.switch button{flex:1}
.preview-wrap{padding:28px 14px;min-height:620px}
.browser{min-height:470px}
.demo-site{transform:scale(.74);transform-origin:top left;width:135%}
.features strong{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.status{min-height:18px;margin:9px 0 -2px;text-align:center;font-size:11px;line-height:1.45}
.status:empty{min-height:0;margin:0}
.status.success{color:#237d05}
.status.error{color:#b23b42}
.status.info{color:#62676d}
.mic:disabled{cursor:wait;opacity:.65}
.demo-site nav{color:var(--demo-primary)}
.demo-site nav button,.hero button{color:#fff;background:var(--demo-primary);border-color:var(--demo-primary)}
.demo-site nav em,.hero>div>small,.hero h2 em{color:var(--demo-accent)}
.hero button.outline{color:var(--demo-primary);background:transparent}
.products h3,.products article{color:var(--demo-primary)}