/* =========================================================
   MAJI PC REPAIR — SHARED SITE SHELL
   Navigation, atmosphere, cards, buttons, mobile behavior
   ========================================================= */

:root {
  --maji-bg-0: #03050a;
  --maji-bg-1: #070b14;
  --maji-bg-2: #0b1120;

  --maji-panel: rgba(12, 20, 35, 0.78);
  --maji-panel-solid: #0c1423;
  --maji-panel-hover: rgba(18, 31, 51, 0.92);

  --maji-text: #f3f9ff;
  --maji-muted: #9db0c3;

  --maji-cyan: #65dcff;
  --maji-blue: #5798ff;
  --maji-violet: #b884ff;
  --maji-green: #79ffc9;

  --maji-line: rgba(101, 220, 255, 0.2);
  --maji-line-strong: rgba(101, 220, 255, 0.48);

  --maji-radius-sm: 11px;
  --maji-radius-md: 18px;
  --maji-radius-lg: 26px;

  --maji-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48);

  --maji-glow:
    0 0 34px rgba(101, 220, 255, 0.12);
}

html {
  scroll-behavior: smooth;
}

body.maji-enhanced {
  min-height: 100vh;
  overflow-x: hidden;

  color: var(--maji-text);

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(87, 152, 255, 0.16),
      transparent 30rem
    ),
    radial-gradient(
      circle at 88% 17%,
      rgba(184, 132, 255, 0.15),
      transparent 34rem
    ),
    radial-gradient(
      circle at 50% 110%,
      rgba(101, 220, 255, 0.1),
      transparent 36rem
    ),
    linear-gradient(
      145deg,
      var(--maji-bg-0),
      var(--maji-bg-1) 48%,
      var(--maji-bg-2)
    );

  background-attachment: fixed;
}

body.maji-enhanced::before {
  position: fixed;
  inset: 0;
  z-index: -2;

  content: "";
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(101, 220, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(101, 220, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 44px 44px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9),
      transparent 88%
    );
}

body.maji-enhanced::after {
  position: fixed;
  inset: 0;
  z-index: 9999;

  content: "";
  pointer-events: none;

  opacity: 0.12;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 3px,
      rgba(255, 255, 255, 0.018) 4px
    );
}

/* =========================
   Top progress line
   ========================= */

.maji-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;

  width: 0;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--maji-blue),
      var(--maji-cyan),
      var(--maji-violet)
    );

  box-shadow:
    0 0 18px rgba(101, 220, 255, 0.8);

  transition: width 0.08s linear;
}

/* =========================
   Shared header
   ========================= */

body.maji-enhanced .site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;

  width: 100%;
  min-height: 72px;
  padding:
    0.85rem
    clamp(1rem, 4vw, 4rem);

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

  background:
    linear-gradient(
      180deg,
      rgba(3, 7, 14, 0.94),
      rgba(5, 10, 19, 0.84)
    );

  box-shadow:
    0 14px 42px rgba(0, 0, 0, 0.22);

  backdrop-filter:
    blur(20px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(135%);
}

body.maji-enhanced .site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;

  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(101, 220, 255, 0.65),
      rgba(184, 132, 255, 0.38),
      transparent
    );
}

body.maji-enhanced .brand {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 0.7rem;

  color: var(--maji-text);

  font-size:
    clamp(0.98rem, 2vw, 1.28rem);

  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

body.maji-enhanced .brand::before {
  width: 13px;
  height: 13px;

  border:
    1px solid rgba(101, 220, 255, 0.8);

  border-radius: 3px;

  content: "";

  background:
    linear-gradient(
      135deg,
      rgba(101, 220, 255, 0.9),
      rgba(184, 132, 255, 0.6)
    );

  box-shadow:
    0 0 18px rgba(101, 220, 255, 0.54);

  transform: rotate(45deg);
}

/* =========================
   Navigation
   ========================= */

body.maji-enhanced .site-nav-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

body.maji-enhanced .site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

body.maji-enhanced .site-nav a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;
  padding: 0.55rem 0.75rem;

  border:
    1px solid transparent;

  border-radius: 999px;

  color: var(--maji-muted);

  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.085em;
  line-height: 1;
  text-decoration: none;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

body.maji-enhanced .site-nav a:hover,
body.maji-enhanced .site-nav a:focus-visible,
body.maji-enhanced .site-nav a.active,
body.maji-enhanced
.site-nav a[aria-current="page"] {
  color: var(--maji-text);

  border-color:
    rgba(101, 220, 255, 0.3);

  background:
    linear-gradient(
      135deg,
      rgba(101, 220, 255, 0.11),
      rgba(184, 132, 255, 0.07)
    );

  box-shadow:
    inset 0 0 20px
    rgba(101, 220, 255, 0.045);

  transform: translateY(-1px);
}

body.maji-enhanced
.site-nav a.active::after,
body.maji-enhanced
.site-nav a[aria-current="page"]::after {
  position: absolute;
  right: 22%;
  bottom: 3px;
  left: 22%;

  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--maji-cyan),
      transparent
    );

  box-shadow:
    0 0 9px rgba(101, 220, 255, 0.8);
}

.maji-menu-button {
  display: none;

  width: 44px;
  height: 42px;
  padding: 0;

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

  border-radius: 11px;

  background:
    rgba(101, 220, 255, 0.055);

  color: var(--maji-text);
  cursor: pointer;
}

.maji-menu-button span,
.maji-menu-button::before,
.maji-menu-button::after {
  display: block;

  width: 20px;
  height: 2px;
  margin: 4px auto;

  border-radius: 999px;

  content: "";

  background: currentColor;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.maji-menu-button[aria-expanded="true"] span {
  opacity: 0;
}

.maji-menu-button[aria-expanded="true"]::before {
  transform:
    translateY(6px)
    rotate(45deg);
}

.maji-menu-button[aria-expanded="true"]::after {
  transform:
    translateY(-6px)
    rotate(-45deg);
}

/* =========================
   Main content
   ========================= */

body.maji-enhanced .maji-main,
body.maji-enhanced .page-shell {
  position: relative;
  z-index: 1;
}

body.maji-enhanced .page-shell {
  width:
    min(1180px, calc(100% - 2rem));

  margin-inline: auto;
}

body.maji-enhanced .eyebrow {
  color: var(--maji-cyan);

  text-shadow:
    0 0 20px rgba(101, 220, 255, 0.26);
}

body.maji-enhanced h1 {
  color: var(--maji-text);

  text-wrap: balance;

  text-shadow:
    0 12px 40px rgba(0, 0, 0, 0.42);
}

body.maji-enhanced h2,
body.maji-enhanced h3 {
  text-wrap: balance;
}

body.maji-enhanced .lead {
  color: var(--maji-muted);
}

/* =========================
   Panels and cards
   ========================= */

body.maji-enhanced .panel,
body.maji-enhanced .card,
body.maji-enhanced .service-card,
body.maji-enhanced .tutorial-card {
  position: relative;

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

  background:
    linear-gradient(
      155deg,
      rgba(17, 29, 48, 0.82),
      rgba(7, 12, 23, 0.92)
    );

  box-shadow:
    var(--maji-shadow),
    inset 0 1px 0
    rgba(255, 255, 255, 0.025);

  backdrop-filter: blur(14px);

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

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

body.maji-enhanced .panel::before,
body.maji-enhanced .card::before,
body.maji-enhanced .service-card::before,
body.maji-enhanced .tutorial-card::before {
  position: absolute;
  top: -1px;
  left: 9%;

  width: 34%;
  height: 1px;

  content: "";
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(101, 220, 255, 0.85),
      transparent
    );
}

body.maji-enhanced .panel:hover,
body.maji-enhanced .card:hover,
body.maji-enhanced .service-card:hover,
body.maji-enhanced .tutorial-card:hover {
  border-color:
    rgba(101, 220, 255, 0.34);

  background:
    linear-gradient(
      155deg,
      rgba(20, 36, 58, 0.9),
      rgba(8, 14, 26, 0.96)
    );

  box-shadow:
    var(--maji-shadow),
    var(--maji-glow);

  transform: translateY(-3px);
}

/* =========================
   Buttons
   ========================= */

body.maji-enhanced .button,
body.maji-enhanced .btn,
body.maji-enhanced button[type="submit"],
body.maji-enhanced input[type="submit"] {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(101, 220, 255, 0.34);

  color: var(--maji-text);

  background:
    linear-gradient(
      135deg,
      rgba(38, 112, 170, 0.38),
      rgba(98, 56, 151, 0.28)
    );

  box-shadow:
    0 13px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0
    rgba(255, 255, 255, 0.07);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

body.maji-enhanced .button::before,
body.maji-enhanced .btn::before {
  position: absolute;
  top: -70%;
  left: -45%;

  width: 38%;
  height: 240%;

  content: "";
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent
    );

  transform: rotate(18deg);

  transition: left 0.45s ease;
}

body.maji-enhanced .button:hover::before,
body.maji-enhanced .btn:hover::before {
  left: 115%;
}

body.maji-enhanced .button:hover,
body.maji-enhanced .btn:hover,
body.maji-enhanced button[type="submit"]:hover,
body.maji-enhanced input[type="submit"]:hover {
  border-color:
    rgba(101, 220, 255, 0.72);

  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(101, 220, 255, 0.12);

  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* =========================
   Forms
   ========================= */

body.maji-enhanced input,
body.maji-enhanced textarea,
body.maji-enhanced select {
  border:
    1px solid
    rgba(101, 220, 255, 0.18);

  border-radius: var(--maji-radius-sm);

  color: var(--maji-text);

  background:
    rgba(3, 8, 16, 0.66);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.025);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

body.maji-enhanced input:focus,
body.maji-enhanced textarea:focus,
body.maji-enhanced select:focus {
  outline: none;

  border-color:
    rgba(101, 220, 255, 0.66);

  background:
    rgba(4, 11, 21, 0.9);

  box-shadow:
    0 0 0 3px
    rgba(101, 220, 255, 0.09);
}

/* =========================
   Media
   ========================= */

body.maji-enhanced img,
body.maji-enhanced video {
  max-width: 100%;
}

body.maji-enhanced .resume-frame img,
body.maji-enhanced video {
  border:
    1px solid
    rgba(101, 220, 255, 0.14);

  box-shadow:
    0 20px 65px rgba(0, 0, 0, 0.34);
}

/* =========================
   Footer
   ========================= */

body.maji-enhanced .footer {
  position: relative;

  margin-top: 3rem;
  padding: 2.2rem 1rem 3rem;

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

  color: var(--maji-muted);

  background:
    linear-gradient(
      180deg,
      rgba(3, 7, 14, 0),
      rgba(3, 7, 14, 0.7)
    );
}

/* =========================
   Reveal animation
   ========================= */

.maji-reveal {
  opacity: 0;

  transform:
    translateY(18px)
    scale(0.995);

  transition:
    opacity 0.65s ease,
    transform 0.65s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.maji-reveal.maji-visible {
  opacity: 1;
  transform: none;
}

/* =========================
   Mobile navigation
   ========================= */

@media (max-width: 900px) {
  body.maji-enhanced .site-header {
    align-items: center;
  }

  body.maji-enhanced .site-nav-wrap {
    margin-left: auto;
  }

  .maji-menu-button {
    display: block;
  }

  body.maji-enhanced .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;

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

    gap: 0.45rem;

    max-height: 0;
    padding: 0 1rem;

    overflow: hidden;

    border-bottom:
      1px solid transparent;

    background:
      rgba(3, 8, 16, 0.97);

    opacity: 0;

    pointer-events: none;

    transform: translateY(-8px);

    transition:
      max-height 0.28s ease,
      padding 0.28s ease,
      opacity 0.2s ease,
      transform 0.28s ease,
      border-color 0.28s ease;
  }

  body.maji-enhanced
  .site-nav.maji-nav-open {
    max-height: 520px;
    padding: 0.8rem 1rem 1rem;

    border-color: var(--maji-line);

    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  body.maji-enhanced .site-nav a {
    width: 100%;
    min-height: 44px;

    border:
      1px solid
      rgba(101, 220, 255, 0.1);

    border-radius: 10px;

    background:
      rgba(101, 220, 255, 0.025);
  }
}

@media (max-width: 560px) {
  body.maji-enhanced .site-header {
    min-height: 66px;
    padding-inline: 0.85rem;
  }

  body.maji-enhanced .brand {
    font-size: 0.84rem;
    letter-spacing: 0.085em;
  }

  body.maji-enhanced .brand::before {
    width: 10px;
    height: 10px;
  }

  body.maji-enhanced .site-nav {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Accessibility
   ========================= */

body.maji-enhanced a:focus-visible,
body.maji-enhanced button:focus-visible {
  outline:
    2px solid var(--maji-cyan);

  outline-offset: 3px;
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .maji-reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   MAJI PC REPAIR — RÉSUMÉ IMAGE
   ========================================================= */

body.maji-enhanced .resume-frame {
  padding: clamp(0.55rem, 1.6vw, 1rem);
  overflow: hidden;
}

body.maji-enhanced .resume-frame > a {
  display: block;
  border-radius: 16px;
  overflow: hidden;
}

body.maji-enhanced .resume-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;

  border-radius: 16px;

  background: #02050a;

  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

body.maji-enhanced .resume-frame:hover .resume-image {
  transform: scale(1.006);
  filter: brightness(1.035);
}

@media (max-width: 820px) {
  body.maji-enhanced .resume-frame {
    padding: 0.4rem;
    border-radius: 16px;
  }

  body.maji-enhanced .resume-image,
  body.maji-enhanced .resume-frame > a {
    border-radius: 12px;
  }
}

/* ==================================================
   MAJI MOBILE FIX — Android / iPhone overflow patch
   ================================================== */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

body {
  margin: 0;
}

main,
section,
.hero,
.hero-inner,
.container,
.services,
.service-grid,
.cards,
.grid,
.card,
.panel,
.glass-card,
.hero-card {
  max-width: 100%;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  main,
  section,
  .hero,
  .hero-inner,
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 48px;
  }

  .hero-card,
  .glass-card,
  .panel,
  .card {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  h1 {
    font-size: clamp(2.5rem, 13vw, 4rem);
    line-height: 0.95;
  }

  h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .service-grid,
  .cards,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .cta,
  .button,
  button,
  a.button {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  main,
  section,
  .hero,
  .hero-inner,
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero-card {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==================================================
   MAJI MOBILE HARD PATCH — kill remaining phone overflow
   ================================================== */

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body {
    position: relative;
  }

  body * {
    max-width: 100vw;
  }

  [style*="left:"],
  [style*="right:"],
  .orb,
  .glow,
  .halo,
  .aura,
  .beam,
  .star,
  .stars,
  .nebula,
  .cosmic,
  .background,
  .background-glow,
  .decor,
  .decoration,
  .shell-orb,
  .hero-orb,
  .hero-glow {
    max-width: 100vw !important;
  }

  .orb,
  .glow,
  .halo,
  .aura,
  .beam,
  .star,
  .stars,
  .nebula,
  .cosmic,
  .background-glow,
  .decor,
  .decoration,
  .shell-orb,
  .hero-orb,
  .hero-glow {
    overflow: hidden !important;
    pointer-events: none;
  }

  section,
  header,
  nav,
  main,
  footer,
  .hero,
  .hero-inner,
  .hero-shell,
  .container,
  .wrap,
  .content,
  .panel,
  .card,
  .glass-card,
  .hero-card {
    left: auto !important;
    right: auto !important;
    transform: none;
  }
}

@media (max-width: 430px) {
  body * {
    max-width: 100%;
  }

  .hero,
  .hero-inner,
  .hero-shell,
  .container,
  .wrap,
  main,
  section {
    overflow-x: hidden;
  }
}