:root {

  --bg: #070708;

  --panel: #0c0c10;

  --panel2: #0f0f15;

  --text: #f3f4f6;

  --muted: #a7aab3;

  --muted2: #7b7f8a;

  --line: rgba(255, 255, 255, .09);



  /* ORIGINAL ACCENT (YELLOW/GOLD) */

  --accent: #f6c30d;

  --accent2: #ffda3d;



  --shadow: 0 24px 70px rgba(0, 0, 0, .55);

  --shadow2: 0 10px 30px rgba(0, 0, 0, .45);

  --radius: 22px;

  --radius2: 16px;

  --max: 1180px;

  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

}



* {

  box-sizing: border-box

}



html {

  scroll-behavior: smooth

}



body {

  margin: 0;

  font-family: var(--font);

  background: radial-gradient(1000px 500px at 12% -10%, rgba(246, 195, 13, .16), transparent 55%),

    radial-gradient(900px 450px at 100% 30%, rgba(246, 195, 13, .10), transparent 50%),

    var(--bg);

  color: var(--text);

  overflow-x: hidden;

}



a {

  color: inherit;

  text-decoration: none

}



button,

input,

select,

textarea {

  font-family: inherit

}



.container {

  width: min(var(--max), calc(100% - 40px));

  margin: 0 auto

}



/* Scrollbar indicator */

.scrollbar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  z-index: 9999;

  background: rgba(255, 255, 255, .06);

}



.scrollbar>span {

  display: block;

  height: 100%;

  width: 0%;

  background: linear-gradient(90deg, var(--accent), var(--accent2));

}



/* Header */

.header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(7, 7, 8, .65);

  backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255, 255, 255, .08);

}



.header__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 0;

  gap: 14px;

}



.brand {

  display: flex;

  align-items: center;

  gap: 10px

}



.brand__mark {

  width: 10px;

  height: 10px;

  border-radius: 999px;

  background: linear-gradient(180deg, var(--accent), var(--accent2));

  box-shadow: 0 0 0 6px rgba(246, 195, 13, .12);

}



.brand__name {

  font-weight: 700;

  letter-spacing: .2px

}



/* Nav */

.nav {

  display: flex;

  align-items: center;

  gap: 16px;

  position: relative

}



.nav__toggle {

  display: none;

  width: 44px;

  height: 44px;

  border: 1px solid var(--line);

  background: rgba(255, 255, 255, .03);

  border-radius: 12px;

  cursor: pointer;

}



.nav__bars {

  width: 18px;

  height: 2px;

  background: var(--text);

  display: block;

  margin: 0 auto;

  position: relative;

}



.nav__bars:before,

.nav__bars:after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  height: 2px;

  background: var(--text);

}



.nav__bars:before {

  top: -6px

}



.nav__bars:after {

  top: 6px

}



.nav__list {

  display: flex;

  align-items: center;

  gap: 18px;

  list-style: none;

  padding: 0;

  margin: 0;

}



.nav__link {

  font-size: 13px;

  color: var(--muted);

  padding: 10px 10px;

  border-radius: 12px;

  transition: all .18s ease;

}



.nav__link:hover {

  color: var(--text);

  background: rgba(255, 255, 255, .04);

}



.header__cta {

  display: flex;

  gap: 10px;

  align-items: center

}



/* Buttons */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border-radius: 14px;

  padding: 12px 14px;

  border: 1px solid var(--line);

  background: rgba(255, 255, 255, .03);

  color: var(--text);

  font-weight: 600;

  font-size: 13px;

  cursor: pointer;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;

  user-select: none;

}



.btn:hover {

  transform: translateY(-1px);

  background: rgba(255, 255, 255, .05);

  border-color: rgba(255, 255, 255, .14)

}



.btn--primary {

  background: linear-gradient(180deg, var(--accent), var(--accent2));

  border-color: rgba(0, 0, 0, .25);

  color: #101010;

}



.btn--primary:hover {

  background: linear-gradient(180deg, var(--accent2), var(--accent))

}



.btn--ghost {

  background: rgba(255, 255, 255, .02)

}



.btn--full {

  width: 100%

}



.btn__icon {

  font-weight: 800

}



/* Hero */

.hero {

  position: relative;

  padding: 56px 0 26px

}



.hero__bg {

  position: absolute;

  inset: 0;

  pointer-events: none

}



.hero__glow {

  position: absolute;

  inset: -200px -200px auto -200px;

  height: 540px;

  background: radial-gradient(closest-side, rgba(246, 195, 13, .23), transparent 70%);

  filter: blur(6px);

}



.hero__noise {

  position: absolute;

  inset: 0;

  opacity: .06;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");

  mix-blend-mode: overlay;

}



.hero__grid {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0/60px 60px,

    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0/60px 60px;

  mask-image: radial-gradient(circle at 25% 5%, #000 0 35%, transparent 65%);

  opacity: .25;

}



.hero__inner {

  position: relative;

  display: grid;

  grid-template-columns: 1.2fr .8fr;

  gap: 28px;

  align-items: stretch;

}



.pill {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: rgba(255, 255, 255, .03);

  color: var(--muted);

  font-size: 12px;

}



.pill__dot {

  width: 8px;

  height: 8px;

  border-radius: 999px;

  background: var(--accent);

  box-shadow: 0 0 0 6px rgba(246, 195, 13, .12);

}



.hero__title {

  margin: 18px 0 10px;

  line-height: 1

}



.hero__name {

  display: block;

  font-size: clamp(42px, 5.4vw, 78px);

  letter-spacing: .8px;

  font-weight: 800;

}



.hero__role {

  display: block;

  margin-top: 10px;

  color: var(--muted);

  font-weight: 600;

  letter-spacing: .2px;

}



.hero__desc {

  margin: 0;

  margin-top: 16px;

  max-width: 62ch;

  color: var(--muted);

  line-height: 1.7;

}



.hero__actions {

  display: flex;

  gap: 12px;

  margin-top: 22px;

  flex-wrap: wrap

}



.hero__meta {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-top: 26px;

}



.metaCard {

  padding: 14px;

  border: 1px solid var(--line);

  border-radius: 16px;

  background: rgba(255, 255, 255, .03);

  box-shadow: var(--shadow2);

}



.metaCard__kpi {

  font-weight: 800;

  font-size: 18px

}



.metaCard__label {

  color: var(--muted2);

  font-size: 12px;

  margin-top: 4px

}



/* === Professional Portrait Card (Hero Right) === */

/* === Minimal Hero Portrait === */



.portraitCard--minimal {

  border-radius: 28px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, .10);

  background: rgba(255, 255, 255, .02);

  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);

}



.portraitWrap--full {

  position: relative;

  height: 530px;

  /* fills hero section */

}



.portraitWrap--full img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  filter: contrast(1.05) saturate(1.05);

}



/* Subtle gradient fade at bottom */

.portraitOverlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(to top, rgba(0, 0, 0, .65), transparent 45%),

    radial-gradient(circle at 70% 20%, rgba(246, 195, 13, .20), transparent 60%);

  pointer-events: none;

}



/* Minimal caption */

.portraitCaption {

  position: absolute;

  bottom: 24px;

  left: 24px;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: .5px;

  color: var(--text);

}



/* Strip */

.strip {

  padding: 18px 0 22px

}



.strip__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  border: 1px solid rgba(255, 255, 255, .08);

  background: rgba(255, 255, 255, .02);

  border-radius: var(--radius);

  padding: 14px 16px;

}



.strip__label {

  color: var(--muted);

  font-size: 12px

}



.strip__logos {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  justify-content: flex-end

}



.logoChip {

  padding: 8px 10px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, .10);

  color: var(--muted);

  font-size: 12px;

  background: rgba(255, 255, 255, .02);

}



/* Sections */

.section {

  padding: 64px 0

}



.sectionHead {

  max-width: 72ch

}



.sectionHead--row {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 18px;

  flex-wrap: wrap

}



.sectionHead__kicker {

  color: var(--accent);

  font-weight: 700;

  letter-spacing: .18em;

  text-transform: uppercase;

  font-size: 12px;

  margin: 0 0 10px;

}



.sectionHead__title {

  margin: 0;

  font-size: clamp(26px, 3vw, 40px);

  letter-spacing: .2px;

}



.sectionHead__desc {

  margin: 10px 0 0;

  color: var(--muted);

  line-height: 1.7

}



/* Cards & grids */

.aboutGrid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

  margin-top: 22px;

}



.card {

  border: 1px solid rgba(255, 255, 255, .10);

  border-radius: var(--radius);

  background: rgba(255, 255, 255, .02);

  padding: 18px;

  box-shadow: var(--shadow2);

}



.card--soft {

  background: rgba(255, 255, 255, .03)

}



.card--highlight {

  background: radial-gradient(900px 300px at 10% 0%, rgba(246, 195, 13, .18), transparent 40%),

    rgba(255, 255, 255, .03);

  border-color: rgba(246, 195, 13, .20);

}



.card__title {

  margin: 0 0 12px;

  font-size: 16px;

  font-weight: 800

}



.list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 10px

}



.bullet {

  width: 10px;

  height: 10px;

  border-radius: 3px;

  background: rgba(246, 195, 13, .9);

  display: inline-block;

  margin-right: 10px;

}



.list li {

  color: var(--muted);

  line-height: 1.6;

  display: flex;

  align-items: flex-start

}



.list li .bullet {

  margin-top: 6px

}



.kpis {

  display: grid;

  gap: 12px

}



.kpi {

  border: 1px solid rgba(255, 255, 255, .08);

  background: rgba(0, 0, 0, .18);

  padding: 14px;

  border-radius: 18px

}



.kpi__v {

  font-weight: 900;

  font-size: 16px

}



.kpi__t {

  margin-top: 6px;

  font-weight: 800

}



.kpi__d {

  margin-top: 6px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.6

}



/* Services */

.services {

  display: grid;

  grid-template-columns: 1fr;

  gap: 12px;

  margin-top: 22px;

}



.serviceCard {

  width: 100%;

  text-align: left;

  border-radius: var(--radius);

  border: 1px solid rgba(255, 255, 255, .10);

  background: rgba(255, 255, 255, .02);

  padding: 16px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  cursor: pointer;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;

}



.serviceCard:hover {

  transform: translateY(-1px);

  background: rgba(255, 255, 255, .04);

  border-color: rgba(255, 255, 255, .16)

}



.serviceCard__kicker {

  display: block;

  color: var(--muted2);

  font-size: 12px;

  margin-bottom: 6px

}



.serviceCard__title {

  display: block;

  font-weight: 900;

  font-size: 16px;

  color: var(--text)

}



.serviceCard__arrow {

  width: 40px;

  height: 40px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, .10);

  display: grid;

  place-items: center;

  color: var(--muted);

  background: rgba(255, 255, 255, .02);

}



.serviceCard--featured {

  position: relative;

  display: grid;

  grid-template-columns: 1.4fr .6fr;

  align-items: stretch;

  gap: 14px;

  padding: 18px;

  background: radial-gradient(900px 420px at 100% 50%, rgba(246, 195, 13, .22), transparent 45%),

    rgba(255, 255, 255, .03);

}



.serviceCard__desc {

  margin-top: 10px;

  color: var(--muted);

  line-height: 1.65;

  max-width: 60ch

}



.serviceCard__bullets {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 12px

}



.chip {

  font-size: 11px;

  padding: 7px 10px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, .10);

  background: rgba(255, 255, 255, .02);

  color: var(--muted);

}



.chip--soft {

  background: rgba(255, 255, 255, .03);

  color: var(--text)

}



.serviceCard__art {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center

}



.mockPhone {

  width: 92px;

  height: 150px;

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, .10);

  background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .03));

  transform: rotate(-8deg);

  box-shadow: var(--shadow2);

}



.mockCard {

  position: absolute;

  width: 120px;

  height: 86px;

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, .10);

  background: linear-gradient(180deg, rgba(246, 195, 13, .22), rgba(255, 255, 255, .02));

  transform: translate(28px, 26px) rotate(10deg);

  box-shadow: var(--shadow2);

}



.serviceCard__badge {

  position: absolute;

  top: 14px;

  right: 14px;

  background: rgba(246, 195, 13, .16);

  border: 1px solid rgba(246, 195, 13, .25);

  color: var(--accent2);

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 700;

}



/* Projects */

.filters {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 18px

}



.filter {

  padding: 10px 12px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, .10);

  background: rgba(255, 255, 255, .02);

  color: var(--muted);

  cursor: pointer;

  font-weight: 600;

  font-size: 12px;

}



.filter.is-active {

  background: rgba(246, 195, 13, .14);

  border-color: rgba(246, 195, 13, .25);

  color: var(--text)

}



.projectsGrid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

  margin-top: 18px;

}



.project {

  border-radius: var(--radius);

  border: 1px solid rgba(255, 255, 255, .10);

  background: rgba(255, 255, 255, .02);

  overflow: hidden;

  box-shadow: var(--shadow2);

  cursor: pointer;

  transition: transform .15s ease, border-color .15s ease, background .15s ease;

}



.project:hover {

  transform: translateY(-2px);

  border-color: rgba(255, 255, 255, .16);

  background: rgba(255, 255, 255, .03)

}



.project__thumb {

  height: 160px;

  background:

    radial-gradient(800px 220px at 10% 0%, rgba(246, 195, 13, .22), transparent 45%),

    linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .15));

  border-bottom: 1px solid rgba(255, 255, 255, .08);

  position: relative;

}



.project__thumb:after {

  content: "";

  position: absolute;

  inset: 16px;

  border-radius: 18px;

  border: 1px dashed rgba(255, 255, 255, .18);

  opacity: .5;

}



.project__body {

  padding: 14px 14px 16px

}



.project__top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px

}



.badge {

  font-size: 11px;

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, .10);

  background: rgba(255, 255, 255, .02);

  color: var(--muted);

}



.project__title {

  margin: 12px 0 6px;

  font-weight: 900

}



.project__desc {

  margin: 0;

  color: var(--muted);

  line-height: 1.6;

  font-size: 13px

}



.project__meta {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: 12px

}



/* Contact */

.contactGrid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  align-items: start;

}



.contactCard {

  border-radius: var(--radius);

  border: 1px solid rgba(255, 255, 255, .10);

  background: radial-gradient(900px 360px at 10% 0%, rgba(246, 195, 13, .18), transparent 45%),

    rgba(255, 255, 255, .02);

  padding: 18px;

  box-shadow: var(--shadow2);

}



.contactCard__title {

  margin: 0;

  margin-top: 6px;

  font-size: clamp(22px, 2.5vw, 34px);

  font-weight: 900

}



.contactCard__desc {

  margin: 12px 0 0;

  color: var(--muted);

  line-height: 1.7

}



.contactInfo {

  margin-top: 18px;

  display: grid;

  gap: 10px

}



.contactLink {

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, .10);

  background: rgba(255, 255, 255, .02);

  padding: 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.contactLink__label {

  color: var(--muted2);

  font-size: 12px

}



.contactLink__value {

  font-weight: 700;

  font-size: 13px

}



.contactBadges {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 16px

}



.form {

  border-radius: var(--radius);

  border: 1px solid rgba(255, 255, 255, .10);

  background: rgba(255, 255, 255, .02);

  padding: 18px;

  box-shadow: var(--shadow2);

}



.formRow {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px

}



.field {

  display: grid;

  gap: 8px;

  margin-bottom: 12px

}



.field__label {

  color: var(--muted2);

  font-size: 12px

}



.field__input {

  width: 100%;

  padding: 12px 12px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, .10);

  background: rgba(0, 0, 0, .22);

  color: var(--text);

  outline: none;

}



.field__input:focus {

  border-color: rgba(246, 195, 13, .40);

  box-shadow: 0 0 0 6px rgba(246, 195, 13, .10);

}



.field__input--area {

  resize: vertical;

  min-height: 140px

}



.form__fineprint {

  margin: 10px 0 0;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.6

}



/* Footer */

.footer {

  padding: 24px 0 34px;

  border-top: 1px solid rgba(255, 255, 255, .08)

}



.footer__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  flex-wrap: wrap

}



.footer__copy {

  margin: 10px 0 0;

  color: var(--muted);

  font-size: 12px

}



.footer__right {

  display: flex;

  gap: 14px

}



.footer__link {

  color: var(--muted);

  font-size: 13px

}



.footer__link:hover {

  color: var(--text)

}



/* Modal */

.modal {

  position: fixed;

  inset: 0;

  display: none;

  z-index: 2000

}



.modal.is-open {

  display: block

}



.modal__overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, .68);

  backdrop-filter: blur(10px)

}



.modal__panel {

  position: relative;

  margin: 80px auto;

  width: min(720px, calc(100% - 32px));

  border-radius: var(--radius);

  border: 1px solid rgba(255, 255, 255, .12);

  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));

  box-shadow: var(--shadow);

  padding: 18px;

}



.modal__panel--wide {

  width: min(980px, calc(100% - 32px))

}



.modal__close {

  position: absolute;

  top: 12px;

  right: 12px

}



.iconBtn {

  width: 42px;

  height: 42px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, .12);

  background: rgba(255, 255, 255, .03);

  color: var(--text);

  cursor: pointer;

}



.iconBtn:hover {

  background: rgba(255, 255, 255, .06)

}



.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0

}



.modalContent h3 {

  margin: 0 0 8px;

  font-weight: 900

}



.modalContent p {

  color: var(--muted);

  line-height: 1.7;

  margin: 0 0 12px

}



.modalContent .grid2 {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px

}



.modalContent .box {

  border: 1px solid rgba(255, 255, 255, .10);

  border-radius: 18px;

  background: rgba(0, 0, 0, .20);

  padding: 14px;

}



.modalContent .box h4 {

  margin: 0 0 8px;

  font-size: 13px;

  letter-spacing: .02em

}



.modalContent .box ul {

  margin: 0;

  padding-left: 18px;

  color: var(--muted);

  line-height: 1.7;

  font-size: 13px

}



@media (max-width: 980px) {

  .hero__inner {

    grid-template-columns: 1fr

  }



  .header__cta {

    display: none

  }



  .aboutGrid {

    grid-template-columns: 1fr

  }



  .projectsGrid {

    grid-template-columns: repeat(2, minmax(0, 1fr))

  }



  .contactGrid {

    grid-template-columns: 1fr

  }



  .formRow {

    grid-template-columns: 1fr

  }



  .serviceCard--featured {

    grid-template-columns: 1fr

  }



  .portraitWrap {

    height: 320px

  }

}



@media (max-width: 760px) {

  .nav__toggle {

    display: inline-grid;

    place-items: center

  }



  .nav__list {

    position: absolute;

    right: 20px;

    top: 64px;

    width: min(320px, calc(100% - 40px));

    flex-direction: column;

    align-items: stretch;

    gap: 6px;

    padding: 10px;

    border-radius: 18px;

    border: 1px solid rgba(255, 255, 255, .12);

    background: rgba(7, 7, 8, .88);

    backdrop-filter: blur(14px);

    display: none;

  }



  .nav__list.is-open {

    display: flex

  }



  .nav__link {

    padding: 12px

  }



  .projectsGrid {

    grid-template-columns: 1fr

  }

}



/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {

  * {

    scroll-behavior: auto

  }



  .btn,

  .serviceCard,

  .project {

    transition: none

  }

}