:root{
    --blue-900:#0b1f6b;
    --blue-800:#10257a;
    --blue-700:#13309c;
    --blue-600:#1a3fd6;
    --blue-500:#2150f0;
    --blue-400:#5b8df9;
    --blue-300:#9cc0fb;
    --blue-100:#dce8fd;
    --blue-50:#eef3fe;
    --ink:#0d1230;
    --gray-600:#5b6378;
    --white:#ffffff;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  #services, #courses, #internships, #mock, #certificate-verify, #blog, #about, #contact, #faq{
    scroll-margin-top:96px;
  }
  html,body{margin:0;padding:0;}
  body{
    font-family:'Segoe UI','Inter',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    background:var(--blue-50);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;}

  .page{
    max-width:1536px;
    margin:0 auto;
    background:linear-gradient(180deg,#eaf0fe 0%, #eaf0fe 14%, #c9d9fb 30%, #eaf0fe 42%, #eaf0fe 100%);
    position:relative;
  }

  /* ---------- HEADER (STICKY) ---------- */
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 56px;
    background:rgba(255,255,255,0.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:1px solid rgba(26,63,214,0.08);
    box-shadow:0 4px 24px -8px rgba(20,40,120,0.12);
    transition:box-shadow 0.3s ease, background 0.3s ease;
  }
  header.scrolled{
    background:rgba(255,255,255,0.96);
    box-shadow:0 6px 32px -8px rgba(20,40,120,0.18);
  }

  /* Hamburger button (mobile) */
  .hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
    z-index:1100;
  }
  .hamburger span{
    display:block;
    width:24px;
    height:2.5px;
    background:var(--ink);
    border-radius:2px;
    transition:all 0.3s ease;
  }
  .hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  
  .logo{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .logo-text{
    font-size:21px;
    font-weight:800;
    line-height:1.05;
    color:var(--ink);
    letter-spacing:0.2px;
  }
  .logo-text .crowd{
    color:var(--blue-500);
    display:block;
  }

  nav{
    display:flex;
    align-items:center;
  }
  nav a{
    font-size:15.5px;
    font-weight:500;
    color:var(--ink);
    padding:0 17px 10px 17px;
    position:relative;
  }
  nav a.active{
    color:var(--blue-600);
    font-weight:600;
  }
  nav a.active::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    background:var(--blue-600);
    border-radius:2px;
  }

  .apply-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--blue-600);
    color:var(--white);
    font-weight:700;
    font-size:15.5px;
    padding:14px 26px;
    border-radius:10px;
    border:none;
    box-shadow:0 8px 20px -6px rgba(26,63,214,0.55);
  }
  .apply-btn svg{width:16px;height:16px;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    display:flex;
    align-items:flex-start;
    padding:48px 56px 0 56px;
    margin-bottom:60px;
  }
  .hero-copy{flex:0 0 42%; max-width:42%;}
  .hero-art{flex:1 1 58%; max-width:58%;}

  .hero-copy{padding-top:42px;}

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--white);
    color:var(--blue-600);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.6px;
    padding:9px 18px;
    border-radius:30px;
    margin-bottom:26px;
    box-shadow:0 4px 14px -4px rgba(20,40,120,0.18);
  }
  .eyebrow svg{width:14px;height:14px;}

  .headline{
    font-size:54px;
    line-height:1.12;
    font-weight:800;
    letter-spacing:-0.5px;
    margin:0 0 22px 0;
    color:var(--ink);
  }
  .headline .accent{color:var(--blue-600);}

  .subcopy{
    font-size:16.5px;
    line-height:1.6;
    color:var(--gray-600);
    max-width:430px;
    margin:0 0 34px 0;
  }

  .hero-actions{
    display:flex;
    align-items:center;
    gap:34px;
  }
  .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:var(--blue-600);
    color:var(--white);
    font-weight:700;
    font-size:16px;
    padding:17px 30px;
    border-radius:10px;
    border:none;
    box-shadow:0 10px 24px -6px rgba(26,63,214,0.55);
  }
  .btn-primary svg{width:17px;height:17px;}

  .btn-ghost{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-weight:700;
    font-size:16px;
    color:var(--blue-600);
    background:none;
    border:none;
  }
  .play-circle{
    width:34px;height:34px;
    border-radius:50%;
    border:1.6px solid var(--blue-400);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .play-circle svg{width:13px;height:13px;}

  /* ---------- HERO ART ---------- */
  .hero-art{
    position:relative;
    width:100%;
    aspect-ratio:1536/980;
  }
  .hero-art svg{width:100%;height:100%;display:block;}

  /* ---------- FEATURE STRIP ---------- */
  .feature-strip-wrap{
    padding:0 56px 56px 56px;
    margin-top:-18px;
    position:relative;
    z-index:5;
  }
  .feature-strip{
    background:var(--white);
    border-radius:22px;
    box-shadow:0 24px 50px -20px rgba(20,40,120,0.28);
    display:flex;
    flex-wrap:wrap;
    padding:34px 10px;
  }
  .feature{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:0 22px;
    position:relative;
    flex:1 1 0;
    min-width:200px;
  }
  .feature + .feature::before{
    content:"";
    position:absolute;
    left:0; top:6px; bottom:6px;
    width:1px;
    background:#eef0f6;
  }
  .feature-icon{
    width:30px;height:30px;
    flex-shrink:0;
    color:var(--blue-600);
    margin-top:2px;
  }
  .feature-icon svg{width:100%;height:100%;}
  .feature h3{
    font-size:15.5px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 6px 0;
  }
  .feature p{
    font-size:13.5px;
    line-height:1.5;
    color:var(--gray-600);
    margin:0;
  }

  @media (max-width: 1100px){
    .hero{flex-wrap:wrap;}
    .hero-copy{flex:1 1 100%; max-width:100%;}
    .hero-art{flex:1 1 100%; max-width:100%; margin-top:36px;}
    .feature{flex:1 1 45%;}
    .feature + .feature::before{display:none;}
  }
  @media (max-width: 720px){
    header{padding:14px 22px;gap:0;}
    .hamburger{display:flex;}
    nav{
      display:none;
      position:fixed;
      top:0; left:0; right:0;
      background:rgba(255,255,255,0.97);
      backdrop-filter:blur(20px);
      flex-direction:column;
      align-items:flex-start;
      padding:80px 28px 32px 28px;
      gap:4px;
      box-shadow:0 8px 32px rgba(20,40,120,0.15);
      z-index:999;
    }
    nav.open{display:flex;}
    nav a{
      width:100%;
      font-size:17px;
      padding:12px 0;
      border-bottom:1px solid rgba(20,40,120,0.06);
    }
    nav a:last-child{border-bottom:none;}
    .hero{padding:32px 22px 0 22px;}
    .headline{font-size:36px;}
    .feature-strip-wrap{padding:0 22px 32px 22px;}
    .feature{flex:1 1 100%;}
  }

  /* ===================================================== */
  /* ---------- IC SERVICES SECTION (image-style) ---------- */
  /* ===================================================== */
  .ic-services-section{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    padding:80px 56px 90px 56px;
    background:var(--white);
    margin:0 56px 60px 56px;
    border-radius:24px;
    box-shadow:0 20px 60px -24px rgba(20,40,120,0.16);
  }

  .ic-services-eyebrow{
    display:block;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.2px;
    color:var(--blue-600);
    margin-bottom:14px;
    text-transform:uppercase;
  }

  .ic-services-title{
    font-size:38px;
    font-weight:800;
    line-height:1.15;
    color:var(--ink);
    margin:0 0 20px 0;
    letter-spacing:-0.4px;
  }

  .ic-services-divider{
    width:52px;
    height:3px;
    background:var(--blue-600);
    border-radius:2px;
    margin-bottom:28px;
  }

  .ic-services-desc{
    font-size:15px;
    line-height:1.7;
    color:var(--gray-600);
    margin:0 0 18px 0;
  }

  /* Timeline */
  .ic-timeline{
    display:flex;
    flex-direction:column;
    position:relative;
  }
  .ic-timeline::before{
    content:"";
    position:absolute;
    left:14px;
    top:14px;
    bottom:14px;
    width:2px;
    background:linear-gradient(to bottom, var(--blue-600), var(--blue-300));
    border-radius:2px;
  }

  .ic-tl-item{
    display:grid;
    grid-template-columns:30px 54px 1fr;
    align-items:flex-start;
    gap:0 14px;
    padding-bottom:24px;
    position:relative;
  }
  .ic-tl-item:last-child{padding-bottom:0;}
  .ic-tl-item:not(:last-child)::after{
    content:"";
    position:absolute;
    left:14px;
    top:28px;
    bottom:0;
    width:0;
  }

  .ic-tl-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--blue-600);
    border:2.5px solid var(--white);
    box-shadow:0 0 0 2px var(--blue-600);
    margin-top:22px;
    align-self:flex-start;
    flex-shrink:0;
    position:relative;
    z-index:1;
  }

  .ic-tl-icon-wrap{
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--blue-600);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:0 6px 18px -6px rgba(26,63,214,0.45);
  }

  .ic-tl-content{
    padding-top:8px;
    border-bottom:1px solid rgba(26,63,214,0.09);
    padding-bottom:20px;
  }
  .ic-tl-item:last-child .ic-tl-content{border-bottom:none; padding-bottom:0;}
  .ic-tl-content h4{
    font-size:15.5px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 5px 0;
  }
  .ic-tl-content p{
    font-size:13.5px;
    line-height:1.55;
    color:var(--gray-600);
    margin:0;
  }

  @media(max-width:900px){
    .ic-services-section{
      grid-template-columns:1fr;
      gap:40px;
      margin:0 22px 40px 22px;
      padding:48px 28px;
    }
    .ic-services-title{font-size:28px;}
    .ic-timeline::before{left:13px;}
  }
  @media(max-width:640px){
    .ic-services-section{margin:0 14px 32px 14px; padding:36px 18px;}
    .ic-tl-item{grid-template-columns:28px 46px 1fr; gap:0 10px;}
    .ic-tl-icon-wrap{width:44px; height:44px; border-radius:11px;}
  }

  
  .page-hero{
    padding:64px 56px 56px 56px;
    text-align:center;
  }
  .page-hero .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--white); color:var(--blue-600);
    font-size:13px; font-weight:700; letter-spacing:0.6px;
    padding:9px 18px; border-radius:30px; margin-bottom:22px;
    box-shadow:0 4px 14px -4px rgba(20,40,120,0.18);
  }
  .page-hero .eyebrow svg{width:14px; height:14px;}
  .page-hero h1{
    font-size:46px; line-height:1.15; font-weight:800;
    letter-spacing:-0.5px; margin:0 0 16px 0; color:var(--ink);
  }
  .page-hero h1 .accent{color:var(--blue-600);}
  .page-hero p{
    font-size:16.5px; line-height:1.6; color:var(--gray-600);
    max-width:560px; margin:0 auto;
  }

  .services-wrap{padding:0 56px 90px 56px;}
  .services-grid{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
  }

  .service-card{
    flex:1 1 calc(33.333% - 19px);
    min-width:260px;
    background:var(--white);
    border-radius:20px;
    padding:34px 28px 30px 28px;
    box-shadow:0 18px 40px -22px rgba(20,40,120,0.28);
    position:relative;
    transition:transform 0.28s ease, box-shadow 0.28s ease;
    overflow:hidden;
  }
  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 50px -20px rgba(20,40,120,0.38);
  }

  .service-card .badge-soon{
    position:absolute;
    top:18px; right:18px;
    background:var(--blue-50);
    color:var(--blue-600);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.4px;
    padding:5px 11px;
    border-radius:20px;
  }

  .icon-wrap{
    width:54px; height:54px;
    border-radius:14px;
    background:linear-gradient(135deg, var(--blue-600), var(--blue-400));
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
    position:relative;
    overflow:hidden;
  }
  .icon-wrap svg{width:26px; height:26px; position:relative; z-index:2;}

  .service-card h3{
    font-size:18px; font-weight:700; color:var(--ink);
    margin:0 0 8px 0;
  }
  .service-card p{
    font-size:14px; line-height:1.55; color:var(--gray-600);
    margin:0;
  }

  /* ===== Per-service icon animations (triggered on card hover) ===== */

  /* Web Development: code brackets slide apart, cursor blinks */
  .icon-webdev .brackets-l{transition:transform 0.3s ease;}
  .icon-webdev .brackets-r{transition:transform 0.3s ease;}
  .service-card:hover .icon-webdev .brackets-l{transform:translateX(-3px);}
  .service-card:hover .icon-webdev .brackets-r{transform:translateX(3px);}
  .icon-webdev .cursor{animation:blink 1s steps(1) infinite;}
  @keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

  /* Java: coffee steam rises */
  .icon-java .steam{
    transform-origin:center bottom;
    opacity:0;
  }
  .service-card:hover .icon-java .steam1{animation:steamRise 1.4s ease-in-out infinite;}
  .service-card:hover .icon-java .steam2{animation:steamRise 1.4s ease-in-out 0.3s infinite;}
  @keyframes steamRise{
    0%{opacity:0; transform:translateY(0) scaleY(0.6);}
    30%{opacity:0.9;}
    100%{opacity:0; transform:translateY(-9px) scaleY(1.3);}
  }

  /* Android: antennae twitch */
  .icon-android .antenna-l, .icon-android .antenna-r{transform-origin:bottom center; transition:transform 0.25s ease;}
  .service-card:hover .icon-android .antenna-l{animation:wiggleL 0.6s ease-in-out infinite;}
  .service-card:hover .icon-android .antenna-r{animation:wiggleR 0.6s ease-in-out infinite;}
  @keyframes wiggleL{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-12deg);}}
  @keyframes wiggleR{0%,100%{transform:rotate(0deg);}50%{transform:rotate(12deg);}}

  /* Python: two loops chase / rotate */
  .icon-python .py-body{transform-origin:center; transition:transform 0.4s ease;}
  .service-card:hover .icon-python .py-body{animation:spinSlow 2.2s linear infinite;}
  @keyframes spinSlow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

  /* Cloud Computing: cloud drifts */
  .icon-cloud .cloud-shape{transition:transform 0.4s ease;}
  .service-card:hover .icon-cloud .cloud-shape{animation:drift 2s ease-in-out infinite;}
  @keyframes drift{0%,100%{transform:translateX(0);}50%{transform:translateX(3px);}}

  /* Digital Marketing: signal arcs pulse outward */
  .icon-marketing .arc{opacity:0; transform-origin:0% 100%;}
  .service-card:hover .icon-marketing .arc1{animation:pulseArc 1.4s ease-out infinite;}
  .service-card:hover .icon-marketing .arc2{animation:pulseArc 1.4s ease-out 0.35s infinite;}
  .service-card:hover .icon-marketing .arc3{animation:pulseArc 1.4s ease-out 0.7s infinite;}
  @keyframes pulseArc{0%{opacity:0.9; transform:scale(0.6);}100%{opacity:0; transform:scale(1.15);}}

  /* Graphic Design: pen nib draws a stroke */
  .icon-design .pen{transform-origin:80% 80%; transition:transform 0.3s ease;}
  .service-card:hover .icon-design .pen{animation:penDraw 1.1s ease-in-out infinite;}
  @keyframes penDraw{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-8deg) translate(-1px,-1px);}}

  /* Data Analytics: bars grow up */
  .icon-data .bar1, .icon-data .bar2, .icon-data .bar3{transform-origin:center bottom; transition:transform 0.3s ease;}
  .service-card:hover .icon-data .bar1{animation:growBar 1.2s ease-in-out infinite;}
  .service-card:hover .icon-data .bar2{animation:growBar 1.2s ease-in-out 0.15s infinite;}
  .service-card:hover .icon-data .bar3{animation:growBar 1.2s ease-in-out 0.3s infinite;}
  @keyframes growBar{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.35);}}

  /* Security Analytics: shield pulses */
  .icon-security .shield{transform-origin:center; transition:transform 0.3s ease;}
  .service-card:hover .icon-security .shield{animation:shieldPulse 1.3s ease-in-out infinite;}
  @keyframes shieldPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

  /* Internet Privacy Awareness: padlock shackle snaps shut, body settles */
  .icon-privacy .privacy-shackle{transform-origin:16px 14.8px; transition:transform 0.3s ease;}
  .icon-privacy .privacy-lock-body{transform-origin:center; transition:transform 0.3s ease;}
  .service-card:hover .icon-privacy .privacy-shackle{animation:lockShut 1.1s ease-in-out infinite;}
  .service-card:hover .icon-privacy .privacy-lock-body{animation:lockSettle 1.1s ease-in-out infinite;}
  @keyframes lockShut{0%{transform:translateY(-2px) rotate(-6deg);}40%,100%{transform:translateY(0) rotate(0deg);}}
  @keyframes lockSettle{0%,35%{transform:scale(0.92);}50%{transform:scale(1.08);}100%{transform:scale(1);}}

  /* Data Science: orbiting dot around circle */
  .icon-datascience .orbit-dot{transform-origin:16px 16px;}
  .service-card:hover .icon-datascience .orbit-dot{animation:orbit 1.8s linear infinite;}
  @keyframes orbit{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

  /* Artificial Intelligence: brain nodes pulse */
  .icon-ai .node{transform-origin:center; opacity:0.6;}
  .service-card:hover .icon-ai .node1{animation:nodePulse 1.2s ease-in-out infinite;}
  .service-card:hover .icon-ai .node2{animation:nodePulse 1.2s ease-in-out 0.25s infinite;}
  .service-card:hover .icon-ai .node3{animation:nodePulse 1.2s ease-in-out 0.5s infinite;}
  @keyframes nodePulse{0%,100%{opacity:0.5; transform:scale(1);}50%{opacity:1; transform:scale(1.4);}}

  /* Machine Learning: gear turns slowly (coming soon, muted) */
  .icon-ml .gear{transform-origin:center; transition:transform 0.4s ease;}
  .service-card:hover .icon-ml .gear{animation:spinSlow 3s linear infinite;}

  /* ===================================================== */
  /* ---------- SERVICES ROWS (no-card, alternating) ---------- */
  /* ===================================================== */
  .services-rows{
    padding:10px 56px 30px 56px;
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .srow{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
    padding:58px 0;
    border-bottom:1px solid rgba(26,63,214,0.09);
    opacity:0;
    transform:translateY(36px);
    transition:opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
  }
  .srow:last-child{border-bottom:none;}
  .srow.in-view{opacity:1; transform:translateY(0);}

  .srow.flip .srow-art{order:2;}
  .srow.flip .srow-copy{order:1;}

  .srow-copy .srow-index{
    font-size:13px; font-weight:800; letter-spacing:1.5px;
    color:var(--blue-400); margin-bottom:10px; display:block;
  }
  .srow-copy h2{
    font-size:30px; font-weight:800; color:var(--ink);
    margin:0 0 14px 0; line-height:1.2; letter-spacing:-0.3px;
  }
  .srow-copy h2 .accent{color:var(--blue-600);}
  .srow-copy p{
    font-size:15.5px; line-height:1.7; color:var(--gray-600);
    margin:0 0 22px 0; max-width:440px;
  }
  .srow-tags{display:flex; flex-wrap:wrap; gap:9px;}
  .srow-tags span{
    font-size:12.5px; font-weight:700; color:var(--blue-600);
    background:var(--blue-50); border:1px solid rgba(26,63,214,0.14);
    padding:6px 13px; border-radius:20px;
  }

  /* Detail list (line-by-line info on right side) */
  .srow-detail-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:22px;
  }
  .srow-detail-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
  }
  .srow-detail-icon{
    width:32px; height:32px;
    border-radius:8px;
    background:var(--blue-50);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .srow-detail-icon svg{ width:16px; height:16px; }
  .srow-detail-item div{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .srow-detail-item strong{
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    line-height:1.3;
  }
  .srow-detail-item span{
    font-size:13px;
    color:var(--gray-600);
    line-height:1.5;
  }

  .srow-art{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    height:300px;
  }
  .srow-art .art-glow{
    position:absolute;
    width:230px; height:230px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(33,80,240,0.16) 0%, rgba(33,80,240,0) 70%);
    animation:glowPulse 4s ease-in-out infinite;
  }
  .srow-art svg{position:relative; z-index:2; width:230px; height:230px; overflow:visible;}

  @keyframes glowPulse{0%,100%{transform:scale(1); opacity:1;}50%{transform:scale(1.12); opacity:0.7;}}
  @keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
  @keyframes floatYsm{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
  @keyframes rotateSlow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  @keyframes rotateSlowRev{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}
  @keyframes dashFlow{to{stroke-dashoffset:-40;}}
  @keyframes typeBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
  @keyframes barPulse{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.3);}}
  @keyframes ringSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  @keyframes dotOrbit{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  @keyframes shieldBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
  @keyframes cloudDrift{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
  @keyframes gearTurn{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  @keyframes sparklePop{0%,100%{opacity:0.3; transform:scale(0.8);}50%{opacity:1; transform:scale(1.15);}}

  /* More-skills strip (compact, no cards) */
  .more-skills{
    padding:20px 56px 90px 56px;
  }
  .more-skills-head{
    text-align:center; margin-bottom:34px;
  }
  .more-skills-head h3{
    font-size:24px; font-weight:800; color:var(--ink); margin:0 0 8px 0;
  }
  .more-skills-head p{
    font-size:14.5px; color:var(--gray-600); margin:0;
  }
  .more-skills-grid{
    display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  }
  .more-skill-pill{
    display:flex; align-items:center; gap:10px;
    background:var(--white);
    border:1px solid rgba(26,63,214,0.1);
    padding:12px 20px 12px 14px;
    border-radius:40px;
    box-shadow:0 8px 22px -14px rgba(20,40,120,0.25);
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .more-skill-pill:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px -12px rgba(20,40,120,0.32);
    border-color:rgba(26,63,214,0.28);
  }
  .more-skill-pill .pill-icon{
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg, var(--blue-600), var(--blue-400));
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .more-skill-pill .pill-icon svg{width:17px; height:17px;}
  .more-skill-pill span.label{font-size:13.5px; font-weight:700; color:var(--ink);}
  .more-skill-pill .badge-soon{
    font-size:9.5px; font-weight:800; letter-spacing:0.3px;
    color:var(--blue-600); background:var(--blue-50);
    padding:2px 8px; border-radius:10px; margin-left:2px;
  }

  @media (max-width:900px){
    .services-rows{padding:10px 22px 10px 22px;}
    .srow{grid-template-columns:1fr; gap:30px; padding:40px 0;}
    .srow.flip .srow-art{order:1;}
    .srow.flip .srow-copy{order:2;}
    .srow-copy p{max-width:none;}
    .srow-art{height:230px;}
    .srow-art svg{width:180px; height:180px;}
    .more-skills{padding:10px 22px 60px 22px;}
  }

  @media (max-width:1100px){
    .service-card{flex:1 1 calc(50% - 14px);}
  }
  @media (max-width:640px){
    .page-hero{padding:48px 22px 36px 22px;}
    .page-hero h1{font-size:32px;}
    .services-wrap{padding:0 22px 60px 22px;}
    .service-card{flex:1 1 100%;}
  }

  /* ===================================================== */
  /* ---------- COURSES SECTION ---------- */
  /* ===================================================== */
  .courses-wrap{padding:0 56px 90px 56px;}
  .courses-grid{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
  }

  .course-card{
    flex:1 1 calc(25% - 21px);
    min-width:260px;
    background:var(--white);
    border-radius:20px;
    padding:30px 26px;
    box-shadow:0 18px 40px -22px rgba(20,40,120,0.28);
    position:relative;
    transition:transform 0.28s ease, box-shadow 0.28s ease;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .course-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 50px -20px rgba(20,40,120,0.38);
  }

  .course-card .level-tag{
    display:inline-flex;
    align-self:flex-start;
    background:var(--blue-50);
    color:var(--blue-600);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.4px;
    padding:5px 11px;
    border-radius:20px;
    margin-bottom:18px;
  }

  .course-card h3{
    font-size:18px; font-weight:700; color:var(--ink);
    margin:0 0 8px 0;
  }
  .course-card p{
    font-size:14px; line-height:1.55; color:var(--gray-600);
    margin:0 0 22px 0;
    flex-grow:1;
  }

  .explore-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    background:var(--blue-50);
    color:var(--blue-600);
    font-weight:700;
    font-size:14.5px;
    padding:12px 18px;
    border-radius:10px;
    border:none;
    transition:background 0.25s ease, color 0.25s ease, gap 0.25s ease;
  }
  .explore-btn svg{width:15px; height:15px; transition:transform 0.25s ease;}
  .course-card:hover .explore-btn{
    background:var(--blue-600);
    color:var(--white);
  }
  .course-card:hover .explore-btn svg{transform:translateX(3px);}

  /* reuse icon-wrap animations from Services, mapped to course icon classes */
  .icon-webdev2 .brackets-l{transition:transform 0.3s ease;}
  .icon-webdev2 .brackets-r{transition:transform 0.3s ease;}
  .course-card:hover .icon-webdev2 .brackets-l{transform:translateX(-3px);}
  .course-card:hover .icon-webdev2 .brackets-r{transform:translateX(3px);}
  .icon-webdev2 .cursor{animation:blink 1s steps(1) infinite;}

  .icon-java2 .steam{transform-origin:center bottom; opacity:0;}
  .course-card:hover .icon-java2 .steam1{animation:steamRise 1.4s ease-in-out infinite;}
  .course-card:hover .icon-java2 .steam2{animation:steamRise 1.4s ease-in-out 0.3s infinite;}

  .icon-android2 .antenna-l, .icon-android2 .antenna-r{transform-origin:bottom center; transition:transform 0.25s ease;}
  .course-card:hover .icon-android2 .antenna-l{animation:wiggleL 0.6s ease-in-out infinite;}
  .course-card:hover .icon-android2 .antenna-r{animation:wiggleR 0.6s ease-in-out infinite;}

  .icon-python2 .py-body{transform-origin:center; transition:transform 0.4s ease;}
  .course-card:hover .icon-python2 .py-body{animation:spinSlow 2.2s linear infinite;}

  .icon-cloud2 .cloud-shape{transition:transform 0.4s ease;}
  .course-card:hover .icon-cloud2 .cloud-shape{animation:drift 2s ease-in-out infinite;}

  .icon-marketing2 .arc{opacity:0; transform-origin:0% 100%;}
  .course-card:hover .icon-marketing2 .arc1{animation:pulseArc 1.4s ease-out infinite;}
  .course-card:hover .icon-marketing2 .arc2{animation:pulseArc 1.4s ease-out 0.35s infinite;}
  .course-card:hover .icon-marketing2 .arc3{animation:pulseArc 1.4s ease-out 0.7s infinite;}

  .icon-ai2 .node{transform-origin:center; opacity:0.6;}
  .course-card:hover .icon-ai2 .node1{animation:nodePulse 1.2s ease-in-out infinite;}
  .course-card:hover .icon-ai2 .node2{animation:nodePulse 1.2s ease-in-out 0.25s infinite;}
  .course-card:hover .icon-ai2 .node3{animation:nodePulse 1.2s ease-in-out 0.5s infinite;}

  @media (max-width:1100px){
    .course-card{flex:1 1 calc(50% - 14px);}
  }
  @media (max-width:640px){
    .courses-wrap{padding:0 22px 60px 22px;}
    .course-card{flex:1 1 100%;}
  }

  /* ===================================================== */
  /* ---------- BLOG SECTION ---------- */
  /* ===================================================== */
  .blog-wrap{padding:0 56px 90px 56px;}
  .blog-grid{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
  }

  .blog-card{
    flex:1 1 calc(20% - 22.4px);
    min-width:230px;
    background:var(--white);
    border-radius:20px;
    box-shadow:0 18px 40px -22px rgba(20,40,120,0.28);
    position:relative;
    transition:transform 0.28s ease, box-shadow 0.28s ease;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .blog-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 50px -20px rgba(20,40,120,0.38);
  }

  .blog-thumb{
    position:relative;
    width:100%;
    height:148px;
    overflow:hidden;
  }
  .blog-thumb svg{
    width:100%;
    height:100%;
    display:block;
  }
  .blog-thumb .blog-cat{
    position:absolute;
    top:14px; left:14px;
    background:rgba(255,255,255,0.92);
    color:var(--blue-600);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.4px;
    padding:5px 11px;
    border-radius:20px;
    z-index:2;
  }

  .blog-card-body{
    padding:22px 22px 24px 22px;
    display:flex;
    flex-direction:column;
    flex-grow:1;
  }

  .blog-meta{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:600;
    color:var(--blue-400);
    margin-bottom:10px;
  }
  .blog-meta svg{width:13px; height:13px;}
  .blog-meta .dot{
    width:3px; height:3px; border-radius:50%;
    background:var(--blue-300);
    flex-shrink:0;
  }

  .blog-card h3{
    font-size:16.5px; font-weight:700; color:var(--ink);
    margin:0 0 8px 0;
    line-height:1.32;
  }
  .blog-card p{
    font-size:13.5px; line-height:1.55; color:var(--gray-600);
    margin:0 0 20px 0;
    flex-grow:1;
  }

  .read-more-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:none;
    border:none;
    color:var(--blue-600);
    font-weight:700;
    font-size:14px;
    padding:0;
    align-self:flex-start;
  }
  .read-more-btn svg{width:15px; height:15px; transition:transform 0.25s ease;}
  .blog-card:hover .read-more-btn svg{transform:translateX(4px);}

  /* ---- Blog thumbnail animations (play on card hover) ---- */

  /* 1: Resume / document with floating checkmark */
  .blog-thumb .doc-page{transition:transform 0.4s ease;}
  .blog-card:hover .blog-thumb .doc-page{transform:translateY(-2px);}
  .blog-thumb .doc-check{transform-origin:center; opacity:0;}
  .blog-card:hover .blog-thumb .doc-check{animation:popCheck 1.6s ease-in-out infinite;}
  @keyframes popCheck{0%,100%{opacity:0; transform:scale(0.6);}40%{opacity:1; transform:scale(1.1);}60%{opacity:1; transform:scale(1);}}
  .blog-thumb .doc-line{transform-origin:left center;}
  .blog-card:hover .blog-thumb .doc-line1{animation:lineGrow 1.8s ease-in-out infinite;}
  .blog-card:hover .blog-thumb .doc-line2{animation:lineGrow 1.8s ease-in-out 0.2s infinite;}
  .blog-card:hover .blog-thumb .doc-line3{animation:lineGrow 1.8s ease-in-out 0.4s infinite;}
  @keyframes lineGrow{0%,100%{transform:scaleX(0.7);}50%{transform:scaleX(1);}}

  /* 2: Interview / chat bubbles */
  .blog-thumb .chat-bubble{transform-origin:center bottom; transition:transform 0.3s ease;}
  .blog-card:hover .blog-thumb .chat-bubble1{animation:bubbleFloat 2.4s ease-in-out infinite;}
  .blog-card:hover .blog-thumb .chat-bubble2{animation:bubbleFloat 2.4s ease-in-out 0.5s infinite;}
  @keyframes bubbleFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
  .blog-thumb .chat-dot{opacity:0.5;}
  .blog-card:hover .blog-thumb .chat-dot1{animation:dotBlink 1.2s ease-in-out infinite;}
  .blog-card:hover .blog-thumb .chat-dot2{animation:dotBlink 1.2s ease-in-out 0.2s infinite;}
  .blog-card:hover .blog-thumb .chat-dot3{animation:dotBlink 1.2s ease-in-out 0.4s infinite;}
  @keyframes dotBlink{0%,100%{opacity:0.4; transform:translateY(0);}50%{opacity:1; transform:translateY(-2px);}}

  /* 3: Laptop / remote internship, code lines blink + cursor */
  .blog-card:hover .blog-thumb .lap-cursor{animation:blink 1s steps(1) infinite;}
  .blog-thumb .lap-code{transform-origin:left center;}
  .blog-card:hover .blog-thumb .lap-code1{animation:lineGrow 1.8s ease-in-out infinite;}
  .blog-card:hover .blog-thumb .lap-code2{animation:lineGrow 1.8s ease-in-out 0.25s infinite;}
  .blog-thumb .lap-glow{opacity:0.5; transform-origin:center;}
  .blog-card:hover .blog-thumb .lap-glow{animation:nodePulse 1.6s ease-in-out infinite;}

  /* 4: Growth / certificate, ribbon sways + bar grows */
  .blog-thumb .grow-bar{transform-origin:center bottom; transition:transform 0.3s ease;}
  .blog-card:hover .blog-thumb .grow-bar1{animation:growBar 1.4s ease-in-out infinite;}
  .blog-card:hover .blog-thumb .grow-bar2{animation:growBar 1.4s ease-in-out 0.2s infinite;}
  .blog-card:hover .blog-thumb .grow-bar3{animation:growBar 1.4s ease-in-out 0.4s infinite;}
  .blog-thumb .grow-star{transform-origin:center; opacity:0;}
  .blog-card:hover .blog-thumb .grow-star{animation:popCheck 1.8s ease-in-out infinite;}

  /* 5: Networking / LinkedIn-style nodes connecting */
  .blog-thumb .net-line{stroke-dasharray:6 4; opacity:0.5;}
  .blog-card:hover .blog-thumb .net-line{animation:dashMove 1.4s linear infinite;}
  @keyframes dashMove{to{stroke-dashoffset:-20;}}
  .blog-thumb .net-node{transform-origin:center; opacity:0.7;}
  .blog-card:hover .blog-thumb .net-node1{animation:nodePulse 1.3s ease-in-out infinite;}
  .blog-card:hover .blog-thumb .net-node2{animation:nodePulse 1.3s ease-in-out 0.3s infinite;}
  .blog-card:hover .blog-thumb .net-node3{animation:nodePulse 1.3s ease-in-out 0.6s infinite;}

  @media (max-width:1280px){
    .blog-card{flex:1 1 calc(33.33% - 18.7px);}
  }
  @media (max-width:1100px){
    .blog-card{flex:1 1 calc(50% - 14px);}
  }
  @media (max-width:640px){
    .blog-wrap{padding:0 22px 60px 22px;}
    .blog-card{flex:1 1 100%;}
  }

  /* ---- Blog post modal (opened via Read More) ---- */
  .blog-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(11,18,48,0.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:2000;
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:64px 24px;
    overflow-y:auto;
    opacity:0;
    transition:opacity 0.25s ease;
  }
  .blog-modal-overlay.open{
    display:flex;
    opacity:1;
  }
  .blog-modal{
    background:var(--white);
    border-radius:22px;
    max-width:680px;
    width:100%;
    box-shadow:0 40px 80px -20px rgba(11,18,48,0.45);
    position:relative;
    overflow:hidden;
    transform:translateY(18px) scale(0.98);
    transition:transform 0.3s ease;
  }
  .blog-modal-overlay.open .blog-modal{
    transform:translateY(0) scale(1);
  }
  .blog-modal-banner{
    height:120px;
    position:relative;
    overflow:hidden;
  }
  .blog-modal-banner svg{width:100%; height:100%; display:block;}
  .blog-modal-close{
    position:absolute;
    top:18px; right:18px;
    width:36px; height:36px;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    box-shadow:0 4px 14px -4px rgba(20,40,120,0.3);
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .blog-modal-close:hover{
    background:var(--white);
    transform:scale(1.08);
  }
  .blog-modal-close svg{width:16px; height:16px; color:var(--ink);}

  .blog-modal-body{
    padding:34px 38px 42px 38px;
    max-height:72vh;
    overflow-y:auto;
  }
  .blog-modal-meta{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:600;
    color:var(--blue-400);
    margin-bottom:14px;
  }
  .blog-modal-meta svg{width:13px; height:13px;}
  .blog-modal-meta .dot{
    width:3px; height:3px; border-radius:50%;
    background:var(--blue-300);
    flex-shrink:0;
  }
  .blog-modal-body h2{
    font-size:25px;
    line-height:1.28;
    font-weight:800;
    color:var(--ink);
    margin:0 0 18px 0;
    letter-spacing:-0.3px;
  }
  .blog-modal-body h4{
    font-size:16px;
    font-weight:700;
    color:var(--blue-600);
    margin:26px 0 10px 0;
  }
  .blog-modal-body p{
    font-size:15px;
    line-height:1.7;
    color:var(--gray-600);
    margin:0 0 14px 0;
  }
  .blog-modal-body ul{
    margin:0 0 14px 0;
    padding-left:20px;
  }
  .blog-modal-body li{
    font-size:15px;
    line-height:1.65;
    color:var(--gray-600);
    margin-bottom:8px;
  }
  .blog-modal-body li strong{color:var(--ink);}
  .blog-modal-cta{
    margin-top:28px;
    padding:20px 22px;
    background:var(--blue-50);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  .blog-modal-cta p{
    margin:0;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    flex:1 1 200px;
  }
  .blog-modal-cta a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--blue-600);
    color:var(--white);
    font-weight:700;
    font-size:14px;
    padding:11px 20px;
    border-radius:10px;
    white-space:nowrap;
    flex-shrink:0;
  }
  body.blog-modal-locked{overflow:hidden;}

  @media (max-width:640px){
    .blog-modal-overlay{padding:0;}
    .blog-modal{border-radius:0; min-height:100vh; max-width:100%;}
    .blog-modal-body{padding:28px 22px 36px 22px; max-height:none;}
    .blog-modal-body h2{font-size:22px;}
  }

  /* ===================================================== */
  /* ---------- TUTORIAL VIEWER (Python course) ---------- */
  /* ===================================================== */
  .tutorial-overlay{
    position:fixed;
    inset:0;
    background:rgba(11,18,48,0.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:2100;
    display:none;
    align-items:center;
    justify-content:center;
    padding:36px;
    opacity:0;
    transition:opacity 0.25s ease;
  }
  .tutorial-overlay.open{
    display:flex;
    opacity:1;
  }
  .tutorial-panel{
    background:var(--white);
    border-radius:20px;
    width:100%;
    max-width:1080px;
    height:84vh;
    max-height:760px;
    box-shadow:0 40px 80px -20px rgba(11,18,48,0.45);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transform:translateY(18px) scale(0.98);
    transition:transform 0.3s ease;
  }
  .tutorial-overlay.open .tutorial-panel{
    transform:translateY(0) scale(1);
  }

  .tutorial-topbar{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 22px;
    background:var(--blue-600);
    color:var(--white);
  }
  .tutorial-topbar .tutorial-brand{
    display:flex; align-items:center; gap:10px;
    font-weight:800; font-size:15px; letter-spacing:0.3px;
  }
  .tutorial-topbar .tutorial-brand svg{width:18px; height:18px;}
  .tutorial-topbar-actions{
    display:flex; align-items:center; gap:14px;
  }
  .tutorial-certify-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--white);
    color:var(--blue-600);
    font-weight:700;
    font-size:13.5px;
    padding:9px 18px;
    border-radius:30px;
    border:none;
    white-space:nowrap;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow:0 4px 14px -4px rgba(0,0,0,0.25);
  }
  .tutorial-certify-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px -4px rgba(0,0,0,0.32);
  }
  .tutorial-certify-btn svg{width:14px; height:14px;}
  .tutorial-close{
    width:32px; height:32px;
    border-radius:50%;
    background:rgba(255,255,255,0.18);
    border:none;
    color:var(--white);
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s ease;
  }
  .tutorial-close:hover{background:rgba(255,255,255,0.3);}
  .tutorial-close svg{width:15px; height:15px;}

  .tutorial-body{
    flex:1;
    display:flex;
    min-height:0;
  }

  .tutorial-sidebar{
    width:250px;
    flex-shrink:0;
    background:var(--blue-50);
    border-right:1px solid rgba(26,63,214,0.1);
    overflow-y:auto;
    padding:18px 0 18px 0;
  }
  .tutorial-sidebar-label{
    font-size:11.5px;
    font-weight:800;
    letter-spacing:1.2px;
    color:var(--blue-400);
    padding:0 22px;
    margin-bottom:10px;
  }
  .tutorial-nav-item{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    padding:11px 22px;
    font-size:14px;
    font-weight:500;
    color:var(--ink);
    border-left:3px solid transparent;
    transition:background 0.18s ease, color 0.18s ease;
  }
  .tutorial-nav-item:hover{background:rgba(26,63,214,0.07);}
  .tutorial-nav-item.active{
    background:var(--white);
    color:var(--blue-600);
    font-weight:700;
    border-left-color:var(--blue-600);
  }

  .tutorial-content{
    flex:1;
    overflow-y:auto;
    padding:38px 46px;
  }
  .tutorial-content h2{
    font-size:32px;
    font-weight:800;
    color:var(--ink);
    margin:0 0 22px 0;
    letter-spacing:-0.4px;
  }
  .tutorial-content h3{
    font-size:21px;
    font-weight:700;
    color:var(--ink);
    margin:30px 0 14px 0;
  }
  .tutorial-content p{
    font-size:16px;
    line-height:1.75;
    color:var(--ink);
    margin:0 0 18px 0;
  }
  .tutorial-content ul{
    margin:0 0 18px 0;
    padding-left:24px;
  }
  .tutorial-content li{
    font-size:16px;
    line-height:1.85;
    color:var(--ink);
    margin-bottom:4px;
  }
  .tutorial-content code{
    background:var(--blue-50);
    color:var(--blue-600);
    padding:2px 7px;
    border-radius:5px;
    font-family:'Consolas','Monaco',monospace;
    font-size:14.5px;
  }
  .tutorial-content .tutorial-code-block{
    background:#0d1230;
    border-radius:10px;
    padding:16px 20px;
    margin:0 0 20px 0;
    overflow-x:auto;
  }
  .tutorial-content .tutorial-code-block pre{
    margin:0;
    font-family:'Consolas','Monaco',monospace;
    font-size:14.5px;
    line-height:1.6;
    color:#eef3fe;
  }
  .tutorial-content .tutorial-code-block .code-str{color:#9cc0fb;}
  .tutorial-content .tutorial-footnav{
    display:flex;
    justify-content:space-between;
    margin-top:34px;
    padding-top:22px;
    border-top:1px solid var(--blue-100);
  }
  .tutorial-content .tutorial-footnav button{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--blue-50);
    color:var(--blue-600);
    font-weight:700;
    font-size:14px;
    padding:11px 18px;
    border-radius:9px;
    border:none;
  }
  .tutorial-content .tutorial-footnav button:disabled{
    opacity:0.4;
  }
  .tutorial-content .tutorial-footnav svg{width:14px; height:14px;}

  body.tutorial-locked{overflow:hidden;}

  @media (max-width:900px){
    .tutorial-panel{height:90vh;}
    .tutorial-sidebar{width:200px;}
    .tutorial-content{padding:30px 26px;}
  }
  @media (max-width:640px){
    .tutorial-overlay{padding:0;}
    .tutorial-panel{border-radius:0; height:100vh; max-height:none;}
    .tutorial-body{flex-direction:column;}
    .tutorial-sidebar{
      width:100%; height:auto; max-height:140px;
      border-right:none; border-bottom:1px solid rgba(26,63,214,0.1);
      display:flex; overflow-x:auto; padding:10px 0;
    }
    .tutorial-sidebar-label{display:none;}
    .tutorial-nav-item{
      white-space:nowrap; border-left:none; border-bottom:3px solid transparent;
      padding:10px 16px;
    }
    .tutorial-nav-item.active{border-left-color:transparent; border-bottom-color:var(--blue-600);}
    .tutorial-content{padding:24px 20px;}
    .tutorial-content h2{font-size:26px;}
  }

  /* ===================================================== */
  /* ---------- INTERNSHIPS SECTION ---------- */
  /* ===================================================== */
  .internships-wrap{padding:0 56px 90px 56px;}
  .internships-grid{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
  }

  .internship-card{
    flex:1 1 calc(25% - 21px);
    min-width:260px;
    background:var(--white);
    border-radius:20px;
    padding:30px 26px;
    box-shadow:0 18px 40px -22px rgba(20,40,120,0.28);
    position:relative;
    transition:transform 0.28s ease, box-shadow 0.28s ease;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .internship-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 50px -20px rgba(20,40,120,0.38);
  }

  .internship-card .duration-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    background:var(--blue-50);
    color:var(--blue-600);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.4px;
    padding:5px 11px;
    border-radius:20px;
    margin-bottom:18px;
  }
  .internship-card .duration-tag svg{width:11px;height:11px;flex-shrink:0;}

  .internship-card h3{
    font-size:18px; font-weight:700; color:var(--ink);
    margin:0 0 8px 0;
  }
  .internship-card p{
    font-size:14px; line-height:1.55; color:var(--gray-600);
    margin:0 0 22px 0;
    flex-grow:1;
  }

  .apply-card-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    background:var(--blue-600);
    color:var(--white);
    font-weight:700;
    font-size:14.5px;
    padding:13px 18px;
    border-radius:10px;
    border:none;
    box-shadow:0 10px 22px -8px rgba(26,63,214,0.5);
    transition:background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  }
  .apply-card-btn svg{width:15px; height:15px; transition:transform 0.25s ease;}
  .apply-card-btn:hover{
    background:var(--blue-700);
    box-shadow:0 14px 28px -8px rgba(26,63,214,0.6);
  }
  .apply-card-btn:hover svg{transform:translateX(3px);}

  /* reuse icon-wrap animations, mapped to internship icon classes */
  .icon-webdev3 .brackets-l{transition:transform 0.3s ease;}
  .icon-webdev3 .brackets-r{transition:transform 0.3s ease;}
  .internship-card:hover .icon-webdev3 .brackets-l{transform:translateX(-3px);}
  .internship-card:hover .icon-webdev3 .brackets-r{transform:translateX(3px);}
  .icon-webdev3 .cursor{animation:blink 1s steps(1) infinite;}

  .icon-java3 .steam{transform-origin:center bottom; opacity:0;}
  .internship-card:hover .icon-java3 .steam1{animation:steamRise 1.4s ease-in-out infinite;}
  .internship-card:hover .icon-java3 .steam2{animation:steamRise 1.4s ease-in-out 0.3s infinite;}

  .icon-android3 .antenna-l, .icon-android3 .antenna-r{transform-origin:bottom center; transition:transform 0.25s ease;}
  .internship-card:hover .icon-android3 .antenna-l{animation:wiggleL 0.6s ease-in-out infinite;}
  .internship-card:hover .icon-android3 .antenna-r{animation:wiggleR 0.6s ease-in-out infinite;}

  .icon-python3 .py-body{transform-origin:center; transition:transform 0.4s ease;}
  .internship-card:hover .icon-python3 .py-body{animation:spinSlow 2.2s linear infinite;}

  .icon-cloud3 .cloud-shape{transition:transform 0.4s ease;}
  .internship-card:hover .icon-cloud3 .cloud-shape{animation:drift 2s ease-in-out infinite;}

  .icon-marketing3 .arc{opacity:0; transform-origin:0% 100%;}
  .internship-card:hover .icon-marketing3 .arc1{animation:pulseArc 1.4s ease-out infinite;}
  .internship-card:hover .icon-marketing3 .arc2{animation:pulseArc 1.4s ease-out 0.35s infinite;}
  .internship-card:hover .icon-marketing3 .arc3{animation:pulseArc 1.4s ease-out 0.7s infinite;}

  .icon-design3 .pen{transform-origin:80% 80%; transition:transform 0.3s ease;}
  .internship-card:hover .icon-design3 .pen{animation:penDraw 1.1s ease-in-out infinite;}

  .icon-data3 .bar1, .icon-data3 .bar2, .icon-data3 .bar3{transform-origin:center bottom; transition:transform 0.3s ease;}
  .internship-card:hover .icon-data3 .bar1{animation:growBar 1.2s ease-in-out infinite;}
  .internship-card:hover .icon-data3 .bar2{animation:growBar 1.2s ease-in-out 0.15s infinite;}
  .internship-card:hover .icon-data3 .bar3{animation:growBar 1.2s ease-in-out 0.3s infinite;}

  .icon-security3 .shield{transform-origin:center; transition:transform 0.3s ease;}
  .internship-card:hover .icon-security3 .shield{animation:shieldPulse 1.3s ease-in-out infinite;}

  .icon-datascience3 .orbit-dot{transform-origin:16px 16px;}
  .internship-card:hover .icon-datascience3 .orbit-dot{animation:orbit 1.8s linear infinite;}

  .icon-ai3 .node{transform-origin:center; opacity:0.6;}
  .internship-card:hover .icon-ai3 .node1{animation:nodePulse 1.2s ease-in-out infinite;}
  .internship-card:hover .icon-ai3 .node2{animation:nodePulse 1.2s ease-in-out 0.25s infinite;}
  .internship-card:hover .icon-ai3 .node3{animation:nodePulse 1.2s ease-in-out 0.5s infinite;}

  .icon-ml3 .gear{transform-origin:center; transition:transform 0.4s ease;}
  .internship-card:hover .icon-ml3 .gear{animation:spinSlow 3s linear infinite;}

  @media (max-width:1100px){
    .internship-card{flex:1 1 calc(50% - 14px);}
  }
  @media (max-width:640px){
    .internships-wrap{padding:0 22px 60px 22px;}
    .internship-card{flex:1 1 100%;}
  }

  /* ===================================================== */
  /* ---------- ABOUT US SECTION ---------- */
  /* ===================================================== */
  .about-wrap{padding:0 56px 30px 56px;}
  .about-intro{
    max-width:880px;
    margin:0 auto 70px auto;
    text-align:center;
  }
  .about-intro p{
    font-size:16.5px;
    line-height:1.75;
    color:var(--gray-600);
    margin:0;
  }

  .team-heading{
    text-align:center;
    margin-bottom:46px;
  }
  .team-heading span.eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--white); color:var(--blue-600);
    font-size:13px; font-weight:700; letter-spacing:0.6px;
    padding:9px 18px; border-radius:30px; margin-bottom:18px;
    box-shadow:0 4px 14px -4px rgba(20,40,120,0.18);
  }
  .team-heading span.eyebrow svg{width:14px;height:14px;}
  .team-heading h2{
    font-size:36px; line-height:1.2; font-weight:800;
    letter-spacing:-0.4px; margin:0; color:var(--ink);
  }
  .team-heading h2 .accent{color:var(--blue-600);}

  .team-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:36px;
    padding-bottom:90px;
  }

  .team-card{
    flex:0 1 320px;
    background:var(--white);
    border-radius:22px;
    padding:40px 0 34px 0;
    box-shadow:0 18px 40px -22px rgba(20,40,120,0.28);
    text-align:center;
    overflow:hidden;
    transition:transform 0.28s ease, box-shadow 0.28s ease;
  }
  .team-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 50px -20px rgba(20,40,120,0.38);
  }

  .team-photo-wrap{
    width:168px;
    height:168px;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    margin:0 auto 26px auto;
    background:#eeebe3;
    box-shadow:0 0 0 6px var(--blue-50), 0 14px 30px -14px rgba(20,40,120,0.45);
  }
  .team-photo-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .team-card h3{
    font-size:20px; font-weight:700; color:var(--ink);
    margin:0 0 8px 0;
  }
  .team-card .role-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--blue-50);
    color:var(--blue-600);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.3px;
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:14px;
  }
  .team-card p.bio{
    font-size:13.5px;
    line-height:1.55;
    color:var(--gray-600);
    margin:0;
    padding:0 26px;
  }

  @media (max-width:640px){
    .about-wrap{padding:0 22px 30px 22px;}
    .about-intro{margin-bottom:48px;}
    .team-heading h2{font-size:28px;}
    .team-card{flex:1 1 100%; max-width:360px;}
  }

  /* ===================================================== */
  /* ---------- CONTACT US SECTION ---------- */
  /* ===================================================== */
  /* ---- CONTACT SECTION (centered card design) ---- */
  .contact-wrap{
    padding:0 24px 90px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .contact-center{
    width:100%;
    max-width:640px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  /* Email card */
  .contact-email-card{
    width:100%;
    background:var(--white);
    border-radius:24px;
    box-shadow:0 20px 60px -16px rgba(20,40,120,0.18), 0 2px 8px -2px rgba(20,40,120,0.08);
    padding:52px 40px 46px;
    margin-bottom:32px;
    transition:box-shadow 0.25s;
  }
  .contact-email-card:hover{
    box-shadow:0 28px 72px -16px rgba(20,40,120,0.24), 0 4px 12px -2px rgba(20,40,120,0.10);
  }
  .contact-icon-wrap{
    width:90px; height:90px;
    border-radius:50%;
    background:var(--blue-50);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
  }
  .contact-icon-wrap svg{width:40px; height:40px; color:var(--blue-600);}
  .contact-email-card h2{
    font-size:22px; font-weight:700; color:var(--ink);
    margin:0 0 10px 0;
  }
  .contact-email-card p{
    font-size:15.5px; line-height:1.65; color:var(--gray-600);
    margin:0 0 20px 0;
  }
  .contact-email-link{
    display:inline-block;
    font-size:17px; font-weight:600;
    color:var(--blue-600);
    text-decoration:none;
    transition:color 0.2s;
  }
  .contact-email-link:hover{color:var(--blue-800); text-decoration:underline;}

  /* CTA button */
  .contact-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:var(--blue-600);
    color:var(--white);
    font-weight:700;
    font-size:17px;
    padding:18px 52px;
    border-radius:14px;
    border:none;
    cursor:pointer;
    text-decoration:none;
    box-shadow:0 12px 28px -6px rgba(26,63,214,0.55);
    transition:background 0.2s, box-shadow 0.2s, transform 0.15s;
    margin-bottom:14px;
  }
  .contact-cta-btn:hover{
    background:var(--blue-700);
    box-shadow:0 16px 34px -6px rgba(26,63,214,0.65);
    transform:translateY(-1px);
  }
  .contact-cta-btn:active{transform:translateY(0);}
  .contact-cta-btn svg{width:18px; height:18px;}
  .contact-hint{font-size:14px; color:var(--gray-600); margin-top:4px;}

  @media (max-width:640px){
    .contact-email-card{padding:36px 22px 32px;}
    .contact-cta-btn{padding:16px 32px; font-size:15px;}
  }

  /* ===================================================== */
  /* ---------- MOCK SECTION ---------- */
  /* ===================================================== */
  .mock-section{
    padding:80px 56px 0 56px;
  }

  /* Two cards side by side */
  .mock-cards-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    margin-bottom:72px;
  }

  .mock-card{
    background:var(--white);
    border-radius:28px;
    padding:44px 40px 40px 40px;
    box-shadow:0 24px 56px -24px rgba(20,40,120,0.28);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:0;
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .mock-card:hover{
    transform:translateY(-6px);
    box-shadow:0 36px 72px -24px rgba(20,40,120,0.38);
  }

  /* Decorative gradient blob */
  .mock-card::before{
    content:"";
    position:absolute;
    top:-60px; right:-60px;
    width:220px; height:220px;
    border-radius:50%;
    opacity:0.07;
    pointer-events:none;
  }
  .mock-card.interview::before{background:radial-gradient(circle,#1a3fd6,transparent);}
  .mock-card.exam::before{background:radial-gradient(circle,#13309c,transparent);}

  .mock-card-icon-wrap{
    width:72px; height:72px;
    border-radius:20px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:28px;
    position:relative;
    z-index:1;
    flex-shrink:0;
  }
  .mock-card.interview .mock-card-icon-wrap{
    background:linear-gradient(135deg,#1a3fd6,#5b8df9);
  }
  .mock-card.exam .mock-card-icon-wrap{
    background:linear-gradient(135deg,#10257a,#1a3fd6);
  }
  .mock-card-icon-wrap svg{width:36px;height:36px;}

  .mock-card-badge{
    position:absolute;
    top:24px; right:24px;
    background:var(--blue-50);
    color:var(--blue-600);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.5px;
    padding:5px 13px;
    border-radius:20px;
    z-index:2;
  }

  .mock-card h2{
    font-size:26px;
    font-weight:800;
    color:var(--ink);
    margin:0 0 12px 0;
    line-height:1.2;
  }
  .mock-card h2 .accent{color:var(--blue-600);}

  .mock-card p{
    font-size:15px;
    line-height:1.65;
    color:var(--gray-600);
    margin:0 0 28px 0;
  }

  /* Feature list inside card */
  .mock-features{
    list-style:none;
    margin:0 0 32px 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .mock-features li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:500;
    color:var(--ink);
  }
  .mock-features li .check{
    width:22px; height:22px;
    border-radius:50%;
    background:var(--blue-50);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .mock-features li .check svg{width:12px;height:12px;}

  .mock-apply-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--blue-600);
    color:var(--white);
    font-weight:700;
    font-size:15.5px;
    padding:16px 30px;
    border-radius:12px;
    border:none;
    box-shadow:0 10px 28px -8px rgba(26,63,214,0.5);
    cursor:pointer;
    transition:background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    align-self:flex-start;
    margin-top:auto;
  }
  .mock-apply-btn:hover{
    background:var(--blue-700);
    transform:translateY(-2px);
    box-shadow:0 14px 32px -8px rgba(26,63,214,0.6);
  }
  .mock-apply-btn svg{width:17px;height:17px;}

  /* Info strip (stats row) */
  .mock-info-strip{
    display:flex;
    gap:16px;
    margin-bottom:32px;
    flex-wrap:wrap;
  }
  .mock-info-pill{
    display:flex;
    align-items:center;
    gap:7px;
    background:var(--blue-50);
    color:var(--blue-700);
    font-size:13px;
    font-weight:600;
    padding:8px 16px;
    border-radius:30px;
  }
  .mock-info-pill svg{width:14px;height:14px;flex-shrink:0;}

  /* ---- GALLERY ---- */
  .mock-gallery-wrap{
    margin-bottom:90px;
  }
  .mock-gallery-label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gray-600);
    margin-bottom:20px;
  }
  .mock-gallery-label span{
    display:inline-block;
    width:32px; height:2px;
    background:var(--blue-300);
    border-radius:2px;
  }

  /* Carousel track */
  .mock-gallery{
    display:flex;
    gap:20px;
    overflow:hidden;
    border-radius:20px;
    position:relative;
  }
  .mock-gallery-track{
    display:flex;
    gap:20px;
    animation:galleryScroll 18s linear infinite;
    will-change:transform;
  }
  .mock-gallery:hover .mock-gallery-track{
    animation-play-state:paused;
  }

  @keyframes galleryScroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }

  .mock-gallery-slide{
    flex-shrink:0;
    width:320px;
    height:210px;
    border-radius:18px;
    position:relative;
    overflow:hidden;
    box-shadow:0 16px 40px -16px rgba(20,40,120,0.3);
  }

  /* Each slide is an SVG illustration */
  .mock-gallery-slide svg{
    width:100%;height:100%;
    display:block;
  }

  /* Slide label overlay */
  .slide-label{
    position:absolute;
    bottom:0; left:0; right:0;
    background:linear-gradient(to top, rgba(10,25,100,0.88), transparent);
    padding:32px 18px 16px 18px;
    color:#fff;
    font-size:13px;
    font-weight:600;
  }
  .slide-label strong{
    display:block;
    font-size:15px;
    font-weight:800;
    margin-bottom:2px;
  }

  @media(max-width:1100px){
    .mock-cards-row{grid-template-columns:1fr;}
    .mock-gallery-slide{width:280px; height:185px;}
  }
  @media(max-width:640px){
    .mock-section{padding:56px 22px 0 22px;}
    .mock-card{padding:32px 24px 28px 24px;}
    .mock-card h2{font-size:22px;}
    .mock-gallery-slide{width:240px; height:160px;}
  }

  /* ===================================================== */
  /* ---------- FAQ SECTION ---------- */
  /* ===================================================== */
  .faq-wrap{padding:0 56px 100px 56px;}
  .faq-list{
    max-width:840px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .faq-item{
    background:var(--white);
    border-radius:16px;
    box-shadow:0 14px 32px -22px rgba(20,40,120,0.28);
    overflow:hidden;
    transition:box-shadow 0.25s ease;
  }
  .faq-item.open{
    box-shadow:0 20px 40px -20px rgba(20,40,120,0.36);
  }

  .faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    background:none;
    border:none;
    text-align:left;
    padding:22px 26px;
    cursor:pointer;
    font-family:inherit;
  }
  .faq-question h4{
    font-size:15.5px;
    font-weight:700;
    color:var(--ink);
    margin:0;
    line-height:1.4;
  }
  .faq-toggle-icon{
    flex-shrink:0;
    width:30px; height:30px;
    border-radius:50%;
    background:var(--blue-50);
    color:var(--blue-600);
    display:flex; align-items:center; justify-content:center;
    transition:background 0.25s ease, transform 0.3s ease;
  }
  .faq-item.open .faq-toggle-icon{
    background:var(--blue-600);
    color:var(--white);
    transform:rotate(45deg);
  }
  .faq-toggle-icon svg{width:14px;height:14px;}

  .faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease, padding 0.35s ease;
  }
  .faq-item.open .faq-answer{
    max-height:300px;
  }
  .faq-answer p{
    font-size:14px;
    line-height:1.65;
    color:var(--gray-600);
    margin:0;
    padding:0 26px 24px 26px;
  }

  @media (max-width:640px){
    .faq-wrap{padding:0 22px 60px 22px;}
    .faq-question{padding:18px 20px;}
    .faq-answer p{padding:0 20px 20px 20px;}
  }

  /* ===================================================== */
  /* ---------- FOOTER ---------- */
  /* ===================================================== */
  .site-footer{
    background:linear-gradient(135deg, #0b1f6b 0%, #10257a 50%, #1a3fd6 100%);
    color:rgba(255,255,255,0.82);
    padding:72px 56px 0 56px;
    position:relative;
    overflow:hidden;
  }
  .site-footer::before{
    content:"";
    position:absolute;
    top:-120px; right:-120px;
    width:400px; height:400px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(91,141,249,0.18) 0%, transparent 70%);
    pointer-events:none;
  }
  .site-footer::after{
    content:"";
    position:absolute;
    bottom:-80px; left:-80px;
    width:300px; height:300px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(156,192,251,0.12) 0%, transparent 70%);
    pointer-events:none;
  }

  .footer-top{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:48px;
    padding-bottom:56px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    position:relative;
    z-index:2;
  }

  /* Brand column */
  .footer-brand{}
  .footer-logo{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
  }
  .footer-logo-text{
    font-size:20px;
    font-weight:800;
    color:#ffffff;
    letter-spacing:0.2px;
    line-height:1.05;
  }
  .footer-logo-text .crowd{
    color:var(--blue-300);
    display:block;
  }
  .footer-tagline{
    font-size:14px;
    line-height:1.65;
    color:rgba(255,255,255,0.62);
    margin:0 0 28px 0;
    max-width:260px;
  }
  .footer-social{
    display:flex;
    gap:12px;
  }
  .footer-social a{
    width:38px; height:38px;
    border-radius:10px;
    background:rgba(255,255,255,0.1);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.8);
    transition:background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    border:1px solid rgba(255,255,255,0.08);
  }
  .footer-social a:hover{
    background:var(--blue-500);
    color:#fff;
    transform:translateY(-3px);
  }
  .footer-social a svg{width:17px;height:17px;}

  /* Nav columns */
  .footer-col h4{
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:rgba(255,255,255,0.45);
    margin:0 0 20px 0;
  }
  .footer-col ul{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .footer-col ul li a{
    font-size:14.5px;
    color:rgba(255,255,255,0.72);
    transition:color 0.22s ease, padding-left 0.22s ease;
    display:inline-block;
  }
  .footer-col ul li a:hover{
    color:#ffffff;
    padding-left:4px;
  }

  /* Newsletter */
  .footer-newsletter{
    grid-column: span 1;
  }
  .footer-newsletter p{
    font-size:14px;
    color:rgba(255,255,255,0.6);
    margin:0 0 18px 0;
    line-height:1.6;
  }
  .newsletter-form{
    display:flex;
    gap:0;
    border-radius:10px;
    overflow:hidden;
    border:1.5px solid rgba(255,255,255,0.15);
  }
  .newsletter-form input{
    flex:1;
    background:rgba(255,255,255,0.08);
    border:none;
    outline:none;
    padding:13px 16px;
    font-size:14px;
    color:#fff;
    font-family:inherit;
  }
  .newsletter-form input::placeholder{color:rgba(255,255,255,0.4);}
  .newsletter-form button{
    background:var(--blue-500);
    border:none;
    padding:13px 18px;
    color:#fff;
    font-weight:700;
    font-size:13.5px;
    cursor:pointer;
    transition:background 0.22s ease;
    white-space:nowrap;
    font-family:inherit;
  }
  .newsletter-form button:hover{background:var(--blue-600);}

  /* Stats row */
  .footer-stats{
    display:flex;
    gap:40px;
    margin-top:28px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .footer-stat-item{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .footer-stat-item .stat-num{
    font-size:22px;
    font-weight:800;
    color:#fff;
    letter-spacing:-0.5px;
  }
  .footer-stat-item .stat-label{
    font-size:12px;
    color:rgba(255,255,255,0.45);
    font-weight:500;
  }

  /* Bottom bar */
  .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 0;
    position:relative;
    z-index:2;
  }
  .footer-bottom p{
    font-size:13px;
    color:rgba(255,255,255,0.4);
    margin:0;
  }
  .footer-bottom p a{
    color:rgba(255,255,255,0.6);
    transition:color 0.2s;
  }
  .footer-bottom p a:hover{color:#fff;}
  .footer-bottom-links{
    display:flex;
    gap:24px;
  }
  .footer-bottom-links a{
    font-size:13px;
    color:rgba(255,255,255,0.4);
    transition:color 0.2s;
  }
  .footer-bottom-links a:hover{color:rgba(255,255,255,0.8);}

  @media(max-width:1100px){
    .footer-top{grid-template-columns:1fr 1fr;}
    .footer-newsletter{grid-column:span 2;}
  }
  @media(max-width:640px){
    .site-footer{padding:56px 22px 0 22px;}
    .footer-top{grid-template-columns:1fr; gap:36px;}
    .footer-newsletter{grid-column:span 1;}
    .footer-stats{flex-wrap:wrap; gap:24px;}
    .footer-bottom{flex-direction:column; gap:12px; text-align:center;}
    .footer-bottom-links{justify-content:center; flex-wrap:wrap; gap:16px;}
  }
  /* ===================================================== */
  /* ---------- CERTIFICATE VERIFICATION SECTION ---------- */
  /* ===================================================== */
  .cert-verify-wrap{
    max-width:680px;
    margin:0 auto;
    padding:0 22px 90px 22px;
  }
  .verify-card{
    background:var(--white);
    border-radius:20px;
    padding:30px 30px;
    box-shadow:0 18px 40px -22px rgba(20,40,120,0.28);
    margin-bottom:28px;
  }
  .verify-card label{
    display:block; font-size:13px; font-weight:700;
    color:var(--ink); margin-bottom:10px; letter-spacing:0.2px;
  }
  .verify-row{display:flex; gap:12px;}
  .verify-row input{
    flex:1;
    font-family:inherit;
    font-size:15px;
    padding:14px 18px;
    border-radius:10px;
    border:1.5px solid rgba(26,63,214,0.16);
    background:var(--blue-50);
    color:var(--ink);
    outline:none;
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .verify-row input:focus{
    border-color:var(--blue-500);
    background:var(--white);
  }
  .verify-btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--blue-600);
    color:var(--white);
    font-weight:700;
    font-size:15px;
    padding:14px 24px;
    border-radius:10px;
    border:none;
    box-shadow:0 8px 20px -6px rgba(26,63,214,0.55);
    white-space:nowrap;
    transition:transform 0.2s ease;
  }
  .verify-btn:hover{transform:translateY(-1px);}
  .verify-btn svg{width:16px; height:16px;}
  .verify-hint{font-size:12.5px; color:var(--gray-600); margin-top:10px;}

  .result{display:none;}
  .result.show{display:block; animation:certFadeUp 0.4s ease;}
  @keyframes certFadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

  .status-msg{
    display:flex; align-items:flex-start; gap:14px;
    border-radius:16px;
    padding:22px 24px;
    margin-bottom:28px;
  }
  .status-msg svg{width:22px; height:22px; flex-shrink:0; margin-top:1px;}
  .status-msg h3{margin:0 0 4px 0; font-size:16px; font-weight:800;}
  .status-msg p{margin:0; font-size:14px; line-height:1.55;}
  .status-msg.not-found{background:#fdecea; color:#c5341f;}
  .status-msg.not-found h3{color:#c5341f;}
  .status-msg.not-found p{color:#8a2718;}
  .status-msg.pending{background:#fff6e6; color:#b5790a;}
  .status-msg.pending h3{color:#b5790a;}
  .status-msg.pending p{color:#7a5408;}

  .cert-card{
    background:var(--white);
    border-radius:20px;
    padding:0;
    box-shadow:0 24px 50px -22px rgba(20,40,120,0.35);
    overflow:hidden;
    border:1px solid rgba(26,63,214,0.08);
  }
  .cert-verified-banner{
    display:flex; align-items:center; gap:10px;
    background:#e9f9f0;
    color:#1c9a5b;
    font-weight:800;
    font-size:13.5px;
    letter-spacing:0.3px;
    padding:14px 28px;
  }
  .cert-verified-banner svg{width:18px; height:18px;}
  .cert-body{padding:34px 36px 30px 36px;}
  .cert-logo{font-size:17px; font-weight:800; letter-spacing:1px; color:var(--blue-600); margin-bottom:22px;}
  .cert-body p{font-size:15px; line-height:1.7; color:var(--ink); margin:0 0 16px 0;}
  .cert-body p strong{color:var(--blue-700);}
  .cert-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    background:var(--blue-50);
    border-radius:14px;
    padding:20px 22px;
    margin:20px 0 26px 0;
  }
  .cert-meta-item .label{
    font-size:11.5px; font-weight:700; letter-spacing:0.4px;
    color:var(--blue-500); text-transform:uppercase; margin-bottom:4px;
  }
  .cert-meta-item .value{font-size:14.5px; font-weight:700; color:var(--ink);}
  .cert-sincerely{
    border-top:1px solid rgba(26,63,214,0.1);
    padding-top:22px; margin-top:8px;
  }
  .cert-sincerely h6{margin:0 0 4px 0; font-size:13px; color:var(--gray-600); font-weight:600;}
  .cert-sincerely .name{margin:0; font-size:16px; font-weight:800; color:var(--ink);}
  .cert-sincerely .designation, .cert-sincerely .company{margin:2px 0 0 0; font-size:13.5px; color:var(--gray-600);}

  @media (max-width:560px){
    .verify-row{flex-direction:column;}
    .cert-meta{grid-template-columns:1fr;}
    .cert-body{padding:26px 22px 24px 22px;}
  }


  /* ========== DARK MODE ========== */
  .dark-mode-toggle {
    background: none;
    border: 1.5px solid rgba(26,63,214,0.25);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
  }
  .dark-mode-toggle:hover {
    background: var(--blue-100);
    border-color: var(--blue-400);
  }
  .dark-mode-toggle svg { width:18px; height:18px; }
  .dark-mode-toggle .icon-sun { display:none; }
  .dark-mode-toggle .icon-moon { display:block; }

  html.dark .dark-mode-toggle .icon-sun { display:block; }
  html.dark .dark-mode-toggle .icon-moon { display:none; }
  html.dark .dark-mode-toggle {
    border-color: rgba(155,180,255,0.3);
    color: #c5d5ff;
  }
  html.dark .dark-mode-toggle:hover {
    background: rgba(91,141,249,0.15);
  }

  html.dark {
    --ink: #e0e8ff;
    --gray-600: #9aaacb;
    --white: #1a2140;
    --blue-50: #0f1629;
    --blue-100: #1a2545;
    --blue-300: #3a5599;
    --blue-400: #5b8df9;
  }

  html.dark body {
    background: #0d1530;
    color: #e0e8ff;
  }

  html.dark .page {
    background: linear-gradient(180deg, #0d1530 0%, #0d1530 14%, #111e3a 30%, #0d1530 42%, #0d1530 100%);
  }

  html.dark header {
    background: rgba(13,21,48,0.92);
    border-bottom: 1px solid rgba(91,141,249,0.15);
    box-shadow: 0 4px 24px -8px rgba(0,0,0,0.4);
  }
  html.dark header.scrolled {
    background: rgba(13,21,48,0.98);
  }

  html.dark nav a { color: #c5d5ff; }
  html.dark nav a.active { color: #7aadff; }
  html.dark nav a.active::after { background: #7aadff; }

  html.dark .logo-text { color: #e0e8ff; }

  html.dark .feature-strip {
    background: #131e3a;
    box-shadow: 0 24px 50px -20px rgba(0,0,0,0.5);
  }
  html.dark .feature h3 { color: #e0e8ff; }
  html.dark .feature p { color: #9aaacb; }
  html.dark .feature + .feature::before { background: #1e2d50; }

  html.dark .eyebrow {
    background: #131e3a;
    box-shadow: 0 4px 14px -4px rgba(0,0,0,0.3);
  }
  html.dark .headline { color: #e0e8ff; }
  html.dark .subcopy { color: #9aaacb; }

  html.dark .section-label { color: #7aadff; }
  html.dark .section-title { color: #e0e8ff; }
  html.dark .section-sub { color: #9aaacb; }

  html.dark .service-card,
  html.dark .course-card,
  html.dark .internship-card {
    background: #131e3a;
    border-color: #1e2d50;
  }
  html.dark .service-card h3,
  html.dark .course-card h3,
  html.dark .internship-card h3 { color: #e0e8ff; }
  html.dark .service-card p,
  html.dark .course-card p,
  html.dark .internship-card p { color: #9aaacb; }

  html.dark .mock-card {
    background: #131e3a;
    border-color: #1e2d50;
  }
  html.dark .mock-card h2 { color: #e0e8ff; }
  html.dark .mock-card p { color: #9aaacb; }
  html.dark .mock-info-pill {
    background: #1a2545;
    color: #9aaacb;
    border-color: #1e2d50;
  }
  html.dark .mock-features li { color: #9aaacb; }

  html.dark .blog-card {
    background: #131e3a;
    border-color: #1e2d50;
  }
  html.dark .blog-card h3 { color: #e0e8ff; }
  html.dark .blog-card p { color: #9aaacb; }

  html.dark .faq-item {
    background: #131e3a;
    border-color: #1e2d50;
  }
  html.dark .faq-q { color: #e0e8ff; }
  html.dark .faq-a { color: #9aaacb; }

  html.dark .contact-form-card,
  html.dark .contact-info-card {
    background: #131e3a;
    border-color: #1e2d50;
  }
  html.dark .contact-form-card label { color: #9aaacb; }
  html.dark .contact-form-card input,
  html.dark .contact-form-card textarea,
  html.dark .contact-form-card select {
    background: #0d1530;
    border-color: #1e2d50;
    color: #e0e8ff;
  }
  html.dark .contact-form-card input::placeholder,
  html.dark .contact-form-card textarea::placeholder { color: #4a5a7a; }

  html.dark footer {
    background: #07101f;
    border-top: 1px solid #1e2d50;
  }
  html.dark .footer-social a {
    background: #131e3a;
    border-color: #1e2d50;
    color: #9aaacb;
  }
  html.dark .footer-social a:hover {
    background: #1a2545;
    color: #7aadff;
  }
  html.dark .stat-num { color: #7aadff; }
  html.dark .stat-label { color: #9aaacb; }
  html.dark .footer-col h4 { color: #e0e8ff; }
  html.dark .footer-col a { color: #9aaacb; }
  html.dark .footer-col a:hover { color: #7aadff; }
  html.dark .footer-bottom { border-top-color: #1e2d50; color: #4a5a7a; }

  html.dark .mobile-menu {
    background: #0d1530;
    border-color: #1e2d50;
  }
  html.dark .mobile-menu a { color: #c5d5ff; border-bottom-color: #1e2d50; }

  html.dark .cert-section { background: #0d1530; }
  html.dark .cert-input-wrap input {
    background: #131e3a;
    border-color: #1e2d50;
    color: #e0e8ff;
  }
  html.dark .cert-result-area { background: #131e3a; }

  html.dark .about-card {
    background: #131e3a;
    border-color: #1e2d50;
  }
  html.dark .about-card p { color: #9aaacb; }

  html.dark .blog-modal-overlay { background: rgba(0,0,0,0.85); }
  html.dark .blog-modal-box {
    background: #131e3a;
    color: #e0e8ff;
  }
  html.dark .blog-modal-box h3,
  html.dark .blog-modal-box h4 { color: #e0e8ff; }
  html.dark .blog-modal-box p,
  html.dark .blog-modal-box li { color: #9aaacb; }
  html.dark .blog-modal-meta { color: #4a5a7a; border-bottom-color: #1e2d50; }
  html.dark .blog-modal-cta {
    background: #1a2545;
    border-color: #2a3d65;
  }
  html.dark .blog-modal-cta p { color: #9aaacb; }

  html.dark .hamburger span { background: #c5d5ff; }