:root{
      --bg:#3c507193;
      --card:#45536f2d;
      --muted:#9aa4b2;
      --accent1:#7c3aed;
      --accent2:#06b6d4;
      --glass:rgba(255, 255, 255, 0.45);
      --radius:12px;
      --maxw:1100px;
    }
    *, *::before, *::after{box-sizing:border-box;}
    body{
      margin:0; padding:0;
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      background: linear-gradient(180deg, rgba(21, 26, 45, 0.93) 0%, rgb(48, 71, 112) 100%);
      -webkit-font-smoothing:antialiased;
      display:flex; justify-content:center;
      padding:2rem;
    }
    .container{width:100%;max-width:var(--maxw);}
    header.site-header{
      display:flex;justify-content:space-between;align-items:center;
      margin-bottom:1.5rem;color:white;
    }
    .brand{display:flex;gap:0.8rem;align-items:center;text-decoration:none;color:inherit;}
    .logo-img {
      width:98px;
      height:98px;
      border-radius:10px;
      object-fit:cover;
    }
    nav.main-nav{display:flex;gap:1rem;align-items:center;}
    nav a{
      color:var(--muted);text-decoration:none;font-weight:600;
      font-size:0.95rem;padding:0.5rem 0.7rem;border-radius:8px;
    }
    nav a:hover{color:#fff;background:var(--glass);}
    .dropdown{position:relative;}
    .dropbtn{
      background:linear-gradient(90deg,var(--accent1),var(--accent2));
      padding:0.6rem 0.9rem;border:none;border-radius:10px;
      color:white;font-weight:700;cursor:pointer;
    }
    .dropdown-content{
      display:none;position:absolute;top:110%;right:0;
      background:var(--card);border-radius:8px;padding:0.4rem 0;
      box-shadow:0 4px 16px rgba(0,0,0,0.4);
    }
    .dropdown-content a{
      display:block;padding:0.6rem 1rem;
      color:var(--muted);text-decoration:none;font-size:0.95rem;
    }
    .dropdown:hover .dropdown-content{display:block;}
    .dropdown-content a:hover{background:rgba(255,255,255,0.04);color:#fff;}

    section{
      margin-bottom:1.8rem;padding:1rem;
      background:var(--card);border-radius:var(--radius);
      border:1px solid rgba(219, 175, 175, 0.316);
    }
    h1{color: #7c3aed;}
    h2{margin-top:0;color:var(--accent2);}
    h3{margin-bottom:0.5rem;color:var(--accent1);}
    p, ul, li{color:#e6eef6;font-size:1rem;line-height:1.5;}
    ul{margin-left:1.2rem;}
    img.responsive{width:100%;max-width:400px;border-radius:10px;margin-top:0.8rem;}
    footer.site-footer{
      margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.08);
      display:flex;justify-content:space-between;flex-wrap:wrap;
      color:var(--muted);font-size:0.9rem;}
   .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .card {
            background: #73b6f92f;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.232);}
   
      .highlight {
            background: #eef2ff;
            padding: 20px;
            border-left: 5px solid #2563eb;
            margin: 30px 0;
        }      

   .chip{
      color: #e6eef6;
    }
    .codebox{
      color: #ffffff;
      background-color: #323232;}    
     .hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 50px;
    }
    .hero img {
    height: 400px;
    width: 300px;
    border-radius: 10px;
    object-fit: cover;
  
    }

    .hero-text {
    max-width: 600px;
    }
     .aida-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.aida-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 8px solid;
    cursor: pointer;
    transition: transform 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.aida-box:hover { transform: translateY(-5px); }
.aida-box.attention { border-color: #4B79A1; }
.aida-box.interest  { border-color: #5C97BF; }
.aida-box.desire    { border-color: #76b2d9; }
.aida-box.action    { border-color: #90caf9; }

@media (max-width: 768px) {
    .aida-grid { grid-template-columns: 1fr; }
}
.funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.funnel-step {
    width: 70%;
    padding: 18px;
    margin: 10px 0;
    border-radius: 4px;
    text-align: center;
    color: white;
    font-weight: bold;
}
.funnel-step.attention { background:#4B79A1; }
.funnel-step.interest  { background:#5C97BF; }
.funnel-step.desire    { background:#76b2d9; }
.funnel-step.action    { background:#90caf9; }

.funnel-image {
  width:100%;
  max-width:500px;
  display:block;
  margin:1rem auto;
}
.platform-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
    .platform { padding:14px; border-radius:10px; border:1px solid #cba0a0;}
    .platform p, .platform ol { margin:0 0 8px 0; color: #bbfbae;}
    .platform ol { padding-left:18px; }

    .funnel2 { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
    .funnel2 .step {
      background:#f9f4ee; padding:12px; border-radius:10px; flex:1; min-width:150px; text-align:center; border:1px solid #ecd9c2;
    }
    .funnel2 .step strong { display:block; color:var(--brown-dark); font-size:16px; }

    h4{color: #06b6d4;}
    .step{color: #e100ff;}

    .cts{
      display:flex;
      gap:2rem;
      align-items:center;
      background:var(--card);
      padding:1.5rem;
      border-radius:var(--radius);
      border:1px solid rgba(219,175,175,0.316);
      margin-bottom:1.8rem;
    }

    .cts .image img{
      max-width:400px;
      width:100%;
      border-radius:10px;
    }

    .cts .content{
      flex:1;
    }
    
    .highlighted {
  background: rgba(152, 98, 246, 0.42) !important;
  box-shadow: 0 0 12px rgba(152, 98, 246, 0.55);
  transition: background 0.75s ease-out, box-shadow 0.75s ease-out;
}

#backToTop {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color: white;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: background 0.3s ease;
}

#backToTop:hover {
  background: var(--accent2);
}