:root{
      --acc-1:#8dc7ff;
      --acc-2:#5bb8ff;
      --text:#e8eef6;
      --muted:#a5b2c3;
      --shadow:0 10px 25px rgba(0,0,0,.35);
      --radius:16px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:var(--text);
      overflow-x:hidden;min-height:100vh;position:relative;
      background:linear-gradient(120deg,#0b1a33,#123c5d,#1b2e52,#5b2a73);
      background-size:400% 400%;
      animation:gradientFlow 40s ease infinite;
    }
    @keyframes gradientFlow{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }

    header{
      padding:70px 0 40px;text-align:center;position:relative;z-index:2;
    }
    header .logo{position:relative;display:inline-block;}
    header .logo::before{
      content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      width:200px;height:200px;
      background:radial-gradient(circle,rgba(91,184,255,0.25)0%,transparent 70%);
      border-radius:50%;filter:blur(40px);
      animation:pulse 5s ease-in-out infinite;
    }
    @keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
    header img{height:90px;width:auto;position:relative;z-index:2;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
    header h1{font-size:clamp(20px,2.5vw,26px);margin-top:18px;color:var(--acc-1)}

    .container{width:min(1100px,92vw);margin-inline:auto;position:relative;z-index:1}
    section{padding:60px 0;opacity:0;transform:translateY(30px);transition:opacity 1.2s ease,transform 1.2s ease;}
    section.visible{opacity:1;transform:none;}

    .grid{display:grid;gap:24px}
    .cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
    .cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

    .card{
      background:linear-gradient(180deg,rgba(15,35,68,0.9),rgba(15,35,68,0.75));
      border:1px solid rgba(141,199,255,.15);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:28px;
      transition:transform .3s ease, box-shadow .3s ease;
    }
    .card:hover{transform:translateY(-4px);box-shadow:0 12px 35px rgba(0,0,0,.45)}

    h2{font-size:clamp(22px,2.4vw,30px);margin-bottom:16px;color:var(--text)}
    p{color:var(--muted);line-height:1.6;margin-bottom:14px}
    ul.clean{list-style:none;padding:0;margin:0}
    ul.clean li{padding-left:22px;position:relative;margin:8px 0;color:var(--muted)}
    ul.clean li::before{content:"•";position:absolute;left:0;color:var(--acc-2)}

    a{
      color:var(--acc-1);
      position:relative;text-decoration:none;transition:color .3s ease;
    }
    a::after{
      content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;
      background:linear-gradient(90deg,var(--acc-1),var(--acc-2));
      transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
    }
    a:hover{color:var(--acc-2)}
    a:hover::after{transform:scaleX(1)}

    iframe{border:0;border-radius:14px;width:100%;height:320px;box-shadow:0 0 20px rgba(0,0,0,0.4)}

    footer{text-align:center;padding:50px 0;color:var(--muted);border-top:1px solid rgba(141,199,255,.15);position:relative;z-index:2}
    footer strong{color:var(--text)}

    @media (max-width:600px){header img{height:70px}section{padding:40px 0}.card{padding:20px}}