/* Home page, Oct 2026: real demo screens in the hero, a design showcase with the package price, visual service cards. */
@media(min-width:1001px){.hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr)!important;gap:56px!important}}
.hero-visual{position:relative;margin:0;padding:0 0 64px;min-width:0}
.hv-glow{position:absolute;inset:8% 4% 18% 10%;border-radius:50%;background:radial-gradient(closest-side,#4d54ef55,#4d54ef00);filter:blur(30px);pointer-events:none}
.hv-desktop{position:relative;margin-right:13%;overflow:hidden;border-radius:14px;background:#0f1828;border:1px solid #ffffff24;box-shadow:0 2px 0 #ffffff10 inset,0 40px 80px -20px #000a,0 18px 36px -18px #0008}
.hv-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#172235;border-bottom:1px solid #ffffff14}
.hv-bar i{width:9px;height:9px;border-radius:50%;background:#3a465c}
.hv-bar span{margin:0 auto;padding:4px 14px;max-width:62%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:6px;background:#0f1828;font-size:11px;letter-spacing:.01em;color:#8f9ab0}
.hv-desktop img{display:block;width:100%;height:auto}
.hv-phone{position:absolute;right:0;bottom:0;width:26%;filter:drop-shadow(0 26px 36px #000a)}
.hero-visual figcaption{position:absolute;left:0;bottom:12px;display:flex;align-items:center;gap:10px;max-width:68%;font-size:12px;line-height:1.5;color:#b5bed0}
.hero-visual figcaption span{flex-shrink:0;padding:3px 7px;border-radius:5px;background:#4d54ef;font-size:9.5px;font-weight:700;letter-spacing:.08em;color:#fff}
.hero .hero-note{display:inline-block;margin-top:22px;padding:8px 13px;border:1px solid #ffffff2b;border-radius:999px;font-size:12px;line-height:1.5;color:#dfe3fb}

.vitrin{background:#f4f5fc}
.vitrin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:34px}
.vitrin-head h2{margin:0;font-size:clamp(30px,3.2vw,42px);font-weight:500;line-height:1.15;letter-spacing:-.03em;text-wrap:balance}
.vitrin-head>p{max-width:360px;margin:0;font-size:14px;line-height:1.8;color:var(--muted)}
.vitrin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.vitrin-card{display:block;min-width:0;overflow:hidden;background:#fff;border:1px solid #e1e4ef;border-radius:16px;color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s}
.vitrin-card .dev-scene{border-bottom:1px solid #e4e7f1}
.vitrin-card>span{display:block;padding:14px 16px 0;font-size:12px;color:#667086}
.vitrin-card>strong{display:block;padding:3px 16px 16px;font-size:15px;font-weight:600;color:var(--ink)}
.vitrin-card:hover,.vitrin-card:focus-visible{transform:translateY(-2px);box-shadow:0 14px 30px #2332521f}
.vitrin-all{display:inline-flex;align-items:center;gap:12px;margin:22px 0 0 -12px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:#3d44c8}
.vitrin-all:hover,.vitrin-all:focus-visible{background:#e8eaff}
.pack-box{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:56px;margin-top:28px;padding:30px 34px;border-radius:20px;background:#101b2e;color:#fff;align-items:start}
.pack-box>h3,.pack-box>.pack-scope,.pack-box>.pack-row{grid-column:1}
.pack-box>.pack-total,.pack-box>.pack-note,.pack-box>.pack-link{grid-column:2}
.pack-box>.pack-total{grid-row:1 / span 3;align-self:center}
.pack-box>.pack-note{grid-row:4}.pack-box>.pack-link{grid-row:5}
.pack-box h3{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.pack-scope{margin:0 0 14px;font-size:13px;line-height:1.6;color:#aeb8cb}
.pack-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #ffffff1c}
.pack-row b{display:block;font-size:14px;font-weight:600}
.pack-row small{display:block;margin-top:2px;font-size:12px;color:#9ea9be}
.pack-row>span{font-size:15px;font-weight:600;white-space:nowrap}
.pack-total{padding:18px 20px;border-radius:14px;background:#4d54ef}
.pack-total small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#dfe1ff}
.pack-total strong{display:block;margin-top:4px;font-size:32px;font-weight:600;letter-spacing:-.02em}
.pack-note{margin:14px 0 0;font-size:12.5px;line-height:1.65;color:#c3cbda}
.pack-link{justify-self:start;display:inline-flex;align-items:center;gap:10px;margin:10px 0 0 -10px;padding:8px 10px;border-radius:7px;font-size:13px;font-weight:600;color:#fff}
.pack-link:hover,.pack-link:focus-visible{background:#ffffff14}

.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.svc-card{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;padding:14px 14px 18px;border:1px solid #e5e8f0;border-radius:20px;background:#fff}
.svc-visual{position:relative;aspect-ratio:16/10;margin-bottom:20px;overflow:hidden;border:1px solid #e6e9f1;border-radius:12px;background:#f4f5fc}
.svc-visual .dev-scene{height:100%;aspect-ratio:auto}
.svc-web .svc-tag{right:auto;left:12px}
.svc-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.svc-tag{position:absolute;right:12px;bottom:12px;padding:5px 9px;border-radius:7px;background:#101b2ee6;font-size:11px;font-weight:600;color:#fff}
.svc-card h3{margin:0 6px 8px;font-size:22px;font-weight:500;letter-spacing:-.02em}
.svc-card p{margin:0 6px 14px;font-size:14px;line-height:1.7;color:var(--muted)}
.svc-card>a{justify-self:start;display:inline-flex;align-items:center;gap:12px;margin-left:-4px;padding:8px 10px;border-radius:7px;font-size:13px;color:#3d44c8}
.svc-card>a:hover,.svc-card>a:focus-visible{background:#f0f1ff}
.svc-ai{display:flex;flex-direction:column;justify-content:center;padding:28px 9%;background:linear-gradient(160deg,#f2f3ff,#e8eafb)}
.svc-chat{display:grid;gap:12px}
.svc-chat p{margin:0;padding:12px 15px;border-radius:14px;font-size:15px;line-height:1.5;color:#1f2b42}
.svc-chat .q{justify-self:end;max-width:78%;background:#dfe3ff;border-bottom-right-radius:5px}
.svc-chat .a{justify-self:start;max-width:90%;background:#fff;border:1px solid #dfe3ee;border-bottom-left-radius:5px;box-shadow:0 10px 24px -14px #2a385540}
.svc-chat .a span{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid #eef0f5;font-size:12px;font-weight:600;color:#5258b8}
.mini-icon{width:14px;height:14px;flex-shrink:0}

@media(max-width:1100px){.vitrin-grid{gap:16px}}
@media(max-width:1000px) and (min-width:701px){.hero{grid-template-columns:1fr!important;gap:44px!important}.hero-visual{max-width:640px}}
@media(max-width:1000px){.vitrin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pack-box{grid-template-columns:1fr;padding:26px}.pack-box>*{grid-column:1!important;grid-row:auto!important}.pack-box>.pack-total{margin-top:14px}}
@media(max-width:700px){
  /* Put the screens right under the headline so they stay in the first view. */
  .hero{display:flex!important;flex-direction:column}
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{order:1}.hero-copy>h1{order:2}.hero-visual{order:3;margin:6px 0 22px}.hero-copy>.intro{order:4}.hero-copy>.actions{order:5}.hero-copy>.hero-note{order:6;align-self:flex-start}
  .hero-visual{padding-bottom:60px}
  .hv-desktop{margin-right:12%}.hv-bar{height:24px;padding:0 9px;gap:5px}.hv-bar i{width:6px;height:6px}.hv-bar span{font-size:9px;padding:2px 8px}
  .hv-phone{width:29%}
  .hero-visual figcaption{max-width:66%;font-size:11px;bottom:14px}
  .svc-chat p{font-size:13px}
  .vitrin-head{display:block}.vitrin-head>p{margin-top:12px}
  .vitrin-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -5%;padding:0 5% 10px;scrollbar-width:thin}
  .vitrin-card{flex:0 0 80%;scroll-snap-align:start}
  .vitrin-card>span{font-size:11px}
  .svc-grid{grid-template-columns:1fr;gap:20px}
  .svc-ai{padding-bottom:56px}
}

@media(prefers-reduced-motion:reduce){.vitrin-card{transition:none}.vitrin-card:hover,.vitrin-card:focus-visible{transform:none}}
/* Below 1040px the five menu links no longer fit next to the actions: use the menu button. */
@media(max-width:1040px){header .menu{display:block}header nav{display:none!important;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:20px;margin:0;padding:24px max(22px,5%);background:#fff;border-bottom:1px solid var(--line);font-size:15px}header nav.open{display:flex!important}}
/* Mascot: a small helper beside the AI section, never a headline image. */
.ai-identity .maskot{width:76px;height:auto}