/* =========================================================
   DESIGN SYSTEM
========================================================= */

:root {

  --background: #08050c;

  --background-soft: #0e0813;

  --panel: rgba(25, 12, 33, 0.76);

  --panel-light: rgba(39, 18, 51, 0.68);

  --purple-dark: #321041;

  --purple: #6a2c82;

  --purple-light: #9349b1;

  --purple-bright: #be72d9;

  --lavender: #e1c8eb;

  --violet: #7666ff;

  --white: #faf6fc;

  --text: #e9dce9;

  --muted: #a08fa4;

  --muted-dark: #776b7b;

  --border: rgba(208, 143, 229, 0.15);

  --border-strong:
    rgba(208, 143, 229, 0.30);

  --shadow:
    0 35px 100px rgba(0, 0, 0, 0.42);

  --radius-lg: 28px;

  --radius-md: 18px;

}



/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  font-family: "DM Sans", sans-serif;

  color: var(--text);

  background:

    radial-gradient(
      circle at 12% 5%,
      rgba(119, 46, 156, 0.18),
      transparent 27%
    ),

    radial-gradient(
      circle at 90% 18%,
      rgba(103, 82, 255, 0.09),
      transparent 30%
    ),

    var(--background);

  line-height: 1.65;

  overflow-x: hidden;

}


body::-webkit-scrollbar {
  width: 8px;
}


body::-webkit-scrollbar-track {
  background: var(--background);
}


body::-webkit-scrollbar-thumb {
  background: #442150;
  border-radius: 99px;
}


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


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


button {
  font: inherit;
}



/* =========================================================
   BACKGROUND
========================================================= */

.grid-background {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: -5;

  opacity: 0.14;

  background-image:

    linear-gradient(
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      black 10%,
      transparent 90%
    );

}


.ambient {

  position: fixed;

  pointer-events: none;

  border-radius: 50%;

  filter: blur(120px);

  z-index: -4;

}


.ambient-one {

  width: 520px;

  height: 520px;

  left: -250px;

  top: 50px;

  background:
    rgba(119, 49, 155, 0.19);

}


.ambient-two {

  width: 480px;

  height: 480px;

  right: -250px;

  top: 35%;

  background:
    rgba(96, 58, 180, 0.11);

}


.ambient-three {

  width: 430px;

  height: 430px;

  left: 30%;

  bottom: -300px;

  background:
    rgba(181, 74, 214, 0.08);

}



/* =========================================================
   HEADER
========================================================= */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  padding:
    14px 4%;

  z-index: 1000;

}


.navbar {

  max-width: 1380px;

  margin: auto;

  padding:
    14px 20px;

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

  border-radius:
    20px;

  background:
    rgba(10, 5, 14, 0.76);

  backdrop-filter:
    blur(24px);

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.brand {

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 18px;

  font-weight: 700;

  letter-spacing:
    -0.05em;

}


.brand span {

  color:
    var(--purple-bright);

}


.nav-links {

  display: flex;

  list-style: none;

  align-items: center;

  gap: 25px;

}


.nav-links a {

  font-size: 12px;

  color:
    #b7a7ba;

  transition:
    color .25s ease;

}


.nav-links a:hover {

  color:
    white;

}


.menu-toggle {

  display: none;

  border: 0;

  background: transparent;

  cursor: pointer;

}


.menu-toggle span {

  display: block;

  width: 24px;

  height: 2px;

  margin: 5px;

  background:
    white;

}



/* =========================================================
   HERO
========================================================= */

.hero {

  min-height: 100vh;

  max-width: 1380px;

  margin: auto;

  padding:
    160px 5% 120px;

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items: center;

  gap: 70px;

}


.availability {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    7px 11px;

  border:
    1px solid
    rgba(187,111,215,.18);

  border-radius:
    999px;

  background:
    rgba(116,45,145,.08);

  color:
    #c7a7d2;

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    .14em;

}


.availability-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    #bc71d7;

  box-shadow:
    0 0 16px
    rgba(188,113,215,.8);

}


.hero-eyebrow {

  margin-top: 25px;

  color:
    var(--purple-bright);

  font-size: 10px;

  font-weight: 800;

  letter-spacing:
    .18em;

}


.hero-eyebrow span {

  opacity:
    .45;

  padding:
    0 4px;

}


.hero h1 {

  margin-top: 20px;

  max-width: 830px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(52px, 7vw, 96px);

  line-height:
    .92;

  letter-spacing:
    -.075em;

}


.hero h1 span {

  display: block;

  color: transparent;

  background:

    linear-gradient(
      100deg,
      #e1c1ec,
      #a954c8 58%,
      #7566ff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

}


.hero-position {

  margin-top: 27px;

  font-size: 17px;

  font-weight:
    600;

  color:
    #d9c7dd;

}


.hero-description {

  max-width: 660px;

  margin-top: 15px;

  font-size: 15px;

  color:
    var(--muted);

}


.hero-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;

}


.button {

  min-height: 48px;

  padding:
    0 19px;

  border-radius:
    12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size: 11px;

  font-weight: 700;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border .25s ease;

}


.button:hover {

  transform:
    translateY(-3px);

}


.button-primary {

  background:
    linear-gradient(
      135deg,
      #7d3998,
      #59236f
    );

  box-shadow:
    0 16px 40px
    rgba(106,43,130,.3);

}


.button-primary:hover {

  box-shadow:
    0 20px 52px
    rgba(132,57,159,.38);

}


.button-outline {

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

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

  color:
    #e2d3e5;

}


.button-outline:hover {

  border-color:
    rgba(208,143,229,.5);

}


.hero-links {

  display: flex;

  flex-wrap: wrap;

  gap: 19px;

  margin-top: 26px;

}


.hero-links a {

  color:
    var(--muted-dark);

  font-size: 10px;

  transition:
    color .25s ease;

}


.hero-links a:hover {

  color:
    #d6b3e2;

}



/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}


.hero-ring {

  position: absolute;

  width: 440px;

  height: 440px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(148,76,181,.20),
      transparent 68%
    );

  filter:
    blur(12px);

}


.hero-photo {

  position:
    relative;

  width:
    min(410px, 88vw);

  aspect-ratio:
    .84;

  overflow:
    hidden;

  border-radius:
    30px;

  border:
    1px solid
    rgba(208,143,229,.22);

  box-shadow:
    0 40px 110px
    rgba(0,0,0,.58);

}


.hero-photo::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:

    linear-gradient(
      180deg,
      rgba(11,4,16,0) 55%,
      rgba(11,4,16,.55)
    );

}


.hero-photo img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


.hero-float {

  position:
    absolute;

  z-index:
    3;

  padding:
    12px;

  border:
    1px solid
    rgba(208,143,229,.18);

  border-radius:
    14px;

  background:
    rgba(17,8,23,.78);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 22px 50px
    rgba(0,0,0,.4);

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.hero-float strong,
.hero-float span {

  display:
    block;

}


.hero-float strong {

  font-size:
    11px;

}


.hero-float span {

  margin-top:
    2px;

  color:
    #96849b;

  font-size:
    8px;

}


.float-icon {

  width:
    34px;

  height:
    34px;

  border-radius:
    10px;

  display:
    grid;

  place-items:
    center;

  color:
    #d89be8;

  background:
    rgba(148,73,179,.13);

}


.hero-float-one {

  right:
    -3%;

  top:
    14%;

}


.hero-float-two {

  left:
    -8%;

  bottom:
    14%;

}



/* =========================================================
   SECTIONS
========================================================= */

.section {

  max-width:
    1380px;

  margin:
    auto;

  padding:
    120px 5%;

}


.section-header {

  margin-bottom:
    58px;

  max-width:
    850px;

}


.section-label {

  display:
    block;

  color:
    var(--purple-bright);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .17em;

}


.section-header h2 {

  margin-top:
    12px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(38px, 5vw, 68px);

  line-height:
    .97;

  letter-spacing:
    -.06em;

}


.section-intro {

  margin-top:
    19px;

  max-width:
    700px;

  color:
    var(--muted);

  font-size:
    14px;

}



/* =========================================================
   ABOUT
========================================================= */

.about-layout {

  display:
    grid;

  grid-template-columns:
    1.25fr .75fr;

  gap:
    25px;

}


.about-main {

  padding:
    43px;

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

  border-radius:
    var(--radius-lg);

  background:

    linear-gradient(
      145deg,
      rgba(37,17,48,.7),
      rgba(15,7,20,.76)
    );

}


.about-kicker {

  color:
    var(--purple-bright);

  font-size:
    10px;

  letter-spacing:
    .14em;

  font-weight:
    800;

}


.about-main h3 {

  margin-top:
    19px;

  font-family:
    "Space Grotesk",
    sans-serif;

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

  line-height:
    1.05;

  letter-spacing:
    -.045em;

}


.about-main p {

  margin-top:
    20px;

  max-width:
    690px;

  color:
    var(--muted);

  font-size:
    14px;

}


.about-tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    25px;

}


.about-tags span {

  padding:
    7px 10px;

  border:
    1px solid
    rgba(208,143,229,.1);

  border-radius:
    8px;

  color:
    #b5a1ba;

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

  font-size:
    9px;

}


.about-side {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;

}


.about-stat {

  min-height:
    165px;

  padding:
    25px;

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

  border-radius:
    18px;

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

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

}


.about-stat strong {

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    24px;

  color:
    #e4cce9;

}


.about-stat span {

  color:
    var(--muted-dark);

  font-size:
    10px;

}



/* =========================================================
   EXPERIENCE
========================================================= */

.experience-list {

  position:
    relative;

}


.experience-list::before {

  content:
    "";

  position:
    absolute;

  top:
    5px;

  bottom:
    5px;

  left:
    8px;

  width:
    1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(184,105,214,.35),
      transparent
    );

}


.experience-item {

  position:
    relative;

  padding-left:
    50px;

  margin-bottom:
    34px;

}


.experience-marker {

  position:
    absolute;

  left:
    0;

  top:
    9px;

  width:
    17px;

  height:
    17px;

  display:
    grid;

  place-items:
    center;

}


.experience-marker span {

  width:
    9px;

  height:
    9px;

  border-radius:
    50%;

  background:
    #9d50bc;

  box-shadow:
    0 0 18px
    rgba(157,80,188,.8);

  border:
    2px solid
    var(--background);

}


.experience-content {

  padding:
    29px;

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

  border-radius:
    21px;

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

  transition:
    transform .3s ease,
    border .3s ease,
    background .3s ease;

}


.experience-content:hover {

  transform:
    translateX(4px);

  border-color:
    var(--border-strong);

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

}


.featured-experience .experience-content {

  background:

    linear-gradient(
      145deg,
      rgba(77,30,96,.28),
      rgba(255,255,255,.015)
    );

  border-color:
    rgba(188,113,215,.24);

}


.experience-date {

  font-family:
    "Space Grotesk",
    sans-serif;

  color:
    #b46acb;

  font-size:
    10px;

  letter-spacing:
    .12em;

  font-weight:
    700;

}


.experience-heading {

  margin-top:
    8px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

}


.experience-heading h3 {

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    24px;

  line-height:
    1.1;

  letter-spacing:
    -.04em;

}


.experience-company {

  margin-top:
    4px;

  color:
    #938095;

  font-size:
    11px;

}


.experience-type {

  flex-shrink:
    0;

  padding:
    7px 9px;

  border:
    1px solid
    rgba(208,143,229,.14);

  border-radius:
    99px;

  color:
    #c39ecf;

  background:
    rgba(144,64,178,.06);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .11em;

}


.experience-content > p {

  margin-top:
    17px;

  color:
    var(--muted);

  font-size:
    13px;

  max-width:
    900px;

}


.experience-content ul {

  margin:
    16px 0 0 17px;

  color:
    #8d7d91;

  font-size:
    12px;

}


.experience-content li {

  margin-bottom:
    7px;

}


.experience-transition {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    18px;

  padding:
    12px 14px;

  border-left:
    2px solid
    #904caf;

  border-radius:
    0 10px 10px 0;

  background:
    rgba(144,76,175,.05);

}


.experience-transition span {

  color:
    #8f7b94;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .13em;

}


.experience-transition strong {

  font-size:
    11px;

  color:
    #bd9cc8;

}


.experience-transition small {

  color:
    #776678;

  font-size:
    9px;

}


.technical-tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    17px;

}


.technical-tags span {

  padding:
    6px 8px;

  border-radius:
    7px;

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

  color:
    #a993ab;

  font-size:
    9px;

}



/* =========================================================
   SKILLS
========================================================= */

.skills-layout {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    45px;

}


.skills-column {

  display:
    flex;

  flex-direction:
    column;

  gap:
    40px;

}


.skill-category {

  border-top:
    1px solid
    rgba(208,143,229,.1);

  padding-top:
    20px;

}


.skill-number {

  display:
    block;

  color:
    #8d419f;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .12em;

}


.skill-category h3 {

  margin-top:
    8px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    28px;

  letter-spacing:
    -.04em;

}


.skill-list {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    16px;

}


.skill-list span {

  padding:
    8px 10px;

  border:
    1px solid
    rgba(208,143,229,.09);

  border-radius:
    9px;

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

  color:
    #a793ac;

  font-size:
    10px;

}



/* =========================================================
   WORK
========================================================= */

.work-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    34px;

}


.work-story {

  display:
    grid;

  grid-template-columns:
    .75fr 1.25fr;

  min-height:
    490px;

  overflow:
    hidden;

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

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      rgba(34,15,44,.68),
      rgba(12,6,17,.76)
    );

}


.story-reverse {

  grid-template-columns:
    1.25fr .75fr;

}


.story-reverse .story-text {
  order: 2;
}


.story-reverse .story-gallery {
  order: 1;
}


.story-text {

  padding:
    48px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.story-label {

  color:
    var(--purple-bright);

  font-size:
    9px;

  letter-spacing:
    .16em;

  font-weight:
    800;

}


.story-text h3 {

  margin-top:
    14px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(30px, 4vw, 48px);

  line-height:
    .98;

  letter-spacing:
    -.055em;

}


.story-text p {

  margin-top:
    18px;

  max-width:
    510px;

  color:
    var(--muted);

  font-size:
    13px;

}


.story-details {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    20px;

}


.story-details span {

  padding:
    7px 9px;

  border:
    1px solid
    rgba(208,143,229,.1);

  border-radius:
    8px;

  color:
    #9e879f;

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

  font-size:
    9px;

}


.story-link {

  display:
    inline-block;

  width:
    fit-content;

  margin-top:
    25px;

  color:
    #cf90df;

  font-size:
    10px;

  font-weight:
    700;

}


.story-image-large {

  min-height:
    490px;

}


.story-image-large img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  cursor:
    zoom-in;

}


.story-gallery {

  display:
    grid;

  grid-template-columns:
    1.45fr 1fr;

  gap:
    6px;

  padding:
    7px;

}


.story-gallery img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  cursor:
    zoom-in;

}


.story-main-image {

  border-radius:
    17px;

}


.story-small-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    6px;

}


.story-small-grid img {

  min-height:
    0;

  border-radius:
    12px;

}


.modal-trigger {

  transition:
    filter .3s ease;

}


.modal-trigger:hover {

  filter:
    brightness(1.08);

}



/* =========================================================
   PROOF SECTION
========================================================= */

.proof-section {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    28px;

  padding:
    22px;

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

  border-radius:
    26px;

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

}


.proof-image {

  overflow:
    hidden;

  border-radius:
    18px;

}


.proof-image img {

  width:
    100%;

  height:
    100%;

  min-height:
    320px;

  object-fit:
    cover;

  cursor:
    zoom-in;

}


.proof-content {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    30px;

}


.proof-content h3 {

  margin-top:
    14px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(28px, 4vw, 48px);

  line-height:
    .98;

  letter-spacing:
    -.05em;

}


.proof-content p {

  margin-top:
    17px;

  color:
    var(--muted);

  font-size:
    13px;

  max-width:
    560px;

}



/* =========================================================
   CERTIFICATION
========================================================= */

.certification-feature {

  display:
    grid;

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

  gap:
    0;

  overflow:
    hidden;

  min-height:
    530px;

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

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      rgba(40,18,52,.72),
      rgba(13,7,17,.8)
    );

}


.certification-image {

  min-height:
    530px;

  padding:
    30px;

  background:
    linear-gradient(
      145deg,
      rgba(79,32,102,.2),
      rgba(17,7,22,.4)
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.certification-image img {

  max-width:
    100%;

  max-height:
    470px;

  width:
    auto;

  object-fit:
    contain;

  border-radius:
    16px;

  cursor:
    zoom-in;

}


.certification-info {

  padding:
    65px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.cert-provider {

  color:
    #bc70d5;

  font-size:
    10px;

  letter-spacing:
    .16em;

  font-weight:
    800;

}


.certification-info h3 {

  margin-top:
    15px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(31px, 4vw, 56px);

  line-height:
    .98;

  letter-spacing:
    -.06em;

}


.certification-info p {

  margin-top:
    20px;

  max-width:
    600px;

  color:
    var(--muted);

  font-size:
    14px;

}


.certification-meta {

  display:
    flex;

  gap:
    8px;

  flex-wrap:
    wrap;

  margin-top:
    25px;

}


.certification-meta span {

  padding:
    7px 10px;

  border:
    1px solid
    rgba(208,143,229,.13);

  border-radius:
    8px;

  color:
    #c0a5c7;

  font-size:
    9px;

}


.certification-info .button {

  width:
    fit-content;

  margin-top:
    27px;

}



/* =========================================================
   BADGES
========================================================= */

.badge-grid {

  display:
    grid;

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

  gap:
    15px;

}


.badge-card {

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  min-height:
    130px;

  padding:
    18px;

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

  border-radius:
    17px;

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

  transition:
    transform .25s ease,
    border .25s ease,
    background .25s ease;

}


.badge-card:hover {

  transform:
    translateY(-4px);

  border-color:
    var(--border-strong);

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

}


.badge-featured {

  border-color:
    rgba(191,113,219,.28);

  background:
    linear-gradient(
      145deg,
      rgba(91,37,112,.2),
      rgba(255,255,255,.015)
    );

}


.badge-image {

  flex:
    0 0 auto;

  width:
    66px;

  height:
    66px;

  border-radius:
    13px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  background:
    #17101b;

  border:
    1px solid
    rgba(208,143,229,.09);

}


.badge-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  padding:
    5px;

}


.badge-provider {

  color:
    #a85bc2;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .11em;

}


.badge-card h3 {

  margin-top:
    5px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    13px;

  line-height:
    1.2;

  letter-spacing:
    -.02em;

}


.badge-card p {

  margin-top:
    5px;

  color:
    #807181;

  font-size:
    9px;

}


.badge-footer {

  margin-top:
    24px;

}



/* =========================================================
   EDUCATION
========================================================= */

.education-list {

  border-top:
    1px solid
    rgba(208,143,229,.1);

}


.education-row {

  display:
    grid;

  grid-template-columns:
    180px 1fr auto;

  align-items:
    center;

  gap:
    30px;

  padding:
    25px 0;

  border-bottom:
    1px solid
    rgba(208,143,229,.1);

}


.education-date {

  color:
    #9e57b4;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .08em;

}


.education-row h3 {

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    18px;

  letter-spacing:
    -.03em;

}


.education-row p {

  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    11px;

}


.education-status {

  padding:
    6px 9px;

  border:
    1px solid
    rgba(208,143,229,.12);

  border-radius:
    999px;

  color:
    #a88cac;

  font-size:
    8px;

  font-weight:
    800;

}



/* =========================================================
   RESUME
========================================================= */

.resume-section {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  padding:
    55px;

  border:
    1px solid
    rgba(208,143,229,.2);

  border-radius:
    26px;

  background:

    radial-gradient(
      circle at 15% 20%,
      rgba(152,70,187,.18),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      rgba(57,23,73,.62),
      rgba(13,6,18,.85)
    );

}


.resume-section h2 {

  margin-top:
    10px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(34px, 4vw, 58px);

  line-height:
    .97;

  letter-spacing:
    -.055em;

}


.resume-section p {

  margin-top:
    16px;

  color:
    var(--muted);

  max-width:
    670px;

  font-size:
    13px;

}


.resume-button {

  flex-shrink:
    0;

  min-height:
    52px;

  padding:
    0 20px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    13px;

  border-radius:
    12px;

  background:
    #f2e8f5;

  color:
    #211028;

  font-size:
    11px;

  font-weight:
    800;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.resume-button span {

  font-size:
    18px;

}


.resume-button:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.3);

}



/* =========================================================
   CONTACT
========================================================= */

.contact-section {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    50px;

  padding-bottom:
    40px;

  border-bottom:
    1px solid
    rgba(208,143,229,.1);

}


.contact-big {

  max-width:
    700px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(32px, 4vw, 55px);

  line-height:
    1;

  letter-spacing:
    -.055em;

  color:
    #e9dced;

}


.contact-links {

  display:
    flex;

  flex-direction:
    column;

}


.contact-links a {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    17px 0;

  border-bottom:
    1px solid
    rgba(208,143,229,.1);

  color:
    #b7a6bb;

  font-size:
    13px;

  transition:
    color .25s ease,
    padding .25s ease;

}


.contact-links a:hover {

  color:
    white;

  padding-left:
    6px;

}


.contact-links span {

  color:
    #9d53b8;

}



/* =========================================================
   FOOTER
========================================================= */

.footer {

  max-width:
    1380px;

  margin:
    auto;

  padding:
    50px 5%;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  color:
    #77677b;

}


.footer p {

  margin-top:
    6px;

  font-size:
    9px;

}


.footer-right {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    5px;

  font-size:
    9px;

}


.footer-right a {

  color:
    #a56abb;

}



/* =========================================================
   IMAGE MODAL
========================================================= */

.image-modal {

  position:
    fixed;

  inset:
    0;

  z-index:
    5000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    35px;

  background:
    rgba(4,2,7,.95);

  backdrop-filter:
    blur(14px);

}


.image-modal.active {

  display:
    flex;

}


.image-modal img {

  max-width:
    92vw;

  max-height:
    90vh;

  object-fit:
    contain;

  border-radius:
    15px;

  box-shadow:
    0 40px 100px
    rgba(0,0,0,.65);

}


.modal-close {

  position:
    absolute;

  top:
    20px;

  right:
    25px;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    50%;

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

  color:
    white;

  cursor:
    pointer;

  font-size:
    25px;

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .nav-links {

    gap:
      15px;

  }


  .hero {

    grid-template-columns:
      1fr;

    text-align:
      center;

  }


  .hero-description {

    margin-inline:
      auto;

  }


  .hero-buttons,
  .hero-links {

    justify-content:
      center;

  }


  .about-layout,
  .certification-feature {

    grid-template-columns:
      1fr;

  }


  .certification-info {

    padding:
      45px;

  }


  .badge-grid {

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

  }

}


@media (max-width: 850px) {

  .menu-toggle {

    display:
      block;

  }


  .nav-links {

    display:
      none;

    position:
      absolute;

    top:
      70px;

    left:
      0;

    right:
      0;

    flex-direction:
      column;

    align-items:
      flex-start;

    padding:
      20px;

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

    border-radius:
      16px;

    background:
      rgba(13,6,18,.97);

  }


  .nav-links.active {

    display:
      flex;

  }


  .about-side {

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

  }


  .skills-layout,
  .contact-section {

    grid-template-columns:
      1fr;

  }


  .work-story,
  .story-reverse {

    grid-template-columns:
      1fr;

  }


  .story-reverse .story-text,
  .story-reverse .story-gallery {

    order:
      initial;

  }


  .proof-section {

    grid-template-columns:
      1fr;

  }


  .education-row {

    grid-template-columns:
      1fr;

    gap:
      7px;

  }


  .education-status {

    width:
      fit-content;

  }


  .resume-section {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .footer {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .footer-right {

    align-items:
      flex-start;

  }

}


@media (max-width: 620px) {

  .section {

    padding:
      90px 5%;

  }


  .hero {

    padding:
      140px 5% 90px;

  }


  .hero h1 {

    font-size:
      49px;

  }


  .hero-float {

    display:
      none;

  }


  .about-side,
  .badge-grid {

    grid-template-columns:
      1fr;

  }


  .about-main,
  .experience-content,
  .story-text,
  .certification-info,
  .resume-section,
  .proof-content {

    padding:
      27px;

  }


  .story-gallery {

    grid-template-columns:
      1fr;

  }


  .story-small-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .story-image-large,
  .proof-image img {

    min-height:
      290px;

  }


  .certification-image {

    min-height:
      auto;

    padding:
      22px;

  }


  .experience-heading {

    flex-direction:
      column;

  }

}