:root {
  --night:#090b13; --night2:#101321; --ink:#171a27; --muted:#878b9b;
  --line:#e8e9ef; --violet:#906cff; --cyan:#45d4ec; --lime:#c5f36d;
  --pink:#f6639e; --paper:#fff; --soft:#f7f7fa;
  --arabic:'IBM Plex Sans Arabic','DM Sans',sans-serif;
  --sans:'DM Sans','IBM Plex Sans Arabic',sans-serif;
  --accent:var(--violet); --pageScale:1;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font:400 14px/1.6 var(--arabic); background:#fff; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
[hidden] { display:none!important; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(calc((100vw - 1240px)/2),5.4%); background:rgba(9,11,19,.88); backdrop-filter:blur(14px); border-bottom:1px solid #ffffff12; position:absolute; inset:0 0 auto; z-index:10; color:#fff; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-symbol { width:31px; height:31px; border:1px solid #ffffff55; display:grid; place-items:center; border-radius:9px; font:700 16px/1 var(--sans); color:#fff; letter-spacing:-.1em; padding-inline-end:2px; }
.brand-symbol span { color:var(--lime); }
.brand-word { font-size:15px; font-weight:600; }
.site-header nav { display:flex; gap:35px; color:#aeb2c2; font-size:11px; }
.site-header nav a { transition:color .2s; }
.site-header nav a:hover { color:#fff; }
.header-actions,.builder-top-actions { display:flex; align-items:center; gap:16px; }
.locale-button { background:transparent; color:#d0d2dc; border:0; font:600 10px var(--sans); padding:8px; }
.locale-button span { color:var(--lime); margin-inline-start:4px; }
.button { border:0; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:13px 18px; font-weight:600; font-size:11px; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button-small { background:#fff; color:#151724; padding:10px 14px; border-radius:7px; font-size:10px; }
.button-small span { color:#6851b8; }
.button-primary { color:#fff; background:linear-gradient(110deg,#8660ed,#a066ee 54%,#e05caa); border-radius:7px; box-shadow:0 8px 26px #855aec45; }
.button-primary b { font:500 15px var(--sans); }
.button-primary:hover { box-shadow:0 12px 32px #855aec72; }
.hero-v2 { min-height:730px; padding:145px max(calc((100vw - 1160px)/2),8%) 62px; background:radial-gradient(ellipse at 77% 42%,#242040 0,transparent 40%),radial-gradient(ellipse at 64% 70%,#142130 0,transparent 43%),var(--night); color:#f7f7fb; position:relative; overflow:hidden; display:grid; grid-template-columns:.92fr 1.08fr; gap:5%; align-items:center; }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(90deg,transparent,#000 45%,#000 95%); opacity:.21; pointer-events:none; }
.hero-v2:after { content:''; position:absolute; width:510px; height:510px; border:1px solid #a48bff20; border-radius:50%; right:42%; top:16%; box-shadow:0 0 0 80px #a48bff08,0 0 0 160px #a48bff05; pointer-events:none; }
.hero-copy-v2 { position:relative; z-index:1; padding-bottom:20px; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid #ffffff1e; background:#ffffff08; border-radius:20px; color:#c5c6d2; font-size:9px; }
.pill i,.section-kicker i { width:6px; height:6px; flex:none; background:var(--lime); box-shadow:0 0 12px var(--lime); border-radius:50%; }
.hero-copy-v2 h1 { font-size:clamp(58px,7vw,93px); line-height:1.14; letter-spacing:-.065em; margin:25px 0 17px; font-weight:600; }
.hero-copy-v2 h1 .gradient-word,.final-cta h2 span { background:linear-gradient(100deg,var(--lime) 0%,#70eadb 40%,#a57aff 92%); color:transparent; background-clip:text; -webkit-background-clip:text; }
.hero-copy-v2>p { color:#aeb1c2; font-size:13px; max-width:420px; line-height:2; margin:0 0 27px; }
.hero-ctas { display:flex; align-items:center; gap:22px; }
.hero-link { color:#d5d6df; font-size:10px; display:flex; gap:9px; align-items:center; }
.play-ring { width:25px; height:25px; border:1px solid #ffffff55; border-radius:50%; display:grid; place-items:center; font-size:9px; color:var(--lime); }
.hero-points { display:flex; gap:19px; flex-wrap:wrap; margin-top:39px; color:#9498aa; font-size:9px; }
.hero-points span { display:flex; align-items:center; gap:6px; }
.hero-points b { color:var(--cyan); font-size:12px; }
.hero-product { position:relative; z-index:2; min-height:490px; display:grid; place-items:center; perspective:1100px; }
.ambient { position:absolute; border-radius:50%; filter:blur(60px); opacity:.34; pointer-events:none; }
.ambient-a { width:240px; height:240px; right:12%; top:20%; background:#8955f0; }
.ambient-b { width:190px; height:190px; left:13%; bottom:10%; background:#35cee5; }
.app-window { width:min(100%,570px); position:relative; z-index:2; border:1px solid #ffffff35; background:#111521; border-radius:12px; overflow:hidden; box-shadow:0 35px 90px #0009,0 0 55px #916cff28; transition:transform .18s ease-out; }
.app-top { height:38px; background:#171b2a; border-bottom:1px solid #ffffff12; display:flex; align-items:center; padding:0 12px; gap:12px; color:#babdca; }
.window-lights { display:flex; gap:4px; }
.window-lights i { width:5px; height:5px; border-radius:50%; background:#777789; }
.window-lights i:first-child { background:#ff7181; }
.window-lights i:nth-child(2) { background:#ffc35b; }
.window-lights i:last-child { background:#65da9b; }
.window-title { font:600 8px var(--sans); letter-spacing:.11em; color:#e8e9ef; }
.window-title small { color:#85899c; font-size:6px; margin-inline-start:4px; }
.top-status { margin-inline-start:auto; font-size:7px; color:#9da0b0; display:flex; align-items:center; gap:5px; }
.top-status i,.save-status i { width:5px; height:5px; border-radius:50%; background:#97e77a; box-shadow:0 0 8px #97e77a; }
.app-body { height:362px; display:grid; grid-template-columns:180px 1fr; }
.mock-side { padding:15px 11px; background:#151927; border-inline-end:1px solid #ffffff12; color:#bfc1cc; position:relative; }
.mock-side-title { display:flex; align-items:center; gap:7px; font-size:8px; color:#f4f4f8; margin:0 0 15px; }
.tiny-mark { width:16px; height:16px; background:#9169fc; border-radius:5px; display:grid; place-items:center; color:white; font:700 8px var(--sans); }
.mock-step { height:30px; display:flex; align-items:center; gap:7px; color:#9296a8; font-size:7px; padding:0 6px; border-radius:4px; margin-bottom:3px; }
.mock-step b { font:500 7px var(--sans); color:#73788a; }
.mock-step i { font-style:normal; margin-inline-start:auto; font:600 7px var(--sans); color:#97e77a; }
.mock-step.active { background:#8c6aff19; color:#ebe8ff; border:1px solid #967aff32; }
.mock-add { display:flex; align-items:center; gap:7px; margin-top:7px; background:#ffffff07; color:#bbbccc; width:100%; border:1px dashed #777c9155; border-radius:4px; padding:7px; font-size:7px; text-align:start; }
.mock-add span:first-child { color:var(--lime); }
.mock-quality { position:absolute; inset:auto 11px 12px; padding:9px; background:#ffffff08; border:1px solid #ffffff10; border-radius:5px; }
.mock-quality>div:first-child { display:flex; justify-content:space-between; align-items:center; color:#b2b4c1; font-size:7px; }
.mock-quality b { color:var(--lime); font:600 9px var(--sans); }
.quality-track { height:3px; background:#ffffff16; border-radius:3px; margin:7px 0 5px; }
.quality-track i { display:block; width:78%; height:100%; background:linear-gradient(90deg,#9571ff,#6ae6da); border-radius:3px; }
.mock-quality small { font-size:6px; color:#898da0; }
.mock-work { padding:14px 17px; background:#1a1e2b; }
.mock-work-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:#fff; }
.mock-work-head small,.mock-work-head b { display:block; }
.mock-work-head small { font-size:6px; color:#898d9e; }
.mock-work-head b { font-size:9px; margin-top:3px; }
.mock-template { font:500 7px var(--sans); color:#c8c3df; border:1px solid #ffffff24; border-radius:4px; padding:6px 8px; }
.mock-template i { font-style:normal; color:#a88cff; margin-inline-start:9px; }
.mock-paper { background:#fff; color:#222533; width:100%; height:294px; padding:21px 24px; box-shadow:0 8px 24px #0005; position:relative; overflow:hidden; }
.paper-accent { position:absolute; top:0; inset-inline:0; height:3px; background:linear-gradient(90deg,#8666ed,#52dce4); }
.paper-profile { display:flex; justify-content:space-between; gap:10px; padding-bottom:9px; border-bottom:1px solid #dedfe7; }
.paper-name { font-size:13px; font-weight:700; }
.paper-role { font-size:7px; color:#7554d2; margin-top:2px; }
.paper-contact { font:6px/1.7 var(--sans); color:#737786; direction:ltr; text-align:left; }
.paper-section { margin-top:9px; }
.paper-section>b { display:block; font-size:7px; color:#6342c0; padding-bottom:3px; border-bottom:1px solid #e8e8ee; }
.paper-section>p { font-size:6px; color:#666b79; line-height:1.6; margin:4px 0; }
.paper-job { margin-top:5px; display:grid; grid-template-columns:1fr auto; gap:3px 8px; }
.paper-job strong { font-size:6px; }
.paper-job small { font:6px var(--sans); color:#777b86; }
.paper-job i { font-size:5px; color:#7a7d88; grid-column:1/-1; font-style:normal; }
.fake-line { height:3px; background:#e8e9ed; border-radius:2px; width:80%; grid-column:1/-1; }
.fake-line.long { width:98%; }
.paper-tags { display:flex; gap:5px; margin-top:5px; }
.paper-tags i { font-style:normal; background:#f1eff9; border-radius:2px; padding:3px 5px; font-size:5px; color:#6751a6; }
.floating-chip { position:absolute; z-index:3; display:flex; align-items:center; gap:8px; background:#1a1d2b; border:1px solid #ffffff24; box-shadow:0 12px 35px #0005; border-radius:8px; padding:9px 12px; color:#fff; }
.floating-chip b,.floating-chip small { display:block; }
.floating-chip b { font-size:8px; }
.floating-chip small { font-size:6px; color:#9b9eae; margin-top:2px; }
.chip-score { top:61px; right:-20px; }
.chip-live { bottom:43px; left:-22px; }
.score-icon { width:21px; height:21px; border-radius:6px; display:grid; place-items:center; background:#a9f2631a; color:var(--lime); font-size:11px; }
.live-wave { font:18px var(--sans); color:var(--cyan); }
.hero-orbit-label { position:absolute; right:0; bottom:12px; color:#686b7d; font:7px var(--sans); letter-spacing:.18em; }
.hero-orbit-label span { color:var(--lime); padding:0 6px; }
.hero-bottom { position:absolute; inset:auto max(calc((100vw - 1160px)/2),8%) 20px; display:flex; justify-content:space-between; color:#707487; font-size:8px; z-index:1; }
.hero-bottom span:last-child { font:8px var(--sans); letter-spacing:.14em; }
.feature-band { padding:100px max(calc((100vw - 1160px)/2),8%) 95px; display:grid; grid-template-columns:.8fr 1.2fr; gap:9%; background:#fff; }
.section-kicker { display:flex; align-items:center; gap:8px; color:#777b8a; font-size:9px; }
.section-kicker i { background:#9a75ff; box-shadow:0 0 10px #a17bff; }
.feature-heading h2,.templates-heading h2,.how-v2 h2,.final-cta h2 { font-size:47px; line-height:1.23; letter-spacing:-.055em; margin:17px 0; font-weight:600; }
.feature-heading h2 span,.templates-heading h2 span,.how-v2 h2 span { color:#9894a8; }
.feature-list article { display:grid; grid-template-columns:38px 1fr 16px; align-items:center; gap:14px; border-bottom:1px solid #eeeff3; padding:17px 0; }
.feature-list article:first-child { padding-top:0; }
.feature-icon { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; font-size:15px; }
.feature-icon.violet { color:#8560ef; background:#f0ecff; }
.feature-icon.cyan { color:#189db7; background:#e6f9fc; }
.feature-icon.lime { color:#79a727; background:#f1f8e3; }
.feature-list h3 { font-size:12px; margin:0 0 4px; }
.feature-list p { font-size:9px; color:#898c9b; margin:0; line-height:1.8; }
.feature-arrow { color:#999bad; font-size:12px; }
.templates-v2 { padding:92px max(calc((100vw - 1160px)/2),8%) 76px; background:#f6f6f9; }
.templates-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:29px; }
.templates-heading h2 { margin-bottom:0; }
.templates-heading p { max-width:290px; color:#858a9a; font-size:10px; line-height:1.9; margin:0 0 6px; }
.template-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.template-card { padding:0; border:1px solid #e6e7ed; border-radius:8px; background:#fff; text-align:initial; overflow:hidden; transition:transform .22s,border-color .2s,box-shadow .2s; color:var(--ink); }
.template-card:hover { transform:translateY(-5px); box-shadow:0 16px 35px #22253c12; }
.template-card.selected { border-color:#9775ff; box-shadow:0 0 0 2px #9876ff1b; }
.template-label { display:flex; align-items:center; justify-content:space-between; padding:10px 11px; color:#8b8e9c; font:7px var(--sans); letter-spacing:.05em; }
.template-label i { font:8px var(--arabic); color:#8c67ef; letter-spacing:0; }
.template-preview { height:177px; margin:0 14px; background:#fff; border:1px solid #eeeef2; box-shadow:0 5px 16px #22253c0a; padding:15px 14px; position:relative; overflow:hidden; }
.tpl-head { display:flex; align-items:start; justify-content:space-between; }
.tpl-head>b { width:47%; height:6px; background:#363844; }
.tpl-head>i { height:3px; width:28%; background:#dedfe5; margin-top:2px; }
.tpl-rule { height:1px; background:#825ff0; margin:8px 0; }
.tpl-lines { height:25px; background:repeating-linear-gradient(to bottom,#d9dae0 0 1px,transparent 1px 5px); margin:7px 0; }
.tpl-lines.short { width:72%; height:17px; }
.tpl-label { height:4px; width:26%; background:#454653; margin:9px 0 4px; }
.tpl-modern { display:grid; grid-template-columns:27% 1fr; gap:9px; }
.tpl-side { background:linear-gradient(160deg,#262239,#4e376c); height:100%; }
.tpl-modern-content .tpl-head>b { background:#34313f; }
.tpl-modern-content .tpl-lines { margin-top:9px; }
.tpl-academic { padding:13px 18px; }
.tpl-academic-head { display:grid; place-items:center; gap:3px; }
.tpl-academic-head b { height:6px; width:41%; background:#34343b; }
.tpl-academic-head i { height:3px; width:28%; background:#cccdd3; }
.tpl-academic .tpl-rule { background:#34343b; }
.tpl-european { padding:0; }
.euro-band { height:41px; background:#eff1f7; padding:13px; }
.euro-band b { display:block; width:38%; height:6px; background:#404350; }
.euro-band i { display:block; width:55%; height:2px; background:#a8aab4; margin-top:4px; }
.tpl-european .tpl-lines,.tpl-european .tpl-label { margin-inline:14px; }
.template-name { display:block; position:relative; padding:11px 13px 13px; border-top:1px solid #f0f0f4; }
.template-name>b,.template-name>small { display:block; }
.template-name>b { font-size:10px; }
.template-name>small { font-size:7px; color:#9295a3; margin-top:3px; }
.select-circle { position:absolute; left:12px; top:12px; width:16px; height:16px; border:1px solid #dedfe7; border-radius:50%; display:grid; place-items:center; color:transparent; font-size:8px; }
.selected .select-circle { background:#8e68f5; border-color:#8e68f5; color:white; }
.gallery-footer { display:flex; align-items:center; justify-content:space-between; margin-top:21px; color:#9296a4; font-size:9px; }
.text-button { border:0; background:none; color:#6d51cb; font-size:9px; font-weight:600; }
.text-button b { font:12px var(--sans); margin-inline-start:4px; }
.how-v2 { padding:97px max(calc((100vw - 1160px)/2),8%); display:grid; grid-template-columns:60px 1fr 1fr; gap:35px; align-items:start; position:relative; overflow:hidden; }
.how-number { font:600 10px var(--sans); color:#a09baa; padding-top:8px; }
.how-v2 h2 { margin-top:17px; }
.how-steps { border-top:1px solid #e8e9ef; }
.how-steps article { display:grid; grid-template-columns:28px 1fr 14px; gap:12px; padding:14px 0; border-bottom:1px solid #e8e9ef; align-items:start; }
.how-steps article>b { font:9px var(--sans); color:#9b77ef; padding-top:3px; }
.how-steps h3 { font-size:11px; margin:0 0 4px; }
.how-steps p { font-size:9px; color:#8b8f9e; margin:0; line-height:1.8; }
.how-steps article>span { color:#a6a8b4; font-size:11px; }
.final-cta { position:relative; overflow:hidden; text-align:center; background:#10121e; color:#fff; padding:79px 20px 85px; }
.final-cta .section-kicker { justify-content:center; color:#a7aabc; }
.final-cta h2 { font-size:57px; margin:16px 0 22px; }
.final-cta .button { position:relative; z-index:1; }
.cta-glow { position:absolute; width:400px; height:300px; top:0; left:50%; transform:translateX(-50%); background:#8761f62a; filter:blur(90px); pointer-events:none; }
.cta-orbit { position:absolute; right:12%; bottom:19px; color:#ffffff0e; font:italic 28px var(--sans); letter-spacing:.12em; }
.site-footer { height:65px; padding:0 max(calc((100vw - 1160px)/2),8%); display:flex; align-items:center; justify-content:space-between; color:#9194a2; font-size:8px; }
.site-footer .brand { color:#242635; }
.site-footer .brand-symbol { background:#171927; color:#fff; width:24px; height:24px; font-size:12px; border:0; border-radius:7px; }
.site-footer .brand-word { font-size:11px; }