/* Home page only (index.html): the hero with the design composer, the live showcase rows, the starter
   examples and the live resize. Moved out of the old inline <style>; the composer's chips, image tray and @ menu
   are in composer.css, the logo/contact picker sketches in engine.css. Shared parts are in site.css. */
:root{--stone:#6B6A70;--sand:#E3E5EA;--radius:24px}
/* ---------- hero ---------- */
/* only the sides are clipped: the composer's menus may hang below the hero over the next section (z-index), and
   the light keeps its own top and bottom edges (clip-path below) */
.hero{position:relative;z-index:2;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;overflow-x:hidden;overflow-x:clip;overflow-y:visible;padding:clamp(120px,22vh,210px) 0 90px;isolation:isolate}
/* Light rising through a prism: soft colour pools from the sides and bottom, a cream "clearing" at the top centre,
   and a big blurred triangle of violet light behind the composer. */
.hero-light{position:absolute;inset:-10%;z-index:-1;pointer-events:none;clip-path:inset(8.3334% 0 12% 0)} /* back to the hero's own height: 10% of 120% */
/* the hero light fades into the cream page below instead of stopping at a hard edge */
.hero::after{content:"";position:absolute;inset:auto 0 -2px;height:min(340px,40vh);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(245,246,248,0),rgba(245,246,248,.6) 40%,var(--bg) 78%)}
.hero-light i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.9;will-change:transform}
.hero-light .b1{width:60vw;height:60vw;left:-22vw;top:18%;background:#5B6CFF}
.hero-light .b2{width:60vw;height:60vw;right:-22vw;top:18%;background:#4C63FF}
.hero-light .p1{width:55vw;height:45vw;left:-8vw;bottom:-22vw;background:#FF6FB5}
.hero-light .p2{width:55vw;height:45vw;right:-8vw;bottom:-22vw;background:#FF5AA8}
.hero-light .v{width:46vw;height:34vw;left:27vw;bottom:-10vw;background:#9B5BFF;opacity:.75}
/* blur on the wrapper, clip on the child: CSS clips after filtering, so blurring the clipped element keeps hard edges */
.hero-light .prism{position:absolute;left:50%;bottom:-6%;width:min(980px,120vw);aspect-ratio:1.15/1;transform:translateX(-50%);filter:blur(36px)}
.hero-light .prism::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,255,255,0),rgba(176,140,255,.6) 45%,rgba(255,120,190,.6))}
.hero-light .clear{position:absolute;left:50%;top:-12%;width:70vw;height:60vh;transform:translateX(-50%);background:radial-gradient(closest-side,var(--bg),rgba(245,246,248,.85) 55%,rgba(245,246,248,0));filter:blur(10px)}
@media (prefers-reduced-motion:no-preference){
  .hero-light .b1{animation:drift 18s ease-in-out infinite alternate}
  .hero-light .b2{animation:drift 22s ease-in-out infinite alternate-reverse}
  .hero-light .p1{animation:drift 20s ease-in-out infinite alternate-reverse}
  .hero-light .p2{animation:drift 24s ease-in-out infinite alternate}
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3vw,-3vh,0) scale(1.08)}}
.hero .grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero-inner{width:100%;max-width:980px;padding:0 20px;text-align:center}
.news-pill{display:inline-flex;align-items:center;font-size:13px;font-weight:500;padding:5px;border-radius:99px;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1px rgba(22,22,24,.08);backdrop-filter:blur(8px);margin-bottom:22px;color:inherit;text-decoration:none}
/* the pill slides over its text (the text width collapses), then opens again on the next feature */
.news-pill .bt{display:inline-block;overflow:hidden;white-space:nowrap;max-width:var(--w,320px);transition:max-width .55s cubic-bezier(.65,0,.35,1),opacity .35s ease,filter .35s ease}
.news-pill .bt span{display:inline-block;padding:0 6px 0 8px}
.news-pill.closed .bt{max-width:0;opacity:0;filter:blur(4px)}
.news-pill b{font-weight:600;font-size:11px;color:#fff;background:var(--grad);border-radius:99px;padding:2px 9px;flex:none}
.hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1.15;letter-spacing:0;margin:0 0 18px;text-wrap:balance}
/* inline-block + padding so the gradient also covers the dots below the baseline (ي) */
.hero h1 .glow{display:inline-block;padding:0 .06em .5em;margin-bottom:-.5em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- composer ---------- */
.composer{position:relative;background:#fff;border-radius:var(--radius);text-align:start;
  box-shadow:0 1px 0 rgba(22,22,24,.04),0 18px 50px -12px rgba(60,40,140,.28),0 0 0 1px rgba(22,22,24,.06);transition:box-shadow .2s}
.composer:focus-within{box-shadow:0 1px 0 rgba(22,22,24,.04),0 22px 60px -12px rgba(60,40,140,.38),0 0 0 2px rgba(139,61,255,.35)}
/* the prompt (chips, @ menu and image tray are styled in assets/composer.css) */
.composer .editor{min-height:58px;max-height:260px;padding:18px 22px 4px;font-size:16px;line-height:1.9}
.add-hint{margin:12px 2px 0;font-size:12px;color:var(--stone)}
.composer kbd{font-family:inherit;font-weight:700;color:var(--violet);background:#F1EDFF;border-radius:5px;padding:0 5px}
.tools{display:flex;align-items:center;gap:6px;padding:8px 10px 10px;flex-wrap:wrap}
.icon-btn{width:36px;height:36px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--primary);flex:none}
.icon-btn:hover{background:#F2F0EC}
.icon-btn svg{width:19px;height:19px}
.chip{position:relative}
.chip>button{height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:99px;border:0;background:#F1F2F5;font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.chip>button:hover{background:#ECE9E3}
.chip>button svg{width:14px;height:14px;opacity:.6}
.chip .menu{position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;min-width:260px;background:#fff;border-radius:16px;padding:6px;
  box-shadow:0 12px 40px -8px rgba(22,22,24,.25),0 0 0 1px rgba(22,22,24,.06);display:none;z-index:5}
.chip.open .menu{display:block}
.menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;white-space:nowrap;border:0;background:none;padding:9px 12px;border-radius:10px;font-size:14px;cursor:pointer;text-align:start}
.menu button:hover{background:#F1F2F5}
.menu button small{color:var(--stone);font-size:12px}
.menu button[aria-checked="true"]::after{content:"✓";color:var(--violet);font-weight:700}
/* shortcuts */
.sc-panel{width:320px}
.sc-list h6{margin:6px 4px 6px;font-size:11.5px;font-weight:500;color:var(--stone)}
.sc-list .sc-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sc-list button{height:32px;padding:0 12px;border-radius:10px;border:0;background:#F1F2F5;font-size:13px;font-weight:500;cursor:pointer;color:#2B2B30}
.sc-list button:hover{background:#ECE9E3}
.sc-list button.at{background:#F1EDFF;color:var(--violet);font-weight:600}
/* the logo and contact picker (sketch styles are in engine.css) */
.st-panel{width:min(360px,calc(100vw - 48px))}
.st-panel h6{margin:4px 4px 7px;font-size:12px;font-weight:600;color:#6B6A70}

/* ---------- composer controls ---------- */
.tools .sep{width:1px;height:22px;background:rgba(22,22,24,.1);margin:0 2px}
.add-btn{width:36px;height:36px;border-radius:12px;border:0;background:#fff;cursor:pointer;display:grid;place-items:center;color:#3A3A3E;
  box-shadow:inset 0 0 0 1px rgba(22,22,24,.12);transition:background .15s,box-shadow .15s,transform .15s}
.add-btn svg{width:18px;height:18px;transition:transform .2s}
.add-btn:hover{background:#FAF9F7}
.pop.open>.add-btn{box-shadow:inset 0 0 0 1.5px var(--violet);color:var(--violet)}
.pop.open>.add-btn svg{transform:rotate(45deg)}
.ctl{height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border-radius:12px;border:0;background:#fff;cursor:pointer;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:#232326;box-shadow:inset 0 0 0 1px rgba(22,22,24,.12);transition:background .15s,box-shadow .15s}
.ctl:hover{background:#FAF9F7}
.ctl>svg.ic{width:16px;height:16px;color:var(--primary);flex:none}
.ctl .chev{width:14px;height:14px;color:#9A99A0;flex:none;transition:transform .2s}
.pop.open>.ctl{box-shadow:inset 0 0 0 1.5px var(--violet)}
.pop.open>.ctl .chev{transform:rotate(180deg)}
.ctl .ratios-txt{direction:ltr;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.ctl .more{font-size:11.5px;font-weight:700;color:var(--violet);background:#F1EDFF;border-radius:99px;padding:1px 7px;direction:ltr}

/* count: one control with − / + */
.count{cursor:default;padding:0 5px 0 10px;gap:6px}
.count:hover{background:#fff}
.count b{font-size:14px;min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.count span{font-weight:500;color:#6B6A70;font-size:12.5px}
.count button{width:26px;height:26px;border-radius:8px;border:0;background:#F1F2F5;cursor:pointer;display:grid;place-items:center;color:#3A3A3E;flex:none}
.count button:hover:not(:disabled){background:#ECE9E3}
.count button:disabled{opacity:.35;cursor:default}
.count button svg{width:14px;height:14px}

/* resolution tag (HD / 2K / 4K) */
.res{display:inline-grid;place-items:center;min-width:30px;height:20px;padding:0 6px;border-radius:6px;font-family:var(--f-display);font-size:11px;font-weight:800;letter-spacing:.03em;direction:ltr;
  color:#232326;box-shadow:inset 0 0 0 1.5px #232326}
.res.k2{color:#fff;background:#232326;box-shadow:none}
.res.k4{color:#fff;background:var(--grad);box-shadow:none}

/* popovers */
.pop{position:relative}
.pop>.panel{position:absolute;bottom:calc(100% + 10px);inset-inline-start:0;z-index:6;background:#fff;border-radius:20px;padding:14px;
  box-shadow:0 24px 60px -16px rgba(22,22,24,.32),0 0 0 1px rgba(22,22,24,.06);
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.985);transform-origin:bottom right;transition:opacity .16s,transform .16s,visibility 0s .16s}
.pop.down>.panel{bottom:auto;top:calc(100% + 10px);transform-origin:top right}
.pop.open>.panel{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s}
.p-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 12px}
.p-head h4{margin:0;font-family:var(--f-display);font-weight:700;font-size:15px}
.p-head p{margin:2px 0 0;font-size:12px;color:var(--stone)}
.p-head .cnt{font-size:12px;font-weight:600;color:var(--violet);background:#F1EDFF;border-radius:99px;padding:2px 9px;white-space:nowrap}

/* add: three cards, each a full-width illustration with a title */
.add-panel{width:372px}
.add-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.add-tiles button{position:relative;border:0;border-radius:16px;cursor:pointer;padding:0;text-align:start;background:#FAF9F7;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(22,22,24,.07);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.add-tiles button:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px rgba(139,61,255,.45),0 14px 26px -14px rgba(60,40,140,.5)}
.add-tiles .art{display:grid;place-items:center;aspect-ratio:1/1;width:100%;background:radial-gradient(70% 70% at 50% 40%,#fff,#F1EDFF)}
.add-tiles .art svg{display:block;width:58%;height:58%;transition:transform .2s}
.add-tiles button:hover .art svg{transform:translateY(-2px) scale(1.04)}
.add-tiles .lbl{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 10px 10px}
.add-tiles b{font-family:var(--f-display);font-weight:700;font-size:14px}
.add-tiles .plus{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#9A99A0;box-shadow:inset 0 0 0 1px rgba(22,22,24,.12);font-size:14px;line-height:1;flex:none;transition:color .15s,box-shadow .15s,background .15s}
.add-tiles button:hover .plus{color:#fff;background:var(--violet);box-shadow:none}

/* sizes */
.sizes-panel{width:min(460px,calc(100vw - 48px))}
.packs-row{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.packs-row button{height:30px;padding:0 12px;border-radius:10px;border:0;background:#F1F2F5;font-size:12.5px;font-weight:500;cursor:pointer;color:#3A3A3E;transition:background .15s}
.packs-row button:hover{background:#ECE9E3}
.packs-row button[aria-pressed="true"]{background:#F1EDFF;color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--primary)}
.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.size-grid .sz-card{position:relative;border-radius:14px;background:#FAF9F7;box-shadow:inset 0 0 0 1px rgba(22,22,24,.07);transition:background .15s,box-shadow .15s;display:flex;flex-direction:column}
.size-grid .sz-card:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(22,22,24,.16)}
.size-grid .sz-card.on{background:#F6F2FF;box-shadow:inset 0 0 0 1.5px var(--violet)}
.size-grid .sz-pick{position:static;border:0;border-radius:14px;background:none;cursor:pointer;padding:12px 6px 10px;display:grid;justify-items:center;gap:3px;text-align:center;width:100%;font:inherit;color:inherit}
.size-grid .box{height:44px;width:100%;display:grid;place-items:center;margin-bottom:4px}
.size-grid .box i{display:block;border-radius:5px;background:linear-gradient(160deg,#EDEAE5,#E2DED7);box-shadow:inset 0 0 0 1.5px #C9C5BE}
.size-grid .sz-card.on .box i{background:linear-gradient(150deg,#2E40FF,#8B3DFF 60%,#FF4D9A);box-shadow:0 6px 14px -6px rgba(139,61,255,.7)}
.size-grid .ck{position:absolute;top:7px;inset-inline-end:7px;width:18px;height:18px;border-radius:50%;background:var(--violet);color:#fff;display:none;place-items:center}
.size-grid .ck svg{width:11px;height:11px}
.size-grid .sz-card.on .ck{display:grid}
.sz-step{display:none;align-items:center;justify-content:space-between;gap:4px;margin:0 8px 8px;padding:3px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(139,61,255,.18)}
.sz-card.on .sz-step{display:flex}
.sz-step button{width:24px;height:24px;border-radius:7px;border:0;background:#F1EDFF;color:var(--violet);display:grid;place-items:center;cursor:pointer}
.sz-step button:hover:not(:disabled){background:#E4DBFF}
.sz-step button:disabled{opacity:.35;cursor:default}
.sz-step button svg{width:12px;height:12px}
.sz-step output{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--violet)}
.p-foot b{color:var(--ink)}
.p-sum{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.p-sum .tot{display:inline-flex;align-items:baseline;gap:4px;margin-inline-end:4px;font-size:12.5px;color:var(--stone)}
.p-sum .tot b{font-family:var(--f-display);font-size:16px;font-weight:800;color:var(--ink)}
.p-sum .chip{box-shadow:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px 0 7px;border-radius:8px;background:#F1F2F5;font-size:12px;font-weight:700;color:#232326;font-variant-numeric:tabular-nums}
.p-sum .chip i{display:block;border-radius:2.5px;background:linear-gradient(150deg,#2E40FF,#8B3DFF 60%,#FF4D9A)}
.size-grid b{font-size:13px;font-weight:700;direction:ltr;font-variant-numeric:tabular-nums}
.size-grid small{font-size:11.5px;color:#55555A;line-height:1.3}
.size-grid em{font-style:normal;font-size:10.5px;color:#9A99A0;direction:ltr}
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #EFECE7;font-size:12.5px;color:var(--stone)}
.p-foot button{height:32px;padding:0 16px;border-radius:10px;border:0;background:var(--primary);color:#fff;font-weight:600;font-size:13px;cursor:pointer}

/* resolution */
.q-panel{width:320px}
.q-list{display:grid;gap:4px}
.q-list button{display:flex;align-items:center;gap:12px;border:0;background:none;padding:10px;border-radius:14px;cursor:pointer;text-align:start;transition:background .15s}
.q-list button:hover{background:#FAF9F7}
.q-list button[aria-checked="true"]{background:#F6F2FF}
.q-list .res{min-width:38px;height:26px;font-size:12px}
.q-list .t{flex:1;min-width:0}
.q-list .t b{display:block;font-size:14px;font-weight:600}
.q-list .t small{display:block;font-size:12px;color:var(--stone)}
.q-list .dot{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #C9C5BE;flex:none;display:grid;place-items:center}
.q-list button[aria-checked="true"] .dot{box-shadow:inset 0 0 0 5px var(--violet)}

/* phones: popovers become a bottom sheet */
@media (max-width:560px){
  .pop>.panel,.pop.down>.panel{position:fixed;inset:auto 10px 10px 10px;width:auto;top:auto;bottom:10px;border-radius:22px;transform:translateY(16px);transform-origin:bottom center;z-index:40;max-height:78vh;overflow-y:auto}
  .pop.open>.panel{transform:none}
  .add-panel,.sizes-panel,.q-panel{width:auto}
  .size-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .tools .sep{display:none}
}
.tools .spacer{flex:1}
.opts{display:contents}
/* phones: the settings are a 2×2 grid above the actions (logo · sizes / count · quality), all of them visible;
   under it ＋ and the shortcuts on one side, the mic and «صمّم» on the other. */
@media (max-width:560px){
  .tools{gap:8px;padding:4px 10px 10px}
  .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;order:-1;flex:1 1 100%;min-width:0;
    margin:0 -10px;padding:2px 10px 10px;border-bottom:1px solid rgba(22,22,24,.07)}
  .opts>.pop{min-width:0}
  .opts .ctl{width:100%;min-width:0;justify-content:center;padding:0 8px;gap:6px;overflow:hidden}
  .opts .ctl>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .opts .ctl .chev{display:none}
  .opts .count{justify-content:space-between;padding:0 4px 0 10px}
  .opts .count .ic{display:none}
  .opts .count #cUnit{flex:1;text-align:start}
}
.send{height:40px;padding:0 8px 0 16px;border-radius:99px;border:0;background:var(--grad);color:#fff;display:inline-flex;align-items:center;gap:7px;cursor:pointer;flex:none;
  font-weight:700;font-size:14.5px;box-shadow:0 8px 20px -6px rgba(139,61,255,.65);transition:transform .15s,opacity .15s}
.send:disabled{opacity:.4;box-shadow:none;cursor:default}
.send:not(:disabled):hover{transform:translateY(-1px)}
.send svg{width:17px;height:17px}
.send b{min-width:26px;height:26px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:12.5px;font-variant-numeric:tabular-nums}

.ideas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px;min-height:84px;align-content:flex-start}
.ideas button{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;font-size:13.5px;font-weight:500;color:#2B2B30;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.66);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 2px 10px -4px rgba(60,40,140,.18);
  transition:background .15s,transform .15s,opacity .45s ease,filter .45s ease;transition-delay:0s,0s,var(--d,0s),var(--d,0s)}
.ideas button svg{width:15px;height:15px;color:var(--violet);flex:none}
.ideas button:hover{transform:translateY(-1px);background:#fff}
.ideas button.out{opacity:0;filter:blur(10px)}

/* marquee rows */
.marquee{position:relative;margin:0 0 -16px;direction:ltr;overflow:hidden;overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:14px;width:max-content;direction:ltr;will-change:transform;padding:8px 0 44px}
.marquee:hover .track{animation-play-state:paused}
@media (prefers-reduced-motion:no-preference){
  .track.a{animation:mq 70s linear infinite}
  .track.b{animation:mq 80s linear infinite reverse}
}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq{position:relative;height:300px;flex:none;border-radius:16px;overflow:hidden;box-shadow:0 14px 28px -18px rgba(22,22,24,.28),0 2px 6px -2px rgba(22,22,24,.08),0 0 0 1px rgba(22,22,24,.05)}
.mq .dz{height:100%;width:auto}
.mq .over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;opacity:0;transition:opacity .2s;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.65));direction:rtl}
.mq:hover .over,.mq:focus-within .over{opacity:1}
.mq .over b{font-family:var(--f-display);font-size:14px;color:#fff;margin-bottom:8px}
.try{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:10px;border:0;background:#fff;color:#161618;font-weight:700;font-size:13px;cursor:pointer}
.try:hover{background:#F5F3EF}

/* starter examples */
.starters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.starter{position:relative;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(22,22,24,.07);overflow:hidden;cursor:pointer;text-align:start;border:0;color:inherit;padding:0;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.starter:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(139,61,255,.25),0 28px 50px -30px rgba(60,40,140,.5)}
.starter .stage{position:relative;height:250px;background:radial-gradient(70% 85% at 50% 100%,var(--glow,rgba(139,61,255,.3)),transparent 72%),#F4F5F8}
.starter .stage .s{position:absolute;bottom:-42px;border-radius:12px;overflow:hidden;box-shadow:0 16px 34px -14px rgba(22,22,24,.5);transition:transform .35s ease}
.starter .stage .s .dz{width:100%;height:100%}
.starter .stage .s1{width:28%;left:12%;transform:rotate(-7deg)}
.starter .stage .s2{width:36%;left:32%;z-index:2;bottom:-30px}
.starter .stage .s3{width:30%;right:9%;transform:rotate(6deg)}
.starter:hover .s1{transform:rotate(-10deg) translate(-8px,-6px)}
.starter:hover .s3{transform:rotate(9deg) translate(8px,-6px)}
.starter:hover .s2{transform:translateY(-8px)}
.starter .body{padding:18px 20px 20px;position:relative;z-index:3;background:#fff}
.starter h3{font-family:var(--f-display);font-weight:700;font-size:19px;margin:0 0 4px}
.starter p{margin:0 0 14px;font-size:14px;color:#55555A}
.starter .go{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--violet)}
.starter .go svg{width:16px;height:16px;transition:transform .2s}
.starter:hover .go svg{transform:translateX(-4px)}

/* live resize: rows are grids whose columns follow each size's ratio, so every row fills the panel edge to edge */
.resize{max-width:860px;margin-inline:auto;border-radius:28px;background:#fff;box-shadow:0 0 0 1px rgba(22,22,24,.07),0 30px 60px -40px rgba(22,22,24,.35);padding:22px}
.rz-controls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-bottom:20px}
.rz-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rz-group>span{font-size:12px;color:var(--stone);margin-inline-end:4px}
.seg{display:flex;gap:4px;background:#F1F2F5;padding:3px;border-radius:12px;flex-wrap:wrap}
.seg button{height:32px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:#55555A;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(22,22,24,.12)}
.dots{display:flex;gap:8px}
.dots button{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(22,22,24,.12)}
.dots button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.rz-stage{display:grid;gap:14px}
.rz-row{display:grid;gap:14px;align-items:end}
.rz-item{display:grid;gap:8px;min-width:0}
.rz-item .frame{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 14px 30px -18px rgba(22,22,24,.5)}
.rz-item .frame .dz{width:100%;height:100%}
.rz-item small{font-size:12px;color:var(--stone);text-align:center}

/* ---------- hero trust line ---------- */
.trust{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;font-size:13.5px;font-weight:500;color:#45454B}
.trust li{display:inline-flex;align-items:center;gap:6px}
.trust svg{width:16px;height:16px;color:var(--violet);flex:none}

/* ---------- the new home sections (2026-11 redesign) ---------- */
.hero{min-height:auto;padding:calc(var(--head-h) + clamp(56px,10vh,110px)) 0 clamp(64px,8vw,96px)}
.hero h1{font-size:clamp(36px,6vw,70px);line-height:1.16}
.hero-sub{max-width:720px;margin:0 auto 30px;font-size:clamp(16px,1.6vw,19px);line-height:1.85;color:#45444B;text-wrap:pretty}
.trust{margin-top:4px}

/* industries */
.ind{padding-top:24px}
.ind-h{margin:0 0 18px;text-align:center;font-size:14.5px;font-weight:600;color:var(--muted)}
.ind-mq{overflow:hidden;overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ind-track{display:flex;gap:10px;width:max-content;padding:4px 0}
@media (prefers-reduced-motion:no-preference){.ind-track{animation:indmq 46s linear infinite}}
@keyframes indmq{to{transform:translateX(50%)}}
.ind-track span{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:99px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:14.5px;white-space:nowrap;color:var(--ink-2)}
.ind-track .ic{width:18px;height:18px;color:var(--primary)}
.home-stats{margin-top:40px}
.home-stats .stat b small{font-size:.5em;font-weight:700}

/* platform bento: five products, each a link to its page */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a a b" "c d b" "e e e";gap:16px}
.bn{position:relative;display:flex;flex-direction:column;border-radius:var(--r-xl);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--sh-xs);overflow:hidden;overflow:clip;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s}
.bn:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(114,50,242,.2),var(--sh-md)}
.bn-a{grid-area:a}.bn-b{grid-area:b}.bn-c{grid-area:c}.bn-d{grid-area:d}.bn-e{grid-area:e;flex-direction:row;align-items:center}
.bn-txt{padding:24px 26px 26px;display:grid;gap:8px;align-content:start}
.bn-txt p{margin:0;color:var(--muted);font-size:15px;line-height:1.75}
.bn-txt .link-arrow{font-size:14.5px;margin-top:6px}
.bn-txt .it{margin-bottom:4px}
.bn-vis{position:relative;min-height:220px;margin:10px 10px 0;border-radius:20px;overflow:hidden;overflow:clip;background:radial-gradient(80% 90% at 50% 110%,rgba(139,61,255,.24),transparent 70%),#F3F4F7}
.bn-fan{height:250px}
.bn-fan .lv{position:absolute;bottom:-46px;width:23%;transition:transform .45s var(--ease)}
.bn-fan .f1{inset-inline-end:16%;transform:rotate(7deg)}
.bn-fan .f2{inset-inline-end:38.5%;width:25%;z-index:2;bottom:-30px}
.bn-fan .f3{inset-inline-end:63%;transform:rotate(-7deg)}
.bn-a:hover .f1{transform:rotate(10deg) translate(8px,-8px)}
.bn-a:hover .f2{transform:translateY(-10px)}
.bn-a:hover .f3{transform:rotate(-10deg) translate(-8px,-8px)}
.bn-b{background:var(--surface);color:var(--ink)}
.bn-b .bn-txt p{color:var(--muted)}
.bn-b .link-arrow{color:var(--primary)}
.bn-b .bn-vis{flex:1;min-height:300px;background:radial-gradient(70% 60% at 50% 100%,rgba(255,77,154,.2),transparent 70%),radial-gradient(60% 50% at 20% 10%,rgba(46,64,255,.14),transparent 70%),#EFF0F5;display:grid;place-items:end center}
.mini-phone{position:relative;width:66%;max-width:220px;aspect-ratio:9/16;margin-bottom:-14%;border-radius:26px 26px 0 0;border:7px solid #0B0B10;border-bottom:0;overflow:hidden;background:#0F3247;box-shadow:0 -10px 40px -10px rgba(255,77,154,.45)}
/* the same backlit speaker as the big reel, drawn with gradients */
.mp-scene{position:absolute;inset:0;background:radial-gradient(19% 13% at 50% 36%,#10293A 0 97%,transparent 100%),radial-gradient(62% 30% at 50% 100%,#0B1F2D 0 97%,transparent 100%),radial-gradient(9% 10% at 50% 55%,#10293A 0 97%,transparent 100%),radial-gradient(48% 32% at 54% 33%,rgba(238,252,255,.98),rgba(160,228,242,.55) 50%,transparent 78%),linear-gradient(172deg,#79C3D8,#2A7593 55%,#0E2F4A)}
.mp-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:12px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--line),0 8px 18px -10px rgba(20,20,40,.35);color:var(--ink);font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap}
.mp-chip .ic{width:15px;height:15px;color:#FF9CC6}
.mp-chip.c1{top:22px;inset-inline-start:18px}
.mp-chip.c2{top:66px;inset-inline-end:16px}
.mp-chip.c3{top:110px;inset-inline-start:30px}
@media (prefers-reduced-motion:no-preference){.mp-chip{animation:bob 6s ease-in-out infinite}.mp-chip.c2{animation-delay:-2s}.mp-chip.c3{animation-delay:-4s}}
.mp-logo{position:absolute;top:10px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 5px;border-radius:8px;background:#fff;color:#0E2F4A;font-family:var(--f-display);font-weight:700;font-size:9.5px}
.mp-logo i{width:12px;height:12px;border-radius:4px;background:linear-gradient(135deg,#1E5BFF,#14B8A6)}
.mp-cap{position:absolute;inset:auto 10px 30%;text-align:center;font-family:var(--f-display);font-weight:800;font-size:15px;line-height:1.5;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.mp-cap em{font-style:normal;color:#0E2F4A;background:#FFD23F;border-radius:6px;padding:0 5px;text-shadow:none}
.mp-bar{position:absolute;inset:auto 8px 12%;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px;border-radius:10px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);font-size:10px;font-weight:600;direction:ltr}
.mp-bar .ic{width:11px;height:11px}
.bn-week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:18px 14px;align-items:end;background:radial-gradient(80% 90% at 50% 110%,rgba(46,64,255,.2),transparent 70%),#F5F6FB}
.bn-week>span{display:grid;gap:6px;justify-items:center;padding:8px 6px 10px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.bn-week>span.now{box-shadow:0 0 0 1.5px var(--blue),0 10px 20px -12px rgba(46,64,255,.6)}
.bn-week small{font-size:11px;font-weight:700;color:var(--faint)}
.bn-week .lv{width:100%;border-radius:7px;box-shadow:none}
.bn-week em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:3px;direction:ltr}
.bn-week em.ok{width:20px;height:20px;border-radius:50%;background:#16A34A;color:#fff;justify-content:center}
.bn-week em.ok .ic{width:12px;height:12px}
.bn-ads{display:grid;place-items:center;padding:20px;background:radial-gradient(80% 90% at 50% 110%,rgba(245,158,11,.24),transparent 70%),#FBF7F0}
.ba-card{width:min(260px,92%);padding:16px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-md);display:grid;gap:4px}
.ba-card small{font-size:12px;color:var(--muted)}
.ba-card>b{font-family:var(--f-display);font-weight:800;font-size:32px;line-height:1.1}
.ba-card .spark{height:54px;margin:4px 0}
.ba-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.ba-row b{color:var(--ink)}
.ba-tag{position:absolute;top:12px;inset-inline-start:12px;font-size:10.5px;font-weight:600;color:var(--faint);background:rgba(255,255,255,.8);padding:3px 8px;border-radius:99px}
.bn-e .bn-txt{flex:1;padding:30px 32px}
.bn-e .bn-vis{flex:1;min-height:0;margin:10px;align-self:stretch;display:grid;align-content:center;gap:12px;padding:24px;background:radial-gradient(80% 90% at 100% 0%,rgba(20,184,166,.22),transparent 70%),#F2F7F6}
.bk-logo{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:10px 16px 10px 10px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-xs)}
.bk-logo i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#1E5BFF,#14B8A6);color:#fff}
.bk-logo i .ic{width:20px;height:20px}
.bk-logo b{font-family:var(--f-display);font-size:16px}
.bk-sw{display:flex;gap:8px}
.bk-sw i{width:52px;height:38px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bk-in{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:9px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:13.5px;font-weight:600}
.bk-in .ic{width:17px;height:17px;color:#0B8A84}
@media (max-width:980px){
  .bento{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c" "b d" "e e"}
  .bn-e{flex-direction:column;align-items:stretch}
  .bn-e .bn-vis{order:-1;margin:10px 10px 0}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e"}
  .bn-b .bn-vis{min-height:260px}
}
/* compact: every card the same height (a picture strip on top, the words under it), so the five fit on about one
   screen; the reels card no longer runs two rows tall — its phone rises from the strip and is cut at the bottom */
.bento{grid-template-areas:"a a b" "c d e"}
.bn-e{flex-direction:column;align-items:stretch}
.bn-e .bn-vis{order:-1;flex:none;margin:10px 10px 0;align-self:auto}
.bn-e .bn-txt{flex:none;padding:18px 22px 22px}
.bn-vis{height:196px;min-height:0;flex:none}
.bn-fan{height:196px}
.bn-b .bn-vis{flex:none;height:196px;min-height:0;place-items:start center}
.mini-phone{width:auto;height:230px;max-width:none;aspect-ratio:9/16;margin:16px 0 0}
.bn-txt{padding:16px 20px 20px;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:center}
.bn-txt .it{margin:0}
.bn-txt .h4{margin:0}
.bn-txt p,.bn-txt .link-arrow{grid-column:1/-1}
.bn-txt p{font-size:14.5px;line-height:1.7}
.bn-txt .link-arrow{margin-top:2px}
.bn-vis,.bn-fan,.bn-b .bn-vis{height:176px}
.mini-phone{height:214px;margin-top:14px}
.bn-ads{padding:14px}
.ba-card{padding:13px 14px;gap:2px}
.ba-card>b{font-size:28px}
.ba-card .spark{height:40px;margin:2px 0}
.bn-week{padding:14px 12px}
.bn-e .bn-vis{gap:10px;padding:18px}
@media (max-width:980px){.bento{grid-template-areas:"a a" "b c" "d e"}}
@media (max-width:640px){.bento{grid-template-areas:"a" "b" "c" "d" "e"}.bn-b .bn-vis{min-height:0}}

/* live showcase rows */
.show{padding:clamp(72px,9vw,120px) 0 40px;overflow:hidden;overflow:clip}
.show .sec-head{margin-bottom:28px}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px)}
.sec-head-row .sec-head{margin-bottom:0}

/* the reel in the dark section, its timeline card hanging off the phone */
.reel-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:18px;flex-wrap:wrap}
.reel-stage .mk-phone{width:min(290px,72vw);margin:0}
.reel-tl{width:250px;margin-bottom:14%}
@media (max-width:1180px){.reel-tl{width:100%;max-width:420px;margin:0}}

/* pricing teaser */
.tease .card{display:grid;gap:12px;align-content:start}
.tease .card p{margin:0 0 8px;line-height:1.8}
.tease .card .btn{margin-top:auto}
.tease .card b{color:var(--ink)}
/* «شاهد المزيد» under the live rows (styled in pages.css too, for the showcase page) */
.see-more-row{display:flex;justify-content:center;margin-top:30px}
.see-more{display:inline-flex;align-items:center;gap:16px;line-height:1;letter-spacing:-.005em;height:54px;padding-block:0;padding-inline:26px 7px;border-radius:99px;background:var(--ink);color:#fff;font-weight:700;font-size:15.5px;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 18px 36px -18px rgba(20,16,60,.7);transition:transform .25s var(--ease),box-shadow .25s}
.see-more i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .25s var(--ease),background-color .25s}
.see-more .ic{width:18px;height:18px}
.see-more:hover{transform:translateY(-2px)}
.see-more:hover i{transform:translateX(-4px);background:var(--grad)}
/* «كل حاجة · تصاميم · ريلز · إعلانات» above the hero's prompt (ask-route.js): designs-only controls step aside for
   a reel or an ad */
.hero-inner .ask-modes{display:flex;gap:2px;width:max-content;max-width:100%;margin:0 auto 14px;padding:4px;border-radius:99px;background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(20,20,22,.08),0 10px 24px -16px rgba(40,24,110,.4);overflow-x:auto;scrollbar-width:none}
.hero-inner .ask-modes::-webkit-scrollbar{display:none}
.hero-inner .ask-modes button{flex:none;height:36px;padding:0 16px;border:0;border-radius:99px;background:transparent;color:var(--ink-2);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.hero-inner .ask-modes button:hover{color:var(--ink)}
.hero-inner .ask-modes button[aria-selected="true"]{background:var(--ink);color:#fff}
.composer[data-mode="reels"] .opts,.composer[data-mode="ads"] .opts,.composer[data-mode="reels"] #addPop,.composer[data-mode="ads"] #addPop{display:none}

/* the size picker shows the everyday sizes (and whatever is picked); «عرض كل المقاسات» opens the rest */
.size-grid:not(.all) .sz-card.extra:not(.on){display:none}
.sz-all{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:38px;margin-top:8px;border:0;border-radius:11px;background:var(--soft,#F1F2F5);
  color:var(--ink-2,#2B2B31);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .15s}
.sz-all:hover{background:var(--soft-2,#E9EAEE)}
.sz-all small{font-size:11.5px;font-weight:700;color:var(--stone,#6B6B75);background:rgba(20,20,22,.06);border-radius:99px;padding:1px 7px}
.sz-all svg{width:15px;height:15px}