* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; font-family: 'DM Sans', sans-serif; overflow-x: hidden; }

    .app-wrapper { background-color: #fafafa; }
    .dot-grid { background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px); background-size: 28px 28px; }
  
    /* Animations */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-60px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes scalePop {
      0% { opacity: 0; transform: scale(0.85); }
      70% { transform: scale(1.03); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-14px) rotate(2deg); }
    }
    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(66,133,244,0.25); }
      50% { box-shadow: 0 0 0 16px rgba(66,133,244,0); }
    }
    @keyframes drawLine {
      from { stroke-dashoffset: 600; }
      to { stroke-dashoffset: 0; }
    }
    @keyframes markerDraw {
      to { background-size: 100% 40%; }
    }
    @keyframes btnShine {
      0% { left: -60%; }
      30% { left: 120%; }
      100% { left: 120%; }
    }
    @keyframes growWidth {
      from { width: 0%; }
      to { width: var(--target-w); }
    }

    .anim-fade-up { opacity: 0; animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .anim-delay-1 { animation-delay: 0.1s; }
    .anim-delay-2 { animation-delay: 0.25s; }
    .anim-delay-3 { animation-delay: 0.4s; }
    .anim-delay-4 { animation-delay: 0.55s; }
    .anim-delay-5 { animation-delay: 0.7s; }
    .anim-delay-6 { animation-delay: 0.85s; }
    .anim-delay-7 { animation-delay: 1.0s; }
    .anim-delay-8 { animation-delay: 1.15s; }

    .anim-slide-left { opacity: 0; animation: slideInLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .anim-scale-pop { opacity: 0; animation: scalePop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

    .float-slow { animation: floatSlow 6s ease-in-out infinite; }
    .float-slow-alt { animation: floatSlow 7s ease-in-out infinite 1s; }
    .float-slow-alt2 { animation: floatSlow 8s ease-in-out infinite 2s; }

    .pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }
    .draw-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawLine 2s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.5s; }
    .gradient-text { background: linear-gradient(135deg, #4285F4, #34A853, #FBBC05, #EA4335); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .marker-underline { background-image: linear-gradient(120deg, rgba(251,188,5,0.35) 0%, rgba(251,188,5,0.35) 100%); background-repeat: no-repeat; background-size: 0% 40%; background-position: 0 88%; animation: markerDraw 1s ease forwards 1.2s; }

    .service-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border: 1.5px solid #e5e7eb; background: white; border-radius: 1rem; padding: 1.75rem; }
    .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px -12px rgba(0,0,0,0.12); border-color: transparent; }
    .service-card:hover .card-icon-wrap { transform: scale(1.1) rotate(-3deg); }
    .card-icon-wrap { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

    .sticky-note { transform: rotate(-2deg); transition: transform 0.3s ease; }
    .sticky-note:hover { transform: rotate(0deg) scale(1.04); }

    .nav-link { position: relative; transition: color 0.3s ease; }
    .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #4285F4; transition: width 0.3s ease; }
    .nav-link:hover::after { width: 100%; }

    .btn-shine { position: relative; overflow: hidden; }
    .btn-shine::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-20deg); animation: btnShine 3s ease-in-out infinite 2s; }

    .grow-bar { animation: growWidth 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .sketch-border { border: 2px solid #222; border-radius: 12px 4px 14px 6px; }
    .serif-heading { font-family: 'Instrument Serif', serif; }

    .logo-color { color: #202124; }
    .text-primary { color: #202124; }
    .text-secondary { color: #5f6368; }
    .border-light { border-color: #e8eaed; }
    .surface-white { background: white; }
    .bg-light { background: #fafafa; }
    .bg-gradient { background: linear-gradient(180deg, #fafafa 0%, #f0f4ff 100%); }
    .app-wrapper { position: relative; overflow: hidden; background: linear-gradient(180deg,#f8fafc 0%,#eef4ff 100%); }
    .app-wrapper::before { content:""; position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); opacity:.4; z-index:0; background:#4285F4; top:-100px; left:-100px; animation:floatBlob 12s ease-in-out infinite; }
    .app-wrapper::after { content:""; position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); opacity:.4; z-index:0; background:#34A853; bottom:-120px; right:-120px; animation:floatBlob2 14s ease-in-out infinite; }
    @keyframes floatBlob{0%{transform:translate(0,0)}50%{transform:translate(120px,80px)}100%{transform:translate(0,0)}}
    @keyframes floatBlob2{0%{transform:translate(0,0)}50%{transform:translate(-100px,-60px)}100%{transform:translate(0,0)}}