/* Calling AI – site. Same "clean" dark glass look as the app. */
:root {
  --bg: #0F1720;
  --glass: linear-gradient(145deg, rgba(232,238,244,.10), rgba(214,222,230,.06) 60%, rgba(222,228,235,.08));
  --line: rgba(255,255,255,.14);
  --text: #FFFFFF;
  --muted: rgba(255,255,255,.66);
  --accent: #6FB7FF;
  --ai: #8E9BC4;
  --ok: #7BE3A9;
  --warn: #F5C04A;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font-family: "Heebo", "Segoe UI", Arial, sans-serif; font-size: 17px; line-height: 1.65;
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -120px, #1C3550 0%, transparent 70%),
    radial-gradient(circle 420px at 0% 45%, rgba(80,170,255,.16), transparent 70%),
    radial-gradient(circle 420px at 100% 95%, rgba(60,220,170,.12), transparent 70%);
  background-attachment: fixed;
}
a { color: var(--accent); }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 16px; }

/* top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 19px; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.lang { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 14px; font: inherit; font-size: 15px; cursor: pointer; }
.lang:hover { border-color: var(--accent); }

/* language switch: only the chosen language is shown (<html data-l="xx">) */
[data-lang] { display: none; }
html[data-l="he"] [data-lang="he"], html[data-l="en"] [data-lang="en"], html[data-l="ar"] [data-lang="ar"],
html[data-l="ru"] [data-lang="ru"], html[data-l="fr"] [data-lang="fr"], html[data-l="zh"] [data-lang="zh"] { display: revert; }
select.lang { appearance: none; -webkit-appearance: none; padding-inline-end: 30px; direction: ltr;
  background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center; }
select.lang option { background: #0F1720; color: #fff; }
html[data-l="zh"] body { font-family: "Heebo", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif; }
html[data-l="ar"] body { font-family: "Heebo", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; }

/* hero: text on one side, every device small on the other – all of it on the first screen */
.hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: center;
  min-height: min(calc(100vh - 90px), 640px); padding: 6px 0 20px; }
.intro { text-align: start; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); margin: 0 0 4px; line-height: 1.15; }
.hero .tag { color: var(--accent); font-size: 20px; font-weight: 500; margin: 0 0 12px; }
.hero p { color: var(--muted); margin: 0; }
.badge { display: inline-block; margin-top: 20px; padding: 10px 20px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--glass); color: var(--muted); font-size: 15px; }
.platforms { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.plat { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px 0 14px; border-radius: 11px;
  background: #000; border: 1px solid #A6A6A6; color: #fff; text-align: start; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.plat svg { width: 28px; height: 28px; flex: none; }
.plat small { display: block; font-size: 11px; line-height: 1.1; opacity: .85; letter-spacing: .2px; }
.plat b { display: block; font-size: 18px; line-height: 1.15; font-weight: 600; }
.plat.android svg { color: #3DDC84; }
.plat.windows svg { color: #fff; }
@media (max-width: 820px) { .platforms { justify-content: center; } }
footer .tm { font-size: 12px; opacity: .7; margin-top: 6px; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 18px; padding-top: 16px; }
  .intro { text-align: center; }
  .hero p { max-width: 560px; margin: 0 auto; }
}

/* the showcase: laptop at the back, tablet in front on one side, three phones on the other */
.showcase { position: relative; width: 100%; max-width: 600px; margin: 0 auto; aspect-ratio: 1.25; direction: ltr; }
.showcase::before { content: ""; position: absolute; inset: 10% 0 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 45%, rgba(80,170,255,.35), transparent 60%),
              radial-gradient(circle at 75% 75%, rgba(60,220,170,.25), transparent 60%);
  filter: blur(40px); }
.chrome { background: linear-gradient(90deg, #6d737b 0%, #e9edf1 6%, #9ea5ad 12%, #f7f9fb 50%, #9ea5ad 88%, #e9edf1 94%, #6d737b 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.55), 0 22px 50px rgba(0,0,0,.55); }
.bezel { position: relative; background: #05080c; height: 100%; }
.shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.shine::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 28%, transparent 42%); }
.shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent);
  transform: skewX(-18deg); animation: sweep 5.5s ease-in-out infinite; }
@keyframes sweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .shine::after { animation: none; display: none; } .swap img + img { animation: none; } }

.sc-laptop { position: absolute; top: 4%; left: 3%; width: 54%; margin: 0; }
.laptop .lid { padding: .9%; border-radius: 2.6% / 4.2%; }          /* monitor: even chrome frame */
.laptop .bezel { padding: 1.8%; border-radius: 2% / 3.2%; }
.laptop img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.laptop .base { position: relative; height: 0; padding-bottom: 15%; background: none; box-shadow: none; }   /* the stand */
.laptop .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 9%; height: 82%; transform: translateX(-50%);
  background: linear-gradient(90deg, #7d848c, #eef1f4 45%, #a3aab2); }
.laptop .base::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 36%; height: 18%; transform: translateX(-50%);
  border-radius: 50% 50% 8px 8px / 100% 100% 8px 8px;
  background: linear-gradient(90deg, #6d737b, #e9edf1 30%, #f7f9fb 50%, #c3c9cf 75%, #6d737b); box-shadow: 0 10px 22px rgba(0,0,0,.5); }

.sc-tablet { position: absolute; left: 0; bottom: 12%; width: 33%; padding: .9%; border-radius: 7% / 10.5%; }
.tablet .bezel { padding: 3%; border-radius: 6.4% / 9.6%; }
.tablet img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3%; }

.sc-phones { position: absolute; right: 0; bottom: 0; width: 64%; display: flex; align-items: flex-end; justify-content: center; gap: 3%; }
.device { width: 37%; }
.device.side { width: 30%; margin-bottom: 6%; }
.phone { position: relative; aspect-ratio: 1170 / 2532; padding: 3%; border-radius: 17% / 7.8%;
  background: linear-gradient(90deg, #6d737b 0%, #e9edf1 7%, #9ea5ad 14%, #f7f9fb 50%, #9ea5ad 86%, #e9edf1 93%, #6d737b 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.6); }
.phone .bezel { padding: 4%; border-radius: 15% / 7%; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12% / 5.6%; }
.swap { position: relative; height: 100%; }
.swap img { position: absolute; inset: 0; }
.swap img + img { animation: swap 4s infinite; }   /* 2 s each screen */
@keyframes swap { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* glass panels */
.panel { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: 22px 24px; margin: 18px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 40px rgba(0,0,0,.25); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 18px 0; }
.grid .panel { margin: 0; }
.panel h3 { margin: 0 0 6px; font-size: 18px; }
.panel p { margin: 0; color: var(--muted); font-size: 15.5px; }
.ico { font-size: 24px; display: block; margin-bottom: 6px; }
.ai h3 { color: #C9D1E6; }

/* feature cards that open for more */
.card summary { list-style: none; cursor: pointer; position: relative; padding-bottom: 26px; }
.card summary::-webkit-details-marker { display: none; }
.card .more { position: absolute; bottom: 0; inset-inline-start: 0; color: var(--accent); font-size: 14px; font-weight: 500; }
.card .more::after { content: " ▾"; }
.card[open] .more::after { content: " ▴"; }
.card ul { margin: 12px 0 0; padding-inline-start: 20px; color: rgba(255,255,255,.82); font-size: 15px; }
.card li { margin: 4px 0; }
.card .see { display: inline-block; margin-top: 8px; font-size: 14px; }
.grid { align-items: start; }

/* document pages */
.doc h1 { font-size: clamp(26px, 5vw, 36px); margin: 26px 0 2px; }
.doc .date { color: var(--muted); font-size: 14.5px; margin-bottom: 8px; }
.doc h2 { font-size: 21px; margin: 30px 0 8px; color: var(--accent); }
.doc p, .doc li { color: rgba(255,255,255,.86); }
.doc ul, .doc ol { padding-inline-start: 22px; }
.doc li { margin: 5px 0; }
.table { overflow-x: auto; margin: 10px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
th, td { text-align: start; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--accent); font-weight: 600; }
.short { border-color: rgba(111,183,255,.4); }
.short li { color: var(--text); }
.steps li { margin: 10px 0; }
.note { color: var(--muted); font-size: 15px; }
.mail { font-weight: 600; direction: ltr; unicode-bidi: embed; }

/* footer */
footer { border-top: 1px solid var(--line); margin-top: 46px; padding: 22px 0 34px; color: var(--muted); font-size: 14.5px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent); }

@media print {
  body { background: #fff; color: #111; font-size: 12pt; }
  .lang, .badge { display: none; }
  .panel { background: none; box-shadow: none; border-color: #ccc; }
  .panel p, .doc p, .doc li, .note, footer, footer a, .hero p, .doc .date { color: #222; }
  .doc h2, th, a, .hero .tag { color: #0B6A96; }
  th, td { border-color: #ccc; }
  main[data-lang] { break-before: page; }
}