@font-face {
  font-family:Inter;
  src:url('assets/fonts/Inter.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root {
  --ink:#1d2630;
  --muted:#657080;
  --blue:#246bfd;
  --line:#e5e9ee;
  --paper:#f5f7fa;
  --green:#326046;
  --radius:28px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}

body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  font-size:1.125rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

h1,h2,h3,h4,p,figure {
  margin:0;
}

h1,h2,h3,h4 {
  line-height:1.12;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:6px;
  border-radius:4px;
}

.container {
  width:min(1200px,calc(100% - 80px));
  margin-inline:auto;
}

.muted {
  color:var(--muted);
}

.eyebrow {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:20;
  transform:translateY(-180%);
  background:var(--ink);
  color:white;
  padding:12px 20px;
}

.skip-link:focus {
  transform:translateY(0);
}

.site-header {
  min-height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px;
}

.brand {
  position:relative;
  display:block;
  overflow:hidden;
  width:142px;
  aspect-ratio:1015 / 196;
  height:auto;
  flex:none;
}

.brand img {
  position:absolute;
  width:123.5%;
  max-width:none;
  height:auto;
  left:-11.8%;
  top:-268%;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:38px;
  font-size:.875rem;
  font-weight:500;
}

.site-header nav a {
  padding-block:12px;
  transition:color .18s;
}

.site-header nav a:hover {
  color:var(--blue);
}

.site-header nav span {
  margin-left:6px;
  color:var(--blue);
}

.hero {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  align-items:center;
  gap:30px;
  padding-block:86px 78px;
}

.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  margin-bottom:24px;
}

.brand-chevron {
  font-size:2rem;
  line-height:.6;
  color:var(--blue);
  font-weight:700;
}

.hero h1 {
  font-size:clamp(2.7rem,4.5vw,4rem);
  font-weight:600;
  letter-spacing:-.055em;
  line-height:1.07;
}

.hero h1>span {
  display:block;
  color:var(--blue);
}

.hero-description {
  color:var(--muted);
  max-width:420px;
  margin-block:26px 28px;
  line-height:1.65;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:54px;
  padding:15px 23px;
  border-radius:9px;
  font-size:.875rem;
  font-weight:600;
  transition:background .18s,box-shadow .18s;
}

.button-primary {
  background:var(--blue);
  color:#fff;
}

.button-primary:hover {
  background:#1555d6;
  box-shadow:0 5px 18px #246bfd20;
}

.button span {
  font-size:1.125rem;
  font-weight:400;
}

.hero-note {
  color:var(--muted);
  font-size:.75rem;
  margin-top:17px;
}

.hero-visual {
  min-width:0;
}

.hero-stage {
  position:relative;
  height:540px;
  isolation:isolate;
}

.hero-orbit {
  position:absolute;
  inset:50px -8px 40px;
  background:#f1f5fc;
  border-radius:50%;
  z-index:-1;
}

.hero-orbit:after {
  content:'';
  position:absolute;
  inset:25px;
  border:1px solid #e3eaf7;
  border-radius:50%;
}

.hero-screen {
  position:absolute;
  width:44%;
  padding:5px;
  background:white;
  border:1px solid #dde3e9;
  border-radius:23px;
  box-shadow:0 20px 40px -16px #182b4940;
  overflow:hidden;
}

.hero-screen img {
  border-radius:17px;
  width:100%;
}

.hero-screen-garden {
  left:5%;
  top:12px;
  transform:rotate(-7deg);
}

.hero-screen-tracker {
  right:3%;
  top:114px;
  transform:rotate(7deg);
}

.app-label {
  position:absolute;
  display:flex;
  gap:8px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  padding:10px 15px;
  border-radius:12px;
  box-shadow:0 8px 24px #1d263009;
  font-size:.75rem;
  font-weight:600;
}

.app-label-garden {
  left:0;
  bottom:44px;
}

.app-label-tracker {
  right:8px;
  top:44px;
}

.app-label img {
  border-radius:6px;
}

figcaption {
  font-size:.75rem;
  line-height:1.5;
  color:var(--muted);
  text-align:center;
}

.hero-visual figcaption {
  margin-top:8px;
}

.projects {
  padding-block:54px 0;
  border-top:1px solid var(--line);
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:32px;
  margin-bottom:44px;
}

.section-heading .eyebrow {
  margin-bottom:16px;
  color:var(--muted);
}

h2 {
  font-size:clamp(2rem,3vw,2.7rem);
  letter-spacing:-.045em;
  font-weight:600;
}

.section-heading>p {
  font-size:.9375rem;
  color:var(--muted);
  padding-bottom:4px;
}

.project {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:32px;
}

.project-copy {
  padding:46px 46px 38px;
}

.project-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:28px;
}

.app-icon {
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  border-radius:15px;
  overflow:hidden;
  flex:none;
}

.garden-icon {
  background:#e6efe5;
}

.status {
  font-size:.75rem;
  line-height:1.4;
  border:1px solid #dce1e6;
  border-radius:20px;
  padding:6px 12px;
  color:#56616d;
  white-space:nowrap;
}

.project-category {
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:10px;
}

.project h3 {
  font-size:2rem;
  letter-spacing:-.04em;
  font-weight:600;
}

.project-intro {
  font-size:1.125rem;
  color:var(--muted);
  margin-top:16px;
  max-width:390px;
}

.features {
  list-style:none;
  margin:32px 0;
  padding:0;
  display:grid;
  gap:22px;
}

.features li {
  display:flex;
  gap:16px;
  align-items:baseline;
}

.feature-number {
  font-size:.75rem;
  color:#64716a;
  font-variant-numeric:tabular-nums;
  flex:none;
}

.features h4 {
  font-size:.9375rem;
  font-weight:600;
  line-height:1.5;
  margin-bottom:3px;
}

.features p {
  font-size:.875rem;
  color:var(--muted);
  line-height:1.55;
}

.project-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.project-tags span {
  font-size:.75rem;
  border-radius:5px;
  background:#f4f6f8;
  padding:4px 9px;
  color:#596470;
}

.project-visual {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:36px 22px 24px;
  overflow:hidden;
}

.garden-visual {
  background:#edf3ed;
}

.tracker-visual {
  background:#eef0e5;
}

.project-screens {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:16px 0 42px;
  min-width:0;
}

.screen {
  width:43%;
  height:auto;
  min-width:0;
  border:4px solid white;
  border-radius:19px;
  box-shadow:0 16px 26px -16px #23332960;
}

.screen-second {
  transform:translateY(28px);
}

.project-visual figcaption {
  font-size:.75rem;
  color:#566359;
}

.project-tracker .project-copy {
  grid-column:2;
  grid-row:1;
}

.project-tracker .project-visual {
  grid-column:1;
  grid-row:1;
}

.project-tracker .feature-number {
  color:#727850;
}

.about {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:70px;
  padding-block:98px 100px;
}

.about .eyebrow {
  margin-bottom:20px;
  color:var(--muted);
}

.about h2 {
  font-size:2.35rem;
  line-height:1.18;
}

.about-copy {
  font-size:1rem;
  color:var(--muted);
}

.about-copy>p+p {
  margin-top:20px;
}

.expertise {
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  list-style:none;
  padding:22px 0 0;
  margin:24px 0 0;
  border-top:1px solid var(--line);
  font-size:.75rem;
  color:var(--ink);
}

.contact-panel {
  background:#f2f5fb;
  border:1px solid #e7edf8;
  border-radius:var(--radius);
  padding:58px 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

.contact .eyebrow {
  color:var(--blue);
  margin-bottom:18px;
}

.contact h2 {
  font-size:2.75rem;
  line-height:1.1;
}

.contact p:not(.eyebrow) {
  font-size:.9375rem;
  color:var(--muted);
  margin-top:20px;
}

.contact-action {
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:flex-start;
}

.email {
  font-size:1.875rem;
  font-weight:500;
  letter-spacing:-.04em;
  overflow-wrap:anywhere;
}

.email:hover {
  color:var(--blue);
}

.contact-action .button {
  min-width:177px;
}

.site-footer {
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:.75rem;
  color:var(--muted);
}

.brand-footer {
  width:100px;
  height:auto;
}

.site-footer>p {
  margin-right:auto;
  font-size:.75rem;
}

@media(min-width:1400px) {
  .hero {
    gap:48px;
  }

  .hero-stage {
    height:550px;
  }

}

@media(max-width:1050px) {
  .container {
    width:calc(100% - 48px);
  }

  .hero {
    gap:24px;
    padding-block:64px;
  }

  .hero h1 {
    font-size:3rem;
  }

  .hero-stage {
    height:450px;
  }

  .hero-screen-tracker {
    top:110px;
  }

  .app-label-garden {
    bottom:22px;
  }

  .app-label-tracker {
    top:40px;
    right:0;
  }

  .hero-orbit {
    inset:60px 0 35px;
  }

  .project-copy {
    padding:32px 28px;
  }

  .project-visual {
    padding-inline:16px;
  }

  .project-screens {
    gap:12px;
  }

  .screen {
    width:46%;
  }

  .about {
    gap:40px;
  }

  .about h2 {
    font-size:2rem;
  }

  .contact-panel {
    padding:44px 36px;
  }

  .contact h2 {
    font-size:2.4rem;
  }

  .email {
    font-size:1.6rem;
  }

}

@media(max-width:800px) {
  .hero {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px;
  }

  .hero h1 {
    font-size:2.55rem;
  }

  .hero-description {
    font-size:1rem;
  }

  .hero-stage {
    height:390px;
  }

  .hero-screen {
    border-radius:17px;
    padding:3px;
  }

  .hero-screen img {
    border-radius:12px;
  }

  .hero-screen-garden {
    top:35px;
  }

  .hero-screen-tracker {
    top:108px;
  }

  .app-label {
    padding:7px 9px;
    font-size:.75rem;
    gap:4px;
  }

  .app-label img {
    width:21px;
    height:21px;
  }

  .app-label-garden {
    bottom:24px;
  }

  .app-label-tracker {
    top:8px;
  }

  .hero-visual figcaption {
    font-size:.75rem;
  }

  .project {
    grid-template-columns:1fr;
  }

  .project-copy {
    padding:34px;
  }

  .project-intro {
    max-width:540px;
  }

  .project-meta {
    justify-content:flex-start;
    gap:20px;
  }

  .project-visual {
    padding:36px 32px 24px;
  }

  .project-screens {
    gap:24px;
  }

  .screen {
    width:36%;
    max-width:220px;
  }

  .project-tracker .project-copy,.project-tracker .project-visual {
    grid-column:auto;
    grid-row:auto;
  }

  .about {
    grid-template-columns:1fr;
    gap:28px;
    padding-block:70px;
  }

  .about h2 {
    font-size:2.4rem;
  }

  .contact-panel {
    align-items:flex-start;
    flex-direction:column;
  }

  .contact-action {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
  }

  .site-footer>p {
    max-width:220px;
  }

  .section-heading>p {
    max-width:240px;
  }

}

@media(max-width:600px) {
  html {
    scroll-padding-top:1rem;
  }

  .container {
    width:calc(100% - 40px);
  }

  .site-header {
    min-height:110px;
    flex-wrap:wrap;
    gap:10px;
    padding-block:20px 12px;
  }

  .brand {
    width:124px;
    height:auto;
  }

  .site-header nav {
    width:100%;
    justify-content:space-between;
    gap:12px;
    font-size:.75rem;
  }

  .site-header nav a {
    padding-block:8px;
  }

  .hero {
    grid-template-columns:1fr;
    padding-block:46px 42px;
    gap:24px;
  }

  .hero .eyebrow {
    font-size:.75rem;
    margin-bottom:22px;
  }

  .hero h1 {
    font-size:clamp(2.5rem,9.6vw,3.65rem);
    letter-spacing:-.055em;
    line-height:1.1;
  }

  .hero-description {
    font-size:1.0625rem;
    max-width:360px;
    margin-block:23px;
  }

  .hero-note {
    font-size:.75rem;
  }

  .hero-visual {
    max-width:420px;
    width:100%;
    margin-inline:auto;
  }

  .hero-stage {
    height:auto;
    aspect-ratio:1/1.15;
    margin-top:8px;
  }

  .hero-screen-garden {
    top:5%;
    left:6%;
    width:43%;
  }

  .hero-screen-tracker {
    top:22%;
    right:4%;
    width:44%;
  }

  .hero-orbit {
    inset:20px 0 0;
  }

  .app-label-tracker {
    top:1%;
    right:0;
  }

  .app-label-garden {
    bottom:0;
    left:0;
  }

  .app-label {
    font-size:.75rem;
    padding:8px 10px;
  }

  .hero-visual figcaption {
    margin-top:20px;
    font-size:.75rem;
  }

  .projects {
    padding-top:38px;
  }

  .section-heading {
    display:block;
    margin-bottom:28px;
  }

  .section-heading .eyebrow {
    font-size:.75rem;
    margin-bottom:14px;
  }

  .section-heading h2 {
    font-size:2.2rem;
  }

  .section-heading>p {
    max-width:300px;
    font-size:.875rem;
    margin-top:20px;
  }

  .desktop-break {
    display:none;
  }

  .project {
    border-radius:20px;
    margin-bottom:24px;
  }

  .project-copy {
    padding:25px 23px 28px;
  }

  .project-meta {
    margin-bottom:24px;
    justify-content:space-between;
    gap:8px;
  }

  .app-icon {
    width:50px;
    height:50px;
    border-radius:12px;
  }

  .status {
    font-size:.75rem;
    padding:5px 10px;
  }

  .project-category {
    font-size:.75rem;
  }

  .project h3 {
    font-size:1.7rem;
  }

  .project-intro {
    font-size:1rem;
  }

  .features {
    margin-block:26px;
    gap:20px;
  }

  .features li {
    gap:12px;
  }

  .features h4 {
    font-size:.875rem;
  }

  .features p {
    font-size:.8125rem;
  }

  .project-tags {
    gap:6px;
  }

  .project-tags span {
    font-size:.75rem;
    padding:4px 7px;
  }

  .project-visual {
    padding:23px 12px 20px;
  }

  .project-screens {
    gap:12px;
    padding-bottom:38px;
  }

  .screen {
    width:45%;
    border-width:3px;
    border-radius:12px;
  }

  .project-visual figcaption {
    font-size:.75rem;
    max-width:240px;
    margin-inline:auto;
  }

  .about {
    padding-block:46px 52px;
    gap:24px;
  }

  .about h2 {
    font-size:2rem;
  }

  .about .eyebrow {
    font-size:.75rem;
    margin-bottom:16px;
  }

  .about-copy {
    font-size:.9375rem;
  }

  .expertise {
    font-size:.75rem;
    gap:10px 16px;
  }

  .contact-panel {
    padding:30px 24px;
    border-radius:20px;
    gap:28px;
  }

  .contact h2 {
    font-size:2.1rem;
  }

  .contact .eyebrow {
    font-size:.75rem;
  }

  .contact p:not(.eyebrow) {
    font-size:.875rem;
  }

  .contact-action {
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .email {
    font-size:1.7rem;
  }

  .site-footer {
    padding-block:32px;
    min-height:0;
    flex-wrap:wrap;
    gap:20px;
    font-size:.75rem;
  }

  .brand-footer {
    width:100px;
    height:auto;
  }

  .site-footer>p {
    width:100%;
    max-width:none;
    order:3;
    font-size:.75rem;
  }

  .site-footer>span {
    margin-left:auto;
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *,*::before,*::after {
    transition:none!important;
  }

}

/* Keep navigation and frequently read labels comfortable on small screens. */
.site-header nav,.status,.project-category,.project-tags span,.expertise {
  font-size:.875rem;
}

.features h4 {
  font-size:1rem;
}

.features p {
  font-size:.9375rem;
}

/* Reflow for enlarged browser text; never clip long Russian headings. */
h1,h2,h3,h4,p {
  overflow-wrap:anywhere;
}

.site-header,.site-header nav,.project-meta {
  flex-wrap:wrap;
}

.hero-copy,.project-copy,.about-copy,.contact-panel>div {
  min-width:0;
}

.contact-panel {
  flex-wrap:wrap;
}

.button {
  max-width:100%;
}

.site-footer {
  flex-wrap:wrap;
}