/* Base styles */
    * {
      font-family: 'Space Grotesk', system-ui, sans-serif;
    }

    body {
      background-color: #0D0D0D;
      color: #FFF8F0;
      overflow-x: hidden;
    }

    /* Display font for headings */
    .font-display {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    }

    /* Grain texture overlay */
    .grain-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    }

    /* Hand-drawn squiggle decoration */
    .squiggle {
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10C10 10 10 2 20 2C30 2 30 18 40 18C50 18 50 2 60 2C70 2 70 18 80 18C90 18 90 10 100 10' stroke='%23BFFF00' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: repeat-x;
      background-position: center;
      height: 20px;
    }

    /* Star decoration */
    .star-deco {
      display: inline-block;
      animation: twinkle 2s ease-in-out infinite;
    }

    @keyframes twinkle {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.9); }
    }

    /* Rotating element */
    .rotate-slow {
      animation: rotateSlow 20s linear infinite;
    }

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

    /* Floating animation */
    .float {
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

    /* Marquee animation */
    .marquee {
      animation: marquee 30s linear infinite;
    }

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

    /* Diagonal section */
    .diagonal-top {
      clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    }

    .diagonal-bottom {
      clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    }

    /* Work card hover effects */
    .work-card {
      transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .work-card:hover {
      transform: translateY(-12px) rotate(-1deg);
    }

    .work-card:hover .work-card-image {
      transform: scale(1.08);
    }

    .work-card-image {
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .work-card:hover .work-card-overlay {
      opacity: 1;
    }

    .work-card-overlay {
      transition: opacity 0.4s ease;
    }

    /* Service card hover */
    .service-card {
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      border: 2px solid transparent;
    }

    .service-card:hover {
      border-color: #BFFF00;
      transform: translateY(-8px);
    }

    .service-card:hover .service-icon {
      transform: rotate(-12deg) scale(1.1);
    }

    .service-icon {
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* Link hover effect */
    .link-creative {
      position: relative;
      display: inline-block;
    }

    .link-creative::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, #FF6B6B, #8B5CF6, #BFFF00);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .link-creative:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    /* Button hover */
    .btn-creative {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .btn-creative::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s ease;
    }

    .btn-creative:hover::before {
      left: 100%;
    }

    /* Cursor follower */
    .cursor-glow {
      pointer-events: none;
      position: fixed;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
      transform: translate(-50%, -50%);
      z-index: 0;
      transition: opacity 0.3s ease;
    }

    /* Text outline */
    .text-outline {
      -webkit-text-stroke: 2px #FFF8F0;
      color: transparent;
    }

    /* Scroll reveal */
    [data-scroll-reveal] {
      opacity: 0;
      transform: translateY(60px);
      transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }

    [data-scroll-reveal].revealed {
      opacity: 1;
      transform: translateY(0);
    }

    [data-scroll-reveal="fade-left"] {
      transform: translateX(-80px);
    }

    [data-scroll-reveal="fade-left"].revealed {
      transform: translateX(0);
    }

    [data-scroll-reveal="fade-right"] {
      transform: translateX(80px);
    }

    [data-scroll-reveal="fade-right"].revealed {
      transform: translateX(0);
    }

    [data-scroll-reveal="scale"] {
      transform: scale(0.8);
    }

    [data-scroll-reveal="scale"].revealed {
      transform: scale(1);
    }

    /* Custom selection */
    ::selection {
      background: #8B5CF6;
      color: #FFF8F0;
    }

    /* Smooth scroll */
    html {
      scroll-behavior: smooth;
    }

    /* Form styling */
    .form-input {
      background: transparent;
      border: 2px solid #3A3A3A;
      transition: all 0.3s ease;
    }

    .form-input:focus {
      border-color: #BFFF00;
      box-shadow: 0 0 0 4px rgba(191, 255, 0, 0.1);
      outline: none;
    }

    /* Stagger delays */
    [data-delay="1"] { transition-delay: 0.1s; }
    [data-delay="2"] { transition-delay: 0.2s; }
    [data-delay="3"] { transition-delay: 0.3s; }
    [data-delay="4"] { transition-delay: 0.4s; }
    [data-delay="5"] { transition-delay: 0.5s; }
    [data-delay="6"] { transition-delay: 0.6s; }