/* ==== Fonts ==== */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Archivo-Black-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/Manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/Manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/Manrope-700.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/Manrope-800.woff2') format('woff2')}

/* ==== Tokens ==== */
:root{
  --font-display:'Archivo Black', Impact, sans-serif;
  --font-body:'Manrope', sans-serif;

  --obsidian:#020403;
  --teal:#4A9B8E;
  --goldenrod:#F4B942;
  --floral-white:#FAF7F2;
  --white:#FFFFFF;
  --teal-dark: oklch(from var(--teal) calc(l - 0.12) c h);
  --teal-light: oklch(from var(--teal) calc(l + 0.14) calc(c*0.7) h);
  --goldenrod-dark: oklch(from var(--goldenrod) calc(l - 0.12) c h);
  --obsidian-60: color-mix(in oklab, var(--obsidian) 60%, transparent);
  --obsidian-15: color-mix(in oklab, var(--obsidian) 15%, transparent);
  --obsidian-08: color-mix(in oklab, var(--obsidian) 8%, transparent);
  --text-body: var(--obsidian);
  --text-muted: color-mix(in oklab, var(--obsidian) 65%, var(--floral-white));
  --text-on-dark: var(--floral-white);
  --text-on-dark-muted: color-mix(in oklab, var(--floral-white) 70%, var(--obsidian));
  --surface-page: var(--floral-white);
  --surface-dark: var(--obsidian);
  --surface-card: var(--white);
  --surface-card-on-dark: color-mix(in oklab, var(--floral-white) 8%, var(--obsidian));
  --surface-tint: color-mix(in oklab, var(--teal) 7%, var(--floral-white));
  --border-subtle: var(--obsidian-15);
  --border-subtle-on-dark: color-mix(in oklab, var(--floral-white) 18%, transparent);
  --accent-primary: var(--goldenrod);
  --accent-primary-hover: var(--goldenrod-dark);
  --accent-secondary: var(--teal);
  --accent-secondary-hover: var(--teal-dark);
  --link-color: var(--teal);
  --link-color-hover: var(--teal-dark);

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:15px;--space-5:24px;
  --space-6:30px;--space-7:40px;--space-8:60px;--space-9:80px;--space-10:120px;
  --container-max:1260px;--container-pad:40px;--grid-gutter:24px;
  --radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-pill:999px;
  --shadow-card:0 1px 2px var(--obsidian-08), 0 8px 24px var(--obsidian-08);
  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --duration-fast:150ms;
  --duration-base:220ms;

  --h1-size:56px;--h1-line:1.1;--h1-weight:900;
  --h2-size:42px;--h2-line:1.15;--h2-weight:900;
  --h3-size:36px;--h3-line:1.2;--h3-weight:900;
  --h4-size:32px;--h4-line:1.25;--h4-weight:900;
  --eyebrow-size:16px;--eyebrow-weight:700;--eyebrow-spacing:1.5px;
  --body-size:18px;--body-line:1.5;--body-weight:400;
  --body-sm-size:15px;--body-sm-line:1.5;
  --caption-size:14px;--caption-line:1.4;
}

/* ==== Base ==== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--floral-white);font-family:var(--font-body)}
a{color:var(--teal)}
a:hover{color:var(--teal-dark)}
img{max-width:100%}

.container{max-width:var(--container-max);margin:0 auto;padding:0 clamp(20px,5vw,40px)}

.section{padding:clamp(40px,8vw,80px) 0}

.eyebrow{
  font-family:var(--font-body);
  font-size:var(--eyebrow-size);
  font-weight:var(--eyebrow-weight);
  letter-spacing:var(--eyebrow-spacing);
  text-transform:uppercase;
  color:var(--teal);
}

.heading{
  font-family:var(--font-display);
  font-size:clamp(24px,5.5vw,42px);
  line-height:var(--h2-line);
  color:var(--obsidian);
  margin:12px 0 0;
  max-width:80%;
}

/* ==== Buttons ==== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:700;
  border-radius:var(--radius-pill);
  border:1px solid var(--obsidian);
  cursor:pointer;
  background:var(--accent-primary);
  color:var(--obsidian);
  transition:background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  text-decoration:none;
  white-space:nowrap;
}
.btn:hover{background:var(--teal);color:var(--obsidian);border-color:transparent}
.btn .btn-arrow{display:inline-block;transition:transform var(--duration-base) var(--ease-standard)}
.btn:hover .btn-arrow{transform:rotate(-45deg)}
.btn-sm{font-size:14px;padding:10px 18px}
.btn-md{font-size:16px;padding:14px 28px}
.btn-lg{font-size:18px;padding:17px 34px}

/* ==== Card ==== */
.card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-6);
  box-shadow:var(--shadow-card);
  color:var(--text-body);
  font-family:var(--font-body);
}
.card.interactive{transition:transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard)}
.card.interactive:hover{transform:translateY(-6px);box-shadow:0 16px 32px var(--obsidian-15)}

/* ==== Checklist ==== */
.checklist{display:flex;flex-direction:column;gap:12px}
.check-item{display:flex;gap:10px;align-items:flex-start;font-family:var(--font-body);font-size:16px;color:var(--text-body)}
.check-item .mark{color:var(--teal);font-weight:700;line-height:1.5}

/* ==== Step item ==== */
.step-item{display:flex;flex-direction:column;gap:10px}
.step-num{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--teal);
  border:1px solid var(--teal);
  border-radius:var(--radius-pill);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.step-title{font-family:var(--font-display);font-size:18px;color:var(--obsidian);margin:0 0 8px}
.step-text{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--text-muted);margin:0}

/* ==== Text field ==== */
.field{display:flex;flex-direction:column;gap:8px;font-family:var(--font-body)}
.field-label{font-size:14px;font-weight:600;color:var(--obsidian)}
.field input,.field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:16px;
  color:var(--obsidian);
  background:var(--white);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  box-sizing:border-box;
  outline:none;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--teal)}

/* ==== Reveal-on-scroll animations ==== */
.reveal{opacity:0;transition-property:opacity,transform;transition-timing-function:var(--ease-standard);will-change:opacity,transform}
.reveal.up{transform:translateY(28px);transition-duration:700ms}
.reveal.left{transform:translateX(-70px);transition-duration:800ms}
.reveal.right{transform:translateX(70px);transition-duration:800ms}
.reveal.top{transform:translateY(-70px);transition-duration:800ms}
.reveal.is-visible{opacity:1;transform:none}

/* ==== Header ==== */
header{background:var(--surface-page)}
.header-bar{
  padding:20px clamp(20px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;font-family:var(--font-body);
}
.logo-link{display:block;line-height:0}
.logo-link img{height:36px;display:block}
.nav-desktop{display:flex;gap:32px;flex-wrap:wrap;align-items:center}
.nav-desktop .nav-links{display:flex;gap:32px;flex-wrap:wrap}
.nav-desktop a.nav-link{color:var(--obsidian);text-decoration:none;font-weight:600;font-size:16px}
.nav-burger{
  display:none;
  background:transparent;border:1px solid var(--obsidian-15);border-radius:var(--radius-sm);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.nav-burger i{font-size:18px;color:var(--obsidian)}
.nav-mobile{
  display:none;
  flex-direction:column;
  padding:4px clamp(20px,5vw,40px) 20px;
  background:var(--surface-page);
  border-top:1px solid var(--border-subtle);
}
.nav-mobile a.nav-link{
  padding:14px 0;color:var(--obsidian);text-decoration:none;font-weight:600;font-size:16px;
  border-bottom:1px solid var(--border-subtle);
}
.nav-mobile .btn{margin-top:16px;width:100%}

/* ==== Hero ==== */
#hero{padding:clamp(24px,5vw,40px) 0 clamp(40px,8vw,80px);background:var(--floral-white)}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:60px;align-items:center}
.hero-h1{font-family:var(--font-display);font-size:clamp(32px,6vw,56px);line-height:var(--h2-line);color:var(--obsidian);margin:16px 0 0}
.hero-p{font-family:var(--font-body);font-size:clamp(15px,2.3vw,18px);line-height:var(--body-line);color:var(--text-muted);max-width:640px;margin-top:20px}
.hero-img img{width:100%;display:block;border-radius:var(--radius-md)}

/* ==== Starting point ==== */
.starting-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:30px}
.starting-cards h3{font-family:var(--font-display);font-size:22px;color:var(--obsidian);margin:0 0 16px}
.starting-followup{font-family:var(--font-display);font-size:clamp(18px,3vw,24px);line-height:1.4;color:var(--obsidian);max-width:640px;margin-top:30px}

/* ==== Perebivka (quote) ==== */
.perebivka{padding:clamp(32px,6vw,60px) 0;background:var(--teal)}
.perebivka i{font-size:22px;color:var(--obsidian);opacity:.5;display:block;margin-bottom:14px}
.perebivka p{font-family:var(--font-display);font-size:clamp(18px,4vw,28px);line-height:1.4;color:var(--obsidian);margin:0;max-width:900px}

/* ==== Why us (Behind Every Website) ==== */
.whyus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:30px;align-items:stretch}
.whyus-item{display:flex}
.whyus-item .card{width:100%;box-sizing:border-box;display:flex;flex-direction:column;min-height:345px}
.whyus-icon{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.whyus-icon i{color:var(--obsidian);font-size:18px}
.whyus-item h3{font-family:var(--font-display);font-size:20px;color:var(--obsidian);margin:0 0 10px}
.whyus-item p{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--text-muted);margin:0}

/* ==== Services ==== */
.svc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:60px;align-items:stretch;padding:50px 0}
.svc-eyebrow-num{font-family:var(--font-display);font-size:clamp(28px,5vw,40px);color:var(--obsidian);margin-bottom:10px;line-height:1}
.svc-sub{font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--teal);margin:0 0 14px}
.svc-text{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--text-muted);margin:0 0 20px;max-width:460px}
.svc-checklist{display:flex;flex-direction:column;gap:10px}
.svc-img img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:var(--radius-md);display:block}
.svc-row.reverse .svc-col-text{order:2}
.svc-row.reverse .svc-col-img{order:1}
.svc-row:not(.reverse) .svc-col-text{order:1}
.svc-row:not(.reverse) .svc-col-img{order:2}
.svc-cta{text-align:center;margin-top:0}
.svc-cta p{font-family:var(--font-display);font-size:24px;color:var(--obsidian);margin:0 0 20px}

/* ==== How we work ==== */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:30px}

/* ==== Projects ==== */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:30px}
.project-tile{text-decoration:none;display:block}
.project-media{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-subtle)}
.project-media img{width:100%;height:auto;display:block;transform:scale(1);transition:transform 400ms var(--ease-standard)}
.project-tile:hover .project-media img{transform:scale(1.04)}
.project-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px;
  background:linear-gradient(to top, var(--obsidian) 0%, transparent 75%);
  opacity:0;transition:opacity 300ms var(--ease-standard);
}
.project-tile:hover .project-overlay{opacity:1}
.project-overlay .label{font-family:var(--font-body);font-size:16px;color:var(--goldenrod);font-weight:700;margin-bottom:6px}
.project-overlay p{font-family:var(--font-body);font-size:15px;color:var(--floral-white);margin:0}
.project-caption-below{display:none;padding:16px 4px 0}
.project-caption-below .label{font-family:var(--font-body);font-size:16px;color:var(--teal);font-weight:700;margin-bottom:6px}
.project-caption-below p{font-family:var(--font-body);font-size:15px;color:var(--text-muted);margin:0;line-height:1.5}

/* ==== Who we are ==== */
.who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:60px;align-items:center}
.who-text p{font-family:var(--font-body);font-size:clamp(15px,2.3vw,18px);line-height:var(--body-line);color:var(--text-muted);max-width:640px;margin-top:16px}
.who-text p:first-of-type{margin-top:20px}
.who-img{order:2;width:100%;height:460px;object-fit:cover;border-radius:var(--radius-md);display:block}
.who-text{order:1}

/* ==== Start project ==== */
.start-card{
  margin-top:30px;max-width:820px;margin-left:auto;margin-right:auto;
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);background:var(--white);padding:24px;text-align:left;
}
.start-project-form{display:flex;flex-direction:column;gap:20px}
.start-project-form .field-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.form-error{font-family:var(--font-body);font-size:14px;color:#c0392b}
.thanks{display:none;text-align:center;padding:40px 20px}
.thanks i{font-size:40px;color:var(--teal);margin-bottom:16px;display:block}
.thanks h3{font-family:var(--font-display);font-size:26px;color:var(--obsidian);margin:0 0 10px}
.thanks p{font-family:var(--font-body);font-size:16px;color:var(--text-muted);margin:0}
.start-card.submitted .start-project-form{display:none}
.start-card.submitted .thanks{display:block}

/* ==== FAQ ==== */
.faq-list{margin-top:20px;display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border-subtle)}
.faq-question{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  background:transparent;border:none;cursor:pointer;text-align:left;padding:20px 0;
  font-family:var(--font-display);font-size:20px;color:var(--obsidian);
}
.faq-question .plus{font-family:var(--font-body);font-size:22px;color:var(--teal);flex-shrink:0;margin-left:16px;transition:transform var(--duration-base) var(--ease-standard)}
.faq-item.open .faq-question .plus{transform:rotate(45deg)}
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease-standard)}
.faq-item.open .faq-panel{grid-template-rows:1fr}
.faq-panel-inner{overflow:hidden;min-height:0}
.faq-panel-inner p{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--text-muted);margin:0 0 20px;max-width:640px}

/* ==== Footer ==== */
footer{background:var(--obsidian)}
.footer-bar{
  padding:40px clamp(20px,5vw,40px);color:var(--text-on-dark-muted);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  font-family:var(--font-body);font-size:14px;
}
.footer-bar img{height:30px;display:block}
.footer-bar .copyright{color:var(--floral-white)}

/* ==== Mobile ==== */
@media (max-width:768px){
  .nav-desktop{display:none}
  .nav-burger{display:flex}
  .heading{max-width:100%}
  .whyus-grid{grid-template-columns:1fr}
  .whyus-item .card{min-height:auto}
  .who-img{order:1}
  .who-text{order:2}
  .svc-row .svc-col-img{order:1}
  .svc-row .svc-col-text{order:2}
  .project-overlay{display:none}
  .project-caption-below{display:block}
  header.nav-open .nav-mobile{display:flex}
}