.page-skills {
  --skills-panel: rgba(12, 16, 26, 0.52);
  --skills-panel-2: rgba(255, 255, 255, 0.04);
  --skills-text: rgba(245, 248, 255, 0.94);
  --skills-muted: rgba(211, 220, 236, 0.74);
  --skills-line: rgba(132, 166, 255, 0.18);
  --skills-accent: rgba(120, 146, 255, 0.95);
  --skills-accent-soft: rgba(120, 146, 255, 0.14);
  --skills-glow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 24px 60px rgba(0, 0, 0, 0.26), 0 0 38px rgba(120, 146, 255, 0.08);
  --skills-bg-base:
    radial-gradient(circle at 18% 20%, rgba(92, 125, 255, 0.22), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(149, 74, 255, 0.18), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(37, 55, 116, 0.36), transparent 34%),
    linear-gradient(135deg, #05070d 0%, #0a1020 42%, #09060f 100%);
  --skills-bg-overlay:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04), transparent 62%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.03), transparent 44%, rgba(255, 255, 255, 0.02) 82%, transparent 100%);
  --skills-bg-blend: screen;
  --skills-bg-size: 180% 180%, 180% 180%, 160% 160%, 100% 100%;
  background-color: #05070d;
  background-image: var(--skills-bg-base);
  background-size: var(--skills-bg-size);
  background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%;
  background-repeat: no-repeat;
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), background 0.35s var(--ease);
  animation: skillsBackgroundShift 40s ease-in-out infinite;
  will-change: background-position;
}

.page-skills::before,
.page-skills::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

.page-skills::before {
  inset: 0;
  background-image: var(--skills-bg-overlay);
  background-size: 180% 180%, 160% 160%;
  background-position: 0% 0%, 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: var(--skills-bg-blend);
  opacity: 0.55;
  animation: skillsOverlayDrift 40s linear infinite;
}

.page-skills::after {
  left: 0;
  right: 0;
  top: -512px;
  bottom: -512px;
  opacity: 0.42;
  filter: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cg fill='none'%3E%3Ccircle cx='48' cy='52' r='1.2' fill='%23ffffff' fill-opacity='.62'/%3E%3Ccircle cx='118' cy='96' r='0.9' fill='%23ffffff' fill-opacity='.38'/%3E%3Ccircle cx='188' cy='42' r='1.1' fill='%2382a4ff' fill-opacity='.46'/%3E%3Ccircle cx='274' cy='84' r='0.95' fill='%23ffffff' fill-opacity='.34'/%3E%3Ccircle cx='346' cy='46' r='1.25' fill='%23ab88ff' fill-opacity='.36'/%3E%3Ccircle cx='430' cy='104' r='1.0' fill='%23ffffff' fill-opacity='.42'/%3E%3Ccircle cx='84' cy='182' r='1.0' fill='%23ffffff' fill-opacity='.36'/%3E%3Ccircle cx='154' cy='240' r='1.15' fill='%23ffffff' fill-opacity='.44'/%3E%3Ccircle cx='246' cy='196' r='0.9' fill='%2382a4ff' fill-opacity='.40'/%3E%3Ccircle cx='332' cy='234' r='1.2' fill='%23ffffff' fill-opacity='.32'/%3E%3Ccircle cx='418' cy='176' r='0.95' fill='%23ab88ff' fill-opacity='.34'/%3E%3Ccircle cx='470' cy='246' r='1.1' fill='%23ffffff' fill-opacity='.40'/%3E%3Ccircle cx='54' cy='336' r='1.0' fill='%23ffffff' fill-opacity='.40'/%3E%3Ccircle cx='126' cy='392' r='0.95' fill='%2382a4ff' fill-opacity='.36'/%3E%3Ccircle cx='214' cy='348' r='1.2' fill='%23ffffff' fill-opacity='.34'/%3E%3Ccircle cx='286' cy='430' r='1.0' fill='%23ffffff' fill-opacity='.30'/%3E%3Ccircle cx='372' cy='374' r='1.1' fill='%23ab88ff' fill-opacity='.34'/%3E%3Ccircle cx='454' cy='420' r='1.2' fill='%23ffffff' fill-opacity='.42'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 512px 512px;
  animation: skillsParticlesLayerA 26s linear infinite;
}

.page-skills.skill-theme-dark {
  --skills-panel: rgba(10, 14, 22, 0.54);
  --skills-panel-2: rgba(255, 255, 255, 0.035);
  --skills-text: rgba(246, 248, 253, 0.95);
  --skills-muted: rgba(208, 216, 231, 0.74);
  --skills-line: rgba(110, 130, 170, 0.16);
  --skills-accent: rgba(126, 154, 255, 0.92);
  --skills-accent-soft: rgba(126, 154, 255, 0.12);
  --skills-glow: 0 0 0 1px rgba(255, 255, 255, 0.025), 0 20px 44px rgba(0, 0, 0, 0.24), 0 0 24px rgba(126, 154, 255, 0.05);
  --skills-bg-base:
    radial-gradient(circle at 16% 18%, rgba(70, 92, 145, 0.14), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(60, 78, 122, 0.10), transparent 28%),
    radial-gradient(circle at 50% 84%, rgba(17, 24, 42, 0.30), transparent 34%),
    linear-gradient(135deg, #04060b 0%, #0a0d14 44%, #05070c 100%);
  --skills-bg-overlay:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02), transparent 58%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.02), transparent 42%, rgba(110, 130, 170, 0.03) 78%, transparent 100%);
}

.page-skills.skill-theme-shadow {
  --skills-panel: rgba(18, 20, 24, 0.56);
  --skills-panel-2: rgba(255, 255, 255, 0.03);
  --skills-text: rgba(245, 247, 250, 0.95);
  --skills-muted: rgba(200, 205, 215, 0.74);
  --skills-line: rgba(160, 170, 190, 0.16);
  --skills-accent: rgba(200, 205, 215, 0.6);
  --skills-accent-soft: rgba(200, 205, 215, 0.08);
  --skills-glow:
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 26px 60px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(200, 205, 215, 0.06);
  --skills-bg-base:
    linear-gradient(#5c5b5b);

  --skills-bg-overlay:
    radial-gradient(circle at 50% 50%, rgba(200, 205, 215, 0.06), transparent 56%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.02), transparent 40%, rgba(180, 190, 210, 0.04) 75%, transparent 100%);
}

.page-skills.skill-theme-neon {
  --skills-panel: rgba(4, 11, 24, 0.74);
  --skills-panel-2: rgba(90, 170, 255, 0.035);

  --skills-text: rgba(238, 244, 252, 0.96);
  --skills-muted: rgba(184, 197, 214, 0.72);

  --skills-line: rgba(84, 112, 150, 0.18);

  --skills-accent: rgba(146, 212, 255, 0.92);
  --skills-accent-soft: rgba(88, 162, 245, 0.12);

  --skills-glow:
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 24px 56px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(58, 120, 210, 0.10),
    0 0 42px rgba(40, 90, 170, 0.06);

  --skills-bg-base:
    linear-gradient(120deg, #0B162C 50%, #1C2942 43%, #3B556D 100%);

  --skills-bg-overlay:
    radial-gradient(circle at 50% 50%, rgba(74, 156, 240, 0.08), transparent 64%),
    linear-gradient(120deg, rgba(255,255,255,0.018), transparent 40%, rgba(64,132,220,0.045) 76%, transparent 100%);

  --skills-bg-blend: screen;
}

/* Supprime le contour gold au hover */
.page-skills .logo-btn::after {
  border: none !important;
}

/* Supprime le contour gold au hover */
.page-skills .menu-link::after {
  border: none !important;
}


.page-skills.skill-theme-neon::before,
.page-skills.skill-theme-neon::after {
  animation: none;
}

.page-skills.skill-theme-neon::after {
  background-image: none;
  opacity: 0;
}


.page-skills.skill-theme-shadow::before,
.page-skills.skill-theme-shadow::after {
  animation: none;
}

.page-skills.skill-theme-shadow::after {
  background-image: none;
  opacity: 0;
}

@keyframes skillsBackgroundShift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%; }
  50% { background-position: 18% 12%, 84% 24%, 46% 88%, 50% 50%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%; }
}

@keyframes skillsOverlayDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.50;
  }
  100% {
    transform: translate3d(1%, -1%, 0) scale(1.02);
    opacity: 0.60;
  }
}

@keyframes skillsParticlesLayerA {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -512px, 0); }
}

.page-skills,
.page-skills .h1,
.page-skills .h2,
.page-skills .h3,
.page-skills .small,
.page-skills .lead,
.page-skills p,
.page-skills label,
.page-skills input,
.page-skills textarea,
.page-skills select,
.page-skills button {
  color: var(--skills-text);
}

.page-skills .lead,
.page-skills .small,
.page-skills p,
.page-skills label {
  color: var(--skills-muted);
}

.page-skills main,
.page-skills .header,
.page-skills .footer {
  position: relative;
  z-index: 1;
}

.page-skills .header.is-nav-open {
  z-index: 90;
}

.page-head {
  padding-top: 25px;
}

.skills-hero {
  padding-bottom: 10px;
}

.skills-hero__grid,
.skills-cta,
.motion-layout {
  display: grid;
  gap: 18px;
}

.skills-hero__grid {
  grid-template-columns: 1.35fr 0.65fr;
  align-items: center;
  gap: 40px;
}

.motion-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: stretch;
}

.skills-hero__actions,
.skills-hero__badges,
.theme-switcher,
.device-switcher,
.skills-cta__actions,
.before-after-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.skills-panel,
.skills-cta,
.hero-console,
.hero-intro,
.before-after-panel,
.instagram-panel {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid var(--skills-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    var(--skills-panel);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--skills-glow);
}

.page-skills .card.skills-panel,
.page-skills .skills-cta,
.page-skills .hero-console,
.page-skills .hero-intro,
.page-skills .before-after-panel,
.page-skills .instagram-panel,
.page-skills .browser-shell,
.page-skills .before-after-stage,
.page-skills .compare-card,
.page-skills .compare-stat,
.page-skills .instagram-stage,
.page-skills .instagram-post {
  position: relative;
}

.page-skills .card.skills-panel::before,
.page-skills .skills-cta::before,
.page-skills .hero-console::before,
.page-skills .hero-intro::before,
.page-skills .before-after-panel::before,
.page-skills .instagram-panel::before,
.page-skills .browser-shell::before,
.page-skills .before-after-stage::before,
.page-skills .compare-card::before,
.page-skills .compare-stat::before,
.page-skills .instagram-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 34%, var(--skills-accent-soft) 68%, rgba(255,255,255,0.04) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.78;
  pointer-events: none;
}

.hero-console {
  padding: 16px;
  max-width: 620px;
  width: 100%;
  justify-self: end;
}

.hero-intro {
  padding: 32px;
  border-radius: 26px;
  backdrop-filter: blur(10px);
  max-width: 780px;
}

.skills-wide-block {
  margin-top: 18px;
}

.skills-panel--full {
  width: 100%;
}

.theme-pill,
.device-pill,
.before-after-pill {
  appearance: none;
  padding: 8px 14px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--skills-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: var(--skills-text);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease), background 0.28s var(--ease);
}

.theme-pill:hover,
.device-pill:hover,
.before-after-pill:hover {
  border-color: var(--skills-accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 0 22px var(--skills-accent-soft);
  transform: translateY(-1px);
}

.theme-pill.is-active,
.device-pill.is-active,
.before-after-pill.is-active {
  background: linear-gradient(180deg, var(--skills-accent-soft), rgba(255, 255, 255, 0.04));
  border-color: var(--skills-accent);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2), 0 0 26px var(--skills-accent-soft);
}


.page-skills.skill-theme-neon .skills-panel,
.page-skills.skill-theme-neon .skills-cta,
.page-skills.skill-theme-neon .hero-console,
.page-skills.skill-theme-neon .hero-intro,
.page-skills.skill-theme-neon .before-after-panel,
.page-skills.skill-theme-neon .instagram-panel,
.page-skills.skill-theme-neon .browser-shell,
.page-skills.skill-theme-neon .before-after-stage,
.page-skills.skill-theme-neon .instagram-stage,
.page-skills.skill-theme-neon .compare-card,
.page-skills.skill-theme-neon .compare-stat {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)),
    rgba(3, 10, 22, 0.78);
  border-color: rgba(82, 112, 148, 0.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 22px 52px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(46, 108, 196, 0.07);
}

.page-skills.skill-theme-neon .theme-pill,
.page-skills.skill-theme-neon .device-pill,
.page-skills.skill-theme-neon .before-after-pill,
.page-skills.skill-theme-neon .preview-pill,
.page-skills.skill-theme-neon .instagram-loadmore__btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)),
    rgba(6, 14, 28, 0.82);
  border-color: rgba(88, 120, 158, 0.22);
  color: rgba(236, 242, 250, 0.94);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(56, 118, 206, 0.05);
}

.page-skills.skill-theme-neon .theme-pill.is-active,
.page-skills.skill-theme-neon .device-pill.is-active,
.page-skills.skill-theme-neon .before-after-pill.is-active,
.page-skills.skill-theme-neon .preview-pill.is-active {
  background:
    linear-gradient(180deg, rgba(120, 190, 255, 0.10), rgba(255,255,255,0.02)),
    rgba(8, 18, 34, 0.88);
  border-color: rgba(170, 220, 255, 0.46);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    0 0 22px rgba(108, 188, 255, 0.10);
}

.page-skills.skill-theme-neon .h1,
.page-skills.skill-theme-neon .h2,
.page-skills.skill-theme-neon .h3,
.page-skills.skill-theme-neon .compare-card__title,
.page-skills.skill-theme-neon .instagram-profile__head strong {
  color: rgba(240, 245, 252, 0.97);
}

.page-skills.skill-theme-neon .lead,
.page-skills.skill-theme-neon .small,
.page-skills.skill-theme-neon p,
.page-skills.skill-theme-neon .instagram-profile__bio p,
.page-skills.skill-theme-neon .instagram-profile__stats {
  color: rgba(184, 197, 214, 0.72);
}

/* Skills menu */

.page-skills .logo-btn {
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    color 0.35s var(--ease),
    transform 0.25s var(--ease);
}

.page-skills .logo-btn i,
.page-skills .logo-btn svg,
.page-skills .logo-btn span {
  transition:
    color 0.35s var(--ease),
    text-shadow 0.35s var(--ease),
    opacity 0.35s var(--ease);
}

.page-skills .menu-panel {
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
}

.page-skills .menu-panel a {
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.page-skills.skill-theme-dark .logo-btn {
  border-color: rgba(110, 130, 170, 0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(10, 14, 22, 0.72);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255,255,255,0.02);
  color: var(--skills-text);
}

.page-skills.skill-theme-dark .menu-panel {
  border-color: rgba(110, 130, 170, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(8, 12, 18, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.page-skills.skill-theme-shadow .logo-btn {
  border-color: rgba(160, 170, 190, 0.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    rgba(18, 20, 24, 0.78);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(200, 205, 215, 0.08);
  color: var(--skills-text);
}

.page-skills.skill-theme-shadow .logo-btn i,
.page-skills.skill-theme-shadow .logo-btn svg,
.page-skills.skill-theme-shadow .logo-btn span {
  color: rgba(232, 236, 244, 0.92);
  text-shadow: 0 0 10px rgba(200, 205, 215, 0.18);
}

.page-skills.skill-theme-shadow .menu-panel {
  border-color: rgba(160, 170, 190, 0.18);
  background:
    radial-gradient(circle at top center, rgba(200, 205, 215, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)),
    rgba(14, 16, 20, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 0 24px rgba(200, 205, 215, 0.05);
}

.page-skills.skill-theme-neon .logo-btn {
  border-color: rgba(82, 196, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(6, 12, 24, 0.74);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(82, 196, 255, 0.14),
    0 0 34px rgba(82, 196, 255, 0.08);
  color: var(--skills-text);
}

.page-skills.skill-theme-neon .logo-btn i,
.page-skills.skill-theme-neon .logo-btn svg,
.page-skills.skill-theme-neon .logo-btn span {
  color: rgba(120, 220, 255, 0.98);
  text-shadow:
    0 0 8px rgba(82, 196, 255, 0.55),
    0 0 18px rgba(82, 196, 255, 0.24);
}

.page-skills.skill-theme-neon .menu-panel {
  border-color: rgba(82, 196, 255, 0.22);
  background:
    radial-gradient(circle at top center, rgba(82, 196, 255, 0.10), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)),
    rgba(4, 10, 18, 0.84);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 26px rgba(82, 196, 255, 0.10);
}

.page-skills.skill-theme-dark .logo-btn[aria-expanded="true"],
.page-skills.skill-theme-dark .logo-btn.is-active,
.page-skills.skill-theme-dark .menu-panel.is-open {
  border-color: rgba(126, 154, 255, 0.24);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(126, 154, 255, 0.07);
}

.page-skills.skill-theme-shadow .logo-btn[aria-expanded="true"],
.page-skills.skill-theme-shadow .logo-btn.is-active,
.page-skills.skill-theme-shadow .menu-panel.is-open {
  border-color: rgba(200, 205, 215, 0.26);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(200, 205, 215, 0.08);
}

.page-skills.skill-theme-neon .logo-btn[aria-expanded="true"],
.page-skills.skill-theme-neon .logo-btn.is-active,
.page-skills.skill-theme-neon .menu-panel.is-open {
  border-color: rgba(82, 196, 255, 0.34);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(82, 196, 255, 0.14),
    0 0 42px rgba(82, 196, 255, 0.08);
}

.page-skills.skill-theme-dark .menu-panel a:hover,
.page-skills.skill-theme-dark .menu-panel a:focus-visible {
  color: var(--skills-text);
  border-color: rgba(126, 154, 255, 0.20);
  background: rgba(126, 154, 255, 0.08);
}

.page-skills.skill-theme-shadow .menu-panel a:hover,
.page-skills.skill-theme-shadow .menu-panel a:focus-visible {
  color: var(--skills-text);
  border-color: rgba(200, 205, 215, 0.22);
  background: rgba(200, 205, 215, 0.08);
}

.page-skills.skill-theme-neon .menu-panel a:hover,
.page-skills.skill-theme-neon .menu-panel a:focus-visible {
  color: rgba(235, 248, 255, 0.98);
  border-color: rgba(82, 196, 255, 0.26);
  background: rgba(82, 196, 255, 0.10);
  box-shadow: 0 0 16px rgba(82, 196, 255, 0.10);
}

/* Website preview iframe */

.browser-shell {
  border-radius: 22px;
  border: 1px solid var(--skills-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(10, 10, 12, 0.34);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--skills-glow);
  padding: 12px;
  margin-top: 18px;
}

.browser-shell--full {
  width: 100%;
  max-width: 100%;
}

.browser-shell--reduced {
  max-width: 1040px;
  margin-inline: auto;
}

.device-switcher {
  margin-top: 18px;
}

.device-switcher--centered {
  justify-content: center;
  align-items: center;
}

.browser-shell[data-device-frame="desktop"] {
  max-width: 1040px;
  margin-inline: auto;
}

.browser-shell[data-device-frame="tablet"] {
  max-width: 760px;
  margin-inline: auto;
}

.browser-shell[data-device-frame="mobile"] {
  max-width: 360px;
  margin-inline: auto;
}

.browser-shell__bar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.browser-shell__dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.browser-shell__address {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--skills-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--skills-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-shell__viewport {
  min-height: 520px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--skills-line);
  background: #fff;
}

.browser-shell__viewport iframe {
  width: 100%;
  height: 520px;
  border: 0;
  background: #fff;
  display: block;
}

.browser-shell__viewport--wide {
  min-height: 560px;
}

.browser-shell__viewport--wide iframe {
  height: 560px;
}

.browser-shell[data-device-frame="desktop"] .browser-shell__viewport--wide,
.browser-shell[data-device-frame="tablet"] .browser-shell__viewport--wide,
.browser-shell[data-device-frame="mobile"] .browser-shell__viewport--wide {
  min-height: 500px;
}

.browser-shell[data-device-frame="desktop"] .browser-shell__viewport--wide iframe,
.browser-shell[data-device-frame="tablet"] .browser-shell__viewport--wide iframe,
.browser-shell[data-device-frame="mobile"] .browser-shell__viewport--wide iframe {
  height: 500px;
}

.skills-note {
  margin-top: 12px;
}

/* Before / After */

.before-after-panel,
.instagram-panel {
  border-radius: 26px;
  backdrop-filter: blur(10px);
  min-height: 560px;
}

.before-after-panel,
.instagram-panel {
  display: flex;
  flex-direction: column;
}

.before-after-switch {
  margin-top: 18px;
}

.before-after-stage {
  flex: 1;
  margin-top: 22px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--skills-line);
  background:
    radial-gradient(circle at 50% 50%, var(--skills-accent-soft), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.16);
}

.compare-card {
  padding: 24px;
  border-radius: 22px;
}

.compare-card--before,
.compare-card--after {
  display: none;
}

.before-after-stage.is-before .compare-card--before,
.before-after-stage.is-after .compare-card--after {
  display: block;
}

.compare-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.compare-card__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.compare-card__title {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.05;
  color: var(--skills-text);
}

.compare-card__text {
  margin: 18px 0 0;
  max-width: 54ch;
}

.compare-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: var(--skills-text);
  white-space: nowrap;
}

.compare-card__badge--accent {
  border-color: var(--skills-accent);
  background: var(--skills-accent-soft);
}

.compare-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.compare-stat {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--skills-line);
  background: rgba(255, 255, 255, 0.02);
}

.compare-stat span {
  display: block;
  font-size: 0.82rem;
  color: var(--skills-muted);
  margin-bottom: 8px;
}

.compare-stat strong {
  font-size: 1.35rem;
  color: var(--skills-text);
}

.compare-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.compare-btn {
  appearance: none;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: default;
  font: inherit;
}

.compare-btn--solid {
  background: rgba(255, 255, 255, 0.08);
  color: var(--skills-text);
  border-color: rgba(255, 255, 255, 0.08);
}

.compare-btn--ghost {
  background: transparent;
  color: var(--skills-muted);
  border-color: rgba(255, 255, 255, 0.1);
}

.compare-btn--accent {
  background: linear-gradient(135deg, var(--skills-accent-soft), rgba(255, 255, 255, 0.06));
  color: var(--skills-text);
  border-color: var(--skills-accent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.compare-btn--ghost-premium {
  background: rgba(255, 255, 255, 0.03);
  color: var(--skills-text);
  border-color: var(--skills-line);
}

.compare-card--before {
  background: linear-gradient(180deg, rgba(34, 34, 36, 0.92), rgba(20, 20, 22, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.compare-card--after {
  background:
    linear-gradient(180deg, rgba(18, 18, 22, 0.82), rgba(8, 8, 12, 0.9)),
    radial-gradient(circle at top right, var(--skills-accent-soft), transparent 34%);
  border: 1px solid var(--skills-line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.compare-card__glow {
  position: absolute;
  inset: auto -40px -50px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--skills-accent-soft), transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}

/* Instagram */

.instagram-stage {
  margin-top: 20px;
  border-radius: 20px;
  border: 1px solid var(--skills-line);
  overflow: hidden;
  background:
    radial-gradient(circle at top right, var(--skills-accent-soft), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(255,255,255,0.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 22px 44px rgba(0,0,0,0.18);
  flex: 1;
  max-height: 620px;
}

.instagram-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 18px;
}

.instagram-profile {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.instagram-profile__avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.instagram-profile__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.instagram-profile__head strong {
  color: var(--skills-text);
}

.instagram-profile__btn {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--skills-line);
  text-decoration: none;
  color: var(--skills-text);
  background: rgba(255,255,255,0.04);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.instagram-profile__btn:hover {
  transform: translateY(-1px);
  border-color: var(--skills-accent);
  background: var(--skills-accent-soft);
}

.instagram-profile__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  color: var(--skills-muted);
  font-size: 0.94rem;
}

.instagram-profile__stats strong,
.instagram-profile__bio strong {
  color: var(--skills-text);
}

.instagram-profile__bio {
  margin-top: 12px;
}

.instagram-profile__bio p {
  margin: 6px 0 0;
}

.instagram-feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 200px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding-right: 6px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--skills-accent) rgba(255,255,255,0.04);
}

.instagram-feed::-webkit-scrollbar {
  width: 8px;
}

.instagram-feed::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}

.instagram-feed::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

.instagram-feed::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.28);
}

.instagram-post {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.instagram-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
  display: block;
}

.instagram-post:hover img {
  transform: scale(1.05);
}

.instagram-post__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: white;
  transition: opacity .2s ease;
}

.instagram-post:hover .instagram-post__overlay {
  opacity: 1;
}

.instagram-feed__empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--skills-muted);
  padding: 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
}

.instagram-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.instagram-loadmore__btn {
  min-width: 180px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--skills-line);
  background: rgba(255,255,255,0.04);
  color: var(--skills-text);
  cursor: pointer;
  transition: transform .25s ease, opacity .25s ease, border-color .25s ease;
}

.instagram-loadmore__btn:hover {
  transform: translateY(-1px);
  border-color: var(--skills-accent, rgba(255,255,255,0.35));
}

.instagram-loadmore__btn:disabled {
  opacity: .6;
  cursor: default;
}

.instagram-loadmore__status {
  min-height: 20px;
  font-size: .92rem;
  color: var(--skills-muted);
}

.instagram-sentinel {
  width: 100%;
  height: 2px;
  margin-top: 8px;
}

/* CTA */

.skills-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.skills-hero__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
  width: 100%;
}

.skills-hero__actions .btn {
  margin-inline: auto;
}

.theme-switcher {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.preview-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.preview-pill {
  appearance: none;
  padding: 8px 14px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--skills-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: var(--skills-text);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease), background 0.28s var(--ease);
}

.preview-pill:hover {
  border-color: var(--skills-accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 0 22px var(--skills-accent-soft);
  transform: translateY(-1px);
}

.preview-pill.is-active {
  background: linear-gradient(180deg, var(--skills-accent-soft), rgba(255, 255, 255, 0.04));
  border-color: var(--skills-accent);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2), 0 0 26px var(--skills-accent-soft);
}

@media (max-width: 1100px) {
  .skills-hero__grid,
  .skills-cta,
  .motion-layout {
    grid-template-columns: 1fr;
  }

  .hero-console,
  .hero-intro,
  .browser-shell[data-device-frame="desktop"] {
    max-width: 100%;
    justify-self: stretch;
  }

  .before-after-panel,
  .instagram-panel {
    min-height: auto;
  }

  .before-after-stage,
  .instagram-stage {
    min-height: unset;
  }
}

@media (max-width: 768px) {
  .instagram-stage {
    max-height: 540px;
  }

  .instagram-shell {
    height: 100%;
    min-height: 0;
  }

  .instagram-feed {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .browser-shell__viewport {
    min-height: 360px;
  }

  .browser-shell__viewport iframe {
    height: 360px;
  }

  .browser-shell[data-device-frame="desktop"] .browser-shell__viewport--wide,
  .browser-shell[data-device-frame="tablet"] .browser-shell__viewport--wide {
    min-height: 420px;
  }

  .browser-shell[data-device-frame="desktop"] .browser-shell__viewport--wide iframe,
  .browser-shell[data-device-frame="tablet"] .browser-shell__viewport--wide iframe {
    height: 420px;
  }

  .browser-shell[data-device-frame="tablet"] {
    max-width: 100%;
  }

  .browser-shell[data-device-frame="mobile"] {
    max-width: 340px;
  }

  .browser-shell[data-device-frame="mobile"] .browser-shell__viewport--wide {
    min-height: 540px;
  }

  .browser-shell[data-device-frame="mobile"] .browser-shell__viewport--wide iframe {
    height: 540px;
  }

  .before-after-stage {
    padding: 14px;
  }

  .compare-card {
    padding: 20px;
  }

  .compare-card__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .compare-card__stats {
    grid-template-columns: 1fr;
  }

  .instagram-profile {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .instagram-profile__avatar {
    display: flex;
    justify-content: center;
  }

  .instagram-profile__head {
    flex-direction: column;
  }

  .instagram-profile__stats {
    justify-content: center;
  }

  .instagram-feed {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 35px;
    row-gap: 180px;
  }
}

@media (max-width: 520px) {
  .instagram-stage {
    max-height: 500px;
  }

  .instagram-feed {
    max-height: 100%;
  }

  .skills-hero__actions,
  .skills-hero__badges,
  .theme-switcher,
  .skills-cta__actions,
  .before-after-switch {
    display: grid;
    grid-template-columns: 1fr;
  }

  .device-switcher {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .theme-pill,
  .before-after-pill,
  .skills-cta__actions .btn,
  .skills-hero__actions .btn {
    width: 100%;
  }

  .device-pill {
    width: auto;
    min-width: 104px;
  }

  .browser-shell[data-device-frame="mobile"] {
    max-width: 100%;
  }

  .browser-shell[data-device-frame="mobile"] .browser-shell__viewport--wide {
    min-height: 500px;
  }

  .browser-shell[data-device-frame="mobile"] .browser-shell__viewport--wide iframe {
    height: 500px;
  }

  .browser-shell[data-device-frame="desktop"] .browser-shell__viewport--wide,
  .browser-shell[data-device-frame="tablet"] .browser-shell__viewport--wide {
    min-height: 320px;
  }

  .browser-shell[data-device-frame="desktop"] .browser-shell__viewport--wide iframe,
  .browser-shell[data-device-frame="tablet"] .browser-shell__viewport--wide iframe {
    height: 320px;
  }

  .before-after-stage {
    padding: 12px;
  }

  .compare-card {
    padding: 18px;
  }

  .compare-card__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .compare-btn {
    width: 100%;
  }

  .instagram-shell {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-skills,
  .page-skills::before,
  .page-skills::after {
    animation: none !important;
  }
}

.page-skills .footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--skills-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    var(--skills-panel);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 -12px 40px rgba(0, 0, 0, 0.18);
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    color 0.35s var(--ease);
}

.page-skills .footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, var(--skills-accent-soft), transparent 60%);
  opacity: 0.9;
}

.page-skills .footer,
.page-skills .footer p,
.page-skills .footer li,
.page-skills .footer a,
.page-skills .footer span,
.page-skills .footer small {
  color: var(--skills-muted);
  transition: color 0.35s var(--ease);
}

.page-skills .footer a:hover {
  color: var(--skills-text);
}

.page-skills .footer h1,
.page-skills .footer h2,
.page-skills .footer h3,
.page-skills .footer h4,
.page-skills .footer h5,
.page-skills .footer h6 {
  color: var(--skills-text);
}

.page-skills .footer .btn,
.page-skills .footer .footer-link,
.page-skills .footer .social-link {
  border-color: var(--skills-line);
  color: var(--skills-text);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.page-skills .footer .btn:hover,
.page-skills .footer .footer-link:hover,
.page-skills .footer .social-link:hover {
  border-color: var(--skills-accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 0 18px var(--skills-accent-soft);
}