/* =========================================================
   AMIRREZA PORTFOLIO — PERSIAN / RTL
   Designed for: /fa/fa.html
   Stylesheet location: /fa/style.css
========================================================= */


/* =========================================================
   FONT
========================================================= */

@font-face {
  font-family: "YekanBakh";
  src: url("../fonts/YekanBakh-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --bg: #07080b;
  --soft: #0c0f13;

  --panel: #101318;
  --panel2: #15191f;

  --line: #252a32;

  --text: #f5f7fa;

  --muted: #929aa6;
  --muted2: #626b77;

  --accent: #b7ff3c;

  --shadow: rgba(0, 0, 0, .45);

  --container: 1480px;

  --display:
    "YekanBakh",
    Tahoma,
    Arial,
    sans-serif;

  --latin-display:
    "Space Grotesk",
    Inter,
    Arial,
    sans-serif;

  --ease:
    cubic-bezier(.2, .8, .2, 1);
}


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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 15% 8%,
      rgba(183, 255, 60, .055),
      transparent 26%
    ),
    radial-gradient(
      circle at 90% 35%,
      rgba(183, 255, 60, .035),
      transparent 25%
    ),
    var(--bg);

  color: var(--text);

  font-family:
    "YekanBakh",
    Tahoma,
    Arial,
    sans-serif;

  font-size: 14px;
  line-height: 1.85;

  overflow-x: hidden;

  direction: rtl;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

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

::selection {
  background: var(--accent);
  color: #080a06;
}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.scroll-progress {
  position: fixed;

  top: 0;
  right: 0;

  width: 0;
  height: 2px;

  z-index: 999;

  background:
    linear-gradient(
      270deg,
      var(--accent),
      #d9ff8a
    );

  box-shadow:
    0 0 16px
    rgba(183, 255, 60, .4);

  pointer-events: none;
}


/* =========================================================
   NOISE
========================================================= */

.noise {
  position: fixed;
  inset: 0;

  z-index: 50;

  pointer-events: none;

  opacity: .035;

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


/* =========================================================
   CURSOR GLOW
========================================================= */

.cursor-glow {
  position: fixed;

  width: 360px;
  height: 360px;

  right: 0;
  top: 0;

  transform:
    translate(50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(183, 255, 60, .07),
      transparent 68%
    );

  pointer-events: none;

  z-index: 1;

  transition:
    right .12s ease-out,
    top .12s ease-out;
}


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

.site-header {
  height: 78px;

  position: sticky;

  top: 0;

  z-index: 100;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0
    max(
      28px,
      calc(
        (100vw - var(--container))
        / 2
      )
    );

  background:
    rgba(7, 8, 11, .72);

  border-bottom:
    1px solid transparent;

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  transition:
    background .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
}

.site-header.scrolled {
  border-color:
    rgba(255, 255, 255, .07);

  box-shadow:
    0 10px 40px
    rgba(0, 0, 0, .12);
}


/* =========================================================
   BRAND
========================================================= */

.brand {
  display: flex;
  align-items: center;

  gap: 11px;

  font:
    700 16px
    var(--display);

  letter-spacing:
    -.03em;

  white-space: nowrap;
}

.brand-mark {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

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

  border-radius: 50%;

  color:
    var(--accent);

  font-family:
    var(--latin-display);

  font-size: 10px;

  direction: ltr;

  transition:
    transform .3s var(--ease),
    background .3s var(--ease);
}

.brand:hover .brand-mark {
  transform:
    rotate(-8deg)
    scale(1.05);

  background:
    rgba(183, 255, 60, .08);
}


/* =========================================================
   NAVIGATION
========================================================= */

.navigation {
  display: flex;

  align-items: center;

  gap: 30px;

  direction: rtl;
}

.navigation a {
  position: relative;

  color:
    var(--muted);

  font-size: 12px;
  font-weight: 500;

  transition:
    color .25s var(--ease);
}

.navigation a:hover,
.navigation a.active {
  color:
    var(--text);
}

.navigation a::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: -8px;

  width: 0;
  height: 1px;

  background:
    var(--accent);

  transition:
    width .25s var(--ease);
}

.navigation a:hover::after,
.navigation a.active::after {
  width: 100%;
}


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

.header-actions {
  display: flex;

  align-items: center;

  gap: 8px;
}

.language-switch,
.theme-button {
  min-width: 38px;

  height: 36px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0 11px;

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

  border-radius: 10px;

  background: transparent;

  color:
    var(--text);

  font-family:
    var(--latin-display);

  font-size: 10px;

  direction: ltr;

  cursor: pointer;

  transition:
    border-color .25s var(--ease),
    background .25s var(--ease),
    transform .25s var(--ease);
}

.language-switch:hover,
.theme-button:hover {
  border-color:
    var(--accent);

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

  transform:
    translateY(-2px);
}

.header-cta {
  height: 36px;

  min-width: 40px;

  padding:
    0 12px;

  display: flex;

  align-items: center;

  justify-content: center;

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

  border-radius: 10px;

  background:
    var(--accent);

  color:
    #080a06;

  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}

.header-cta:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 10px 25px
    rgba(183, 255, 60, .14);
}

.header-cta svg {
  transform:
    rotate(180deg);
}


/* =========================================================
   FOCUS
========================================================= */

body.keyboard-user a:focus-visible,
body.keyboard-user button:focus-visible {
  outline:
    2px solid
    var(--accent);

  outline-offset:
    4px;
}


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

.section {
  width:
    min(
      var(--container),
      100%
    );

  margin:
    auto;

  padding:
    150px 38px;
}


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

.hero {
  min-height:
    calc(100vh - 78px);

  display: grid;

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

  gap: 90px;

  align-items:
    center;

  padding-top:
    115px;
}

.hero-content {
  order: 2;
}

.hero-visual {
  order: 1;
}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow {
  display: flex;

  align-items: center;

  gap: 9px;

  color:
    var(--accent);

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    0;

  text-transform:
    none;
}

.status-dot {
  width: 7px;
  height: 7px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 0 6px
    rgba(183, 255, 60, .07),

    0 0 22px
    rgba(183, 255, 60, .5);

  animation:
    pulse 2s infinite;
}

@keyframes pulse {
  50% {
    box-shadow:
      0 0 0 10px
      rgba(183, 255, 60, .02),

      0 0 30px
      rgba(183, 255, 60, .7);
  }
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
.brand,
.window-bar,
.portfolio-word {
  font-family:
    var(--display);
}

.hero h1 {
  margin:
    25px 0;

  font-size:
    clamp(
      70px,
      8vw,
      135px
    );

  font-weight:
    600;

  line-height:
    .93;

  letter-spacing:
    -.065em;
}

.hero h1 em,
.section-head h2 em,
.about-grid h2 em,
.process-title em,
.contact-inner h2 em {
  color:
    var(--accent);

  font-style:
    normal;
}

.hero-copy {
  max-width:
    620px;

  color:
    var(--muted);

  font-size:
    15px;

  line-height:
    2.05;
}

.hero-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px 16px;

  margin-top:
    28px;

  color:
    var(--muted2);

  font-size:
    10px;
}

.hero-meta i {
  font-style:
    normal;

  color:
    var(--line);
}


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

.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top:
    30px;
}

.button {
  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    0 19px;

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

  border-radius:
    10px;

  font-size:
    11px;

  font-weight:
    600;

  transition:
    transform .25s var(--ease),
    border-color .25s var(--ease),
    background .25s var(--ease),
    box-shadow .25s var(--ease);
}

.button:hover {
  transform:
    translateY(-3px);
}

.button.primary {
  background:
    var(--accent);

  border-color:
    var(--accent);

  color:
    #080a06;
}

.button.primary:hover {
  box-shadow:
    0 14px 30px
    rgba(183, 255, 60, .12);
}

.button.secondary:hover {
  border-color:
    var(--accent);

  background:
    rgba(183, 255, 60, .04);
}

.button-icon {
  display:
    grid;

  place-items:
    center;

  transition:
    transform .25s var(--ease);
}

.button:hover .button-icon {
  transform:
    translateX(-3px);
}

.button svg {
  transition:
    transform .25s var(--ease);
}

.button:hover svg {
  transform:
    translateX(-3px);
}


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

.hero-visual {
  min-height:
    600px;

  position:
    relative;

  display:
    grid;

  place-items:
    center;
}

.grid-orb {
  position:
    absolute;

  width:
    600px;

  height:
    600px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(183, 255, 60, .12),
      transparent 65%
    );

  filter:
    blur(3px);
}


/* =========================================================
   CODE WINDOW
========================================================= */

.code-window {
  width:
    min(
      680px,
      100%
    );

  position:
    relative;

  z-index:
    2;

  direction:
    ltr;

  text-align:
    left;

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

  border-radius:
    18px;

  overflow:
    hidden;

  background:
    linear-gradient(
      145deg,
      #161a20,
      #0d1014
    );

  box-shadow:
    0 40px 100px
    var(--shadow);

  transform:
    rotate(-2deg);

  transition:
    transform .5s var(--ease),
    box-shadow .5s var(--ease);
}

.code-window:hover {
  box-shadow:
    0 50px 110px
    rgba(0, 0, 0, .55);

  transform:
    rotate(-1deg)
    translateY(-2px);
}

.window-bar {
  height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  direction:
    ltr;

  padding:
    0 18px;

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

  color:
    var(--muted2);

  font-size:
    9px;
}

.window-dots {
  display:
    flex;

  gap:
    6px;
}

.window-dots b {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #4d5560;
}

.code-window pre {
  min-height:
    365px;

  margin: 0;

  padding:
    32px;

  overflow:
    auto;

  direction:
    ltr;

  text-align:
    left;

  color:
    #c9d0d8;

  font:
    14px/2.05
    "SFMono-Regular",
    Consolas,
    monospace;

  scrollbar-width:
    none;
}

.code-window pre::-webkit-scrollbar {
  display:
    none;
}

.purple {
  color:
    #d48bff;
}

.green {
  color:
    var(--accent);
}

.window-footer {
  height:
    42px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  direction:
    ltr;

  padding:
    0 18px;

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

  color:
    var(--muted2);

  font:
    8px monospace;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {
  position:
    absolute;

  z-index:
    3;

  padding:
    12px 15px;

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

  border-radius:
    10px;

  background:
    rgba(17, 20, 25, .9);

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);

  font-size:
    9px;

  box-shadow:
    0 20px 50px
    #0003;
}

.card-a {
  top:
    80px;

  left:
    -5px;

  animation:
    float 4s ease-in-out infinite;
}

.card-b {
  bottom:
    70px;

  right:
    -5px;

  color:
    var(--accent);

  animation:
    float 5s ease-in-out infinite reverse;
}

@keyframes float {
  50% {
    transform:
      translateY(-9px);
  }
}


/* =========================================================
   MARQUEE
========================================================= */

.marquee {
  overflow:
    hidden;

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

  background:
    var(--soft);

  direction:
    ltr;
}

.marquee-track {
  width:
    max-content;

  display:
    flex;

  align-items:
    center;

  gap:
    55px;

  padding:
    18px 0;

  color:
    var(--muted2);

  font:
    600 10px
    var(--latin-display);

  letter-spacing:
    .15em;

  animation:
    marquee 25s
    linear infinite;
}

@keyframes marquee {
  to {
    transform:
      translateX(-50%);
  }
}

.marquee-track b {
  color:
    var(--accent);
}


/* =========================================================
   SECTION HEAD
========================================================= */

.section-head {
  display:
    grid;

  grid-template-columns:
    .62fr 1fr;

  gap:
    80px;

  align-items:
    end;

  margin-bottom:
    55px;
}

.section-label {
  display:
    block;

  color:
    var(--accent);

  font-size:
    10px;

  font-weight:
    600;
}

.section-head h2,
.about-grid h2,
.process-title,
.contact-inner h2 {
  margin-top:
    16px;

  font-size:
    clamp(
      55px,
      6vw,
      90px
    );

  font-weight:
    600;

  line-height:
    .95;

  letter-spacing:
    -.055em;
}

.section-head p {
  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    2;
}


/* =========================================================
   PROJECTS
========================================================= */

.projects-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    20px;
}

.project {
  position:
    relative;

  overflow:
    hidden;

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

  border-radius:
    16px;

  background:
    var(--panel);

  transition:
    transform .35s var(--ease),
    border-color .35s var(--ease),
    box-shadow .35s var(--ease);
}

.project:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(183, 255, 60, .35);

  box-shadow:
    0 30px 80px
    #0003;
}

.featured {
  grid-column:
    1 / -1;

  display:
    grid;

  grid-template-columns:
    .65fr 1.35fr;
}

.project-preview {
  min-height:
    330px;

  position:
    relative;

  overflow:
    hidden;
}

.featured .project-preview {
  border-left:
    1px solid
    var(--line);
}


/* =========================================================
   PREVIEW THEMES
========================================================= */

.amidexi,
.goalzone,
.uniqueplus,
.avenza,
.raven {
  padding:
    25px;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(183, 255, 60, .15),
      transparent 30%
    ),
    linear-gradient(
      225deg,
      #06130d,
      #0c2116 55%,
      #07100b
    );
}

.goalzone {
  background:
    radial-gradient(
      circle at 28% 28%,
      rgba(183, 255, 60, .11),
      transparent 30%
    ),
    linear-gradient(
      225deg,
      #09110e,
      #111a16 55%,
      #070b09
    );
}

.uniqueplus {
  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(183, 255, 60, .10),
      transparent 28%
    ),
    linear-gradient(
      225deg,
      #17120b,
      #17160e 55%,
      #0c0b08
    );
}

.avenza {
  background:
    radial-gradient(
      circle at 28% 26%,
      rgba(183, 255, 60, .08),
      transparent 28%
    ),
    linear-gradient(
      225deg,
      #10131a,
      #15181f 55%,
      #090b0f
    );
}


/* =========================================================

.raven {
  padding: 25px;

  background:
    radial-gradient(
      circle at 28% 25%,
      rgba(183, 255, 60, .12),
      transparent 28%
    ),
    radial-gradient(
      circle at 75% 70%,
      rgba(115, 88, 255, .10),
      transparent 30%
    ),
    linear-gradient(
      225deg,
      #08090d,
      #11131b 55%,
      #05060a
    );
}

   MOCK UI
========================================================= */

.preview-grid {
  position:
    absolute;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, .025)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .025)
      1px,
      transparent 1px
    );

  background-size:
    40px 40px;
}

.mock-top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  color:
    #789083;

  font-size:
    8px;
}

.mock-top strong {
  color:
    var(--accent);

  font:
    700 14px
    var(--latin-display);
}

.mock-title {
  position:
    absolute;

  z-index:
    2;

  right:
    38px;

  top:
    105px;

  color:
    #eefbf1;

  font:
    600 clamp(
      36px,
      4vw,
      62px
    )/.95
    var(--display);

  letter-spacing:
    -.055em;

  text-align:
    right;
}

.mock-title strong {
  color:
    var(--accent);
}

.mock-card {
  position:
    absolute;

  z-index:
    2;

  left:
    28px;

  bottom:
    28px;

  min-width:
    160px;

  padding:
    15px;

  border:
    1px solid
    rgba(183, 255, 60, .2);

  border-radius:
    12px;

  background:
    #040d08b3;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-size:
    8px;

  color:
    #77857b;

  text-align:
    right;
}

.mock-card strong {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--accent);

  font:
    700 20px
    var(--latin-display);
}

.mock-card span {
  color:
    var(--accent);
}


/* =========================================================
   PROJECT INFO
========================================================= */

.project-info {
  padding:
    30px;

  text-align:
    right;
}

.project-number {
  color:
    var(--muted2);

  font-family:
    var(--latin-display);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    .08em;

  direction:
    ltr;

  text-align:
    right;
}

.project-info h3 {
  margin:
    16px 0 8px;

  font-size:
    30px;

  font-weight:
    600;

  letter-spacing:
    -.035em;
}

.project-info p {
  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    2;
}

.tags {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin:
    20px 0;

  direction:
    rtl;
}

.tags span {
  padding:
    5px 8px;

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

  border-radius:
    6px;

  color:
    var(--muted2);

  font:
    8px monospace;

  direction:
    ltr;

  transition:
    border-color .25s var(--ease),
    color .25s var(--ease);
}

.project:hover .tags span {
  border-color:
    rgba(183, 255, 60, .18);
}

.project-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--accent);

  font-size:
    10px;

  font-weight:
    600;

  transition:
    gap .25s var(--ease);
}

.project-link:hover {
  gap:
    12px;
}

.project-link svg {
  transform:
    rotate(180deg);
}


/* =========================================================
   PORTFOLIO PREVIEW
========================================================= */

.portfolio-preview {
  min-height:
    285px;

  padding:
    28px;

  background:
    linear-gradient(
      145deg,
      #171a20,
      #090a0d
    );
}

.portfolio-preview small {
  color:
    var(--muted2);

  font-family:
    var(--latin-display);

  font-size:
    8px;

  direction:
    ltr;
}

.portfolio-word {
  position:
    absolute;

  right:
    30px;

  bottom:
    25px;

  font-size:
    70px;

  line-height:
    .78;

  letter-spacing:
    -.09em;

  direction:
    ltr;

  text-align:
    right;
}

.portfolio-word em {
  color:
    var(--accent);

  font-style:
    normal;
}

.preview-corner {
  position:
    absolute;

  left:
    25px;

  top:
    25px;

  color:
    var(--accent);

  font:
    11px
    var(--latin-display);
}


/* =========================================================
   TERMINAL
========================================================= */

.terminal-preview {
  min-height:
    285px;

  display:
    grid;

  place-items:
    center;

  padding:
    30px;

  background:
    #080a0d;
}

.terminal {
  width:
    min(
      450px,
      100%
    );

  padding:
    25px;

  border:
    1px solid
    #222831;

  border-radius:
    12px;

  background:
    #0d1014;

  color:
    var(--accent);

  font:
    12px/2
    monospace;

  direction:
    ltr;

  text-align:
    left;
}

.terminal p span {
  color:
    #6b747f;
}

.terminal .muted {
  color:
    #68717d;
}

.cursor {
  animation:
    blink 1s
    steps(1)
    infinite;
}

@keyframes blink {
  50% {
    opacity:
      0;
  }
}


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

.about-section {
  border-block:
    1px solid
    var(--line);
}

.about-grid {
  display:
    grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:
    100px;
}

.about-copy {
  padding-top:
    48px;
}

.about-copy p {
  max-width:
    650px;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    2;

  margin-bottom:
    15px;
}

.stats {
  display:
    grid;

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

  gap:
    15px;

  margin-top:
    42px;
}

.stats div {
  padding-top:
    20px;

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

.stats strong {
  display:
    block;

  font:
    600 30px
    var(--latin-display);
}

.stats span {
  color:
    var(--muted2);

  font-size:
    9px;
}


/* =========================================================
   BENTO
========================================================= */

.bento {
  display:
    grid;

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

  grid-auto-rows:
    minmax(190px, auto);

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

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

.bento-item {
  position:
    relative;

  padding:
    30px;

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

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

  transition:
    background .3s var(--ease),
    transform .3s var(--ease);
}

.bento-item:hover {
  background:
    var(--panel2);

  transform:
    translateY(-2px);
}

.bento-item.large {
  grid-row:
    span 2;
}

.bento-item.wide {
  grid-column:
    span 2;
}

.icon {
  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    10px;

  color:
    var(--accent);

  font:
    12px monospace;

  transition:
    border-color .3s var(--ease),
    transform .3s var(--ease);
}

.bento-item:hover .icon {
  border-color:
    rgba(183, 255, 60, .35);

  transform:
    scale(1.05);
}

.bento-item h3 {
  margin-top:
    24px;

  font-size:
    19px;
}

.bento-item p {
  margin-top:
    5px;

  max-width:
    390px;

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.9;
}

.bento-index {
  position:
    absolute;

  left:
    25px;

  top:
    25px;

  color:
    var(--muted2);

  font:
    9px monospace;
}


/* =========================================================
   PROCESS
========================================================= */

.process-section {
  padding-top:
    100px;
}

.process-title {
  margin-bottom:
    55px;
}

.process-grid {
  display:
    grid;

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

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

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

.process-grid article {
  min-height:
    220px;

  padding:
    30px;

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

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

  transition:
    background .3s var(--ease),
    transform .3s var(--ease);
}

.process-grid article:hover {
  background:
    var(--panel2);

  transform:
    translateY(-2px);
}

.process-grid article > span {
  color:
    var(--accent);

  font:
    600 11px
    var(--latin-display);
}

.process-grid h3 {
  margin-top:
    28px;

  font-size:
    21px;
}

.process-grid p {
  margin-top:
    7px;

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.9;
}


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

.contact-section {
  padding-top:
    100px;

  padding-bottom:
    100px;
}

.contact-inner {
  position:
    relative;

  overflow:
    hidden;

  padding:
    75px;

  border-radius:
    24px;

  background:
    var(--accent);

  color:
    #080a06;

  text-align:
    right;
}

.contact-inner::after {
  content:
    "";

  position:
    absolute;

  width:
    500px;

  height:
    500px;

  left:
    -180px;

  top:
    -260px;

  border:
    1px solid
    #080a0622;

  border-radius:
    50%;
}

.contact-inner .section-label {
  color:
    #304116;
}

.contact-inner h2 {
  color:
    #080a06;
}

.contact-inner p {
  max-width:
    600px;

  margin-top:
    20px;

  color:
    #304116;

  font-size:
    13px;

  line-height:
    2;
}

.contact-mail {
  position:
    relative;

  z-index:
    2;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  margin-top:
    35px;

  padding-bottom:
    8px;

  border-bottom:
    1px solid
    #080a06;

  font:
    600 clamp(
      20px,
      3vw,
      36px
    )
    var(--latin-display);

  direction:
    ltr;

  transition:
    opacity .25s var(--ease),
    gap .25s var(--ease);
}

.contact-mail:hover {
  opacity:
    .75;

  gap:
    17px;
}


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

.footer {
  width:
    min(
      var(--container),
      100%
    );

  margin:
    auto;

  padding:
    28px 38px 40px;

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

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  color:
    var(--muted2);

  font-size:
    10px;
}

.footer a {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  transition:
    color .25s var(--ease),
    gap .25s var(--ease);
}

.footer a:hover {
  color:
    var(--accent);

  gap:
    9px;
}

.footer a svg {
  transform:
    rotate(180deg);
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity:
    0;

  transform:
    translateY(28px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}

.reveal.visible {
  opacity:
    1;

  transform:
    none;
}


/* =========================================================
   LIGHT MODE
========================================================= */

body.light {
  --bg:
    #f5f6f2;

  --soft:
    #eef0eb;

  --panel:
    #ffffff;

  --panel2:
    #f1f3ef;

  --line:
    #dfe3dc;

  --text:
    #11140f;

  --muted:
    #697067;

  --muted2:
    #899087;

  --accent:
    #7cbd00;

  --shadow:
    rgba(0, 0, 0, .12);

  background:
    radial-gradient(
      circle at 15% 8%,
      rgba(124, 189, 0, .07),
      transparent 26%
    ),
    radial-gradient(
      circle at 90% 35%,
      rgba(124, 189, 0, .04),
      transparent 25%
    ),
    var(--bg);
}

body.light .site-header {
  background:
    rgba(245, 246, 242, .78);
}

body.light .code-window {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f0f2ed
    );
}

body.light .floating-card {
  background:
    rgba(255, 255, 255, .9);
}

body.light .portfolio-preview {
  background:
    linear-gradient(
      145deg,
      #e4e7e1,
      #f7f8f5
    );
}

body.light .terminal-preview {
  background:
    #eef0eb;
}

body.light .terminal {
  background:
    #f8f9f6;

  border-color:
    #d9ddd6;
}

body.light .amidexi,
body.light .goalzone,
body.light .uniqueplus,
body.light .avenza {
  box-shadow:
    inset 0 0 0 1px
    rgba(0, 0, 0, .03);
}


/* =========================================================
   PROJECT SPOTLIGHT
========================================================= */

.project::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  border-radius:
    inherit;

  opacity:
    0;

  background:
    radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(183, 255, 60, .09),
      transparent 68%
    );

  transition:
    opacity .25s ease;
}

.project:hover::after {
  opacity:
    1;
}


/* =========================================================
   LIVE BADGE
========================================================= */

.added-live-badge {
  position:
    absolute;

  top:
    14px;

  left:
    14px;

  z-index:
    5;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(183, 255, 60, .18);

  border-radius:
    999px;

  background:
    rgba(7, 8, 11, .72);

  color:
    var(--accent);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  font:
    600 8px/1
    var(--latin-display);

  letter-spacing:
    .08em;
}

.added-live-badge i {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 10px
    rgba(183, 255, 60, .8);

  animation:
    added-live-pulse 1.8s infinite;
}

@keyframes added-live-pulse {
  50% {
    opacity:
      .35;

    transform:
      scale(.75);
  }
}


/* =========================================================
   COMMAND PALETTE
========================================================= */

.added-command-palette {
  position:
    fixed;

  inset:
    0;

  z-index:
    1200;

  display:
    grid;

  place-items:
    start center;

  padding:
    12vh 20px 30px;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}

.added-command-palette.open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}

.added-command-backdrop {
  position:
    absolute;

  inset:
    0;

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

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

.added-command-box {
  position:
    relative;

  width:
    min(620px, 100%);

  overflow:
    hidden;

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

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      var(--panel2),
      var(--panel)
    );

  box-shadow:
    0 35px 120px
    rgba(0, 0, 0, .55);

  transform:
    translateY(-14px)
    scale(.98);

  transition:
    transform .25s var(--ease);
}

.added-command-palette.open .added-command-box {
  transform:
    translateY(0)
    scale(1);
}

.added-command-search {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    17px 19px;

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

.added-command-search span {
  color:
    var(--accent);

  font:
    11px monospace;
}

.added-command-search input {
  width:
    100%;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--text);

  font:
    13px
    var(--display);

  text-align:
    right;
}

.added-command-search input::placeholder {
  color:
    var(--muted2);
}

.added-command-list {
  max-height:
    55vh;

  overflow:
    auto;

  padding:
    8px;
}

.added-command-item {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    13px 14px;

  border:
    1px solid transparent;

  border-radius:
    10px;

  background:
    transparent;

  color:
    var(--text);

  text-align:
    right;

  cursor:
    pointer;

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

.added-command-item:hover,
.added-command-item.selected {
  border-color:
    rgba(183, 255, 60, .18);

  background:
    rgba(183, 255, 60, .045);

  transform:
    translateX(-2px);
}

.added-command-item strong {
  display:
    block;

  font:
    600 12px
    var(--display);
}

.added-command-item small {
  display:
    block;

  margin-top:
    3px;

  color:
    var(--muted2);

  font-size:
    9px;
}

.added-command-key {
  min-width:
    28px;

  padding:
    5px 7px;

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

  border-radius:
    6px;

  color:
    var(--muted2);

  font:
    8px monospace;

  text-align:
    center;

  direction:
    ltr;
}

.added-command-footer {
  display:
    flex;

  justify-content:
    space-between;

  padding:
    11px 15px;

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

  color:
    var(--muted2);

  font:
    8px monospace;

  direction:
    ltr;
}


/* =========================================================
   SHORTCUT HINT
========================================================= */

.added-shortcut {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  margin-right:
    7px;

  color:
    var(--muted2);

  font:
    8px monospace;

  direction:
    ltr;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.added-back-top {
  position:
    fixed;

  left:
    24px;

  bottom:
    24px;

  z-index:
    90;

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    12px;

  background:
    rgba(12, 15, 19, .82);

  color:
    var(--text);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  box-shadow:
    0 15px 40px
    rgba(0, 0, 0, .22);

  cursor:
    pointer;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(10px);

  transition:
    opacity .25s var(--ease),
    visibility .25s var(--ease),
    transform .25s var(--ease),
    border-color .25s var(--ease);
}

.added-back-top.show {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);
}

.added-back-top:hover {
  border-color:
    var(--accent);

  transform:
    translateY(-3px);
}


/* =========================================================
   MINI STATUS
========================================================= */

.added-mini-status {
  position:
    fixed;

  right:
    24px;

  bottom:
    24px;

  z-index:
    90;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 11px;

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

  border-radius:
    10px;

  background:
    rgba(12, 15, 19, .72);

  color:
    var(--muted2);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  font:
    8px monospace;

  pointer-events:
    none;

  transition:
    opacity .25s ease;
}

.added-mini-status b {
  color:
    var(--accent);

  font-weight:
    600;
}


/* =========================================================
   DYNAMIC FOCUS
========================================================= */

.added-back-top:focus-visible,
.added-command-item:focus-visible,
.added-command-search input:focus-visible {
  outline:
    2px solid
    var(--accent);

  outline-offset:
    3px;
}


/* =========================================================
   CASE STUDY BUTTON
========================================================= */

.project-info .case-study-button {
  margin-top:
    10px;

  margin-right:
    12px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--muted2);

  font:
    600 10px
    var(--display);

  cursor:
    pointer;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  transition:
    color .25s var(--ease),
    gap .25s var(--ease);
}

.project-info .case-study-button:hover {
  color:
    var(--text);

  gap:
    10px;
}

.case-study-button svg {
  transition:
    transform .25s var(--ease);
}

.case-study-button:hover svg {
  transform:
    rotate(90deg);
}


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

body.modal-open {
  overflow:
    hidden;
}

.case-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    500;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    30px;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.case-modal.open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}

.case-modal-backdrop {
  position:
    absolute;

  inset:
    0;

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

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

.case-modal-dialog {
  width:
    min(
      900px,
      100%
    );

  max-height:
    min(
      850px,
      90vh
    );

  position:
    relative;

  z-index:
    2;

  overflow:
    auto;

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

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      var(--panel),
      var(--soft)
    );

  box-shadow:
    0 50px 140px
    rgba(0, 0, 0, .55);

  transform:
    translateY(25px)
    scale(.97);

  transition:
    transform .35s var(--ease);
}

.case-modal.open .case-modal-dialog {
  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   MODAL CLOSE
========================================================= */

.case-modal-close {
  position:
    sticky;

  top:
    18px;

  float:
    left;

  margin:
    18px 0 0 18px;

  z-index:
    5;

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    10px;

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

  color:
    var(--text);

  font-family:
    Arial,
    sans-serif;

  font-size:
    22px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    border-color .25s var(--ease),
    background .25s var(--ease),
    transform .25s var(--ease);
}

.case-modal-close:hover {
  border-color:
    var(--accent);

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

  transform:
    rotate(4deg);
}


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

.case-modal-header {
  padding:
    55px 55px 35px;

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

  text-align:
    right;
}

.case-modal-header h2 {
  margin-top:
    14px;

  font:
    600 clamp(
      45px,
      7vw,
      80px
    )/.95
    var(--display);

  letter-spacing:
    -.055em;
}

.case-modal-header p {
  max-width:
    680px;

  margin-top:
    24px;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    2;
}


/* =========================================================
   MODAL CONTENT
========================================================= */

.case-modal-content {
  padding:
    10px 55px 45px;
}

.case-block {
  display:
    grid;

  grid-template-columns:
    55px 1fr;

  gap:
    20px;

  padding:
    32px 0;

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

.case-block-number {
  color:
    var(--accent);

  font:
    600 10px
    var(--latin-display);

  direction:
    ltr;
}

.case-block h3 {
  margin-bottom:
    8px;

  font-size:
    20px;
}

.case-block p {
  max-width:
    700px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    2;
}


/* =========================================================
   CASE TAGS
========================================================= */

.case-tags {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    14px;

  direction:
    rtl;
}

.case-tags span {
  padding:
    7px 10px;

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

  border-radius:
    7px;

  color:
    var(--muted);

  font:
    9px monospace;

  direction:
    ltr;

  transition:
    border-color .25s var(--ease),
    color .25s var(--ease);
}

.case-tags span:hover {
  border-color:
    var(--accent);

  color:
    var(--text);
}


/* =========================================================
   CASE META
========================================================= */

.case-meta {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    20px;

  padding-top:
    30px;
}

.case-meta div {
  padding:
    20px;

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

  border-radius:
    12px;

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

.case-meta span {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--muted2);

  font-size:
    9px;
}

.case-meta strong {
  font:
    600 14px
    var(--display);
}


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

.case-modal-footer {
  display:
    flex;

  justify-content:
    flex-start;

  padding:
    25px 55px 35px;

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


/* =========================================================
   CASE STUDY 2.0
========================================================= */

.cs2-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    1500;

  display:
    grid;

  place-items:
    center;

  padding:
    24px;

  background:
    rgba(2, 3, 5, .78);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity .28s ease,
    visibility .28s ease;
}

.cs2-overlay.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}

.cs2-shell {
  position:
    relative;

  width:
    min(1080px, 100%);

  max-height:
    min(900px, 92vh);

  overflow:
    hidden;

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

  border-radius:
    26px;

  background:
    radial-gradient(
      700px 260px at 85% 0%,
      rgba(183, 255, 60, .08),
      transparent 65%
    ),
    linear-gradient(
      145deg,
      var(--panel2),
      var(--panel)
    );

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

  transform:
    translateY(18px)
    scale(.985);

  transition:
    transform .32s
    cubic-bezier(.2, .8, .2, 1);
}

.cs2-overlay.is-open .cs2-shell {
  transform:
    translateY(0)
    scale(1);
}

.cs2-scroll {
  max-height:
    min(900px, 92vh);

  overflow:
    auto;

  scrollbar-width:
    thin;
}

.cs2-top {
  position:
    sticky;

  top:
    0;

  z-index:
    4;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    14px 18px;

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

  background:
    rgba(10, 12, 15, .72);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.cs2-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--muted2);

  font:
    9px/1
    monospace;

  letter-spacing:
    .12em;

  direction:
    ltr;
}

.cs2-brand-dot {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 14px
    rgba(183, 255, 60, .8);
}

.cs2-close {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    11px;

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

  color:
    var(--text);

  cursor:
    pointer;

  transition:
    .2s ease;
}

.cs2-close:hover {
  border-color:
    var(--accent);

  color:
    var(--accent);

  transform:
    rotate(4deg);
}

.cs2-hero {
  position:
    relative;

  padding:
    52px 54px 38px;

  overflow:
    hidden;

  text-align:
    right;
}

.cs2-hero::before {
  content:
    "";

  position:
    absolute;

  width:
    420px;

  height:
    420px;

  left:
    -170px;

  top:
    -220px;

  border-radius:
    50%;

  background:
    rgba(183, 255, 60, .07);

  filter:
    blur(15px);

  pointer-events:
    none;
}

.cs2-kicker {
  margin-bottom:
    14px;

  color:
    var(--accent);

  font:
    9px/1.4
    monospace;

  letter-spacing:
    .16em;

  direction:
    ltr;

  text-align:
    right;
}

.cs2-title {
  margin:
    0;

  max-width:
    800px;

  color:
    var(--text);

  font:
    700 clamp(
      30px,
      5vw,
      62px
    )/.98
    var(--display);

  letter-spacing:
    -.035em;
}

.cs2-summary {
  max-width:
    760px;

  margin:
    20px 0 0;

  color:
    var(--muted);

  font:
    14px/2
    var(--display);
}

.cs2-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    25px;

  direction:
    rtl;
}

.cs2-pill {
  padding:
    8px 11px;

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

  border-radius:
    999px;

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

  color:
    var(--muted);

  font:
    9px/1
    monospace;

  direction:
    rtl;
}

.cs2-pill strong {
  color:
    var(--text);

  font-weight:
    600;
}

.cs2-body {
  display:
    grid;

  grid-template-columns:
    285px minmax(0, 1fr);

  gap:
    18px;

  padding:
    0 54px 54px;
}

.cs2-main,
.cs2-side {
  min-width:
    0;
}

.cs2-section {
  padding:
    24px 0;

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

  text-align:
    right;
}

.cs2-section:first-child {
  border-top:
    0;
}

.cs2-section-label {
  margin-bottom:
    10px;

  color:
    var(--accent);

  font:
    9px/1
    monospace;

  letter-spacing:
    .13em;

  direction:
    ltr;

  text-align:
    right;
}

.cs2-section h3 {
  margin:
    0 0 11px;

  color:
    var(--text);

  font:
    650 20px/1.3
    var(--display);
}

.cs2-section p {
  margin:
    0;

  color:
    var(--muted);

  font:
    13px/1.95
    var(--display);
}

.cs2-side {
  position:
    sticky;

  top:
    74px;

  height:
    max-content;

  padding:
    18px;

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

  border-radius:
    17px;

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

  text-align:
    right;
}

.cs2-side-title {
  margin-bottom:
    14px;

  color:
    var(--text);

  font:
    600 11px/1.3
    var(--display);
}

.cs2-stack {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  direction:
    rtl;
}

.cs2-tech {
  padding:
    7px 8px;

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

  border-radius:
    7px;

  color:
    var(--muted);

  font:
    8px monospace;

  direction:
    ltr;
}

.cs2-facts {
  display:
    grid;

  gap:
    11px;

  margin-top:
    20px;
}

.cs2-fact {
  padding-top:
    11px;

  border-top:
    1px solid
    rgba(255, 255, 255, .06);
}

.cs2-fact span {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--muted2);

  font:
    8px monospace;

  direction:
    ltr;

  text-transform:
    uppercase;
}

.cs2-fact b {
  color:
    var(--text);

  font:
    600 10px
    var(--display);
}

.cs2-process {
  display:
    grid;

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

  gap:
    10px;

  margin-top:
    16px;
}

.cs2-step {
  padding:
    14px;

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

  border-radius:
    13px;

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

  text-align:
    right;
}

.cs2-step-num {
  margin-bottom:
    13px;

  color:
    var(--accent);

  font:
    9px monospace;

  direction:
    ltr;
}

.cs2-step strong {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--text);

  font:
    600 11px
    var(--display);
}

.cs2-step span {
  color:
    var(--muted2);

  font:
    9px/1.7
    var(--display);
}

.cs2-cta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    25px;

  direction:
    rtl;
}

.cs2-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    42px;

  padding:
    0 15px;

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

  border-radius:
    10px;

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

  color:
    var(--text);

  text-decoration:
    none;

  font:
    600 9px
    var(--display);

  transition:
    .2s ease;
}

.cs2-btn.primary {
  border-color:
    rgba(183, 255, 60, .35);

  background:
    rgba(183, 255, 60, .09);

  color:
    var(--accent);
}

.cs2-btn:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--accent);
}

body.cs2-lock {
  overflow:
    hidden;
}


/* =========================================================
   LIGHT CASE STUDY
========================================================= */

body.light .case-modal-backdrop {
  background:
    rgba(20, 25, 18, .52);
}

body.light .case-modal-dialog {
  box-shadow:
    0 40px 100px
    rgba(0, 0, 0, .2);
}

body.light .case-modal-close {
  background:
    rgba(0, 0, 0, .025);
}

body.light .cs2-top {
  background:
    rgba(255, 255, 255, .78);
}

body.light .cs2-overlay {
  background:
    rgba(20, 25, 18, .42);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .hero {
    grid-template-columns:
      1fr;

    gap:
      45px;
  }

  .hero-content,
  .hero-visual {
    order:
      unset;
  }

  .hero-visual {
    min-height:
      480px;
  }

  .section-head {
    grid-template-columns:
      1fr;

    gap:
      15px;
  }

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

  .featured .project-preview {
    border-left:
      0;

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

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

  .bento-item.large {
    grid-row:
      auto;
  }

  .bento-item.wide {
    grid-column:
      span 2;
  }

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

  .about-grid {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }

  .about-copy {
    padding-top:
      0;
  }

  .cs2-body {
    grid-template-columns:
      240px minmax(0, 1fr);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .site-header {
    height:
      68px;

    padding:
      0 16px;
  }

  .brand {
    gap:
      8px;

    font-size:
      14px;
  }

  .brand-mark {
    width:
      32px;

    height:
      32px;
  }

  .navigation {
    display:
      none;
  }

  .header-cta {
    display:
      none;
  }

  .section {
    padding:
      95px 18px;
  }

  .hero {
    min-height:
      auto;

    padding-top:
      85px;
  }

  .hero h1 {
    font-size:
      clamp(
        48px,
        14vw,
        75px
      );

    line-height:
      .96;
  }

  .hero-copy {
    font-size:
      13px;

    line-height:
      2;
  }

  .hero-actions {
    flex-wrap:
      wrap;
  }

  .hero-meta {
    gap:
      8px 12px;

    flex-wrap:
      wrap;
  }

  .hero-visual {
    min-height:
      330px;
  }

  .grid-orb {
    width:
      330px;

    height:
      330px;
  }

  .code-window {
    transform:
      none;

    border-radius:
      14px;
  }

  .code-window:hover {
    transform:
      none;
  }

  .code-window pre {
    min-height:
      245px;

    padding:
      19px;

    font-size:
      9px;
  }

  .floating-card {
    font-size:
      8px;
  }

  .card-a {
    top:
      10px;

    left:
      -4px;
  }

  .card-b {
    bottom:
      10px;

    right:
      -4px;
  }

  .section-head h2,
  .about-grid h2,
  .process-title,
  .contact-inner h2 {
    font-size:
      clamp(
        42px,
        13vw,
        64px
      );
  }

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

  .project-preview,
  .portfolio-preview,
  .terminal-preview {
    min-height:
      250px;
  }

  .mock-top {
    gap:
      8px;

    font-size:
      7px;
  }

  .mock-title {
    right:
      25px;

    top:
      90px;

    font-size:
      clamp(
        30px,
        10vw,
        52px
      );
  }

  .mock-card {
    left:
      18px;

    bottom:
      18px;

    min-width:
      145px;

    padding:
      12px;
  }

  .portfolio-word {
    right:
      22px;

    font-size:
      52px;
  }

  .project-info {
    padding:
      23px;
  }

  .project-info h3 {
    font-size:
      27px;
  }

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

  .bento-item.wide {
    grid-column:
      auto;
  }

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

  .contact-inner {
    padding:
      40px 25px;

    border-radius:
      17px;
  }

  .contact-mail {
    max-width:
      100%;

    font-size:
      clamp(
        16px,
        5vw,
        25px
      );

    word-break:
      break-word;
  }

  .footer {
    padding:
      24px 18px 30px;

    flex-direction:
      column;

    gap:
      10px;

    align-items:
      flex-start;
  }

  .cursor-glow {
    display:
      none;
  }

  .added-command-palette {
    padding:
      7vh 12px 20px;
  }

  .added-command-box {
    border-radius:
      15px;
  }

  .added-command-footer {
    display:
      none;
  }

  .added-back-top {
    left:
      14px;

    bottom:
      14px;
  }

  .added-mini-status {
    display:
      none;
  }

  .case-modal {
    padding:
      10px;
  }

  .case-modal-dialog {
    max-height:
      95vh;

    border-radius:
      17px;
  }

  .case-modal-header {
    padding:
      45px 25px 28px;
  }

  .case-modal-header h2 {
    font-size:
      clamp(
        40px,
        12vw,
        62px
      );
  }

  .case-modal-content {
    padding:
      5px 25px 35px;
  }

  .case-block {
    grid-template-columns:
      35px 1fr;

    gap:
      12px;

    padding:
      25px 0;
  }

  .case-block h3 {
    font-size:
      18px;
  }

  .case-block p {
    font-size:
      11px;

    line-height:
      1.9;
  }

  .case-meta {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }

  .case-modal-footer {
    padding:
      20px 25px 25px;
  }

  .project-info .case-study-button {
    margin-right:
      8px;

    margin-top:
      10px;
  }

  .cs2-overlay {
    padding:
      8px;
  }

  .cs2-shell,
  .cs2-scroll {
    max-height:
      96vh;
  }

  .cs2-hero {
    padding:
      38px 22px 28px;
  }

  .cs2-body {
    grid-template-columns:
      1fr;

    padding:
      0 22px 30px;
  }

  .cs2-side {
    position:
      static;
  }

  .cs2-process {
    grid-template-columns:
      1fr;
  }

  .cs2-title {
    font-size:
      38px;
  }

  .cs2-summary {
    font-size:
      12px;

    line-height:
      1.95;
  }

  .cs2-top {
    padding:
      11px 13px;
  }

  .cs2-close {
    width:
      35px;

    height:
      35px;
  }
}


/* =========================================================
   ENHANCED CURSOR
========================================================= */

.cursor-core,
.cursor-ring {
  position:
    fixed;

  left:
    0;

  top:
    0;

  pointer-events:
    none;

  z-index:
    1000;

  opacity:
    0;

  transform:
    translate(-50%, -50%);

  will-change:
    transform,
    opacity;
}

.cursor-core {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 18px
    rgba(183, 255, 60, .75);
}

.cursor-ring {
  width:
    34px;

  height:
    34px;

  border:
    1px solid
    rgba(183, 255, 60, .45);

  border-radius:
    50%;

  transition:
    width .25s var(--ease),
    height .25s var(--ease),
    border-color .25s var(--ease),
    background .25s var(--ease),
    opacity .25s ease;
}

body.cursor-hover .cursor-ring {
  width:
    52px;

  height:
    52px;

  border-color:
    var(--accent);

  background:
    rgba(183, 255, 60, .045);
}

@media (pointer: fine) {

  body.has-enhanced-cursor,
  body.has-enhanced-cursor a,
  body.has-enhanced-cursor button {
    cursor:
      none;
  }
}

@media (pointer: coarse), (max-width: 700px) {

  .cursor-core,
  .cursor-ring {
    display:
      none;
  }
}


/* =========================================================
   LIGHT MODE — EXTRA
========================================================= */

body.light .added-command-backdrop {
  background:
    rgba(20, 25, 18, .42);
}

body.light .added-back-top,
body.light .added-mini-status {
  background:
    rgba(255, 255, 255, .78);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

    scroll-behavior:
      auto !important;
  }

  .reveal {
    opacity:
      1;

    transform:
      none;
  }

  .cursor-glow {
    display:
      none;
  }

  .cursor-ring,
  .added-command-box,
  .added-command-palette,
  .added-back-top,
  .project::after,
  .case-modal,
  .case-modal-dialog,
  .cs2-overlay,
  .cs2-shell {
    transition:
      none !important;
  }

  .added-live-badge i {
    animation:
      none !important;
  }

  .case-modal-dialog,
  .cs2-shell {
    transform:
      none;
  }
}
/* =========================================================
   CURSOR — KEEP ABOVE ALL MODALS
========================================================= */

.cursor-core,
.cursor-ring {
  position: fixed;

  left: 0;
  top: 0;

  pointer-events: none;

  /* Must be higher than .cs2-overlay (1500) */
  z-index: 2000;

  opacity: 0;

  transform:
    translate(-50%, -50%);

  will-change:
    transform,
    opacity;
}

.cursor-core {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--accent);

  box-shadow:
    0 0 18px
    rgba(183, 255, 60, .75);
}

.cursor-ring {
  width: 34px;
  height: 34px;

  border:
    1px solid
    rgba(183, 255, 60, .45);

  border-radius: 50%;

  transition:
    width .25s var(--ease),
    height .25s var(--ease),
    border-color .25s var(--ease),
    background .25s var(--ease),
    opacity .25s ease;
}

body.cursor-hover .cursor-ring {
  width: 52px;
  height: 52px;

  border-color:
    var(--accent);

  background:
    rgba(183, 255, 60, .045);
}