/* digipop — Digital Agency UI Kit, 1:1 port z Figmy
   Font: PP Neue Montreal (komerční) → Instrument Sans (Book=400, Medium=500) */

:root {
  --bg: #f8fafb;
  --card: #eceff3;
  --border: #dfe1e7;
  --border-strong: #c1c7d0;
  --ink: #000;
  --ink-soft: #272835;
  --muted: #6f6f6f;
  --star: #ffbe4c;
  --shadow: 0 1px 2px rgba(13, 13, 18, .06);
  --r-card: 30px;
  --r-img: 40px;
  --r-hero: 50px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
strong { font-weight: 500; }

.container { max-width: 1340px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 1440px) { .container { padding-left: 0; padding-right: 0; } }

.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,27,27,0) 0%, #000 100%); }

/* ── pills & circle buttons ─────────────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11.5px 24px; border-radius: 100px;
  font-size: 16px; font-weight: 500; line-height: 1.55; white-space: nowrap;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.pill-primary { background: var(--ink); color: #e7e7e7; box-shadow: var(--shadow); }
.pill-primary:hover { transform: translateY(-1px); }
.pill-outline { border: 1px solid var(--border-strong); color: var(--ink); box-shadow: var(--shadow); }
.pill-link { color: var(--ink-soft); }
.pill-link:hover { color: var(--ink); }
.pill-white { background: #fff; color: var(--ink); }
.pill-lg { padding: 13.5px 30px; }

.btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  box-shadow: var(--shadow); transition: transform .15s ease;
}
.btn-circle:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); }
.btn-outline { border: 1px solid var(--border-strong); background: transparent; }
.btn-64 { width: 64px; height: 64px; }
.btn-80 { width: 80px; height: 80px; }
.btn-100 { width: 100px; height: 100px; }

/* ── navbar ─────────────────────────────────────── */
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 50px; position: relative;
}
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; background: #fff; border-radius: 24px;
}
.logo-text { font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.nav-links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
}
.nav-actions { display: flex; align-items: center; gap: 0; }
.nav-actions .btn-circle { margin-left: 0; }
.nav-burger { display: none; }

/* ── hero ───────────────────────────────────────── */
.hero { padding-top: 60px; }
.hero-top { display: flex; gap: 13px; align-items: flex-start; }
.hero-top h1 {
  flex: 1; max-width: 880px;
  font-size: clamp(32px, 5.55vw, 80px); font-weight: 400; line-height: 1.2; letter-spacing: -.01em;
}
.hero-imgcard {
  position: relative; width: 447px; height: 288px; flex: none;
  border: 1px solid var(--border-strong); border-radius: var(--r-hero); overflow: hidden;
  background: #fff;
}
.glass-pill {
  position: absolute; left: 24px; bottom: 24px; right: 24px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-radius: 1000px;
  background: rgba(255, 255, 255, .2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: #fff; font-size: 32px; font-weight: 500; line-height: 1.4;
}
.glass-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 45px; height: 45px; border-radius: 50%; background: #fff;
}
.hero-bottom { display: flex; gap: 30px; margin-top: 30px; }
.hero-cards { display: flex; flex-direction: column; gap: 30px; width: 333px; flex: none; }
.stat-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 24px;
}
.stat-card strong { display: block; font-size: 40px; line-height: 1.2; }
.stat-card span { display: block; font-size: 24px; font-weight: 500; line-height: 1.5; }
.stat-card-img { height: 228px; }
.stat-card-img2 { height: 230px; }
.stat-card .stat-body { position: absolute; left: 24px; bottom: 24px; }
.stat-deco {
  position: absolute; width: 412px; right: -145px; top: -202px;
  transform: rotate(-10deg); pointer-events: none;
}
.stat-deco3d {
  position: absolute; width: 350px; left: 130px; top: -60px; pointer-events: none;
}
.hero-img {
  position: relative; flex: 1; min-height: 488px;
  border-radius: var(--r-hero); overflow: hidden;
}
.stat-overlay {
  position: absolute; left: 0; top: 0; width: 252px; height: 150px;
  border-radius: 0 0 var(--r-card) 0; border: 0;
}
.hero-chips {
  position: absolute; left: 24px; bottom: 22px; width: 360px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.hero-note {
  position: absolute; right: 24px; bottom: 24px; width: 438px;
  color: var(--ink); font-size: 32px; font-weight: 500; line-height: 1.4;
}

/* ── logos ──────────────────────────────────────── */
.logos { padding-top: 96px; text-align: center; }
.logos p { font-size: 32px; line-height: 1.2; }
.logos-row {
  margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 40px;
  overflow: hidden;
}
.brand { font-size: 34px; font-weight: 700; line-height: 50px; white-space: nowrap; letter-spacing: -.02em; }
.brand-airbnb  { color: #ff5a5f; }
.brand-amazon  { color: #000; }
.brand-amazon::after { content: ""; display: block; margin-top: -10px; height: 8px;
  background: radial-gradient(ellipse 50% 100% at 50% 0, transparent 60%, #ff9900 61%, #ff9900 100%) no-repeat;
  border-radius: 0 0 50% 50%; }
.brand-asana   { color: #0d0e10; }
.brand-canva   { color: #24beca; font-family: Georgia, serif; font-weight: 400; }
.brand-calendly{ color: #006bff; }
.brand-coinbase{ color: #0052ff; }
.brand-framer  { color: #000; }

/* ── why us (bento) ─────────────────────────────── */
.whyus {
  margin-top: 120px;
  display: grid;
  grid-template-columns: 497px 312px 471px;
  grid-template-rows: 145px 193px 14px 280px 16px;
  gap: 0 30px;
  grid-template-areas:
    "title  cardc  cardd"
    "carda  cardc  cardd"
    ".      cardc  ."
    "cardb  cardb  carde"
    "cardb  cardb  carde";
}
.whyus-title { grid-area: title; font-size: 96px; font-weight: 500; line-height: 1.2; align-self: start; }
.bento { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--card); }
.card-dark-img .bento-caption { position: absolute; left: 30px; bottom: 30px; right: 30px; color: #fff; z-index: 1; }
.bento-a { grid-area: carda; }
.bento-a .bento-caption { font-size: 32px; line-height: 1.4; }
.bento-c { grid-area: cardc; }
.bento-c strong, .bento-e strong { display: block; font-size: 48px; font-weight: 400; line-height: 1.2; }
.bento-c p, .bento-e p { margin-top: 16px; font-size: 32px; line-height: 1.4; }
.bento-e { grid-area: carde; }
.bento-e p { margin-top: 20px; line-height: 1.2; }
.bento-d { grid-area: cardd; padding: 24px; }
.bento-d strong { display: block; font-size: 40px; line-height: 1.2; }
.bento-d span { font-size: 24px; font-weight: 500; line-height: 1.5; }
.orbits { position: absolute; left: 117px; top: 12px; width: 604px; height: 604px; pointer-events: none; }
.orbit { position: absolute; border: 2px solid var(--border); border-radius: 50%; }
.o1 { left: 174px; top: 174px; width: 256px; height: 256px; }
.o2 { left: 116px; top: 116px; width: 372px; height: 372px; }
.o3 { left: 56px;  top: 56px;  width: 492px; height: 492px; }
.o4 { left: 0;     top: 0;     width: 604px; height: 604px; }
.av { position: absolute; border-radius: 50%; width: 48px; height: 48px; background: #e1d7fd; object-fit: cover; }
.a1 { left: 371px; top: 210px; }
.a2 { left: 291px; top: 128px; width: 56px; height: 56px; }
.a3 { left: 185px; top: 156px; }
.a4 { left: 96px;  top: 210px; }
.a5 { left: 371px; top: 44px; }
.a6 { left: 243px; top: 32px; }
.bento-b { grid-area: cardb; }
.bento-b-badges { position: absolute; left: 30px; top: 30px; display: flex; gap: 0; z-index: 1; }
.bento-b-badges .pill-lg { margin-left: 0; height: 64px; border-radius: 123px; font-size: 16px; }
.bento-b-text { position: absolute; left: 30px; top: 134px; width: 361px; }
.bento-b-text strong { display: block; font-size: 40px; line-height: 1.2; }
.bento-b-text p { margin-top: 16px; font-size: 24px; line-height: 1.5; max-width: 328px; }

/* phone mockup sandwich (shadow + frame + screen) */
.phone { position: relative; }
.phone img { position: absolute; left: 0; top: 0; width: 100%; }
.phone-shadow { opacity: .7; }
.phone-label { z-index: 1; }
.phone-l .phone-label { left: 10.6% !important; top: 1.5% !important; width: 86.3% !important; }
.phone-r .phone-label { left: 2.1% !important; top: 1.5% !important; width: 86.3% !important; }
.bento-b-phones { position: absolute; left: 458px; top: 30px; width: 350px; height: 450px; }
.bento-b-phones .phone-l { position: absolute; left: 0; top: 46px; width: 164px; height: 405px; }
.bento-b-phones .phone-r { position: absolute; left: 186px; top: 0; width: 164px; height: 405px; }

/* ── working smarter ────────────────────────────── */
.smarter { margin-top: 120px; display: flex; gap: 0; position: relative; }
.smarter-left { width: 591px; flex: none; }
.smarter-left h2 { font-size: 64px; font-weight: 400; line-height: 1.2; letter-spacing: .01em; }
.features { margin-top: 40px; display: flex; flex-direction: column; gap: 30px; }
.feature { display: flex; gap: 20px; }
.feature strong { display: block; font-size: 32px; line-height: 1.4; }
.feature p { margin-top: 10px; font-size: 18px; line-height: 1.55; }
.smarter-right {
  position: relative; margin-left: auto; width: 580px; height: 580px; flex: none;
  border-radius: var(--r-hero); overflow: visible;
}
.smarter-right .cover { border-radius: var(--r-hero); }
.smarter-tag { position: absolute; left: 0; bottom: 0; transform: translate(0, 50%); z-index: 1; }
.smarter-fab { position: absolute; right: -52px; top: 14px; }

/* ── section head (services / projects) ─────────── */
.section-head { text-align: center; max-width: 758px; margin: 0 auto; }
.section-head h2 { font-size: 64px; font-weight: 400; line-height: 1.2; letter-spacing: .01em; }
.section-head p { margin: 20px auto 0; max-width: 591px; color: var(--muted); font-size: 20px; font-weight: 500; line-height: 1.4; }

/* ── services ───────────────────────────────────── */
.services { margin-top: 120px; }
.services-list {
  margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 31px;
  align-items: end;
}
.service-card { position: relative; }
.service-img { position: relative; height: 400px; border-radius: var(--r-img); overflow: hidden; background: #d9d9d9; }
.service-img .btn-80, .service-card-tall > .btn-80 { position: absolute; right: 0; top: 0; z-index: 2; }
.service-body { margin-top: 16px; }
.service-body strong { display: block; font-size: 36px; line-height: 1.55; }
.service-body p { margin-top: 8px; font-size: 18px; line-height: 1.55; }
.service-card-tall { height: 562px; border-radius: var(--r-img); overflow: hidden; background: #d9d9d9; align-self: start; }
.service-body-overlay { position: absolute; left: 30px; right: 34px; bottom: 30px; margin: 0; color: #fff; z-index: 1; }
.service-card-flip { display: flex; flex-direction: column; }
.service-card-flip .service-body { margin: 0 0 16px; }

/* ── projects ───────────────────────────────────── */
.projects { margin-top: 120px; }
.projects-list { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 31px; }
.project-img {
  position: relative; height: 400px; border-radius: var(--r-img); overflow: hidden;
  background: var(--border);
}
.project-img .btn-80 { position: absolute; right: 0; bottom: 0; z-index: 2; }
.project-body { margin-top: 16px; }
.project-body strong { display: block; font-size: 24px; line-height: 1.55; }
.project-body p { margin-top: 8px; font-size: 18px; line-height: 1.55; }
.phones-duo { position: absolute; left: 38px; top: 20px; width: 350px; height: 451px; }
.phones-duo .phone-l { position: absolute; left: 0; top: 46px; width: 164px; height: 405px; }
.phones-duo .phone-r { position: absolute; left: 186px; top: 0; width: 164px; height: 405px; }
.phones-14 { position: absolute; left: -60px; top: 30px; width: 447px; height: 450px; }
.phone14-flat { position: absolute; left: 0; top: 82px; width: 418px; height: 368px; }
.phone14-flat img { position: absolute; left: 0; top: 0; width: 100%; }
.phone14-flat .phone-label { left: 2.4%; top: 2%; width: 95%; }
.phone14-up { position: absolute; left: 266px; top: 0; width: 180px; height: 418px; }
.phone14-up img { position: absolute; left: 0; top: 0; width: 100%; }
.phone14-up .phone-label { left: 10.1%; top: 1.5%; width: 85.9%; }

/* ── reviews ────────────────────────────────────── */
.reviews { margin-top: 120px; display: flex; gap: 40px; }
.reviews-left {
  width: 387px; flex: none; display: flex; flex-direction: column; justify-content: space-between;
}
.reviews-score-row { display: flex; align-items: center; gap: 16px; }
.star { width: 40px; height: 40px; }
.star-80 { width: 80px; height: 80px; margin-left: 16px; }
.reviews-num { font-size: 64px; line-height: 1.2; letter-spacing: .01em; }
.reviews-score > p { margin-top: 16px; font-size: 32px; font-weight: 500; line-height: 1.4; }
.reviews-nav { display: flex; gap: 20px; }
.reviews-track {
  flex: 1; display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; margin-right: calc(50% - 50vw); padding-right: 20px;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card {
  flex: none; width: 426px; scroll-snap-align: start;
  background: var(--card); border-radius: var(--r-card); padding: 24px;
  display: flex; flex-direction: column;
}
.review-head { display: flex; align-items: center; gap: 16px; }
.review-score { font-size: 32px; font-weight: 500; line-height: 1.4; }
.review-stars { display: flex; gap: 10px; }
.review-card hr { border: 0; border-top: 1px solid var(--border-strong); margin: 24px 0; }
.review-quote { font-size: 24px; font-weight: 500; line-height: 1.5; }
.review-author { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 20px; }
.review-author img { width: 64px; height: 64px; border-radius: 50%; background: #e1d7fd; object-fit: cover; }
.review-author strong { display: block; font-size: 24px; line-height: 1.5; }
.review-author span { color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.6; }

/* ── contact ────────────────────────────────────── */
.contact {
  margin-top: 120px; position: relative;
  background: var(--ink); border-radius: var(--r-card); overflow: hidden;
  min-height: 250px; padding: 59px 45px;
}
.contact-inner { display: flex; gap: 62px; align-items: center; max-width: 1232px; }
.contact h2 { color: #fff; font-size: 80px; font-weight: 400; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; }
.contact-right { max-width: 741px; }
.contact-right p { color: #fff; font-size: 18px; line-height: 1.55; }
.contact-right .pill { margin-top: 24px; }
.contact-3d {
  position: absolute; right: -90px; top: 33px; width: 522px; pointer-events: none;
}

/* ── footer ─────────────────────────────────────── */
.footer {
  margin-top: 50px; margin-bottom: 50px;
  background: var(--card); border-radius: var(--r-card); padding: 40px;
}
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.logo-xl .logo-mark { width: 100px; height: 100px; border-radius: 48px; }
.logo-xl { gap: 20px; }
.logo-xl .logo-text { font-size: 48px; }
.footer-meta { margin-top: 96px; display: flex; gap: 100px; font-size: 24px; font-weight: 500; }
.footer-cols { display: flex; gap: 100px; }
.footer-col { display: flex; flex-direction: column; gap: 20px; }
.footer-col a { font-size: 20px; font-weight: 500; line-height: 1.4; }
.footer-col a:first-child { font-size: 24px; line-height: 1.5; }
.footer-col a:hover { text-decoration: underline; }
.footer hr { border: 0; border-top: 1px solid #a4acb9; margin: 32px 0; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 24px; font-weight: 500; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1200px) {
  .nav-links { display: none; }
  .whyus { display: flex; flex-direction: column; gap: 20px; }
  .whyus > * { min-height: 200px; }
  .whyus-title { min-height: 0; }
  .bento-b-phones { left: auto; right: 10px; }
  .smarter { flex-direction: column; gap: 60px; }
  .smarter-right { margin: 0 auto; max-width: 100%; }
  .services-list, .projects-list { grid-template-columns: 1fr; }
  .service-card-tall { height: 500px; }
  .reviews { flex-direction: column; }
  .reviews-left { width: auto; gap: 32px; }
  .contact-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .contact h2 { white-space: normal; }
  .contact-3d { display: none; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-meta { margin-top: 32px; gap: 40px; }
}

@media (max-width: 720px) {
  .navbar { padding-top: 20px; }
  .logo-mark { width: 32px; height: 32px; border-radius: 15px; }
  .logo-mark svg { width: 19px; height: 13px; }
  .logo-text { font-size: 18px; }
  .nav-actions { display: none; }
  .nav-burger { display: inline-flex; }
  .hero { padding-top: 20px; }
  .hero-top { flex-direction: column; gap: 20px; }
  .hero-top h1 { font-size: 32px; max-width: none; }
  .hero-imgcard { width: 100%; height: 150px; border-radius: var(--r-card); }
  .glass-pill { left: 12px; right: 12px; bottom: 12px; padding: 8px 16px; font-size: 18px; }
  .glass-arrow { width: 28px; height: 28px; }
  .glass-arrow svg { width: 12px; height: 12px; }
  .hero-bottom { flex-direction: column-reverse; gap: 20px; margin-top: 20px; }
  .hero-img { min-height: 167px; border-radius: 20px; }
  .stat-overlay { display: none; }
  .hero-chips, .hero-note { display: none; }
  .hero-cards { flex-direction: row; width: 100%; gap: 12px; }
  .stat-card-img, .stat-card-img2 { height: 160px; flex: 1; padding: 16px; }
  .stat-card .stat-body { left: 16px; bottom: 16px; }
  .stat-card strong { font-size: 22px; }
  .stat-card span { font-size: 14px; }
  .stat-deco { width: 200px; right: -70px; top: -100px; }
  .stat-deco3d { width: 170px; left: 60px; top: -30px; }
  .btn-64 { width: 44px; height: 44px; }
  .logos { padding-top: 56px; }
  .logos p { font-size: 16px; }
  .logos-row { justify-content: flex-start; gap: 30px; overflow-x: auto; scrollbar-width: none; }
  .logos-row::-webkit-scrollbar { display: none; }
  .brand { font-size: 20px; line-height: 30px; }
  .whyus { margin-top: 56px; }
  .whyus-title { font-size: 38px; }
  .bento-b-text { position: static; padding: 24px; width: auto; }
  .bento-b-text strong { font-size: 28px; }
  .bento-b-text p { font-size: 16px; }
  .bento-b-badges { position: static; padding: 24px 24px 0; }
  .bento-b-phones { position: relative; margin: 0 auto; transform: scale(.75); transform-origin: top center; }
  .bento-c strong, .bento-e strong { font-size: 32px; }
  .bento-c p, .bento-e p { font-size: 20px; }
  .bento-d strong { font-size: 28px; }
  .bento-d span { font-size: 16px; }
  .orbits { left: 40px; top: 60px; transform: scale(.55); transform-origin: top left; }
  .smarter { margin-top: 56px; }
  .smarter-left { width: auto; }
  .smarter-left h2 { font-size: 32px; }
  .feature strong { font-size: 22px; }
  .feature p { font-size: 15px; }
  .smarter-right { width: 100%; height: auto; aspect-ratio: 1; }
  .smarter-fab { right: 0; top: -14px; width: 56px; height: 56px; }
  .services, .projects, .reviews, .contact { margin-top: 56px; }
  .section-head h2 { font-size: 30px; }
  .section-head p { font-size: 15px; }
  .service-img, .project-img { height: 300px; border-radius: var(--r-card); }
  .service-card-tall { height: 400px; }
  .service-body strong { font-size: 24px; }
  .service-body p, .project-body p { font-size: 15px; }
  .btn-80 { width: 56px; height: 56px; }
  .phones-duo { transform: scale(.7); transform-origin: top left; left: 24px; top: 12px; }
  .phones-14 { transform: scale(.6); transform-origin: top left; left: -20px; }
  .btn-100 { width: 64px; height: 64px; }
  .star-80 { width: 48px; height: 48px; }
  .reviews-num { font-size: 40px; }
  .reviews-score > p { font-size: 20px; }
  .review-card { width: 300px; padding: 20px; }
  .review-quote { font-size: 18px; }
  .review-author strong { font-size: 18px; }
  .review-author span { font-size: 13px; }
  .contact { padding: 32px 24px; min-height: 0; }
  .contact h2 { font-size: 40px; }
  .contact-right p { font-size: 15px; }
  .footer { padding: 24px; margin-top: 20px; margin-bottom: 20px; }
  .logo-xl .logo-mark { width: 50px; height: 50px; border-radius: 24px; }
  .logo-xl .logo-mark svg { width: 30px; height: 21px; }
  .logo-xl .logo-text { font-size: 28px; }
  .footer-meta { font-size: 16px; }
  .footer-cols { gap: 48px; }
  .footer-col a { font-size: 16px; }
  .footer-col a:first-child { font-size: 18px; }
  .footer-bottom { flex-direction: column; gap: 8px; font-size: 15px; }
}