/* Customer logos: consistent sizing and responsive layout */
.customer-logos {
  margin-top: 32px;
}

.customer-logos .logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  justify-content: center;
  align-items: center;
  gap: 20px 28px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Force a single row on wide screens (7 logos) */
@media (min-width: 1200px) {
  .customer-logos .logo-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

.customer-logos .logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}

.customer-logos .logo-item img {
  height: auto;
  max-height: clamp(26px, 3vw, 44px);
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.75);
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.customer-logos .logo-item img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.04);
}

/* Ensure odd last item stays on same row by letting items shrink a bit */
.customer-logos .logo-item {
  min-width: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .customer-logos .logo-grid {
    gap: 18px 24px;
    max-width: 900px;
  }
  .customer-logos .logo-item img {
    max-height: clamp(24px, 4vw, 40px);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .customer-logos .logo-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 14px 18px;
  }
  .customer-logos .logo-item {
    padding: 6px 8px;
  }
  .customer-logos .logo-item img {
    max-height: clamp(20px, 6vw, 36px);
  }
}
/* Base styles */
:root {
    --color-black: #090a0c;
    --color-white: #ffffff;
    --color-grey-1: #0B0C0F;
    --color-grey-5: #1A1D24;
    --color-grey-10: #23262F;
    --color-grey-20: #303236;
    --color-grey-50: #85878C;
    --color-grey-60: #9DA0A5;
    --color-grey-80: #C9CBCF;
    --color-grey-90: #E5E7EB;
    --color-grey-98: #F6F6F6;
    --color-blue: #3D7EFF;
    --color-orange: #FF5F0B;
    --gradient-primary: linear-gradient(90deg, #F58041 0%, #AC795C 25.6%, #887064 41.58%, #716A69 56.98%, #61656B 69.44%);
    --text-gradient: linear-gradient(135deg, white 30%, #d5d8f6 80%, #fdf7fe 100%);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Theme Variables */
    --bg-primary: var(--color-grey-1);
    --bg-secondary: var(--color-grey-5);
    --bg-tertiary: var(--color-grey-10);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-grey-80);
    --text-tertiary: var(--color-grey-60);
    --card-bg: var(--color-grey-10);
    --card-border: rgba(255, 255, 255, 0.1);
    
    /* Transition timing for theme changes */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme overrides */
html.light-theme {
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-grey-98);
    --bg-tertiary: var(--color-grey-90);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-grey-20);
    --text-tertiary: var(--color-grey-50);
    --card-bg: var(--color-white);
    --card-border: rgba(0, 0, 0, 0.1);
    --text-gradient: linear-gradient(135deg, var(--color-grey-10) 30%, var(--color-grey-5) 80%, var(--color-black) 100%);
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    transition: var(--theme-transition);
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-primary {
    color: #5A250A;
    background-color: #d1d1d1;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, #FFAA81 26.5%, #FFDA9F 37.5%, rgba(255, 170, 129, 0.50) 49%, rgba(210, 106, 58, 0.00) 92.5%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

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

.btn-secondary {
    color: var(--color-white);
    background-color: var(--color-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline {
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-arrow {
    height: 9px;
    width: 17px;
    margin-left: 6px;
    fill: currentColor;
}

/* Header styles */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 64px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.header-container {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10;
}

.logo {
    display: block;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.9;
}

.main-nav {
    margin-left: 77px;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a, 
.main-nav button {
    display: inline-flex;
    padding: 12px;
    font-size: 14px;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    white-space: pre;
}

.main-nav a:hover, 
.main-nav button:hover {
    color: var(--color-blue);
}

.dropdown {
    position: relative;
    padding:3.5px 0px;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA2Ij48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS40IiBkPSJtMSAxIDQgNCA0LTQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.dropdown-content {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    transition: opacity 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-grey-10);
    background-color: var(--color-grey-5);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 14px;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--color-grey-10);
}

.header-actions {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
}

/* Keep header above all visual layers */
header.header { z-index: 2000 !important; }

/* Always keep navbar logo visible above overlays and backgrounds */
.header .logo .logo-img {
    position: relative;
    z-index: 100;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.35));
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Override earlier generic light-theme filter with a clearer halo */
.light-theme .header .logo .logo-img {
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.25)) drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}

/* Light-mode halo behind standard logo to avoid washout */
.light-theme .header .logo::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.14), rgba(0,0,0,0) 70%);
    pointer-events: none;
    z-index: 99;
}

/* Light theme: ensure white logo is visible on bright backgrounds */
.light-theme .logo-img { filter: invert(1) brightness(0.95) contrast(1.05); }
.light-theme .logo-img:hover { filter: invert(1) brightness(1.05) contrast(1.1) drop-shadow(0 0 5px rgba(0,0,0,0.12)); }
/* Also cover animated-logo usage */
.light-theme .header .logo-image { filter: invert(1) brightness(0.95) contrast(1.05); }
.light-theme .header .logo-image:hover {
    filter: invert(1) brightness(1.05) contrast(1.1) drop-shadow(0 0 5px rgba(0,0,0,0.12));
}
/* Animated logo variants (used on blog pages) */
.light-theme .animated-logo .logo-image {
    filter: invert(1) brightness(0.9) contrast(1.1);
}
.header .animated-logo,
.header .animated-logo .logo-image {
    position: relative;
    z-index: 120; /* keep above nearby effects */
    mix-blend-mode: normal !important;
}
.header .animated-logo .logo-image {
    opacity: 1 !important;
    visibility: visible !important;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.25)) drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}

/* Light-mode halo behind animated logo to avoid washout */
.light-theme .header .animated-logo::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.14), rgba(0,0,0,0) 70%);
    pointer-events: none;
    z-index: 119;
}

.github-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    padding: 0 6px;
    transition: color 0.2s;
}

.github-link:hover {
    color: var(--color-grey-80);
}

.github-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }
}

section {
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-section {
    background-color: #000;
    color: #fff;
}

.white-section {
    background-color: #fff;
    color: #000;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
}

/* Hero section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    max-height: 1438px;
    padding-top: 184px;
    overflow: hidden;
    background-color: var(--bg-primary);
    transition: var(--theme-transition);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: radial-gradient(circle at 50% 0%, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hero-container {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    max-width: 700px;
    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.2));
    position: relative;
    margin-bottom: 10px;
    animation: titleFadeIn 0.8s ease-out forwards;
}

.hero-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    filter: blur(20px);
    opacity: 0.6;
    transform: translateZ(0);
}

.hero-subtitle {
    margin-top: 20px;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-grey-90);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-cta {
    margin-top: 44px;
    z-index: 10;
    position: relative;
}

.hero-image-container {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: 80%;
    max-width: 1024px;
    z-index: 5;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease;
}

.hero-image-container:hover {
    transform: perspective(1000px) rotateX(0);
}

.hero-image {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.hero-features {
    position: absolute;
    bottom: 88px;
    z-index: 30;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: -0.02em;
    width: 100%;
    left: 0;
}

.hero-features p {
    margin-bottom: 14px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    padding-left: 20px;
}

.scrolling-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    padding: 8px 0;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
}

.scrolling-content {
    display: inline-block;
    white-space: nowrap;
    animation: scrollFeatures 40s linear infinite;
    padding-left: 20px;
    will-change: transform;
}

.scrolling-content span {
    display: inline-block;
    font-weight: 600;
    color: var(--text-primary);
    padding: 5px 0;
}

.feature-dot {
    display: inline-block;
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.3);
}

@keyframes scrollFeatures {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Add pause on hover effect */
.scrolling-wrapper:hover .scrolling-content {
    animation-play-state: paused;
}

/* Adjust scrolling speed for mobile */
@media (max-width: 768px) {
    .scrolling-content {
        animation: scrollFeatures 25s linear infinite;
    }
    
    .hero-features {
        left: 0;
        right: 0;
        bottom: 30px;
        font-size: 12px;
    }
    
    .feature-dot {
        margin: 0 8px;
    }
    
    .hero-features p {
        text-align: center;
        padding-left: 0;
    }
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 340px;
    background: linear-gradient(to bottom, rgba(11, 12, 15, 0) 0%, var(--color-grey-1) 50%);
    pointer-events: none;
}

/* Productivity section */
.productivity {
    padding: 160px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    z-index: 10;
    transition: var(--theme-transition);
}

.productivity h2 {
    font-size: 80px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.productivity > .container > p {
    margin-top: 24px;
    max-width: 705px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.feature-cards {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.feature-card {
    position: relative;
    height: 420px;
    width: 428px;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--card-bg);
    background-clip: padding-box;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 60%);
    z-index: 1;
    pointer-events: none;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.feature-card.wide {
    width: 768px;
}

.feature-card.wide::before {
    background: linear-gradient(135deg, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.5);
}

.card-content {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    padding: 24px;
    background: linear-gradient(to top, var(--card-bg) 0%, rgba(22, 23, 27, 0.8) 60%, rgba(22, 23, 27, 0) 100%);
}

.card-content h3 {
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 6px;
}

.card-content p {
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1200px) {
    .hero-title {
        font-size: 72px;
        max-width: 600px;
        line-height: 1.05;
    }

    .feature-card {
        height: 300px;
        width: 308px;
    }

    .feature-card.wide {
        width: 572px;
    }
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: 112px;
    }

    .hero-title {
        font-size: 56px;
        max-width: 500px;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-image-container {
        position: relative;
        margin-top: -36%;
        width: 120%;
        left: 0;
    }

    .productivity {
        padding: 100px 0;
    }

    .productivity h2 {
        font-size: 64px;
    }

    .feature-card {
        height: 260px;
        width: 252px;
    }

    .feature-card.wide {
        width: 436px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 40px;
        max-width: 100%;
        line-height: 1.2;
        font-weight: 700;
    }

    .hero-subtitle {
        font-size: 15px;
        max-width: 90%;
    }

    .hero-cta {
        margin-top: 20px;
    }

    .hero-features {
        left: 20px !important;
        right: unset !important;
        right: 0;
        bottom: 36px;
        font-size: 12px;
    }

    .hero-image-container {
        position: relative;
        margin-top: 18.7%;
        width: 100%;
    }

    .productivity {
        padding: 64px 0;
    }

    .productivity h2 {
        font-size: 36px;
    }

    .productivity > .container > p {
        font-size: 15px;
    }

    .feature-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card, 
    .feature-card.wide {
        width: 100%;
    }
}

/* Work Together Section */
.work-together {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

/* Base styles */
:root {
    --color-black: #090a0c;
    --color-white: #ffffff;
    --color-grey-1: #0B0C0F;
    --color-grey-5: #1A1D24;
    --color-grey-10: #23262F;
    --color-grey-20: #303236;
    --color-grey-50: #85878C;
    --color-grey-60: #9DA0A5;
    --color-grey-80: #C9CBCF;
    --color-grey-90: #E5E7EB;
    --color-grey-98: #F6F6F6;
    --color-blue: #3D7EFF;
    --color-orange: #FF5F0B;
    --gradient-primary: linear-gradient(90deg, #F58041 0%, #AC795C 25.6%, #887064 41.58%, #716A69 56.98%, #61656B 69.44%);
    --text-gradient: linear-gradient(135deg, white 30%, #d5d8f6 80%, #fdf7fe 100%);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Theme Variables */
    --bg-primary: var(--color-grey-1);
    --bg-secondary: var(--color-grey-5);
    --bg-tertiary: var(--color-grey-10);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-grey-80);
    --text-tertiary: var(--color-grey-60);
    --card-bg: var(--color-grey-10);
    --card-border: rgba(255, 255, 255, 0.1);
    
    /* Transition timing for theme changes */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme overrides */
html.light-theme {
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-grey-98);
    --bg-tertiary: var(--color-grey-90);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-grey-20);
    --text-tertiary: var(--color-grey-50);
    --card-bg: var(--color-white);
    --card-border: rgba(0, 0, 0, 0.1);
    --text-gradient: linear-gradient(135deg, var(--color-grey-10) 30%, var(--color-grey-5) 80%, var(--color-black) 100%);
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    transition: var(--theme-transition);
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-primary {
    color: #5A250A;
    background-color: #d1d1d1;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, #FFAA81 26.5%, #FFDA9F 37.5%, rgba(255, 170, 129, 0.50) 49%, rgba(210, 106, 58, 0.00) 92.5%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

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

.btn-secondary {
    color: var(--color-white);
    background-color: var(--color-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline {
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-arrow {
    height: 9px;
    width: 17px;
    margin-left: 6px;
    fill: currentColor;
}

/* Header styles */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 64px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.header-container {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10;
}

.logo {
    display: block;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.9;
}

.main-nav {
    margin-left: 77px;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a, 
.main-nav button {
    display: inline-flex;
    padding: 12px;
    font-size: 14px;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    white-space: pre;
}

.main-nav a:hover, 
.main-nav button:hover {
    color: var(--color-blue);
}

.dropdown {
    position: relative;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA2Ij48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS40IiBkPSJtMSAxIDQgNCA0LTQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.dropdown-content {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    transition: opacity 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-grey-10);
    background-color: var(--color-grey-5);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 14px;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--color-grey-10);
}

.header-actions {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
}

.github-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    padding: 0 6px;
    transition: color 0.2s;
}

.github-link:hover {
    color: var(--color-grey-80);
}

.github-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }
}

section {
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-section {
    background-color: #000;
    color: #fff;
}

.white-section {
    background-color: #fff;
    color: #000;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
}

/* Hero section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    max-height: 1438px;
    padding-top: 184px;
    overflow: hidden;
    background-color: var(--bg-primary);
    transition: var(--theme-transition);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: radial-gradient(circle at 50% 0%, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hero-container {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    max-width: 700px;
    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.2));
    position: relative;
    margin-bottom: 10px;
    opacity: 0;
    animation: titleFadeIn 0.8s ease-out forwards 0.2s;
}

.hero-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    filter: blur(20px);
    opacity: 0.6;
    transform: translateZ(0);
}

.hero-subtitle {
    margin-top: 20px;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-grey-90);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-cta {
    margin-top: 44px;
    z-index: 10;
    position: relative;
}

.hero-image-container {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: 80%;
    max-width: 1024px;
    z-index: 5;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease;
}

.hero-image-container:hover {
    transform: perspective(1000px) rotateX(0);
}

.hero-image {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.hero-features {
    position: absolute;
    bottom: 88px;
    z-index: 30;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: -0.02em;
    width: 100%;
    left: 0;
}

.hero-features p {
    margin-bottom: 14px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    padding-left: 20px;
}

.scrolling-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    padding: 8px 0;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
}

.scrolling-content {
    display: inline-block;
    white-space: nowrap;
    animation: scrollFeatures 40s linear infinite;
    padding-left: 20px;
    will-change: transform;
}

.scrolling-content span {
    display: inline-block;
    font-weight: 600;
    color: var(--text-primary);
    padding: 5px 0;
}

.feature-dot {
    display: inline-block;
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.3);
}

@keyframes scrollFeatures {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Add pause on hover effect */
.scrolling-wrapper:hover .scrolling-content {
    animation-play-state: paused;
}

/* Adjust scrolling speed for mobile */
@media (max-width: 768px) {
    .scrolling-content {
        animation: scrollFeatures 25s linear infinite;
    }
    
    .hero-features {
        left: 0;
        right: 0;
        bottom: 30px;
        font-size: 12px;
    }
    
    .feature-dot {
        margin: 0 8px;
    }
    
    .hero-features p {
        text-align: center;
        padding-left: 0;
    }
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 340px;
    background: linear-gradient(to bottom, rgba(11, 12, 15, 0) 0%, var(--color-grey-1) 50%);
    pointer-events: none;
}

/* Productivity section */
.productivity {
    padding: 160px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    z-index: 10;
    transition: var(--theme-transition);
}

.productivity h2 {
    font-size: 80px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.productivity > .container > p {
    margin-top: 24px;
    max-width: 705px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.feature-cards {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.feature-card {
    position: relative;
    height: 420px;
    width: 428px;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--card-bg);
    background-clip: padding-box;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 60%);
    z-index: 1;
    pointer-events: none;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.feature-card.wide {
    width: 768px;
}

.feature-card.wide::before {
    background: linear-gradient(135deg, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.5);
}

.card-content {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    padding: 24px;
    background: linear-gradient(to top, var(--card-bg) 0%, rgba(22, 23, 27, 0.8) 60%, rgba(22, 23, 27, 0) 100%);
}

.card-content h3 {
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 6px;
}

.card-content p {
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1200px) {
    .hero-title {
        font-size: 72px;
        max-width: 600px;
        line-height: 1.05;
    }

    .feature-card {
        height: 300px;
        width: 308px;
    }

    .feature-card.wide {
        width: 572px;
    }
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: 112px;
    }

    .hero-title {
        font-size: 56px;
        max-width: 500px;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-image-container {
        position: relative;
        margin-top: -36%;
        width: 120%;
        left: 0;
    }

    .productivity {
        padding: 100px 0;
    }

    .productivity h2 {
        font-size: 64px;
    }

    .feature-card {
        height: 260px;
        width: 252px;
    }

    .feature-card.wide {
        width: 436px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 40px;
        max-width: 100%;
        line-height: 1.2;
        font-weight: 700;
    }

    .hero-subtitle {
        font-size: 15px;
        max-width: 90%;
    }

    .hero-cta {
        margin-top: 20px;
    }

    .hero-features {
        left: 0;
        right: 0;
        bottom: 30px;
        font-size: 12px;
    }

    .hero-image-container {
        position: relative;
        margin-top: 18.7%;
        width: 100%;
    }

    .productivity {
        padding: 64px 0;
    }

    .productivity h2 {
        font-size: 36px;
    }

    .productivity > .container > p {
        font-size: 15px;
    }

    .feature-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card, 
    .feature-card.wide {
        width: 100%;
    }
}

/* Work Together Section */
.work-together {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.work-together::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-together::after {
    content: '';
    position: absolute;
    bottom: -200px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-content {
    padding-left: 320px;
    position: relative;
    z-index: 2;
}

.work-together h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.03em;
    position: relative;
}

.work-together h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-orange) 100%);
    border-radius: 2px;
}

.work-together p {
    margin-top: 36px;
    max-width: 544px;
    font-size: 18px;
    line-height: 1.2;
}

.video-container {
    margin-top: 60px;
    position: relative;
    z-index: 0;
    aspect-ratio: 16/9;
    height: 486px;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: perspective(1000px) rotateY(-2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    overflow: hidden;
}

.video-container:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.video-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #16171b;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-placeholder:hover {
    transform: scale(1.02);
}

.video-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(61, 126, 255, 0.15) 0%, rgba(255, 95, 11, 0.15) 100%);
    z-index: 1;
    pointer-events: none;
}

.video-placeholder::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.7'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px;
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-placeholder:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
}

.call-interface {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: white;
    z-index: 2;
}

.call-header {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
}

.call-title {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
}

.call-participants {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.6;
    display: flex;
    align-items: center;
}

.call-actions {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 20px;
    align-content: center;
    display: flex;
    justify-content: center;
    gap: 14px;
}


.call-btn {
    aspect-ratio: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: #68686a;
    border: none;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.call-end {
    background-color: #ff4d4d;
}

.collaboration-text {
    margin-top: 66px;
    max-width: 800px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.features-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}

.feature-icon {
    height: 40px;
    width: 40px;
}

.feature h3 {
    margin-top: 20px;
    max-width: 128px;
    font-size: 28px;
    line-height: 1;
}

.feature p {
    margin-top: 14px;
    max-width: 204px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
}

/* GitHub Section */
.github-section {
    background-color: var(--bg-tertiary);
    padding: 131px 0 180px;
    overflow: hidden;
    position: relative;
    z-index: 20;
    transition: var(--theme-transition);
}

.github-section h2 {
    max-width: 800px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.github-section > .container-narrow > p {
    margin-top: 16px;
    max-width: 580px;
    line-height: 1.2;
    color: var(--color-grey-60);
}

.github-graphic {
    margin-top: 108px;
    position: relative;
    aspect-ratio: 2;
    width: 100%;
    border-radius: 12px;
    background-color: transparent;
    background-image: url('../assets/github-graphic.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.github-graphic:hover {
    transform: perspective(1000px) rotateX(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.github-features {
    margin-top: 160px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 96px 80px;
}

.github-feature {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(34, 38, 46, 0.3);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.github-feature:hover {
    transform: translateY(-5px);
    background-color: rgba(34, 38, 46, 0.5);
}

.github-feature::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.github-feature:hover::after {
    transform: scale(1.2);
    opacity: 0.8;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    line-height: 1;
    color: white;
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-grey-60);
}

/* Join Movement Section */
.join-movement {
    position: relative;
    background-color: var(--bg-primary);
    padding: 152px 0 294px;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

/* Light theme footer colors */
.light-theme .footer {
    background-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.08);
}
.light-theme .footer .container {
    color: var(--text-primary);
}
.light-theme .footer-links a {
    color: var(--text-primary) !important;
}
.light-theme .footer-links a::after {
    background-color: rgba(0, 0, 0, 0.7);
}
.light-theme .footer-links a:hover {
    color: rgba(17, 17, 17, 0.95) !important;
}
.light-theme .social-links a {
    background-color: rgba(0, 0, 0, 0.06);
}
.light-theme .social-links a:hover {
    background-color: rgba(0, 0, 0, 0.12);
}
.light-theme .social-icon {
    opacity: 0.9;
}
.light-theme .copyright {
    color: rgba(10, 10, 10, 0.6);
    border-top-color: rgba(0, 0, 0, 0.1);
}
.light-theme .copyright a {
    color: rgba(10, 10, 10, 0.75);
}
.light-theme .copyright a:hover {
    color: rgba(10, 10, 10, 0.95);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.copyright a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.copyright a:hover {
    color: white;
}

.copyright a:hover::after {
    width: 100%;
}

.footer-links {
    margin-left: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    z-index: 10;
}

.footer-links a {
    display: inline-flex;
    color: var(--color-grey-80);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

.social-links {
    margin-left: 70px;
    display: flex;
    gap: 18px;
    list-style: none;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.linkedin-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E");
}

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.slack-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
}

.social-links a:hover .social-icon {
    opacity: 1;
}

.made-with {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: left;
    position: relative;
    transition: transform 0.3s ease;
    white-space: nowrap; 
}

.made-with:hover {
    transform: translateY(-2px);
}

.made-with::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background: var(--gradient-primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.made-with:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.gradient-mark {
    margin-right: -12px;
    transition: transform 0.3s ease;
}

.made-with:hover .gradient-mark {
    transform: rotate(20deg);
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .work-together h2 {
        font-size: 72px;
    }
    
    .github-section h2,
    .join-movement h2 {
        font-size: 72px;
    }
    
    .join-image {
        left: -253px;
        top: 128px;
        max-width: 1630px;
    }
}

@media (max-width: 992px) {
    .work-content {
        padding-left: 96px;
    }
    
    .work-together h2 {
        max-width: 430px;
        font-size: 56px;
    }
    
    .work-together p {
        max-width: 450px;
        font-size: 16px;
    }
    
    .video-container {
        margin-left: 8px;
        margin-top: 48px;
        height: 316px;
    }
    
    .collaboration-text {
        margin-top: 72px;
        font-size: 20px;
    }
    
    .features-grid {
        gap: 32px;
    }
    
    .feature h3 {
        font-size: 24px;
    }
    
    .github-section {
        padding: 96px 0;
    }
    
    .github-section h2 {
        max-width: 400px;
        font-size: 56px;
    }
    
    .github-features {
        margin-top: 64px;
        gap: 48px 64px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
    
    .join-movement {
        padding: 77px 0 190px;
    }
    
    .join-movement h2 {
        max-width: 320px;
        font-size: 56px;
    }
    
    .join-image {
        left: -255px;
        top: 62px;
        max-width: 1430px;
    }
    
    .footer {
        padding: 14px 0;
    }
    
    .footer-links {
        margin-left: 0;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .work-content {
        padding-left: 0;
    }
    
    .work-together h2 {
        max-width: 250px;
        font-size: 36px;
    }
    
    .video-container {
        margin: 24px 5px 0;
        height: auto;
        width: calc(100% - 10px);
    }
    
    .collaboration-text {
        margin-top: 28px;
        font-size: 18px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .feature h3 {
        font-size: 20px;
        max-width: none;
    }
    
    .feature p {
        max-width: none;
    }
    
    .github-section {
        padding: 64px 0;
    }
    
    .github-section h2 {
        max-width: 384px;
        font-size: 36px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .github-feature h3 {
        font-size: 20px;
    }
    
    .join-movement {
        padding: 266px 0 235px;
        position: relative;
    }
    
    .join-movement .container {
        grid-template-columns: 1fr;
    }
    
    .join-content {
        grid-column: 1;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .join-movement h2 {
        font-size: 44px;
    }
    
    .join-image {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 767px;
        height: 560px;
        max-width: 767px;
    }
    
    .join-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
        text-align: center;
    }
    
    .copyright {
        margin-top: 8px;
        width: 100%;
    }
    
    .footer-links {
        margin-top: 36px;
        width: 100%;
        justify-content: center;
    }
    
    .social-links {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .made-with {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-1);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav {
    flex: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav > ul > li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
}

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 18px;
    text-align: left;
    padding: 12px 0;
    cursor: pointer;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 16px;
    margin-top: 8px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown-content a {
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-grey-60);
}

.mobile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-full {
    width: 100%;
}

/* Page transition overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-transition::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(61, 126, 255, 0.2) 0%, rgba(11, 12, 15, 0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition.active::before {
    transform: scale(1.5);
}

/* Loading spinner */
.page-transition::after {
    content: '';
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-orange);
    animation: spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.active::after {
    opacity: 1;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Hide sun icon in dark mode, moon icon in light mode */
.moon-icon {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

html.light-theme .moon-icon {
    opacity: 1;
    transform: rotate(0);
}

html.light-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle-mobile {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.theme-toggle-mobile .theme-toggle-icon {
    margin-right: 12px;
}

/* Newsletter subscription styles */
.newsletter-container {
    margin-top: 80px;
    padding: 40px;
    border-radius: 16px;
    background: rgba(26, 29, 36, 0.4);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.newsletter-container::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.newsletter-content {
    position: relative;
    z-index: 1;
}

.newsletter-container h3 {
    font-size: 28px;
    margin-bottom: 16px;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.newsletter-container p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 460px;
}

.newsletter-form {
    position: relative;
    transition: all 0.3s ease;
}

.input-group {
    display: flex;
    gap: 12px;
}

.newsletter-form input {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(35, 38, 47, 0.5);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(61, 126, 255, 0.2);
}

.newsletter-form input.error {
    border-color: #ff3333;
    box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.2);
}

.newsletter-submit {
    height: 48px;
    border-radius: 8px !important;
}

.error-message {
    color: #ff3333;
    font-size: 14px;
    margin-top: 8px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.newsletter-form.loading input,
.newsletter-form.loading button {
    opacity: 0.7;
    pointer-events: none;
}

.newsletter-form.loading button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    right: 16px;
    top: calc(50% - 10px);
    animation: spin 0.8s linear infinite;
}

.subscription-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn 0.5s ease forwards;
}

.success-icon {
    width: 56px;
    height: 56px;
    background-color: var(--color-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(61, 126, 255, 0.3);
}

.subscription-success p {
    margin-bottom: 8px;
    font-weight: 500;
}

.success-details {
    font-size: 14px;
    opacity: 0.7;
}

/* Confetti animation */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    transform-origin: center;
    opacity: 0;
    animation: confettiFall 3s ease-in-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* Shake animation for form errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Media queries for newsletter */
@media (max-width: 768px) {
    .newsletter-container {
        padding: 30px 24px;
        margin-top: 60px;
    }
    
    .newsletter-container h3 {
        font-size: 24px;
    }
    
    .input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .newsletter-submit {
        width: 100%;
    }
}

/* Advanced Tooltip System */
.tooltip-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 300px;
    opacity: 0;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    will-change: transform;
}

.tooltip-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.tooltip-content {
    position: relative;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(46, 49, 59, 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tooltip-content::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(46, 49, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
    z-index: -1;
    backdrop-filter: blur(8px);
}

.tooltip-top .tooltip-content::before {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.tooltip-bottom .tooltip-content::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.tooltip-left .tooltip-content::before {
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.tooltip-right .tooltip-content::before {
    top: 50%;
    left: -6px;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.tooltip-follow .tooltip-content::before {
    display: none;
}

.tooltip-image .tooltip-content {
    padding: 0;
    overflow: hidden;
}

.tooltip-image img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.tooltip-rich .tooltip-content {
    min-width: 220px;
}

.tooltip-rich-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}

.tooltip-rich-content p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-grey-80);
}

.tooltip-badge {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(61, 126, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-blue);
}

/* Add tooltip animation for hover state on elements with tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: radial-gradient(circle at var(--tooltip-hover-x, 50%) var(--tooltip-hover-y, 50%), rgba(61, 126, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: -1;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Light theme tooltip overrides */
html.light-theme .tooltip-content {
    background: rgba(250, 250, 252, 0.95);
    color: var(--color-black);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-content::before {
    background: rgba(250, 250, 252, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-rich-content p {
    color: var(--color-grey-20);
}

html.light-theme .tooltip-badge {
    background: rgba(61, 126, 255, 0.1);
}

/* Media queries for tooltips */
@media (max-width: 768px) {
    .tooltip {
        max-width: 260px;
    }
    
    .tooltip-content {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .tooltip-rich-content h4 {
        font-size: 15px;
    }
    
    .tooltip-rich-content p {
        font-size: 12px;
    }
}

/* Cookie Consent Banner (disabled) */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    pointer-events: auto;
}

.cookie-consent.active {
    transform: translateY(0);
}

.cookie-consent-container {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--card-border);
    padding: 20px;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cookie-consent-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.cookie-settings-toggle {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.cookie-settings-toggle:hover,
.cookie-settings-toggle.active {
    background-color: var(--bg-tertiary);
    color: var(--color-blue);
}

.cookie-consent-main {
    margin-bottom: 20px;
}

.cookie-consent-main > p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 800px;
}

.cookie-consent-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    animation: fadeIn 0.3s ease;
    max-width: 950px;
}

.cookie-option {
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    position: relative;
}

.cookie-option-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.cookie-option-header h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0 12px;
}

.cookie-option p {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cookie-consent-actions .btn {
    min-width: 120px;
    font-size: 13px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-btn-accept-all {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-btn-save {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-consent-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    border-radius: 50%;
}

.cookie-consent-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* Cookie toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    transition: .3s;
    border-radius: 34px;
    border: 1px solid var(--card-border);
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    transition: .3s;
    border-radius: 50%;
}

input:checked + .cookie-slider {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

input:focus + .cookie-slider {
    box-shadow: 0 0 1px var(--color-blue);
}

input:checked + .cookie-slider:before {
    transform: translateX(16px);
    background-color: white;
}

input:disabled + .cookie-slider {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Media queries for cookie consent */
@media (max-width: 768px) {
    .cookie-consent-container {
        padding: 16px;
    }
    
    .cookie-consent-options {
        grid-template-columns: 1fr;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .cookie-consent-header h3 {
        font-size: 18px;
    }
    
    .cookie-consent-main > p {
        font-size: 14px;
    }
    
    .cookie-option {
        padding: 12px;
    }
    
    .cookie-consent-close {
        top: 12px;
        right: 12px;
    }
    
    .cookie-option-header h4 {
        font-size: 15px;
    }
    
    .cookie-option p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cookie-consent-actions {
        flex-direction: column;
    }
    
    .cookie-consent-actions .btn {
        width: 100%;
    }
}

/* Enhanced Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px !important;
    right: unset !important;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background-color 0.2s;
    color: var(--text-secondary);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    background-color: var(--bg-secondary);
    color: var(--color-blue);
}

.back-to-top.hover .progress-circle-path {
    stroke: var(--color-blue);
    stroke-width: 2.5px;
    transition: stroke 0.2s, stroke-width 0.2s;
}

.back-to-top.clicked {
    animation: pulse 0.7s ease;
}

.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    stroke: var(--card-border);
    opacity: 0.4;
}

.progress-circle-path {
    stroke: var(--text-secondary);
    transition: stroke-dashoffset 0.3s, stroke 0.2s, stroke-width 0.2s;
}

.back-to-top-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.back-to-top:hover .back-to-top-icon {
    transform: translateY(-3px);
}

.back-to-top.clicked .back-to-top-icon {
    transform: translateY(-5px);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Media queries for back-to-top button */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        left: 20px !important;
        right: unset !important;
        width: 40px;
        height: 40px;
    }
    
    .back-to-top-icon {
        width: 14px;
        height: 14px;
    }
    
    .progress-circle {
        width: 40px;
        height: 40px;
    }
    
    .progress-circle-bg,
    .progress-circle-path {
        cx: 20;
        cy: 20;
        r: 18;
    }
}

/* Smart Search Feature */
.search-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.search-modal.active .search-backdrop {
    opacity: 1;
}

.search-container {
    position: relative;
    width: 600px;
    max-width: 90%;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-top: 80px;
    overflow: hidden;
    z-index: 1;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal.active .search-container {
    transform: translateY(0);
}

.search-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--card-border);
}

.search-icon {
    color: var(--text-secondary);
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-shortcuts {
    display: flex;
    gap: 10px;
    margin-left: 16px;
}

.search-shortcut {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.search-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: 11px;
    font-family: var(--font-sans);
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    margin: 0 2px;
}

.search-body {
    max-height: 400px;
    overflow-y: auto;
}

.search-results {
    padding: 8px 0;
}

.search-result-category {
    padding: 6px 20px 0;
    margin-top: 8px;
}

.search-result-category h4 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: var(--bg-secondary);
}

.search-result-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-url {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background-color: rgba(61, 126, 255, 0.15);
    color: var(--color-blue);
    border-radius: 2px;
    padding: 0 2px;
}

.search-empty,
.search-loading {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-tertiary);
    display: none;
    flex-direction: column;
    align-items: center;
}

.search-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(61, 126, 255, 0.3);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

/* Header search button */
.header-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 8px;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
}

.header-search-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.search-shortcut-indicator {
    position: absolute;
    right: -4px;
    bottom: -4px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media queries for search */
@media (max-width: 768px) {
    .search-container {
        width: 92%;
        margin-top: 60px;
    }
    
    .search-shortcuts {
        display: none;
    }
    
    .search-body {
        max-height: 60vh;
    }
}

/* Lock body when search is open */
body.search-open {
    overflow: hidden;
}

/* Document Editor Section */
.document-section {
    position: relative;
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
}

.document-content {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.document-info {
    flex: 1;
    max-width: 60%;
}

.document-info h2 {
    font-size: 54px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-title);
}

.document-title{
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 40px;
}

.document-info > p {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 40px;
}

.document-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.pin-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.pin-image {
    transition: all 0.2s;
    will-change: transform;
}

.pin-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

.pin-line {
    height: 27px;
    width: 2px;
    background-color: #FF5F0B;
}

.pin-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #FF5F0B;
    margin-top: -1px;
}

.document-feature p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.document-preview {
    margin-top: 22px;
    margin-bottom: 30px;
}

.editor-preview {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.tap-indicator {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 15px;
}

.tap-arrow {
    width: 10px;
    height: 36px;
    margin-right: 4px;
    color: #666;
}

.tap-text {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

.editor-actions {
    display: flex;
    gap: 4px;
    margin-top: 15px;
    width: fit-content;
    padding: 5px;
    border-radius: 999px;
    background-color: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-btn.active {
    background-color: #333;
}

.action-icon {
    width: 14px;
    height: 14px;
    margin: auto;
}

.action-add.active svg path {
    stroke: white;
}

.sidebar-preview {
    flex: 1;
    max-width: 40%;
    padding-left: 8px;
    padding-top: 222px;
}

.sticky-sidebar {
    position: sticky;
    top: 222px;
    z-index: 10;
    height: 282px;
    width: 256px;
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px 18px 28px;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.sidebar-panel.hidden {
    opacity: 0;
    z-index: 5;
}

.sidebar-panel h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.sidebar-panel p {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #333;
}

.sidebar-backdrop {
    position: absolute;
    bottom: -52.5%;
    left: 50%;
    aspect-ratio: 0.912;
    width: 178.125%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.2) 0%, rgba(255, 95, 11, 0.05) 60%, transparent 100%);
    border-radius: 12px;
}

/* Document Section Media Queries */
@media (max-width: 1200px) {
    .document-info h2 {
        font-size: 44px;
    }
    
    .sticky-sidebar {
        height: 240px;
        width: 220px;
    }
    
    .sidebar-panel h3 {
        font-size: 16px;
    }
    
    .sidebar-panel p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .document-section {
        padding: 80px 0;
    }
    
    .document-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .document-info {
        max-width: 100%;
    }
    
    .sidebar-preview {
        max-width: 100%;
        padding-top: 0;
    }
    
    .sticky-sidebar {
        position: relative;
        top: 0;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .document-section {
        padding: 60px 0;
    }
    
    .document-info h2 {
        font-size: 36px;
    }
    
    .document-info > p {
        font-size: 16px;
    }
    
    .pin-line {
        height: 18px;
    }
    
    .pin-dot {
        height: 7px;
        width: 7px;
    }
    
    .pin-image {
        width: 36px;
        height: 36px;
    }
    
    .editor-actions {
        padding: 4px;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
    }
    
    .action-icon {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 576px) {
    .document-section {
        padding: 40px 0;
    }
    
    .document-info h2 {
        font-size: 28px;
    }
    
    .document-feature {
        gap: 10px;
    }
    
    .document-feature p {
        font-size: 14px;
    }
    
    .feature-description {
        font-size: 14px;
    }
    
    .sticky-sidebar {
        height: 200px;
        width: 180px;
    }
}

/* GitHub Integration Section */
.github-integration {
    position: relative;
    padding: 120px 0;
    background-color: #090A0C;
    color: white;
    overflow: hidden;
}

.github-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.github-content h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-family: var(--font-title);
    color: white;
    margin-bottom: 20px;
}

.github-content p {
    max-width: 580px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #99A2B2;
}

.github-graphic {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.github-graphic-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.github-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 96px;
    margin-top: 160px;
    width: 100%;
}

.github-feature {
    position: relative;
}

.feature-icon-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.feature-icon-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: -8px;
    left: -8px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
}

.feature-icon {
    height: 40px;
    width: auto;
    position: relative;
    z-index: 1;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.015em;
    color: white;
    font-family: var(--font-title);
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #99A2B2;
}

/* MetaBrain Section */
.metabrain-section {
    padding: 120px 0;
    background-color: var(--color-background);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.metabrain-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.metabrain-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.metabrain-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 50px;
}

.metabrain-primary-features, 
.metabrain-secondary-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.metabrain-feature {
    background-color: var(--color-card-background);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.metabrain-feature p {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1.5;
    z-index: 2;
}

.metabrain-feature strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.25rem;
}

.tasks-feature {
    background-image: url('assets/tasks-notes.png');
    background-size: cover;
    background-position: center;
}

.plan-feature {
    background-image: url('assets/plan-work.jpg');
    background-size: cover;
    background-position: center;
}

.notes-feature {
    background-image: url('assets/document-editor.svg');
    background-size: cover;
    background-position: center;
}

.collab-feature {
    background-image: url('assets/collab.jpg');
    background-size: cover;
    background-position: center;
}

.calendar-feature {
    background-image: url('assets/calendar.png');
    background-size: cover;
    background-position: center;
}

.chat-feature {
    background-image: url('assets/teammates.jpg');
    background-size: cover;
    background-position: center;
}

.manage-feature {
    background-image: url('assets/pm.jpg');
    background-size: cover;
    background-position: center;
}

/* Community Section Styles */
.community-section {
    padding: 120px 0;
    background-color: var(--color-background-alt);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.community-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(125, 126, 255, 0.08), transparent 50%),
                radial-gradient(circle at bottom left, rgba(255, 95, 11, 0.08), transparent 50%);
    z-index: 0;
}

.community-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.community-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    position: relative;
    z-index: 1;
}

.community-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.platform-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.platform-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.platform-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    padding: 15px;
}

.platform-svg {
    width: 100%;
    height: 100%;
}

.github-card .platform-icon {
    color: #7d80ff;
}

.slack-card .platform-icon {
    color: #4A154B;
}

.twitter-card .platform-icon {
    color: #1DA1F2;
}

.youtube-card .platform-icon {
    color: #FF0000;
}

.platform-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.platform-card p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 24px;
    flex-grow: 1;
}

.platform-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-bottom: 15px;
}

.platform-link:hover {
    color: var(--color-primary-hover);
}

.platform-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.platform-link:hover::after {
    transform: translateX(4px);
}

.metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.community-events {
    position: relative;
    z-index: 1;
}

.community-events h3 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.events-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.event-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.event-date {
    background: linear-gradient(135deg, #7d80ff, #ff5f0b);
    color: white;
    width: 80px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.event-month {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-day {
    font-size: 1.75rem;
    font-weight: 700;
}

.event-details {
    padding: 20px;
    flex-grow: 1;
}

.event-details h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--color-text);
}

.event-details p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.event-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-link:hover {
    color: var(--color-primary-hover);
}

.event-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.event-link:hover::after {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .community-section {
        padding: 80px 0;
    }
    
    .community-section h2 {
        font-size: 2.5rem;
    }
    
    .platform-card, 
    .event-card {
        max-width: 100%;
    }
    
    .events-container {
        grid-template-columns: 1fr;
    }
}

/* Join Movement Section */
.join-movement {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

/* Base styles */
:root {
    --color-black: #090a0c;
    --color-white: #ffffff;
    --color-grey-1: #0B0C0F;
    --color-grey-5: #1A1D24;
    --color-grey-10: #23262F;
    --color-grey-20: #303236;
    --color-grey-50: #85878C;
    --color-grey-60: #9DA0A5;
    --color-grey-80: #C9CBCF;
    --color-grey-90: #E5E7EB;
    --color-grey-98: #F6F6F6;
    --color-blue: #3D7EFF;
    --color-orange: #FF5F0B;
    --gradient-primary: linear-gradient(90deg, #F58041 0%, #AC795C 25.6%, #887064 41.58%, #716A69 56.98%, #61656B 69.44%);
    --text-gradient: linear-gradient(135deg, white 30%, #d5d8f6 80%, #fdf7fe 100%);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Theme Variables */
    --bg-primary: var(--color-grey-1);
    --bg-secondary: var(--color-grey-5);
    --bg-tertiary: var(--color-grey-10);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-grey-80);
    --text-tertiary: var(--color-grey-60);
    --card-bg: var(--color-grey-10);
    --card-border: rgba(255, 255, 255, 0.1);
    
    /* Transition timing for theme changes */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme overrides */
html.light-theme {
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-grey-98);
    --bg-tertiary: var(--color-grey-90);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-grey-20);
    --text-tertiary: var(--color-grey-50);
    --card-bg: var(--color-white);
    --card-border: rgba(0, 0, 0, 0.1);
    --text-gradient: linear-gradient(135deg, var(--color-grey-10) 30%, var(--color-grey-5) 80%, var(--color-black) 100%);
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    transition: var(--theme-transition);
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-primary {
    color: #5A250A;
    background-color: #d1d1d1;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, #FFAA81 26.5%, #FFDA9F 37.5%, rgba(255, 170, 129, 0.50) 49%, rgba(210, 106, 58, 0.00) 92.5%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

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

.btn-secondary {
    color: var(--color-white);
    background-color: var(--color-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline {
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-arrow {
    height: 9px;
    width: 17px;
    margin-left: 6px;
    fill: currentColor;
}

/* Header styles */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 64px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.header-container {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10;
}

.logo {
    display: block;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.9;
}

.main-nav {
    margin-left: 77px;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a, 
.main-nav button {
    display: inline-flex;
    padding: 12px;
    font-size: 14px;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    white-space: pre;
}

.main-nav a:hover, 
.main-nav button:hover {
    color: var(--color-blue);
}

.dropdown {
    position: relative;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA2Ij48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS40IiBkPSJtMSAxIDQgNCA0LTQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.dropdown-content {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    transition: opacity 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-grey-10);
    background-color: var(--color-grey-5);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 14px;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--color-grey-10);
}

.header-actions {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
}

.github-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    padding: 0 6px;
    transition: color 0.2s;
}

.github-link:hover {
    color: var(--color-grey-80);
}

.github-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }
}

section {
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-section {
    background-color: #000;
    color: #fff;
}

.white-section {
    background-color: #fff;
    color: #000;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
}

/* Hero section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    max-height: 1438px;
    padding-top: 184px;
    overflow: hidden;
    background-color: var(--bg-primary);
    transition: var(--theme-transition);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: radial-gradient(circle at 50% 0%, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hero-container {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    max-width: 700px;
    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.2));
    position: relative;
    margin-bottom: 10px;
    opacity: 0;
    animation: titleFadeIn 0.8s ease-out forwards 0.2s;
}

.hero-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    filter: blur(20px);
    opacity: 0.6;
    transform: translateZ(0);
}

.hero-subtitle {
    margin-top: 20px;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-grey-90);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-cta {
    margin-top: 44px;
    z-index: 10;
    position: relative;
}

.hero-image-container {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: 80%;
    max-width: 1024px;
    z-index: 5;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease;
}

.hero-image-container:hover {
    transform: perspective(1000px) rotateX(0);
}

.hero-image {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.hero-features {
    position: absolute;
    bottom: 88px;
    z-index: 30;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: -0.02em;
    width: 100%;
    left: 0;
}

.hero-features p {
    margin-bottom: 14px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    padding-left: 20px;
}

.scrolling-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    padding: 8px 0;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
}

.scrolling-content {
    display: inline-block;
    white-space: nowrap;
    animation: scrollFeatures 40s linear infinite;
    padding-left: 20px;
    will-change: transform;
}

.scrolling-content span {
    display: inline-block;
    font-weight: 600;
    color: var(--text-primary);
    padding: 5px 0;
}

.feature-dot {
    display: inline-block;
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.3);
}

@keyframes scrollFeatures {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Add pause on hover effect */
.scrolling-wrapper:hover .scrolling-content {
    animation-play-state: paused;
}

/* Adjust scrolling speed for mobile */
@media (max-width: 768px) {
    .scrolling-content {
        animation: scrollFeatures 25s linear infinite;
    }
    
    .hero-features {
        left: 0;
        right: 0;
        bottom: 30px;
        font-size: 12px;
    }
    
    .feature-dot {
        margin: 0 8px;
    }
    
    .hero-features p {
        text-align: center;
        padding-left: 0;
    }
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 340px;
    background: linear-gradient(to bottom, rgba(11, 12, 15, 0) 0%, var(--color-grey-1) 50%);
    pointer-events: none;
}

/* Productivity section */
.productivity {
    padding: 160px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    z-index: 10;
    transition: var(--theme-transition);
}

.productivity h2 {
    font-size: 80px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.productivity > .container > p {
    margin-top: 24px;
    max-width: 705px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.feature-cards {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.feature-card {
    position: relative;
    height: 420px;
    width: 428px;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--card-bg);
    background-clip: padding-box;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 60%);
    z-index: 1;
    pointer-events: none;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.feature-card.wide {
    width: 768px;
}

.feature-card.wide::before {
    background: linear-gradient(135deg, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.5);
}

.card-content {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    padding: 24px;
    background: linear-gradient(to top, var(--card-bg) 0%, rgba(22, 23, 27, 0.8) 60%, rgba(22, 23, 27, 0) 100%);
}

.card-content h3 {
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 6px;
}

.card-content p {
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1200px) {
    .hero-title {
        font-size: 72px;
        max-width: 600px;
        line-height: 1.05;
    }

    .feature-card {
        height: 300px;
        width: 308px;
    }

    .feature-card.wide {
        width: 572px;
    }
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: 112px;
    }

    .hero-title {
        font-size: 56px;
        max-width: 500px;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-image-container {
        position: relative;
        margin-top: -36%;
        width: 120%;
        left: 0;
    }

    .productivity {
        padding: 100px 0;
    }

    .productivity h2 {
        font-size: 64px;
    }

    .feature-card {
        height: 260px;
        width: 252px;
    }

    .feature-card.wide {
        width: 436px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 40px;
        max-width: 100%;
        line-height: 1.2;
        font-weight: 700;
    }

    .hero-subtitle {
        font-size: 15px;
        max-width: 90%;
    }

    .hero-cta {
        margin-top: 20px;
    }

    .hero-features {
        left: 0;
        right: 0;
        bottom: 30px;
        font-size: 12px;
    }

    .hero-image-container {
        position: relative;
        margin-top: 18.7%;
        width: 100%;
    }

    .productivity {
        padding: 64px 0;
    }

    .productivity h2 {
        font-size: 36px;
    }

    .productivity > .container > p {
        font-size: 15px;
    }

    .feature-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card, 
    .feature-card.wide {
        width: 100%;
    }
}

/* Work Together Section */
.work-together {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.work-together::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-together::after {
    content: '';
    position: absolute;
    bottom: -200px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-content {
    padding-left: 320px;
    position: relative;
    z-index: 2;
}

.work-together h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.03em;
    position: relative;
}

.work-together h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-orange) 100%);
    border-radius: 2px;
}

.work-together p {
    margin-top: 36px;
    max-width: 544px;
    font-size: 18px;
    line-height: 1.2;
}

.video-container {
    margin-top: 60px;
    position: relative;
    z-index: 0;
    aspect-ratio: 16/9;
    height: 486px;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: perspective(1000px) rotateY(-2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    overflow: hidden;
}

.video-container:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.video-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #16171b;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-placeholder:hover {
    transform: scale(1.02);
}

.video-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(61, 126, 255, 0.15) 0%, rgba(255, 95, 11, 0.15) 100%);
    z-index: 1;
    pointer-events: none;
}

.video-placeholder::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.7'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px;
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-placeholder:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
}

.call-interface {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: white;
    z-index: 2;
}

.call-header {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
}

.call-title {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
}

.call-participants {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.6;
    display: flex;
    align-items: center;
}

.call-actions {
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.call-btn {
    aspect-ratio: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: #68686a;
    border: none;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.call-end {
    background-color: #ff4d4d;
}

.collaboration-text {
    margin-top: 66px;
    max-width: 800px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.features-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}

.feature-icon {
    height: 40px;
    width: 40px;
}

.feature h3 {
    margin-top: 20px;
    max-width: 128px;
    font-size: 28px;
    line-height: 1;
}

.feature p {
    margin-top: 14px;
    max-width: 204px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
}

/* GitHub Section */
.github-section {
    background-color: var(--bg-tertiary);
    padding: 131px 0 180px;
    overflow: hidden;
    position: relative;
    z-index: 20;
    transition: var(--theme-transition);
}

.github-section h2 {
    max-width: 800px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.github-section > .container-narrow > p {
    margin-top: 16px;
    max-width: 580px;
    line-height: 1.2;
    color: var(--color-grey-60);
}

.github-graphic {
    margin-top: 108px;
    position: relative;
    aspect-ratio: 2;
    width: 100%;
    border-radius: 12px;
    background-color: transparent;
    background-image: url('../assets/github-graphic.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.github-graphic:hover {
    transform: perspective(1000px) rotateX(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.github-features {
    margin-top: 160px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 96px 80px;
}

.github-feature {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(34, 38, 46, 0.3);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.github-feature:hover {
    transform: translateY(-5px);
    background-color: rgba(34, 38, 46, 0.5);
}

.github-feature::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.github-feature:hover::after {
    transform: scale(1.2);
    opacity: 0.8;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    line-height: 1;
    color: white;
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-grey-60);
}

/* Join Movement Section */
.join-movement {
    position: relative;
    background-color: var(--bg-primary);
    padding: 152px 0 294px;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.copyright a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.copyright a:hover {
    color: white;
}

.copyright a:hover::after {
    width: 100%;
}

.footer-links {
    margin-left: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    z-index: 10;
}

.footer-links a {
    display: inline-flex;
    color: var(--color-grey-80);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

.social-links {
    margin-left: 70px;
    display: flex;
    gap: 18px;
    list-style: none;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.linkedin-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E");
}

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.slack-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
}

.social-links a:hover .social-icon {
    opacity: 1;
}

.made-with {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: right;
    position: relative;
    transition: transform 0.3s ease;
}

.made-with:hover {
    transform: translateY(-2px);
}

.made-with::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background: var(--gradient-primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.made-with:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.gradient-mark {
    margin-right: -12px;
    transition: transform 0.3s ease;
}

.made-with:hover .gradient-mark {
    transform: rotate(20deg);
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .work-together h2 {
        font-size: 72px;
    }
    
    .github-section h2,
    .join-movement h2 {
        font-size: 72px;
    }
    
    .join-image {
        left: -253px;
        top: 128px;
        max-width: 1630px;
    }
}

@media (max-width: 992px) {
    .work-content {
        padding-left: 96px;
    }
    
    .work-together h2 {
        max-width: 430px;
        font-size: 56px;
    }
    
    .work-together p {
        max-width: 450px;
        font-size: 16px;
    }
    
    .video-container {
        margin-left: 8px;
        margin-top: 48px;
        height: 316px;
    }
    
    .collaboration-text {
        margin-top: 72px;
        font-size: 20px;
    }
    
    .features-grid {
        gap: 32px;
    }
    
    .feature h3 {
        font-size: 24px;
    }
    
    .github-section {
        padding: 96px 0;
    }
    
    .github-section h2 {
        max-width: 400px;
        font-size: 56px;
    }
    
    .github-features {
        margin-top: 64px;
        gap: 48px 64px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
    
    .join-movement {
        padding: 77px 0 190px;
    }
    
    .join-movement h2 {
        max-width: 320px;
        font-size: 56px;
    }
    
    .join-image {
        left: -255px;
        top: 62px;
        max-width: 1430px;
    }
    
    .footer {
        padding: 14px 0;
    }
    
    .footer-links {
        margin-left: 0;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .work-content {
        padding-left: 0;
    }
    
    .work-together h2 {
        max-width: 250px;
        font-size: 36px;
    }
    
    .video-container {
        margin: 24px 5px 0;
        height: auto;
        width: calc(100% - 10px);
    }
    
    .collaboration-text {
        margin-top: 28px;
        font-size: 18px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .feature h3 {
        font-size: 20px;
        max-width: none;
    }
    
    .feature p {
        max-width: none;
    }
    
    .github-section {
        padding: 64px 0;
    }
    
    .github-section h2 {
        max-width: 384px;
        font-size: 36px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .github-feature h3 {
        font-size: 20px;
    }
    
    .join-movement {
        padding: 266px 0 235px;
        position: relative;
    }
    
    .join-movement .container {
        grid-template-columns: 1fr;
    }
    
    .join-content {
        grid-column: 1;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .join-movement h2 {
        font-size: 44px;
    }
    
    .join-image {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 767px;
        height: 560px;
        max-width: 767px;
    }
    
    .join-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
        text-align: center;
    }
    
    .copyright {
        margin-top: 8px;
        width: 100%;
    }
    
    .footer-links {
        margin-top: 36px;
        width: 100%;
        justify-content: center;
    }
    
    .social-links {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .made-with {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-1);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav {
    flex: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav > ul > li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
}

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 18px;
    text-align: left;
    padding: 12px 0;
    cursor: pointer;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 16px;
    margin-top: 8px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown-content a {
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-grey-60);
}

.mobile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-full {
    width: 100%;
}

/* Page transition overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-transition::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(61, 126, 255, 0.2) 0%, rgba(11, 12, 15, 0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition.active::before {
    transform: scale(1.5);
}

/* Loading spinner */
.page-transition::after {
    content: '';
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-orange);
    animation: spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.active::after {
    opacity: 1;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Hide sun icon in dark mode, moon icon in light mode */
.moon-icon {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

html.light-theme .moon-icon {
    opacity: 1;
    transform: rotate(0);
}

html.light-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle-mobile {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.theme-toggle-mobile .theme-toggle-icon {
    margin-right: 12px;
}

/* Newsletter subscription styles */
.newsletter-container {
    margin-top: 80px;
    padding: 40px;
    border-radius: 16px;
    background: rgba(26, 29, 36, 0.4);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.newsletter-container::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.newsletter-content {
    position: relative;
    z-index: 1;
}

.newsletter-container h3 {
    font-size: 28px;
    margin-bottom: 16px;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.newsletter-container p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 460px;
}

.newsletter-form {
    position: relative;
    transition: all 0.3s ease;
}

.input-group {
    display: flex;
    gap: 12px;
}

.newsletter-form input {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(35, 38, 47, 0.5);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(61, 126, 255, 0.2);
}

.newsletter-form input.error {
    border-color: #ff3333;
    box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.2);
}

.newsletter-submit {
    height: 48px;
    border-radius: 8px !important;
}

.error-message {
    color: #ff3333;
    font-size: 14px;
    margin-top: 8px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.newsletter-form.loading input,
.newsletter-form.loading button {
    opacity: 0.7;
    pointer-events: none;
}

.newsletter-form.loading button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    right: 16px;
    top: calc(50% - 10px);
    animation: spin 0.8s linear infinite;
}

.subscription-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn 0.5s ease forwards;
}

.success-icon {
    width: 56px;
    height: 56px;
    background-color: var(--color-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(61, 126, 255, 0.3);
}

.subscription-success p {
    margin-bottom: 8px;
    font-weight: 500;
}

.success-details {
    font-size: 14px;
    opacity: 0.7;
}

/* Confetti animation */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    transform-origin: center;
    opacity: 0;
    animation: confettiFall 3s ease-in-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* Shake animation for form errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Media queries for newsletter */
@media (max-width: 768px) {
    .newsletter-container {
        padding: 30px 24px;
        margin-top: 60px;
    }
    
    .newsletter-container h3 {
        font-size: 24px;
    }
    
    .input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .newsletter-submit {
        width: 100%;
    }
}

/* Advanced Tooltip System */
.tooltip-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 300px;
    opacity: 0;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    will-change: transform;
}

.tooltip-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.tooltip-content {
    position: relative;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(46, 49, 59, 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tooltip-content::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(46, 49, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
    z-index: -1;
    backdrop-filter: blur(8px);
}

.tooltip-top .tooltip-content::before {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.tooltip-bottom .tooltip-content::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.tooltip-left .tooltip-content::before {
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.tooltip-right .tooltip-content::before {
    top: 50%;
    left: -6px;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.tooltip-follow .tooltip-content::before {
    display: none;
}

.tooltip-image .tooltip-content {
    padding: 0;
    overflow: hidden;
}

.tooltip-image img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.tooltip-rich .tooltip-content {
    min-width: 220px;
}

.tooltip-rich-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}

.tooltip-rich-content p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-grey-80);
}

.tooltip-badge {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(61, 126, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-blue);
}

/* Add tooltip animation for hover state on elements with tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: radial-gradient(circle at var(--tooltip-hover-x, 50%) var(--tooltip-hover-y, 50%), rgba(61, 126, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: -1;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Light theme tooltip overrides */
html.light-theme .tooltip-content {
    background: rgba(250, 250, 252, 0.95);
    color: var(--color-black);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-content::before {
    background: rgba(250, 250, 252, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-rich-content p {
    color: var(--color-grey-20);
}

html.light-theme .tooltip-badge {
    background: rgba(61, 126, 255, 0.1);
}

/* Media queries for tooltips */
@media (max-width: 768px) {
    .tooltip {
        max-width: 260px;
    }
    
    .tooltip-content {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .tooltip-rich-content h4 {
        font-size: 15px;
    }
    
    .tooltip-rich-content p {
        font-size: 12px;
    }
}

/* Cookie Consent Banner (disabled) */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    pointer-events: auto;
}

.cookie-consent.active {
    transform: translateY(0);
}

.cookie-consent-container {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--card-border);
    padding: 20px;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cookie-consent-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.cookie-settings-toggle {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.cookie-settings-toggle:hover,
.cookie-settings-toggle.active {
    background-color: var(--bg-tertiary);
    color: var(--color-blue);
}

.cookie-consent-main {
    margin-bottom: 20px;
}

.cookie-consent-main > p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 800px;
}

.cookie-consent-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    animation: fadeIn 0.3s ease;
    max-width: 950px;
}

.cookie-option {
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    position: relative;
}

.cookie-option-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.cookie-option-header h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0 12px;
}

.cookie-option p {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cookie-consent-actions .btn {
    min-width: 120px;
    font-size: 13px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-btn-accept-all {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-btn-save {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-consent-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    border-radius: 50%;
}

.cookie-consent-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* Cookie toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    transition: .3s;
    border-radius: 34px;
    border: 1px solid var(--card-border);
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    transition: .3s;
    border-radius: 50%;
}

input:checked + .cookie-slider {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

input:focus + .cookie-slider {
    box-shadow: 0 0 1px var(--color-blue);
}

input:checked + .cookie-slider:before {
    transform: translateX(16px);
    background-color: white;
}

input:disabled + .cookie-slider {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Media queries for cookie consent */
@media (max-width: 768px) {
    .cookie-consent-container {
        padding: 16px;
    }
    
    .cookie-consent-options {
        grid-template-columns: 1fr;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .cookie-consent-header h3 {
        font-size: 18px;
    }
    
    .cookie-consent-main > p {
        font-size: 14px;
    }
    
    .cookie-option {
        padding: 12px;
    }
    
    .cookie-consent-close {
        top: 12px;
        right: 12px;
    }
    
    .cookie-option-header h4 {
        font-size: 15px;
    }
    
    .cookie-option p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cookie-consent-actions {
        flex-direction: column;
    }
    
    .cookie-consent-actions .btn {
        width: 100%;
    }
}

/* Enhanced Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px !important;
    right: unset !important;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background-color 0.2s;
    color: var(--text-secondary);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    background-color: var(--bg-secondary);
    color: var(--color-blue);
}

.back-to-top.hover .progress-circle-path {
    stroke: var(--color-blue);
    stroke-width: 2.5px;
    transition: stroke 0.2s, stroke-width 0.2s;
}

.back-to-top.clicked {
    animation: pulse 0.7s ease;
}

.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    stroke: var(--card-border);
    opacity: 0.4;
}

.progress-circle-path {
    stroke: var(--text-secondary);
    transition: stroke-dashoffset 0.3s, stroke 0.2s, stroke-width 0.2s;
}

.back-to-top-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.back-to-top:hover .back-to-top-icon {
    transform: translateY(-3px);
}

.back-to-top.clicked .back-to-top-icon {
    transform: translateY(-5px);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Media queries for back-to-top button */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        left: 20px !important;
        right: unset !important;
        width: 40px;
        height: 40px;
    }
    
    .back-to-top-icon {
        width: 14px;
        height: 14px;
    }
    
    .progress-circle {
        width: 40px;
        height: 40px;
    }
    
    .progress-circle-bg,
    .progress-circle-path {
        cx: 20;
        cy: 20;
        r: 18;
    }
}

/* Smart Search Feature */
.search-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.search-modal.active .search-backdrop {
    opacity: 1;
}

.search-container {
    position: relative;
    width: 600px;
    max-width: 90%;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-top: 80px;
    overflow: hidden;
    z-index: 1;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal.active .search-container {
    transform: translateY(0);
}

.search-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--card-border);
}

.search-icon {
    color: var(--text-secondary);
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-shortcuts {
    display: flex;
    gap: 10px;
    margin-left: 16px;
}

.search-shortcut {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.search-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: 11px;
    font-family: var(--font-sans);
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    margin: 0 2px;
}

.search-body {
    max-height: 400px;
    overflow-y: auto;
}

.search-results {
    padding: 8px 0;
}

.search-result-category {
    padding: 6px 20px 0;
    margin-top: 8px;
}

.search-result-category h4 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: var(--bg-secondary);
}

.search-result-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-url {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background-color: rgba(61, 126, 255, 0.15);
    color: var(--color-blue);
    border-radius: 2px;
    padding: 0 2px;
}

.search-empty,
.search-loading {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-tertiary);
    display: none;
    flex-direction: column;
    align-items: center;
}

.search-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(61, 126, 255, 0.3);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

/* Header search button */
.header-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 8px;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
}

.header-search-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.search-shortcut-indicator {
    position: absolute;
    right: -4px;
    bottom: -4px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media queries for search */
@media (max-width: 768px) {
    .search-container {
        width: 92%;
        margin-top: 60px;
    }
    
    .search-shortcuts {
        display: none;
    }
    
    .search-body {
        max-height: 60vh;
    }
}

/* Lock body when search is open */
body.search-open {
    overflow: hidden;
}

/* Document Editor Section */
.document-section {
    position: relative;
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
}

.document-content {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.document-info {
    flex: 1;
    max-width: 60%;
}

.document-info h2 {
    font-size: 54px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-title);
}

.document-info > p {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 40px;
}

.document-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.pin-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.pin-image {
    transition: all 0.2s;
    will-change: transform;
}

.pin-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

.pin-line {
    height: 27px;
    width: 2px;
    background-color: #FF5F0B;
}

.pin-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #FF5F0B;
    margin-top: -1px;
}

.document-feature p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.document-preview {
    margin-top: 22px;
    margin-bottom: 30px;
}

.editor-preview {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.tap-indicator {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 15px;
}

.tap-arrow {
    width: 10px;
    height: 36px;
    margin-right: 4px;
    color: #666;
}

.tap-text {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

.editor-actions {
    display: flex;
    gap: 4px;
    margin-top: 15px;
    width: fit-content;
    padding: 5px;
    border-radius: 999px;
    background-color: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-btn.active {
    background-color: #333;
}

.action-icon {
    width: 14px;
    height: 14px;
    margin: auto;
}

.action-add.active svg path {
    stroke: white;
}

.sidebar-preview {
    flex: 1;
    max-width: 40%;
    padding-left: 8px;
    padding-top: 222px;
}

.sticky-sidebar {
    position: sticky;
    top: 222px;
    z-index: 10;
    height: 282px;
    width: 256px;
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px 18px 28px;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.sidebar-panel.hidden {
    opacity: 0;
    z-index: 5;
}

.sidebar-panel h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.sidebar-panel p {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #333;
}

.sidebar-backdrop {
    position: absolute;
    bottom: -52.5%;
    left: 50%;
    aspect-ratio: 0.912;
    width: 178.125%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.2) 0%, rgba(255, 95, 11, 0.05) 60%, transparent 100%);
    border-radius: 12px;
}

/* Document Section Media Queries */
@media (max-width: 1200px) {
    .document-info h2 {
        font-size: 44px;
    }
    
    .sticky-sidebar {
        height: 240px;
        width: 220px;
    }
    
    .sidebar-panel h3 {
        font-size: 16px;
    }
    
    .sidebar-panel p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .document-section {
        padding: 80px 0;
    }
    
    .document-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .document-info {
        max-width: 100%;
    }
    
    .sidebar-preview {
        max-width: 100%;
        padding-top: 0;
    }
    
    .sticky-sidebar {
        position: relative;
        top: 0;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .document-section {
        padding: 60px 0;
    }
    
    .document-info h2 {
        font-size: 36px;
    }
    
    .document-info > p {
        font-size: 16px;
    }
    
    .pin-line {
        height: 18px;
    }
    
    .pin-dot {
        height: 7px;
        width: 7px;
    }
    
    .pin-image {
        width: 36px;
        height: 36px;
    }
    
    .editor-actions {
        padding: 4px;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
    }
    
    .action-icon {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 576px) {
    .document-section {
        padding: 40px 0;
    }
    
    .document-info h2 {
        font-size: 28px;
    }
    
    .document-feature {
        gap: 10px;
    }
    
    .document-feature p {
        font-size: 14px;
    }
    
    .feature-description {
        font-size: 14px;
    }
    
    .sticky-sidebar {
        height: 200px;
        width: 180px;
    }
}

/* GitHub Integration Section */
.github-integration {
    position: relative;
    padding: 120px 0;
    background-color: #090A0C;
    color: white;
    overflow: hidden;
}

.github-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.github-content h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-family: var(--font-title);
    color: white;
    margin-bottom: 20px;
}

.github-content p {
    max-width: 580px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #99A2B2;
}

.github-graphic {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.github-graphic-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.github-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 96px;
    margin-top: 160px;
    width: 100%;
}

.github-feature {
    position: relative;
}

.feature-icon-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.feature-icon-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: -8px;
    left: -8px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
}

.feature-icon {
    height: 40px;
    width: auto;
    position: relative;
    z-index: 1;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.015em;
    color: white;
    font-family: var(--font-title);
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #99A2B2;
}

/* MetaBrain Section */
.metabrain-section {
    padding: 120px 0;
    background-color: var(--color-background);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.metabrain-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.metabrain-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.metabrain-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 50px;
}

.metabrain-primary-features, 
.metabrain-secondary-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.metabrain-feature {
    background-color: var(--color-card-background);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.metabrain-feature p {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1.5;
    z-index: 2;
}

.metabrain-feature strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.25rem;
}

.tasks-feature {
    background-image: url('assets/tasks-notes.png');
    background-size: cover;
    background-position: center;
}

.plan-feature {
    background-image: url('assets/plan-work.jpg');
    background-size: cover;
    background-position: center;
}

.notes-feature {
    background-image: url('assets/document-editor.svg');
    background-size: cover;
    background-position: center;
}

.collab-feature {
    background-image: url('assets/collab.jpg');
    background-size: cover;
    background-position: center;
}

.calendar-feature {
    background-image: url('assets/calendar.png');
    background-size: cover;
    background-position: center;
}

.chat-feature {
    background-image: url('assets/teammates.jpg');
    background-size: cover;
    background-position: center;
}

.manage-feature {
    background-image: url('assets/pm.jpg');
    background-size: cover;
    background-position: center;
}

/* Community Section Styles */
.community-section {
    padding: 120px 0;
    background-color: var(--color-background-alt);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.community-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(125, 126, 255, 0.08), transparent 50%),
                radial-gradient(circle at bottom left, rgba(255, 95, 11, 0.08), transparent 50%);
    z-index: 0;
}

.community-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.community-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    position: relative;
    z-index: 1;
}

.community-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.platform-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.platform-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.platform-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    padding: 15px;
}

.platform-svg {
    width: 100%;
    height: 100%;
}

.github-card .platform-icon {
    color: #7d80ff;
}

.slack-card .platform-icon {
    color: #4A154B;
}

.twitter-card .platform-icon {
    color: #1DA1F2;
}

.youtube-card .platform-icon {
    color: #FF0000;
}

.platform-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.platform-card p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 24px;
    flex-grow: 1;
}

.platform-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-bottom: 15px;
}

.platform-link:hover {
    color: var(--color-primary-hover);
}

.platform-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.platform-link:hover::after {
    transform: translateX(4px);
}

.metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.community-events {
    position: relative;
    z-index: 1;
}

.community-events h3 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.events-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.event-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.event-date {
    background: linear-gradient(135deg, #7d80ff, #ff5f0b);
    color: white;
    width: 80px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.event-month {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-day {
    font-size: 1.75rem;
    font-weight: 700;
}

.event-details {
    padding: 20px;
    flex-grow: 1;
}

.event-details h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--color-text);
}

.event-details p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.event-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-link:hover {
    color: var(--color-primary-hover);
}

.event-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.event-link:hover::after {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .community-section {
        padding: 80px 0;
    }
    
    .community-section h2 {
        font-size: 2.5rem;
    }
    
    .platform-card, 
    .event-card {
        max-width: 100%;
    }
    
    .events-container {
        grid-template-columns: 1fr;
    }
}

/* Join Movement Section */
.join-movement {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.copyright a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.copyright a:hover {
    color: white;
}

.copyright a:hover::after {
    width: 100%;
}

.footer-links {
    margin-left: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    z-index: 10;
}

.footer-links a {
    display: inline-flex;
    color: var(--color-grey-80);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

.social-links {
    margin-left: 70px;
    display: flex;
    gap: 18px;
    list-style: none;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.linkedin-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E");
}

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.slack-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
}

.social-links a:hover .social-icon {
    opacity: 1;
}

.made-with {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: right;
    position: relative;
    transition: transform 0.3s ease;
}

.made-with:hover {
    transform: translateY(-2px);
}

.made-with::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background: var(--gradient-primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.made-with:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.gradient-mark {
    margin-right: -12px;
    transition: transform 0.3s ease;
}

.made-with:hover .gradient-mark {
    transform: rotate(20deg);
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .work-together h2 {
        font-size: 72px;
    }
    
    .github-section h2,
    .join-movement h2 {
        font-size: 72px;
    }
    
    .join-image {
        left: -253px;
        top: 128px;
        max-width: 1630px;
    }
}

@media (max-width: 992px) {
    .work-content {
        padding-left: 96px;
    }
    
    .work-together h2 {
        max-width: 430px;
        font-size: 56px;
    }
    
    .work-together p {
        max-width: 450px;
        font-size: 16px;
    }
    
    .video-container {
        margin-left: 8px;
        margin-top: 48px;
        height: 316px;
    }
    
    .collaboration-text {
        margin-top: 72px;
        font-size: 20px;
    }
    
    .features-grid {
        gap: 32px;
    }
    
    .feature h3 {
        font-size: 24px;
    }
    
    .github-section {
        padding: 96px 0;
    }
    
    .github-section h2 {
        max-width: 400px;
        font-size: 56px;
    }
    
    .github-features {
        margin-top: 64px;
        gap: 48px 64px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
    
    .join-movement {
        padding: 77px 0 190px;
    }
    
    .join-movement h2 {
        max-width: 320px;
        font-size: 56px;
    }
    
    .join-image {
        left: -255px;
        top: 62px;
        max-width: 1430px;
    }
    
    .footer {
        padding: 14px 0;
    }
    
    .footer-links {
        margin-left: 0;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .work-content {
        padding-left: 0;
    }
    
    .work-together h2 {
        max-width: 250px;
        font-size: 36px;
    }
    
    .video-container {
        margin: 24px 5px 0;
        height: auto;
        width: calc(100% - 10px);
    }
    
    .collaboration-text {
        margin-top: 28px;
        font-size: 18px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .feature h3 {
        font-size: 20px;
        max-width: none;
    }
    
    .feature p {
        max-width: none;
    }
    
    .github-section {
        padding: 64px 0;
    }
    
    .github-section h2 {
        max-width: 384px;
        font-size: 36px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .github-feature h3 {
        font-size: 20px;
    }
    
    .join-movement {
        padding: 266px 0 235px;
        position: relative;
    }
    
    .join-movement .container {
        grid-template-columns: 1fr;
    }
    
    .join-content {
        grid-column: 1;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .join-movement h2 {
        font-size: 44px;
    }
    
    .join-image {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 767px;
        height: 560px;
        max-width: 767px;
    }
    
    .join-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
        text-align: center;
    }
    
    .copyright {
        margin-top: 8px;
        width: 100%;
    }
    
    .footer-links {
        margin-top: 36px;
        width: 100%;
        justify-content: center;
    }
    
    .social-links {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .made-with {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-1);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav {
    flex: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav > ul > li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
}

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 18px;
    text-align: left;
    padding: 12px 0;
    cursor: pointer;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 16px;
    margin-top: 8px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown-content a {
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-grey-60);
}

.mobile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-full {
    width: 100%;
}

/* Page transition overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-transition::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(61, 126, 255, 0.2) 0%, rgba(11, 12, 15, 0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition.active::before {
    transform: scale(1.5);
}

/* Loading spinner */
.page-transition::after {
    content: '';
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-orange);
    animation: spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.active::after {
    opacity: 1;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Hide sun icon in dark mode, moon icon in light mode */
.moon-icon {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

html.light-theme .moon-icon {
    opacity: 1;
    transform: rotate(0);
}

html.light-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle-mobile {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.theme-toggle-mobile .theme-toggle-icon {
    margin-right: 12px;
}

/* Newsletter subscription styles */
.newsletter-container {
    margin-top: 80px;
    padding: 40px;
    border-radius: 16px;
    background: rgba(26, 29, 36, 0.4);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.newsletter-container::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.newsletter-content {
    position: relative;
    z-index: 1;
}

.newsletter-container h3 {
    font-size: 28px;
    margin-bottom: 16px;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.newsletter-container p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 460px;
}

.newsletter-form {
    position: relative;
    transition: all 0.3s ease;
}

.input-group {
    display: flex;
    gap: 12px;
}

.newsletter-form input {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(35, 38, 47, 0.5);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(61, 126, 255, 0.2);
}

.newsletter-form input.error {
    border-color: #ff3333;
    box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.2);
}

.newsletter-submit {
    height: 48px;
    border-radius: 8px !important;
}

.error-message {
    color: #ff3333;
    font-size: 14px;
    margin-top: 8px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.newsletter-form.loading input,
.newsletter-form.loading button {
    opacity: 0.7;
    pointer-events: none;
}

.newsletter-form.loading button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    right: 16px;
    top: calc(50% - 10px);
    animation: spin 0.8s linear infinite;
}

.subscription-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn 0.5s ease forwards;
}

.success-icon {
    width: 56px;
    height: 56px;
    background-color: var(--color-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(61, 126, 255, 0.3);
}

.subscription-success p {
    margin-bottom: 8px;
    font-weight: 500;
}

.success-details {
    font-size: 14px;
    opacity: 0.7;
}

/* Confetti animation */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    transform-origin: center;
    opacity: 0;
    animation: confettiFall 3s ease-in-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* Shake animation for form errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Media queries for newsletter */
@media (max-width: 768px) {
    .newsletter-container {
        padding: 30px 24px;
        margin-top: 60px;
    }
    
    .newsletter-container h3 {
        font-size: 24px;
    }
    
    .input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .newsletter-submit {
        width: 100%;
    }
}

/* Advanced Tooltip System */
.tooltip-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 300px;
    opacity: 0;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    will-change: transform;
}

.tooltip-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.tooltip-content {
    position: relative;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(46, 49, 59, 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tooltip-content::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(46, 49, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
    z-index: -1;
    backdrop-filter: blur(8px);
}

.tooltip-top .tooltip-content::before {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.tooltip-bottom .tooltip-content::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.tooltip-left .tooltip-content::before {
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.tooltip-right .tooltip-content::before {
    top: 50%;
    left: -6px;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.tooltip-follow .tooltip-content::before {
    display: none;
}

.tooltip-image .tooltip-content {
    padding: 0;
    overflow: hidden;
}

.tooltip-image img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.tooltip-rich .tooltip-content {
    min-width: 220px;
}

.tooltip-rich-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}

.tooltip-rich-content p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-grey-80);
}

.tooltip-badge {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(61, 126, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-blue);
}

/* Add tooltip animation for hover state on elements with tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: radial-gradient(circle at var(--tooltip-hover-x, 50%) var(--tooltip-hover-y, 50%), rgba(61, 126, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: -1;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Light theme tooltip overrides */
html.light-theme .tooltip-content {
    background: rgba(250, 250, 252, 0.95);
    color: var(--color-black);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-content::before {
    background: rgba(250, 250, 252, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-rich-content p {
    color: var(--color-grey-20);
}

html.light-theme .tooltip-badge {
    background: rgba(61, 126, 255, 0.1);
}

/* Media queries for tooltips */
@media (max-width: 768px) {
    .tooltip {
        max-width: 260px;
    }
    
    .tooltip-content {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .tooltip-rich-content h4 {
        font-size: 15px;
    }
    
    .tooltip-rich-content p {
        font-size: 12px;
    }
}

/* Cookie Consent Banner (disabled) */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    pointer-events: auto;
}

.cookie-consent.active {
    transform: translateY(0);
}

.cookie-consent-container {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--card-border);
    padding: 20px;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cookie-consent-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.cookie-settings-toggle {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.cookie-settings-toggle:hover,
.cookie-settings-toggle.active {
    background-color: var(--bg-tertiary);
    color: var(--color-blue);
}

.cookie-consent-main {
    margin-bottom: 20px;
}

.cookie-consent-main > p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 800px;
}

.cookie-consent-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    animation: fadeIn 0.3s ease;
    max-width: 950px;
}

.cookie-option {
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    position: relative;
}

.cookie-option-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.cookie-option-header h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0 12px;
}

.cookie-option p {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cookie-consent-actions .btn {
    min-width: 120px;
    font-size: 13px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-btn-accept-all {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-btn-save {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-consent-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    border-radius: 50%;
}

.cookie-consent-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* Cookie toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    transition: .3s;
    border-radius: 34px;
    border: 1px solid var(--card-border);
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    transition: .3s;
    border-radius: 50%;
}

input:checked + .cookie-slider {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

input:focus + .cookie-slider {
    box-shadow: 0 0 1px var(--color-blue);
}

input:checked + .cookie-slider:before {
    transform: translateX(16px);
    background-color: white;
}

input:disabled + .cookie-slider {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Media queries for cookie consent */
@media (max-width: 768px) {
    .cookie-consent-container {
        padding: 16px;
    }
    
    .cookie-consent-options {
        grid-template-columns: 1fr;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .cookie-consent-header h3 {
        font-size: 18px;
    }
    
    .cookie-consent-main > p {
        font-size: 14px;
    }
    
    .cookie-option {
        padding: 12px;
    }
    
    .cookie-consent-close {
        top: 12px;
        right: 12px;
    }
    
    .cookie-option-header h4 {
        font-size: 15px;
    }
    
    .cookie-option p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cookie-consent-actions {
        flex-direction: column;
    }
    
    .cookie-consent-actions .btn {
        width: 100%;
    }
}

/* Enhanced Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px !important;
    right: unset !important;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background-color 0.2s;
    color: var(--text-secondary);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    background-color: var(--bg-secondary);
    color: var(--color-blue);
}

.back-to-top.hover .progress-circle-path {
    stroke: var(--color-blue);
    stroke-width: 2.5px;
    transition: stroke 0.2s, stroke-width 0.2s;
}

.back-to-top.clicked {
    animation: pulse 0.7s ease;
}

.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    stroke: var(--card-border);
    opacity: 0.4;
}

.progress-circle-path {
    stroke: var(--text-secondary);
    transition: stroke-dashoffset 0.3s, stroke 0.2s, stroke-width 0.2s;
}

.back-to-top-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.back-to-top:hover .back-to-top-icon {
    transform: translateY(-3px);
}

.back-to-top.clicked .back-to-top-icon {
    transform: translateY(-5px);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Media queries for back-to-top button */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        left: 20px !important;
        right: unset !important;
        width: 40px;
        height: 40px;
    }
    
    .back-to-top-icon {
        width: 14px;
        height: 14px;
    }
    
    .progress-circle {
        width: 40px;
        height: 40px;
    }
    
    .progress-circle-bg,
    .progress-circle-path {
        cx: 20;
        cy: 20;
        r: 18;
    }
}

/* Smart Search Feature */
.search-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.search-modal.active .search-backdrop {
    opacity: 1;
}

.search-container {
    position: relative;
    width: 600px;
    max-width: 90%;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-top: 80px;
    overflow: hidden;
    z-index: 1;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal.active .search-container {
    transform: translateY(0);
}

.search-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--card-border);
}

.search-icon {
    color: var(--text-secondary);
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-shortcuts {
    display: flex;
    gap: 10px;
    margin-left: 16px;
}

.search-shortcut {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.search-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: 11px;
    font-family: var(--font-sans);
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    margin: 0 2px;
}

.search-body {
    max-height: 400px;
    overflow-y: auto;
}

.search-results {
    padding: 8px 0;
}

.search-result-category {
    padding: 6px 20px 0;
    margin-top: 8px;
}

.search-result-category h4 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: var(--bg-secondary);
}

.search-result-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-url {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background-color: rgba(61, 126, 255, 0.15);
    color: var(--color-blue);
    border-radius: 2px;
    padding: 0 2px;
}

.search-empty,
.search-loading {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-tertiary);
    display: none;
    flex-direction: column;
    align-items: center;
}

.search-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(61, 126, 255, 0.3);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

/* Header search button */
.header-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 8px;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
}

.header-search-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.search-shortcut-indicator {
    position: absolute;
    right: -4px;
    bottom: -4px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media queries for search */
@media (max-width: 768px) {
    .search-container {
        width: 92%;
        margin-top: 60px;
    }
    
    .search-shortcuts {
        display: none;
    }
    
    .search-body {
        max-height: 60vh;
    }
}

/* Lock body when search is open */
body.search-open {
    overflow: hidden;
}

/* Document Editor Section */
.document-section {
    position: relative;
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
}

.document-content {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.document-info {
    flex: 1;
    max-width: 60%;
}

.document-info h2 {
    font-size: 54px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-title);
}

.document-info > p {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 40px;
}

.document-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.pin-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.pin-image {
    transition: all 0.2s;
    will-change: transform;
}

.pin-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

.pin-line {
    height: 27px;
    width: 2px;
    background-color: #FF5F0B;
}

.pin-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #FF5F0B;
    margin-top: -1px;
}

.document-feature p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.document-preview {
    margin-top: 22px;
    margin-bottom: 30px;
}

.editor-preview {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.tap-indicator {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 15px;
}

.tap-arrow {
    width: 10px;
    height: 36px;
    margin-right: 4px;
    color: #666;
}

.tap-text {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

.editor-actions {
    display: flex;
    gap: 4px;
    margin-top: 15px;
    width: fit-content;
    padding: 5px;
    border-radius: 999px;
    background-color: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-btn.active {
    background-color: #333;
}

.action-icon {
    width: 14px;
    height: 14px;
    margin: auto;
}

.action-add.active svg path {
    stroke: white;
}

.sidebar-preview {
    flex: 1;
    max-width: 40%;
    padding-left: 8px;
    padding-top: 222px;
}

.sticky-sidebar {
    position: sticky;
    top: 222px;
    z-index: 10;
    height: 282px;
    width: 256px;
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px 18px 28px;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.sidebar-panel.hidden {
    opacity: 0;
    z-index: 5;
}

.sidebar-panel h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.sidebar-panel p {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #333;
}

.sidebar-backdrop {
    position: absolute;
    bottom: -52.5%;
    left: 50%;
    aspect-ratio: 0.912;
    width: 178.125%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.2) 0%, rgba(255, 95, 11, 0.05) 60%, transparent 100%);
    border-radius: 12px;
}

/* Document Section Media Queries */
@media (max-width: 1200px) {
    .document-info h2 {
        font-size: 44px;
    }
    
    .sticky-sidebar {
        height: 240px;
        width: 220px;
    }
    
    .sidebar-panel h3 {
        font-size: 16px;
    }
    
    .sidebar-panel p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .document-section {
        padding: 80px 0;
    }
    
    .document-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .document-info {
        max-width: 100%;
    }
    
    .sidebar-preview {
        max-width: 100%;
        padding-top: 0;
    }
    
    .sticky-sidebar {
        position: relative;
        top: 0;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .document-section {
        padding: 60px 0;
    }
    
    .document-info h2 {
        font-size: 36px;
    }
    
    .document-info > p {
        font-size: 16px;
    }
    
    .pin-line {
        height: 18px;
    }
    
    .pin-dot {
        height: 7px;
        width: 7px;
    }
    
    .pin-image {
        width: 36px;
        height: 36px;
    }
    
    .editor-actions {
        padding: 4px;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
    }
    
    .action-icon {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 576px) {
    .document-section {
        padding: 40px 0;
    }
    
    .document-info h2 {
        font-size: 28px;
    }
    
    .document-feature {
        gap: 10px;
    }
    
    .document-feature p {
        font-size: 14px;
    }
    
    .feature-description {
        font-size: 14px;
    }
    
    .sticky-sidebar {
        height: 200px;
        width: 180px;
    }
}

/* GitHub Integration Section */
.github-integration {
    position: relative;
    padding: 120px 0;
    background-color: #090A0C;
    color: white;
    overflow: hidden;
}

.github-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.github-content h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-family: var(--font-title);
    color: white;
    margin-bottom: 20px;
}

.github-content p {
    max-width: 580px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #99A2B2;
}

.github-graphic {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.github-graphic-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.github-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 96px;
    margin-top: 160px;
    width: 100%;
}

.github-feature {
    position: relative;
}

.feature-icon-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.feature-icon-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: -8px;
    left: -8px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
}

.feature-icon {
    height: 40px;
    width: auto;
    position: relative;
    z-index: 1;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.015em;
    color: white;
    font-family: var(--font-title);
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #99A2B2;
}

/* MetaBrain Section */
.metabrain-section {
    padding: 120px 0;
    background-color: var(--color-background);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.metabrain-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.metabrain-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.metabrain-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 50px;
}

.metabrain-primary-features, 
.metabrain-secondary-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.metabrain-feature {
    background-color: var(--color-card-background);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.metabrain-feature p {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1.5;
    z-index: 2;
}

.metabrain-feature strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.25rem;
}

.tasks-feature {
    background-image: url('assets/tasks-notes.png');
    background-size: cover;
    background-position: center;
}

.plan-feature {
    background-image: url('assets/plan-work.jpg');
    background-size: cover;
    background-position: center;
}

.notes-feature {
    background-image: url('assets/document-editor.svg');
    background-size: cover;
    background-position: center;
}

.collab-feature {
    background-image: url('assets/collab.jpg');
    background-size: cover;
    background-position: center;
}

.calendar-feature {
    background-image: url('assets/calendar.png');
    background-size: cover;
    background-position: center;
}

.chat-feature {
    background-image: url('assets/teammates.jpg');
    background-size: cover;
    background-position: center;
}

.manage-feature {
    background-image: url('assets/pm.jpg');
    background-size: cover;
    background-position: center;
}

/* Community Section Styles */
.community-section {
    padding: 120px 0;
    background-color: var(--color-background-alt);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.community-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(125, 126, 255, 0.08), transparent 50%),
                radial-gradient(circle at bottom left, rgba(255, 95, 11, 0.08), transparent 50%);
    z-index: 0;
}

.community-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.community-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    position: relative;
    z-index: 1;
}

.community-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.platform-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.platform-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.platform-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    padding: 15px;
}

.platform-svg {
    width: 100%;
    height: 100%;
}

.github-card .platform-icon {
    color: #7d80ff;
}

.slack-card .platform-icon {
    color: #4A154B;
}

.twitter-card .platform-icon {
    color: #1DA1F2;
}

.youtube-card .platform-icon {
    color: #FF0000;
}

.platform-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.platform-card p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 24px;
    flex-grow: 1;
}

.platform-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-bottom: 15px;
}

.platform-link:hover {
    color: var(--color-primary-hover);
}

.platform-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.platform-link:hover::after {
    transform: translateX(4px);
}

.metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.community-events {
    position: relative;
    z-index: 1;
}

.community-events h3 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.events-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.event-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.event-date {
    background: linear-gradient(135deg, #7d80ff, #ff5f0b);
    color: white;
    width: 80px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.event-month {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-day {
    font-size: 1.75rem;
    font-weight: 700;
}

.event-details {
    padding: 20px;
    flex-grow: 1;
}

.event-details h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--color-text);
}

.event-details p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.event-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-link:hover {
    color: var(--color-primary-hover);
}

.event-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.event-link:hover::after {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .community-section {
        padding: 80px 0;
    }
    
    .community-section h2 {
        font-size: 2.5rem;
    }
    
    .platform-card, 
    .event-card {
        max-width: 100%;
    }
    
    .events-container {
        grid-template-columns: 1fr;
    }
}

/* Join Movement Section */
.join-movement {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.copyright a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.copyright a:hover {
    color: white;
}

.copyright a:hover::after {
    width: 100%;
}

.footer-links {
    margin-left: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    z-index: 10;
}

.footer-links a {
    display: inline-flex;
    color: var(--color-grey-80);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

.social-links {
    margin-left: 70px;
    display: flex;
    gap: 18px;
    list-style: none;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.linkedin-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E");
}

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.slack-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
}

.social-links a:hover .social-icon {
    opacity: 1;
}

.made-with {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: right;
    position: relative;
    transition: transform 0.3s ease;
}

.made-with:hover {
    transform: translateY(-2px);
}

.made-with::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background: var(--gradient-primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.made-with:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.gradient-mark {
    margin-right: -12px;
    transition: transform 0.3s ease;
}

.made-with:hover .gradient-mark {
    transform: rotate(20deg);
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .work-together h2 {
        font-size: 72px;
    }
    
    .github-section h2,
    .join-movement h2 {
        font-size: 72px;
    }
    
    .join-image {
        left: -253px;
        top: 128px;
        max-width: 1630px;
    }
}

@media (max-width: 992px) {
    .work-content {
        padding-left: 96px;
    }
    
    .work-together h2 {
        max-width: 430px;
        font-size: 56px;
    }
    
    .work-together p {
        max-width: 450px;
        font-size: 16px;
    }
    
    .video-container {
        margin-left: 8px;
        margin-top: 48px;
        height: 316px;
    }
    
    .collaboration-text {
        margin-top: 72px;
        font-size: 20px;
    }
    
    .features-grid {
        gap: 32px;
    }
    
    .feature h3 {
        font-size: 24px;
    }
    
    .github-section {
        padding: 96px 0;
    }
    
    .github-section h2 {
        max-width: 400px;
        font-size: 56px;
    }
    
    .github-features {
        margin-top: 64px;
        gap: 48px 64px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
    
    .join-movement {
        padding: 77px 0 190px;
    }
    
    .join-movement h2 {
        max-width: 320px;
        font-size: 56px;
    }
    
    .join-image {
        left: -255px;
        top: 62px;
        max-width: 1430px;
    }
    
    .footer {
        padding: 14px 0;
    }
    
    .footer-links {
        margin-left: 0;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .work-content {
        padding-left: 0;
    }
    
    .work-together h2 {
        max-width: 250px;
        font-size: 36px;
    }
    
    .video-container {
        margin: 24px 5px 0;
        height: auto;
        width: calc(100% - 10px);
    }
    
    .collaboration-text {
        margin-top: 28px;
        font-size: 18px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .feature h3 {
        font-size: 20px;
        max-width: none;
    }
    
    .feature p {
        max-width: none;
    }
    
    .github-section {
        padding: 64px 0;
    }
    
    .github-section h2 {
        max-width: 384px;
        font-size: 36px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .github-feature h3 {
        font-size: 20px;
    }
    
    .join-movement {
        padding: 266px 0 235px;
        position: relative;
    }
    
    .join-movement .container {
        grid-template-columns: 1fr;
    }
    
    .join-content {
        grid-column: 1;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .join-movement h2 {
        font-size: 44px;
    }
    
    .join-image {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 767px;
        height: 560px;
        max-width: 767px;
    }
    
    .join-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
        text-align: center;
    }
    
    .copyright {
        margin-top: 8px;
        width: 100%;
    }
    
    .footer-links {
        margin-top: 36px;
        width: 100%;
        justify-content: center;
    }
    
    .social-links {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .made-with {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-1);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav {
    flex: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav > ul > li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
}

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 18px;
    text-align: left;
    padding: 12px 0;
    cursor: pointer;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 16px;
    margin-top: 8px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown-content a {
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-grey-60);
}

.mobile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-full {
    width: 100%;
}

/* Page transition overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-transition::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(61, 126, 255, 0.2) 0%, rgba(11, 12, 15, 0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition.active::before {
    transform: scale(1.5);
}

/* Loading spinner */
.page-transition::after {
    content: '';
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-orange);
    animation: spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.active::after {
    opacity: 1;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Hide sun icon in dark mode, moon icon in light mode */
.moon-icon {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

html.light-theme .moon-icon {
    opacity: 1;
    transform: rotate(0);
}

html.light-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle-mobile {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.theme-toggle-mobile .theme-toggle-icon {
    margin-right: 12px;
}

/* Newsletter subscription styles */
.newsletter-container {
/* Base styles */
:root {
    --color-black: #090a0c;
    --color-white: #ffffff;
    --color-grey-1: #0B0C0F;
    --color-grey-5: #1A1D24;
    --color-grey-10: #23262F;
    --color-grey-20: #303236;
    --color-grey-50: #85878C;
    --color-grey-60: #9DA0A5;
    --color-grey-80: #C9CBCF;
    --color-grey-90: #E5E7EB;
    --color-grey-98: #F6F6F6;
    --color-blue: #3D7EFF;
    --color-orange: #FF5F0B;
    --gradient-primary: linear-gradient(90deg, #F58041 0%, #AC795C 25.6%, #887064 41.58%, #716A69 56.98%, #61656B 69.44%);
    --text-gradient: linear-gradient(135deg, white 30%, #d5d8f6 80%, #fdf7fe 100%);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Theme Variables */
    --bg-primary: var(--color-grey-1);
    --bg-secondary: var(--color-grey-5);
    --bg-tertiary: var(--color-grey-10);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-grey-80);
    --text-tertiary: var(--color-grey-60);
    --card-bg: var(--color-grey-10);
    --card-border: rgba(255, 255, 255, 0.1);
    
    /* Transition timing for theme changes */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme overrides */
html.light-theme {
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-grey-98);
    --bg-tertiary: var(--color-grey-90);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-grey-20);
    --text-tertiary: var(--color-grey-50);
    --card-bg: var(--color-white);
    --card-border: rgba(0, 0, 0, 0.1);
    --text-gradient: linear-gradient(135deg, var(--color-grey-10) 30%, var(--color-grey-5) 80%, var(--color-black) 100%);
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    transition: var(--theme-transition);
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-primary {
    color: #5A250A;
    background-color: #d1d1d1;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, #FFAA81 26.5%, #FFDA9F 37.5%, rgba(255, 170, 129, 0.50) 49%, rgba(210, 106, 58, 0.00) 92.5%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

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

.btn-secondary {
    color: var(--color-white);
    background-color: var(--color-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline {
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-arrow {
    height: 9px;
    width: 17px;
    margin-left: 6px;
    fill: currentColor;
}

/* Header styles */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 64px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.header-container {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10;
}

.logo {
    display: block;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.9;
}

.main-nav {
    margin-left: 77px;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a, 
.main-nav button {
    display: inline-flex;
    padding: 12px;
    font-size: 14px;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    white-space: pre;
}

.main-nav a:hover, 
.main-nav button:hover {
    color: var(--color-blue);
}

.dropdown {
    position: relative;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA2Ij48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS40IiBkPSJtMSAxIDQgNCA0LTQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.dropdown-content {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    transition: opacity 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-grey-10);
    background-color: var(--color-grey-5);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 14px;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--color-grey-10);
}

.header-actions {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
}

.github-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    padding: 0 6px;
    transition: color 0.2s;
}

.github-link:hover {
    color: var(--color-grey-80);
}

.github-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }
}

section {
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-section {
    background-color: #000;
    color: #fff;
}

.white-section {
    background-color: #fff;
    color: #000;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
} 

/* Hero section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    max-height: 1438px;
    padding-top: 184px;
    overflow: hidden;
    background-color: var(--bg-primary);
    transition: var(--theme-transition);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: radial-gradient(circle at 50% 0%, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hero-container {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.hero-title {
    max-width: 700px;
    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.2));
    position: relative;
    margin-bottom: 10px;
    opacity: 0;
    animation: titleFadeIn 0.8s ease-out forwards 0.2s;
}

.hero-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    filter: blur(20px);
    opacity: 0.6;
    transform: translateZ(0);
}

.hero-subtitle {
    margin-top: 20px;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-grey-90);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-cta {
    margin-top: 44px;
    z-index: 10;
    position: relative;
}

.hero-image-container {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: 80%;
    max-width: 1024px;
    z-index: 5;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease;
}

.hero-image-container:hover {
    transform: perspective(1000px) rotateX(0);
}

.hero-image {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.hero-features {
    position: absolute;
    bottom: 88px;
    z-index: 30;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: -0.02em;
    width: 100%;
    left: 0;
}

.hero-features p {
    margin-bottom: 14px;
    font-weight: 300;
    line-height: 1;
/* Base styles */
:root {
    --color-black: #090a0c;
    --color-white: #ffffff;
    --color-grey-1: #0B0C0F;
    --color-grey-5: #1A1D24;
    --color-grey-10: #23262F;
    --color-grey-20: #303236;
    --color-grey-50: #85878C;
    --color-grey-60: #9DA0A5;
    --color-grey-80: #C9CBCF;
    --color-grey-90: #E5E7EB;
    --color-grey-98: #F6F6F6;
    --color-blue: #3D7EFF;
    --color-orange: #FF5F0B;
    --gradient-primary: linear-gradient(90deg, #F58041 0%, #AC795C 25.6%, #887064 41.58%, #716A69 56.98%, #61656B 69.44%);
    --text-gradient: linear-gradient(135deg, white 30%, #d5d8f6 80%, #fdf7fe 100%);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Theme Variables */
    --bg-primary: var(--color-grey-1);
    --bg-secondary: var(--color-grey-5);
    --bg-tertiary: var(--color-grey-10);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-grey-80);
    --text-tertiary: var(--color-grey-60);
    --card-bg: var(--color-grey-10);
    --card-border: rgba(255, 255, 255, 0.1);
    
    /* Transition timing for theme changes */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme overrides */
html.light-theme {
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-grey-98);
    --bg-tertiary: var(--color-grey-90);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-grey-20);
    --text-tertiary: var(--color-grey-50);
    --card-bg: var(--color-white);
    --card-border: rgba(0, 0, 0, 0.1);
    --text-gradient: linear-gradient(135deg, var(--color-grey-10) 30%, var(--color-grey-5) 80%, var(--color-black) 100%);
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    transition: var(--theme-transition);
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-primary {
    color: #5A250A;
    background-color: #d1d1d1;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, #FFAA81 26.5%, #FFDA9F 37.5%, rgba(255, 170, 129, 0.50) 49%, rgba(210, 106, 58, 0.00) 92.5%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

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

.btn-secondary {
    color: var(--color-white);
    background-color: var(--color-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline {
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-arrow {
    height: 9px;
    width: 17px;
    margin-left: 6px;
    fill: currentColor;
}

/* Header styles */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 64px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.header-container {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10;
}

.logo {
    display: block;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.9;
}

.main-nav {
    margin-left: 77px;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a, 
.main-nav button {
    display: inline-flex;
    padding: 12px;
    font-size: 14px;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    white-space: pre;
}

.main-nav a:hover, 
.main-nav button:hover {
    color: var(--color-blue);
}

.dropdown {
    position: relative;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA2Ij48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS40IiBkPSJtMSAxIDQgNCA0LTQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.dropdown-content {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    transition: opacity 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-grey-10);
    background-color: var(--color-grey-5);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 14px;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--color-grey-10);
}

.header-actions {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
}

.github-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    padding: 0 6px;
    transition: color 0.2s;
}

.github-link:hover {
    color: var(--color-grey-80);
}

.github-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }
}

section {
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-section {
    background-color: #000;
    color: #fff;
}

.white-section {
    background-color: #fff;
    color: #000;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
}

/* Hero section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    max-height: 1438px;
    padding-top: 184px;
    overflow: hidden;
    background-color: var(--bg-primary);
    transition: var(--theme-transition);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: radial-gradient(circle at 50% 0%, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hero-container {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    max-width: 700px;
    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.2));
    position: relative;
    margin-bottom: 10px;
    animation: titleFadeIn 0.8s ease-out forwards;
}

.hero-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    filter: blur(20px);
    opacity: 0.6;
    transform: translateZ(0);
}

.hero-subtitle {
    margin-top: 20px;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-grey-90);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-cta {
    margin-top: 44px;
    z-index: 10;
    position: relative;
}

.hero-image-container {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: 80%;
    max-width: 1024px;
    z-index: 5;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease;
}

.hero-image-container:hover {
    transform: perspective(1000px) rotateX(0);
}

.hero-image {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.hero-features {
    position: absolute;
    bottom: 88px;
    z-index: 30;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: -0.02em;
    width: 100%;
}

.hero-features p {
    margin-bottom: 14px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
}

.scrolling-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    padding: 8px 0;
    margin-left: -20px;
    margin-right: -20px;
}

.scrolling-content {
    display: inline-block;
    white-space: nowrap;
    animation: scrollFeatures 40s linear infinite;
    padding-left: 20px;
}

.scrolling-content span {
    display: inline-block;
    font-weight: 600;
    color: var(--text-primary);
    padding: 5px 0;
}

.feature-dot {
    display: inline-block;
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.3);
}

@keyframes scrollFeatures {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Add pause on hover effect */
.scrolling-wrapper:hover .scrolling-content {
    animation-play-state: paused;
}

/* Adjust scrolling speed for mobile */
@media (max-width: 768px) {
    .scrolling-content {
        animation: scrollFeatures 25s linear infinite;
    }
    
    .hero-features {
        left: 0;
        right: 0;
        bottom: 30px;
        font-size: 12px;
    }
    
    .feature-dot {
        margin: 0 8px;
    }
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 340px;
    background: linear-gradient(to bottom, rgba(11, 12, 15, 0) 0%, var(--color-grey-1) 50%);
    pointer-events: none;
}

/* Productivity section */
.productivity {
    padding: 160px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    z-index: 10;
    transition: var(--theme-transition);
}

.productivity h2 {
    font-size: 80px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.productivity > .container > p {
    margin-top: 24px;
    max-width: 705px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.feature-cards {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.feature-card {
    position: relative;
    height: 420px;
    width: 428px;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--card-bg);
    background-clip: padding-box;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 60%);
    z-index: 1;
    pointer-events: none;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.feature-card.wide {
    width: 768px;
}

.feature-card.wide::before {
    background: linear-gradient(135deg, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.5);
}

.card-content {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    padding: 24px;
    background: linear-gradient(to top, var(--card-bg) 0%, rgba(22, 23, 27, 0.8) 60%, rgba(22, 23, 27, 0) 100%);
}

.card-content h3 {
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 6px;
}

.card-content p {
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1200px) {
    .hero-title {
        font-size: 72px;
        max-width: 600px;
        line-height: 1.05;
    }

    .feature-card {
        height: 300px;
        width: 308px;
    }

    .feature-card.wide {
        width: 572px;
    }
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: 112px;
    }

    .hero-title {
        font-size: 56px;
        max-width: 500px;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-image-container {
        position: relative;
        margin-top: -36%;
        width: 120%;
        left: 0;
    }

    .productivity {
        padding: 100px 0;
    }

    .productivity h2 {
        font-size: 64px;
    }

    .feature-card {
        height: 260px;
        width: 252px;
    }

    .feature-card.wide {
        width: 436px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 40px;
        max-width: 100%;
        line-height: 1.2;
        font-weight: 700;
    }

    .hero-subtitle {
        font-size: 15px;
        max-width: 90%;
    }

    .hero-cta {
        margin-top: 20px;
    }

    .hero-features {
        left: 20px !important;
        right: unset !important;
        right: 0;
        bottom: 36px;
        font-size: 12px;
    }

    .hero-image-container {
        position: relative;
        margin-top: 18.7%;
        width: 100%;
    }

    .productivity {
        padding: 64px 0;
    }

    .productivity h2 {
        font-size: 36px;
    }

    .productivity > .container > p {
        font-size: 15px;
    }

    .feature-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card, 
    .feature-card.wide {
        width: 100%;
    }
}

/* Work Together Section */
.work-together {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

/* Base styles */
:root {
    --color-black: #090a0c;
    --color-white: #ffffff;
    --color-grey-1: #0B0C0F;
    --color-grey-5: #1A1D24;
    --color-grey-10: #23262F;
    --color-grey-20: #303236;
    --color-grey-50: #85878C;
    --color-grey-60: #9DA0A5;
    --color-grey-80: #C9CBCF;
    --color-grey-90: #E5E7EB;
    --color-grey-98: #F6F6F6;
    --color-blue: #3D7EFF;
    --color-orange: #FF5F0B;
    --gradient-primary: linear-gradient(90deg, #F58041 0%, #AC795C 25.6%, #887064 41.58%, #716A69 56.98%, #61656B 69.44%);
    --text-gradient: linear-gradient(135deg, white 30%, #d5d8f6 80%, #fdf7fe 100%);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Theme Variables */
    --bg-primary: var(--color-grey-1);
    --bg-secondary: var(--color-grey-5);
    --bg-tertiary: var(--color-grey-10);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-grey-80);
    --text-tertiary: var(--color-grey-60);
    --card-bg: var(--color-grey-10);
    --card-border: rgba(255, 255, 255, 0.1);
    
    /* Transition timing for theme changes */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme overrides */
html.light-theme {
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-grey-98);
    --bg-tertiary: var(--color-grey-90);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-grey-20);
    --text-tertiary: var(--color-grey-50);
    --card-bg: var(--color-white);
    --card-border: rgba(0, 0, 0, 0.1);
    --text-gradient: linear-gradient(135deg, var(--color-grey-10) 30%, var(--color-grey-5) 80%, var(--color-black) 100%);
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    transition: var(--theme-transition);
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-primary {
    color: #5A250A;
    background-color: #d1d1d1;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, #FFAA81 26.5%, #FFDA9F 37.5%, rgba(255, 170, 129, 0.50) 49%, rgba(210, 106, 58, 0.00) 92.5%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

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

.btn-secondary {
    color: var(--color-white);
    background-color: var(--color-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline {
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-arrow {
    height: 9px;
    width: 17px;
    margin-left: 6px;
    fill: currentColor;
}

/* Header styles */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 64px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.header-container {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10;
}

.logo {
    display: block;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.9;
}

.main-nav {
    margin-left: 77px;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a, 
.main-nav button {
    display: inline-flex;
    padding: 12px;
    font-size: 14px;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    white-space: pre;
}

.main-nav a:hover, 
.main-nav button:hover {
    color: var(--color-blue);
}

.dropdown {
    position: relative;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA2Ij48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS40IiBkPSJtMSAxIDQgNCA0LTQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.dropdown-content {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    transition: opacity 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-grey-10);
    background-color: var(--color-grey-5);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 14px;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--color-grey-10);
}

.header-actions {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
}

.github-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    padding: 0 6px;
    transition: color 0.2s;
}

.github-link:hover {
    color: var(--color-grey-80);
}

.github-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }
}

section {
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-section {
    background-color: #000;
    color: #fff;
}

.white-section {
    background-color: #fff;
    color: #000;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
}

/* Hero section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    max-height: 1438px;
    padding-top: 184px;
    overflow: hidden;
    background-color: var(--bg-primary);
    transition: var(--theme-transition);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: radial-gradient(circle at 50% 0%, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hero-container {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    max-width: 700px;
    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.2));
    position: relative;
    margin-bottom: 10px;
    opacity: 0;
    animation: titleFadeIn 0.8s ease-out forwards 0.2s;
}

.hero-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    filter: blur(20px);
    opacity: 0.6;
    transform: translateZ(0);
}

.hero-subtitle {
    margin-top: 20px;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-grey-90);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-cta {
    margin-top: 44px;
    z-index: 10;
    position: relative;
}

.hero-image-container {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: 80%;
    max-width: 1024px;
    z-index: 5;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease;
}

.hero-image-container:hover {
    transform: perspective(1000px) rotateX(0);
}

.hero-image {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.hero-features {
    position: absolute;
    bottom: 88px;
    z-index: 30;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: -0.02em;
    width: 100%;
}

.hero-features p {
    margin-bottom: 14px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
}

.scrolling-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    padding: 8px 0;
    margin-left: -20px;
    margin-right: -20px;
}

.scrolling-content {
    display: inline-block;
    white-space: nowrap;
    animation: scrollFeatures 40s linear infinite;
    padding-left: 20px;
}

.scrolling-content span {
    display: inline-block;
    font-weight: 600;
    color: var(--text-primary);
    padding: 5px 0;
}

.feature-dot {
    display: inline-block;
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.3);
}

@keyframes scrollFeatures {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Add pause on hover effect */
.scrolling-wrapper:hover .scrolling-content {
    animation-play-state: paused;
}

/* Adjust scrolling speed for mobile */
@media (max-width: 768px) {
    .scrolling-content {
        animation: scrollFeatures 25s linear infinite;
    }
    
    .hero-features {
        left: 0;
        right: 0;
        bottom: 30px;
        font-size: 12px;
    }
    
    .feature-dot {
        margin: 0 8px;
    }
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 340px;
    background: linear-gradient(to bottom, rgba(11, 12, 15, 0) 0%, var(--color-grey-1) 50%);
    pointer-events: none;
}

/* Productivity section */
.productivity {
    padding: 160px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    z-index: 10;
    transition: var(--theme-transition);
}

.productivity h2 {
    font-size: 80px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.productivity > .container > p {
    margin-top: 24px;
    max-width: 705px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.feature-cards {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.feature-card {
    position: relative;
    height: 420px;
    width: 428px;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--card-bg);
    background-clip: padding-box;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 60%);
    z-index: 1;
    pointer-events: none;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.feature-card.wide {
    width: 768px;
}

.feature-card.wide::before {
    background: linear-gradient(135deg, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.5);
}

.card-content {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    padding: 24px;
    background: linear-gradient(to top, var(--card-bg) 0%, rgba(22, 23, 27, 0.8) 60%, rgba(22, 23, 27, 0) 100%);
}

.card-content h3 {
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 6px;
}

.card-content p {
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1200px) {
    .hero-title {
        font-size: 72px;
        max-width: 600px;
        line-height: 1.05;
    }

    .feature-card {
        height: 300px;
        width: 308px;
    }

    .feature-card.wide {
        width: 572px;
    }
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: 112px;
    }

    .hero-title {
        font-size: 56px;
        max-width: 500px;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-image-container {
        position: relative;
        margin-top: -36%;
        width: 120%;
        left: 0;
    }

    .productivity {
        padding: 100px 0;
    }

    .productivity h2 {
        font-size: 64px;
    }

    .feature-card {
        height: 260px;
        width: 252px;
    }

    .feature-card.wide {
        width: 436px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 40px;
        max-width: 100%;
        line-height: 1.2;
        font-weight: 700;
    }

    .hero-subtitle {
        font-size: 15px;
        max-width: 90%;
    }

    .hero-cta {
        margin-top: 20px;
    }

    .hero-features {
        left: 20px !important;
        right: unset !important;
        right: 0;
        bottom: 36px;
        font-size: 12px;
    }

    .hero-image-container {
        position: relative;
        margin-top: 18.7%;
        width: 100%;
    }

    .productivity {
        padding: 64px 0;
    }

    .productivity h2 {
        font-size: 36px;
    }

    .productivity > .container > p {
        font-size: 15px;
    }

    .feature-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card, 
    .feature-card.wide {
        width: 100%;
    }
}

/* Work Together Section */
.work-together {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.work-together::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-together::after {
    content: '';
    position: absolute;
    bottom: -200px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-content {
    padding-left: 320px;
    position: relative;
    z-index: 2;
}

.work-together h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.03em;
    position: relative;
}

.work-together h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-orange) 100%);
    border-radius: 2px;
}

.work-together p {
    margin-top: 36px;
    max-width: 544px;
    font-size: 18px;
    line-height: 1.2;
}

.video-container {
    margin-top: 60px;
    position: relative;
    z-index: 0;
    aspect-ratio: 16/9;
    height: 486px;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: perspective(1000px) rotateY(-2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    overflow: hidden;
}

.video-container:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.video-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #16171b;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-placeholder:hover {
    transform: scale(1.02);
}

.video-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(61, 126, 255, 0.15) 0%, rgba(255, 95, 11, 0.15) 100%);
    z-index: 1;
    pointer-events: none;
}

.video-placeholder::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.7'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px;
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-placeholder:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
}

.call-interface {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: white;
    z-index: 2;
}

.call-header {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
}

.call-title {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
}

.call-participants {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.6;
    display: flex;
    align-items: center;
}

.call-actions {
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.call-btn {
    aspect-ratio: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: #68686a;
    border: none;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.call-end {
    background-color: #ff4d4d;
}

.collaboration-text {
    margin-top: 66px;
    max-width: 800px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.features-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}

.feature-icon {
    height: 40px;
    width: 40px;
}

.feature h3 {
    margin-top: 20px;
    max-width: 128px;
    font-size: 28px;
    line-height: 1;
}

.feature p {
    margin-top: 14px;
    max-width: 204px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
}

/* GitHub Section */
.github-section {
    background-color: var(--bg-tertiary);
    padding: 131px 0 180px;
    overflow: hidden;
    position: relative;
    z-index: 20;
    transition: var(--theme-transition);
}

.github-section h2 {
    max-width: 800px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.github-section > .container-narrow > p {
    margin-top: 16px;
    max-width: 580px;
    line-height: 1.2;
    color: var(--color-grey-60);
}

.github-graphic {
    margin-top: 108px;
    position: relative;
    aspect-ratio: 2;
    width: 100%;
    border-radius: 12px;
    background-color: transparent;
    background-image: url('../assets/github-graphic.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.github-graphic:hover {
    transform: perspective(1000px) rotateX(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.github-features {
    margin-top: 160px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 96px 80px;
}

.github-feature {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(34, 38, 46, 0.3);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.github-feature:hover {
    transform: translateY(-5px);
    background-color: rgba(34, 38, 46, 0.5);
}

.github-feature::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.github-feature:hover::after {
    transform: scale(1.2);
    opacity: 0.8;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    line-height: 1;
    color: white;
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-grey-60);
}

/* Join Movement Section */
.join-movement {
    position: relative;
    background-color: var(--bg-primary);
    padding: 152px 0 294px;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.copyright a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.copyright a:hover {
    color: white;
}

.copyright a:hover::after {
    width: 100%;
}

.footer-links {
    margin-left: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    z-index: 10;
}

.footer-links a {
    display: inline-flex;
    color: var(--color-grey-80);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

.social-links {
    margin-left: 70px;
    display: flex;
    gap: 18px;
    list-style: none;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.linkedin-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E");
}

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.slack-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
}

.social-links a:hover .social-icon {
    opacity: 1;
}

.made-with {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: right;
    position: relative;
    transition: transform 0.3s ease;
}

.made-with:hover {
    transform: translateY(-2px);
}

.made-with::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background: var(--gradient-primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.made-with:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.gradient-mark {
    margin-right: -12px;
    transition: transform 0.3s ease;
}

.made-with:hover .gradient-mark {
    transform: rotate(20deg);
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .work-together h2 {
        font-size: 72px;
    }
    
    .github-section h2,
    .join-movement h2 {
        font-size: 72px;
    }
    
    .join-image {
        left: -253px;
        top: 128px;
        max-width: 1630px;
    }
}

@media (max-width: 992px) {
    .work-content {
        padding-left: 96px;
    }
    
    .work-together h2 {
        max-width: 430px;
        font-size: 56px;
    }
    
    .work-together p {
        max-width: 450px;
        font-size: 16px;
    }
    
    .video-container {
        margin-left: 8px;
        margin-top: 48px;
        height: 316px;
    }
    
    .collaboration-text {
        margin-top: 72px;
        font-size: 20px;
    }
    
    .features-grid {
        gap: 32px;
    }
    
    .feature h3 {
        font-size: 24px;
    }
    
    .github-section {
        padding: 96px 0;
    }
    
    .github-section h2 {
        max-width: 400px;
        font-size: 56px;
    }
    
    .github-features {
        margin-top: 64px;
        gap: 48px 64px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
    
    .join-movement {
        padding: 77px 0 190px;
    }
    
    .join-movement h2 {
        max-width: 320px;
        font-size: 56px;
    }
    
    .join-image {
        left: -255px;
        top: 62px;
        max-width: 1430px;
    }
    
    .footer {
        padding: 14px 0;
    }
    
    .footer-links {
        margin-left: 0;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .work-content {
        padding-left: 0;
    }
    
    .work-together h2 {
        max-width: 250px;
        font-size: 36px;
    }
    
    .video-container {
        margin: 24px 5px 0;
        height: auto;
        width: calc(100% - 10px);
    }
    
    .collaboration-text {
        margin-top: 28px;
        font-size: 18px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .feature h3 {
        font-size: 20px;
        max-width: none;
    }
    
    .feature p {
        max-width: none;
    }
    
    .github-section {
        padding: 64px 0;
    }
    
    .github-section h2 {
        max-width: 384px;
        font-size: 36px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .github-feature h3 {
        font-size: 20px;
    }
    
    .join-movement {
        padding: 266px 0 235px;
        position: relative;
    }
    
    .join-movement .container {
        grid-template-columns: 1fr;
    }
    
    .join-content {
        grid-column: 1;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .join-movement h2 {
        font-size: 44px;
    }
    
    .join-image {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 767px;
        height: 560px;
        max-width: 767px;
    }
    
    .join-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
        text-align: center;
    }
    
    .copyright {
        margin-top: 8px;
        width: 100%;
    }
    
    .footer-links {
        margin-top: 36px;
        width: 100%;
        justify-content: center;
    }
    
    .social-links {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .made-with {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-1);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav {
    flex: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav > ul > li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
}

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 18px;
    text-align: left;
    padding: 12px 0;
    cursor: pointer;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 16px;
    margin-top: 8px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown-content a {
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-grey-60);
}

.mobile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-full {
    width: 100%;
}

/* Page transition overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-transition::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(61, 126, 255, 0.2) 0%, rgba(11, 12, 15, 0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition.active::before {
    transform: scale(1.5);
}

/* Loading spinner */
.page-transition::after {
    content: '';
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-orange);
    animation: spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.active::after {
    opacity: 1;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Hide sun icon in dark mode, moon icon in light mode */
.moon-icon {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

html.light-theme .moon-icon {
    opacity: 1;
    transform: rotate(0);
}

html.light-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle-mobile {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.theme-toggle-mobile .theme-toggle-icon {
    margin-right: 12px;
}

/* Newsletter subscription styles */
.newsletter-container {
    margin-top: 80px;
    padding: 40px;
    border-radius: 16px;
    background: rgba(26, 29, 36, 0.4);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.newsletter-container::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.newsletter-content {
    position: relative;
    z-index: 1;
}

.newsletter-container h3 {
    font-size: 28px;
    margin-bottom: 16px;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.newsletter-container p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 460px;
}

.newsletter-form {
    position: relative;
    transition: all 0.3s ease;
}

.input-group {
    display: flex;
    gap: 12px;
}

.newsletter-form input {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(35, 38, 47, 0.5);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(61, 126, 255, 0.2);
}

.newsletter-form input.error {
    border-color: #ff3333;
    box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.2);
}

.newsletter-submit {
    height: 48px;
    border-radius: 8px !important;
}

.error-message {
    color: #ff3333;
    font-size: 14px;
    margin-top: 8px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.newsletter-form.loading input,
.newsletter-form.loading button {
    opacity: 0.7;
    pointer-events: none;
}

.newsletter-form.loading button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    right: 16px;
    top: calc(50% - 10px);
    animation: spin 0.8s linear infinite;
}

.subscription-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn 0.5s ease forwards;
}

.success-icon {
    width: 56px;
    height: 56px;
    background-color: var(--color-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(61, 126, 255, 0.3);
}

.subscription-success p {
    margin-bottom: 8px;
    font-weight: 500;
}

.success-details {
    font-size: 14px;
    opacity: 0.7;
}

/* Confetti animation */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    transform-origin: center;
    opacity: 0;
    animation: confettiFall 3s ease-in-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* Shake animation for form errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Media queries for newsletter */
@media (max-width: 768px) {
    .newsletter-container {
        padding: 30px 24px;
        margin-top: 60px;
    }
    
    .newsletter-container h3 {
        font-size: 24px;
    }
    
    .input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .newsletter-submit {
        width: 100%;
    }
}

/* Advanced Tooltip System */
.tooltip-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 300px;
    opacity: 0;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    will-change: transform;
}

.tooltip-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.tooltip-content {
    position: relative;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(46, 49, 59, 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tooltip-content::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(46, 49, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
    z-index: -1;
    backdrop-filter: blur(8px);
}

.tooltip-top .tooltip-content::before {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.tooltip-bottom .tooltip-content::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.tooltip-left .tooltip-content::before {
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.tooltip-right .tooltip-content::before {
    top: 50%;
    left: -6px;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.tooltip-follow .tooltip-content::before {
    display: none;
}

.tooltip-image .tooltip-content {
    padding: 0;
    overflow: hidden;
}

.tooltip-image img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.tooltip-rich .tooltip-content {
    min-width: 220px;
}

.tooltip-rich-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}

.tooltip-rich-content p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-grey-80);
}

.tooltip-badge {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(61, 126, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-blue);
}

/* Add tooltip animation for hover state on elements with tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: radial-gradient(circle at var(--tooltip-hover-x, 50%) var(--tooltip-hover-y, 50%), rgba(61, 126, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: -1;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Light theme tooltip overrides */
html.light-theme .tooltip-content {
    background: rgba(250, 250, 252, 0.95);
    color: var(--color-black);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-content::before {
    background: rgba(250, 250, 252, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-rich-content p {
    color: var(--color-grey-20);
}

html.light-theme .tooltip-badge {
    background: rgba(61, 126, 255, 0.1);
}

/* Media queries for tooltips */
@media (max-width: 768px) {
    .tooltip {
        max-width: 260px;
    }
    
    .tooltip-content {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .tooltip-rich-content h4 {
        font-size: 15px;
    }
    
    .tooltip-rich-content p {
        font-size: 12px;
    }
}

/* Cookie Consent Banner (disabled) */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    pointer-events: auto;
}

.cookie-consent.active {
    transform: translateY(0);
}

.cookie-consent-container {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--card-border);
    padding: 20px;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cookie-consent-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.cookie-settings-toggle {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.cookie-settings-toggle:hover,
.cookie-settings-toggle.active {
    background-color: var(--bg-tertiary);
    color: var(--color-blue);
}

.cookie-consent-main {
    margin-bottom: 20px;
}

.cookie-consent-main > p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 800px;
}

.cookie-consent-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    animation: fadeIn 0.3s ease;
    max-width: 950px;
}

.cookie-option {
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    position: relative;
}

.cookie-option-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.cookie-option-header h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0 12px;
}

.cookie-option p {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cookie-consent-actions .btn {
    min-width: 120px;
    font-size: 13px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-btn-accept-all {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-btn-save {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-consent-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    border-radius: 50%;
}

.cookie-consent-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* Cookie toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    transition: .3s;
    border-radius: 34px;
    border: 1px solid var(--card-border);
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    transition: .3s;
    border-radius: 50%;
}

input:checked + .cookie-slider {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

input:focus + .cookie-slider {
    box-shadow: 0 0 1px var(--color-blue);
}

input:checked + .cookie-slider:before {
    transform: translateX(16px);
    background-color: white;
}

input:disabled + .cookie-slider {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Media queries for cookie consent */
@media (max-width: 768px) {
    .cookie-consent-container {
        padding: 16px;
    }
    
    .cookie-consent-options {
        grid-template-columns: 1fr;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .cookie-consent-header h3 {
        font-size: 18px;
    }
    
    .cookie-consent-main > p {
        font-size: 14px;
    }
    
    .cookie-option {
        padding: 12px;
    }
    
    .cookie-consent-close {
        top: 12px;
        right: 12px;
    }
    
    .cookie-option-header h4 {
        font-size: 15px;
    }
    
    .cookie-option p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cookie-consent-actions {
        flex-direction: column;
    }
    
    .cookie-consent-actions .btn {
        width: 100%;
    }
}

/* Enhanced Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px !important;
    right: unset !important;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background-color 0.2s;
    color: var(--text-secondary);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    background-color: var(--bg-secondary);
    color: var(--color-blue);
}

.back-to-top.hover .progress-circle-path {
    stroke: var(--color-blue);
    stroke-width: 2.5px;
    transition: stroke 0.2s, stroke-width 0.2s;
}

.back-to-top.clicked {
    animation: pulse 0.7s ease;
}

.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    stroke: var(--card-border);
    opacity: 0.4;
}

.progress-circle-path {
    stroke: var(--text-secondary);
    transition: stroke-dashoffset 0.3s, stroke 0.2s, stroke-width 0.2s;
}

.back-to-top-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.back-to-top:hover .back-to-top-icon {
    transform: translateY(-3px);
}

.back-to-top.clicked .back-to-top-icon {
    transform: translateY(-5px);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Media queries for back-to-top button */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        left: 20px !important;
        right: unset !important;
        width: 40px;
        height: 40px;
    }
    
    .back-to-top-icon {
        width: 14px;
        height: 14px;
    }
    
    .progress-circle {
        width: 40px;
        height: 40px;
    }
    
    .progress-circle-bg,
    .progress-circle-path {
        cx: 20;
        cy: 20;
        r: 18;
    }
}

/* Smart Search Feature */
.search-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.search-modal.active .search-backdrop {
    opacity: 1;
}

.search-container {
    position: relative;
    width: 600px;
    max-width: 90%;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-top: 80px;
    overflow: hidden;
    z-index: 1;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal.active .search-container {
    transform: translateY(0);
}

.search-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--card-border);
}

.search-icon {
    color: var(--text-secondary);
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-shortcuts {
    display: flex;
    gap: 10px;
    margin-left: 16px;
}

.search-shortcut {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.search-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: 11px;
    font-family: var(--font-sans);
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    margin: 0 2px;
}

.search-body {
    max-height: 400px;
    overflow-y: auto;
}

.search-results {
    padding: 8px 0;
}

.search-result-category {
    padding: 6px 20px 0;
    margin-top: 8px;
}

.search-result-category h4 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: var(--bg-secondary);
}

.search-result-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-url {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background-color: rgba(61, 126, 255, 0.15);
    color: var(--color-blue);
    border-radius: 2px;
    padding: 0 2px;
}

.search-empty,
.search-loading {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-tertiary);
    display: none;
    flex-direction: column;
    align-items: center;
}

.search-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(61, 126, 255, 0.3);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

/* Header search button */
.header-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 8px;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
}

.header-search-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.search-shortcut-indicator {
    position: absolute;
    right: -4px;
    bottom: -4px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media queries for search */
@media (max-width: 768px) {
    .search-container {
        width: 92%;
        margin-top: 60px;
    }
    
    .search-shortcuts {
        display: none;
    }
    
    .search-body {
        max-height: 60vh;
    }
}

/* Lock body when search is open */
body.search-open {
    overflow: hidden;
}

/* Document Editor Section */
.document-section {
    position: relative;
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
}

.document-content {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.document-info {
    flex: 1;
    max-width: 60%;
}

.document-info h2 {
    font-size: 54px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-title);
}

.document-info > p {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 40px;
}

.document-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.pin-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.pin-image {
    transition: all 0.2s;
    will-change: transform;
}

.pin-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

.pin-line {
    height: 27px;
    width: 2px;
    background-color: #FF5F0B;
}

.pin-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #FF5F0B;
    margin-top: -1px;
}

.document-feature p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.document-preview {
    margin-top: 22px;
    margin-bottom: 30px;
}

.editor-preview {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.tap-indicator {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 15px;
}

.tap-arrow {
    width: 10px;
    height: 36px;
    margin-right: 4px;
    color: #666;
}

.tap-text {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

.editor-actions {
    display: flex;
    gap: 4px;
    margin-top: 15px;
    width: fit-content;
    padding: 5px;
    border-radius: 999px;
    background-color: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-btn.active {
    background-color: #333;
}

.action-icon {
    width: 14px;
    height: 14px;
    margin: auto;
}

.action-add.active svg path {
    stroke: white;
}

.sidebar-preview {
    flex: 1;
    max-width: 40%;
    padding-left: 8px;
    padding-top: 222px;
}

.sticky-sidebar {
    position: sticky;
    top: 222px;
    z-index: 10;
    height: 282px;
    width: 256px;
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px 18px 28px;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.sidebar-panel.hidden {
    opacity: 0;
    z-index: 5;
}

.sidebar-panel h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.sidebar-panel p {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #333;
}

.sidebar-backdrop {
    position: absolute;
    bottom: -52.5%;
    left: 50%;
    aspect-ratio: 0.912;
    width: 178.125%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.2) 0%, rgba(255, 95, 11, 0.05) 60%, transparent 100%);
    border-radius: 12px;
}

/* Document Section Media Queries */
@media (max-width: 1200px) {
    .document-info h2 {
        font-size: 44px;
    }
    
    .sticky-sidebar {
        height: 240px;
        width: 220px;
    }
    
    .sidebar-panel h3 {
        font-size: 16px;
    }
    
    .sidebar-panel p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .document-section {
        padding: 80px 0;
    }
    
    .document-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .document-info {
        max-width: 100%;
    }
    
    .sidebar-preview {
        max-width: 100%;
        padding-top: 0;
    }
    
    .sticky-sidebar {
        position: relative;
        top: 0;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .document-section {
        padding: 60px 0;
    }
    
    .document-info h2 {
        font-size: 36px;
    }
    
    .document-info > p {
        font-size: 16px;
    }
    
    .pin-line {
        height: 18px;
    }
    
    .pin-dot {
        height: 7px;
        width: 7px;
    }
    
    .pin-image {
        width: 36px;
        height: 36px;
    }
    
    .editor-actions {
        padding: 4px;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
    }
    
    .action-icon {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 576px) {
    .document-section {
        padding: 40px 0;
    }
    
    .document-info h2 {
        font-size: 28px;
    }
    
    .document-feature {
        gap: 10px;
    }
    
    .document-feature p {
        font-size: 14px;
    }
    
    .feature-description {
        font-size: 14px;
    }
    
    .sticky-sidebar {
        height: 200px;
        width: 180px;
    }
}

/* GitHub Integration Section */
.github-integration {
    position: relative;
    padding: 120px 0;
    background-color: #090A0C;
    color: white;
    overflow: hidden;
}

.github-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.github-content h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-family: var(--font-title);
    color: white;
    margin-bottom: 20px;
}

.github-content p {
    max-width: 580px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #99A2B2;
}

.github-graphic {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.github-graphic-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.github-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 96px;
    margin-top: 160px;
    width: 100%;
}

.github-feature {
    position: relative;
}

.feature-icon-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.feature-icon-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: -8px;
    left: -8px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
}

.feature-icon {
    height: 40px;
    width: auto;
    position: relative;
    z-index: 1;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.015em;
    color: white;
    font-family: var(--font-title);
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #99A2B2;
}

/* MetaBrain Section */
.metabrain-section {
    padding: 120px 0;
    background-color: var(--color-background);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.metabrain-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.metabrain-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.metabrain-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 50px;
}

.metabrain-primary-features, 
.metabrain-secondary-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.metabrain-feature {
    background-color: var(--color-card-background);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.metabrain-feature p {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1.5;
    z-index: 2;
}

.metabrain-feature strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.25rem;
}

.tasks-feature {
    background-image: url('assets/tasks-notes.png');
    background-size: cover;
    background-position: center;
}

.plan-feature {
    background-image: url('assets/plan-work.jpg');
    background-size: cover;
    background-position: center;
}

.notes-feature {
    background-image: url('assets/document-editor.svg');
    background-size: cover;
    background-position: center;
}

.collab-feature {
    background-image: url('assets/collab.jpg');
    background-size: cover;
    background-position: center;
}

.calendar-feature {
    background-image: url('assets/calendar.png');
    background-size: cover;
    background-position: center;
}

.chat-feature {
    background-image: url('assets/teammates.jpg');
    background-size: cover;
    background-position: center;
}

.manage-feature {
    background-image: url('assets/pm.jpg');
    background-size: cover;
    background-position: center;
}

/* Community Section Styles */
.community-section {
    padding: 120px 0;
    background-color: var(--color-background-alt);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.community-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(125, 126, 255, 0.08), transparent 50%),
                radial-gradient(circle at bottom left, rgba(255, 95, 11, 0.08), transparent 50%);
    z-index: 0;
}

.community-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.community-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    position: relative;
    z-index: 1;
}

.community-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.platform-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.platform-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.platform-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    padding: 15px;
}

.platform-svg {
    width: 100%;
    height: 100%;
}

.github-card .platform-icon {
    color: #7d80ff;
}

.slack-card .platform-icon {
    color: #4A154B;
}

.twitter-card .platform-icon {
    color: #1DA1F2;
}

.youtube-card .platform-icon {
    color: #FF0000;
}

.platform-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.platform-card p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 24px;
    flex-grow: 1;
}

.platform-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-bottom: 15px;
}

.platform-link:hover {
    color: var(--color-primary-hover);
}

.platform-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.platform-link:hover::after {
    transform: translateX(4px);
}

.metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.community-events {
    position: relative;
    z-index: 1;
}

.community-events h3 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.events-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.event-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.event-date {
    background: linear-gradient(135deg, #7d80ff, #ff5f0b);
    color: white;
    width: 80px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.event-month {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-day {
    font-size: 1.75rem;
    font-weight: 700;
}

.event-details {
    padding: 20px;
    flex-grow: 1;
}

.event-details h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--color-text);
}

.event-details p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.event-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-link:hover {
    color: var(--color-primary-hover);
}

.event-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.event-link:hover::after {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .community-section {
        padding: 80px 0;
    }
    
    .community-section h2 {
        font-size: 2.5rem;
    }
    
    .platform-card, 
    .event-card {
        max-width: 100%;
    }
    
    .events-container {
        grid-template-columns: 1fr;
    }
}

/* Join Movement Section */
.join-movement {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

/* Base styles */
:root {
    --color-black: #090a0c;
    --color-white: #ffffff;
    --color-grey-1: #0B0C0F;
    --color-grey-5: #1A1D24;
    --color-grey-10: #23262F;
    --color-grey-20: #303236;
    --color-grey-50: #85878C;
    --color-grey-60: #9DA0A5;
    --color-grey-80: #C9CBCF;
    --color-grey-90: #E5E7EB;
    --color-grey-98: #F6F6F6;
    --color-blue: #3D7EFF;
    --color-orange: #FF5F0B;
    --gradient-primary: linear-gradient(90deg, #F58041 0%, #AC795C 25.6%, #887064 41.58%, #716A69 56.98%, #61656B 69.44%);
    --text-gradient: linear-gradient(135deg, white 30%, #d5d8f6 80%, #fdf7fe 100%);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Theme Variables */
    --bg-primary: var(--color-grey-1);
    --bg-secondary: var(--color-grey-5);
    --bg-tertiary: var(--color-grey-10);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-grey-80);
    --text-tertiary: var(--color-grey-60);
    --card-bg: var(--color-grey-10);
    --card-border: rgba(255, 255, 255, 0.1);
    
    /* Transition timing for theme changes */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme overrides */
html.light-theme {
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-grey-98);
    --bg-tertiary: var(--color-grey-90);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-grey-20);
    --text-tertiary: var(--color-grey-50);
    --card-bg: var(--color-white);
    --card-border: rgba(0, 0, 0, 0.1);
    --text-gradient: linear-gradient(135deg, var(--color-grey-10) 30%, var(--color-grey-5) 80%, var(--color-black) 100%);
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    transition: var(--theme-transition);
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-primary {
    color: #5A250A;
    background-color: #d1d1d1;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, #FFAA81 26.5%, #FFDA9F 37.5%, rgba(255, 170, 129, 0.50) 49%, rgba(210, 106, 58, 0.00) 92.5%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

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

.btn-secondary {
    color: var(--color-white);
    background-color: var(--color-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline {
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-arrow {
    height: 9px;
    width: 17px;
    margin-left: 6px;
    fill: currentColor;
}

/* Header styles */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 64px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.header-container {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10;
}

.logo {
    display: block;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.9;
}

.main-nav {
    margin-left: 77px;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a, 
.main-nav button {
    display: inline-flex;
    padding: 12px;
    font-size: 14px;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    white-space: pre;
}

.main-nav a:hover, 
.main-nav button:hover {
    color: var(--color-blue);
}

.dropdown {
    position: relative;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA2Ij48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS40IiBkPSJtMSAxIDQgNCA0LTQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.dropdown-content {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    transition: opacity 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-grey-10);
    background-color: var(--color-grey-5);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 14px;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--color-grey-10);
}

.header-actions {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
}

.github-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    padding: 0 6px;
    transition: color 0.2s;
}

.github-link:hover {
    color: var(--color-grey-80);
}

.github-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }
}

section {
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-section {
    background-color: #000;
    color: #fff;
}

.white-section {
    background-color: #fff;
    color: #000;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
}

/* Hero section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    max-height: 1438px;
    padding-top: 184px;
    overflow: hidden;
    background-color: var(--bg-primary);
    transition: var(--theme-transition);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: radial-gradient(circle at 50% 0%, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hero-container {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    max-width: 700px;
    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.2));
    position: relative;
    margin-bottom: 10px;
    opacity: 0;
    animation: titleFadeIn 0.8s ease-out forwards 0.2s;
}

.hero-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    filter: blur(20px);
    opacity: 0.6;
    transform: translateZ(0);
}

.hero-subtitle {
    margin-top: 20px;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-grey-90);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-cta {
    margin-top: 44px;
    z-index: 10;
    position: relative;
}

.hero-image-container {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: 80%;
    max-width: 1024px;
    z-index: 5;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease;
}

.hero-image-container:hover {
    transform: perspective(1000px) rotateX(0);
}

.hero-image {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.hero-features {
    position: absolute;
    bottom: 88px;
    z-index: 30;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: -0.02em;
    width: 100%;
}

.hero-features p {
    margin-bottom: 14px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
}

.scrolling-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    padding: 8px 0;
    margin-left: -20px;
    margin-right: -20px;
}

.scrolling-content {
    display: inline-block;
    white-space: nowrap;
    animation: scrollFeatures 40s linear infinite;
    padding-left: 20px;
}

.scrolling-content span {
    display: inline-block;
    font-weight: 600;
    color: var(--text-primary);
    padding: 5px 0;
}

.feature-dot {
    display: inline-block;
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.3);
}

@keyframes scrollFeatures {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Add pause on hover effect */
.scrolling-wrapper:hover .scrolling-content {
    animation-play-state: paused;
}

/* Adjust scrolling speed for mobile */
@media (max-width: 768px) {
    .scrolling-content {
        animation: scrollFeatures 25s linear infinite;
    }
    
    .hero-features {
        left: 0;
        right: 0;
        bottom: 30px;
        font-size: 12px;
    }
    
    .feature-dot {
        margin: 0 8px;
    }
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 340px;
    background: linear-gradient(to bottom, rgba(11, 12, 15, 0) 0%, var(--color-grey-1) 50%);
    pointer-events: none;
}

/* Productivity section */
.productivity {
    padding: 160px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    z-index: 10;
    transition: var(--theme-transition);
}

.productivity h2 {
    font-size: 80px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.productivity > .container > p {
    margin-top: 24px;
    max-width: 705px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.feature-cards {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.feature-card {
    position: relative;
    height: 420px;
    width: 428px;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--card-bg);
    background-clip: padding-box;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 60%);
    z-index: 1;
    pointer-events: none;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.feature-card.wide {
    width: 768px;
}

.feature-card.wide::before {
    background: linear-gradient(135deg, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.5);
}

.card-content {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    padding: 24px;
    background: linear-gradient(to top, var(--card-bg) 0%, rgba(22, 23, 27, 0.8) 60%, rgba(22, 23, 27, 0) 100%);
}

.card-content h3 {
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 6px;
}

.card-content p {
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1200px) {
    .hero-title {
        font-size: 72px;
        max-width: 600px;
        line-height: 1.05;
    }

    .feature-card {
        height: 300px;
        width: 308px;
    }

    .feature-card.wide {
        width: 572px;
    }
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: 112px;
    }

    .hero-title {
        font-size: 56px;
        max-width: 500px;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-image-container {
        position: relative;
        margin-top: -36%;
        width: 120%;
        left: 0;
    }

    .productivity {
        padding: 100px 0;
    }

    .productivity h2 {
        font-size: 64px;
    }

    .feature-card {
        height: 260px;
        width: 252px;
    }

    .feature-card.wide {
        width: 436px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 40px;
        max-width: 100%;
        line-height: 1.2;
        font-weight: 700;
    }

    .hero-subtitle {
        font-size: 15px;
        max-width: 90%;
    }

    .hero-cta {
        margin-top: 20px;
    }

    .hero-features {
        left: 20px !important;
        right: unset !important;
        right: 0;
        bottom: 36px;
        font-size: 12px;
    }

    .hero-image-container {
        position: relative;
        margin-top: 18.7%;
        width: 100%;
    }

    .productivity {
        padding: 64px 0;
    }

    .productivity h2 {
        font-size: 36px;
    }

    .productivity > .container > p {
        font-size: 15px;
    }

    .feature-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card, 
    .feature-card.wide {
        width: 100%;
    }
}

/* Work Together Section */
.work-together {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.work-together::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-together::after {
    content: '';
    position: absolute;
    bottom: -200px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-content {
    padding-left: 320px;
    position: relative;
    z-index: 2;
}

.work-together h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.03em;
    position: relative;
}

.work-together h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-orange) 100%);
    border-radius: 2px;
}

.work-together p {
    margin-top: 36px;
    max-width: 544px;
    font-size: 18px;
    line-height: 1.2;
}

.video-container {
    margin-top: 60px;
    position: relative;
    z-index: 0;
    aspect-ratio: 16/9;
    height: 486px;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: perspective(1000px) rotateY(-2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    overflow: hidden;
}

.video-container:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.video-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #16171b;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-placeholder:hover {
    transform: scale(1.02);
}

.video-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(61, 126, 255, 0.15) 0%, rgba(255, 95, 11, 0.15) 100%);
    z-index: 1;
    pointer-events: none;
}

.video-placeholder::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.7'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px;
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-placeholder:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
}

.call-interface {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: white;
    z-index: 2;
}

.call-header {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
}

.call-title {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
}

.call-participants {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.6;
    display: flex;
    align-items: center;
}

.call-actions {
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.call-btn {
    aspect-ratio: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: #68686a;
    border: none;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.call-end {
    background-color: #ff4d4d;
}

.collaboration-text {
    margin-top: 66px;
    max-width: 800px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.features-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}

.feature-icon {
    height: 40px;
    width: 40px;
}

.feature h3 {
    margin-top: 20px;
    max-width: 128px;
    font-size: 28px;
    line-height: 1;
}

.feature p {
    margin-top: 14px;
    max-width: 204px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
}

/* GitHub Section */
.github-section {
    background-color: var(--bg-tertiary);
    padding: 131px 0 180px;
    overflow: hidden;
    position: relative;
    z-index: 20;
    transition: var(--theme-transition);
}

.github-section h2 {
    max-width: 800px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.github-section > .container-narrow > p {
    margin-top: 16px;
    max-width: 580px;
    line-height: 1.2;
    color: var(--color-grey-60);
}

.github-graphic {
    margin-top: 108px;
    position: relative;
    aspect-ratio: 2;
    width: 100%;
    border-radius: 12px;
    background-color: transparent;
    background-image: url('../assets/github-graphic.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.github-graphic:hover {
    transform: perspective(1000px) rotateX(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.github-features {
    margin-top: 160px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 96px 80px;
}

.github-feature {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(34, 38, 46, 0.3);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.github-feature:hover {
    transform: translateY(-5px);
    background-color: rgba(34, 38, 46, 0.5);
}

.github-feature::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.github-feature:hover::after {
    transform: scale(1.2);
    opacity: 0.8;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    line-height: 1;
    color: white;
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-grey-60);
}

/* Join Movement Section */
.join-movement {
    position: relative;
    background-color: var(--bg-primary);
    padding: 152px 0 294px;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.copyright a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.copyright a:hover {
    color: white;
}

.copyright a:hover::after {
    width: 100%;
}

.footer-links {
    margin-left: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    z-index: 10;
}

.footer-links a {
    display: inline-flex;
    color: var(--color-grey-80);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

.social-links {
    margin-left: 70px;
    display: flex;
    gap: 18px;
    list-style: none;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.linkedin-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E");
}

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.slack-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
}

.social-links a:hover .social-icon {
    opacity: 1;
}

.made-with {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: right;
    position: relative;
    transition: transform 0.3s ease;
}

.made-with:hover {
    transform: translateY(-2px);
}

.made-with::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background: var(--gradient-primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.made-with:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.gradient-mark {
    margin-right: -12px;
    transition: transform 0.3s ease;
}

.made-with:hover .gradient-mark {
    transform: rotate(20deg);
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .work-together h2 {
        font-size: 72px;
    }
    
    .github-section h2,
    .join-movement h2 {
        font-size: 72px;
    }
    
    .join-image {
        left: -253px;
        top: 128px;
        max-width: 1630px;
    }
}

@media (max-width: 992px) {
    .work-content {
        padding-left: 96px;
    }
    
    .work-together h2 {
        max-width: 430px;
        font-size: 56px;
    }
    
    .work-together p {
        max-width: 450px;
        font-size: 16px;
    }
    
    .video-container {
        margin-left: 8px;
        margin-top: 48px;
        height: 316px;
    }
    
    .collaboration-text {
        margin-top: 72px;
        font-size: 20px;
    }
    
    .features-grid {
        gap: 32px;
    }
    
    .feature h3 {
        font-size: 24px;
    }
    
    .github-section {
        padding: 96px 0;
    }
    
    .github-section h2 {
        max-width: 400px;
        font-size: 56px;
    }
    
    .github-features {
        margin-top: 64px;
        gap: 48px 64px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
    
    .join-movement {
        padding: 77px 0 190px;
    }
    
    .join-movement h2 {
        max-width: 320px;
        font-size: 56px;
    }
    
    .join-image {
        left: -255px;
        top: 62px;
        max-width: 1430px;
    }
    
    .footer {
        padding: 14px 0;
    }
    
    .footer-links {
        margin-left: 0;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .work-content {
        padding-left: 0;
    }
    
    .work-together h2 {
        max-width: 250px;
        font-size: 36px;
    }
    
    .video-container {
        margin: 24px 5px 0;
        height: auto;
        width: calc(100% - 10px);
    }
    
    .collaboration-text {
        margin-top: 28px;
        font-size: 18px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .feature h3 {
        font-size: 20px;
        max-width: none;
    }
    
    .feature p {
        max-width: none;
    }
    
    .github-section {
        padding: 64px 0;
    }
    
    .github-section h2 {
        max-width: 384px;
        font-size: 36px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .github-feature h3 {
        font-size: 20px;
    }
    
    .join-movement {
        padding: 266px 0 235px;
        position: relative;
    }
    
    .join-movement .container {
        grid-template-columns: 1fr;
    }
    
    .join-content {
        grid-column: 1;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .join-movement h2 {
        font-size: 44px;
    }
    
    .join-image {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 767px;
        height: 560px;
        max-width: 767px;
    }
    
    .join-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
        text-align: center;
    }
    
    .copyright {
        margin-top: 8px;
        width: 100%;
    }
    
    .footer-links {
        margin-top: 36px;
        width: 100%;
        justify-content: center;
    }
    
    .social-links {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .made-with {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-1);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav {
    flex: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav > ul > li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
}

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 18px;
    text-align: left;
    padding: 12px 0;
    cursor: pointer;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 16px;
    margin-top: 8px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown-content a {
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-grey-60);
}

.mobile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-full {
    width: 100%;
}

/* Page transition overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-transition::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(61, 126, 255, 0.2) 0%, rgba(11, 12, 15, 0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition.active::before {
    transform: scale(1.5);
}

/* Loading spinner */
.page-transition::after {
    content: '';
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-orange);
    animation: spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.active::after {
    opacity: 1;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Hide sun icon in dark mode, moon icon in light mode */
.moon-icon {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

html.light-theme .moon-icon {
    opacity: 1;
    transform: rotate(0);
}

html.light-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle-mobile {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.theme-toggle-mobile .theme-toggle-icon {
    margin-right: 12px;
}

/* Newsletter subscription styles */
.newsletter-container {
    margin-top: 80px;
    padding: 40px;
    border-radius: 16px;
    background: rgba(26, 29, 36, 0.4);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.newsletter-container::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.newsletter-content {
    position: relative;
    z-index: 1;
}

.newsletter-container h3 {
    font-size: 28px;
    margin-bottom: 16px;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.newsletter-container p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 460px;
}

.newsletter-form {
    position: relative;
    transition: all 0.3s ease;
}

.input-group {
    display: flex;
    gap: 12px;
}

.newsletter-form input {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(35, 38, 47, 0.5);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(61, 126, 255, 0.2);
}

.newsletter-form input.error {
    border-color: #ff3333;
    box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.2);
}

.newsletter-submit {
    height: 48px;
    border-radius: 8px !important;
}

.error-message {
    color: #ff3333;
    font-size: 14px;
    margin-top: 8px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.newsletter-form.loading input,
.newsletter-form.loading button {
    opacity: 0.7;
    pointer-events: none;
}

.newsletter-form.loading button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    right: 16px;
    top: calc(50% - 10px);
    animation: spin 0.8s linear infinite;
}

.subscription-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn 0.5s ease forwards;
}

.success-icon {
    width: 56px;
    height: 56px;
    background-color: var(--color-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(61, 126, 255, 0.3);
}

.subscription-success p {
    margin-bottom: 8px;
    font-weight: 500;
}

.success-details {
    font-size: 14px;
    opacity: 0.7;
}

/* Confetti animation */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    transform-origin: center;
    opacity: 0;
    animation: confettiFall 3s ease-in-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* Shake animation for form errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Media queries for newsletter */
@media (max-width: 768px) {
    .newsletter-container {
        padding: 30px 24px;
        margin-top: 60px;
    }
    
    .newsletter-container h3 {
        font-size: 24px;
    }
    
    .input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .newsletter-submit {
        width: 100%;
    }
}

/* Advanced Tooltip System */
.tooltip-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 300px;
    opacity: 0;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    will-change: transform;
}

.tooltip-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.tooltip-content {
    position: relative;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(46, 49, 59, 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tooltip-content::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(46, 49, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
    z-index: -1;
    backdrop-filter: blur(8px);
}

.tooltip-top .tooltip-content::before {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.tooltip-bottom .tooltip-content::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.tooltip-left .tooltip-content::before {
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.tooltip-right .tooltip-content::before {
    top: 50%;
    left: -6px;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.tooltip-follow .tooltip-content::before {
    display: none;
}

.tooltip-image .tooltip-content {
    padding: 0;
    overflow: hidden;
}

.tooltip-image img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.tooltip-rich .tooltip-content {
    min-width: 220px;
}

.tooltip-rich-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}

.tooltip-rich-content p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-grey-80);
}

.tooltip-badge {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(61, 126, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-blue);
}

/* Add tooltip animation for hover state on elements with tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: radial-gradient(circle at var(--tooltip-hover-x, 50%) var(--tooltip-hover-y, 50%), rgba(61, 126, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: -1;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Light theme tooltip overrides */
html.light-theme .tooltip-content {
    background: rgba(250, 250, 252, 0.95);
    color: var(--color-black);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-content::before {
    background: rgba(250, 250, 252, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-rich-content p {
    color: var(--color-grey-20);
}

html.light-theme .tooltip-badge {
    background: rgba(61, 126, 255, 0.1);
}

/* Media queries for tooltips */
@media (max-width: 768px) {
    .tooltip {
        max-width: 260px;
    }
    
    .tooltip-content {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .tooltip-rich-content h4 {
        font-size: 15px;
    }
    
    .tooltip-rich-content p {
        font-size: 12px;
    }
}

/* Cookie Consent Banner (disabled) */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    pointer-events: auto;
}

.cookie-consent.active {
    transform: translateY(0);
}

.cookie-consent-container {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--card-border);
    padding: 20px;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cookie-consent-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.cookie-settings-toggle {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.cookie-settings-toggle:hover,
.cookie-settings-toggle.active {
    background-color: var(--bg-tertiary);
    color: var(--color-blue);
}

.cookie-consent-main {
    margin-bottom: 20px;
}

.cookie-consent-main > p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 800px;
}

.cookie-consent-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    animation: fadeIn 0.3s ease;
    max-width: 950px;
}

.cookie-option {
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    position: relative;
}

.cookie-option-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.cookie-option-header h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0 12px;
}

.cookie-option p {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cookie-consent-actions .btn {
    min-width: 120px;
    font-size: 13px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-btn-accept-all {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-btn-save {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-consent-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    border-radius: 50%;
}

.cookie-consent-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* Cookie toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    transition: .3s;
    border-radius: 34px;
    border: 1px solid var(--card-border);
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    transition: .3s;
    border-radius: 50%;
}

input:checked + .cookie-slider {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

input:focus + .cookie-slider {
    box-shadow: 0 0 1px var(--color-blue);
}

input:checked + .cookie-slider:before {
    transform: translateX(16px);
    background-color: white;
}

input:disabled + .cookie-slider {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Media queries for cookie consent */
@media (max-width: 768px) {
    .cookie-consent-container {
        padding: 16px;
    }
    
    .cookie-consent-options {
        grid-template-columns: 1fr;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .cookie-consent-header h3 {
        font-size: 18px;
    }
    
    .cookie-consent-main > p {
        font-size: 14px;
    }
    
    .cookie-option {
        padding: 12px;
    }
    
    .cookie-consent-close {
        top: 12px;
        right: 12px;
    }
    
    .cookie-option-header h4 {
        font-size: 15px;
    }
    
    .cookie-option p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cookie-consent-actions {
        flex-direction: column;
    }
    
    .cookie-consent-actions .btn {
        width: 100%;
    }
}

/* Enhanced Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px !important;
    right: unset !important;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background-color 0.2s;
    color: var(--text-secondary);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    background-color: var(--bg-secondary);
    color: var(--color-blue);
}

.back-to-top.hover .progress-circle-path {
    stroke: var(--color-blue);
    stroke-width: 2.5px;
    transition: stroke 0.2s, stroke-width 0.2s;
}

.back-to-top.clicked {
    animation: pulse 0.7s ease;
}

.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    stroke: var(--card-border);
    opacity: 0.4;
}

.progress-circle-path {
    stroke: var(--text-secondary);
    transition: stroke-dashoffset 0.3s, stroke 0.2s, stroke-width 0.2s;
}

.back-to-top-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.back-to-top:hover .back-to-top-icon {
    transform: translateY(-3px);
}

.back-to-top.clicked .back-to-top-icon {
    transform: translateY(-5px);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Media queries for back-to-top button */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        left: 20px !important;
        right: unset !important;
        width: 40px;
        height: 40px;
    }
    
    .back-to-top-icon {
        width: 14px;
        height: 14px;
    }
    
    .progress-circle {
        width: 40px;
        height: 40px;
    }
    
    .progress-circle-bg,
    .progress-circle-path {
        cx: 20;
        cy: 20;
        r: 18;
    }
}

/* Smart Search Feature */
.search-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.search-modal.active .search-backdrop {
    opacity: 1;
}

.search-container {
    position: relative;
    width: 600px;
    max-width: 90%;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-top: 80px;
    overflow: hidden;
    z-index: 1;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal.active .search-container {
    transform: translateY(0);
}

.search-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--card-border);
}

.search-icon {
    color: var(--text-secondary);
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-shortcuts {
    display: flex;
    gap: 10px;
    margin-left: 16px;
}

.search-shortcut {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.search-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: 11px;
    font-family: var(--font-sans);
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    margin: 0 2px;
}

.search-body {
    max-height: 400px;
    overflow-y: auto;
}

.search-results {
    padding: 8px 0;
}

.search-result-category {
    padding: 6px 20px 0;
    margin-top: 8px;
}

.search-result-category h4 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: var(--bg-secondary);
}

.search-result-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-url {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background-color: rgba(61, 126, 255, 0.15);
    color: var(--color-blue);
    border-radius: 2px;
    padding: 0 2px;
}

.search-empty,
.search-loading {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-tertiary);
    display: none;
    flex-direction: column;
    align-items: center;
}

.search-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(61, 126, 255, 0.3);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

/* Header search button */
.header-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 8px;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
}

.header-search-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.search-shortcut-indicator {
    position: absolute;
    right: -4px;
    bottom: -4px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media queries for search */
@media (max-width: 768px) {
    .search-container {
        width: 92%;
        margin-top: 60px;
    }
    
    .search-shortcuts {
        display: none;
    }
    
    .search-body {
        max-height: 60vh;
    }
}

/* Lock body when search is open */
body.search-open {
    overflow: hidden;
}

/* Document Editor Section */
.document-section {
    position: relative;
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
}

.document-content {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.document-info {
    flex: 1;
    max-width: 60%;
}

.document-info h2 {
    font-size: 54px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-title);
}

.document-info > p {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 40px;
}

.document-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.pin-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.pin-image {
    transition: all 0.2s;
    will-change: transform;
}

.pin-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

.pin-line {
    height: 27px;
    width: 2px;
    background-color: #FF5F0B;
}

.pin-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #FF5F0B;
    margin-top: -1px;
}

.document-feature p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.document-preview {
    margin-top: 22px;
    margin-bottom: 30px;
}

.editor-preview {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.tap-indicator {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 15px;
}

.tap-arrow {
    width: 10px;
    height: 36px;
    margin-right: 4px;
    color: #666;
}

.tap-text {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

.editor-actions {
    display: flex;
    gap: 4px;
    margin-top: 15px;
    width: fit-content;
    padding: 5px;
    border-radius: 999px;
    background-color: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-btn.active {
    background-color: #333;
}

.action-icon {
    width: 14px;
    height: 14px;
    margin: auto;
}

.action-add.active svg path {
    stroke: white;
}

.sidebar-preview {
    flex: 1;
    max-width: 40%;
    padding-left: 8px;
    padding-top: 222px;
}

.sticky-sidebar {
    position: sticky;
    top: 222px;
    z-index: 10;
    height: 282px;
    width: 256px;
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px 18px 28px;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.sidebar-panel.hidden {
    opacity: 0;
    z-index: 5;
}

.sidebar-panel h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.sidebar-panel p {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #333;
}

.sidebar-backdrop {
    position: absolute;
    bottom: -52.5%;
    left: 50%;
    aspect-ratio: 0.912;
    width: 178.125%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.2) 0%, rgba(255, 95, 11, 0.05) 60%, transparent 100%);
    border-radius: 12px;
}

/* Document Section Media Queries */
@media (max-width: 1200px) {
    .document-info h2 {
        font-size: 44px;
    }
    
    .sticky-sidebar {
        height: 240px;
        width: 220px;
    }
    
    .sidebar-panel h3 {
        font-size: 16px;
    }
    
    .sidebar-panel p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .document-section {
        padding: 80px 0;
    }
    
    .document-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .document-info {
        max-width: 100%;
    }
    
    .sidebar-preview {
        max-width: 100%;
        padding-top: 0;
    }
    
    .sticky-sidebar {
        position: relative;
        top: 0;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .document-section {
        padding: 60px 0;
    }
    
    .document-info h2 {
        font-size: 36px;
    }
    
    .document-info > p {
        font-size: 16px;
    }
    
    .pin-line {
        height: 18px;
    }
    
    .pin-dot {
        height: 7px;
        width: 7px;
    }
    
    .pin-image {
        width: 36px;
        height: 36px;
    }
    
    .editor-actions {
        padding: 4px;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
    }
    
    .action-icon {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 576px) {
    .document-section {
        padding: 40px 0;
    }
    
    .document-info h2 {
        font-size: 28px;
    }
    
    .document-feature {
        gap: 10px;
    }
    
    .document-feature p {
        font-size: 14px;
    }
    
    .feature-description {
        font-size: 14px;
    }
    
    .sticky-sidebar {
        height: 200px;
        width: 180px;
    }
}

/* GitHub Integration Section */
.github-integration {
    position: relative;
    padding: 120px 0;
    background-color: #090A0C;
    color: white;
    overflow: hidden;
}

.github-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.github-content h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-family: var(--font-title);
    color: white;
    margin-bottom: 20px;
}

.github-content p {
    max-width: 580px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #99A2B2;
}

.github-graphic {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.github-graphic-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.github-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 96px;
    margin-top: 160px;
    width: 100%;
}

.github-feature {
    position: relative;
}

.feature-icon-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.feature-icon-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: -8px;
    left: -8px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
}

.feature-icon {
    height: 40px;
    width: auto;
    position: relative;
    z-index: 1;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.015em;
    color: white;
    font-family: var(--font-title);
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #99A2B2;
}

/* MetaBrain Section */
.metabrain-section {
    padding: 120px 0;
    background-color: var(--color-background);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.metabrain-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.metabrain-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.metabrain-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 50px;
}

.metabrain-primary-features, 
.metabrain-secondary-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.metabrain-feature {
    background-color: var(--color-card-background);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.metabrain-feature p {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1.5;
    z-index: 2;
}

.metabrain-feature strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.25rem;
}

.tasks-feature {
    background-image: url('assets/tasks-notes.png');
    background-size: cover;
    background-position: center;
}

.plan-feature {
    background-image: url('assets/plan-work.jpg');
    background-size: cover;
    background-position: center;
}

.notes-feature {
    background-image: url('assets/document-editor.svg');
    background-size: cover;
    background-position: center;
}

.collab-feature {
    background-image: url('assets/collab.jpg');
    background-size: cover;
    background-position: center;
}

.calendar-feature {
    background-image: url('assets/calendar.png');
    background-size: cover;
    background-position: center;
}

.chat-feature {
    background-image: url('assets/teammates.jpg');
    background-size: cover;
    background-position: center;
}

.manage-feature {
    background-image: url('assets/pm.jpg');
    background-size: cover;
    background-position: center;
}

/* Community Section Styles */
.community-section {
    padding: 120px 0;
    background-color: var(--color-background-alt);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.community-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(125, 126, 255, 0.08), transparent 50%),
                radial-gradient(circle at bottom left, rgba(255, 95, 11, 0.08), transparent 50%);
    z-index: 0;
}

.community-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.community-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    position: relative;
    z-index: 1;
}

.community-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.platform-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.platform-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.platform-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    padding: 15px;
}

.platform-svg {
    width: 100%;
    height: 100%;
}

.github-card .platform-icon {
    color: #7d80ff;
}

.slack-card .platform-icon {
    color: #4A154B;
}

.twitter-card .platform-icon {
    color: #1DA1F2;
}

.youtube-card .platform-icon {
    color: #FF0000;
}

.platform-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.platform-card p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 24px;
    flex-grow: 1;
}

.platform-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-bottom: 15px;
}

.platform-link:hover {
    color: var(--color-primary-hover);
}

.platform-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.platform-link:hover::after {
    transform: translateX(4px);
}

.metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.community-events {
    position: relative;
    z-index: 1;
}

.community-events h3 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.events-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.event-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.event-date {
    background: linear-gradient(135deg, #7d80ff, #ff5f0b);
    color: white;
    width: 80px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.event-month {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-day {
    font-size: 1.75rem;
    font-weight: 700;
}

.event-details {
    padding: 20px;
    flex-grow: 1;
}

.event-details h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--color-text);
}

.event-details p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.event-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-link:hover {
    color: var(--color-primary-hover);
}

.event-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.event-link:hover::after {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .community-section {
        padding: 80px 0;
    }
    
    .community-section h2 {
        font-size: 2.5rem;
    }
    
    .platform-card, 
    .event-card {
        max-width: 100%;
    }
    
    .events-container {
        grid-template-columns: 1fr;
    }
}

/* Join Movement Section */
.join-movement {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.copyright a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.copyright a:hover {
    color: white;
}

.copyright a:hover::after {
    width: 100%;
}

.footer-links {
    margin-left: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    z-index: 10;
}

.footer-links a {
    display: inline-flex;
    color: var(--color-grey-80);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

.social-links {
    margin-left: 70px;
    display: flex;
    gap: 18px;
    list-style: none;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.linkedin-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E");
}

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.slack-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
}

.social-links a:hover .social-icon {
    opacity: 1;
}

.made-with {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: right;
    position: relative;
    transition: transform 0.3s ease;
}

.made-with:hover {
    transform: translateY(-2px);
}

.made-with::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background: var(--gradient-primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.made-with:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.gradient-mark {
    margin-right: -12px;
    transition: transform 0.3s ease;
}

.made-with:hover .gradient-mark {
    transform: rotate(20deg);
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .work-together h2 {
        font-size: 72px;
    }
    
    .github-section h2,
    .join-movement h2 {
        font-size: 72px;
    }
    
    .join-image {
        left: -253px;
        top: 128px;
        max-width: 1630px;
    }
}

@media (max-width: 992px) {
    .work-content {
        padding-left: 96px;
    }
    
    .work-together h2 {
        max-width: 430px;
        font-size: 56px;
    }
    
    .work-together p {
        max-width: 450px;
        font-size: 16px;
    }
    
    .video-container {
        margin-left: 8px;
        margin-top: 48px;
        height: 316px;
    }
    
    .collaboration-text {
        margin-top: 72px;
        font-size: 20px;
    }
    
    .features-grid {
        gap: 32px;
    }
    
    .feature h3 {
        font-size: 24px;
    }
    
    .github-section {
        padding: 96px 0;
    }
    
    .github-section h2 {
        max-width: 400px;
        font-size: 56px;
    }
    
    .github-features {
        margin-top: 64px;
        gap: 48px 64px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
    
    .join-movement {
        padding: 77px 0 190px;
    }
    
    .join-movement h2 {
        max-width: 320px;
        font-size: 56px;
    }
    
    .join-image {
        left: -255px;
        top: 62px;
        max-width: 1430px;
    }
    
    .footer {
        padding: 14px 0;
    }
    
    .footer-links {
        margin-left: 0;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .work-content {
        padding-left: 0;
    }
    
    .work-together h2 {
        max-width: 250px;
        font-size: 36px;
    }
    
    .video-container {
        margin: 24px 5px 0;
        height: auto;
        width: calc(100% - 10px);
    }
    
    .collaboration-text {
        margin-top: 28px;
        font-size: 18px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .feature h3 {
        font-size: 20px;
        max-width: none;
    }
    
    .feature p {
        max-width: none;
    }
    
    .github-section {
        padding: 64px 0;
    }
    
    .github-section h2 {
        max-width: 384px;
        font-size: 36px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .github-feature h3 {
        font-size: 20px;
    }
    
    .join-movement {
        padding: 266px 0 235px;
        position: relative;
    }
    
    .join-movement .container {
        grid-template-columns: 1fr;
    }
    
    .join-content {
        grid-column: 1;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .join-movement h2 {
        font-size: 44px;
    }
    
    .join-image {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 767px;
        height: 560px;
        max-width: 767px;
    }
    
    .join-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
        text-align: center;
    }
    
    .copyright {
        margin-top: 8px;
        width: 100%;
    }
    
    .footer-links {
        margin-top: 36px;
        width: 100%;
        justify-content: center;
    }
    
    .social-links {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .made-with {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-1);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav {
    flex: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav > ul > li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
}

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 18px;
    text-align: left;
    padding: 12px 0;
    cursor: pointer;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 16px;
    margin-top: 8px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown-content a {
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-grey-60);
}

.mobile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-full {
    width: 100%;
}

/* Page transition overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-transition::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(61, 126, 255, 0.2) 0%, rgba(11, 12, 15, 0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition.active::before {
    transform: scale(1.5);
}

/* Loading spinner */
.page-transition::after {
    content: '';
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-orange);
    animation: spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.active::after {
    opacity: 1;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Hide sun icon in dark mode, moon icon in light mode */
.moon-icon {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

html.light-theme .moon-icon {
    opacity: 1;
    transform: rotate(0);
}

html.light-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle-mobile {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.theme-toggle-mobile .theme-toggle-icon {
    margin-right: 12px;
}

/* Newsletter subscription styles */
.newsletter-container {
    margin-top: 80px;
    padding: 40px;
    border-radius: 16px;
    background: rgba(26, 29, 36, 0.4);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.newsletter-container::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.newsletter-content {
    position: relative;
    z-index: 1;
}

.newsletter-container h3 {
    font-size: 28px;
    margin-bottom: 16px;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.newsletter-container p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 460px;
}

.newsletter-form {
    position: relative;
    transition: all 0.3s ease;
}

.input-group {
    display: flex;
    gap: 12px;
}

.newsletter-form input {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(35, 38, 47, 0.5);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(61, 126, 255, 0.2);
}

.newsletter-form input.error {
    border-color: #ff3333;
    box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.2);
}

.newsletter-submit {
    height: 48px;
    border-radius: 8px !important;
}

.error-message {
    color: #ff3333;
    font-size: 14px;
    margin-top: 8px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.newsletter-form.loading input,
.newsletter-form.loading button {
    opacity: 0.7;
    pointer-events: none;
}

.newsletter-form.loading button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    right: 16px;
    top: calc(50% - 10px);
    animation: spin 0.8s linear infinite;
}

.subscription-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn 0.5s ease forwards;
}

.success-icon {
    width: 56px;
    height: 56px;
    background-color: var(--color-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(61, 126, 255, 0.3);
}

.subscription-success p {
    margin-bottom: 8px;
    font-weight: 500;
}

.success-details {
    font-size: 14px;
    opacity: 0.7;
}

/* Confetti animation */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    transform-origin: center;
    opacity: 0;
    animation: confettiFall 3s ease-in-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* Shake animation for form errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Media queries for newsletter */
@media (max-width: 768px) {
    .newsletter-container {
        padding: 30px 24px;
        margin-top: 60px;
    }
    
    .newsletter-container h3 {
        font-size: 24px;
    }
    
    .input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .newsletter-submit {
        width: 100%;
    }
}

/* Advanced Tooltip System */
.tooltip-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 300px;
    opacity: 0;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    will-change: transform;
}

.tooltip-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.tooltip-content {
    position: relative;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(46, 49, 59, 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tooltip-content::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(46, 49, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
    z-index: -1;
    backdrop-filter: blur(8px);
}

.tooltip-top .tooltip-content::before {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.tooltip-bottom .tooltip-content::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.tooltip-left .tooltip-content::before {
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.tooltip-right .tooltip-content::before {
    top: 50%;
    left: -6px;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.tooltip-follow .tooltip-content::before {
    display: none;
}

.tooltip-image .tooltip-content {
    padding: 0;
    overflow: hidden;
}

.tooltip-image img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.tooltip-rich .tooltip-content {
    min-width: 220px;
}

.tooltip-rich-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}

.tooltip-rich-content p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-grey-80);
}

.tooltip-badge {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(61, 126, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-blue);
}

/* Add tooltip animation for hover state on elements with tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: radial-gradient(circle at var(--tooltip-hover-x, 50%) var(--tooltip-hover-y, 50%), rgba(61, 126, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: -1;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Light theme tooltip overrides */
html.light-theme .tooltip-content {
    background: rgba(250, 250, 252, 0.95);
    color: var(--color-black);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-content::before {
    background: rgba(250, 250, 252, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-rich-content p {
    color: var(--color-grey-20);
}

html.light-theme .tooltip-badge {
    background: rgba(61, 126, 255, 0.1);
}

/* Media queries for tooltips */
@media (max-width: 768px) {
    .tooltip {
        max-width: 260px;
    }
    
    .tooltip-content {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .tooltip-rich-content h4 {
        font-size: 15px;
    }
    
    .tooltip-rich-content p {
        font-size: 12px;
    }
}

/* Cookie Consent Banner */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    pointer-events: auto;
}

.cookie-consent.active {
    transform: translateY(0);
}

.cookie-consent-container {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--card-border);
    padding: 20px;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cookie-consent-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.cookie-settings-toggle {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.cookie-settings-toggle:hover,
.cookie-settings-toggle.active {
    background-color: var(--bg-tertiary);
    color: var(--color-blue);
}

.cookie-consent-main {
    margin-bottom: 20px;
}

.cookie-consent-main > p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 800px;
}

.cookie-consent-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    animation: fadeIn 0.3s ease;
    max-width: 950px;
}

.cookie-option {
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    position: relative;
}

.cookie-option-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.cookie-option-header h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0 12px;
}

.cookie-option p {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cookie-consent-actions .btn {
    min-width: 120px;
    font-size: 13px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-btn-accept-all {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-btn-save {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-consent-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    border-radius: 50%;
}

.cookie-consent-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* Cookie toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    transition: .3s;
    border-radius: 34px;
    border: 1px solid var(--card-border);
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    transition: .3s;
    border-radius: 50%;
}

input:checked + .cookie-slider {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

input:focus + .cookie-slider {
    box-shadow: 0 0 1px var(--color-blue);
}

input:checked + .cookie-slider:before {
    transform: translateX(16px);
    background-color: white;
}

input:disabled + .cookie-slider {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Media queries for cookie consent */
@media (max-width: 768px) {
    .cookie-consent-container {
        padding: 16px;
    }
    
    .cookie-consent-options {
        grid-template-columns: 1fr;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .cookie-consent-header h3 {
        font-size: 18px;
    }
    
    .cookie-consent-main > p {
        font-size: 14px;
    }
    
    .cookie-option {
        padding: 12px;
    }
    
    .cookie-consent-close {
        top: 12px;
        right: 12px;
    }
    
    .cookie-option-header h4 {
        font-size: 15px;
    }
    
    .cookie-option p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cookie-consent-actions {
        flex-direction: column;
    }
    
    .cookie-consent-actions .btn {
        width: 100%;
    }
}

/* Enhanced Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px !important;
    right: unset !important;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background-color 0.2s;
    color: var(--text-secondary);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    background-color: var(--bg-secondary);
    color: var(--color-blue);
}

.back-to-top.hover .progress-circle-path {
    stroke: var(--color-blue);
    stroke-width: 2.5px;
    transition: stroke 0.2s, stroke-width 0.2s;
}

.back-to-top.clicked {
    animation: pulse 0.7s ease;
}

.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    stroke: var(--card-border);
    opacity: 0.4;
}

.progress-circle-path {
    stroke: var(--text-secondary);
    transition: stroke-dashoffset 0.3s, stroke 0.2s, stroke-width 0.2s;
}

.back-to-top-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.back-to-top:hover .back-to-top-icon {
    transform: translateY(-3px);
}

.back-to-top.clicked .back-to-top-icon {
    transform: translateY(-5px);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Media queries for back-to-top button */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        left: 20px !important;
        right: unset !important;
        width: 40px;
        height: 40px;
    }
    
    .back-to-top-icon {
        width: 14px;
        height: 14px;
    }
    
    .progress-circle {
        width: 40px;
        height: 40px;
    }
    
    .progress-circle-bg,
    .progress-circle-path {
        cx: 20;
        cy: 20;
        r: 18;
    }
}

/* Smart Search Feature */
.search-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.search-modal.active .search-backdrop {
    opacity: 1;
}

.search-container {
    position: relative;
    width: 600px;
    max-width: 90%;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-top: 80px;
    overflow: hidden;
    z-index: 1;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal.active .search-container {
    transform: translateY(0);
}

.search-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--card-border);
}

.search-icon {
    color: var(--text-secondary);
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-shortcuts {
    display: flex;
    gap: 10px;
    margin-left: 16px;
}

.search-shortcut {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.search-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: 11px;
    font-family: var(--font-sans);
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    margin: 0 2px;
}

.search-body {
    max-height: 400px;
    overflow-y: auto;
}

.search-results {
    padding: 8px 0;
}

.search-result-category {
    padding: 6px 20px 0;
    margin-top: 8px;
}

.search-result-category h4 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: var(--bg-secondary);
}

.search-result-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-url {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background-color: rgba(61, 126, 255, 0.15);
    color: var(--color-blue);
    border-radius: 2px;
    padding: 0 2px;
}

.search-empty,
.search-loading {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-tertiary);
    display: none;
    flex-direction: column;
    align-items: center;
}

.search-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(61, 126, 255, 0.3);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

/* Header search button */
.header-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 8px;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
}

.header-search-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.search-shortcut-indicator {
    position: absolute;
    right: -4px;
    bottom: -4px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media queries for search */
@media (max-width: 768px) {
    .search-container {
        width: 92%;
        margin-top: 60px;
    }
    
    .search-shortcuts {
        display: none;
    }
    
    .search-body {
        max-height: 60vh;
    }
}

/* Lock body when search is open */
body.search-open {
    overflow: hidden;
}

/* Document Editor Section */
.document-section {
    position: relative;
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
}

.document-content {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.document-info {
    flex: 1;
    max-width: 60%;
}

.document-info h2 {
    font-size: 54px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-title);
}

.document-info > p {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 40px;
}

.document-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.pin-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.pin-image {
    transition: all 0.2s;
    will-change: transform;
}

.pin-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

.pin-line {
    height: 27px;
    width: 2px;
    background-color: #FF5F0B;
}

.pin-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #FF5F0B;
    margin-top: -1px;
}

.document-feature p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.document-preview {
    margin-top: 22px;
    margin-bottom: 30px;
}

.editor-preview {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.tap-indicator {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 15px;
}

.tap-arrow {
    width: 10px;
    height: 36px;
    margin-right: 4px;
    color: #666;
}

.tap-text {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

.editor-actions {
    display: flex;
    gap: 4px;
    margin-top: 15px;
    width: fit-content;
    padding: 5px;
    border-radius: 999px;
    background-color: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-btn.active {
    background-color: #333;
}

.action-icon {
    width: 14px;
    height: 14px;
    margin: auto;
}

.action-add.active svg path {
    stroke: white;
}

.sidebar-preview {
    flex: 1;
    max-width: 40%;
    padding-left: 8px;
    padding-top: 222px;
}

.sticky-sidebar {
    position: sticky;
    top: 222px;
    z-index: 10;
    height: 282px;
    width: 256px;
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px 18px 28px;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.sidebar-panel.hidden {
    opacity: 0;
    z-index: 5;
}

.sidebar-panel h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.sidebar-panel p {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #333;
}

.sidebar-backdrop {
    position: absolute;
    bottom: -52.5%;
    left: 50%;
    aspect-ratio: 0.912;
    width: 178.125%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.2) 0%, rgba(255, 95, 11, 0.05) 60%, transparent 100%);
    border-radius: 12px;
}

/* Document Section Media Queries */
@media (max-width: 1200px) {
    .document-info h2 {
        font-size: 44px;
    }
    
    .sticky-sidebar {
        height: 240px;
        width: 220px;
    }
    
    .sidebar-panel h3 {
        font-size: 16px;
    }
    
    .sidebar-panel p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .document-section {
        padding: 80px 0;
    }
    
    .document-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .document-info {
        max-width: 100%;
    }
    
    .sidebar-preview {
        max-width: 100%;
        padding-top: 0;
    }
    
    .sticky-sidebar {
        position: relative;
        top: 0;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .document-section {
        padding: 60px 0;
    }
    
    .document-info h2 {
        font-size: 36px;
    }
    
    .document-info > p {
        font-size: 16px;
    }
    
    .pin-line {
        height: 18px;
    }
    
    .pin-dot {
        height: 7px;
        width: 7px;
    }
    
    .pin-image {
        width: 36px;
        height: 36px;
    }
    
    .editor-actions {
        padding: 4px;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
    }
    
    .action-icon {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 576px) {
    .document-section {
        padding: 40px 0;
    }
    
    .document-info h2 {
        font-size: 28px;
    }
    
    .document-feature {
        gap: 10px;
    }
    
    .document-feature p {
        font-size: 14px;
    }
    
    .feature-description {
        font-size: 14px;
    }
    
    .sticky-sidebar {
        height: 200px;
        width: 180px;
    }
}

/* GitHub Integration Section */
.github-integration {
    position: relative;
    padding: 120px 0;
    background-color: #090A0C;
    color: white;
    overflow: hidden;
}

.github-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.github-content h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-family: var(--font-title);
    color: white;
    margin-bottom: 20px;
}

.github-content p {
    max-width: 580px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #99A2B2;
}

.github-graphic {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.github-graphic-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.github-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 96px;
    margin-top: 160px;
    width: 100%;
}

.github-feature {
    position: relative;
}

.feature-icon-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.feature-icon-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: -8px;
    left: -8px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
}

.feature-icon {
    height: 40px;
    width: auto;
    position: relative;
    z-index: 1;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.015em;
    color: white;
    font-family: var(--font-title);
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #99A2B2;
}

/* MetaBrain Section */
.metabrain-section {
    padding: 120px 0;
    background-color: var(--color-background);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.metabrain-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.metabrain-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.metabrain-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 50px;
}

.metabrain-primary-features, 
.metabrain-secondary-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.metabrain-feature {
    background-color: var(--color-card-background);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.metabrain-feature p {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1.5;
    z-index: 2;
}

.metabrain-feature strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.25rem;
}

.tasks-feature {
    background-image: url('assets/tasks-notes.png');
    background-size: cover;
    background-position: center;
}

.plan-feature {
    background-image: url('assets/plan-work.jpg');
    background-size: cover;
    background-position: center;
}

.notes-feature {
    background-image: url('assets/document-editor.svg');
    background-size: cover;
    background-position: center;
}

.collab-feature {
    background-image: url('assets/collab.jpg');
    background-size: cover;
    background-position: center;
}

.calendar-feature {
    background-image: url('assets/calendar.png');
    background-size: cover;
    background-position: center;
}

.chat-feature {
    background-image: url('assets/teammates.jpg');
    background-size: cover;
    background-position: center;
}

.manage-feature {
    background-image: url('assets/pm.jpg');
    background-size: cover;
    background-position: center;
}

/* Community Section Styles */
.community-section {
    padding: 120px 0;
    background-color: var(--color-background-alt);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.community-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(125, 126, 255, 0.08), transparent 50%),
                radial-gradient(circle at bottom left, rgba(255, 95, 11, 0.08), transparent 50%);
    z-index: 0;
}

.community-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.community-section > .container-wide > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    position: relative;
    z-index: 1;
}

.community-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.platform-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.platform-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.platform-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    padding: 15px;
}

.platform-svg {
    width: 100%;
    height: 100%;
}

.github-card .platform-icon {
    color: #7d80ff;
}

.slack-card .platform-icon {
    color: #4A154B;
}

.twitter-card .platform-icon {
    color: #1DA1F2;
}

.youtube-card .platform-icon {
    color: #FF0000;
}

.platform-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.platform-card p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 24px;
    flex-grow: 1;
}

.platform-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-bottom: 15px;
}

.platform-link:hover {
    color: var(--color-primary-hover);
}

.platform-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.platform-link:hover::after {
    transform: translateX(4px);
}

.metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.community-events {
    position: relative;
    z-index: 1;
}

.community-events h3 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.events-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.event-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.event-date {
    background: linear-gradient(135deg, #7d80ff, #ff5f0b);
    color: white;
    width: 80px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.event-month {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-day {
    font-size: 1.75rem;
    font-weight: 700;
}

.event-details {
    padding: 20px;
    flex-grow: 1;
}

.event-details h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--color-text);
}

.event-details p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.event-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-link:hover {
    color: var(--color-primary-hover);
}

.event-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.event-link:hover::after {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .community-section {
        padding: 80px 0;
    }
    
    .community-section h2 {
        font-size: 2.5rem;
    }
    
    .platform-card, 
    .event-card {
        max-width: 100%;
    }
    
    .events-container {
        grid-template-columns: 1fr;
    }
}

/* Join Movement Section */
.join-movement {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.copyright a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.copyright a:hover {
    color: white;
}

.copyright a:hover::after {
    width: 100%;
}

.footer-links {
    margin-left: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    z-index: 10;
}

.footer-links a {
    display: inline-flex;
    color: var(--color-grey-80);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

.social-links {
    margin-left: 70px;
    display: flex;
    gap: 18px;
    list-style: none;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.linkedin-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E");
}

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.slack-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
}

.social-links a:hover .social-icon {
    opacity: 1;
}

.made-with {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: right;
    position: relative;
    transition: transform 0.3s ease;
}

.made-with:hover {
    transform: translateY(-2px);
}

.made-with::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background: var(--gradient-primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.made-with:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.gradient-mark {
    margin-right: -12px;
    transition: transform 0.3s ease;
}

.made-with:hover .gradient-mark {
    transform: rotate(20deg);
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .work-together h2 {
        font-size: 72px;
    }
    
    .github-section h2,
    .join-movement h2 {
        font-size: 72px;
    }
    
    .join-image {
        left: -253px;
        top: 128px;
        max-width: 1630px;
    }
}

@media (max-width: 992px) {
    .work-content {
        padding-left: 96px;
    }
    
    .work-together h2 {
        max-width: 430px;
        font-size: 56px;
    }
    
    .work-together p {
        max-width: 450px;
        font-size: 16px;
    }
    
    .video-container {
        margin-left: 8px;
        margin-top: 48px;
        height: 316px;
    }
    
    .collaboration-text {
        margin-top: 72px;
        font-size: 20px;
    }
    
    .features-grid {
        gap: 32px;
    }
    
    .feature h3 {
        font-size: 24px;
    }
    
    .github-section {
        padding: 96px 0;
    }
    
    .github-section h2 {
        max-width: 400px;
        font-size: 56px;
    }
    
    .github-features {
        margin-top: 64px;
        gap: 48px 64px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
    
    .join-movement {
        padding: 77px 0 190px;
    }
    
    .join-movement h2 {
        max-width: 320px;
        font-size: 56px;
    }
    
    .join-image {
        left: -255px;
        top: 62px;
        max-width: 1430px;
    }
    
    .footer {
        padding: 14px 0;
    }
    
    .footer-links {
        margin-left: 0;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .work-content {
        padding-left: 0;
    }
    
    .work-together h2 {
        max-width: 250px;
        font-size: 36px;
    }
    
    .video-container {
        margin: 24px 5px 0;
        height: auto;
        width: calc(100% - 10px);
    }
    
    .collaboration-text {
        margin-top: 28px;
        font-size: 18px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .feature h3 {
        font-size: 20px;
        max-width: none;
    }
    
    .feature p {
        max-width: none;
    }
    
    .github-section {
        padding: 64px 0;
    }
    
    .github-section h2 {
        max-width: 384px;
        font-size: 36px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .github-feature h3 {
        font-size: 20px;
    }
    
    .join-movement {
        padding: 266px 0 235px;
        position: relative;
    }
    
    .join-movement .container {
        grid-template-columns: 1fr;
    }
    
    .join-content {
        grid-column: 1;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .join-movement h2 {
        font-size: 44px;
    }
    
    .join-image {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 767px;
        height: 560px;
        max-width: 767px;
    }
    
    .join-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
        text-align: center;
    }
    
    .copyright {
        margin-top: 8px;
        width: 100%;
    }
    
    .footer-links {
        margin-top: 36px;
        width: 100%;
        justify-content: center;
    }
    
    .social-links {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .made-with {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-1);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav {
    flex: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav > ul > li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
}

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 18px;
    text-align: left;
    padding: 12px 0;
    cursor: pointer;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 16px;
    margin-top: 8px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown-content a {
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-grey-60);
}

.mobile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-full {
    width: 100%;
}

/* Page transition overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-transition::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(61, 126, 255, 0.2) 0%, rgba(11, 12, 15, 0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition.active::before {
    transform: scale(1.5);
}

/* Loading spinner */
.page-transition::after {
    content: '';
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-orange);
    animation: spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.active::after {
    opacity: 1;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Hide sun icon in dark mode, moon icon in light mode */
.moon-icon {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

html.light-theme .moon-icon {
    opacity: 1;
    transform: rotate(0);
}

html.light-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle-mobile {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.theme-toggle-mobile .theme-toggle-icon {
    margin-right: 12px;
}

/* Newsletter subscription styles */
.newsletter-container {
/* Base styles */
:root {
    --color-black: #090a0c;
    --color-white: #ffffff;
    --color-grey-1: #0B0C0F;
    --color-grey-5: #1A1D24;
    --color-grey-10: #23262F;
    --color-grey-20: #303236;
    --color-grey-50: #85878C;
    --color-grey-60: #9DA0A5;
    --color-grey-80: #C9CBCF;
    --color-grey-90: #E5E7EB;
    --color-grey-98: #F6F6F6;
    --color-blue: #3D7EFF;
    --color-orange: #FF5F0B;
    --gradient-primary: linear-gradient(90deg, #F58041 0%, #AC795C 25.6%, #887064 41.58%, #716A69 56.98%, #61656B 69.44%);
    --text-gradient: linear-gradient(135deg, white 30%, #d5d8f6 80%, #fdf7fe 100%);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Theme Variables */
    --bg-primary: var(--color-grey-1);
    --bg-secondary: var(--color-grey-5);
    --bg-tertiary: var(--color-grey-10);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-grey-80);
    --text-tertiary: var(--color-grey-60);
    --card-bg: var(--color-grey-10);
    --card-border: rgba(255, 255, 255, 0.1);
    
    /* Transition timing for theme changes */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme overrides */
html.light-theme {
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-grey-98);
    --bg-tertiary: var(--color-grey-90);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-grey-20);
    --text-tertiary: var(--color-grey-50);
    --card-bg: var(--color-white);
    --card-border: rgba(0, 0, 0, 0.1);
    --text-gradient: linear-gradient(135deg, var(--color-grey-10) 30%, var(--color-grey-5) 80%, var(--color-black) 100%);
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    transition: var(--theme-transition);
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-primary {
    color: #5A250A;
    background-color: #d1d1d1;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, #FFAA81 26.5%, #FFDA9F 37.5%, rgba(255, 170, 129, 0.50) 49%, rgba(210, 106, 58, 0.00) 92.5%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

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

.btn-secondary {
    color: var(--color-white);
    background-color: var(--color-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline {
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-arrow {
    height: 9px;
    width: 17px;
    margin-left: 6px;
    fill: currentColor;
}

/* Header styles */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 64px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.header-container {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10;
}

.logo {
    display: block;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.9;
}

.main-nav {
    margin-left: 77px;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a, 
.main-nav button {
    display: inline-flex;
    padding: 12px;
    font-size: 14px;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    white-space: pre;
}

.main-nav a:hover, 
.main-nav button:hover {
    color: var(--color-blue);
}

.dropdown {
    position: relative;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA2Ij48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS40IiBkPSJtMSAxIDQgNCA0LTQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.dropdown-content {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    transition: opacity 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-grey-10);
    background-color: var(--color-grey-5);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 14px;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--color-grey-10);
}

.header-actions {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
}

.github-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    padding: 0 6px;
    transition: color 0.2s;
}

.github-link:hover {
    color: var(--color-grey-80);
}

.github-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }
}

section {
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-section {
    background-color: #000;
    color: #fff;
}

.white-section {
    background-color: #fff;
    color: #000;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
} 

/* Hero section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    max-height: 1438px;
    padding-top: 184px;
    overflow: hidden;
    background-color: var(--bg-primary);
    transition: var(--theme-transition);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: radial-gradient(circle at 50% 0%, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hero-container {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.hero-title {
    max-width: 700px;
    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.2));
    position: relative;
    margin-bottom: 10px;
    opacity: 0;
    animation: titleFadeIn 0.8s ease-out forwards 0.2s;
}

.hero-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    filter: blur(20px);
    opacity: 0.6;
    transform: translateZ(0);
}

.hero-subtitle {
    margin-top: 20px;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-grey-90);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-cta {
    margin-top: 44px;
    z-index: 10;
    position: relative;
}

.hero-image-container {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: 80%;
    max-width: 1024px;
    z-index: 5;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease;
}

.hero-image-container:hover {
    transform: perspective(1000px) rotateX(0);
}

.hero-image {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.hero-features {
    position: absolute;
    bottom: 88px;
    z-index: 30;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: -0.02em;
    width: 100%;
}

.hero-features p {
    margin-bottom: 14px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
}

.scrolling-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    padding: 8px 0;
    margin-left: -20px;
    margin-right: -20px;
}

.scrolling-content {
    display: inline-block;
    white-space: nowrap;
    animation: scrollFeatures 40s linear infinite;
    padding-left: 20px;
}

.scrolling-content span {
    display: inline-block;
    font-weight: 600;
    color: var(--text-primary);
    padding: 5px 0;
}

.feature-dot {
    display: inline-block;
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.3);
}

@keyframes scrollFeatures {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Add pause on hover effect */
.scrolling-wrapper:hover .scrolling-content {
    animation-play-state: paused;
}

/* Adjust scrolling speed for mobile */
@media (max-width: 768px) {
    .scrolling-content {
        animation: scrollFeatures 25s linear infinite;
    }
    
    .hero-features {
        left: 0;
        right: 0;
        bottom: 30px;
        font-size: 12px;
    }
    
    .feature-dot {
        margin: 0 8px;
    }
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 340px;
    background: linear-gradient(to bottom, rgba(11, 12, 15, 0) 0%, var(--color-grey-1) 50%);
    pointer-events: none;
}

/* Productivity section */
.productivity {
    padding: 160px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    z-index: 10;
    transition: var(--theme-transition);
}

.productivity h2 {
    font-size: 80px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.productivity > .container > p {
    margin-top: 24px;
    max-width: 705px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.feature-cards {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.feature-card {
    position: relative;
    height: 420px;
    width: 428px;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--card-bg);
    background-clip: padding-box;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 60%);
    z-index: 1;
    pointer-events: none;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.feature-card.wide {
    width: 768px;
}

.feature-card.wide::before {
    background: linear-gradient(135deg, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.5);
}

.card-content {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    padding: 24px;
    background: linear-gradient(to top, var(--card-bg) 0%, rgba(22, 23, 27, 0.8) 60%, rgba(22, 23, 27, 0) 100%);
}

.card-content h3 {
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 6px;
}

.card-content p {
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1200px) {
    .hero-title {
        font-size: 72px;
        max-width: 600px;
        line-height: 1.05;
    }

    .feature-card {
        height: 300px;
        width: 308px;
    }

    .feature-card.wide {
        width: 572px;
    }
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: 112px;
    }

    .hero-title {
        font-size: 56px;
        max-width: 500px;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-image-container {
        position: relative;
        margin-top: -36%;
        width: 120%;
        left: 0;
    }

    .productivity {
        padding: 100px 0;
    }

    .productivity h2 {
        font-size: 64px;
    }

    .feature-card {
        height: 260px;
        width: 252px;
    }

    .feature-card.wide {
        width: 436px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 40px;
        max-width: 100%;
        line-height: 1.2;
        font-weight: 700;
    }

    .hero-subtitle {
        font-size: 15px;
        max-width: 90%;
    }

    .hero-cta {
        margin-top: 20px;
    }

    .hero-features {
        left: 20px !important;
        right: unset !important;
        right: 0;
        bottom: 36px;
        font-size: 12px;
    }

    .hero-image-container {
        position: relative;
        margin-top: 18.7%;
        width: 100%;
    }

    .productivity {
        padding: 64px 0;
    }

    .productivity h2 {
        font-size: 36px;
    }

    .productivity > .container > p {
        font-size: 15px;
    }

    .feature-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card, 
    .feature-card.wide {
        width: 100%;
    }
}

/* Work Together Section */
.work-together {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.work-together::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.1) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-together::after {
    content: '';
    position: absolute;
    bottom: -200px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.1) 0%, rgba(255, 95, 11, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.work-content {
    padding-left: 320px;
    position: relative;
    z-index: 2;
}

.work-together h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.03em;
    position: relative;
}

.work-together h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-orange) 100%);
    border-radius: 2px;
}

.work-together p {
    margin-top: 36px;
    max-width: 544px;
    font-size: 18px;
    line-height: 1.2;
}

.video-container {
    margin-top: 60px;
    position: relative;
    z-index: 0;
    aspect-ratio: 16/9;
    height: 486px;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: perspective(1000px) rotateY(-2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    overflow: hidden;
}

.video-container:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.video-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #16171b;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-placeholder:hover {
    transform: scale(1.02);
}

.video-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(61, 126, 255, 0.15) 0%, rgba(255, 95, 11, 0.15) 100%);
    z-index: 1;
    pointer-events: none;
}

.video-placeholder::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.7'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px;
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-placeholder:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
}

.call-interface {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: white;
    z-index: 2;
}

.call-header {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
}

.call-title {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
}

.call-participants {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.6;
    display: flex;
    align-items: center;
}

.call-actions {
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.call-btn {
    aspect-ratio: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: #68686a;
    border: none;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.call-end {
    background-color: #ff4d4d;
}

.collaboration-text {
    margin-top: 66px;
    max-width: 800px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.features-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}

.feature-icon {
    height: 40px;
    width: 40px;
}

.feature h3 {
    margin-top: 20px;
    max-width: 128px;
    font-size: 28px;
    line-height: 1;
}

.feature p {
    margin-top: 14px;
    max-width: 204px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
}

/* GitHub Section */
.github-section {
    background-color: var(--bg-tertiary);
    padding: 131px 0 180px;
    overflow: hidden;
    position: relative;
    z-index: 20;
    transition: var(--theme-transition);
}

.github-section h2 {
    max-width: 800px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.github-section > .container-narrow > p {
    margin-top: 16px;
    max-width: 580px;
    line-height: 1.2;
    color: var(--color-grey-60);
}

.github-graphic {
    margin-top: 108px;
    position: relative;
    aspect-ratio: 2;
    width: 100%;
    border-radius: 12px;
    background-color: transparent;
    background-image: url('../assets/github-graphic.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.github-graphic:hover {
    transform: perspective(1000px) rotateX(0deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.github-features {
    margin-top: 160px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 96px 80px;
}

.github-feature {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(34, 38, 46, 0.3);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.github-feature:hover {
    transform: translateY(-5px);
    background-color: rgba(34, 38, 46, 0.5);
}

.github-feature::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.github-feature:hover::after {
    transform: scale(1.2);
    opacity: 0.8;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    line-height: 1;
    color: white;
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-grey-60);
}

/* Join Movement Section */
.join-movement {
    position: relative;
    background-color: var(--bg-primary);
    padding: 152px 0 294px;
    overflow: hidden;
    transition: var(--theme-transition);
}

.join-movement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.join-movement .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.join-content {
    grid-column: 2;
    margin-left: -64px;
    z-index: 10;
    position: relative;
}

.join-content::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.4) 0%, rgba(61, 126, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 5s infinite alternate ease-in-out;
}

.join-movement h2 {
    max-width: 510px;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.join-movement h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.5;
}

.join-movement p {
    margin-top: 8px;
    line-height: 1.2;
    color: var(--color-grey-90);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.join-buttons {
    margin-top: 40px;
    display: flex;
    width: fit-content;
    gap: 31px;
    position: relative;
}

.join-buttons::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(61, 126, 255, 0.2) 0%, rgba(61, 126, 255, 0) 100%);
    filter: blur(20px);
    z-index: -1;
    border-radius: 50%;
    transform: scaleX(0.8);
}

.join-image {
    position: absolute;
    left: -320px;
    bottom: 0;
    top: 144px;
    margin: auto;
    height: 689px;
    width: 1920px;
    max-width: 1920px;
    background-image: url('assets/cta-illustration.svg');
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: translateZ(0);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding: 17px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(11, 12, 15, 0.5);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    transition: var(--theme-transition);
}

.footer .container {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

.copyright {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    position: relative;
    transition: color 0.3s ease;
}

.copyright:hover {
    color: var(--color-grey-60);
}

.copyright a {
    color: var(--color-grey-40, rgba(255, 255, 255, 0.4));
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.copyright a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.copyright a:hover {
    color: white;
}

.copyright a:hover::after {
    width: 100%;
}

.footer-links {
    margin-left: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    z-index: 10;
}

.footer-links a {
    display: inline-flex;
    color: var(--color-grey-80);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

.social-links {
    margin-left: 70px;
    display: flex;
    gap: 18px;
    list-style: none;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.linkedin-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E");
}

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.slack-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
}

.social-links a:hover .social-icon {
    opacity: 1;
}

.made-with {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: right;
    position: relative;
    transition: transform 0.3s ease;
}

.made-with:hover {
    transform: translateY(-2px);
}

.made-with::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background: var(--gradient-primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.made-with:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.gradient-mark {
    margin-right: -12px;
    transition: transform 0.3s ease;
}

.made-with:hover .gradient-mark {
    transform: rotate(20deg);
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .work-together h2 {
        font-size: 72px;
    }
    
    .github-section h2,
    .join-movement h2 {
        font-size: 72px;
    }
    
    .join-image {
        left: -253px;
        top: 128px;
        max-width: 1630px;
    }
}

@media (max-width: 992px) {
    .work-content {
        padding-left: 96px;
    }
    
    .work-together h2 {
        max-width: 430px;
        font-size: 56px;
    }
    
    .work-together p {
        max-width: 450px;
        font-size: 16px;
    }
    
    .video-container {
        margin-left: 8px;
        margin-top: 48px;
        height: 316px;
    }
    
    .collaboration-text {
        margin-top: 72px;
        font-size: 20px;
    }
    
    .features-grid {
        gap: 32px;
    }
    
    .feature h3 {
        font-size: 24px;
    }
    
    .github-section {
        padding: 96px 0;
    }
    
    .github-section h2 {
        max-width: 400px;
        font-size: 56px;
    }
    
    .github-features {
        margin-top: 64px;
        gap: 48px 64px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
    
    .join-movement {
        padding: 77px 0 190px;
    }
    
    .join-movement h2 {
        max-width: 320px;
        font-size: 56px;
    }
    
    .join-image {
        left: -255px;
        top: 62px;
        max-width: 1430px;
    }
    
    .footer {
        padding: 14px 0;
    }
    
    .footer-links {
        margin-left: 0;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .work-content {
        padding-left: 0;
    }
    
    .work-together h2 {
        max-width: 250px;
        font-size: 36px;
    }
    
    .video-container {
        margin: 24px 5px 0;
        height: auto;
        width: calc(100% - 10px);
    }
    
    .collaboration-text {
        margin-top: 28px;
        font-size: 18px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .feature h3 {
        font-size: 20px;
        max-width: none;
    }
    
    .feature p {
        max-width: none;
    }
    
    .github-section {
        padding: 64px 0;
    }
    
    .github-section h2 {
        max-width: 384px;
        font-size: 36px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .github-feature h3 {
        font-size: 20px;
    }
    
    .join-movement {
        padding: 266px 0 235px;
        position: relative;
    }
    
    .join-movement .container {
        grid-template-columns: 1fr;
    }
    
    .join-content {
        grid-column: 1;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .join-movement h2 {
        font-size: 44px;
    }
    
    .join-image {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 767px;
        height: 560px;
        max-width: 767px;
    }
    
    .join-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
        text-align: center;
    }
    
    .copyright {
        margin-top: 8px;
        width: 100%;
    }
    
    .footer-links {
        margin-top: 36px;
        width: 100%;
        justify-content: center;
    }
    
    .social-links {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .made-with {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-1);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav {
    flex: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav > ul > li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
}

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 18px;
    text-align: left;
    padding: 12px 0;
    cursor: pointer;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 16px;
    margin-top: 8px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown-content a {
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-grey-60);
}

.mobile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-full {
    width: 100%;
}

/* Page transition overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-transition::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(61, 126, 255, 0.2) 0%, rgba(11, 12, 15, 0) 70%);
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition.active::before {
    transform: scale(1.5);
}

/* Loading spinner */
.page-transition::after {
    content: '';
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-orange);
    animation: spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.active::after {
    opacity: 1;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

/* Hide sun icon in dark mode, moon icon in light mode */
.moon-icon {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

html.light-theme .moon-icon {
    opacity: 1;
    transform: rotate(0);
}

html.light-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle-mobile {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.theme-toggle-mobile .theme-toggle-icon {
    margin-right: 12px;
}

/* Newsletter subscription styles */
.newsletter-container {
    margin-top: 80px;
    padding: 40px;
    border-radius: 16px;
    background: rgba(26, 29, 36, 0.4);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.newsletter-container::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 126, 255, 0.15) 0%, rgba(61, 126, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.newsletter-content {
    position: relative;
    z-index: 1;
}

.newsletter-container h3 {
    font-size: 28px;
    margin-bottom: 16px;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.newsletter-container p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 460px;
}

.newsletter-form {
    position: relative;
    transition: all 0.3s ease;
}

.input-group {
    display: flex;
    gap: 12px;
}

.newsletter-form input {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(35, 38, 47, 0.5);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(61, 126, 255, 0.2);
}

.newsletter-form input.error {
    border-color: #ff3333;
    box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.2);
}

.newsletter-submit {
    height: 48px;
    border-radius: 8px !important;
}

.error-message {
    color: #ff3333;
    font-size: 14px;
    margin-top: 8px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.newsletter-form.loading input,
.newsletter-form.loading button {
    opacity: 0.7;
    pointer-events: none;
}

.newsletter-form.loading button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    right: 16px;
    top: calc(50% - 10px);
    animation: spin 0.8s linear infinite;
}

.subscription-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn 0.5s ease forwards;
}

.success-icon {
    width: 56px;
    height: 56px;
    background-color: var(--color-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(61, 126, 255, 0.3);
}

.subscription-success p {
    margin-bottom: 8px;
    font-weight: 500;
}

.success-details {
    font-size: 14px;
    opacity: 0.7;
}

/* Confetti animation */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    transform-origin: center;
    opacity: 0;
    animation: confettiFall 3s ease-in-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* Shake animation for form errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Media queries for newsletter */
@media (max-width: 768px) {
    .newsletter-container {
        padding: 30px 24px;
        margin-top: 60px;
    }
    
    .newsletter-container h3 {
        font-size: 24px;
    }
    
    .input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .newsletter-submit {
        width: 100%;
    }
}

/* Advanced Tooltip System */
.tooltip-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 300px;
    opacity: 0;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    will-change: transform;
}

.tooltip-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.tooltip-content {
    position: relative;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(46, 49, 59, 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tooltip-content::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(46, 49, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
    z-index: -1;
    backdrop-filter: blur(8px);
}

.tooltip-top .tooltip-content::before {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.tooltip-bottom .tooltip-content::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.tooltip-left .tooltip-content::before {
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.tooltip-right .tooltip-content::before {
    top: 50%;
    left: -6px;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.tooltip-follow .tooltip-content::before {
    display: none;
}

.tooltip-image .tooltip-content {
    padding: 0;
    overflow: hidden;
}

.tooltip-image img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.tooltip-rich .tooltip-content {
    min-width: 220px;
}

.tooltip-rich-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}

.tooltip-rich-content p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-grey-80);
}

.tooltip-badge {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(61, 126, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-blue);
}

/* Add tooltip animation for hover state on elements with tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: radial-gradient(circle at var(--tooltip-hover-x, 50%) var(--tooltip-hover-y, 50%), rgba(61, 126, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: -1;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Light theme tooltip overrides */
html.light-theme .tooltip-content {
    background: rgba(250, 250, 252, 0.95);
    color: var(--color-black);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-content::before {
    background: rgba(250, 250, 252, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .tooltip-rich-content p {
    color: var(--color-grey-20);
}

html.light-theme .tooltip-badge {
    background: rgba(61, 126, 255, 0.1);
}

/* Media queries for tooltips */
@media (max-width: 768px) {
    .tooltip {
        max-width: 260px;
    }
    
    .tooltip-content {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .tooltip-rich-content h4 {
        font-size: 15px;
    }
    
    .tooltip-rich-content p {
        font-size: 12px;
    }
}

/* Cookie Consent Banner */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    pointer-events: auto;
}

.cookie-consent.active {
    transform: translateY(0);
}

.cookie-consent-container {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--card-border);
    padding: 20px;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cookie-consent-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.cookie-settings-toggle {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.cookie-settings-toggle:hover,
.cookie-settings-toggle.active {
    background-color: var(--bg-tertiary);
    color: var(--color-blue);
}

.cookie-consent-main {
    margin-bottom: 20px;
}

.cookie-consent-main > p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 800px;
}

.cookie-consent-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    animation: fadeIn 0.3s ease;
    max-width: 950px;
}

.cookie-option {
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    position: relative;
}

.cookie-option-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.cookie-option-header h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0 12px;
}

.cookie-option p {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cookie-consent-actions .btn {
    min-width: 120px;
    font-size: 13px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-btn-accept-all {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-btn-save {
    background-color: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

.cookie-consent-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    border-radius: 50%;
}

.cookie-consent-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* Cookie toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    transition: .3s;
    border-radius: 34px;
    border: 1px solid var(--card-border);
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    transition: .3s;
    border-radius: 50%;
}

input:checked + .cookie-slider {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

input:focus + .cookie-slider {
    box-shadow: 0 0 1px var(--color-blue);
}

input:checked + .cookie-slider:before {
    transform: translateX(16px);
    background-color: white;
}

input:disabled + .cookie-slider {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Media queries for cookie consent */
@media (max-width: 768px) {
    .cookie-consent-container {
        padding: 16px;
    }
    
    .cookie-consent-options {
        grid-template-columns: 1fr;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .cookie-consent-header h3 {
        font-size: 18px;
    }
    
    .cookie-consent-main > p {
        font-size: 14px;
    }
    
    .cookie-option {
        padding: 12px;
    }
    
    .cookie-consent-close {
        top: 12px;
        right: 12px;
    }
    
    .cookie-option-header h4 {
        font-size: 15px;
    }
    
    .cookie-option p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cookie-consent-actions {
        flex-direction: column;
    }
    
    .cookie-consent-actions .btn {
        width: 100%;
    }
}

/* Enhanced Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px !important;
    right: unset !important;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background-color 0.2s;
    color: var(--text-secondary);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    background-color: var(--bg-secondary);
    color: var(--color-blue);
}

.back-to-top.hover .progress-circle-path {
    stroke: var(--color-blue);
    stroke-width: 2.5px;
    transition: stroke 0.2s, stroke-width 0.2s;
}

.back-to-top.clicked {
    animation: pulse 0.7s ease;
}

.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    stroke: var(--card-border);
    opacity: 0.4;
}

.progress-circle-path {
    stroke: var(--text-secondary);
    transition: stroke-dashoffset 0.3s, stroke 0.2s, stroke-width 0.2s;
}

.back-to-top-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.back-to-top:hover .back-to-top-icon {
    transform: translateY(-3px);
}

.back-to-top.clicked .back-to-top-icon {
    transform: translateY(-5px);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Media queries for back-to-top button */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        left: 20px !important;
        right: unset !important;
        width: 40px;
        height: 40px;
    }
    
    .back-to-top-icon {
        width: 14px;
        height: 14px;
    }
    
    .progress-circle {
        width: 40px;
        height: 40px;
    }
    
    .progress-circle-bg,
    .progress-circle-path {
        cx: 20;
        cy: 20;
        r: 18;
    }
}

/* Smart Search Feature */
.search-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.search-modal.active .search-backdrop {
    opacity: 1;
}

.search-container {
    position: relative;
    width: 600px;
    max-width: 90%;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-top: 80px;
    overflow: hidden;
    z-index: 1;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal.active .search-container {
    transform: translateY(0);
}

.search-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--card-border);
}

.search-icon {
    color: var(--text-secondary);
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-shortcuts {
    display: flex;
    gap: 10px;
    margin-left: 16px;
}

.search-shortcut {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.search-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: 11px;
    font-family: var(--font-sans);
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    margin: 0 2px;
}

.search-body {
    max-height: 400px;
    overflow-y: auto;
}

.search-results {
    padding: 8px 0;
}

.search-result-category {
    padding: 6px 20px 0;
    margin-top: 8px;
}

.search-result-category h4 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: var(--bg-secondary);
}

.search-result-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-url {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background-color: rgba(61, 126, 255, 0.15);
    color: var(--color-blue);
    border-radius: 2px;
    padding: 0 2px;
}

.search-empty,
.search-loading {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-tertiary);
    display: none;
    flex-direction: column;
    align-items: center;
}

.search-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(61, 126, 255, 0.3);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

/* Header search button */
.header-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 8px;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
}

.header-search-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.search-shortcut-indicator {
    position: absolute;
    right: -4px;
    bottom: -4px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media queries for search */
@media (max-width: 768px) {
    .search-container {
        width: 92%;
        margin-top: 60px;
    }
    
    .search-shortcuts {
        display: none;
    }
    
    .search-body {
        max-height: 60vh;
    }
}

/* Lock body when search is open */
body.search-open {
    overflow: hidden;
}

/* Document Editor Section */
.document-section {
    position: relative;
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
}

.document-content {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.document-info {
    flex: 1;
    max-width: 60%;
}

.document-info h2 {
    font-size: 54px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-title);
}

.document-info > p {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 40px;
}

.document-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.pin-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.pin-image {
    transition: all 0.2s;
    will-change: transform;
}

.pin-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

.pin-line {
    height: 27px;
    width: 2px;
    background-color: #FF5F0B;
}

.pin-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #FF5F0B;
    margin-top: -1px;
}

.document-feature p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.document-preview {
    margin-top: 22px;
    margin-bottom: 30px;
}

.editor-preview {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.tap-indicator {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 15px;
}

.tap-arrow {
    width: 10px;
    height: 36px;
    margin-right: 4px;
    color: #666;
}

.tap-text {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

.editor-actions {
    display: flex;
    gap: 4px;
    margin-top: 15px;
    width: fit-content;
    padding: 5px;
    border-radius: 999px;
    background-color: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-btn.active {
    background-color: #333;
}

.action-icon {
    width: 14px;
    height: 14px;
    margin: auto;
}

.action-add.active svg path {
    stroke: white;
}

.sidebar-preview {
    flex: 1;
    max-width: 40%;
    padding-left: 8px;
    padding-top: 222px;
}

.sticky-sidebar {
    position: sticky;
    top: 222px;
    z-index: 10;
    height: 282px;
    width: 256px;
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px 18px 28px;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.sidebar-panel.hidden {
    opacity: 0;
    z-index: 5;
}

.sidebar-panel h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.sidebar-panel p {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #333;
}

.sidebar-backdrop {
    position: absolute;
    bottom: -52.5%;
    left: 50%;
    aspect-ratio: 0.912;
    width: 178.125%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 95, 11, 0.2) 0%, rgba(255, 95, 11, 0.05) 60%, transparent 100%);
    border-radius: 12px;
}

/* Document Section Media Queries */
@media (max-width: 1200px) {
    .document-info h2 {
        font-size: 44px;
    }
    
    .sticky-sidebar {
        height: 240px;
        width: 220px;
    }
    
    .sidebar-panel h3 {
        font-size: 16px;
    }
    
    .sidebar-panel p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .document-section {
        padding: 80px 0;
    }
    
    .document-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .document-info {
        max-width: 100%;
    }
    
    .sidebar-preview {
        max-width: 100%;
        padding-top: 0;
    }
    
    .sticky-sidebar {
        position: relative;
        top: 0;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .document-section {
        padding: 60px 0;
    }
    
    .document-info h2 {
        font-size: 36px;
    }
    
    .document-info > p {
        font-size: 16px;
    }
    
    .pin-line {
        height: 18px;
    }
    
    .pin-dot {
        height: 7px;
        width: 7px;
    }
    
    .pin-image {
        width: 36px;
        height: 36px;
    }
    
    .editor-actions {
        padding: 4px;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
    }
    
    .action-icon {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 576px) {
    .document-section {
        padding: 40px 0;
    }
    
    .document-info h2 {
        font-size: 28px;
    }
    
    .document-feature {
        gap: 10px;
    }
    
    .document-feature p {
        font-size: 14px;
    }
    
    .feature-description {
        font-size: 14px;
    }
    
    .sticky-sidebar {
        height: 200px;
        width: 180px;
    }
}

/* GitHub Integration Section */
.github-integration {
    position: relative;
    padding: 120px 0;
    background-color: #090A0C;
    color: white;
    overflow: hidden;
}

.github-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.github-content h2 {
    max-width: 550px;
    font-size: 80px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-family: var(--font-title);
    color: white;
    margin-bottom: 20px;
}

.github-content p {
    max-width: 580px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #99A2B2;
}

.github-graphic {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.github-graphic-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.github-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 96px;
    margin-top: 160px;
    width: 100%;
}

.github-feature {
    position: relative;
}

.feature-icon-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.feature-icon-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: -8px;
    left: -8px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #478BEB 60%, rgba(71, 139, 235, 0) 100%);
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
}

.feature-icon {
    height: 40px;
    width: auto;
    position: relative;
    z-index: 1;
}

.github-feature h3 {
    margin-top: 20px;
    font-size: 32px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.015em;
    color: white;
    font-family: var(--font-title);
}

.github-feature p {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #99A2B2;
}

/* MetaBrain Section */
.metabrain-section {
    position: relative;
    padding: 247px 0 180px;
    background-color: #f6f6f6;
    overflow: hidden;
}

.metabrain-section h2 {
    margin-left: 256px;
    font-size: 80px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: black;
    font-family: var(--font-title);
}

.metabrain-section p {
    margin-left: 256px;
    margin-top: 20px;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #333;
}

.metabrain-features {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.metabrain-primary-features, 
.metabrain-secondary-features {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.metabrain-feature {
    position: relative;
    border-radius: 30px;
    outline: 1px solid rgba(255, 255, 255, 0.6);
    height: 250px;
    background-color: #000;
    overflow: hidden;
}

.metabrain-feature p {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    padding: 19px 24px;
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.65);
    max-width: 80%;
}

.metabrain-feature strong {
    font-weight: 500;
    color: white;
}

.tasks-feature {
    margin-left: 256px;
    width: 270px;
    border-radius: 0;
    outline: none;
    background-image: url('assets/tasks-notes.png');
    background-size: 534px 508px;
    background-position: right -1px top -1px;
}

.plan-feature {
    width: 250px;
    background-image: url('assets/plan-work.jpg');
    background-size: cover;
    background-position: left center;
}

.notes-feature {
    height: 232px;
    width: 270px;
    border-radius: 0;
    outline: none;
}

.notes-feature p {
    padding-top: 0;
    top: -0.5px;
}

.notes-feature p::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNCAxNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjM3NS4yMTlINS4xM2MtMS44ODQgMC0zLjUwNiAxLjQ0OC0zLjU5NSAzLjMzYTMuNSAzLjUgMCAwIDAgMy40OTYgMy42N2guNDM4djYuMzQ0YS4yMi4yMiAwIDAgMCAuMjE5LjIxOGguNDM3YS4yMi4yMiAwIDAgMCAuMjE5LS4yMTlWMS4wOTVoMi42MjV2MTIuNDY5YS4yMi4yMiAwIDAgMCAuMjE5LjIxOGguNDM3YS4yMi4yMiAwIDAgMC0uMjE5LS4yMiIvPjwvc3ZnPg==');
    background-size: contain;
    margin-bottom: 7px;
}

.notes-feature p::after {
    content: "";
    position: relative;
    display: inline-block;
    height: 18px;
    width: 1px;
    background-color: #D1D4FA;
    opacity: 0.8;
    left: 6px;
    top: 5px;
    margin-top: -4px;
}

.collab-feature {
    width: 515px;
    background-image: url('assets/teammates.jpg');
    background-size: cover;
}

.calendar-feature {
    height: 236px;
    width: 236px;
    border-radius: 0;
    outline: none;
    background-image: url('assets/calendar.png');
    background-size: 244px 244px;
    background-position: -1px -1px;
}

.chat-feature {
    width: 250px;
    background-image: url('assets/collab.jpg');
    background-size: cover;
    background-position: left center;
}

.manage-feature {
    height: 232px;
    width: 422px;
    background-image: url('assets/pm.jpg');
    background-size: cover;
}

/* Media Queries for GitHub Integration */
@media (max-width: 1200px) {
    .github-content h2 {
        font-size: 72px;
    }
    
    .github-features {
        gap: 16px 76px;
    }
    
    .github-feature h3 {
        font-size: 28px;
    }
}

@media (max-width: 992px) {
    .github-integration {
        padding: 80px 0;
    }
    
    .github-content h2 {
        font-size: 56px;
    }
    
    .github-features {
        grid-template-columns: 1fr 1fr;
        gap: 48px 64px;
        margin-top: 100px;
    }
    
    .feature-icon {
        height: 36px;
    }
    
    .github-feature h3 {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .github-integration {
        padding: 60px 0;
    }
    
    .github-content h2 {
        font-size: 44px;
        max-width: 400px;
    }
    
    .github-content p {
        font-size: 16px;
    }
    
    .github-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .feature-icon {
        height: 32px;
    }
}

/* Media Queries for MetaBrain Section */
@media (max-width: 1200px) {
    .metabrain-section h2 {
        font-size: 64px;
    }
    
    .tasks-feature, 
    .metabrain-section h2, 
    .metabrain-section p {
        margin-left: 64px;
    }
    
    .metabrain-feature {
        height: 230px;
    }
}

@media (max-width: 992px) {
    .metabrain-section {
        padding: 120px 0 100px;
    }
    
    .tasks-feature, 
    .metabrain-section h2, 
    .metabrain-section p {
        margin-left: 56px;
    }
    
    .metabrain-section h2 {
        font-size: 54px;
    }
    
    .metabrain-feature {
        height: 218px;
    }
    
    .metabrain-feature p {
        padding: 16px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .metabrain-section {
        padding: 80px 0;
    }
    
    .tasks-feature, 
    .metabrain-section h2, 
    .metabrain-section p {
        margin-left: 0;
    }
    
    .metabrain-section h2 {
        font-size: 36px;
        text-align: center;
    }
    
    .metabrain-section p {
        text-align: center;
        margin: 12px auto 0;
    }
    
    .metabrain-primary-features, 
    .metabrain-secondary-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .metabrain-feature {
        aspect-ratio: 1.45;
        height: auto;
        width: 100%;
        border-radius: 20px;
    }
}

@media (max-width: 576px) {
    .metabrain-primary-features, 
    .metabrain-secondary-features {
        grid-template-columns: 1fr;
    }
    
    .metabrain-feature {
        aspect-ratio: 1.65;
    }
}}}}/* Movie Rewind Animation for Back-to-Top */
.back-to-top.movie-rewind {
    animation: movieRewind 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.back-to-top.movie-rewind .back-to-top-icon {
    animation: iconRewind 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.back-to-top.movie-rewind .progress-circle-path {
    animation: circleRewind 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Cinematic movie-style rewind animations */
@keyframes movieRewind {
    0% { 
        transform: scale(1) rotate(0deg);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        filter: hue-rotate(0deg) brightness(1);
    }
    25% { 
        transform: scale(1.4) rotate(-180deg);
        box-shadow: 0 12px 40px rgba(255, 107, 53, 0.7);
        filter: hue-rotate(90deg) brightness(1.3);
    }
    50% { 
        transform: scale(1.8) rotate(-360deg);
        box-shadow: 0 20px 60px rgba(255, 107, 53, 1.0);
        filter: hue-rotate(180deg) brightness(1.5);
    }
    75% { 
        transform: scale(1.4) rotate(-540deg);
        box-shadow: 0 12px 40px rgba(255, 107, 53, 0.7);
        filter: hue-rotate(270deg) brightness(1.3);
    }
    100% { 
        transform: scale(1.1) rotate(-720deg);
        box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
        filter: hue-rotate(360deg) brightness(1.1);
    }
}

@keyframes iconRewind {
    0% { 
        transform: translateY(0) scale(1) rotateX(0deg);
        opacity: 1;
    }
    30% { 
        transform: translateY(-20px) scale(1.5) rotateX(360deg);
        opacity: 0.6;
    }
    60% { 
        transform: translateY(-30px) scale(0.8) rotateX(720deg);
        opacity: 0.4;
    }
    100% { 
        transform: translateY(-25px) scale(1.3) rotateX(1080deg);
        opacity: 1;
    }
}

@keyframes circleRewind {
    0% { 
        stroke-dashoffset: 0;
        stroke: var(--text-secondary);
        stroke-width: 2;
    }
    25% { 
        stroke-dashoffset: -62.8;
        stroke: #ff6b35;
        stroke-width: 6;
    }
    50% { 
        stroke-dashoffset: -125.6;
        stroke: #ff3b15;
        stroke-width: 8;
    }
    75% { 
        stroke-dashoffset: -188.4;
        stroke: #ff6b35;
        stroke-width: 5;
    }
    100% { 
        stroke-dashoffset: -251.2;
        stroke: #ff6b35;
        stroke-width: 3;
    }
}
/* Mobile viewport full-height fixes */
html, body { min-height: 100dvh; }
@supports not (height: 100dvh) { html, body { min-height: 100vh; } }

/* Ensure key sections fill the viewport on mobile */
.hero,
.mobile-showcase-section,
.work-together.enhanced-section,
.booking-section,
.delivery-process,
.testimonials-section,
.pricing-section { min-height: 100dvh; }

@media (max-width: 767px) {
  body { padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
/* Mobile viewport full-height - WebKit fallback */
@media (max-width: 991px) {
  html { height: -webkit-fill-available; }
  body { min-height: -webkit-fill-available; }
}
/* Prefer small-viewport units where supported */
@supports (height: 100svh) {
  .hero,
  .mobile-showcase-section,
  .work-together.enhanced-section,
  .booking-section,
  .delivery-process,
  .testimonials-section,
  .pricing-section { min-height: 100svh; }
}
/* Mobile header: make sticky and adjust height */
@media (max-width: 767px) {
  .header { 
    position: sticky !important; 
    top: 0; left: 0; right: 0; 
    height: 56px; 
    background: rgba(23,25,35,0.92); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
  }
  .header-container { height: 56px; }
  /* Ensure first section is not hidden under header if any absolute elements exist */
  .hero { scroll-margin-top: 56px; }
}
/* Mobile header layout fix: full-width, non-overlapping */
@media (max-width: 767px) {
  body { padding-top: calc(56px + env(safe-area-inset-top)); }
  .header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: rgba(23,25,35,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 3000;
  }
  .header-container { height: 56px; padding: 0 12px; }
  /* Keep logo compact to avoid overflow */
  .header .logo img { max-height: 40px; width: auto; }
  /* Hide desktop nav on mobile; rely on mobile menu */
  .main-nav { display: none !important; }
  /* Ensure the mobile toggle is visible */
  .mobile-menu-toggle { display: inline-flex !important; }
  /* Mobile menu above content and below header */
  .mobile-menu { z-index: 2900; padding-top: 80px; }
}
/* Smart mobile header behavior */
@media (max-width: 767px) {
  :root { --header-h: 56px; }
  body { padding-top: calc(var(--header-h,56px) + env(safe-area-inset-top)); }
  .header { 
    will-change: transform, height; 
    transition: transform .24s ease, height .18s ease; 
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .header.header-hidden { transform: translateY(calc(-1 * var(--header-h,56px))); }
  .header.header-compact { height: 48px; }
  .header.header-compact .header-container { height: 48px; }
  .header.header-compact .logo img { max-height: 34px; }
  .header-container { gap: 10px; flex-wrap: nowrap; overflow: hidden; }
  .consultation-button { height: 30px; padding: 0 10px; font-size: 12px; }
  .language-switcher, .notification-bell { display: none !important; }
}
/* Hide 3D container on mobile */
@media (max-width: 991px) {
  .hero-3d-container { display: none !important; width: 0 !important; height: 0 !important; }
  .hero-container { padding-right: 0 !important; }
}
/* Remove search button globally */
.search-button, #search-button { display: none !important; }
/* Fix mobile menu icon visibility and theme contrast */
.mobile-menu-toggle span { 
  display: block !important; 
  width: 24px !important; 
  height: 2px !important; 
  margin: 4px 0 !important; 
  background-color: var(--text-primary, #111) !important; 
  border-radius: 2px; 
}
/* Light/Dark explicit fallbacks */
:root[data-theme='light'] .mobile-menu-toggle span,
.light .mobile-menu-toggle span,
body.light .mobile-menu-toggle span { background-color: #111 !important; }
:root[data-theme='dark'] .mobile-menu-toggle span,
.dark .mobile-menu-toggle span,
body.dark .mobile-menu-toggle span { background-color: #fff !important; }
/* Modern mobile menu toggle (pill style, 3 bars, theme-aware) */
.mobile-menu-toggle {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 36px !important;
  border-radius: 10px;
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Dark default */
.mobile-menu-toggle { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
/* Light theme override */
.light-theme .mobile-menu-toggle { background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }

.mobile-menu-toggle span {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: 22px !important;
  height: 2.5px !important;
  margin: 0 !important;
  border-radius: 2px;
  background-color: var(--text-primary, #111) !important;
  transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.mobile-menu-toggle span:nth-child(1) { top: 11px; }
.mobile-menu-toggle span:nth-child(2) { top: 17px; }
.mobile-menu-toggle span:nth-child(3) { top: 23px; }
/* Light/Dark bar color fallbacks */
.light-theme .mobile-menu-toggle span { background-color: #111 !important; }
:not(.light-theme) .mobile-menu-toggle span { background-color: #fff !important; }

/* Hover state */
.mobile-menu-toggle:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.28); }
.light-theme .mobile-menu-toggle:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
/* Ensure mobile-menu overlays header and is visible when active */
.mobile-menu { z-index: 4000 !important; opacity: 0; visibility: hidden; }
.mobile-menu.active { opacity: 1; visibility: visible; transform: translateX(0) !important; }
body.menu-open { overflow: hidden; }
/* Force mobile menu to top of all layers and lower header when open */
.mobile-menu { position: fixed !important; inset: 0 !important; z-index: 99999 !important; background: rgba(11,12,15,0.96) !important; }
.mobile-menu.active { opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; }
body.menu-open header.header { z-index: 1000 !important; }
/* Hide notification container on mobile and only allow overlay interactions when active */
@media (max-width: 991px) {
  .notification-container { display: none !important; }
}
.mobile-menu { pointer-events: none; }
.mobile-menu.active { pointer-events: auto; }
/* Hide cursor toggle on mobile */
@media (max-width: 991px) {
  .cursor-toggle { display: none !important; }
}
/* Mobile fix: hero container should fit full width and not shift right */
@media (max-width: 767px) {
  .hero { padding-left: 0 !important; padding-right: 0 !important; }
  .container.hero-container { max-width: none !important; margin: 0 auto !important; padding-left: 12px !important; padding-right: 12px !important; }
  /* tighten inner spacing for better balance */
  .hero-title, .hero-subtitle, .hero-cta { margin-left: 0 !important; margin-right: 0 !important; }
}
/* Contact top card: responsive mobile layout and top-most overlay */
#contact-top-card { z-index: 100000 !important; }
@media (max-width: 767px) {
  #contact-top-card { align-items: flex-start !important; padding-top: calc(var(--header-h,56px) + 12px) !important; }
  #contact-top-card > div {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 12px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  #contact-top-card input,
  #contact-top-card button { width: 100% !important; }
}
/* Mobile: center the contact-top-card overlay */
@media (max-width: 767px) {
  #contact-top-card { justify-content: center !important; align-items: center !important; padding-top: 0 !important; }
}
/* Hide mobile menu toggle on desktop */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none !important; }
}
/* Mobile LTR: shift hero bottom CTA to the left */
@media (max-width: 767px) {
  html:not([lang="he"]) .hero-cta.hero-cta-bottom,
  body:not([dir="rtl"]) .hero-cta.hero-cta-bottom {
    align-self: flex-start !important;
    margin-left: 12px !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}
/* Mobile LTR: force all bottom CTAs to align left like hero */
@media (max-width: 767px) {
  html:not([lang="he"]) .hero-cta.hero-cta-bottom,
  body:not([dir="rtl"]) .hero-cta.hero-cta-bottom,
  html:not([lang="he"]) .case-study-cta .hero-cta.hero-cta-bottom,
  body:not([dir="rtl"]) .case-study-cta .hero-cta.hero-cta-bottom,
  html:not([lang="he"]) .pricing-cta .hero-cta.hero-cta-bottom,
  body:not([dir="rtl"]) .pricing-cta .hero-cta.hero-cta-bottom {
    display: flex !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
    text-align: left !important;
  }
  html:not([lang="he"]) .hero-cta.hero-cta-bottom .btn,
  body:not([dir="rtl"]) .hero-cta.hero-cta-bottom .btn { margin-left: 12px !important; margin-right: auto !important; }
}
/* Mobile: make hero fit the window and start closer to the top */
@media (max-width: 767px) {
  .hero { 
    min-height: calc(100svh - var(--header-h, 56px)) !important;
    padding-top: 12px !important;
  }
  .container.hero-container > .logo-container { margin-top: 0 !important; }
}
/* Mobile: push hero content to the very top and remove centering gaps */
@media (max-width: 767px) {
  .hero {
    min-height: calc(100svh - var(--header-h, 56px)) !important;
    padding-top: 4px !important;
    padding-bottom: 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .container.hero-container { margin-top: 0 !important; padding-top: 0 !important; }
  .hero-title-container, .hero-subtitle { margin-top: 0 !important; }
}
/* Mobile: set top padding to 50px for hero */
@media (max-width: 767px) {
  .hero { padding-top: 50px !important; }
}

/* Additional Social Media Icons */
.facebook-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.instagram-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.stackoverflow-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.725 0l-1.72 1.277 6.39 8.588 1.716-1.277L15.725 0zm-3.94 3.418l-1.369 1.644 8.225 6.85 1.369-1.644-8.225-6.85zm-3.15 4.465l-.905 1.94 9.702 4.517.904-1.94-9.701-4.517zm-1.85 4.86l-.44 2.093 10.473 2.201.44-2.092-10.473-2.203zM1.89 15.47V24h19.19v-8.53h-2.133v6.397H4.021v-6.396H1.89zm4.265 2.133v2.13h10.66v-2.13H6.154z'/%3E%3C/svg%3E");
}