:root{
  --bg:#020617;--bg2:#06132d;--text:#f7f9ff;--muted:#aeb9d2;--line:rgba(255,255,255,.12);
  --cyan:#03d7ca;--blue:#0879ff;--violet:#8b42ff;--max:1440px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:
radial-gradient(circle at 78% 20%,rgba(0,106,255,.16),transparent 35%),
radial-gradient(circle at 8% 8%,rgba(30,0,100,.18),transparent 28%),
linear-gradient(180deg,#020617 0%,#03091b 60%,#020512 100%);color:var(--text);
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit}.ambient{position:fixed;pointer-events:none;filter:blur(80px);opacity:.28;border-radius:50%;z-index:-2}
.ambient-a{width:460px;height:460px;background:#005cff;right:-150px;top:80px}.ambient-b{width:420px;height:420px;background:#6f00ff;left:-180px;top:540px}
.mesh{position:absolute;left:0;right:0;top:500px;height:620px;opacity:.44;pointer-events:none;z-index:-1;background:
radial-gradient(ellipse at center,rgba(0,140,255,.4),transparent 58%),
repeating-radial-gradient(ellipse at 50% 60%,rgba(0,215,255,.23) 0 1px,transparent 2px 18px);transform:skewY(-4deg)}
.site-header{width:min(calc(100% - 48px),var(--max));height:82px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;letter-spacing:.04em}.brand img{object-fit:contain}
.desktop-nav{display:flex;gap:38px;color:#dce4f6;font-size:14px}.desktop-nav a,.footer a{transition:.2s}.desktop-nav a:hover,.footer a:hover{color:var(--cyan)}
.header-actions{display:flex;align-items:center;gap:14px}.language-switcher{display:flex;padding:4px;border:1px solid var(--line);border-radius:999px}
.language-switcher button{color:#aeb9d2;border:0;background:none;padding:8px 10px;border-radius:999px;cursor:pointer;font-size:12px}
.language-switcher button.active{color:white;background:rgba(255,255,255,.1)}
.header-cta{padding:12px 18px;border-radius:999px;background:linear-gradient(100deg,var(--cyan),var(--blue),var(--violet));font-weight:700;font-size:13px}
.hero{width:min(calc(100% - 48px),var(--max));min-height:780px;margin:0 auto;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:35px;padding:54px 0 70px}
.hero-copy{position:relative;z-index:3}.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(134,78,255,.72);border-radius:999px;padding:10px 16px;color:#cbd5ff;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.spark{color:#9f78ff}.hero h1{margin:28px 0 15px;font-size:clamp(66px,7.2vw,118px);line-height:.88;letter-spacing:-.065em}
.gradient-word{background:linear-gradient(100deg,#9a4cff,#4e78ff,#00dfd3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{margin:0 0 16px;font-size:clamp(22px,2vw,31px);line-height:1.34;color:#d1daec}.hero-text{max-width:650px;color:var(--muted);font-size:17px;line-height:1.6}
.ai-demo{max-width:670px;height:62px;margin-top:30px;display:flex;align-items:center;border:1px solid rgba(56,135,255,.62);border-radius:22px;background:rgba(8,21,52,.72);box-shadow:inset 0 1px rgba(255,255,255,.05),0 18px 60px rgba(0,69,255,.12);padding:0 19px;font-size:16px}
.ai-icon{color:#a879ff;margin-right:13px;font-size:21px}.caret{width:2px;height:23px;margin-left:3px;background:#22d3ee;animation:blink .85s infinite}
.store-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:23px}.store-button{min-width:190px;height:62px;padding:8px 17px;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.28);border-radius:11px;background:#030611}
.store-button.google:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,101,255,.16)}.store-button{transition:.2s}.store-mark{font-size:31px}.store-button small,.store-button strong{display:block}.store-button small{font-size:10px}.store-button strong{font-size:20px;line-height:1.1}
.is-disabled{opacity:.65}.trust-row{margin-top:31px;display:flex;flex-wrap:wrap;gap:25px;color:#bcc8dd;font-size:13px}
.hero-visual{position:relative;min-height:690px}.phone{position:absolute;z-index:3;width:min(520px,68%);right:10%;top:0;margin:0;filter:drop-shadow(0 48px 70px rgba(0,0,0,.6));transform:rotate(3deg);animation:phoneFloat 7s ease-in-out infinite}
.phone img{display:block;width:100%;height:auto}.halo{position:absolute;border-radius:50%;border:1px solid rgba(55,141,255,.12)}.halo-1{width:530px;height:530px;right:2%;top:80px}.halo-2{width:680px;height:680px;right:-10%;top:10px}
.float-card{position:absolute;z-index:5;display:flex;align-items:center;gap:11px;min-width:168px;padding:14px 16px;border:1px solid rgba(74,135,255,.48);border-radius:20px;background:linear-gradient(140deg,rgba(18,43,88,.88),rgba(5,17,42,.68));box-shadow:0 18px 55px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
.float-card strong,.float-card small{display:block}.float-card strong{font-size:14px}.float-card small{margin-top:4px;color:#aeb9d2;font-size:11px}.float-icon{font-size:24px;color:#b56cff}.float-card b{margin-left:auto;color:#32e37f}
.card-apartment{left:1%;top:14%;animation:floatA 6s ease-in-out infinite}.card-events{left:4%;top:42%;animation:floatB 7s ease-in-out infinite}.card-shops{right:-4%;top:28%;animation:floatA 8s ease-in-out infinite}.card-ai{right:-2%;bottom:17%;animation:floatB 6.5s ease-in-out infinite}
.feature-strip{width:min(calc(100% - 48px),var(--max));margin:0 auto 28px;padding:24px 26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(100deg,rgba(17,26,58,.9),rgba(7,15,38,.85));display:grid;grid-template-columns:repeat(3,1fr)}
.feature-strip article{display:flex;align-items:center;gap:18px;padding:0 25px;border-right:1px solid var(--line)}.feature-strip article:last-child{border:0}.feature-strip h2{margin:0 0 6px;font-size:18px}.feature-strip p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.feature-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;font-size:26px;background:rgba(255,255,255,.04);border:1px solid currentColor}.purple{color:#9d56ff}.blue{color:#5677ff}.cyan{color:#00d8e8}
.preview-grid{width:min(calc(100% - 48px),var(--max));margin:18px auto 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.preview-card{min-height:540px;padding:24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(12,25,58,.92),rgba(4,10,27,.94));overflow:hidden}
.preview-kicker{color:#7d8caa;font-size:11px}.preview-card h2{font-size:30px;line-height:1.04;letter-spacing:-.04em;margin:16px 0 10px}.preview-card>p{color:var(--muted);font-size:14px;line-height:1.5}
.mini-ui{height:350px;margin-top:24px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#eef4ff;color:#071225;overflow:hidden}
.search-ui{padding:16px}.mini-query{padding:14px;border:1px solid #d2dbea;border-radius:14px;background:white;font-size:13px;line-height:1.4}.mini-map{position:relative;height:225px;margin-top:14px;border-radius:14px;background:linear-gradient(135deg,#dce8f4,#aec9de)}
.mini-map span{position:absolute;color:#0677ff;font-size:24px}.map-ui{position:relative;background:radial-gradient(circle at center,rgba(25,110,255,.35),transparent 38%),linear-gradient(135deg,#395f6e,#172c42)}
.radius-ring{position:absolute;left:50%;top:50%;width:210px;height:210px;display:grid;place-items:center;transform:translate(-50%,-50%);border:2px solid #30a7ff;border-radius:50%;background:rgba(0,100,255,.1);color:white}.map-ui i{position:absolute;color:#31e0d1}
.create-ui{padding:16px}.create-prompt{padding:14px;border-radius:13px;background:white;box-shadow:0 5px 16px rgba(0,0,0,.1);font-size:13px;line-height:1.4}.create-ui ul{list-style:none;padding:10px 5px;margin:10px 0}.create-ui li{display:flex;justify-content:space-between;padding:6px 0;font-size:12px;border-bottom:1px solid #dce3ef}.create-ui b{color:#08a76b}.create-ui button{width:100%;padding:12px;border:0;border-radius:10px;background:#086dff;color:white;font-weight:700}
.chat-ui{padding:15px;background:#060c1c;color:white}.bubble{max-width:82%;margin-bottom:12px;padding:11px;border-radius:13px;background:#1c263d;font-size:12px;line-height:1.35}.bubble.right{margin-left:auto;background:#0759cb}.bubble small{color:#b9c4dc}
.download-banner{width:min(calc(100% - 48px),var(--max));margin:20px auto 30px;padding:30px 36px;display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid rgba(120,90,255,.45);border-radius:22px;background:linear-gradient(110deg,#07174b 0%,#071c75 58%,#7227c8 100%)}
.download-banner h2{margin:0 0 8px;font-size:37px;line-height:1.05;letter-spacing:-.04em}.download-banner p{margin:0;color:#d5ddf0}.download-banner .store-row{margin:0}
footer{width:min(calc(100% - 48px),var(--max));min-height:95px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:25px;color:#9ba8c1;font-size:12px}footer nav{display:flex;gap:25px}.footer-brand{font-size:17px;color:white}
@keyframes blink{50%{opacity:0}}@keyframes phoneFloat{50%{transform:rotate(2deg) translateY(-14px)}}@keyframes floatA{50%{transform:translate(8px,-10px)}}@keyframes floatB{50%{transform:translate(-8px,10px)}}
@media(max-width:1120px){.desktop-nav{display:none}.hero{grid-template-columns:1fr;text-align:center}.hero-copy{max-width:820px;margin:auto}.hero-text,.ai-demo{margin-left:auto;margin-right:auto}.store-row,.trust-row{justify-content:center}.hero-visual{min-height:730px}.phone{right:50%;transform:translateX(50%) rotate(2deg)}.card-apartment{left:9%}.card-events{left:12%}.card-shops{right:8%}.card-ai{right:9%}.preview-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.site-header{width:calc(100% - 28px);height:70px}.brand span{display:none}.header-cta{display:none}.hero{width:calc(100% - 32px);padding-top:35px;min-height:auto}.hero h1{font-size:clamp(56px,18vw,80px)}.hero-lead{font-size:21px}.hero-text{font-size:15px}.ai-demo{height:58px;font-size:14px}.store-button{width:100%;justify-content:center}.hero-visual{min-height:600px}.phone{width:88%;right:50%;top:42px}.float-card{min-width:145px;padding:10px 12px}.card-apartment{left:-4%;top:12%}.card-events{left:-2%;top:45%}.card-shops{right:-4%;top:30%}.card-ai{right:-2%;bottom:10%}.feature-strip{width:calc(100% - 32px);grid-template-columns:1fr;padding:4px 20px}.feature-strip article{padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}.preview-grid{width:calc(100% - 32px);grid-template-columns:1fr}.preview-card{min-height:auto}.download-banner{width:calc(100% - 32px);padding:28px 22px;flex-direction:column;text-align:center}.download-banner h2{font-size:32px}footer{width:calc(100% - 32px);padding:25px 0;flex-direction:column}footer nav{flex-wrap:wrap;justify-content:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* =========================================================
   RUMAPA HEADER + HERO REFINEMENT 2027
   ========================================================= */

.site-header {
  height: 96px;
}

.brand {
  gap: 10px;
  font-size: 28px;
  font-weight: 820;
  letter-spacing: 0.045em;
}

.brand img {
  width: 52px;
  height: 52px;
  filter:
    drop-shadow(0 0 14px rgba(0, 215, 202, 0.16))
    drop-shadow(0 0 24px rgba(8, 121, 255, 0.11));
}

.desktop-nav {
  gap: 42px;
}

.desktop-nav a {
  position: relative;
  color: rgba(239, 244, 255, 0.78);
  font-weight: 540;
  letter-spacing: 0.005em;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow: 0 0 12px rgba(3, 215, 202, 0.75);
  transition: width 220ms ease;
}

.desktop-nav a:hover::after {
  width: 100%;
}

.header-cta {
  padding: 14px 22px;
  box-shadow:
    0 10px 34px rgba(0, 126, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.header-cta:hover {
  transform: translateY(-2px) scale(1.025);
  box-shadow:
    0 16px 46px rgba(0, 126, 255, 0.36),
    0 0 24px rgba(3, 215, 202, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.language-switcher {
  position: relative;
  gap: 2px;
  padding: 5px;
  background: rgba(8, 18, 43, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.language-switcher button {
  min-width: 39px;
  padding: 9px 11px;
  transition:
    color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease;
}

.language-switcher button.active {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    rgba(3, 215, 202, 0.86),
    rgba(8, 121, 255, 0.9)
  );
  box-shadow:
    0 7px 18px rgba(8, 121, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hero {
  min-height: 820px;
  padding-top: 60px;
}

.eyebrow {
  padding: 11px 17px;
  background: rgba(10, 20, 51, 0.52);
  box-shadow:
    0 14px 40px rgba(50, 30, 150, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero h1 {
  margin-top: 31px;
}

.gradient-word {
  filter: drop-shadow(0 0 16px rgba(89, 111, 255, 0.22));
}

.ai-demo {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      110deg,
      rgba(12, 24, 57, 0.82),
      rgba(7, 17, 43, 0.74)
    );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ai-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 10%,
    rgba(63, 209, 255, 0.07) 48%,
    transparent 82%
  );
  transform: translateX(-120%);
  animation: rumapaSearchGlow 5.5s ease-in-out infinite;
}

.hero-visual {
  min-height: 730px;
}

.phone {
  width: min(555px, 73%);
  right: 6%;
  filter:
    drop-shadow(0 55px 80px rgba(0, 0, 0, 0.65))
    drop-shadow(0 22px 45px rgba(0, 110, 255, 0.2));
}

.hero-visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 7%;
  bottom: 2%;
  width: 470px;
  height: 105px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(0, 159, 255, 0.34) 0%,
    rgba(50, 38, 255, 0.13) 42%,
    transparent 74%
  );
  filter: blur(23px);
  transform: rotate(-4deg);
}

.float-card {
  background:
    linear-gradient(
      140deg,
      rgba(22, 47, 93, 0.78),
      rgba(5, 17, 42, 0.55)
    );
  border-color: rgba(84, 154, 255, 0.42);
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.store-button {
  background:
    linear-gradient(
      145deg,
      rgba(8, 14, 31, 0.96),
      rgba(2, 5, 14, 0.98)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 13px 32px rgba(0, 0, 0, 0.18);
}

.store-button.google:hover {
  border-color: rgba(74, 168, 255, 0.7);
  transform: translateY(-3px);
  box-shadow:
    0 18px 46px rgba(0, 101, 255, 0.2),
    0 0 22px rgba(3, 215, 202, 0.1);
}

@keyframes rumapaSearchGlow {
  0%,
  62% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

@media (max-width: 1120px) {
  .brand {
    font-size: 25px;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .phone {
    right: 50%;
    width: min(540px, 76%);
    transform: translateX(50%) rotate(2deg);
  }
}

@media (max-width: 720px) {
  .site-header {
    height: 76px;
  }

  .brand img {
    width: 45px;
    height: 45px;
  }

  .hero {
    padding-top: 42px;
  }

  .phone {
    width: 92%;
  }

  .hero-visual::after {
    right: 0;
    width: 100%;
  }
}

/* =========================================================
   RUMAPA FINAL HERO PROPORTIONS — 2027
   ========================================================= */

@media (min-width: 1121px) {

  /* Header */
  .site-header {
    height: 100px;
  }

  .brand {
    gap: 12px;
    font-size: 32px;
    font-weight: 820;
    letter-spacing: 0.045em;
    white-space: nowrap;
  }

  .brand img {
    width: 60px;
    height: 60px;
  }

  .desktop-nav {
    gap: 44px;
    margin-left: 45px;
  }

  .desktop-nav a {
    font-size: 15px;
  }

  .header-actions {
    gap: 16px;
  }

  .header-cta {
    padding: 14px 24px;
    font-size: 14px;
  }

  /* Hero proportions */
  .hero {
    min-height: 820px;
    grid-template-columns: 0.94fr 1.06fr;
    gap: 44px;
    padding-top: 42px;
    padding-bottom: 64px;
  }

  .hero-copy {
    max-width: 690px;
  }

  .hero h1 {
    font-size: clamp(78px, 7.2vw, 112px);
    line-height: 0.9;
    margin-top: 30px;
    margin-bottom: 22px;
  }

  .hero-lead {
    font-size: clamp(24px, 1.8vw, 30px);
  }

  .hero-text {
    max-width: 640px;
    font-size: 17px;
    line-height: 1.62;
  }

  .ai-demo {
    max-width: 650px;
  }

  /* Phone: large, but not overpowering */
  .hero-visual {
    min-height: 700px;
  }

  .phone {
    width: min(530px, 70%);
    right: 4%;
    top: 5px;
    transform: rotate(2deg);
  }

  @keyframes phoneFloat {
    0%,
    100% {
      transform: rotate(2deg) translateY(0);
    }

    50% {
      transform: rotate(1.4deg) translateY(-12px);
    }
  }

  /* Floating cards */
  .float-card {
    min-width: 165px;
    padding: 13px 15px;
  }

  .card-apartment {
    left: 2%;
    top: 16%;
  }

  .card-events {
    left: 4%;
    top: 43%;
  }

  .card-shops {
    right: -1%;
    top: 30%;
  }

  .card-ai {
    right: 0;
    bottom: 18%;
  }

  .hero-visual::after {
    right: 4%;
    bottom: 1%;
    width: 500px;
    height: 115px;
  }
}

/* Comfortable laptop layout */
@media (min-width: 1121px) and (max-width: 1450px) {
  .site-header,
  .hero,
  .feature-strip,
  .preview-grid,
  .download-banner,
  footer {
    width: min(calc(100% - 72px), 1320px);
  }

  .brand {
    font-size: 29px;
  }

  .brand img {
    width: 56px;
    height: 56px;
  }

  .desktop-nav {
    gap: 34px;
    margin-left: 18px;
  }

  .hero {
    grid-template-columns: 0.96fr 1.04fr;
    gap: 28px;
  }

  .hero h1 {
    font-size: clamp(72px, 7vw, 100px);
  }

  .phone {
    width: min(500px, 72%);
    right: 2%;
  }

  .card-shops {
    right: -2%;
  }
}

/* Mobile brand remains balanced */
@media (max-width: 720px) {
  .brand img {
    width: 47px;
    height: 47px;
  }
}

/* =========================================================
   RUMAPA FEATURE STRIP — AI SEARCH / CREATE / TRANSLATE
   ========================================================= */

.feature-strip {
  position: relative;
  z-index: 8;
  overflow: hidden;
  padding: 30px 34px;
  border-color: rgba(100, 132, 255, 0.2);
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(114, 53, 255, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 70%,
      rgba(0, 194, 255, 0.09),
      transparent 34%
    ),
    linear-gradient(
      120deg,
      rgba(15, 27, 61, 0.94),
      rgba(5, 13, 34, 0.94)
    );
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.feature-strip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(94, 170, 255, 0.075),
    transparent
  );
  transform: skewX(-18deg);
  animation: rumapaFeatureShine 9s ease-in-out infinite;
}

.feature-strip article {
  position: relative;
  min-height: 92px;
  padding: 4px 34px;
  gap: 20px;
}

.feature-strip article:first-child {
  padding-left: 10px;
}

.feature-strip article:last-child {
  padding-right: 10px;
}

.feature-strip h2 {
  margin-bottom: 7px;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.feature-strip p {
  max-width: 255px;
  color: rgba(207, 218, 239, 0.72);
  font-size: 14px;
  line-height: 1.5;
}

.feature-icon {
  position: relative;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-width: 1px;
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255, 255, 255, 0.12),
      transparent 38%
    ),
    rgba(10, 20, 48, 0.78);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.feature-icon.purple {
  box-shadow:
    0 0 30px rgba(157, 86, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.feature-icon.blue {
  box-shadow:
    0 0 30px rgba(86, 119, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.feature-icon.cyan {
  box-shadow:
    0 0 30px rgba(0, 216, 232, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.feature-strip article:hover .feature-icon {
  transform: translateY(-3px) scale(1.04);
}

.feature-strip article:hover h2 {
  color: #ffffff;
}

.feature-icon,
.feature-strip h2 {
  transition:
    transform 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

@keyframes rumapaFeatureShine {
  0%,
  70% {
    left: -35%;
  }

  100% {
    left: 130%;
  }
}

/* Reserve room for the large phone without reducing it */
@media (min-width: 1121px) {
  .feature-strip {
    margin-top: 220px;
  }
}

@media (min-width: 1121px) and (max-width: 1450px) {
  .feature-strip {
    margin-top: 180px;
  }

  .feature-strip article {
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media (max-width: 1120px) {
  .feature-strip {
    margin-top: 70px;
  }
}

@media (max-width: 720px) {
  .feature-strip {
    margin-top: 30px;
    padding: 8px 22px;
  }

  .feature-strip article {
    min-height: 100px;
    padding: 20px 0;
  }

  .feature-strip article:first-child,
  .feature-strip article:last-child {
    padding-left: 0;
    padding-right: 0;
  }

  .feature-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .feature-strip h2 {
    font-size: 18px;
  }

  .feature-strip p {
    font-size: 13px;
  }
}

/* =========================================================
   01 — ONE SEARCH FOR REAL LIFE
   ========================================================= */

.search-story {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 72px), 1320px);
  min-height: 680px;
  margin: 40px auto 34px;
  padding: clamp(44px, 5vw, 72px);
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  gap: clamp(54px, 7vw, 100px);
  overflow: hidden;
  border: 1px solid rgba(105, 130, 255, 0.22);
  border-radius: 36px;
  background:
    radial-gradient(circle at 8% 10%, rgba(115, 50, 255, 0.16), transparent 34%),
    radial-gradient(circle at 92% 86%, rgba(0, 177, 255, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(10, 24, 56, 0.97), rgba(3, 10, 27, 0.99));
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.search-story-glow {
  position: absolute;
  z-index: -1;
  right: -140px;
  bottom: -190px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 167, 255, 0.22),
    rgba(72, 45, 255, 0.08) 42%,
    transparent 70%
  );
  filter: blur(26px);
}

.story-number {
  display: block;
  margin-bottom: 28px;
  color: rgba(190, 204, 235, 0.22);
  font-size: clamp(70px, 7vw, 110px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.075em;
}

.story-kicker {
  margin-bottom: 18px;
  color: #73a6ff;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.search-story h2 {
  margin: 0 0 28px;
  font-size: clamp(50px, 5vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.058em;
  white-space: pre-line;
}

.story-lead {
  margin-bottom: 20px;
  color: #dbe5f8;
  font-size: clamp(21px, 2vw, 27px);
}

.story-principles {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
  color: rgba(198, 210, 232, 0.68);
  font-size: 17px;
}

.story-natural {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 720;
}

.story-prompt {
  min-height: 68px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(64, 139, 255, 0.55);
  border-radius: 21px;
  background: rgba(6, 18, 45, 0.78);
  box-shadow:
    0 20px 60px rgba(0, 78, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: #dfe8f8;
  font-size: 15px;
  line-height: 1.45;
  backdrop-filter: blur(20px);
}

.story-prompt-icon {
  margin-right: 12px;
  color: #a46dff;
  font-size: 21px;
}

.story-prompt-caret {
  width: 2px;
  height: 23px;
  margin-left: 4px;
  background: #22d9ed;
  animation: storyCaret 0.85s infinite;
}

.search-brain {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin-left: auto;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(102, 143, 255, 0.26);
  border-radius: 30px;
  background: linear-gradient(
    145deg,
    rgba(18, 35, 74, 0.92),
    rgba(5, 14, 35, 0.96)
  );
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(28px);
}

.brain-topbar,
.brain-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brain-topbar {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.brain-topbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brain-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #17d8c9;
  box-shadow: 0 0 18px rgba(23, 216, 201, 0.75);
}

.brain-live {
  padding: 7px 10px;
  border: 1px solid rgba(67, 148, 255, 0.27);
  border-radius: 999px;
  background: rgba(21, 50, 95, 0.46);
  color: #99bdf8;
  font-size: 11px;
  font-weight: 700;
}

.brain-query {
  margin-top: 22px;
  padding: 19px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.045);
}

.brain-spark {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8658ff, #177cff, #08c9c2);
}

.brain-query small,
.brain-query strong,
.brain-result small,
.brain-result strong,
.brain-summary small,
.brain-summary strong {
  display: block;
}

.brain-query small {
  margin-bottom: 5px;
  color: #8797b5;
  font-size: 11px;
}

.brain-query strong {
  font-size: 15px;
  line-height: 1.4;
}

.brain-progress {
  height: 4px;
  margin: 20px 0;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
}

.brain-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #8459ff, #1687ff, #0cd5c2);
}

.search-story.is-visible .brain-progress span {
  animation: brainProgress 1.4s ease forwards;
}

.brain-results {
  display: grid;
  gap: 10px;
}

.brain-result {
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 13px;
  opacity: 0;
  transform: translateY(12px);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.search-story.is-visible .brain-result {
  animation: brainResultIn 500ms ease forwards;
  animation-delay: calc(800ms + var(--delay));
}

.result-check {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  border-radius: 50%;
  background: rgba(19, 211, 148, 0.12);
  color: #25df9e;
}

.brain-result strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.brain-result small {
  color: #7f8eaa;
  font-size: 11px;
}

.brain-summary {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(46, 218, 168, 0.15);
  border-radius: 18px;
  background: linear-gradient(
    105deg,
    rgba(13, 88, 91, 0.23),
    rgba(18, 68, 114, 0.17)
  );
}

.brain-summary small {
  color: #82a6b7;
  font-size: 10px;
}

.brain-summary strong {
  margin-top: 3px;
  font-size: 26px;
}

.brain-complete {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(28, 220, 157, 0.13);
  color: #2ce2a4;
}

/* Скрываем прежние четыре маленькие карточки */
.preview-grid {
  display: none;
}

@keyframes storyCaret {
  50% { opacity: 0; }
}

@keyframes brainProgress {
  to { width: 100%; }
}

@keyframes brainResultIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1050px) {
  .search-story {
    grid-template-columns: 1fr;
  }

  .search-brain {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .search-story {
    width: calc(100% - 32px);
    padding: 32px 20px;
    gap: 40px;
    border-radius: 26px;
  }

  .search-story h2 {
    font-size: 46px;
  }

  .search-brain {
    padding: 18px;
    border-radius: 23px;
  }
}

/* SEARCH STORY — FINAL AI MOTION POLISH */
.search-brain{
  background:
    radial-gradient(circle at 90% 5%,rgba(94,69,255,.16),transparent 34%),
    linear-gradient(145deg,rgba(20,39,82,.94),rgba(5,14,35,.97));
  box-shadow:0 42px 110px rgba(0,0,0,.38),0 0 85px rgba(20,113,255,.10),
    inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 55px rgba(55,105,255,.035);
}
.brain-progress{position:relative;height:5px}
.brain-progress span{position:relative;overflow:hidden;box-shadow:0 0 20px rgba(24,155,255,.45)}
.brain-progress span::after{
  content:"";position:absolute;inset:0;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent);
  transform:translateX(-170%)
}
.search-story.is-visible .brain-progress span::after{animation:rumapaProgressShimmer 1.15s ease .65s forwards}
.brain-result{
  filter:blur(7px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .22s ease,background .22s ease,transform .22s ease
}
.search-story.is-visible .brain-result{
  animation:brainResultPremium .62s cubic-bezier(.22,.75,.2,1) forwards;
  animation-delay:calc(.76s + var(--delay))
}
.brain-result:hover{
  transform:translateY(-2px);
  border-color:rgba(70,153,255,.24);
  background:rgba(255,255,255,.052)
}
.result-check{transform:scale(.72);box-shadow:0 0 0 0 rgba(37,223,158,0)}
.search-story.is-visible .brain-result .result-check{
  animation:rumapaCheckPop .42s cubic-bezier(.2,1.3,.45,1) forwards;
  animation-delay:calc(1s + var(--delay))
}
.brain-summary{
  opacity:0;transform:translateY(12px);filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 45px rgba(0,0,0,.16)
}
.search-story.is-visible .brain-summary{
  animation:rumapaSummaryIn .65s cubic-bezier(.22,.75,.2,1) 1.55s forwards
}
.brain-summary strong{
  font-size:46px;line-height:.9;letter-spacing:-.055em;
  background:linear-gradient(120deg,#fff,#74b8ff,#2de5cb);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.brain-complete{transform:scale(.75);box-shadow:0 0 28px rgba(44,226,164,.15)}
.search-story.is-visible .brain-complete{
  animation:rumapaCompletePop .48s cubic-bezier(.2,1.35,.45,1) 1.9s forwards
}
.story-principles span{position:relative;padding-left:21px}
.story-principles span::before{
  content:"✓";position:absolute;left:0;top:0;color:#5fa9ff;font-weight:800;opacity:.9
}
@keyframes rumapaProgressShimmer{to{transform:translateX(360%)}}
@keyframes brainResultPremium{to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes rumapaCheckPop{
  0%{transform:scale(.72)}
  65%{transform:scale(1.14) translateY(-2px)}
  100%{transform:scale(1);box-shadow:0 0 22px rgba(37,223,158,.12)}
}
@keyframes rumapaSummaryIn{to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes rumapaCompletePop{65%{transform:scale(1.14)}100%{transform:scale(1)}}

/* RUMAPA AI PANEL V2 — CLEAN COMPONENT */
.ai-panel-v2 {
  position: relative;
  width: 100%;
  max-width: 670px;
  min-height: 580px;
  margin-left: auto;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(103, 143, 255, 0.28);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 5%, rgba(103, 74, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(19, 38, 80, 0.96), rgba(5, 14, 35, 0.98));
  box-shadow:
    0 42px 110px rgba(0, 0, 0, 0.38),
    0 0 90px rgba(17, 104, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.ai-panel-v2::after {
  content: "";
  position: absolute;
  right: -130px;
  bottom: -180px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 220, 0.11), transparent 68%);
  pointer-events: none;
}

.ai-v2-header,
.ai-v2-brand,
.ai-v2-query,
.ai-v2-result,
.ai-v2-summary {
  display: flex;
  align-items: center;
}

.ai-v2-header {
  position: relative;
  z-index: 2;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.ai-v2-brand {
  gap: 10px;
}

.ai-v2-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #20ddcb;
  box-shadow: 0 0 18px rgba(32, 221, 203, 0.72);
}

.ai-v2-live {
  padding: 8px 12px;
  border: 1px solid rgba(80, 151, 255, 0.25);
  border-radius: 999px;
  color: #9abcf5;
  background: rgba(19, 48, 92, 0.48);
  font-size: 11px;
  font-weight: 750;
}

.ai-v2-query {
  position: relative;
  z-index: 2;
  gap: 14px;
  margin-top: 25px;
  padding: 19px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.047);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.ai-v2-spark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  border-radius: 15px;
  background: linear-gradient(135deg, #8b57ff, #187dff, #0bd2c2);
  box-shadow: 0 15px 34px rgba(54, 91, 255, 0.26);
}

.ai-v2-query small,
.ai-v2-query strong,
.ai-v2-result small,
.ai-v2-result strong,
.ai-v2-summary small,
.ai-v2-summary strong {
  display: block;
}

.ai-v2-query small {
  margin-bottom: 5px;
  color: #8797b5;
  font-size: 11px;
}

.ai-v2-query strong {
  font-size: 15px;
  line-height: 1.4;
}

.ai-v2-progress {
  position: relative;
  z-index: 2;
  height: 5px;
  margin: 24px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.ai-v2-progress-fill {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, #8d50ff, #157fff, #16d7c7);
  box-shadow: 0 0 22px rgba(25, 153, 255, 0.48);
}

.ai-v2-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), transparent);
  transform: translateX(-180%);
}

.ai-v2-results {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 11px;
}

.ai-v2-result {
  gap: 13px;
  min-height: 66px;
  padding: 13px 15px;
  opacity: 0;
  transform: translateY(15px);
  filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.078);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.038);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.ai-v2-check {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  border-radius: 50%;
  color: #27dfa0;
  background: rgba(39, 223, 160, 0.12);
  transform: scale(.7);
}

.ai-v2-result strong {
  margin-bottom: 4px;
  font-size: 13px;
}

.ai-v2-result small {
  color: #8190ac;
  font-size: 11px;
}

.ai-v2-summary {
  position: relative;
  z-index: 2;
  justify-content: space-between;
  min-height: 92px;
  margin-top: 21px;
  padding: 17px 20px;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(7px);
  border: 1px solid rgba(46, 218, 168, 0.17);
  border-radius: 18px;
  background: linear-gradient(105deg, rgba(13, 88, 91, 0.24), rgba(18, 68, 114, 0.18));
}

.ai-v2-count {
  font-size: 48px;
  line-height: .88;
  letter-spacing: -0.06em;
  background: linear-gradient(120deg, #fff, #73b7ff, #2de5cb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ai-v2-summary small {
  margin-top: 8px;
  color: #87a8b9;
  font-size: 10px;
}

.ai-v2-complete {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2ce2a4;
  background: rgba(44, 226, 164, 0.13);
  transform: scale(.72);
  box-shadow: 0 0 28px rgba(44, 226, 164, 0.14);
}

.search-story.ai-v2-running .ai-v2-progress-fill {
  animation: aiV2Progress 1.35s ease forwards;
}

.search-story.ai-v2-running .ai-v2-progress-fill::after {
  animation: aiV2Shimmer 1.05s ease .55s forwards;
}

.search-story.ai-v2-running .ai-v2-result {
  animation: aiV2ResultIn .62s cubic-bezier(.22,.75,.2,1) forwards;
  animation-delay: calc(.72s + (var(--step) * .18s));
}

.search-story.ai-v2-running .ai-v2-check {
  animation: aiV2Check .42s cubic-bezier(.2,1.3,.45,1) forwards;
  animation-delay: calc(.96s + (var(--step) * .18s));
}

.search-story.ai-v2-running .ai-v2-summary {
  animation: aiV2Summary .64s cubic-bezier(.22,.75,.2,1) 1.62s forwards;
}

.search-story.ai-v2-running .ai-v2-complete {
  animation: aiV2Complete .46s cubic-bezier(.2,1.35,.45,1) 1.92s forwards;
}

@keyframes aiV2Progress { to { width: 100%; } }
@keyframes aiV2Shimmer { to { transform: translateX(370%); } }

@keyframes aiV2ResultIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes aiV2Check {
  65% { transform: scale(1.14) translateY(-2px); }
  100% { transform: scale(1); }
}

@keyframes aiV2Summary {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes aiV2Complete {
  65% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@media (max-width: 1050px) {
  .ai-panel-v2 {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .ai-panel-v2 {
    min-height: 0;
    padding: 18px;
    border-radius: 23px;
  }

  .ai-v2-query {
    padding: 14px;
  }
}

/* 02 — EXPLORE EVERYTHING ON THE MAP */
.map-story {
  position: relative;
  width: min(calc(100% - 72px), 1320px);
  min-height: 760px;
  margin: 38px auto 34px;
  padding: clamp(48px, 5vw, 78px);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(50px, 7vw, 105px);
  overflow: hidden;
  border: 1px solid rgba(63, 147, 255, .2);
  border-radius: 36px;
  background:
    radial-gradient(circle at 87% 18%, rgba(0, 166, 255, .18), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(83, 47, 255, .13), transparent 36%),
    linear-gradient(135deg, rgba(5, 18, 43, .98), rgba(2, 9, 25, .99));
  box-shadow: 0 42px 120px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.055);
}
.map-story::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background: repeating-radial-gradient(ellipse at 76% 52%, rgba(44,141,255,.28) 0 1px, transparent 2px 23px);
}
.map-story-copy,.map-story-visual { position: relative; z-index: 2; }
.map-story-number {
  display:block;margin-bottom:28px;color:rgba(189,204,236,.22);
  font-size:clamp(70px,7vw,110px);font-weight:800;line-height:.8;letter-spacing:-.075em;
}
.map-story-kicker {
  margin-bottom:18px;color:#43b8ff;font-size:13px;font-weight:780;
  letter-spacing:.14em;text-transform:uppercase;
}
.map-story h2 {
  margin:0 0 27px;font-size:clamp(50px,5vw,76px);line-height:.94;
  letter-spacing:-.058em;white-space:pre-line;
}
.map-story-lead {
  max-width:570px;margin-bottom:28px;color:#cbd7ec;
  font-size:clamp(19px,1.7vw,24px);line-height:1.5;
}
.map-story-points { display:grid;gap:11px;color:rgba(193,207,231,.7);font-size:16px; }
.map-story-points span { position:relative;padding-left:24px; }
.map-story-points span::before { content:"✓";position:absolute;left:0;color:#35b8ff;font-weight:800; }
.map-radius-demo { display:flex;flex-wrap:wrap;gap:9px;margin-top:31px; }
.map-radius-demo button {
  min-width:72px;padding:11px 15px;border:1px solid rgba(94,151,255,.2);
  border-radius:999px;background:rgba(12,29,63,.72);color:#aab9d3;cursor:pointer;
}
.map-radius-demo button.active {
  color:#fff;background:linear-gradient(135deg,#08cfc5,#157dff);
  box-shadow:0 12px 28px rgba(0,124,255,.24);
}
.map-story-visual { min-height:650px; }
.map-phone {
  position:absolute;z-index:4;top:0;right:10%;width:min(430px,68%);margin:0;
  filter:drop-shadow(0 52px 75px rgba(0,0,0,.62)) drop-shadow(0 18px 40px rgba(0,130,255,.18));
  transform:rotate(-2deg);animation:mapPhoneFloat 7s ease-in-out infinite;
}
.map-phone img { display:block;width:100%;height:auto; }
.map-orbit { position:absolute;border:1px solid rgba(36,145,255,.16);border-radius:50%; }
.orbit-one { width:520px;height:520px;right:2%;top:65px; }
.orbit-two { width:680px;height:680px;right:-10%;top:-15px; }
.map-float {
  position:absolute;z-index:6;min-width:172px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;border:1px solid rgba(72,148,255,.38);
  border-radius:19px;background:linear-gradient(140deg,rgba(21,47,91,.84),rgba(6,17,42,.66));
  box-shadow:0 20px 55px rgba(0,0,0,.32);backdrop-filter:blur(22px);
}
.map-float > span {
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#fff;
  background:linear-gradient(135deg,#8f55ff,#147dff,#08cfc5);
}
.map-float strong,.map-float small { display:block; }
.map-float strong { font-size:13px; }
.map-float small { margin-top:4px;color:#91a2bf;font-size:11px; }
.map-float-home { left:0;top:20%;animation:mapCardA 6.5s ease-in-out infinite; }
.map-float-event { right:-2%;top:43%;animation:mapCardB 7s ease-in-out infinite; }
.map-float-service { left:5%;bottom:16%;animation:mapCardA 8s ease-in-out infinite; }

@keyframes mapPhoneFloat { 50% { transform:rotate(-1deg) translateY(-12px); } }
@keyframes mapCardA { 50% { transform:translate(7px,-10px); } }
@keyframes mapCardB { 50% { transform:translate(-7px,10px); } }

@media (max-width:1050px) {
  .map-story { grid-template-columns:1fr; }
  .map-story-visual { min-height:720px; }
  .map-phone { right:50%;width:min(440px,70%);transform:translateX(50%) rotate(-2deg); }
  @keyframes mapPhoneFloat { 50% { transform:translateX(50%) rotate(-1deg) translateY(-12px); } }
}
@media (max-width:720px) {
  .map-story { width:calc(100% - 32px);padding:32px 20px;gap:42px;border-radius:26px; }
  .map-story h2 { font-size:46px; }
  .map-story-visual { min-height:590px; }
  .map-phone { width:86%; }
  .map-float { min-width:145px;padding:11px 12px; }
  .map-float-home { left:-3%; }
  .map-float-event { right:-4%; }
  .map-float-service { left:-2%; }
}

/* =========================================================
   03 — CREATE A COMPLETE LISTING IN SECONDS
   ========================================================= */

.create-story {
  position: relative;
  width: min(calc(100% - 72px), 1320px);
  min-height: 780px;
  margin: 38px auto 34px;
  padding: clamp(48px, 5vw, 78px);
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(52px, 7vw, 105px);
  overflow: hidden;
  border: 1px solid rgba(118, 94, 255, .22);
  border-radius: 36px;
  background:
    radial-gradient(circle at 14% 18%, rgba(0, 206, 197, .14), transparent 34%),
    radial-gradient(circle at 90% 86%, rgba(113, 49, 255, .16), transparent 38%),
    linear-gradient(135deg, rgba(4, 18, 42, .98), rgba(8, 9, 29, .99));
  box-shadow: 0 42px 120px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
}

.create-story::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(47, 120, 255, .12) 0 1px, transparent 1px 36px);
}

.create-story-copy,
.create-story-visual {
  position: relative;
  z-index: 2;
}

.create-story-number {
  display: block;
  margin-bottom: 28px;
  color: rgba(189, 204, 236, .22);
  font-size: clamp(70px, 7vw, 110px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.075em;
}

.create-story-kicker {
  margin-bottom: 18px;
  color: #8b7bff;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.create-story h2 {
  margin: 0 0 27px;
  font-size: clamp(48px, 4.8vw, 72px);
  line-height: .95;
  letter-spacing: -.058em;
  white-space: pre-line;
}

.create-story-lead {
  max-width: 570px;
  margin-bottom: 28px;
  color: #cbd7ec;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.5;
}

.create-story-points {
  display: grid;
  gap: 11px;
  color: rgba(193, 207, 231, .7);
  font-size: 16px;
}

.create-story-points span {
  position: relative;
  padding-left: 24px;
}

.create-story-points span::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #8f77ff;
  font-weight: 800;
}

.create-prompt-demo {
  min-height: 68px;
  margin-top: 31px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(87, 125, 255, .52);
  border-radius: 21px;
  background: rgba(7, 18, 45, .8);
  box-shadow: 0 20px 60px rgba(40, 73, 255, .13), inset 0 1px 0 rgba(255,255,255,.05);
  color: #e0e8f8;
  font-size: 15px;
}

.create-prompt-icon {
  margin-right: 12px;
  color: #a56cff;
  font-size: 21px;
}

.create-prompt-caret {
  width: 2px;
  height: 23px;
  margin-left: 4px;
  background: #22d9ed;
  animation: storyCaret .85s infinite;
}

.create-ready {
  margin-top: 18px;
  padding: 15px 17px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(45, 220, 163, .18);
  border-radius: 17px;
  background: rgba(17, 91, 82, .14);
}

.create-ready > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2ce2a4;
  background: rgba(44, 226, 164, .13);
}

.create-ready small,
.create-ready strong {
  display: block;
}

.create-ready small {
  margin-bottom: 3px;
  color: #7da4aa;
  font-size: 10px;
}

.create-ready strong {
  font-size: 13px;
}

.create-story-visual {
  min-height: 680px;
}

.create-glow {
  position: absolute;
  left: 8%;
  bottom: 0;
  width: 470px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 191, 255, .28), rgba(92, 49, 255, .12) 42%, transparent 72%);
  filter: blur(28px);
}

.create-phone {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 12%;
  width: min(410px, 66%);
  margin: 0;
  filter: drop-shadow(0 52px 75px rgba(0,0,0,.63)) drop-shadow(0 18px 40px rgba(46,94,255,.18));
  transform: rotate(2deg);
  animation: createPhoneFloat 7s ease-in-out infinite;
}

.create-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.create-step {
  position: absolute;
  z-index: 6;
  min-width: 190px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(14px);
  border: 1px solid rgba(93, 131, 255, .38);
  border-radius: 19px;
  background: linear-gradient(140deg, rgba(23, 45, 91, .86), rgba(7, 17, 42, .7));
  box-shadow: 0 20px 55px rgba(0,0,0,.32);
  backdrop-filter: blur(22px);
}

.create-step > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex: 0 0 35px;
  border-radius: 50%;
  color: #2ce2a4;
  background: rgba(44, 226, 164, .13);
}

.create-step strong,
.create-step small {
  display: block;
}

.create-step strong {
  font-size: 13px;
}

.create-step small {
  margin-top: 4px;
  color: #91a2bf;
  font-size: 11px;
}

.create-step-title { right: 0; top: 14%; }
.create-step-category { left: 0; top: 35%; }
.create-step-price { right: -2%; top: 57%; }
.create-step-translate { left: 4%; bottom: 10%; }

.create-story.create-running .create-step {
  animation: createStepIn .62s cubic-bezier(.22,.75,.2,1) forwards;
}

.create-story.create-running .create-step-title { animation-delay: .15s; }
.create-story.create-running .create-step-category { animation-delay: .35s; }
.create-story.create-running .create-step-price { animation-delay: .55s; }
.create-story.create-running .create-step-translate { animation-delay: .75s; }

@keyframes createPhoneFloat {
  50% { transform: rotate(1deg) translateY(-12px); }
}

@keyframes createStepIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1050px) {
  .create-story {
    grid-template-columns: 1fr;
  }

  .create-story-copy {
    order: 1;
  }

  .create-story-visual {
    order: 2;
    min-height: 730px;
  }

  .create-phone {
    left: 50%;
    transform: translateX(-50%) rotate(2deg);
  }

  @keyframes createPhoneFloat {
    50% { transform: translateX(-50%) rotate(1deg) translateY(-12px); }
  }
}

@media (max-width: 720px) {
  .create-story {
    width: calc(100% - 32px);
    padding: 32px 20px;
    gap: 42px;
    border-radius: 26px;
  }

  .create-story h2 {
    font-size: 44px;
  }

  .create-story-visual {
    min-height: 610px;
  }

  .create-phone {
    width: 82%;
  }

  .create-step {
    min-width: 150px;
    padding: 11px 12px;
  }

  .create-step-title { right: -4%; }
  .create-step-category { left: -4%; }
  .create-step-price { right: -5%; }
  .create-step-translate { left: -3%; }
}

/* =========================================================
   CREATE STORY — FINAL POLISH
   ========================================================= */

@media (min-width: 1051px) {
  .create-phone {
    width: min(605px, 91%);
    left: -3%;
    top: -64px;
  }

  .create-story-visual {
    min-height: 720px;
  }
}

.create-story::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
  height: 5px;
  background: linear-gradient(90deg, #14d4c3, #167fff, #8456ff);
  transform-origin: left;
  transform: scaleX(0);
  opacity: .8;
}

.create-story.create-running::before {
  animation: createSectionProgress 1.8s ease forwards;
}

.create-step {
  filter: blur(2px);
}

.create-story.create-running .create-step {
  animation-name: createStepPremium;
}

.create-ready {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px);
}

.create-story.create-running .create-ready {
  animation: createReadyIn .50s cubic-bezier(.22,.75,.2,1) .95s forwards;
}

@keyframes createSectionProgress {
  to { transform: scaleX(1); }
}

@keyframes createStepPremium {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes createReadyIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* =========================================================
   04 — CHAT WITHOUT LANGUAGE BARRIERS
   ========================================================= */

.chat-story {
  position: relative;
  width: min(calc(100% - 72px), 1320px);
  min-height: 760px;
  margin: 38px auto 34px;
  padding: clamp(48px, 5vw, 78px);
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(52px, 7vw, 105px);
  overflow: hidden;
  border: 1px solid rgba(50, 199, 225, .21);
  border-radius: 36px;
  background:
    radial-gradient(circle at 86% 16%, rgba(0, 196, 214, .15), transparent 34%),
    radial-gradient(circle at 10% 88%, rgba(110, 48, 255, .15), transparent 36%),
    linear-gradient(135deg, rgba(5, 18, 42, .98), rgba(5, 10, 29, .99));
  box-shadow: 0 42px 120px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
}

.chat-story::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background: repeating-radial-gradient(ellipse at 79% 52%, rgba(26, 159, 255, .25) 0 1px, transparent 2px 24px);
}

.chat-story-copy,
.chat-demo {
  position: relative;
  z-index: 2;
}

.chat-story-number {
  display:block;
  margin-bottom:28px;
  color:rgba(189,204,236,.22);
  font-size:clamp(70px,7vw,110px);
  font-weight:800;
  line-height:.8;
  letter-spacing:-.075em;
}

.chat-story-kicker {
  margin-bottom:18px;
  color:#32c7e2;
  font-size:13px;
  font-weight:780;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.chat-story h2 {
  margin:0 0 27px;
  font-size:clamp(48px,4.9vw,74px);
  line-height:.95;
  letter-spacing:-.058em;
  white-space:pre-line;
}

.chat-story-lead {
  max-width:560px;
  margin-bottom:28px;
  color:#cbd7ec;
  font-size:clamp(19px,1.7vw,24px);
  line-height:1.5;
}

.chat-story-points {
  display:grid;
  gap:11px;
  color:rgba(193,207,231,.7);
  font-size:16px;
}

.chat-story-points span {
  position:relative;
  padding-left:24px;
}

.chat-story-points span::before {
  content:"✓";
  position:absolute;
  left:0;
  color:#31cbe2;
  font-weight:800;
}

.chat-language-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:30px;
}

.chat-language-row span {
  min-width:52px;
  padding:11px 14px;
  text-align:center;
  border:1px solid rgba(62,156,255,.28);
  border-radius:999px;
  background:rgba(11,31,65,.76);
  color:#dce7f8;
  font-size:13px;
  font-weight:750;
}

.chat-language-row i {
  color:#4f84c8;
  font-style:normal;
}

.chat-demo {
  width:100%;
  max-width:650px;
  min-height:600px;
  margin-left:auto;
  padding:24px;
  overflow:hidden;
  border:1px solid rgba(92,150,255,.25);
  border-radius:30px;
  background:
    radial-gradient(circle at 92% 2%,rgba(46,202,214,.12),transparent 32%),
    linear-gradient(145deg,rgba(18,37,77,.95),rgba(5,14,35,.98));
  box-shadow:0 42px 110px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(28px);
}

.chat-demo-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.chat-contact {
  display:flex;
  align-items:center;
  gap:12px;
}

.chat-avatar {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#0bd3c1,#167fff,#8354ff);
  font-weight:800;
}

.chat-contact strong,
.chat-contact small {
  display:block;
}

.chat-contact small {
  margin-top:3px;
  color:#27dca0;
  font-size:10px;
}

.chat-ai-badge {
  padding:8px 11px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#1bd1c4,#167fff,#8552ff);
  font-size:11px;
  font-weight:800;
}

.chat-thread {
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:24px 0 18px;
}

.chat-step {
  opacity:0;
  transform:translateY(14px);
  filter:blur(6px);
}

.chat-story.chat-running .chat-step {
  animation:chatStepIn .58s cubic-bezier(.22,.75,.2,1) forwards;
  animation-delay:calc(.3s + (var(--step) * .24s));
}

.chat-message {
  max-width:78%;
  padding:13px 15px;
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.chat-message p {
  margin:0;
  font-size:14px;
  line-height:1.4;
}

.chat-message small {
  display:block;
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#9cb0ce;
  font-size:11px;
}

.chat-message.incoming {
  align-self:flex-start;
  border:1px solid rgba(255,255,255,.09);
  border-bottom-left-radius:6px;
  background:rgba(255,255,255,.045);
}

.chat-message.outgoing {
  align-self:flex-end;
  border:1px solid rgba(31,141,255,.28);
  border-bottom-right-radius:6px;
  background:linear-gradient(135deg,rgba(17,105,211,.75),rgba(39,69,162,.72));
}

.chat-translate-label {
  align-self:center;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(112,93,255,.2);
  border-radius:999px;
  color:#9fb0cc;
  background:rgba(39,31,86,.38);
  font-size:10px;
}

.chat-translate-label span:first-child {
  color:#ab75ff;
}

.chat-input-demo {
  min-height:58px;
  padding:9px 10px 9px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  color:#8797b5;
  font-size:12px;
}

.chat-input-demo button {
  width:40px;
  height:40px;
  border:0;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#0bd1c0,#167fff,#8354ff);
  cursor:pointer;
}

@keyframes chatStepIn {
  to {
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@media (max-width:1050px) {
  .chat-story {
    grid-template-columns:1fr;
  }

  .chat-demo {
    max-width:none;
  }
}

@media (max-width:720px) {
  .chat-story {
    width:calc(100% - 32px);
    padding:32px 20px;
    gap:42px;
    border-radius:26px;
  }

  .chat-story h2 {
    font-size:44px;
  }

  .chat-demo {
    min-height:0;
    padding:18px;
    border-radius:23px;
  }

  .chat-message {
    max-width:88%;
  }
}

/* =========================================================
   RUMAPA PREMIUM MOTION POLISH V1
   ========================================================= */

/* Premium section entrance */
.search-story,
.map-story,
.create-story,
.chat-story {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(10px);
  transition:
    opacity 850ms cubic-bezier(.22,.75,.2,1),
    transform 850ms cubic-bezier(.22,.75,.2,1),
    filter 850ms cubic-bezier(.22,.75,.2,1),
    box-shadow 850ms ease;
}

.search-story.section-visible,
.map-story.section-visible,
.create-story.section-visible,
.chat-story.section-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.search-story.section-visible {
  box-shadow:
    0 48px 130px rgba(0,0,0,.35),
    0 0 80px rgba(74,67,255,.07),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.map-story.section-visible {
  box-shadow:
    0 48px 130px rgba(0,0,0,.35),
    0 0 80px rgba(0,150,255,.07),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.create-story.section-visible {
  box-shadow:
    0 48px 130px rgba(0,0,0,.35),
    0 0 80px rgba(100,67,255,.07),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.chat-story.section-visible {
  box-shadow:
    0 48px 130px rgba(0,0,0,.35),
    0 0 80px rgba(0,197,214,.07),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Chat AI badge */
.chat-ai-badge {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(66,121,255,.24);
}

.chat-ai-badge::before {
  content: "✦";
  margin-right: 5px;
}

.chat-ai-badge::after {
  content: "";
  position: absolute;
  inset: -40% -80%;
  background: linear-gradient(
    110deg,
    transparent 38%,
    rgba(255,255,255,.5) 50%,
    transparent 62%
  );
  transform: translateX(-55%);
  animation: chatAiBadgeShine 4.8s ease-in-out infinite;
}

/* Chat ambient glow */
.chat-demo::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 12%;
  bottom: -80px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse,
    rgba(16,180,218,.14),
    rgba(81,58,255,.08) 45%,
    transparent 72%
  );
  filter: blur(32px);
}

/* Chat typing cursor */
.chat-input-demo {
  position: relative;
  overflow: hidden;
}

.chat-input-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-input-caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 3px;
  vertical-align: -3px;
  background: #39d7e8;
  animation: chatInputCaretBlink .82s infinite;
}

/* Slightly richer message depth */
.chat-message {
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.chat-message:hover {
  transform: translateY(-2px);
}

.chat-message.incoming:hover {
  border-color: rgba(80,170,255,.22);
  background: rgba(255,255,255,.058);
}

.chat-message.outgoing:hover {
  border-color: rgba(57,177,255,.38);
}

/* Map and create phone micro-depth */
.map-phone,
.create-phone {
  will-change: transform;
}

.map-story.section-visible .map-orbit,
.create-story.section-visible .create-glow {
  animation: premiumAmbientPulse 6s ease-in-out infinite;
}

@keyframes chatAiBadgeShine {
  0%, 62% { transform: translateX(-55%); }
  100% { transform: translateX(55%); }
}

@keyframes chatInputCaretBlink {
  50% { opacity: 0; }
}

@keyframes premiumAmbientPulse {
  50% {
    opacity: .76;
    filter: blur(34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-story,
  .map-story,
  .create-story,
  .chat-story {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .chat-ai-badge::after,
  .chat-input-caret,
  .map-orbit,
  .create-glow {
    animation: none !important;
  }
}

/* RUMAPA — SOFTER SECTION REVEAL */

.search-story,
.map-story,
.create-story,
.chat-story {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(3px);
  transition:
    opacity 1150ms cubic-bezier(.16, 1, .3, 1),
    transform 1150ms cubic-bezier(.16, 1, .3, 1),
    filter 900ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 1150ms ease;
}

.search-story.section-visible,
.map-story.section-visible,
.create-story.section-visible,
.chat-story.section-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Внутренние элементы появляются чуть позже */
.search-story-copy,
.map-story-copy,
.create-story-copy,
.chat-story-copy {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 900ms cubic-bezier(.16, 1, .3, 1) 100ms,
    transform 900ms cubic-bezier(.16, 1, .3, 1) 100ms;
}

.search-brain,
.ai-panel-v2,
.map-story-visual,
.create-story-visual,
.chat-demo {
  opacity: 0;
  transform: translateY(14px) scale(.992);
  transition:
    opacity 1050ms cubic-bezier(.16, 1, .3, 1) 180ms,
    transform 1050ms cubic-bezier(.16, 1, .3, 1) 180ms;
}

.section-visible .search-story-copy,
.section-visible .map-story-copy,
.section-visible .create-story-copy,
.section-visible .chat-story-copy,
.section-visible .search-brain,
.section-visible .ai-panel-v2,
.section-visible .map-story-visual,
.section-visible .create-story-visual,
.section-visible .chat-demo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* =========================================================
   RUMAPA FINAL DESIGN SYSTEM V1
   ========================================================= */

:root {
  --rumapa-section-radius: 36px;
  --rumapa-section-border: rgba(97, 133, 255, 0.21);
  --rumapa-section-shadow:
    0 44px 126px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --rumapa-semantic-max: 1180px;
  --rumapa-semantic-gutter: 48px;
  --rumapa-space-section: 140px;
  --rumapa-space-section-large: 160px;
  --rumapa-radius-card: 30px;
}

/* Unified section geometry */
.search-story,
.map-story,
.create-story,
.chat-story {
  border-radius: var(--rumapa-section-radius);
  box-shadow: var(--rumapa-section-shadow);
}

.search-story-copy,
.map-story-copy,
.create-story-copy,
.chat-story-copy {
  max-width: 600px;
}

.search-story h2,
.map-story h2,
.create-story h2,
.chat-story h2 {
  margin-bottom: 26px;
}

.story-lead,
.map-story-lead,
.create-story-lead,
.chat-story-lead {
  margin-bottom: 27px;
}

.story-principles,
.map-story-points,
.create-story-points,
.chat-story-points {
  gap: 10px;
}

/* Unified glass panels */
.ai-panel-v2,
.chat-demo {
  border-color: rgba(97, 139, 255, 0.27);
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Refined buttons and controls */
.store-button,
.header-cta,
.map-radius-demo button,
.chat-input-demo button {
  transition:
    transform 220ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 220ms ease,
    border-color 220ms ease,
    opacity 220ms ease;
}

.store-button.google:hover,
.header-cta:hover,
.map-radius-demo button:hover,
.chat-input-demo button:hover {
  transform: translateY(-2px);
}

.map-radius-demo button:hover {
  border-color: rgba(91, 164, 255, 0.5);
  color: #fff;
}

/* Slight parallax readiness */
.phone,
.map-phone,
.create-phone {
  will-change: transform;
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
}

/* Premium final download section */
.download-banner {
  position: relative;
  min-height: 260px;
  padding: 46px 52px;
  overflow: hidden;
  border: 1px solid rgba(107, 95, 255, 0.42);
  border-radius: 32px;
  background:
    radial-gradient(circle at 14% 16%, rgba(0, 214, 196, 0.12), transparent 32%),
    radial-gradient(circle at 88% 80%, rgba(126, 52, 255, 0.22), transparent 38%),
    linear-gradient(115deg, #071945 0%, #0a2374 56%, #7027c7 100%);
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.32),
    0 0 80px rgba(76, 58, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.download-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  background:
    repeating-radial-gradient(
      ellipse at 72% 58%,
      rgba(66, 193, 255, 0.24) 0 1px,
      transparent 2px 22px
    );
}

.download-banner > * {
  position: relative;
  z-index: 2;
}

.download-banner h2 {
  max-width: 690px;
  margin-bottom: 12px;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.download-banner p {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(226, 234, 248, 0.82);
}

.download-banner .store-button {
  min-width: 205px;
  height: 66px;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(3, 8, 22, 0.88);
  backdrop-filter: blur(16px);
}

.download-banner .store-button.google:hover {
  border-color: rgba(117, 204, 255, 0.72);
  box-shadow:
    0 18px 46px rgba(0, 101, 255, 0.22),
    0 0 28px rgba(0, 220, 200, 0.12);
}

footer {
  padding-top: 8px;
  padding-bottom: 18px;
}

/* Mobile consistency */
@media (max-width: 720px) {
  :root {
    --rumapa-section-radius: 26px;
  }

  .download-banner {
    min-height: 0;
    padding: 30px 22px;
    border-radius: 26px;
  }

  .download-banner h2 {
    font-size: 34px;
  }

  .download-banner p {
    font-size: 15px;
  }
}

/* =========================================================
   RUMAPA LAUNCH FOUNDATION V1
   ========================================================= */

.trust-story {
  width: min(calc(100% - 72px), 1320px);
  margin: 38px auto 34px;
  padding: 25px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(97, 133, 255, 0.18);
  border-radius: 25px;
  background:
    radial-gradient(circle at 12% 20%, rgba(0, 210, 196, 0.07), transparent 32%),
    linear-gradient(120deg, rgba(12, 25, 57, 0.88), rgba(5, 13, 34, 0.92));
  box-shadow:
    0 28px 85px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.trust-story-item {
  min-height: 82px;
  padding: 4px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-story-item:last-child {
  border-right: 0;
}

.trust-story-item > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #0bd2c1, #167fff, #8554ff);
  box-shadow: 0 14px 34px rgba(42, 94, 255, 0.18);
}

.trust-story-item strong,
.trust-story-item small {
  display: block;
}

.trust-story-item strong {
  margin-bottom: 6px;
  font-size: 15px;
}

.trust-story-item small {
  color: #94a4c0;
  font-size: 12px;
  line-height: 1.45;
}

.footer-main {
  width: min(calc(100% - 72px), 1320px);
  margin: 12px auto 0;
  padding: 38px 0 28px;
  display: grid;
  grid-template-columns: 1.15fr .9fr 1.05fr;
  align-items: start;
  gap: 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #9ba8c1;
  font-size: 12px;
}

.footer-brand-column p {
  max-width: 260px;
  margin: 13px 0 0;
  color: #8290aa;
  font-size: 13px;
}

.footer-links,
.footer-legal {
  display: grid;
  gap: 12px;
}

.footer-links a,
.footer-legal a,
.footer-legal span {
  width: fit-content;
}

.footer-legal span {
  color: #6f7d96;
}

.footer-bottom {
  grid-column: 1 / -1;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #68758d;
}

@media (max-width: 900px) {
  .trust-story {
    grid-template-columns: 1fr;
    padding: 7px 22px;
  }

  .trust-story-item {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .trust-story-item:last-child {
    border-bottom: 0;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand-column {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body {
    overflow-x: hidden;
  }

  .hero,
  .feature-strip,
  .search-story,
  .map-story,
  .create-story,
  .chat-story,
  .trust-story,
  .download-banner,
  .footer-main {
    width: calc(100% - 24px);
  }

  .hero {
    padding-left: 4px;
    padding-right: 4px;
  }

  .hero h1 {
    font-size: clamp(52px, 16vw, 72px);
  }

  .hero-lead {
    font-size: 20px;
  }

  .hero-text {
    font-size: 15px;
  }

  .hero-visual {
    min-height: 570px;
  }

  .phone {
    width: 88%;
  }

  .float-card {
    transform: scale(.92);
  }

  .search-story,
  .map-story,
  .create-story,
  .chat-story {
    padding: 30px 18px;
  }

  .story-number,
  .map-story-number,
  .create-story-number,
  .chat-story-number {
    font-size: 64px;
  }

  .search-story h2,
  .map-story h2,
  .create-story h2,
  .chat-story h2 {
    font-size: 42px;
  }

  .map-story-visual,
  .create-story-visual {
    min-height: 570px;
  }

  .chat-demo {
    padding: 16px;
  }

  .trust-story {
    padding: 6px 18px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-brand-column,
  .footer-bottom {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
}

/* =========================================================
   RUMAPA MOBILE HERO — FINAL POLISH V1
   ========================================================= */

@media (max-width: 720px) {
  .hero {
    min-height: auto;
    padding-top: 52px;
    padding-bottom: 72px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .eyebrow {
    margin-bottom: 34px;
    padding: 11px 15px;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .hero h1 {
    margin-top: 0;
    margin-bottom: 26px;
    font-size: clamp(56px, 17vw, 76px);
    line-height: 0.96;
    letter-spacing: -0.06em;
    text-align: center;
  }

  .hero-lead {
    max-width: 520px;
    margin: 0 auto 24px;
    font-size: 22px;
    line-height: 1.45;
    text-align: center;
  }

  .hero-text {
    max-width: 500px;
    margin: 0 auto 34px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 1.65;
    text-align: center;
  }

  .ai-demo {
    min-height: 82px;
    margin-bottom: 32px;
    padding: 17px 18px;
    border-radius: 23px;
  }

  .store-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .store-button {
    width: 100%;
    min-height: 86px;
    padding: 15px 22px;
    border-radius: 18px;
  }

  .hero-trust {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    justify-items: center;
    text-align: center;
  }

  .hero-trust span {
    display: block;
    font-size: 13px;
    line-height: 1.4;
  }

  .hero-visual {
    margin-top: 26px;
  }
}

/* Narrow phone refinement */
@media (max-width: 430px) {
  .site-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .brand img {
    width: 46px;
    height: 46px;
  }

  .language-switcher {
    transform: scale(.96);
    transform-origin: right center;
  }

  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero h1 {
    font-size: clamp(52px, 16.5vw, 68px);
  }

  .hero-lead {
    font-size: 20px;
  }

  .hero-text {
    font-size: 15px;
  }

  .store-button {
    min-height: 82px;
  }
}

/* =========================================================
   RUMAPA MOBILE HERO — FINAL MICRO POLISH V2
   ========================================================= */

@media (max-width: 720px) {
  .hero {
    padding-top: 28px;
  }

  .eyebrow {
    margin-bottom: 28px;
  }

  .hero-text {
    max-width: 430px;
  }

  .ai-demo {
    min-height: 74px;
    padding: 13px 16px;
  }
}

@media (max-width: 430px) {
  .hero {
    padding-top: 22px;
  }

  .eyebrow {
    margin-bottom: 24px;
  }

  .hero-text {
    max-width: 360px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .ai-demo {
    min-height: 70px;
    padding: 12px 15px;
  }
}

/* =========================================================
   RUMAPA FEATURE STRIP V2
   ========================================================= */

.feature-strip {
  position: relative;
  overflow: hidden;
  padding: 38px 40px;
  border: 1px solid rgba(103, 136, 255, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 18%, rgba(120, 67, 255, 0.15), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(0, 205, 221, 0.11), transparent 34%),
    linear-gradient(120deg, rgba(16, 30, 65, 0.96), rgba(5, 13, 34, 0.97));
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.feature-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background:
    repeating-linear-gradient(
      110deg,
      rgba(100, 150, 255, 0.14) 0 1px,
      transparent 1px 34px
    );
}

.feature-strip article {
  position: relative;
  z-index: 2;
  min-height: 126px;
  padding: 10px 38px;
  display: flex;
  align-items: center;
  gap: 24px;
  transition:
    transform 280ms cubic-bezier(.16, 1, .3, 1),
    background 280ms ease;
}

.feature-strip article + article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(119, 152, 255, 0.34) 20%,
    rgba(73, 212, 226, 0.24) 80%,
    transparent
  );
  box-shadow: 0 0 18px rgba(88, 141, 255, 0.12);
}

.feature-strip article:hover {
  transform: translateY(-3px);
}

.feature-icon {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border: 1px solid rgba(117, 143, 255, 0.42);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.13), transparent 40%),
    rgba(11, 22, 54, 0.84);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(73, 113, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform 280ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 280ms ease;
}

.feature-strip article:hover .feature-icon {
  transform: scale(1.06);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.30),
    0 0 42px rgba(73, 140, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.feature-strip h2 {
  margin: 0 0 10px;
  font-size: 23px;
  font-weight: 820;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.feature-strip p {
  max-width: 280px;
  margin: 0;
  color: rgba(214, 224, 243, 0.74);
  font-size: 15px;
  line-height: 1.58;
}

@media (min-width: 1121px) {
  .feature-strip article:first-child {
    padding-left: 16px;
  }

  .feature-strip article:last-child {
    padding-right: 16px;
  }
}

@media (max-width: 1120px) {
  .feature-strip {
    padding: 24px 28px;
  }

  .feature-strip article {
    min-height: 112px;
    padding: 16px 24px;
  }

  .feature-icon {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }

  .feature-strip h2 {
    font-size: 21px;
  }

  .feature-strip p {
    font-size: 14px;
  }
}

@media (max-width: 720px) {
  .feature-strip {
    margin-top: 34px;
    padding: 12px 22px;
    border-radius: 24px;
  }

  .feature-strip article {
    min-height: 138px;
    padding: 24px 0;
    gap: 22px;
  }

  .feature-strip article + article::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(119, 152, 255, 0.34) 20%,
      rgba(73, 212, 226, 0.24) 80%,
      transparent
    );
  }

  .feature-icon {
    width: 74px;
    height: 74px;
    flex-basis: 74px;
  }

  .feature-strip h2 {
    margin-bottom: 9px;
    font-size: 22px;
  }

  .feature-strip p {
    max-width: none;
    font-size: 14px;
    line-height: 1.55;
  }
}

@media (max-width: 430px) {
  .feature-strip {
    width: calc(100% - 24px);
    padding-left: 18px;
    padding-right: 18px;
  }

  .feature-strip article {
    min-height: 130px;
    gap: 18px;
  }

  .feature-icon {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }

  .feature-strip h2 {
    font-size: 21px;
  }

  .feature-strip p {
    font-size: 13.5px;
  }
}

/* =========================================================
   RUMAPA TRANSLATE V2
   ========================================================= */

.chat-demo {
  background:
    radial-gradient(circle at 88% 8%, rgba(35, 204, 216, 0.13), transparent 34%),
    radial-gradient(circle at 14% 92%, rgba(111, 54, 255, 0.10), transparent 38%),
    linear-gradient(145deg, rgba(18, 37, 77, 0.96), rgba(5, 14, 35, 0.985));
}

.chat-message {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 15px 36px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.chat-message.incoming {
  border-color: rgba(175, 201, 255, 0.13);
  background: rgba(255, 255, 255, 0.05);
}

.chat-message.outgoing {
  border-color: rgba(56, 161, 255, 0.30);
  background:
    linear-gradient(135deg, rgba(18, 117, 224, 0.77), rgba(46, 66, 172, 0.72));
}

.chat-translate-label {
  position: relative;
  overflow: hidden;
  border-color: rgba(143, 91, 255, 0.32);
  color: #c1b6e9;
  background:
    linear-gradient(120deg, rgba(67, 39, 137, 0.48), rgba(21, 57, 111, 0.40));
  box-shadow:
    0 0 26px rgba(111, 67, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.chat-translate-label::after {
  content: "";
  position: absolute;
  inset: -60% -90%;
  background: linear-gradient(
    110deg,
    transparent 39%,
    rgba(255, 255, 255, 0.44) 50%,
    transparent 61%
  );
  transform: translateX(-55%);
}

.chat-story.translate-v2-running .chat-translate-label::after {
  animation: translateBadgeSweep 1.15s ease .38s forwards;
}

.chat-contact small {
  position: relative;
  padding-left: 13px;
}

.chat-contact small::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ce2a4;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(44, 226, 164, 0.52);
}

.chat-story.translate-v2-running .chat-contact small::before {
  animation: translateOnlinePulse 2.4s ease-in-out infinite;
}

.chat-ai-badge {
  background-size: 180% 180%;
  animation:
    translateAiGradient 6s ease infinite,
    translateAiGlow 3.8s ease-in-out infinite;
}

.chat-story.translate-v2-running .chat-step {
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-delay: calc(.18s + (var(--step) * .32s));
}

.chat-story.translate-v2-running .chat-message {
  will-change: transform, opacity, filter;
}

.chat-typed-caret {
  display: inline-block;
  width: 2px;
  height: 17px;
  margin-left: 3px;
  vertical-align: -2px;
  background: #8de8f3;
  animation: translateCaretBlink .8s infinite;
}

.chat-input-demo {
  opacity: 0;
  transform: translateY(10px);
}

.chat-story.translate-v2-running .chat-input-demo {
  animation: translateInputIn .6s cubic-bezier(.16, 1, .3, 1) 1.9s forwards;
}

@keyframes translateBadgeSweep {
  to { transform: translateX(55%); }
}

@keyframes translateOnlinePulse {
  50% {
    transform: translateY(-50%) scale(1.22);
    box-shadow:
      0 0 0 6px rgba(44, 226, 164, 0.055),
      0 0 18px rgba(44, 226, 164, 0.62);
  }
}

@keyframes translateAiGradient {
  50% { background-position: 100% 50%; }
}

@keyframes translateAiGlow {
  50% {
    box-shadow:
      0 0 32px rgba(80, 127, 255, 0.34),
      0 0 18px rgba(0, 216, 201, 0.18);
  }
}

@keyframes translateCaretBlink {
  50% { opacity: 0; }
}

@keyframes translateInputIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-ai-badge,
  .chat-contact small::before,
  .chat-typed-caret,
  .chat-translate-label::after {
    animation: none !important;
  }

  .chat-input-demo {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   RUMAPA HERO MOTION FINAL V1
   ========================================================= */

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .hero-visual .phone {
    animation: rumapaHeroPhoneBreath 17s ease-in-out infinite;
    filter:
      drop-shadow(0 48px 72px rgba(0, 0, 0, 0.58))
      drop-shadow(0 18px 42px rgba(0, 132, 255, 0.18));
  }

  .hero-visual .float-card {
    will-change: transform;
  }

  .hero-visual .float-card:nth-of-type(1) {
    animation: rumapaHeroCardA 18s ease-in-out infinite;
  }

  .hero-visual .float-card:nth-of-type(2) {
    animation: rumapaHeroCardB 15s ease-in-out infinite;
  }

  .hero-visual .float-card:nth-of-type(3) {
    animation: rumapaHeroCardC 17s ease-in-out infinite;
  }

  .hero-visual .float-card:nth-of-type(4) {
    animation: rumapaHeroCardD 20s ease-in-out infinite;
  }

  .header-cta,
  .store-button.google {
    transition:
      background 240ms ease,
      box-shadow 240ms ease,
      border-color 240ms ease,
      color 240ms ease;
  }

  .header-cta:hover {
    transform: none;
    border-color: rgba(147, 204, 255, 0.58);
    background: linear-gradient(135deg, #14d1c5, #257dff 58%, #8b55ff);
    box-shadow:
      0 14px 38px rgba(33, 109, 255, 0.28),
      0 0 28px rgba(34, 213, 201, 0.14);
  }

  .store-button.google:hover {
    transform: none;
    border-color: rgba(121, 180, 255, 0.52);
    background: rgba(8, 15, 34, 0.97);
    box-shadow:
      0 18px 42px rgba(0, 78, 205, 0.18),
      0 0 24px rgba(0, 210, 196, 0.10);
  }
}

@keyframes rumapaHeroPhoneBreath {
  0%, 100% {
    transform: translateY(-3px);
    filter:
      drop-shadow(0 48px 72px rgba(0, 0, 0, 0.58))
      drop-shadow(0 18px 42px rgba(0, 132, 255, 0.17));
  }

  50% {
    transform: translateY(3px);
    filter:
      drop-shadow(0 52px 78px rgba(0, 0, 0, 0.60))
      drop-shadow(0 20px 48px rgba(0, 150, 255, 0.23));
  }
}

@keyframes rumapaHeroCardA {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}

@keyframes rumapaHeroCardB {
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-3px); }
}

@keyframes rumapaHeroCardC {
  0%, 100% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
}

@keyframes rumapaHeroCardD {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}

/* Mobile remains stable and static */
@media (max-width: 720px) {
  .hero-visual .phone,
  .hero-visual .float-card {
    animation: none !important;
  }
}



/* RUMAPA AI SEARCH SAFE RESTORE */
.search-story .ai-cinema-item,
.search-story .ai-cinema-result,
.search-story .ai-cinema-panel {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

.search-story .ai-cinema-progress {
  transform: scaleX(1) !important;
  animation: none !important;
}

/* =========================================================
   RUMAPA AI SEARCH SAFE MOTION V2
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .search-story.search-safe-running .ai-panel-v2,
  .search-story.search-safe-running .search-story-visual {
    animation: rumapaSearchPanelSoftIn 1050ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .search-story.search-safe-running .story-query,
  .search-story.search-safe-running .search-story-query,
  .search-story.search-safe-running .story-search {
    animation: rumapaSearchQuerySoftIn 900ms cubic-bezier(.16, 1, .3, 1) 160ms both;
  }

  .search-story.search-safe-running .ai-result,
  .search-story.search-safe-running .search-result,
  .search-story.search-safe-running .result-row,
  .search-story.search-safe-running .result-card,
  .search-story.search-safe-running [class*="result-item"],
  .search-story.search-safe-running [class*="result-row"] {
    animation: rumapaSearchResultSoftIn 720ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .search-story.search-safe-running .ai-result:nth-child(1),
  .search-story.search-safe-running .search-result:nth-child(1),
  .search-story.search-safe-running .result-row:nth-child(1),
  .search-story.search-safe-running .result-card:nth-child(1) {
    animation-delay: 420ms;
  }

  .search-story.search-safe-running .ai-result:nth-child(2),
  .search-story.search-safe-running .search-result:nth-child(2),
  .search-story.search-safe-running .result-row:nth-child(2),
  .search-story.search-safe-running .result-card:nth-child(2) {
    animation-delay: 560ms;
  }

  .search-story.search-safe-running .ai-result:nth-child(3),
  .search-story.search-safe-running .search-result:nth-child(3),
  .search-story.search-safe-running .result-row:nth-child(3),
  .search-story.search-safe-running .result-card:nth-child(3) {
    animation-delay: 700ms;
  }

  .search-story.search-safe-running .ai-result:nth-child(4),
  .search-story.search-safe-running .search-result:nth-child(4),
  .search-story.search-safe-running .result-row:nth-child(4),
  .search-story.search-safe-running .result-card:nth-child(4) {
    animation-delay: 840ms;
  }

  .search-story.search-safe-running .ai-progress-fill,
  .search-story.search-safe-running .search-progress-fill,
  .search-story.search-safe-running [class*="progress"] > span {
    animation: rumapaSearchProgressSoft 1500ms cubic-bezier(.16, 1, .3, 1) 300ms both;
    transform-origin: left center;
  }
}

@keyframes rumapaSearchPanelSoftIn {
  0% {
    opacity: .82;
    transform: translateY(10px) scale(.995);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes rumapaSearchQuerySoftIn {
  0% {
    opacity: .82;
    transform: translateY(7px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rumapaSearchResultSoftIn {
  0% {
    opacity: .78;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rumapaSearchProgressSoft {
  0% {
    transform: scaleX(.18);
    opacity: .72;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* =========================================================
   RUMAPA AI SEARCH FINAL MOTION V3
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .search-story.search-safe-running .ai-panel-v2 {
    animation: rumapaSearchFinalPanel 1200ms cubic-bezier(.16, 1, .3, 1) both !important;
  }

  .search-story.search-safe-running .ai-v2-query {
    animation: rumapaSearchFinalQuery 1050ms cubic-bezier(.16, 1, .3, 1) 180ms both !important;
  }

  .search-story.search-safe-running .ai-v2-progress-fill {
    animation: rumapaSearchFinalProgress 1650ms cubic-bezier(.16, 1, .3, 1) 420ms both !important;
    transform-origin: left center;
  }

  .search-story.search-safe-running .ai-v2-result {
    animation: rumapaSearchFinalResult 1050ms cubic-bezier(.16, 1, .3, 1) both !important;
  }

  .search-story.search-safe-running .ai-v2-result:nth-child(1) {
    animation-delay: 780ms !important;
  }

  .search-story.search-safe-running .ai-v2-result:nth-child(2) {
    animation-delay: 980ms !important;
  }

  .search-story.search-safe-running .ai-v2-result:nth-child(3) {
    animation-delay: 1180ms !important;
  }

  .search-story.search-safe-running .ai-v2-result:nth-child(4) {
    animation-delay: 1380ms !important;
  }

  .search-story.search-safe-running .ai-v2-summary {
    animation: rumapaSearchFinalSummary 1100ms cubic-bezier(.16, 1, .3, 1) 1680ms both !important;
  }
}

@keyframes rumapaSearchFinalPanel {
  0% {
    opacity: .88;
    transform: translateY(14px) scale(.988);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes rumapaSearchFinalQuery {
  0% {
    opacity: .86;
    transform: translateY(10px) scale(.992);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes rumapaSearchFinalProgress {
  0% {
    transform: scaleX(.10);
    opacity: .72;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes rumapaSearchFinalResult {
  0% {
    opacity: .80;
    transform: translateY(12px) scale(.992);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes rumapaSearchFinalSummary {
  0% {
    opacity: .82;
    transform: translateY(10px) scale(.992);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-panel-v2,
  .ai-v2-query,
  .ai-v2-result,
  .ai-v2-summary,
  .ai-v2-progress-fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================
   RUMAPA MAP MOTION V1
   ========================================================= */

@media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
  .map-story.map-motion-running .map-phone {
    animation: rumapaMapPhoneDrift 9.5s ease-in-out infinite;
  }

  .map-story.map-motion-running .map-motion-card {
    will-change: transform;
  }

  .map-story.map-motion-running .map-motion-card:nth-of-type(1) {
    animation: rumapaMapCardFloatA 6.4s ease-in-out infinite;
  }

  .map-story.map-motion-running .map-motion-card:nth-of-type(2) {
    animation: rumapaMapCardFloatB 7.2s ease-in-out infinite;
  }

  .map-story.map-motion-running .map-motion-card:nth-of-type(3) {
    animation: rumapaMapCardFloatC 8.1s ease-in-out infinite;
  }

  .map-story.map-motion-running .map-motion-radius-active {
    animation: rumapaMapRadiusGlow 2.8s ease-in-out infinite;
  }

  .map-story.map-motion-running .map-motion-pin {
    animation: rumapaMapPinPulse 3.6s ease-in-out infinite;
  }

  .map-story.map-motion-running .map-motion-pin:nth-child(2n) {
    animation-delay: .7s;
  }

  .map-story.map-motion-running .map-motion-pin:nth-child(3n) {
    animation-delay: 1.3s;
  }

  .map-story.map-motion-running .map-story-visual {
    animation: rumapaMapVisualSoftIn 1150ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .map-story.map-motion-running .map-motion-card {
    opacity: .82;
    animation-fill-mode: both;
  }
}

@keyframes rumapaMapPhoneDrift {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

@keyframes rumapaMapCardFloatA {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}

@keyframes rumapaMapCardFloatB {
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-3px); }
}

@keyframes rumapaMapCardFloatC {
  0%, 100% { transform: translateY(-3px) translateX(-1px); }
  50% { transform: translateY(3px) translateX(1px); }
}

@keyframes rumapaMapRadiusGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(0, 198, 218, .18),
      inset 0 1px 0 rgba(255,255,255,.12);
    filter: brightness(1);
  }

  50% {
    box-shadow:
      0 0 30px rgba(0, 198, 218, .28),
      0 0 18px rgba(45, 116, 255, .15),
      inset 0 1px 0 rgba(255,255,255,.15);
    filter: brightness(1.09);
  }
}

@keyframes rumapaMapPinPulse {
  0%, 100% {
    opacity: .78;
    filter: brightness(1);
  }

  50% {
    opacity: 1;
    filter: brightness(1.18);
  }
}

@keyframes rumapaMapVisualSoftIn {
  0% {
    opacity: .88;
    transform: translateY(14px) scale(.992);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Mobile stays calm */
@media (max-width: 720px) {
  .map-story .map-phone,
  .map-story .map-motion-card,
  .map-story .map-motion-radius-active,
  .map-story .map-motion-pin {
    animation: none !important;
  }
}

/* =========================================================
   RUMAPA GLOBAL MOTION SYSTEM V1
   ========================================================= */

:root {
  --motion-fast: 240ms;
  --motion-medium: 680ms;
  --motion-slow: 1100ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Unified section reveal rhythm */
.search-story,
.map-story,
.create-story,
.chat-story {
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease),
    filter 900ms var(--motion-ease),
    box-shadow var(--motion-slow) ease !important;
}

/* Unified interactive rhythm */
.header-cta,
.store-button,
.language-switcher button,
.map-radius-demo button,
.chat-input-demo button,
.feature-strip article,
.feature-icon,
.chat-message {
  transition-duration: var(--motion-fast) !important;
  transition-timing-function: var(--motion-ease) !important;
}

/* Parallax composition uses individual translate property,
   so it does not fight existing transform animations. */
.hero-visual .phone,
.hero-visual .float-card,
.map-story .map-phone,
.map-story .map-motion-card,
.create-story .create-phone,
.create-story .create-step,
.chat-story .chat-demo {
  translate: var(--parallax-x, 0px) var(--parallax-y, 0px);
  transition:
    translate 520ms var(--motion-ease),
    filter var(--motion-fast) ease;
  will-change: translate;
}

/* Very slow background drift */
.hero,
.search-story,
.map-story,
.create-story,
.chat-story {
  background-position:
    calc(50% + var(--bg-parallax-x, 0px))
    calc(50% + var(--bg-parallax-y, 0px));
  transition: background-position 900ms var(--motion-ease);
}

/* Desktop hover polish */
@media (min-width: 721px) and (hover: hover) {
  .feature-strip article:hover {
    translate: 0 -2px;
  }

  .chat-message:hover {
    translate: 0 -2px;
  }

  .header-cta:hover,
  .store-button.google:hover {
    translate: 0 -1px;
  }
}

/* Keep mobile calm */
@media (max-width: 720px) {
  .hero-visual .phone,
  .hero-visual .float-card,
  .map-story .map-phone,
  .map-story .map-motion-card,
  .create-story .create-phone,
  .create-story .create-step,
  .chat-story .chat-demo {
    translate: 0 0 !important;
  }

  .hero,
  .search-story,
  .map-story,
  .create-story,
  .chat-story {
    background-position: 50% 50% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .hero-visual .phone,
  .hero-visual .float-card,
  .map-story .map-phone,
  .map-story .map-motion-card,
  .create-story .create-phone,
  .create-story .create-step,
  .chat-story .chat-demo {
    translate: 0 0 !important;
    transition: none !important;
  }
}

/* =========================================================
   RUMAPA PRODUCT POLISH V1
   Translate + Download + Footer
   ========================================================= */

/* Translate: calmer spacing and message rhythm */
.chat-story {
  padding-top: clamp(58px, 5.4vw, 84px);
  padding-bottom: clamp(58px, 5.4vw, 84px);
}

.chat-demo {
  padding: 28px;
}

.chat-thread {
  gap: 15px;
  padding-top: 27px;
  padding-bottom: 22px;
}

.chat-message {
  max-width: 74%;
  padding: 14px 16px;
}

.chat-message p {
  font-size: 14.5px;
  line-height: 1.46;
}

.chat-message small {
  margin-top: 8px;
  padding-top: 8px;
  line-height: 1.4;
}

.chat-message.outgoing:last-of-type {
  max-width: 62%;
}

.chat-translate-label {
  padding: 9px 14px;
  letter-spacing: .01em;
}

/* Trust strip: more refined and consistent */
.trust-story {
  padding-top: 28px;
  padding-bottom: 28px;
}

.trust-story-item {
  min-height: 88px;
}

.trust-story-item > span {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  border-radius: 16px;
}

.trust-story-item strong {
  font-size: 15.5px;
}

.trust-story-item small {
  font-size: 12.5px;
}

/* Premium final CTA */
.download-banner {
  min-height: 300px;
  padding: 58px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 52px;
}

.download-banner::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 50%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(0, 211, 202, .16), rgba(74, 80, 255, .08) 43%, transparent 70%);
  filter: blur(24px);
}

.download-banner h2 {
  max-width: 760px;
  margin-bottom: 16px;
}

.download-banner p {
  max-width: 670px;
  margin-bottom: 0;
}

.download-banner .store-buttons {
  min-width: 250px;
  display: grid;
  gap: 14px;
}

.download-banner .store-button {
  width: 100%;
  min-width: 240px;
  min-height: 68px;
  justify-content: flex-start;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 18px;
}

.download-banner .store-button.disabled {
  opacity: .72;
  background: rgba(9, 15, 34, .68);
}

.download-banner .store-button.disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Footer: richer hierarchy without extra noise */
.footer-main {
  padding-top: 46px;
  padding-bottom: 34px;
  gap: 50px;
}

.footer-brand {
  gap: 12px;
}

.footer-brand img {
  width: 46px;
  height: 46px;
}

.footer-brand span {
  font-size: 24px;
  font-weight: 820;
  letter-spacing: .045em;
}

.footer-brand-column p {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.55;
}

.footer-links,
.footer-legal {
  gap: 14px;
}

.footer-links a,
.footer-legal a {
  color: #a8b5cd;
  transition:
    color var(--motion-fast, 240ms) var(--motion-ease, ease),
    translate var(--motion-fast, 240ms) var(--motion-ease, ease);
}

.footer-links a:hover,
.footer-legal a:hover {
  color: #ffffff;
  translate: 3px 0;
}

.footer-bottom {
  margin-top: 4px;
  padding-top: 27px;
}

/* Final consistency for all large sections */
.search-story,
.map-story,
.create-story,
.chat-story {
  margin-top: 42px;
  margin-bottom: 42px;
}

@media (max-width: 1050px) {
  .download-banner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .download-banner .store-buttons {
    width: min(100%, 420px);
  }
}

@media (max-width: 720px) {
  .chat-story {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .chat-demo {
    padding: 17px;
  }

  .chat-message {
    max-width: 88%;
  }

  .chat-message.outgoing:last-of-type {
    max-width: 76%;
  }

  .trust-story {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .trust-story-item {
    min-height: 0;
  }

  .download-banner {
    padding: 36px 22px;
    gap: 28px;
  }

  .download-banner h2 {
    font-size: 38px;
  }

  .download-banner .store-buttons,
  .download-banner .store-button {
    width: 100%;
    min-width: 0;
  }

  .footer-main {
    padding-top: 34px;
    padding-bottom: 28px;
  }

  .footer-brand img {
    width: 42px;
    height: 42px;
  }

  .footer-brand span {
    font-size: 22px;
  }

  .search-story,
  .map-story,
  .create-story,
  .chat-story {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

/* =========================================================
   RUMAPA AI SEARCH PARALLAX FIX V1
   ========================================================= */

/* Global parallax controller already writes these variables.
   This rule reconnects them to the AI Search panel. */
.search-story .ai-panel-v2 {
  translate: var(--parallax-x, 0px) var(--parallax-y, 0px);
  transition:
    translate 620ms cubic-bezier(.16, 1, .3, 1),
    filter 240ms ease;
  will-change: translate;
}

@media (max-width: 720px) {
  .search-story .ai-panel-v2 {
    translate: 0 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-story .ai-panel-v2 {
    translate: 0 0 !important;
    transition: none !important;
  }
}

/* =========================================================
   RUMAPA FOOTER FINAL POLISH V1
   ========================================================= */

/* CTA balance */
.download-banner h2{
  font-size:clamp(46px,3.4vw,64px);
  line-height:1.05;
}

.download-banner p{
  max-width:760px;
  font-size:18px;
  line-height:1.65;
}

/* Brand platform line */
.footer-brand-platform{
  margin-top:8px;
  font-size:13px;
  color:#8ea3c8;
  letter-spacing:.04em;
}

/* Footer links rhythm */
.footer-links,
.footer-legal{
  gap:18px !important;
}

.footer-links a,
.footer-legal a{
  display:inline-block;
  line-height:1.55;
}

/* Bottom copyright quieter */
.footer-bottom{
  color:rgba(175,190,214,.62);
  font-size:13px;
}

/* Slightly softer separator */
.footer-bottom,
.footer-main{
  border-color:rgba(255,255,255,.06);
}

@media (max-width:720px){
  .download-banner h2{
    font-size:40px;
  }

  .download-banner p{
    font-size:16px;
  }

  .footer-links,
  .footer-legal{
    gap:14px !important;
  }
}

/* =========================================================
   RUMAPA NAVIGATION TARGET FIX V1
   ========================================================= */

html {
  scroll-behavior: smooth;
}

#features,
#ai-search,
#map,
#create,
#chat,
#download,
#about {
  scroll-margin-top: 112px;
}

@media (max-width: 720px) {
  #features,
  #ai-search,
  #map,
  #create,
  #chat,
  #download,
  #about {
    scroll-margin-top: 84px;
  }
}

/* =========================================================
   RUMAPA NAVIGATION V2
   ========================================================= */

#features,
#ai-search,
#map-section,
#create,
#chat,
#download,
#about,
#contact {
  scroll-margin-top: 108px;
}

.footer-main {
  position: relative;
}

.footer-contact-anchor {
  position: absolute;
  top: -108px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

@media (max-width: 720px) {
  #features,
  #ai-search,
  #map-section,
  #create,
  #chat,
  #download,
  #about,
  #contact {
    scroll-margin-top: 76px;
  }

  .footer-contact-anchor {
    top: -76px;
  }
}

/* =========================================================
   RUMAPA RESPONSIVE PICTURE V1
   ========================================================= */

.hero-visual picture,
.map-phone picture,
.create-phone picture,
.map-story-visual picture,
.create-story-visual picture {
  display: contents;
}

.hero-visual picture img,
.map-phone picture img,
.create-phone picture img,
.map-story-visual picture img,
.create-story-visual picture img {
  max-width: 100%;
}


/* =========================================================
   RUMAPA TESTFLIGHT NOTE V1
   ========================================================= */

.testflight-note {
  display: block;
  margin-top: 8px;
  color: rgba(211, 222, 240, 0.68);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .testflight-note {
    margin-top: 6px;
    font-size: 11px;
  }
}

/* RUMAPA APPLE STORE HOVER V1 START */

.store-button.apple:hover {
transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,101,255,.16)
}

.store-button.apple:hover {
border-color: rgba(74, 168, 255, 0.7);
  transform: translateY(-3px);
  box-shadow:
    0 18px 46px rgba(0, 101, 255, 0.2),
    0 0 22px rgba(3, 215, 202, 0.1);
}

.store-button.apple:hover,
.header-cta:hover,
.map-radius-demo button:hover,
.chat-input-demo button:hover {
transform: translateY(-2px);
}

.download-banner .store-button.apple:hover {
border-color: rgba(117, 204, 255, 0.72);
  box-shadow:
    0 18px 46px rgba(0, 101, 255, 0.22),
    0 0 28px rgba(0, 220, 200, 0.12);
}

.store-button.apple:hover {
transform: none;
    border-color: rgba(121, 180, 255, 0.52);
    background: rgba(8, 15, 34, 0.97);
    box-shadow:
      0 18px 42px rgba(0, 78, 205, 0.18),
      0 0 24px rgba(0, 210, 196, 0.10);
}

.header-cta:hover,
  .store-button.apple:hover {
translate: 0 -1px;
}


.store-button.apple:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(100, 210, 255, 0.78);
  box-shadow:
    0 0 0 1px rgba(92, 203, 255, 0.34),
    0 16px 40px rgba(0, 101, 255, 0.16);
}

/* RUMAPA APPLE STORE HOVER V1 END */

/* =========================================================
   RUMAPA NEW HERO PHONE DESKTOP V1
   ========================================================= */

@media (min-width: 1121px) {
  .hero-visual .phone {
    width: min(625px, 82%);
    right: -0.5%;
    top: -28px;
  }
}

/* =========================================================
   RUMAPA HERO CARDS POSITION FINAL V1
   ========================================================= */

@media (min-width: 1121px) {
  .hero-visual .card-apartment {
    left: calc(2% + 14px);
  }

  .hero-visual .card-events {
    left: calc(4% + 12px);
  }
}

/* RUMAPA HERO LEFT CARDS FINAL POSITION V2 */
@media (min-width: 1121px) {
  .hero-visual .card-apartment {
    left: calc(2% + 32px);
  }

  .hero-visual .card-events {
    left: calc(4% + 28px);
  }
}

/* =========================================================
   RUMAPA HERO ORBIT CARDS FINAL V1
   ========================================================= */

@media (min-width: 1121px) {
  .hero-visual .card-apartment {
    left: calc(2% + 26px);
  }

  .hero-visual .card-events {
    left: calc(4% + 24px);
  }

  .hero-visual .card-ai {
    right: 14px;
    bottom: calc(18% + 26px);
  }
}

/* =========================================================
   RUMAPA HERO ORBIT CARDS FINAL V1
   ========================================================= */

@media (min-width: 1121px) {

  /* Финальная композиция Hero */

  .hero-visual .card-apartment {
    left: calc(2% + 52px);
  }

  .hero-visual .card-events {
    left: calc(4% + 48px);
  }

  .hero-visual .card-ai {
    right: 14px;
    bottom: calc(18% + 18px);
  }

}


/* RUMAPA HERO APARTMENTS FINAL POSITION */
@media (min-width: 1121px) {
  .hero-visual .card-apartment {
    left: calc(2% + 84px);
  }
}


/* =========================================================
   RUMAPA MAP PHONE DESKTOP FINAL V2
   ========================================================= */

@media (min-width: 1121px) {
  .map-story .map-phone {
    width: min(535px, 82%);
    right: 3%;
    top: -5px;
  }
}

/* =========================================================
   RUMAPA MAP FINAL COMPOSITION V3
   ========================================================= */

@media (min-width: 1121px) {
  .map-story .map-phone {
    width: min(590px, 90%);
    right: 1%;
    top: -28px;
  }

  .map-story .map-float-home {
    left: -26px;
  }

  .map-story .map-float-service {
    left: calc(5% - 28px);
  }

  .map-story .map-float-event {
    right: -30px;
  }
}

/* RUMAPA MAP PHONE VISIBLE LIFT FINAL */
@media (min-width: 1121px) {
  .map-story .map-phone {
    top: -93px !important;
  }
}

/* =========================================================
   RUMAPA RELEASE MOTION STABILIZATION V1
   Smooth movement and anti-flicker
   ========================================================= */

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {

  /* GPU stabilization for moving elements */
  .hero-visual .phone,
  .hero-visual .float-card,
  .map-story .map-phone,
  .map-story .map-motion-card,
  .create-story .create-phone,
  .create-story .create-step {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transform-style: preserve-3d;
    will-change: transform;
    animation-fill-mode: both;
  }

  /* Hero phone — slower and calmer */
  .hero-visual .phone {
    animation-duration: 19s !important;
    animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
  }

  /* Hero floating cards */
  .hero-visual .float-card {
    animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
  }

  .hero-visual .float-card:nth-of-type(1) {
    animation-duration: 19s !important;
  }

  .hero-visual .float-card:nth-of-type(2) {
    animation-duration: 17s !important;
  }

  .hero-visual .float-card:nth-of-type(3) {
    animation-duration: 20s !important;
  }

  .hero-visual .float-card:nth-of-type(4) {
    animation-duration: 18s !important;
  }

  /* Map phone */
  .map-story.map-motion-running .map-phone {
    animation-duration: 13s !important;
    animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
  }

  /* Map cards */
  .map-story.map-motion-running .map-motion-card {
    animation-duration: 12s !important;
    animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
  }

  /* Create phone */
  .create-story .create-phone {
    animation-duration: 13s !important;
    animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
  }

  /* Create floating cards */
  .create-story .create-step {
    animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
  }

  /* Ambient background effects */
  .map-story.section-visible .map-orbit,
  .create-story.section-visible .create-glow {
    animation-duration: 10s !important;
    animation-timing-function: ease-in-out !important;
  }
}

/* No transitions during initial page rendering */
html:not(.rumapa-page-ready) .phone,
html:not(.rumapa-page-ready) .map-phone,
html:not(.rumapa-page-ready) .create-phone {
  transition: none !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .phone,
  .float-card,
  .map-phone,
  .map-motion-card,
  .create-phone,
  .create-step,
  .map-orbit,
  .create-glow {
    animation: none !important;
    transition: none !important;
  }
}

/* RUMAPA RELEASE MOTION STABILIZATION V1 END */

/* =========================================================
   RUMAPA PHONE HOVER JUMP FIX — RELEASE FINAL
   Phones keep slow floating animation, but no mouse parallax.
   ========================================================= */

@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .hero-visual .phone,
  .map-story .map-phone,
  .create-story .create-phone {
    translate: 0 0 !important;

    transition:
      filter 800ms cubic-bezier(.22, 1, .36, 1),
      opacity 500ms ease !important;

    will-change: transform;
  }

  .hero-visual .phone:hover,
  .map-story .map-phone:hover,
  .create-story .create-phone:hover {
    translate: 0 0 !important;
  }
}

/* Prevent transform transitions from fighting keyframe animations */
.phone,
.map-phone,
.create-phone {
  transition-property: filter, opacity !important;
}

/* RUMAPA PHONE HOVER JUMP FIX — RELEASE FINAL END */

/* =========================================================
   RUMAPA PHONE MOTION BALANCED — RELEASE V2
   More visible floating + smooth independent hover
   ========================================================= */

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {

  /* Немного ускоряем постоянное плавание */
  .hero-visual .phone {
    animation-duration: 15s !important;
  }

  .map-story.map-motion-running .map-phone {
    animation-duration: 11s !important;
  }

  .create-story .create-phone {
    animation-duration: 11.5s !important;
  }

  /* Карточки тоже двигаются немного заметнее */
  .hero-visual .float-card {
    animation-duration: 15s !important;
  }

  .map-story.map-motion-running .map-motion-card {
    animation-duration: 10.5s !important;
  }

  .create-story .create-step {
    animation-duration: 11s !important;
  }
}

/*
  Hover применяется к внутреннему picture,
  поэтому не конфликтует с animation/transform телефона.
*/
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {

  .hero-visual .phone picture,
  .map-story .map-phone picture,
  .create-story .create-phone picture {
    display: block;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;

    transition:
      transform 750ms cubic-bezier(.22, 1, .36, 1),
      filter 750ms cubic-bezier(.22, 1, .36, 1);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .hero-visual .phone:hover picture,
  .map-story .map-phone:hover picture,
  .create-story .create-phone:hover picture {
    transform: translate3d(0, -5px, 0) scale(1.012);
    filter: brightness(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual .phone picture,
  .map-story .map-phone picture,
  .create-story .create-phone picture {
    transform: none !important;
    transition: none !important;
  }
}

/* RUMAPA PHONE MOTION BALANCED — RELEASE V2 END */

/* =========================================================
   RUMAPA CREATE RELEASE MOTION V1
   One-time reveal, faster cards, no flicker
   ========================================================= */

/* Neutralize older repeating Create reveal animations */
.create-story .create-step,
.create-story.create-running .create-step,
.create-story .create-ready,
.create-story.create-running .create-ready {
  animation: none !important;
}

/* Stable initial state before first reveal */
.create-story:not(.create-release-visible) .create-step {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(2px);
}

.create-story:not(.create-release-visible) .create-ready {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  filter: blur(2px);
}

/* One-time card reveal */
.create-story.create-release-visible .create-step {
  animation:
    rumapaCreateCardRelease 520ms cubic-bezier(.22, .8, .2, 1)
    forwards !important;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.create-story.create-release-visible .create-step-title {
  animation-delay: 100ms !important;
}

.create-story.create-release-visible .create-step-category {
  animation-delay: 260ms !important;
}

.create-story.create-release-visible .create-step-price {
  animation-delay: 420ms !important;
}

.create-story.create-release-visible .create-step-translate {
  animation-delay: 580ms !important;
}

/* Final green Ready state */
.create-story.create-release-visible .create-ready {
  animation:
    rumapaCreateReadyRelease 500ms cubic-bezier(.22, .8, .2, 1)
    760ms forwards !important;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes rumapaCreateCardRelease {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes rumapaCreateReadyRelease {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* After completion, keep everything permanently stable */
.create-story.create-release-complete .create-step,
.create-story.create-release-complete .create-ready {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
  animation: none !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .create-story .create-step,
  .create-story .create-ready {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* RUMAPA CREATE RELEASE MOTION V1 END */

/* =========================================================
   RUMAPA CREATE STATIC RELEASE FIX
   No flicker, no delayed reveal, stable cards
   ========================================================= */

.create-story .create-step,
.create-story.create-running .create-step,
.create-story.create-release-visible .create-step,
.create-story.create-release-complete .create-step {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

.create-story .create-ready,
.create-story.create-running .create-ready,
.create-story.create-release-visible .create-ready,
.create-story.create-release-complete .create-ready {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

/* Disable the progress-line replay that can flash */
.create-story::before,
.create-story.create-running::before {
  animation: none !important;
  transform: scaleX(1) !important;
  opacity: .8 !important;
}

/* Keep only the phone's calm automatic motion */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .create-story .create-phone {
    animation-duration: 10.5s !important;
    animation-timing-function: ease-in-out !important;
  }
}

/* RUMAPA CREATE STATIC RELEASE FIX END */


/* =========================================================
   RUMAPA STORE BUTTON ALIGNMENT V1
   Equal desktop geometry for Apple + Google Play.
   Visual design intentionally unchanged.
   ========================================================= */

.store-row .store-button {
  width: 284px;
  min-width: 284px;
}

@media (max-width: 720px) {
  .store-row .store-button {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   RUMAPA STORE BUTTON LAYOUT V2
   Hero: compact horizontal buttons
   Download section: wider vertical buttons
   Visual style unchanged
   ========================================================= */

/* HERO — keep horizontal, make both buttons compact + equal */
#hero-download {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
}

#hero-download .store-button {
  width: 228px;
  min-width: 228px;
  max-width: 228px;
}

/* DOWNLOAD SECTION — vertical and wider */
.download-banner .store-buttons,
.download-banner .store-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 268px;
  min-width: 268px;
}

.download-banner .store-button {
  width: 268px;
  min-width: 268px;
  max-width: 268px;
}

/* Mobile — full width */
@media (max-width: 720px) {
  #hero-download {
    flex-direction: column;
  }

  #hero-download .store-button,
  .download-banner .store-button,
  .download-banner .store-buttons,
  .download-banner .store-row {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}


/* RUMAPA DOWNLOAD CTA — balanced final proportions */
.download-banner .store-buttons,
.download-banner .store-row {
  width: 330px;
  min-width: 330px;
  max-width: 330px;
  gap: 14px;
}

.download-banner .store-button {
  width: 330px;
  min-width: 330px;
  max-width: 330px;
}

@media (max-width: 720px) {
  .download-banner .store-buttons,
  .download-banner .store-row,
  .download-banner .store-button {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

.features-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(7, 12, 32, 0.72);
}

.features-language-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(232, 235, 247, 0.72);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.features-language-switcher a:hover {
  color: #ffffff;
}

.features-language-switcher a.active,
.features-language-switcher a[aria-current="page"] {
  color: #ffffff;
  background: linear-gradient(135deg, #12c7dc 0%, #187ff5 100%);
  box-shadow: 0 6px 20px rgba(20, 145, 245, 0.28);
}

@media (max-width: 760px) {
  .features-language-switcher {
    padding: 3px;
  }

  .features-language-switcher a {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
  }
}

/* RUMAPA Language Switcher Exact Home Size V1 */
.features-language-switcher {
  gap: 2px;
  padding: 5px;
}

.features-language-switcher a {
  min-width: 39px;
  height: auto;
  padding: 9px 11px;
  font-size: 12px;
  line-height: normal;
}

@media (max-width: 430px) {
  .features-language-switcher {
    transform: scale(.96);
    transform-origin: right center;
  }
}