/* Homepage presentation. Shared styles remain available to inner pages. */
/* A dark architectural backdrop frames the existing device illustration. */
.hero { position: relative; background: #101a2d; padding: 108px 0 112px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 85% 45%, rgba(104,103,218,.18), transparent 52%); }
.hero .container { position: relative; grid-template-columns: 1.2fr 1fr; gap: 70px; }
.hero__content { max-width: 600px; }
.hero__eyebrow { color: #c0c3ff; background: none; padding: 0; margin-bottom: 28px; font-size: .68rem; letter-spacing: .18em; }
.hero__eyebrow::before { content: ""; width: 22px; height: 1px; background: #9999ff; margin-right: 7px; }
.hero__title { color: #fff; font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 750; line-height: 1.27; letter-spacing: -.055em; margin-bottom: 28px; }
.hero__title em { color: #a6a8ff; }
.hero__desc { color: #b5bfd0; font-size: .94rem; line-height: 1.95; margin-bottom: 36px; max-width: 500px; }
.hero__actions .btn--primary { background: #6662e8; border-color: #6662e8; }
.hero__actions .btn--primary:hover { background: #7773f2; }
.hero__actions .btn--outline { color: #e3e7f0; border-color: #526077; }
.hero__actions .btn--outline:hover { background: rgba(255,255,255,.08); }
.hero__visual { position: relative; min-height: 430px; }
.hero__visual::before, .hero__visual::after { content: ""; position: absolute; border: 1px solid rgba(182,188,237,.12); border-radius: 50%; width: 390px; height: 390px; pointer-events: none; }
.hero__visual::after { width: 510px; height: 510px; border-style: dashed; opacity: .5; }
.hero-mockup { z-index: 1; transform: rotate(-7deg); }
.hero-mockup__phone { width: 240px; padding: 8px; background: #35415a; border: 1px solid #69738a; box-shadow: 22px 32px 60px rgba(0,0,0,.35); }
.hero-mockup__screen { min-height: 400px; background: #f2f3f9; padding-top: 30px; gap: 19px; }
.hero-mockup__topbar { justify-content: center; margin-bottom: 12px; }
.hero-mockup__dot { width: 5px; height: 5px; }
.hero-mockup__dot:nth-child(n) { background: #bec4d2; }
.hero-mockup__appicon svg { width: 48px; height: 48px; }
.hero-mockup__card { padding: 20px 14px; box-shadow: none; border-color: #e5e7f0; }
.hero-mockup__badge { transform: rotate(7deg); border-radius: 10px; padding: 12px 18px; box-shadow: 0 10px 32px rgba(0,0,0,.2); gap: 9px; }
.hero-mockup__badge--tl { top: 52px; left: -48px; }
.hero-mockup__badge--br { bottom: 40px; right: -52px; }

.about__grid { grid-template-columns: 1.3fr 1fr; gap: 88px; }
.about__features { gap: 0; margin-top: 36px; }
.feature-item { gap: 16px; padding: 20px 0; border-top: 1px solid var(--color-border); }
.feature-item:last-child { padding-bottom: 0; }
.feature-item__icon { background: #ebeef5; border-radius: 10px; font-size: 1.05rem; }
.feature-item__text strong { font-size: .92rem; }
.feature-item__text p { font-size: .83rem; line-height: 1.8; }
.about__card { max-width: 380px; border-radius: 16px; padding: 36px; box-shadow: 0 20px 60px rgba(25,40,70,.06); }
.about__card-label { color: #616b80; letter-spacing: .18em; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); margin-bottom: 26px; }
.about__stat-list { gap: 28px; }
.stat-row { gap: 16px; }
.stat-row__icon { font-size: 1.2rem; }
.stat-row__value { color: #273650; font-size: 1.05rem; font-weight: 650; }
.stat-row__label { margin-top: 6px; line-height: 1.7; }
.stat-row__bar { height: 3px; margin-top: 12px; }
.stat-row__bar-fill { background: #9398cc; }

.apps__header { margin-bottom: 44px; }
.apps__grid { gap: 24px; }
.app-card { padding: 32px 28px 26px; border-radius: 14px; box-shadow: none; background: #fff; }
.app-card:hover { border-color: #b9bfd9; box-shadow: 0 16px 40px rgba(25,40,70,.07); }
.app-card__icon { margin-bottom: 32px; box-shadow: 0 4px 12px rgba(25,40,70,.08); }
.app-card__badge { top: 32px; right: 26px; padding: 4px 10px; font-size: .65rem; letter-spacing: 0; }
.app-card__badge--released { background: #eff8f4; border-color: #d3eadd; color: #27694d; }
.app-card__title { font-size: 1.06rem; line-height: 1.65; letter-spacing: -.035em; margin-bottom: 14px; }
.app-card__desc { font-size: .88rem; line-height: 1.9; }
.app-card__link { margin-top: 28px; background: #f4f5fb; color: #4643a6; border-color: #e8e9f3; font-size: .8rem; }
.app-card__link:hover { background: #4f46e5; }
.app-card__icon--orange { background: #f1eee7; box-shadow: none; }

.values__grid { gap: 0; margin-top: 52px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.value-card { padding: 34px 28px; text-align: left; background: transparent; border: 0; border-right: 1px solid var(--color-border); border-radius: 0; box-shadow: none; }
.value-card:last-child { border-right: 0; }
.value-card:hover { transform: none; box-shadow: none; background: #eef0f6; }
.value-card__icon { font-size: 1.4rem; margin-bottom: 24px; }
.value-card__title { font-size: 1rem; margin-bottom: 12px; }
.value-card__desc { font-size: .86rem; line-height: 1.85; }

.contact-cta__inner { background: #172238; border: 1px solid #2d3850; border-radius: 16px; padding: 64px 40px; }
.contact-cta__inner .section-label { color: #aeb2f8; background: none; }
.contact-cta__desc { color: #bac3d2; font-size: .94rem; }
.contact-cta__inner .btn--white { color: #202b43; }
@media (max-width: 1000px) {
  .hero .container { gap: 32px; }
  .about__grid { gap: 40px; }
  .app-card { padding: 28px 22px; }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-card:nth-child(2) { border-right: 0; }
  .value-card:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
}

@media (max-width: 900px) {
  .hero { padding-block: 76px; }
  .hero .container { grid-template-columns: 1fr 1fr; text-align: left; }
  .hero__visual { order: 0; min-height: 380px; }
  .hero__title { font-size: clamp(2rem, 4.6vw, 2.8rem); }
  .hero__desc br { display: none; }
  .hero__actions { justify-content: flex-start; }
  .hero-mockup { transform: rotate(-5deg) scale(.88); }
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { order: 0; }
  .about__card { max-width: none; }
  .about__stat-list { display: grid; grid-template-columns: 1fr 1fr; }
  .apps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hero { padding: 60px 0 40px; }
  .hero .container { grid-template-columns: 1fr; gap: 28px; }
  .hero__title { font-size: clamp(2.2rem, 8.8vw, 3.2rem); }
  .hero__eyebrow { font-size: .6rem; margin-bottom: 24px; }
  .hero__desc { margin-left: 0; font-size: .9rem; }
  .hero__visual { min-height: 340px; }
  .hero__visual::before { width: 300px; height: 300px; }
  .hero__visual::after { width: 380px; height: 380px; }
  .hero-mockup { width: 240px; transform: rotate(-5deg) scale(.9); }
  .hero-mockup__phone { width: 200px; }
  .hero-mockup__screen { min-height: 330px; }
  .hero-mockup__badge--tl { left: -12px; }
  .hero-mockup__badge--br { right: -12px; }
  .about__card { padding: 28px 24px; }
  .about__stat-list { grid-template-columns: 1fr; gap: 24px; }
  .apps__grid { grid-template-columns: 1fr; }
  .app-card { padding: 28px; }
  .app-card__title { font-size: 1.1rem; }
  .value-card { padding: 26px 18px; }
  .contact-cta__inner { padding: 44px 24px; }
  .contact-cta__desc br { display: none; }
  .contact-cta__actions { flex-direction: column; }
}

@media (max-width: 380px) {
  .values__grid { grid-template-columns: 1fr; }
  .value-card { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .value-card:last-child { border-bottom: 0; }
  .hero__actions { flex-direction: column; }
}