/* lines */
    .c-animated-line{ animation: cDash 26s linear infinite; stroke-dasharray: 10; }
    @keyframes cDash{ to{ stroke-dashoffset: 1000; } }

    /* particles */
    .c-particle{
      position:absolute;
      width:4px; height:4px;
      border-radius:999px;
      background: linear-gradient(45deg, rgba(79,70,229,.85), rgba(34,211,238,.85));
      animation: cFloat 7s infinite ease-in-out;
      box-shadow: 0 0 14px rgba(79,70,229,.25);
      opacity: .85;
    }
    @keyframes cFloat{
      0%,100%{ transform: translate(0,0); opacity:.55; }
      50%{ transform: translate(10px,-18px); opacity:1; }
    }

    /* course cards */
    .c-card{
      border-radius: 22px;
      background: radial-gradient(1000px 340px at 20% -10%, rgba(99,102,241,.18), transparent 35%),
                  linear-gradient(180deg, rgba(17,24,39,.92), rgba(15,23,42,.92));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 18px 60px rgba(2,6,23,.35);
      padding: 22px;
      display:flex;
      flex-direction:column;
      min-height: 360px;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .c-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 22px 75px rgba(2,6,23,.45);
      border-color: rgba(99,102,241,.22);
    }

    .c-card-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 14px;
    }

    .c-tag{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.92);
      font-weight: 900;
      font-size: 12px;
      line-height: 1;
    }
    .c-tag-ghost{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
    .c-tag-blue{ background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.25); }

    .c-meta{
      color: rgba(255,255,255,.55);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .c-title{
      color:#fff;
      font-weight: 900;
      font-size: 22px;
      line-height: 1.25;
      margin-top: 6px;
    }
    .c-desc{
      color: rgba(255,255,255,.65);
      font-size: 14px;
      line-height: 1.7;
      margin-top: 10px;
      max-width: 60ch;
    }

    .c-bullets{
      margin-top: 16px;
      display:grid;
      gap: 10px;
    }
    .c-bullet{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color: rgba(255,255,255,.72);
      font-weight: 700;
      font-size: 13px;
      line-height: 1.5;
    }
    .c-bullet i{
      margin-top: 2px;
      color: rgba(34,211,238,.9);
    }

    .c-price-row{
      margin-top: auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding-top: 18px;
    }

    .c-price{
      display:flex;
      flex-direction:column;
      gap: 4px;
    }
    .c-price-val{
      font-size: 28px;
      font-weight: 950;
      letter-spacing: -0.02em;
      background: linear-gradient(90deg, rgba(34,211,238,.95), rgba(79,70,229,.95));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      line-height: 1.1;
    }
    .c-price-sub{
      color: rgba(255,255,255,.55);
      font-weight: 800;
      font-size: 12px;
    }

    .c-badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.82);
      font-weight: 900;
      font-size: 12px;
      white-space: nowrap;
    }

    .c-actions{
      margin-top: 16px;
      display:flex;
      gap: 12px;
      align-items:center;
    }

    .c-btn-primary{
      flex: 1 1 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      height: 50px;
      border-radius: 16px;
      background: linear-gradient(90deg, rgba(79,70,229,.95), rgba(37,99,235,.95));
      color: #fff;
      font-weight: 950;
      box-shadow: 0 14px 35px rgba(37,99,235,.20);
      transition: transform .18s ease, filter .18s ease;
    }
    .c-btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }

    .c-btn-ghost{
      width: 120px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      height: 50px;
      border-radius: 16px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.90);
      font-weight: 900;
      transition: transform .18s ease, background .18s ease;
    }
    .c-btn-ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }

    @media (prefers-reduced-motion: reduce){
      .c-animated-line, .c-particle { animation: none !important; }
      .c-card, .c-btn-primary, .c-btn-ghost { transition: none !important; }
    }

    /* animated lines */
    .g-animated-line { animation: gDash 26s linear infinite; stroke-dasharray: 10; }
    @keyframes gDash { to { stroke-dashoffset: 1000; } }

    /* particles */
    .g-particle{
      position:absolute;
      width:4px; height:4px;
      border-radius:999px;
      background: linear-gradient(45deg, rgba(79,70,229,.65), rgba(34,211,238,.65));
      animation: gFloat 7s infinite ease-in-out;
      box-shadow: 0 0 14px rgba(79,70,229,.18);
      opacity: .75;
    }
    @keyframes gFloat{
      0%,100%{ transform: translate(0,0); opacity:.45; }
      50%{ transform: translate(10px,-18px); opacity:1; }
    }

    /* Cards */
    .g-card{
      border-radius: 22px;
      background: #fff;
      border: 1px solid rgba(15,23,42,.10);
      box-shadow: 0 18px 60px rgba(2,6,23,.08);
      padding: 22px;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 320px; /* uniform sizing */
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .g-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 22px 75px rgba(2,6,23,.12);
      border-color: rgba(99,102,241,.25);
    }

    .g-card-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 14px;
    }

    .g-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(15,23,42,.06);
      border: 1px solid rgba(15,23,42,.10);
      color: rgba(15,23,42,.92);
      font-weight: 900;
      font-size: 12px;
      line-height: 1;
    }
    .g-pill-premium{
      background: rgba(99,102,241,.12);
      border-color: rgba(99,102,241,.22);
      color: rgba(30,41,59,.95);
    }

    .g-meta{
      color: rgba(15,23,42,.55);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .g-card-body{ flex: 1 1 auto; }

    .g-title{
      color: rgba(15,23,42,.95);
      font-weight: 950;
      font-size: 22px;
      line-height: 1.25;
      margin-top: 8px;
      letter-spacing: -0.01em;
    }

    .g-desc{
      color: rgba(15,23,42,.65);
      font-size: 14px;
      line-height: 1.7;
      margin-top: 10px;
      max-width: 60ch;
    }

    .g-stats{
      margin-top: 18px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .g-stat{
      border-radius: 16px;
      background: rgba(15,23,42,.04);
      border: 1px solid rgba(15,23,42,.08);
      padding: 14px 12px;
      text-align:center;
    }

    .g-stat-val{
      color: rgba(15,23,42,.95);
      font-weight: 950;
      font-size: 18px;
      line-height: 1.1;
    }
    .g-stat-lbl{
      color: rgba(15,23,42,.55);
      font-size: 12px;
      font-weight: 800;
      margin-top: 6px;
    }

    .g-actions{
      margin-top: 16px;
      display:flex;
      align-items:center;
      gap: 12px;
    }

    .g-btn-primary{
      flex: 1 1 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      height: 50px;
      border-radius: 16px;
      background: linear-gradient(90deg, rgba(79,70,229,.95), rgba(37,99,235,.95));
      color: #fff;
      font-weight: 950;
      box-shadow: 0 14px 35px rgba(37,99,235,.20);
      transition: transform .18s ease, filter .18s ease;
    }
    .g-btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }

    .g-btn-icon{
      width: 50px;
      height: 50px;
      border-radius: 16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: rgba(15,23,42,.05);
      border: 1px solid rgba(15,23,42,.10);
      color: rgba(15,23,42,.75);
      transition: transform .18s ease, background .18s ease;
    }
    .g-btn-icon:hover{ transform: translateY(-1px); background: rgba(15,23,42,.08); }

    @media (max-width: 640px){
      .g-card{ min-height: 330px; }
      .g-title{ font-size: 20px; }
    }

    @media (prefers-reduced-motion: reduce){
      .g-animated-line, .g-particle { animation: none !important; }
      .g-card, .g-btn-primary, .g-btn-icon { transition: none !important; }
    }

        .keli-why-card{
      border-radius: 26px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 18px 60px rgba(2,6,23,0.35);
      backdrop-filter: blur(10px);
      padding: 32px;
      text-align: center;
      height: 100%;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .keli-why-card:hover{
      transform: translateY(-6px);
      border-color: rgba(99,102,241,0.22);
      box-shadow: 0 22px 80px rgba(2,6,23,0.45);
    }
    .keli-why-icon{
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 0 auto 18px auto;
      box-shadow: 0 18px 45px rgba(79,70,229,0.18);
    }
    .keli-why-title{
      font-size: 20px;
      font-weight: 950;
      margin-bottom: 10px;
      color: #fff;
    }
    .keli-why-desc{
      color: rgba(255,255,255,0.70);
      line-height: 1.7;
      font-size: 14px;
    }

    .why-animated-line{ animation: whyDash 24s linear infinite; stroke-dasharray: 10; }
    @keyframes whyDash{ to{ stroke-dashoffset: 1000; } }

    .why-particle{
      position:absolute;
      width:4px; height:4px;
      border-radius:999px;
      background: linear-gradient(45deg, rgba(79,70,229,.85), rgba(34,211,238,.85));
      animation: whyFloat 7s infinite ease-in-out;
      box-shadow: 0 0 14px rgba(79,70,229,.25);
      opacity: .85;
    }
    @keyframes whyFloat{
      0%,100%{ transform: translate(0,0); opacity:.55; }
      50%{ transform: translate(10px,-18px); opacity:1; }
    }

    @media (prefers-reduced-motion: reduce){
      .why-animated-line, .why-particle{ animation:none !important; }
    }

    /* animated lines */
    .a-animated-line { animation: aDash 26s linear infinite; stroke-dasharray: 10; }
    @keyframes aDash { to { stroke-dashoffset: 1000; } }

    /* particles */
    .a-particle{
      position:absolute;
      width:4px; height:4px;
      border-radius:999px;
      background: linear-gradient(45deg, rgba(79,70,229,.85), rgba(34,211,238,.85));
      animation: aFloat 7s infinite ease-in-out;
      box-shadow: 0 0 14px rgba(79,70,229,.25);
      opacity: .85;
    }
    @keyframes aFloat{
      0%,100%{ transform: translate(0,0); opacity:.55; }
      50%{ transform: translate(10px,-18px); opacity:1; }
    }

    /* featured chips */
    .a-chip{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.92);
      font-weight: 900;
      font-size: 12px;
    }
    .a-chip-ghost{ background: rgba(255,255,255,.06); }

    .a-time{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(2,6,23,.40);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.86);
      font-weight: 900;
      font-size: 12px;
      backdrop-filter: blur(10px);
    }

    /* arrow micro animation */
    .a-arrow{ transition: transform .2s ease; }
    a:hover .a-arrow{ transform: translateX(3px); }

    /* right cards */
    .a-card{
      border-radius: 22px;
      background: radial-gradient(900px 260px at 20% -20%, rgba(99,102,241,.18), transparent 35%),
                  linear-gradient(180deg, rgba(17,24,39,.92), rgba(15,23,42,.92));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 18px 60px rgba(2,6,23,.35);
      padding: 16px;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .a-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 22px 75px rgba(2,6,23,.45);
      border-color: rgba(99,102,241,.20);
    }

    .a-thumb{
      width: 104px;
      height: 104px;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255,255,255,.12);
      flex: 0 0 auto;
    }
    .a-thumb-overlay{
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(15,23,42,.10), rgba(15,23,42,.55));
      pointer-events:none;
    }

    .a-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.88);
      font-weight: 900;
      font-size: 12px;
      line-height: 1;
    }

    /* featured wrapper slight hover */
    .a-feature a{ box-shadow: 0 22px 80px rgba(2,6,23,.35); border: 1px solid rgba(255,255,255,.10); }
    .a-feature a:hover{ box-shadow: 0 28px 110px rgba(2,6,23,.45); }

    /* tailwind line-clamp fallback if plugin not enabled */
    .line-clamp-2{
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      .a-animated-line, .a-particle { animation: none !important; }
    }


    .t-particle{
      position:absolute;
      width:4px;
      height:4px;
      border-radius:50%;
      background: linear-gradient(45deg, rgba(79,70,229,.8), rgba(14,165,233,.8));
      animation: tFloat 7s infinite ease-in-out;
      box-shadow: 0 0 14px rgba(79,70,229,.20);
      opacity: .9;
    }
    @keyframes tFloat{
      0%,100%{ transform: translate(0,0); opacity:.55; }
      50%{ transform: translate(10px,-18px); opacity:1; }
    }

    /* Animated lines */
    .t-animated-line{
      animation: tDash 22s linear infinite;
      stroke-dasharray: 10;
    }
    @keyframes tDash{ to{ stroke-dashoffset: 1000; } }

    /* Cards */
    .t-card{
      background: rgba(255,255,255,0.75);
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 22px;
      padding: 32px;
      box-shadow: 0 18px 50px rgba(2,6,23,0.08);
      backdrop-filter: blur(10px);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      position: relative;
      overflow: hidden;
    }

    /* soft top highlight */
    .t-card::before{
      content:"";
      position:absolute;
      inset:-40% -40% auto auto;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.18), transparent 60%);
      transform: rotate(18deg);
      pointer-events:none;
    }

    .t-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 22px 70px rgba(2,6,23,0.12);
      border-color: rgba(99,102,241,0.20);
    }

    /* subtle float animation (optional, light) */
    @media (prefers-reduced-motion: no-preference){
      .t-card{ animation: tCardFloat 10s ease-in-out infinite; }
      .t-card:nth-child(2){ animation-delay: 1.5s; }
      .t-card:nth-child(3){ animation-delay: 3s; }
    }
    @keyframes tCardFloat{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-6px); }
    }


    .c-particle{
      position:absolute;
      width:4px; height:4px;
      border-radius:999px;
      background: linear-gradient(45deg, rgba(79,70,229,.75), rgba(14,165,233,.75));
      animation: cFloat 7s infinite ease-in-out;
      box-shadow: 0 0 14px rgba(79,70,229,.20);
      opacity: .85;
    }
    @keyframes cFloat{
      0%,100%{ transform: translate(0,0); opacity:.55; }
      50%{ transform: translate(10px,-18px); opacity:1; }
    }

    @media (prefers-reduced-motion: reduce){
      .c-particle{ animation:none !important; }
    }