/* KAGEVA home page. Sections: hero (real app screen in a phone, floating
   cards), promises strip, features, how it works, privacy & data, permissions,
   closing. Shared parts (header, footer, buttons, fade-ins) are in site.css. */
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
section { position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  font-weight: 700; font-size: .82rem; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-fg);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint-fg) 60%, transparent); animation: ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint-fg) 55%, transparent); }
  80%, 100% { box-shadow: 0 0 0 9px transparent; } }
.head { max-width: 760px; margin: 0 0 48px; }
.head h2 { font-size: clamp(1.8rem, 4.6vw, 2.9rem); font-weight: 800; letter-spacing: -.025em; margin-top: 16px; }
html[data-lang="ar"] .head h2, html[data-lang="ar"] .hero h1 { letter-spacing: 0; line-height: 1.3; }
.head p { color: var(--muted); font-size: 1.08rem; margin-top: 14px; }
.grad { background: linear-gradient(110deg, var(--hero-a) 0%, #c77de0 45%, var(--hero-b) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.block { padding-top: 120px; }
@media (max-width: 700px) { .block { padding-top: 88px; } .head { margin-bottom: 32px; } }

/* ---------- Hero ---------- */
.hero { padding-top: 56px; isolation: isolate; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 8px; } }
.aurora { position: absolute; inset: -140px 0 auto; height: 980px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.aurora i { position: absolute; width: 760px; height: 760px; border-radius: 50%; opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { background: radial-gradient(circle, var(--pink) 0%, transparent 62%); top: 40px; inset-inline-start: -180px; animation: drift1 22s ease-in-out infinite; }
.aurora i:nth-child(2) { background: radial-gradient(circle, var(--lilac) 0%, transparent 62%); top: 140px; inset-inline-end: -200px; animation: drift2 26s ease-in-out infinite; }
.aurora i:nth-child(3) { background: radial-gradient(circle, var(--sky) 0%, transparent 60%); top: 380px; left: 50%; margin-left: -380px; animation: drift3 30s ease-in-out infinite; opacity: .45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aurora i { opacity: .18; } }
@keyframes drift1 { 50% { transform: translate(120px, 60px) scale(1.12); } }
@keyframes drift2 { 50% { transform: translate(-110px, 80px) scale(.92); } }
@keyframes drift3 { 50% { transform: translate(60px, -70px) scale(1.1); } }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; margin: 22px 0 0; max-width: 13ch; }
.hero .lead { color: var(--muted); font-size: clamp(1.04rem, 1.8vw, 1.2rem); max-width: 44ch; margin: 22px 0 0; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Stage: phone + floating cards */
.stage { position: relative; width: 100%; max-width: 560px; margin: 0 auto; height: 760px; }
.glow { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 40%, transparent) 0%, transparent 64%); }
.ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--primary) 26%, transparent); }
.ring.r1 { width: 520px; height: 520px; animation: spin 80s linear infinite; }
.ring.r2 { width: 760px; height: 760px; animation: spin 120s linear infinite reverse; opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }
.phone { position: absolute; left: 50%; top: 0; width: 318px; margin-left: -159px; padding: 11px; border-radius: 52px;
  background: linear-gradient(145deg, #2b3050, #0f1224 60%); box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.12);
  animation: bob 7s ease-in-out infinite; z-index: 2; }
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 92px; height: 26px; margin-left: -46px;
  border-radius: 999px; background: #070812; z-index: 3; }
.screen { position: relative; overflow: hidden; border-radius: 42px; background: #fdf1ea; padding-top: 40px; }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 412 / 890; }
.sb { position: absolute; top: 14px; left: 28px; right: 26px; display: flex; justify-content: space-between; align-items: center;
  direction: ltr; font: 700 13px/1 var(--font); color: #141833; }
.sb-ic { display: inline-flex; gap: 5px; align-items: center; }
.sb-ic svg { height: 11px; width: auto; }
@keyframes bob { 50% { transform: translateY(-12px); } }

.fc { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 13px;
  text-align: start; border-radius: 20px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow);
  min-width: 230px; animation: float 6s ease-in-out infinite; }
html[dir="rtl"] .fc { padding: 13px 13px 13px 16px; }
.fc .ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; }
.fc .ic svg { width: 22px; height: 22px; }
.fc b { display: block; font-size: .92rem; line-height: 1.3; }
.fc small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.fc > span:last-child { min-width: 0; }
.fc .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fc .acts span { font-size: .74rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.fc .acts span:first-child { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.fc-1 { top: 150px; inset-inline-start: -3%; animation-delay: -1s; }
.fc-2 { top: 480px; inset-inline-start: -3%; animation-delay: -3s; animation-duration: 7s; }
.fc-3 { top: 300px; inset-inline-end: -7%; animation-delay: -2s; animation-duration: 6.5s; }
.fc-4 { top: 620px; inset-inline-end: -4%; animation-delay: -4s; animation-duration: 7.5s; }
@keyframes float { 50% { transform: translateY(-14px); } }

.t-pink { background: color-mix(in srgb, var(--pink) 45%, transparent); color: var(--pink-fg); }
.t-peach { background: color-mix(in srgb, var(--peach) 50%, transparent); color: var(--peach-fg); }
.t-lilac { background: color-mix(in srgb, var(--lilac) 55%, transparent); color: var(--lilac-fg); }
.t-mint { background: color-mix(in srgb, var(--mint) 55%, transparent); color: var(--mint-fg); }
.t-sky { background: color-mix(in srgb, var(--sky) 55%, transparent); color: var(--sky-fg); }

@media (max-width: 960px) {
  .stage { height: 640px; margin-top: 40px; max-width: 600px; }
  .phone { width: 264px; margin-left: -132px; border-radius: 44px; padding: 9px; }
  .screen { border-radius: 36px; padding-top: 34px; }
  .sb { top: 11px; left: 22px; right: 20px; font-size: 11px; }
  .phone::before { top: 16px; width: 76px; height: 22px; margin-left: -38px; }
  .fc { min-width: 0; max-width: 220px; padding: 10px 12px 10px 10px; gap: 10px; border-radius: 16px; }
  .fc .ic { width: 36px; height: 36px; border-radius: 11px; }
  .fc b { font-size: .82rem; } .fc small { font-size: .72rem; }
  .fc-1 { top: 40px; inset-inline-start: 0; } .fc-3 { top: 250px; inset-inline-end: 0; }
  .fc-2 { top: 420px; inset-inline-start: 0; } .fc-4 { display: none; }
  .ring.r2 { display: none; }
}
@media (max-width: 560px) {
  .hero { padding-top: 40px; }
  .stage { height: 580px; margin-top: 48px; }
  .phone { width: 240px; margin-left: -120px; }
  .fc { max-width: 184px; }
  .fc .acts span { padding: 4px 9px; font-size: .7rem; }
  .fc-1 { top: 18px; inset-inline-start: -4px; }
  .fc-3 { top: 220px; inset-inline-end: -4px; }
  .fc-2 { top: 380px; inset-inline-start: -4px; }
  .glow { width: 380px; height: 380px; } .ring.r1 { width: 360px; height: 360px; }
}

/* ---------- Promises strip ---------- */
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.promise { display: flex; align-items: center; gap: 12px; padding: 16px 18px; text-align: start; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 700; font-size: .94rem; }
.promise .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.promise .ic svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .promises { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .promise { padding: 13px 12px; font-size: .86rem; gap: 10px; } }

/* ---------- Features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; } }
.feature { position: relative; padding: 28px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.feature::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, var(--tint, var(--lilac)) 0%, transparent 65%); opacity: .35; transition: opacity .45s, transform .6s var(--ease); }
html[dir="rtl"] .feature::after { inset: auto auto -60% -40%; }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 22%, transparent); }
.feature:hover::after { opacity: .7; transform: scale(1.15); }
.feature .ic { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 22px;
  transition: transform .5s var(--ease); }
.feature .ic svg { width: 28px; height: 28px; }
.feature:hover .ic { transform: rotate(-8deg) scale(1.08); }
.feature h3 { position: relative; z-index: 1; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.feature p { position: relative; z-index: 1; color: var(--muted); margin-top: 10px; }
.feature .chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 6px 12px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--muted); }
.feature .chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-fg); }

/* ---------- How it works ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.steps::before { content: ""; position: absolute; top: 33px; inset-inline-start: 34px; inset-inline-end: calc((100% - 44px) / 3 - 34px); height: 3px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--primary) 0 8px, transparent 8px 16px); opacity: .55; }
.js .steps::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease) .3s; }
html[dir="rtl"].js .steps::before { clip-path: inset(0 0 0 100%); }
.js .steps.in::before { clip-path: inset(0 0 0 0); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .steps::before { display: none; } }
.step { position: relative; z-index: 1; }
.step .num { width: 68px; height: 68px; margin: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem;
  color: #fff; background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); box-shadow: 0 0 0 8px var(--bg), var(--shadow); }
.step h3 { font-size: 1.15rem; font-weight: 800; margin-top: 22px; }
.step > p { color: var(--muted); margin: 8px 0 0; max-width: 34ch; }
.mini { margin: 22px 0 0; max-width: 320px; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); text-align: start; display: grid; gap: 10px; transition: transform .45s var(--ease), box-shadow .45s; }
.step:hover .mini { transform: translateY(-5px); box-shadow: var(--shadow); }
.mini .row { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 700; }
.mini .row small { display: block; color: var(--muted); font-weight: 600; font-size: .76rem; }
.mini .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.mini .ic svg { width: 18px; height: 18px; }
.mini .field { height: 38px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; color: var(--soft); font-size: .82rem; }
.mini .go { height: 38px; border-radius: 12px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: .84rem; font-weight: 700; }
.pair { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dev { width: 54px; height: 84px; border-radius: 14px; border: 2px solid var(--fg); display: grid; place-items: center; position: relative; }
.dev svg { width: 24px; height: 24px; }
.dev small { position: absolute; bottom: -22px; font-size: .7rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.link { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 12px); position: relative; }
.link::after { content: ""; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
  animation: travel 2.4s ease-in-out infinite; }
html[dir="rtl"] .link::after { animation-name: travel-rtl; left: auto; right: 0; }
@keyframes travel { 50% { left: calc(100% - 10px); } }
@keyframes travel-rtl { 50% { right: calc(100% - 10px); } }
.code { justify-self: center; margin-top: 18px; padding: 8px 16px; border-radius: 12px; background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  font-weight: 800; letter-spacing: .18em; font-size: .95rem; direction: ltr; }
.tog { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .86rem; font-weight: 700; }
.tog small { display: block; color: var(--muted); font-weight: 600; font-size: .74rem; }
.sw { width: 40px; height: 24px; border-radius: 999px; background: var(--primary); position: relative; flex: 0 0 auto; }
.sw::after { content: ""; position: absolute; top: 3px; inset-inline-end: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.sw.off { background: color-mix(in srgb, var(--soft) 40%, transparent); }
.sw.off::after { inset-inline-end: auto; inset-inline-start: 3px; }

/* ---------- Privacy & data ---------- */
.privacy-panel { border-radius: 36px; padding: 72px 28px; background:
  radial-gradient(800px 400px at 0% 0%, color-mix(in srgb, var(--mint) 40%, transparent), transparent 60%),
  radial-gradient(800px 400px at 100% 100%, color-mix(in srgb, var(--lilac) 45%, transparent), transparent 60%),
  var(--surface); border: 1px solid var(--line); }
@media (max-width: 700px) { .privacy-panel { padding: 48px 16px; border-radius: 28px; } }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.tile { grid-column: span 4; padding: 24px; border-radius: 24px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.tile.wide { grid-column: span 8; }
.tile.half { grid-column: span 6; }
@media (max-width: 980px) { .tile, .tile.wide, .tile.half { grid-column: span 12; } }
.tile h3 { display: flex; align-items: center; gap: 10px; font-size: 1.06rem; font-weight: 800; }
.tile h3 .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.tile h3 .ic svg { width: 19px; height: 19px; }
.tile > p { color: var(--muted); margin-top: 12px; font-size: .96rem; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
@media (max-width: 640px) { .cols { grid-template-columns: 1fr; } }
.cols h4 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--soft); }
html[data-lang="ar"] .cols h4 { letter-spacing: 0; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 9px; align-items: flex-start; font-size: .93rem; color: var(--fg); }
.checks li small { color: var(--muted); }
.checks svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--mint-fg); }
.checks.no svg { color: var(--pink-fg); }
.never { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--pink) 22%, transparent); font-size: .92rem; }
.never b { color: var(--pink-fg); }
.bars { display: grid; gap: 12px; margin-top: 16px; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: .86rem; }
.bar-row span:first-child { color: var(--muted); }
.bar-row b { font-size: .86rem; }
.meter { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hero-a), var(--hero-b));
  width: var(--w); transform-origin: left; }
html[dir="rtl"] .meter i { transform-origin: right; }
.js .tile.reveal .meter i { transform: scaleX(0); transition: transform 1.2s var(--ease) .3s; }
.js .tile.reveal.in .meter i { transform: none; }
.del { list-style: none; counter-reset: d; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.del li { counter-increment: d; display: flex; gap: 10px; align-items: center; font-size: .93rem; }
.del li::before { content: counter(d); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: .8rem; }
.more-tile { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.more-tile > p { margin: 0; color: var(--fg); font-weight: 600; }
.more-tile .links { margin-top: 0; }
.tile .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tile .links .btn { min-height: 44px; padding: 10px 18px; font-size: .9rem; }

/* Permissions */
.perms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
@media (max-width: 760px) { .perms { grid-template-columns: 1fr; } }
.perm { border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); transition: box-shadow .3s; }
.perm[open] { box-shadow: var(--shadow); }
.perm summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 800; }
.perm summary::-webkit-details-marker { display: none; }
.perm summary .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.perm summary .ic svg { width: 20px; height: 20px; }
.perm summary small { display: block; color: var(--muted); font-weight: 600; font-size: .8rem; }
.perm summary .chev { margin-inline-start: auto; width: 20px; height: 20px; color: var(--soft); transition: transform .3s var(--ease); flex: 0 0 auto; }
.perm[open] summary .chev { transform: rotate(180deg); }
.perm .body { padding: 0 18px 18px 68px; color: var(--muted); font-size: .93rem; display: grid; gap: 8px; }
html[dir="rtl"] .perm .body { padding: 0 68px 18px 18px; }
.perm .body b { color: var(--fg); }

/* ---------- Closing ---------- */
.closing { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; border-radius: 36px; padding: 48px;
  color: #fff; background: linear-gradient(120deg, #ff8f9a 0%, #b47fe0 45%, #6C75E6 100%); box-shadow: var(--shadow-lg); overflow: hidden; }
.closing::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 60%); animation: drift2 20s ease-in-out infinite; }
html[dir="rtl"] .closing::before { inset: -40% auto auto -10%; }
.mascot { position: relative; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 6px solid rgba(255,255,255,.4);
  box-shadow: 0 30px 60px -20px rgba(20, 20, 80, .5); animation: bob 6s ease-in-out infinite; }
.mascot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.closing h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
html[data-lang="ar"] .closing h2 { letter-spacing: 0; line-height: 1.3; }
.closing p { margin-top: 12px; opacity: .92; font-size: 1.06rem; max-width: 52ch; }
.closing .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.closing .btn-ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.45); box-shadow: none; }
.closing .btn-ghost:hover { background: rgba(255,255,255,.26); }
.closing .mailto { display: inline-block; margin-top: 18px; color: #fff; opacity: .9; font-weight: 600; font-size: .92rem; }
@media (max-width: 760px) {
  .closing { grid-template-columns: 1fr; padding: 36px 22px; gap: 22px; border-radius: 28px; }
  .mascot { width: 140px; height: 140px; }
}