/* Usamify — Figma-aligned homepage styles v17 */
:root {
  --color-bg: #010309;
  --color-white: #ffffff;
  --color-gray-400: #9ca3af;
  --color-gray-500: #727272;
  --color-green: #41b362;
  --color-gold: #fbbf24;
  --font-family: 'DM Sans', sans-serif;
  --font-display: 'Poppins', 'DM Sans', sans-serif;
  --container-max: 1288px;
  --radius-pill: 120px;
  --radius-card: 32px;
  --radius-lg: 43px;
  --transition: 0.25s ease;
  --carousel-side-w: min(62vw, 640px);
  --carousel-side-h: min(36vw, 372px);
  --carousel-center-w: min(68vw, 720px);
  --carousel-center-h: min(40vw, 418px);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-family); background:var(--color-bg); color:var(--color-white); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { display:block; max-width:100%; }

.container { max-width:var(--container-max); margin:0 auto; padding:0 76px; }
.section { padding:100px 0; position:relative; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-family); font-size:18px; font-weight:500;
  padding:14px 27px; border-radius:var(--radius-pill);
  border:1px solid transparent; cursor:pointer;
  transition:all var(--transition); white-space:nowrap; position:relative;
}
.btn--outline {
  background: linear-gradient(90deg,rgba(30,30,30,.7),rgba(30,30,30,.7)),
              linear-gradient(90deg,rgba(65,179,98,.21),rgba(65,179,98,.21));
  border-color:rgba(255,255,255,.3); color:#fff;
}
.btn--outline:hover { border-color:rgba(255,255,255,.5); }
.btn--primary {
  background: radial-gradient(ellipse 80% 120% at 20% 0%,#9cf2b5,#6ed28b 50%,#41b362);
  color:#fff; border:1.4px solid #0e0e00;
  box-shadow:-1px 2px 2.5px rgba(65,179,98,.2),-5px 8px 4.5px rgba(65,179,98,.17);
}
.btn--primary::before {
  content:''; position:absolute; inset:-8px -4px;
  background:#41b362; filter:blur(17px); mix-blend-mode:color-dodge;
  opacity:.85; z-index:-1; border-radius:var(--radius-pill);
}
.btn--primary:hover { filter:brightness(1.07); transform:translateY(-1px); }
.btn--nav-contact {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:127px; padding:10px; font-size:18px; font-weight:500; color:#fff;
  background:rgba(42,47,46,.35); border:1px solid rgba(42,47,46,.5);
  border-radius:var(--radius-pill);
}
.btn--nav-contact:hover { background:rgba(42,47,46,.55); }
.btn--full { width:100%; }
.btn--subscribe {
  background:#41b362; color:#fff; border-radius:100px;
  padding:12px 24px; font-size:14px; font-weight:600; border:none; cursor:pointer;
}
.btn--subscribe:hover { background:#36a356; }

/* ── Hero+About shared BG ── */
.hero-about { position:relative; overflow:hidden; }
.hero-about__bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-about__bg-image { position:absolute; inset:0; background:url('../images/hero_home.png') center top/cover no-repeat; }
.hero-about__dot-grid {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.08));
}
.hero-about__light-streak {
  position:absolute; top:-18%; left:-12%; width:70%; height:70%;
  background:linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 28%, transparent 58%);
  transform:rotate(-12deg);
  filter:blur(8px);
}
.hero-about__glow { position:absolute; border-radius:50%; }
.hero-about__glow--top {
  top:12%; left:50%; transform:translateX(-50%);
  width:900px; height:420px;
  background:radial-gradient(ellipse,rgba(65,179,98,.16),transparent 70%);
}
.hero-about__glow--bottom {
  top: 580px; left:50%; transform:translateX(-50%);
  width:1200px; height:520px;
  background:radial-gradient(ellipse,rgba(65,179,98,.22),rgba(65,179,98,.08) 40%,transparent 70%);
}
/* Watermark behind the carousel */
.hero-about__watermark {
  position:absolute; top: min(520px, 62vh); left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-size:clamp(100px, 16vw, 220px);
  font-weight:600; color:rgba(255,255,255,.9); letter-spacing:0.1em;
  white-space:nowrap; filter:blur(35px); user-select:none; line-height:1.5;
  pointer-events:none;
}

/* Hero — natural flow, no 100vh lock */
.hero {
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  overflow:visible;
}
.site-header { position:relative; z-index:25; width:100%; flex:0 0 auto; }

.navbar {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:18px 76px 0;
  max-width:1440px; width:100%; margin:0 auto;
}
.navbar__links { grid-column:1; display:flex; align-items:center; gap:32px; justify-self:start; }
.navbar__link { font-size:16px; font-weight:400; color:var(--color-gray-400); transition:color var(--transition); }
.navbar__link:hover, .navbar__link--active { color:#fff; }
.navbar__brand { grid-column:2; justify-self:center; display:flex; align-items:center; gap:13px; }
.navbar__avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.navbar__name { font-size:28px; font-weight:500; line-height:1.2; }
.navbar__actions { grid-column:3; justify-self:end; display:flex; align-items:center; gap:12px; }
/* Hamburger — hidden on desktop */
.navbar__menu-btn {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px;
  background:rgba(42,47,46,.35); border:1px solid rgba(42,47,46,.5);
  border-radius:12px; cursor:pointer;
}
.navbar__menu-btn span { display:block; width:100%; height:2px; background:#fff; border-radius:1px; transition:transform var(--transition),opacity var(--transition); }
.navbar__menu-btn[aria-expanded=true] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.navbar__menu-btn[aria-expanded=true] span:nth-child(2) { opacity:0; }
.navbar__menu-btn[aria-expanded=true] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.navbar__divider { height:1px; background:rgba(255,255,255,.12); width:calc(100% - 152px); max-width:1288px; margin:14px auto 0; }

/* Mobile slide-down menu */
.mobile-menu {
  position:absolute; top:100%; left:0; right:0; z-index:30;
  background:rgba(1,3,9,.97); border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.mobile-menu[hidden] { display:none; }
.mobile-menu__links { display:flex; flex-direction:column; gap:4px; padding:16px 24px 24px; }
.mobile-menu__link { display:block; padding:14px 8px; font-size:18px; font-weight:500; color:#fff; border-bottom:1px solid rgba(255,255,255,.06); }
.mobile-menu__link:hover { color:var(--color-green); }

/* Hero content — keep badge→tags inside ~62vh so carousel peeks in the first screen */
.hero__content {
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px;
  padding:32px 24px 20px;
  max-width:var(--container-max); margin:0 auto; width:100%;
}
.hero__badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:0 15px; height:41px;
  background: linear-gradient(90deg,rgba(30,30,30,.7),rgba(30,30,30,.7)),
              linear-gradient(90deg,rgba(65,179,98,.21),rgba(65,179,98,.21));
  border:1px solid rgba(255,255,255,.3); border-radius:var(--radius-pill);
  margin:0;
}
.hero__stars { color:var(--color-gold); font-size:13px; letter-spacing:2px; }
.hero__badge-text { font-size:18px; color:var(--color-gray-400); }
.hero__badge-text strong { color:#fff; font-weight:600; }

.hero__title {
  font-family:var(--font-display);
  font-size:clamp(42px, 5.2vw, 68px);
  font-weight:600; line-height:1.15; margin:0;
  text-shadow:-1px 2px 5px rgba(65,179,98,.2),-5px 8px 9px rgba(65,179,98,.17),-10px 17px 12px rgba(65,179,98,.1);
}
.hero__title-accent {
  background:radial-gradient(ellipse 80% 80% at 50% 50%, #41b362 0%, #6ed28b 50%, #9cf2b5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero__subtitle {
  font-size:17px; line-height:1.55; color:var(--color-gray-400);
  max-width:680px; margin:0;
}
.hero__actions { display:flex; align-items:center; justify-content:center; gap:16px; margin:4px 0 8px; }
.hero__section-divider { display:none; }

.hero__skills-wrapper { position:relative; width:100%; max-width:100vw; margin:0; overflow:hidden; }
.hero__skills {
  display:flex; flex-wrap:nowrap; gap:14px; overflow-x:auto;
  padding:6px 48px; scrollbar-width:none; scroll-behavior:smooth; cursor:grab;
  justify-content:center;
}
.hero__skills::-webkit-scrollbar { display:none; }
.hero__skills.is-dragging { cursor:grabbing; scroll-behavior:auto; }
.skill-tag {
  display:inline-flex; align-items:center; gap:10px; padding:4px 17px;
  background: linear-gradient(90deg,rgba(30,30,30,.7),rgba(30,30,30,.7)),
              linear-gradient(90deg,rgba(65,179,98,.21),rgba(65,179,98,.21));
  border:.6px solid rgba(255,255,255,.3); border-radius:var(--radius-pill);
  font-size:18px; font-weight:500; color:#fff; white-space:nowrap; flex-shrink:0;
  transition:transform .4s ease; user-select:none; touch-action:pan-x;
}
.skill-tag.is-active { transform:scale(1.05); }
.skill-tag__icon { color:var(--color-green); font-size:12px; }
.skill-tag--first { mask-image:linear-gradient(to right,transparent,black 22%); }
.skill-tag--last  { mask-image:linear-gradient(to left,transparent,black 22%); }

/* Carousel — viewport-scaled, same size for every card (no jump) */
.hero__carousel-wrapper {
  position:relative; z-index:5; width:100%;
  margin:8px 0 0; padding:0 0 24px; overflow:hidden;
}
.hero__carousel {
  display:block; overflow:hidden; padding:8px 0;
  cursor:grab; touch-action:pan-y; user-select:none;
}
.hero__carousel.is-dragging { cursor:grabbing; }
.hero__carousel-track {
  display:flex; align-items:center; gap:20px;
  width:max-content;
  will-change:transform; transform:translate3d(0,0,0);
}
.project-card {
  flex:0 0 var(--carousel-center-w); width:var(--carousel-center-w);
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; opacity:.42; transition:opacity .35s ease;
}
.project-card.is-active { opacity:1; z-index:2; }
.project-card__visual {
  width:100%; aspect-ratio:903/524;
  border-radius:12px; overflow:hidden; background:#0a0a0a;
}
.project-card.is-active .project-card__visual { width:100%; }
.project-card__image { width:100%; height:100%; object-fit:cover; object-position:top center; pointer-events:none; }

/* ── ABOUT ── */
.about { position:relative; z-index:2; padding-top:80px; padding-bottom:40px; }
.about__intro { display:grid; grid-template-columns:minmax(72px,120px) 1fr; gap:clamp(24px,4vw,56px); margin-bottom:48px; align-items:start; }
.about__label { font-size:20px; color:var(--color-gray-400); padding-top:8px; }
.about__content { max-width:820px; }
.about__line {
  display:block; font-size:clamp(22px, 2.6vw, 34px); font-weight:600; line-height:1.5;
  color:var(--color-gray-500); transition:color .45s ease;
}
.about__line.is-lit, .about__line:hover { color:#fff; }
.about__lines:has(.about__line:hover) .about__line:not(:hover):not(.is-lit) { color:var(--color-gray-500); }

/* Stats — 3 columns side by side */
.stats { display:grid; grid-template-columns:repeat(3,1fr); border-radius:0; overflow:hidden; }
.stats__item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:44px 20px; min-height:228px;
  background:rgba(217,217,217,.02); text-align:center;
}
.stats__item--highlight { background:rgba(217,217,217,.06); }
.stats__number { font-size:clamp(52px, 6vw, 84px); font-weight:600; line-height:1.15; white-space:nowrap; }
.stats__label { font-size:20px; color:var(--color-gray-400); }

/* Profile photo */
.about__image-wrap { width:calc(100% - 94px); max-width:1345px; height:604px; margin:48px auto 0; border-radius:var(--radius-lg); overflow:hidden; }
.about__image { width:100%; height:100%; object-fit:cover; object-position:center top; }

/* ── ADVANTAGE ── */
.advantage { position:relative; overflow:hidden; background:#000; padding:8px 0 0; }
.advantage__video-wrap {
  position:absolute; left:0; right:0; bottom:0; height:42%; min-height:200px;
  overflow:hidden; z-index:0; pointer-events:none;
  mask-image:linear-gradient(to bottom,transparent,#000 35%,#000);
}
.advantage__video-wrap .section-video-bg {
  position:absolute; left:50%; bottom:0; width:120%; height:140%;
  transform:translateX(-50%); object-fit:cover; object-position:center bottom;
}
.advantage__inner {
  display:grid; grid-template-columns:minmax(300px,.95fr) minmax(300px,1.05fr);
  gap:clamp(32px,6vw,72px); align-items:center;
  position:relative; z-index:1; padding-top:40px; padding-bottom:160px;
}
/* Tags area */
.advantage__tags-area { position:relative; min-height:280px; display:flex; align-items:flex-end; }
.advantage__tags-pile {
  position:relative; width:380px; height:280px;
  background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:18px 18px; background-position:left bottom;
  overflow:visible;
}
.advantage__tag {
  position:absolute; padding:9px 22px;
  border:1.5px solid rgba(255,255,255,.85); border-radius:var(--radius-pill);
  background:#000; color:#fff; font-size:14px; font-weight:600;
  white-space:nowrap; cursor:grab; user-select:none; touch-action:none;
  box-shadow:none; filter:none; backdrop-filter:none;
  transform-origin:center center; will-change:transform;
}
.advantage__tag--sm { padding:6px 13px; font-size:12px; }
.advantage__tag--lg { padding:10px 26px; font-size:15px; }
.advantage__tag.is-dragging { cursor:grabbing; z-index:9999; }
.advantage__tag-placeholder { position:absolute; visibility:hidden; pointer-events:none; }
.advantage__tag-line {
  position:absolute; bottom:0; left:0; width:92%; height:1.5px;
  background:linear-gradient(to right,#41b362,#22d3ee 20%,#818cf8 45%,#e879f9 70%,#f87171);
  pointer-events:none; z-index:0;
}
/* Right side text */
.advantage__heading { font-size:clamp(40px, 5vw, 64px); font-weight:600; line-height:1.15; margin-bottom:12px; }
.advantage__text { font-size:18px; line-height:1.5; color:var(--color-gray-400); max-width:539px; }

/* ── SERVICES ── */
.services { position:relative; }
.services::before,.services::after { content:""; position:absolute; width:450px; height:450px; border-radius:50%; background:var(--color-green); filter:blur(140px); opacity:.15; pointer-events:none; z-index:0; }
.services::before { left:-200px; top:-100px; }
.services::after  { right:-200px; bottom:-100px; }
.services__inner  { display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(40px,6vw,80px); align-items:start; position:relative; z-index:1; }
.services__heading { font-size:clamp(40px, 5vw, 64px); font-weight:600; line-height:1.15; margin-bottom:12px; }
.services__lead    { font-size:18px; line-height:1.5; color:var(--color-gray-400); max-width:395px; }
.services__list    { display:flex; flex-direction:column; }
.services__item {
  display:grid; grid-template-columns:56px minmax(160px,220px) 1fr;
  align-items:center; gap:0 28px; padding:36px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative; transition:transform .35s ease;
}
.services__item:hover { z-index:2; }
.services__item:has(~.services__item:hover) { transform:translateY(-20px); }
.services__num { position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:13px; color:var(--color-gray-500); transition:opacity .25s ease; }
.services__hover-img { position:absolute; left:-100px; bottom:36px; width:155px; height:184px; object-fit:cover; opacity:0; visibility:hidden; z-index:5; pointer-events:none; transition:opacity .25s ease,visibility .25s ease; }
.services__item:hover .services__hover-img { opacity:1; visibility:visible; }
.services__item:hover .services__num { opacity:0; }
.services__title { font-size:17px; font-weight:600; }
.services__desc  { font-size:14px; line-height:1.7; color:var(--color-gray-400); }

/* ── LATEST PROJECTS ── */
.portfolio { position:relative; }
.portfolio::before { content:""; position:absolute; width:400px; height:400px; border-radius:50%; background:var(--color-green); filter:blur(140px); opacity:.12; left:-200px; top:30%; pointer-events:none; z-index:0; }
.portfolio .container { position:relative; z-index:1; }
.portfolio__header { margin-bottom:48px; }
.portfolio__title { font-size:clamp(40px, 5vw, 64px); font-weight:600; line-height:1.15; margin-bottom:12px; }
.portfolio__lead  { font-size:18px; line-height:1.5; color:var(--color-gray-400); max-width:523px; }
.portfolio__grid  { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:48px; }
.portfolio-card {
  position:relative; border-radius:28px; overflow:hidden;
  background:linear-gradient(180deg,#0c100d,#16281c);
  border:1px solid rgba(255,255,255,.08); padding:16px;
  transition:transform var(--transition),border-color var(--transition);
}
.portfolio-card > a { display:block; color:inherit; }
.portfolio-card:hover { transform:translateY(-4px); border-color:rgba(65,179,98,.35); }
.portfolio-card__image-wrap { position:relative; overflow:hidden; border-radius:16px; }
.portfolio-card__image { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px; display:block; }
.portfolio-card__overlay {
  position:absolute; inset:0; padding:24px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%);
  opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease;
}
.portfolio-card:hover .portfolio-card__overlay { opacity:1; visibility:visible; }
.portfolio-card__overlay-title    { font-size:20px; font-weight:700; margin:0 0 6px; }
.portfolio-card__overlay-category { font-size:13px; color:var(--color-gray-400); margin:0; }
.portfolio__more { text-align:center; }

/* ── EXPERIENCE ── */
.experience { position:relative; }
.experience::before,.experience::after { content:""; position:absolute; width:450px; height:450px; border-radius:50%; background:var(--color-green); filter:blur(140px); opacity:.12; pointer-events:none; z-index:0; }
.experience::before { right:-220px; top:-100px; }
.experience::after  { left:-220px; bottom:-100px; }
.experience .container { position:relative; z-index:1; }
.experience__header { text-align:center; margin-bottom:56px; }
.experience__title  { font-size:clamp(40px, 5vw, 64px); font-weight:600; line-height:1.15; margin-bottom:12px; }
.experience__lead   { font-size:18px; line-height:1.5; color:var(--color-gray-400); max-width:561px; margin:0 auto; }
.experience__grid   { display:grid; grid-template-columns:repeat(2,1fr); gap:0 80px; }
.experience__col    { display:flex; flex-direction:column; }
.experience__row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 0;
  background-image:linear-gradient(to right,rgba(255,255,255,.35) 50%,transparent 50%);
  background-position:bottom; background-size:8px 1.5px; background-repeat:repeat-x;
}
.experience__role     { font-size:22px; font-weight:600; flex:1; }
.experience__logo-wrap{ flex:0 0 48px; display:flex; justify-content:center; align-items:center; }
.experience__date     { font-size:18px; color:var(--color-gray-400); flex:0 0 auto; text-align:right; }

/* ── TESTIMONIALS ── */
.testimonials { position:relative; }
.testimonials::before { content:""; position:absolute; width:400px; height:400px; border-radius:50%; background:var(--color-green); filter:blur(140px); opacity:.12; left:-200px; top:20%; pointer-events:none; z-index:0; }
.testimonials .container { position:relative; z-index:1; }
.testimonials__header { text-align:center; margin-bottom:56px; }
.testimonials__title  { font-size:clamp(40px, 5vw, 64px); font-weight:600; line-height:1.15; margin-bottom:12px; }
.testimonials__lead   { font-size:18px; line-height:1.5; color:var(--color-gray-400); max-width:561px; margin:0 auto; }
.testimonials__grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.testimonial-card {
  background:
    linear-gradient(180deg,transparent,rgba(157,228,178,.2)),
    linear-gradient(90deg,rgba(72,72,72,.2),rgba(72,72,72,.2)),
    var(--color-bg);
  border:1px solid #1a1a1a; border-radius:var(--radius-card);
  padding:28px 29px; min-height:223px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:19px;
  box-shadow:0 9px 9.5px rgba(0,0,0,.06),0 35px 17.5px rgba(0,0,0,.05);
}
.testimonial-card__stars  { color:var(--color-gold); font-size:15px; letter-spacing:2px; display:flex; gap:8px; }
.testimonial-card__text   { font-size:16px; line-height:1.5; flex:1; }
.testimonial-card__author { font-size:18px; font-weight:500; }

/* ── CONTACT ── */
.contact { position:relative; overflow:hidden; }
.contact__inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:1; }
.contact__title { font-size:clamp(40px, 5vw, 64px); font-weight:600; line-height:1.15; margin-bottom:12px; }
.contact__lead  { font-size:18px; line-height:1.5; color:var(--color-gray-400); max-width:400px; }
.section-video-bg { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:.5; z-index:0; pointer-events:none; }
.contact__form { background:rgba(13,18,14,.85); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-card); padding:40px; }
.form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.form-group label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-gray-400); }
.form-group input,.form-group textarea { font-family:var(--font-family); font-size:14px; padding:16px; background:#000; border:1px solid rgba(255,255,255,.08); border-radius:12px; color:#fff; outline:none; resize:vertical; transition:border-color var(--transition); }
.form-group input:focus,.form-group textarea:focus { border-color:rgba(65,179,98,.4); }
.form-status { margin-top:12px; font-size:13px; text-align:center; color:var(--color-green); }

/* ── FOOTER ── */
.footer { position:relative; min-height:420px; padding:80px 0 40px; overflow:hidden; border-top:1px solid rgba(255,255,255,.06); background:url('../images/footer_bg.png') center bottom/cover no-repeat; }
.footer__inner { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; height:100%; }
.footer__top    { display:flex; justify-content:space-between; align-items:flex-start; width:100%; }
.footer__nav    { display:flex; flex-direction:column; gap:16px; }
.footer__nav a  { font-size:15px; font-weight:500; transition:color var(--transition); }
.footer__nav a:hover { color:var(--color-green); }
.footer__subscribe { max-width:320px; width:100%; }
.subscribe-form { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.subscribe-form label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-gray-400); }
.subscribe-form input { width:100%; font-family:var(--font-family); font-size:14px; padding:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; color:#fff; outline:none; }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; width:100%; padding-top:24px; border-top:1px solid rgba(255,255,255,.35); }
.footer__copy   { font-size:13px; margin:0; }
.footer__socials{ display:flex; gap:24px; }
.footer__socials a { font-size:13px; transition:color var(--transition); }
.footer__socials a:hover { color:var(--color-green); }

/* ─────────────── RESPONSIVE ─────────────── */
@media(max-width:1200px) {
  .container { padding:0 48px; }
  .navbar { padding:18px 40px 0; }
  .hero__title { font-size:clamp(40px, 5vw, 64px); }
  .services__heading,.portfolio__title,.advantage__heading,
  .experience__title,.testimonials__title,.contact__title { font-size:clamp(40px,5vw,72px); }
  .stats__number { font-size:clamp(52px,7vw,84px); }
  .about__image-wrap { height:auto; min-height:400px; }
}

@media (max-height: 760px) and (min-width: 769px) {
  .hero__content { padding: 16px 24px 12px; gap: 12px; }
  .hero__title { font-size: clamp(36px, 5.4vh, 52px); }
  .hero__subtitle { font-size: 15px; }
}

@media(max-width:900px) {
  .container { padding:0 32px; }
  .services__inner  { grid-template-columns:1fr; gap:40px; }
  .contact__inner   { grid-template-columns:1fr; gap:40px; }
  .testimonials__grid { grid-template-columns:1fr 1fr; gap:20px; }
  .portfolio__grid  { grid-template-columns:1fr; }
  .advantage__inner { grid-template-columns:1fr; padding-bottom:120px; }
  .advantage__content { order:1; }
  .advantage__tags-area { order:2; min-height:260px; }
  .advantage__tags-pile { width:100%; max-width:420px; }
  .about__intro     { grid-template-columns:1fr; gap:16px; }
  .about__label     { padding-top:0; }
  .services__item   { transform:none!important; }
  .services__hover-img { display:none; }
  .experience__grid { grid-template-columns:1fr; gap:0; }
  .footer           { height:auto; min-height:0; }
  .footer__top      { flex-direction:column; align-items:center; gap:40px; text-align:center; }
  .footer__nav      { align-items:center; }
  .footer__subscribe{ margin:0 auto; }
  .subscribe-form   { align-items:center; }
  .footer__bottom   { flex-direction:column; gap:16px; text-align:center; }
}

@media(max-width:768px) {
  .container { padding:0 24px; }
  .section   { padding:64px 0; }

  /* Navbar mobile: brand left, hamburger right */
  .navbar { grid-template-columns:1fr auto; padding:16px 24px; }
  .navbar__links { display:none; }
  .navbar__brand { grid-column:1; justify-self:start; }
  .navbar__name  { font-size:22px; }
  .navbar__avatar{ width:36px; height:36px; }
  .navbar__actions { grid-column:2; justify-self:end; }
  .btn--nav-contact { display:none; }
  .navbar__menu-btn { display:flex; }
  .navbar__divider  { width:calc(100% - 48px); }

  /* Hero */
  .hero { height:auto; max-height:none; overflow:visible; }
  .hero__content { padding: 28px 16px 16px; gap: 14px; justify-content:flex-start; }
  .hero__title { font-size:clamp(32px,9vw,48px); line-height:1.2; }
  .hero__subtitle { font-size:16px; max-width:100%; }
  .hero__badge-text { font-size:15px; }
  .hero__actions { flex-wrap:wrap; width:auto; max-width:none; gap:12px; justify-content:center; margin:0; }
  .hero__actions .btn { width:auto; }
  .hero__skills { padding:6px 24px; justify-content:flex-start; }
  .hero__skills-wrapper { margin:0; }
  .hero__carousel-wrapper { height:auto; overflow:hidden; padding-bottom:16px; }

  /* Carousel */
  .project-card {
    flex:0 0 min(86vw, 680px);
    width:min(86vw, 680px);
  }
  .hero__carousel { padding:0 0 8px; }
  .hero__carousel-track { gap:16px; }

  /* About */
  .about__line { font-size:clamp(20px,5.5vw,28px); }
  .about__image-wrap { width:calc(100% - 48px); height:auto; min-height:260px; }

  .stats { grid-template-columns:1fr; }
  .stats__number { font-size:56px; }
  .stats__label  { font-size:17px; }
  .stats__item   { padding:32px 20px; min-height:auto; }

  /* Advantage */
  .advantage__heading { font-size:clamp(32px,8vw,48px); }
  .advantage__tags-pile { width:100%; max-width:340px; height:260px; }

  /* Sections */
  .services__heading,.portfolio__title,.experience__title,
  .testimonials__title,.contact__title { font-size:clamp(32px,8vw,48px); }
  .services__item {
    grid-template-columns:40px 1fr;
    grid-template-rows:auto auto;
    align-items:start;
    gap:4px 16px;
  }
  .services__num-col { grid-row:1 / -1; }
  .services__title { grid-column:2; padding-top:4px; }
  .services__desc { grid-column:2; display:block; }

  /* Experience */
  .experience__role { font-size:17px; }
  .experience__date { font-size:14px; }

  /* Testimonials */
  .testimonials__grid { grid-template-columns:1fr; }

  /* Contact */
  .contact__form { padding:24px 20px; }

  /* Footer */
  .footer { height:auto; min-height:auto; padding:60px 0 32px; }
  .footer__inner { gap:40px; justify-content:flex-start; }
}

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