/* ============================================================
   ALNATIQ · SECTIONS  (hero · logos · interface switcher · features ·
   split blocks · voices · stats · reviews · pricing · CTA · subpage hero)
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.hero__bg { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(900px 520px at 88% 4%, #efe7ff 0%, transparent 58%),
    radial-gradient(760px 480px at -6% 38%, #f1ebff 0%, transparent 55%);
}
.hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; z-index: -1; }
.hero__blob--1 { width: 360px; height: 360px; background: #c9b6ff; top: -80px; right: 6%; }
.hero__blob--2 { width: 300px; height: 300px; background: #d8ccff; bottom: -120px; left: -40px; opacity: .4; }

.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.hero__copy { max-width: 560px; }
.hero__rating { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
.hero__rating .avatars { display: flex; }
.hero__rating .avatars span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -9px; background-size: cover; box-shadow: var(--sh-sm); font-size: .7rem; font-weight: 700; display: grid; place-items: center; color: #fff; }
.hero__rating .avatars span:first-child { margin-left: 0; }
.hero__rating small { font-size: .82rem; color: var(--slate); font-weight: 600; line-height: 1.25; }
.hero__rating small b { color: var(--ink); }

.display em { font-style: normal; position: relative; white-space: nowrap; }
.display em .grad-text { position: relative; z-index: 1; }
.display em::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .34em; background: var(--violet-200); opacity: .55; border-radius: 4px; z-index: 0; transform: rotate(-1deg); }

.hero p.lead { margin-top: 1.3rem; }
.hero .btn-row { margin-top: 1.9rem; }
.hero__note { margin-top: 1.1rem; font-size: .85rem; color: var(--slate-light); display: flex; align-items: center; gap: .45rem; }
.hero__note svg { width: 15px; height: 15px; color: #2ec27e; }


/* ============================================================
   LOGO CLOUD
   ============================================================ */
.logos { text-align: center; }
.logos__label { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); font-weight: 700; margin-bottom: 1.6rem; }
.logos__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.5rem, 5vw, 3.5rem); }
.logos__row span { font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 2vw, 1.35rem); color: #b3adc4; letter-spacing: -.01em; transition: color .2s ease; }
.logos__row span:hover { color: var(--slate); }

/* ============================================================
   INTERFACE SWITCHER  ("changing interfaces")
   ============================================================ */
.switch__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2.3rem auto 2.6rem; max-width: 1000px; }
.switch__tab {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.15rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong); background: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--slate);
  transition: .2s; box-shadow: var(--sh-sm);
}
.switch__tab svg { width: 17px; height: 17px; }
.switch__tab:hover { border-color: var(--violet-300); color: var(--violet-700); transform: translateY(-1px); }
.switch__tab.is-on { background: var(--grad-violet); color: #fff; border-color: transparent; box-shadow: var(--sh-violet-sm); }

.switch__stage { position: relative; max-width: 980px; margin-inline: auto; }
.switch__panel { display: none; }
.switch__panel.is-on { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; animation: panelIn .45s cubic-bezier(.2,.7,.3,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.switch__info .h3 { margin-top: .8rem; }
.switch__info p { margin-top: .8rem; color: var(--slate); }

/* ensure the switch section headline can be wider than global section heads */
#switch .section-head { max-width: 960px; }
@media (min-width: 1024px) {
   #switch .section-head .lead { white-space: nowrap; }
   .switch__tabs { flex-wrap: nowrap; }
}

/* tab soon label */
.tab-soon { color: var(--violet-700); font-style: normal; font-weight: 700; margin-inline-start: .15rem; }
.switch__tab.is-on .tab-soon { color: #fff; }

/* allow panel children to shrink so the device does not overflow */
.switch__panel.is-on > * { min-width: 0; }
.switch__panel .device { max-width: 100%; }
.switch__list { margin-top: 1.3rem; display: grid; gap: .7rem; }
.switch__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; }
.switch__list .ck { width: 22px; height: 22px; border-radius: 50%; background: var(--lilac-100); color: var(--violet-700); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.switch__list .ck svg { width: 13px; height: 13px; }

/* mockup: voice typing */
.vt { font-size: 1rem; line-height: 1.8; color: #3a3550; }
.vt .typed { }
.vt .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--violet); vertical-align: text-bottom; animation: blink 1s steps(2) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.vt__mic { margin-top: 1.2rem; display: flex; align-items: center; gap: .8rem; background: var(--lilac-bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .8rem 1rem; }
.vt__mic-btn { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-violet); display: grid; place-items: center; color: #fff; flex-shrink: 0; box-shadow: var(--sh-violet-sm); position: relative; }
.vt__mic-btn::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--violet-300); animation: ripple 1.8s ease-out infinite; }
@keyframes ripple { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
.vt__mic-btn svg { width: 19px; height: 19px; }
.vt__wave { display: flex; align-items: center; gap: 3px; height: 30px; flex: 1; }
.vt__wave i { width: 3px; background: var(--violet); border-radius: 3px; opacity: .8; animation: eq 1.1s ease-in-out infinite; }
.vt__wave i:nth-child(2n){ animation-delay: .15s; } .vt__wave i:nth-child(3n){ animation-delay: .3s; } .vt__wave i:nth-child(4n){ animation-delay:.45s; } .vt__wave i:nth-child(5n){ animation-delay:.2s; }

.vt__tag { font-size: .76rem; font-weight: 700; color: #16a96a; background: #eafff4; border-radius: var(--r-pill); padding: .3rem .7rem; flex-shrink: 0; }

/* mockup: AI chat */
.chat { display: flex; flex-direction: column; gap: .8rem; }
.chat__msg { max-width: 84%; padding: .75rem 1rem; border-radius: 16px; font-size: .92rem; line-height: 1.5; }
.chat__msg--you { align-self: flex-end; background: var(--grad-violet); color: #fff; border-bottom-right-radius: 5px; }
.chat__msg--ai { align-self: flex-start; background: var(--lilac-bg); border: 1px solid var(--line); border-bottom-left-radius: 5px; color: #3a3550; }
.chat__ai-head { display: flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 700; color: var(--violet-700); margin-bottom: .35rem; }
.chat__ai-head .av { width: 20px; height: 20px; border-radius: 50%; background: var(--grad-violet); display: grid; place-items: center; color: #fff; }
.chat__ai-head .av svg { width: 12px; height: 12px; }
.chat__input { margin-top: .4rem; display: flex; align-items: center; gap: .5rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); padding: .4rem .4rem .4rem 1rem; }
.chat__input span { flex: 1; color: var(--slate-light); font-size: .9rem; }
.chat__input button { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-violet); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.chat__input button svg { width: 16px; height: 16px; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-300); animation: td 1.2s infinite; }
.typing-dots i:nth-child(2){ animation-delay:.2s; } .typing-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes td { 0%,60%,100% { opacity:.3; transform: translateY(0);} 30% { opacity:1; transform: translateY(-3px);} }

/* mockup: voice clone studio */
.clone__card { background: var(--grad-ink); border-radius: var(--r-lg); padding: 1.3rem; color: #fff; }
.clone__top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.clone__av { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-violet); display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); flex-shrink: 0; }
.clone__name { font-family: var(--font-display); font-weight: 700; }
.clone__name small { display: block; color: #b3a9d6; font-weight: 500; font-size: .76rem; }
.clone__wave { display: flex; align-items: center; gap: 3px; height: 64px; padding: .5rem 0; }
.clone__wave i { flex: 1; background: linear-gradient(var(--violet-300), var(--violet)); border-radius: 4px; opacity: .9; }
.clone__btns { display: flex; gap: .6rem; margin-top: 1rem; }
.clone__btns .b1 { flex: 1; background: #fff; color: var(--ink); border-radius: var(--r-pill); padding: .6rem; text-align: center; font-weight: 700; font-size: .85rem; font-family: var(--font-display); }
.clone__btns .b2 { flex: 1; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); padding: .6rem; text-align: center; font-weight: 700; font-size: .85rem; font-family: var(--font-display); }

/* ============================================================
   FEATURE GRID
   ============================================================ */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 3rem; }
.fcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--sh-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fcard:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--violet-200); }
.fcard__ic { width: 50px; height: 50px; border-radius: 14px; background: var(--lilac-100); color: var(--violet-700); display: grid; place-items: center; margin-bottom: 1.1rem; transition: .25s; }
.fcard:hover .fcard__ic { background: var(--grad-violet); color: #fff; transform: rotate(-6deg); }
.fcard__ic svg { width: 24px; height: 24px; }
.fcard h3 { font-size: 1.18rem; }
.fcard p { margin-top: .5rem; font-size: .95rem; color: var(--slate); line-height: 1.6; }

/* ============================================================
   SPLIT FEATURE BLOCKS
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split + .split { margin-top: clamp(3.5rem, 7vw, 6rem); }
.split--flip .split__media { order: -1; }
.split__media { position: relative; }
.split__tagrow { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tag { font-size: .76rem; font-weight: 700; padding: .35rem .8rem; border-radius: var(--r-pill); background: var(--lilac-100); color: var(--violet-700); }
.split__info .h2 { margin-top: .5rem; }
.split__info p { margin-top: 1rem; color: var(--slate); }
.split__info .link-arrow { margin-top: 1.4rem; }

/* mini stat strip inside split media */
.statcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 1.4rem; }
.statcard__row { display: flex; align-items: center; justify-content: space-between; padding: .8rem 0; border-bottom: 1px dashed var(--line); }
.statcard__row:last-child { border-bottom: none; }
.statcard__lang { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .92rem; }
.flag { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; background: var(--lilac-bg); }
.statcard__list { display: flex; flex-direction: column; gap: .75rem; text-align: start; }
.statcard__item { display: flex; align-items: center; gap: .75rem; }
.statcard__cover { width: 44px; height: 60px; border-radius: 14px; background: var(--lilac-bg); border: 1px solid var(--line); object-fit: cover; flex: none; }
.statcard__title { font-size: .96rem; }
.statcard__item--done .statcard__title { opacity: .5; text-decoration: line-through; }
.statcard__item--current .statcard__title { font-weight: 700; }
.statcard__item--next .statcard__title { color: var(--slate-light); }
.statcard__bar { width: 90px; height: 7px; background: var(--lilac-200); border-radius: var(--r-pill); overflow: hidden; }
.statcard__bar i { display: block; height: 100%; background: var(--grad-violet); border-radius: var(--r-pill); }

/* ============================================================
   VOICE SHOWCASE
   ============================================================ */
.voices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 3rem; }
.vcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem; box-shadow: var(--sh-sm); transition: transform .25s ease, box-shadow .25s ease; }
.vcard:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.vcard__top { display: flex; align-items: center; gap: .8rem; margin-bottom: 0; }
.vcard__av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center; flex-shrink: 0; display: block; }
.vcard__avimg { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.vcard__av--1 { background: linear-gradient(135deg,#8b6bff,#6a45f2); }
.vcard__av--2 { background: linear-gradient(135deg,#ff8fb1,#ff5e87); }
.vcard__av--3 { background: linear-gradient(135deg,#4fd1c5,#2bb6a8); }
.vcard__av--4 { background: linear-gradient(135deg,#ffb35e,#ff8a3c); }
.vcard__name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.vcard__meta { font-size: .78rem; color: var(--slate-light); }

/* ============================================================
   STATS BAND
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; text-wrap: balance; background: linear-gradient(135deg,#fff,#c9bdf5); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.03em; }
.stat__label { color: #c4bce0; font-size: .92rem; margin-top: .3rem; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.12); }

/* ============================================================
   REVIEWS
   ============================================================ */
.rev-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); margin-bottom: 3rem; }
.rev-summary__big { text-align: center; }
.rev-summary__score { font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: 1; letter-spacing: -.03em; }
.rev-summary__score .stars { display: block; font-size: 1.1rem; margin-top: .4rem; }
.rev-summary__score small { display: block; color: var(--slate); font-size: .85rem; font-weight: 600; margin-top: .3rem; font-family: var(--font-body); }
.rev-store { display: flex; align-items: center; gap: .8rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .9rem 1.2rem; box-shadow: var(--sh-sm); }
.rev-store__ic { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); }
.rev-store__ic svg { width: 28px; height: 28px; }
.rev-store__t { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.rev-store__t small { display: block; color: var(--slate); font-weight: 500; font-size: .8rem; }
.rev-store .stars { font-size: .82rem; }

.rev-row { direction: ltr; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rev-row::-webkit-scrollbar { display: none; }
.rev-row.is-drag { cursor: grabbing; }
.rev-row + .rev-row { margin-top: 1rem; }
.rev-row__track { display: flex; gap: 1rem; width: max-content; }
.rev-row .review { direction: rtl; }

.review {
  width: 360px; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.4rem; box-shadow: var(--sh-sm);
}
.review__stars { color: #ffb020; letter-spacing: 2px; font-size: .9rem; margin-bottom: .7rem; }
.review__text { font-size: .96rem; line-height: 1.6; color: #3a3550; }
.review__person { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; }
.review__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.review__name { font-family: var(--font-display); font-weight: 700; font-size: .9rem; }
.review__role { font-size: .78rem; color: var(--slate-light); }
.review__badge { margin-left: auto; font-size: .68rem; font-weight: 700; color: #16a96a; background: #eafff4; padding: .25rem .55rem; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: .25rem; }
.review__badge svg { width: 11px; height: 11px; }

/* ============================================================
   PRICING
   ============================================================ */
.billing { display: inline-flex; align-items: center; gap: .9rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .4rem; box-shadow: var(--sh-sm); margin: 1.6rem auto 0; }
.billing button { padding: .55rem 1.2rem; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--slate); transition: .2s; }
.billing button.is-on { background: var(--grad-violet); color: #fff; box-shadow: var(--sh-violet-sm); }
.billing .save { font-size: .72rem; background: #eafff4; color: #16a96a; padding: .15rem .5rem; border-radius: var(--r-pill); margin-left: .35rem; font-weight: 800; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 3rem; align-items: start; }
.plan { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: 2rem 1.7rem; box-shadow: var(--sh-sm); position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.plan:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.plan--featured { border-color: var(--violet); box-shadow: var(--sh-lg); background: linear-gradient(180deg, #fbf9ff, #fff); }
.plan--featured::before { content: "الأكثر شيوعًا"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--grad-violet); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .9rem; border-radius: var(--r-pill); box-shadow: var(--sh-violet-sm); white-space: nowrap; }
.plan__name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.plan__desc { color: var(--slate); font-size: .9rem; margin-top: .35rem; min-height: 2.6em; }
.plan__price { display: flex; align-items: flex-end; gap: .25rem; margin: 1.2rem 0 .3rem; }
.plan__price .amt { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; letter-spacing: -.03em; line-height: 1; }
.plan__price .amt.riyal { position: relative; display: inline-flex; align-items: baseline; }
.plan__price .amt.riyal::after { content: "\20c1"; font-family: "saudi_riyal"; margin-inline-start: .35rem; font-size: 1.1rem; line-height: 1; vertical-align: baseline; }
.plan__annual { color: var(--violet-700); font-size: .9rem; margin-top: .25rem; line-height: 1.4; }
.plan__price .per { color: var(--slate); font-size: .9rem; padding-bottom: .35rem; }
.plan__price .amt[data-strike]::after {}
.plan__billed { font-size: .8rem; color: var(--slate-light); margin-bottom: 1.4rem; min-height: 1.2em; }
.plan .btn { margin-bottom: 1.6rem; }
.plan__feats { display: grid; gap: .7rem; }
.plan__feats li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: #3a3550; }
.plan__feats .ck { width: 20px; height: 20px; border-radius: 50%; background: var(--lilac-100); color: var(--violet-700); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.plan--featured .plan__feats .ck { background: var(--grad-violet); color: #fff; }
.plan__feats .ck svg { width: 12px; height: 12px; }
.plan__feats li.muted-feat { color: var(--slate-light); }
.plan__feats li.muted-feat .ck { background: #f0eef5; color: var(--slate-light); }


/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { position: relative; overflow: hidden; background: var(--grad-ink); border-radius: var(--r-xl); padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; color: #fff; }
.cta-band__glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(var(--violet), transparent 65%); opacity: .55; top: -200px; left: 50%; transform: translateX(-50%); }
.cta-band > * { position: relative; }
.cta-band .h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.cta-band p { margin: 1rem auto 0; max-width: 520px; color: #c9c1e6; }
.cta-band .btn-row { justify-content: center; margin-top: 2rem; }
.cta-band small { display: block; margin-top: 1.2rem; color: #9b91c4; font-size: .82rem; }


/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.phero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); text-align: center; position: relative; overflow: hidden; }
.phero .display { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.phero .lead { margin: 1.2rem auto 0; max-width: 600px; }
.phero .btn-row { justify-content: center; margin-top: 1.8rem; }

/* how it works steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; counter-reset: step; }
.step { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem 1.5rem; box-shadow: var(--sh-sm); }
.step__n { counter-increment: step; font-family: var(--font-display); font-weight: 800; font-size: 1rem; width: 44px; height: 44px; border-radius: 13px; background: var(--grad-violet); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-violet-sm); margin-bottom: 1.2rem; }
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 1.15rem; }
.step p { margin-top: .5rem; color: var(--slate); font-size: .94rem; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 2.4rem; right: -.95rem; width: 1.9rem; height: 2px; background: repeating-linear-gradient(90deg, var(--violet-300) 0 6px, transparent 6px 11px); }

/* platform cards */
.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 3rem; }
.pcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--sh-sm); display: flex; gap: 1rem; align-items: flex-start; transition: transform .25s, box-shadow .25s; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.pcard__ic { width: 48px; height: 48px; border-radius: 13px; background: var(--lilac-100); color: var(--violet-700); display: grid; place-items: center; flex-shrink: 0; }
.pcard__ic svg { width: 23px; height: 23px; }
.pcard h3 { font-size: 1.1rem; }
.pcard p { margin-top: .35rem; font-size: .9rem; color: var(--slate); }
.pcard .tag { margin-top: .7rem; display: inline-block; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: .08s; } .reveal[data-d="2"]{ transition-delay: .16s; } .reveal[data-d="3"]{ transition-delay: .24s; } .reveal[data-d="4"]{ transition-delay:.32s; }

/* editor textarea for demo */
.demo-edit { display: none; }
.demo-edit textarea { width: 100%; min-height: 150px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 1rem; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; resize: vertical; color: #3a3550; background: var(--paper); }
.demo-edit textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124,92,255,.12); }
.reader__tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; gap: .6rem; flex-wrap: wrap; }
.reader__select { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; }
.reader__select select { border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); padding: .35rem .8rem; font-weight: 600; font-size: .82rem; color: var(--ink); background: var(--white); cursor: pointer; }
.btn-tiny { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: var(--violet-700); font-family: var(--font-display); padding: .35rem .7rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); transition: .18s; }
.btn-tiny:hover { border-color: var(--violet-300); background: var(--lilac-bg); }
.btn-tiny svg { width: 14px; height: 14px; }

/* ============================================================