:root{
    --primary:#1f3b6d;
    --secondary:#4fa3d1;
    --dark:#0f2347;
    --bg:#f5f7fb;
    --card:#ffffff;
    --accent:#f39c12;
    --success:#27ae60;
    --shadow-sm:0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:0 8px 24px rgba(0,0,0,0.12);
    --shadow-lg:0 16px 48px rgba(0,0,0,0.18);
    --shadow-xl:0 24px 64px rgba(0,0,0,0.25);
    --transition-fast:0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal:0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  * {
    box-sizing: border-box;
    margin:0;
    padding:0;
  }
  
  html {
    scroll-behavior: smooth;
    font-size:16px;
  }
  
  body{
    margin:0;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    background:var(--bg);
    color:#222;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  /* ==================== HEADER & NAVIGATION ==================== */
  header{
    background:linear-gradient(135deg,var(--primary) 0%,#2a4d7f 50%,#14264a 100%);
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  
  /* Animated background elements */
  header::before {
    content:'';
    position:absolute;
    top:-50%;
    right:-10%;
    width:700px;
    height:700px;
    background:radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius:50%;
    animation:float 25s infinite ease-in-out;
  }
  
  header::after {
    content:'';
    position:absolute;
    bottom:-30%;
    left:-5%;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(79,163,209,0.15) 0%, transparent 70%);
    border-radius:50%;
    animation:float 20s infinite ease-in-out reverse;
  }
  
  @keyframes float {
    0%, 100% { 
      transform: translate(0, 0) rotate(0deg) scale(1); 
    }
    33% { 
      transform: translate(-30px, 40px) rotate(120deg) scale(1.05); 
    }
    66% { 
      transform: translate(40px, -30px) rotate(240deg) scale(0.95); 
    }
  }
  
  .nav{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    position:relative;
    z-index:100;
  }
  
  .nav .logo {
    font-size:26px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    transition:transform var(--transition-normal);
  }
  
  .nav .logo:hover {
    transform:scale(1.05);
  }
  
  .nav .logo svg {
    width:36px;
    height:36px;
    stroke:#fff;
    fill:none;
    stroke-width:2;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    animation:rotate 20s linear infinite;
  }
  
  @keyframes rotate {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
  }
  
  .nav-links {
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  .nav a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    padding:10px 20px;
    border-radius:12px;
    transition:all var(--transition-normal);
    position:relative;
    overflow:hidden;
  }
  
  .nav a::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 var(--transition-slow);
  }
  
  .nav a:hover::before {
    left:100%;
  }
  
  .nav a:hover {
    background:rgba(255,255,255,0.15);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
  }
  
  .nav a:active {
    transform:translateY(0);
  }
  
  /* ==================== HERO SECTION ==================== */
  .hero{
    max-width:1200px;
    margin:auto;
    padding:100px 20px 80px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:80px;
    align-items:center;
    position:relative;
    z-index:5;
  }
  
  .hero-content {
    animation:slideInLeft 1s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  @keyframes slideInLeft {
    from {
      opacity:0;
      transform:translateX(-80px);
    }
    to {
      opacity:1;
      transform:translateX(0);
    }
  }
  
  .hero h1{
    font-size:52px;
    margin-bottom:24px;
    line-height:1.15;
    background:linear-gradient(135deg, #fff 0%, #a8d5e2 50%, #4fa3d1 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    font-weight:800;
    letter-spacing:-0.5px;
    animation:gradient 8s ease infinite;
    background-size:200% 200%;
  }
  
  @keyframes gradient {
    0%, 100% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
  }
  
  .hero p{
    font-size:19px;
    margin-bottom:35px;
    color:rgba(255,255,255,0.92);
    line-height:1.7;
    max-width:90%;
    text-shadow:0 1px 2px rgba(0,0,0,0.1);
  }
  
  .hero-img{
    background:#fff;
    border-radius:30px;
    padding:30px;
    box-shadow:0 25px 70px rgba(0,0,0,.25);
    position:relative;
    animation:slideInRight 1s cubic-bezier(0.22, 1, 0.36, 1);
    transition:transform var(--transition-normal);
  }
  
  .hero-img:hover {
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 30px 80px rgba(0,0,0,.3);
  }
  
  @keyframes slideInRight {
    from {
      opacity:0;
      transform:translateX(80px);
    }
    to {
      opacity:1;
      transform:translateX(0);
    }
  }
  
  .hero-img::before {
    content:'';
    position:absolute;
    top:-15px;
    right:-15px;
    width:120px;
    height:120px;
    background:linear-gradient(135deg, var(--accent), #e67e22);
    border-radius:50%;
    opacity:0.25;
    z-index:-1;
    animation:pulse-glow 3s ease-in-out infinite;
  }
  
  @keyframes pulse-glow {
    0%, 100% { transform:scale(1); opacity:0.25; }
    50% { transform:scale(1.2); opacity:0.35; }
  }
  
  .hero-img::after {
    content:'';
    position:absolute;
    bottom:-12px;
    left:-12px;
    width:100px;
    height:100px;
    background:linear-gradient(135deg, var(--secondary), var(--primary));
    border-radius:50%;
    opacity:0.2;
    z-index:-1;
    animation:pulse-glow 3s ease-in-out infinite 1.5s;
  }
  
  .hero-img img{
    width:100%;
    border-radius:22px;
    display:block;
    transition:transform var(--transition-normal);
  }
  
  .hero-img:hover img {
    transform:scale(1.03);
  }
  
  /* ==================== BUTTONS ==================== */
  .btn{
    display:inline-block;
    padding:16px 32px;
    border-radius:50px;
    font-weight:700;
    text-decoration:none;
    transition:all var(--transition-normal);
    cursor:pointer;
    border:none;
    font-size:16px;
    position:relative;
    overflow:hidden;
    z-index:1;
  }
  
  .btn::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,0.3);
    transition:width 0.6s, height 0.6s, top 0.6s, left 0.6s;
    transform:translate(-50%, -50%);
    z-index:-1;
  }
  
  .btn:hover::before {
    width:300px;
    height:300px;
  }
  
  .btn.primary{
    background:#fff;
    color:var(--primary);
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
  }
  
  .btn.primary:hover {
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 12px 32px rgba(0,0,0,0.35);
  }
  
  .btn.primary:active {
    transform:translateY(-2px) scale(1.03);
  }
  
  .btn.secondary{
    border:2px solid #fff;
    color:#fff;
    margin-left:12px;
    background:transparent;
    backdrop-filter:blur(10px);
  }
  
  .btn.secondary:hover {
    background:#fff;
    color:var(--primary);
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 8px 24px rgba(255,255,255,0.3);
  }
  
  /* ==================== STATS SECTION ==================== */
  .stats {
    background:linear-gradient(to bottom, #fff 0%, #fafcfe 100%);
    padding:70px 20px;
    margin-top:-50px;
    position:relative;
    z-index:10;
    border-radius:40px 40px 0 0;
    box-shadow:0 -10px 40px rgba(0,0,0,0.1);
  }
  
  .stats-container {
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:50px;
    text-align:center;
  }
  
  .stat-item {
    animation:fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    position:relative;
    padding:20px;
    transition:transform var(--transition-normal);
  }
  
  .stat-item:hover {
    transform:translateY(-8px);
  }
  
  .stat-item::before {
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:60px;
    height:4px;
    background:linear-gradient(to right, var(--secondary), var(--primary));
    border-radius:4px;
    opacity:0;
    transition:opacity var(--transition-normal), width var(--transition-normal);
  }
  
  .stat-item:hover::before {
    opacity:1;
    width:80px;
  }
  
  .stat-item:nth-child(1) { animation-delay:0.1s; }
  .stat-item:nth-child(2) { animation-delay:0.2s; }
  .stat-item:nth-child(3) { animation-delay:0.3s; }
  .stat-item:nth-child(4) { animation-delay:0.4s; }
  
  @keyframes fadeInUp {
    from {
      opacity:0;
      transform:translateY(50px) scale(0.9);
    }
    to {
      opacity:1;
      transform:translateY(0) scale(1);
    }
  }
  
  .stat-number {
    font-size:48px;
    font-weight:800;
    background:linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    display:block;
    margin-bottom:8px;
    line-height:1;
  }
  
  .stat-label {
    font-size:13px;
    color:#666;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-weight:600;
  }
  
  /* ==================== SERVICES SECTION ==================== */
  section{
    max-width:1200px;
    margin:auto;
    padding:80px 20px;
  }
  
  section h2 {
    text-align:center;
    font-size:42px;
    margin-bottom:60px;
    color:var(--primary);
    font-weight:800;
    position:relative;
    padding-bottom:20px;
  }
  
  section h2::after {
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:80px;
    height:5px;
    background:linear-gradient(to right, var(--secondary), var(--primary));
    border-radius:4px;
  }
  
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;
  }
  
  .card{
    background:var(--card);
    padding:45px 35px;
    border-radius:24px;
    box-shadow:var(--shadow-md);
    text-align:center;
    transition:all var(--transition-normal);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(0,0,0,0.04);
  }
  
  .card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(to right, var(--secondary), var(--primary));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--transition-slow);
  }
  
  .card::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(135deg, var(--secondary), var(--primary));
    opacity:0;
    transition:opacity var(--transition-slow);
    z-index:-1;
  }
  
  .card:hover {
    transform:translateY(-12px) scale(1.02);
    box-shadow:var(--shadow-xl);
    border-color:transparent;
  }
  
  .card:hover::before {
    transform:scaleX(1);
  }
  
  .card:hover::after {
    opacity:0.03;
  }
  
  .card:hover h3,
  .card:hover p {
    color:var(--primary);
  }
  
  .icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    background:linear-gradient(135deg, var(--secondary), var(--primary));
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all var(--transition-normal);
    box-shadow:0 8px 20px rgba(79,163,209,0.3);
    position:relative;
  }
  
  .icon::before {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    background:linear-gradient(135deg, var(--secondary), var(--primary));
    opacity:0.3;
    animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  
  @keyframes ping {
    0% { transform:scale(1); opacity:0.3; }
    50%, 100% { transform:scale(1.5); opacity:0; }
  }
  
  .card:hover .icon {
    transform:scale(1.15) rotate(12deg);
    box-shadow:0 12px 30px rgba(79,163,209,0.5);
  }
  
  .icon svg{
    width:40px;
    height:40px;
    stroke:#fff;
    fill:none;
    stroke-width:2.5;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  }
  
  .card h3{
    margin-top:0;
    margin-bottom:18px;
    color:var(--primary);
    font-size:23px;
    font-weight:700;
    transition:color var(--transition-normal);
  }
  
  .card p {
    color:#666;
    font-size:15px;
    line-height:1.7;
    transition:color var(--transition-normal);
  }
  
  /* ==================== HOW IT WORKS SECTION ==================== */
  .how{
    background:linear-gradient(135deg, #eef3fa 0%, #e3ecf5 50%, #d8e5f0 100%);
    border-radius:40px;
    padding:70px 50px;
    position:relative;
    overflow:hidden;
  }
  
  .how::before {
    content:'';
    position:absolute;
    top:-50%;
    right:-10%;
    width:400px;
    height:400px;
    background:radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
    border-radius:50%;
  }
  
  .how h2 {
    margin-bottom:70px;
    position:relative;
    z-index:1;
  }
  
  .steps-container {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:50px;
    position:relative;
    z-index:1;
  }
  
  .step{
    display:flex;
    gap:25px;
    align-items:flex-start;
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:var(--shadow-md);
    transition:all var(--transition-normal);
    position:relative;
    border:2px solid transparent;
  }
  
  .step::before {
    content:'';
    position:absolute;
    inset:0;
    border-radius:20px;
    padding:2px;
    background:linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:opacity var(--transition-normal);
  }
  
  .step:hover {
    transform:translateY(-8px) scale(1.03);
    box-shadow:var(--shadow-lg);
  }
  
  .step:hover::before {
    opacity:1;
  }
  
  .step-number {
    flex-shrink:0;
    width:60px;
    height:60px;
    background:linear-gradient(135deg, var(--secondary), var(--primary));
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:800;
    box-shadow:0 6px 20px rgba(79,163,209,0.4);
    transition:transform var(--transition-normal);
  }
  
  .step:hover .step-number {
    transform:scale(1.2) rotate(360deg);
  }
  
  .step-content {
    flex-grow:1;
  }
  
  .step-content strong {
    display:block;
    color:var(--primary);
    font-size:20px;
    margin-bottom:10px;
    font-weight:700;
  }
  
  .step-content p {
    margin:0;
    color:#666;
    font-size:15px;
    line-height:1.7;
  }
  
  /* ==================== TRUST SECTION ==================== */
  .trust{
    background:linear-gradient(to right, #fff 0%, #fafcfe 100%);
    border-left:6px solid var(--secondary);
    padding:50px;
    border-radius:24px;
    box-shadow:var(--shadow-lg);
    position:relative;
    overflow:hidden;
  }
  
  .trust::before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:200px;
    height:200px;
    background:radial-gradient(circle, rgba(79,163,209,0.08) 0%, transparent 70%);
    border-radius:50%;
  }
  
  .trust h2 {
    text-align:left;
    margin-top:0;
    margin-bottom:25px;
    position:relative;
    z-index:1;
  }
  
  .trust h2::after {
    left:0;
    transform:none;
  }
  
  .trust p {
    font-size:17px;
    color:#555;
    line-height:1.9;
    position:relative;
    z-index:1;
  }
  
  /* ==================== FEATURES LIST ==================== */
  .features-list {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:25px;
    margin-top:40px;
  }
  
  .feature-item {
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px;
    background:var(--bg);
    border-radius:16px;
    transition:all var(--transition-normal);
    border:2px solid transparent;
  }
  
  .feature-item:hover {
    background:#fff;
    border-color:var(--secondary);
    transform:translateX(8px);
    box-shadow:var(--shadow-md);
  }
  
  .feature-item svg {
    width:28px;
    height:28px;
    stroke:var(--secondary);
    stroke-width:2.5;
    flex-shrink:0;
    transition:transform var(--transition-normal);
  }
  
  .feature-item:hover svg {
    transform:scale(1.2) rotate(5deg);
  }
  
  .feature-item span {
    font-weight:600;
    color:var(--primary);
    font-size:15px;
  }
  
  /* ==================== CTA SECTION ==================== */
  .cta{
    background:linear-gradient(135deg, var(--primary) 0%, #2a4d7f 50%, #14264a 100%);
    color:#fff;
    text-align:center;
    border-radius:40px;
    margin:50px 20px;
    padding:80px 50px;
    position:relative;
    overflow:hidden;
    margin-left: 150px; 
  }
  
  .cta::before {
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%);
    animation:pulse-rotate 20s infinite linear;
  }
  
  @keyframes pulse-rotate {
    0% { transform:rotate(0deg) scale(1); }
    50% { transform:rotate(180deg) scale(1.1); }
    100% { transform:rotate(360deg) scale(1); }
  }
  
  .cta h2 {
    color:#fff;
    margin-bottom:20px;
    position:relative;
    z-index:1;
    font-size:38px;
  }
  
  .cta h2::after {
    background:#fff;
  }
  
  .cta p {
    font-size:19px;
    margin-bottom:35px;
    opacity:0.95;
    position:relative;
    z-index:1;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .cta .btn {
    position:relative;
    z-index:1;
  }
  
  /* ==================== FOOTER ==================== */
  footer{
    background:linear-gradient(to bottom, var(--dark) 0%, #0a1628 100%);
    color:#fff;
    padding:60px 20px 30px;
    position:relative;
    overflow:hidden;
  }
  
  footer::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(to right, transparent, rgba(79,163,209,0.5), transparent);
  }
  
  .footer-content {
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:50px;
    margin-bottom:40px;
  }
  
  .footer-section h3 {
    font-size:19px;
    margin-bottom:20px;
    color:var(--secondary);
    font-weight:700;
    position:relative;
    padding-bottom:12px;
  }
  
  .footer-section h3::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:40px;
    height:3px;
    background:var(--secondary);
    border-radius:3px;
  }
  
  .footer-section p,
  .footer-section a {
    color:rgba(255,255,255,0.75);
    text-decoration:none;
    font-size:14px;
    line-height:2.2;
    display:block;
    transition:all var(--transition-fast);
  }
  
  .footer-section a:hover {
    color:#fff;
    padding-left:8px;
    transform:translateX(4px);
  }
  
  .footer-bottom {
    text-align:center;
    padding-top:35px;
    border-top:1px solid rgba(255,255,255,0.1);
    font-size:14px;
    color:rgba(255,255,255,0.6);
  }
  
  /* ==================== RESPONSIVE DESIGN ==================== */
  @media(max-width:1024px){
    .hero {
      gap:60px;
    }
    
    .hero h1 {
      font-size:44px;
    }
  }
  
  @media(max-width:900px){
    .hero{
      grid-template-columns:1fr;
      gap:50px;
      padding:70px 20px 60px;
    }
    
    .hero h1 {
      font-size:40px;
    }
    
    .hero p {
      max-width:100%;
    }
    
    .nav {
      flex-direction:column;
      gap:25px;
    }
    
    .nav-links {
      flex-direction:column;
      width:100%;
      gap:12px;
    }
    
    .nav a {
      width:100%;
      text-align:center;
    }
    
    .stats-container {
      grid-template-columns:repeat(2, 1fr);
      gap:35px;
    }
    
    .steps-container {
      grid-template-columns:1fr;
    }
    
    .footer-content {
      grid-template-columns:1fr;
      text-align:center;
      gap:40px;
    }
    
    .footer-section h3::after {
      left:50%;
      transform:translateX(-50%);
    }
    
    section h2 {
      font-size:36px;
    }
  }
  
  @media(max-width:600px){
    .hero h1 {
      font-size:32px;
    }
    
    .hero p {
      font-size:17px;
    }
    
    .btn {
      display:block;
      margin:12px 0;
      width:100%;
    }
    
    .btn.secondary {
      margin-left:0;
    }
    
    .stats-container {
      grid-template-columns:1fr;
      gap:40px;
    }
    
    .stat-number {
      font-size:40px;
    }
    
    section {
      padding:60px 20px;
    }
    
    section h2 {
      font-size:30px;
      margin-bottom:45px;
    }
    
    .grid {
      grid-template-columns:1fr;
    }
    
    .card {
      padding:35px 25px;
    }
    
    .how {
      padding:50px 25px;
    }
    
    .trust {
      padding:35px 25px;
    }
    
    .cta {
      padding:60px 30px;
    }
    
    .cta h2 {
      font-size:28px;
    }
    
    .features-list {
      grid-template-columns:1fr;
    }
  }
  
  @media(max-width:400px){
    .hero h1 {
      font-size:26px;
    }
    
    section h2 {
      font-size:24px;
    }
  }
  
  /* ==================== SCROLL ANIMATIONS ==================== */
  .fade-in {
    opacity:0;
    transform:translateY(40px);
    transition:opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), 
               transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  .fade-in.visible {
    opacity:1;
    transform:translateY(0);
  }
  
  /* ==================== ACCESSIBILITY ==================== */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
    }
  }
  
  /* Focus styles for accessibility */
  a:focus-visible,
  button:focus-visible {
    outline:3px solid var(--secondary);
    outline-offset:3px;
  }
  
  /* ==================== LOADING STATES ==================== */
  .skeleton {
    background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size:200% 100%;
    animation:loading 1.5s infinite;
  }
  
  @keyframes loading {
    0% { background-position:200% 0; }
    100% { background-position:-200% 0; }
  }
  
  /* ==================== UTILITY CLASSES ==================== */
  .text-gradient {
    background:linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  
  .shadow-glow {
    box-shadow:0 0 30px rgba(79,163,209,0.3);
  }
  
  .blur-bg {
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }