:root {
  --bg: #f4f6fb;
  --panel: rgba(255,255,255,0.72);
  --panel-strong: rgba(255,255,255,0.92);
  --line: rgba(17, 24, 39, 0.08);
  --text: #111827;
  --muted: #5f6b7a;
  --blue: #0a84ff;
  --blue-2: #5aa8ff;
  --shadow: 0 18px 60px rgba(17,24,39,.12);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --max: 1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 12%, rgba(76,140,255,.22), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(122,185,255,.26), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f3f5f9 36%, #eef1f7 100%);
}
.page-noise{position:fixed; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.55) 0.7px, transparent 0.7px); background-size:14px 14px; opacity:.23}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%; height:auto}
.site-header{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:calc(var(--max) + 48px); margin:0 auto; padding:18px 24px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background:rgba(248,251,255,.72); border-bottom:1px solid rgba(17,24,39,.05)
}
.brand{display:flex; align-items:center; gap:14px; font-weight:700; font-size:1.1rem}
.brand img{width:42px; height:42px; border-radius:12px; box-shadow:0 12px 30px rgba(10,132,255,.22)}
.nav{display:flex; gap:22px; color:var(--muted); font-weight:600; font-size:.98rem}
.nav a:hover,.lang-switch button.active{color:var(--blue)}
.header-actions{display:flex; align-items:center; gap:16px}
.lang-switch{display:flex; gap:8px; padding:6px; border-radius:999px; background:rgba(255,255,255,.9); box-shadow:0 10px 25px rgba(17,24,39,.07)}
.lang-switch button{border:0; background:transparent; width:34px; height:34px; border-radius:50%; font-size:18px; cursor:pointer}
.lang-switch button:hover{background:rgba(10,132,255,.08)}
.section{max-width:var(--max); margin:0 auto; padding:88px 24px}
.hero{display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; min-height:calc(100vh - 82px)}
.eyebrow{display:inline-flex; padding:8px 14px; border-radius:999px; background:rgba(10,132,255,.1); color:var(--blue); font-weight:700; letter-spacing:.01em; margin-bottom:18px}
.hero h1,.section-heading h2,.contact-copy h2{font-size:clamp(2.6rem, 5vw, 5.2rem); line-height:.98; letter-spacing:-.04em; margin:0 0 18px}
.section-heading h2{font-size:clamp(2rem, 4vw, 4rem)}
.lead,.section-heading p,.contact-copy p,.panel p,.intro-band p{font-size:1.12rem; line-height:1.72; color:var(--muted); margin:0}
.hero-actions{display:flex; gap:16px; margin:28px 0}
.hero-points{display:flex; flex-wrap:wrap; gap:12px}
.hero-points span{padding:12px 16px; background:rgba(255,255,255,.78); border:1px solid rgba(17,24,39,.06); border-radius:999px; color:#314052; font-weight:600}
.appstore-badge{display:inline-flex; align-items:center; gap:14px; padding:14px 18px; border-radius:18px; background:#101114; color:#fff; box-shadow:var(--shadow)}
.appstore-badge.compact{padding:10px 14px; border-radius:14px}
.appstore-badge small{display:block; opacity:.8; font-size:.72rem; line-height:1.1}
.appstore-badge strong{display:block; font-size:1rem}
.apple{font-size:1.6rem; line-height:1}
.hero-visual{position:relative; min-height:720px}
.hero-glow{position:absolute; inset:10% 8% 18% 14%; background:radial-gradient(circle, rgba(87,157,255,.35), transparent 62%); filter:blur(18px)}
.shot{position:absolute; border-radius:30px; overflow:hidden; background:rgba(255,255,255,.68); border:1px solid rgba(255,255,255,.72); box-shadow:0 28px 80px rgba(22,34,58,.18); backdrop-filter:blur(18px)}
.shot img,.panel img,.story-panel img{width:100%; height:auto; object-fit:contain}
.shot-dashboard{width:min(720px, 100%); right:0; top:40px}
.shot-tray{width:min(420px, 58%); left:0; bottom:80px}
.floating-slow{animation:floatA 8s ease-in-out infinite}
.floating-fast{animation:floatB 6.6s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.intro-band{padding-top:12px}
.intro-band p{max-width:980px; margin:0 auto; text-align:center; font-size:1.32rem; color:#2d3d50}
.section-heading{max-width:980px; margin-bottom:34px}
.section-heading.center{text-align:center; margin-inline:auto}
.section-heading.narrow{max-width:820px}
.grid{display:grid; gap:28px}
.grid.two{grid-template-columns:1fr 1fr}
.showcase-grid{grid-template-columns:1.15fr .85fr; align-items:center}
.panel{
  background:var(--panel); border:1px solid rgba(255,255,255,.72); border-radius:var(--radius-xl); padding:28px;
  box-shadow:var(--shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)
}
.image-panel{padding:18px}
.small-shot-panel img{margin:auto}
.large-shot img{border-radius:22px}
.text-panel h3,.feature-card h3{font-size:1.7rem; line-height:1.1; margin:0 0 14px; letter-spacing:-.03em}
.feature-list{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:12px}
.feature-list li{padding:12px 14px; background:rgba(10,132,255,.06); border-radius:14px; color:#27415f; font-weight:600}
.gap-top{margin-top:28px}
.section-dark{position:relative}
.section-dark::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,38,67,.02), rgba(19,38,67,.06)); border-top:1px solid rgba(17,24,39,.04); border-bottom:1px solid rgba(17,24,39,.04); z-index:-1}
.accent-panel{background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(244,248,255,.84))}
.sticky-story{display:grid; grid-template-columns:.9fr 1.1fr; gap:38px; align-items:start}
.story-copy{position:sticky; top:110px}
.story-step{display:grid; grid-template-columns:48px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); opacity:.55; transition:.35s ease}
.story-step.active{opacity:1}
.story-step span{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(10,132,255,.1); color:var(--blue); font-weight:800}
.story-step h3{margin:0 0 6px; font-size:1.28rem; letter-spacing:-.02em}
.story-step p{margin:0; color:var(--muted); line-height:1.7}
.story-visual{position:sticky; top:110px; min-height:720px}
.story-panel{display:none; background:var(--panel-strong); border-radius:34px; padding:18px; border:1px solid rgba(255,255,255,.72); box-shadow:var(--shadow)}
.story-panel.active{display:block}
.cards-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.feature-card{display:flex; flex-direction:column; gap:16px}
.feature-card img{border-radius:22px}
.contact-section{display:grid; grid-template-columns:1fr .72fr; gap:28px; align-items:start}
.contact-card{font-size:1.12rem; line-height:1.8}
.contact-card a{color:var(--blue); font-weight:700}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1; transform:none}
@media (max-width: 1120px){
  .hero,.sticky-story,.contact-section,.grid.two,.showcase-grid,.cards-grid{grid-template-columns:1fr}
  .nav{display:none}
  .hero{min-height:unset}
  .hero-visual{min-height:540px}
  .shot-dashboard{position:relative; width:100%; top:auto; right:auto}
  .shot-tray{position:absolute; width:42%; left:0; bottom:18px}
  .story-copy,.story-visual{position:relative; top:auto}
}
@media (max-width: 720px){
  .site-header{padding:14px 16px}
  .section{padding:72px 16px}
  .brand span{display:none}
  .header-actions{gap:10px}
  .appstore-badge.compact{display:none}
  .hero h1,.section-heading h2,.contact-copy h2{font-size:clamp(2.1rem, 11vw, 3rem)}
  .lead,.section-heading p,.contact-copy p,.panel p,.intro-band p{font-size:1rem}
  .panel{padding:20px}
  .hero-visual{min-height:420px}
  .shot{border-radius:22px}
  .shot-tray{width:54%}
  .hero-points span{width:100%; justify-content:center}
}


.site-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(12px);
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(17, 17, 22, 0.92);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease, transform .26s ease;
  z-index: 9999;
  max-width: min(calc(100vw - 32px), 420px);
  text-align: center;
}

.site-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}