:root {
  --blue: #4dabff;
  --blue-dark: #1e88e5;
  --blue-deeper: #0d47a1;
  --bg: #050f1a;
  --bg2: #071624;
  --bg3: #0a1e35;
  --bg4: #0d2340;
  --text: #e6edf6;
  --muted: #8fa8c4;
  --border: rgba(77,171,255,0.18);
  --glow: rgba(77,171,255,0.08);
}
*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;overflow-x:hidden;}

body::before{
  content:'';position:fixed;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:60px 60px;opacity:0.4;pointer-events:none;z-index:0;
}

/* ===== NAVBAR ===== */
header{position:fixed;width:100%;z-index:1000;top:0;transition:.3s;background:rgba(5,15,26,0.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
header.scrolled{background:rgba(5,15,26,0.98);backdrop-filter:blur(20px);box-shadow:0 6px 24px rgba(0,0,0,0.35);}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 7%;transition:.3s;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo img{height:48px;width:auto;border-radius:8px;}
.logo-text{font-family:'Sora',sans-serif;font-size:25px;font-weight:700;color:var(--blue);letter-spacing:-0.3px;line-height:1.2;}
.nav-links{list-style:none;display:flex;gap:4px;align-items:center;}
.nav-links a{text-decoration:none;color:#fff;padding:6px 12px;border-radius:6px;font-size:15px;font-weight:500;transition:.2s;letter-spacing:0.2px;}
.nav-links a:hover{color:var(--blue);background:var(--glow);}
.nav-cta{background:var(--blue)!important;color:#fff!important;border-radius:8px!important;padding:7px 16px!important;}
.nav-cta:hover{background:var(--blue-dark)!important;transform:translateY(-1px);}
.menu-toggle{display:none;font-size:20px;cursor:pointer;color:var(--text);background:none;border:none;padding:4px;}
.nav-close{display:none;}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 7% 80px;position:relative;overflow:hidden;}
.hero-bg-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;}
.orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(77,171,255,0.12),transparent 70%);top:-100px;left:50%;transform:translateX(-50%);}
.orb2{width:400px;height:400px;background:radial-gradient(circle,rgba(29,110,213,0.08),transparent 70%);bottom:0;right:-100px;}

/* ===== HERO MAGNETIC PARTICLE BACKGROUND (Canvas 2D, no library) ===== */
.hero-particle-canvas{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none; /* never blocks clicks on hero content */
  z-index:0;
}

/* ===== HERO TWO-COLUMN LAYOUT ===== */
.hero-content-wrap{
  position:relative;z-index:1;width:100%;max-width:1220px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;
  text-align:left;
}
.hero-left{text-align:left;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(77,171,255,0.1);border:1px solid rgba(77,171,255,0.25);border-radius:100px;padding:6px 16px;font-size:12.5px;color:var(--blue);margin-bottom:24px;font-weight:600;letter-spacing:1px;}
.hero-badge i{font-size:12px;}
.hero-badge span{width:7px;height:7px;background:var(--blue);border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);}}
.hero h1{font-family:'Sora',sans-serif;font-size:clamp(34px,4.6vw,58px);font-weight:700;line-height:1.15;letter-spacing:-1.3px;margin-bottom:18px;}
.hero h1 .accent{color:var(--blue);position:relative;display:inline-block;}
.hero h1 .accent::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),transparent);border-radius:2px;}
.hero h1 .accent-gradient{
  background:linear-gradient(90deg,var(--blue),var(--blue-deeper));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}
.hero-subtitle{font-size:19px;font-weight:500;color:var(--text);margin:0 0 18px;}
.hero-subtitle .accent-soft{color:var(--blue);font-weight:700;}
.hero p{max-width:560px;margin:0 0 36px;color:var(--muted);font-size:16.5px;line-height:1.75;font-weight:400;}
.hero p strong{color:var(--blue);}
.hero-left .hero-btns{justify-content:flex-start;}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-primary{background:var(--blue);color:#fff;padding:13px 28px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px;transition:.25s;display:inline-flex;align-items:center;gap:8px;letter-spacing:0.2px;}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 12px 30px rgba(77,171,255,0.25);}
.btn-outline{background:transparent;color:var(--blue);padding:13px 28px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px;border:1.5px solid rgba(77,171,255,0.4);transition:.25s;display:inline-flex;align-items:center;gap:8px;}
.btn-outline:hover{border-color:var(--blue);background:rgba(77,171,255,0.08);transform:translateY(-2px);}
.hero-stats{display:flex;gap:40px;justify-content:center;margin-top:60px;flex-wrap:wrap;}
.stat{text-align:center;}
.stat-num{font-family:'Sora',sans-serif;font-size:32px;font-weight:700;color:var(--blue);}
.stat-lbl{font-size:13px;color:var(--muted);margin-top:2px;letter-spacing:0.5px;}

/* ===== HERO RIGHT: ANIMATED CODE PANEL ===== */
.hero-right{display:flex;justify-content:center;}
.code-panel{
  width:100%;max-width:480px;background:var(--bg3);
  border:1px solid rgba(125,211,252,0.32);
  border-radius:18px;overflow:hidden;
  animation:codePanelGlow 6s ease-in-out infinite, codePanelFloat 5s ease-in-out infinite;
}
@keyframes codePanelGlow{
  0%,100%{
    box-shadow:
      0 20px 45px rgba(0,0,0,0.45),
      0 45px 100px rgba(0,0,0,0.45),
      0 0 0 1px rgba(77,171,255,0.28),
      0 0 35px rgba(77,171,255,0.32),
      0 0 80px rgba(77,171,255,0.18),
      0 0 140px rgba(77,171,255,0.09),
      inset 0 0 26px rgba(77,171,255,0.06);
  }
  50%{
    box-shadow:
      0 20px 45px rgba(0,0,0,0.45),
      0 45px 100px rgba(0,0,0,0.45),
      0 0 0 1px rgba(125,211,252,0.45),
      0 0 55px rgba(77,171,255,0.48),
      0 0 105px rgba(77,171,255,0.26),
      0 0 175px rgba(77,171,255,0.12),
      inset 0 0 34px rgba(77,171,255,0.1);
  }
}
@keyframes codePanelFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
@media (prefers-reduced-motion: reduce){
  .code-panel{
    animation:none;
    transform:none;
    box-shadow:
      0 20px 45px rgba(0,0,0,0.45),
      0 45px 100px rgba(0,0,0,0.45),
      0 0 0 1px rgba(125,211,252,0.36),
      0 0 45px rgba(77,171,255,0.38),
      0 0 90px rgba(77,171,255,0.2),
      inset 0 0 28px rgba(77,171,255,0.07);
  }
}
.code-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.02);}
.code-dots{display:flex;gap:7px;}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;}
.dot-red{background:#ff5f56;}
.dot-yellow{background:#ffbd2e;}
.dot-green{background:#27c93f;}
.code-panel-title{font-family:'Space Grotesk',monospace;font-size:12.5px;color:var(--muted);letter-spacing:0.3px;}
.code-tabs{display:flex;gap:2px;padding:10px 14px 0;background:rgba(255,255,255,0.015);border-bottom:1px solid var(--border);}
.code-tab{font-family:'Space Grotesk',monospace;font-size:12px;color:var(--muted);padding:8px 14px;border-radius:8px 8px 0 0;cursor:default;}
.code-tab.active{color:var(--blue);background:var(--bg4);font-weight:600;border:1px solid var(--border);border-bottom:1px solid var(--bg4);margin-bottom:-1px;}
.code-body{padding:22px 20px 24px;font-family:'Space Grotesk',monospace;font-size:13.5px;line-height:1.85;}
.code-line{white-space:nowrap;color:var(--muted);}
.code-line.indent{padding-left:22px;}
.code-key{color:var(--blue);}
.code-str{color:#a8f0d8;}
.code-punc{color:var(--muted);}
.code-line-ticker{display:flex;align-items:center;white-space:nowrap;}

/* Horizontal ticker: a single line of service names scrolling right to
   left inside a fixed-width, overflow-hidden window — this keeps it
   strictly on one line (no wrapping/overlap into the code lines below). */
.services-ticker{
  display:inline-block;height:23.5px;line-height:23.5px;overflow:hidden;
  vertical-align:middle;width:190px;position:relative;
}
.services-ticker-track{
  display:inline-block;white-space:nowrap;color:#a8f0d8;font-weight:600;
  animation:servicesTickerH 16s linear infinite;
  will-change:transform;
}
.services-ticker-track i{
  font-style:normal;color:rgba(168,240,216,.4);margin:0 12px;
}
@keyframes servicesTickerH{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .services-ticker-track{animation:none;}
}


/* ===== SECTION BASE ===== */
.section{padding:100px 7%;position:relative;z-index:1;}
.section-label{font-size:12px;color:var(--blue);letter-spacing:3px;text-transform:uppercase;font-weight:600;margin-bottom:12px;}
.section-title{font-family:'Sora',sans-serif;font-size:clamp(26px,3.5vw,40px);font-weight:700;letter-spacing:-0.8px;margin-bottom:16px;}
.section-sub{color:var(--muted);font-size:16px;line-height:1.7;max-width:560px;}
.section-header{margin-bottom:56px;}
.section-header.center{text-align:center;}
.section-header.center .section-sub{margin:0 auto;}
.dark-section{background:var(--bg2);}

/* ===== SERVICES ===== */
.services-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.service-card{flex:0 1 calc(33.333% - 14px);max-width:calc(33.333% - 14px);}
.service-card{background:var(--bg3);border:1px solid var(--border);border-radius:16px;padding:32px;transition:.3s;position:relative;overflow:hidden;}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),transparent);opacity:0;transition:.3s;}
.service-card:hover{transform:translateY(-6px);border-color:rgba(77,171,255,0.35);box-shadow:0 20px 50px rgba(0,0,0,0.3);}
.service-card:hover::before{opacity:1;}
.service-icon{width:52px;height:52px;background:rgba(77,171,255,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:var(--blue);}
.service-card h3{font-size:19px;font-weight:600;margin-bottom:10px;color:var(--text);}
.service-card p{color:var(--muted);font-size:14.5px;line-height:1.75;}
.service-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.service-list li{color:var(--muted);font-size:14px;line-height:1.6;display:flex;align-items:flex-start;gap:9px;}
.service-list li i{color:var(--blue);font-size:11px;margin-top:5px;flex-shrink:0;}

/* ===== INTERNSHIP CARDS ===== */
.internship-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.internship-card{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:0;overflow:hidden;transition:.35s;position:relative;display:flex;flex-direction:column;}
.internship-card:hover{transform:translateY(-8px);border-color:rgba(77,171,255,0.4);box-shadow:0 24px 60px rgba(0,0,0,0.35);}
.internship-card.featured{border-color:rgba(77,171,255,0.35);background:linear-gradient(160deg,var(--bg3),rgba(77,171,255,0.05));}
.internship-card-header{padding:28px 28px 20px;border-bottom:1px solid var(--border);position:relative;}
.internship-card-header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--blue-dark),transparent);border-radius:20px 20px 0 0;}
.internship-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:4px 12px;border-radius:100px;margin-bottom:14px;}
.badge-featured{background:rgba(77,171,255,0.15);color:var(--blue);border:1px solid rgba(77,171,255,0.3);}
.badge-new{background:rgba(34,197,94,0.15);color:#4ade80;border:1px solid rgba(34,197,94,0.3);}
.badge-hot{background:rgba(251,146,60,0.15);color:#fb923c;border:1px solid rgba(251,146,60,0.3);}
.internship-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;}
.icon-da{background:linear-gradient(135deg,rgba(77,171,255,0.2),rgba(77,171,255,0.05));color:var(--blue);}
.icon-py{background:linear-gradient(135deg,rgba(251,188,5,0.2),rgba(251,188,5,0.05));color:#fbbf24;}
.icon-wd{background:linear-gradient(135deg,rgba(167,139,250,0.2),rgba(167,139,250,0.05));color:#a78bfa;}
.icon-hr{background:linear-gradient(135deg,rgba(52,211,153,0.2),rgba(52,211,153,0.05));color:#34d399;}
.internship-card-header h3{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;margin-bottom:6px;color:var(--text);}
.internship-card-header p{font-size:14px;color:var(--muted);line-height:1.6;}
.internship-highlights{padding:20px 28px;display:flex;flex-direction:column;gap:10px;flex:1;}
.highlight-row{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;}
.highlight-label{color:var(--muted);display:flex;align-items:center;gap:8px;}
.highlight-label i{color:var(--blue);width:16px;font-size:13px;}
.highlight-value{font-weight:600;color:var(--text);}
.highlight-value.price{color:var(--blue);font-family:'Sora',sans-serif;font-size:15px;}
.internship-card-footer{padding:20px 28px;border-top:1px solid var(--border);display:flex;gap:10px;}
.btn-card-primary{flex:1;background:var(--blue);color:#fff;padding:11px 16px;border-radius:9px;text-decoration:none;font-weight:600;font-size:13.5px;transition:.25s;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.btn-card-primary:hover{background:var(--blue-dark);transform:translateY(-1px);}
.btn-card-outline{flex:1;background:transparent;color:var(--blue);padding:11px 16px;border-radius:9px;text-decoration:none;font-weight:600;font-size:13.5px;border:1.5px solid rgba(77,171,255,0.35);transition:.25s;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.btn-card-outline:hover{background:rgba(77,171,255,0.08);border-color:var(--blue);}
.internship-card.da-special{grid-column:1/-1;}
@media(min-width:900px){
  .internship-card.da-special{grid-column:auto;grid-row:1/3;}
}

/* ===== FEATURES ===== */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feature-card{background:var(--bg3);border:1px solid var(--border);border-radius:16px;padding:28px;text-align:center;transition:.3s;}
.feature-card:hover{transform:translateY(-5px);border-color:rgba(77,171,255,0.3);box-shadow:0 16px 40px rgba(0,0,0,0.25);}
.feature-icon{width:60px;height:60px;background:rgba(77,171,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:24px;color:var(--blue);}
.feature-card h4{font-size:16px;font-weight:600;margin-bottom:8px;}
.feature-card p{font-size:13.5px;color:var(--muted);line-height:1.65;}

/* ===== EVENTS ===== */
.events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.event-card{background:var(--bg4);border:1px solid var(--border);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px;transition:.3s;}
.event-card:hover{transform:translateY(-4px);border-color:rgba(77,171,255,0.3);box-shadow:0 16px 40px rgba(0,0,0,0.3);}
.event-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(77,171,255,0.1);border:1px solid rgba(77,171,255,0.2);color:var(--blue);font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px;letter-spacing:0.5px;width:fit-content;}
.event-card h3{font-size:18px;font-weight:600;color:var(--text);}
.event-card p{color:var(--muted);font-size:14px;line-height:1.7;flex:1;}
.event-date{font-size:13px;color:var(--blue);font-weight:600;display:flex;align-items:center;gap:6px;}
.event-card .btn-sm{background:var(--blue);color:#fff;padding:9px 20px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:600;transition:.2s;display:inline-block;margin-top:4px;}
.event-card .btn-sm:hover{background:var(--blue-dark);}
.event-card .btn-sm.soon{background:var(--bg3);color:var(--muted);cursor:default;}

/* ===== TESTIMONIALS ===== */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.testimonial-card{background:var(--bg3);border:1px solid var(--border);border-radius:16px;padding:28px;transition:.3s;position:relative;}
.testimonial-card:hover{transform:translateY(-4px);border-color:rgba(77,171,255,0.3);}
.testimonial-card::before{content:'\201C';position:absolute;top:20px;right:24px;font-size:64px;color:rgba(77,171,255,0.1);font-family:Georgia,serif;line-height:1;}
.testimonial-stars{color:#fbbf24;font-size:14px;margin-bottom:14px;display:flex;gap:3px;}
.testimonial-text{font-size:14.5px;color:var(--muted);line-height:1.8;margin-bottom:20px;font-style:italic;}
.testimonial-author{display:flex;align-items:center;gap:12px;}
.author-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-dark));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;flex-shrink:0;}
.author-name{font-weight:600;font-size:14px;}
.author-role{font-size:12px;color:var(--muted);}

/* ===== ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about-text-block p{color:var(--muted);font-size:16px;line-height:1.85;margin-bottom:20px;}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;}
.about-feature{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);}
.about-feature i{color:var(--blue);font-size:15px;width:20px;}
.about-visual{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:36px;text-align:center;}
.about-big-num{font-family:'Sora',sans-serif;font-size:56px;font-weight:700;color:var(--blue);line-height:1;}
.about-big-lbl{font-size:14px;color:var(--muted);margin-top:6px;}
.social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.social-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;text-decoration:none;color:#fff;font-size:14px;font-weight:500;transition:.25s;}
.social-btn:hover{transform:translateY(-2px);opacity:.9;}
.linkedin{background:#0a66c2;}.instagram{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.youtube{background:#ff0000;}.github{background:#24292e;}

/* ===== CTA ===== */
.cta-box{background:linear-gradient(135deg,rgba(77,171,255,0.12),rgba(13,71,161,0.15));border:1px solid rgba(77,171,255,0.25);border-radius:20px;padding:56px;text-align:center;position:relative;overflow:hidden;}
.cta-box::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(77,171,255,0.06),transparent 60%);pointer-events:none;}
.cta-box h2{font-family:'Sora',sans-serif;font-size:clamp(24px,3vw,36px);font-weight:700;margin-bottom:14px;}
.cta-box p{color:var(--muted);font-size:16px;margin-bottom:28px;max-width:520px;margin-left:auto;margin-right:auto;}

/* ===== FOOTER ===== */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:70px 7% 30px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:50px;}
.footer-brand img{height:44px;border-radius:8px;margin-bottom:14px;}
.footer-brand h3{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;margin-bottom:8px;}
.footer-brand p{color:var(--muted);font-size:14px;line-height:1.7;max-width:260px;}
.footer-col h4{font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--blue);margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{text-decoration:none;color:var(--muted);font-size:14px;transition:.2s;}
.footer-col ul li a:hover{color:var(--blue);}
.footer-contact li{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:14px;margin-bottom:12px;}
.footer-contact li i{color:var(--blue);margin-top:3px;width:16px;}
.footer-contact a{color:var(--muted);text-decoration:none;transition:.2s;}
.footer-contact a:hover{color:var(--blue);}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{width:36px;height:36px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:15px;transition:.2s;}
.footer-social a:hover{color:var(--blue);border-color:rgba(77,171,255,0.4);}
.footer-bottom{border-top:1px solid var(--border);margin-top:50px;padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.footer-bottom p{font-size:13px;color:var(--muted);}
.footer-bottom-links a{font-size:13px;color:var(--muted);text-decoration:none;margin-left:20px;transition:.2s;}
.footer-bottom-links a:hover{color:var(--blue);}

/* =====================================================================
   SCROLL-REVEAL SYSTEM
   Applies only to content below the Hero section (#home). The Hero's
   own markup, particles, and animations are completely untouched —
   none of these classes are used anywhere inside <section id="home">.
   Reusable classes: .reveal .reveal-up .reveal-left .reveal-right
   .reveal-scale .stagger-item — combined with a `.is-visible` class
   toggled by an IntersectionObserver in index.js.
   ===================================================================== */

.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale{
  opacity:0;
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
.reveal{transform:translateY(25px);}
.reveal-up{transform:translateY(22px);}
.reveal-left{transform:translateX(-24px);}
.reveal-right{transform:translateX(24px);}
.reveal-scale{transform:scale(.97) translateY(14px);}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible{
  opacity:1;
  transform:translateY(0) translateX(0) scale(1);
}

/* Per-item stagger delay, assigned via inline custom property by JS */
.stagger-item{transition-delay:var(--stagger-delay, 0ms);}

/* Counter numbers start invisible-adjacent (handled by parent .reveal-scale);
   no extra styling needed — the digits themselves are swapped by JS. */

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =====================================================================
   SERVICES — SCROLL-DRIVEN VERTICAL TIMELINE
   Scoped entirely to `.services-timeline` (inside #services). Reuses the
   existing `.service-card` visual language (background/border/padding/
   hover already defined above) — only sizing/positioning is overridden
   here so the same card still looks like a QuadSync card, just placed
   along a central line instead of in a wrapped grid.
   ===================================================================== */

.services-timeline{
  position:relative;
  max-width:1220px;
  margin:0 auto;
  padding:50px 0 10px;
}

/* Central line: a thin static track, plus a brighter "progress" bar on
   top of it that scales from 0 to 1 (transform-origin:top) as the user
   scrolls — this is what makes the line feel hand-drawn by scrolling. */
.timeline-track{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%);
  background:rgba(77,171,255,0.12);
  z-index:0;
}
.timeline-track-progress{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  transform:scaleY(0);
  transform-origin:top;
  background:linear-gradient(180deg,var(--blue),#7dd3fc);
  box-shadow:0 0 14px rgba(77,171,255,0.55);
}

.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 50px 1fr;
  align-items:center;
  column-gap:24px;
  margin-bottom:34px;
  z-index:1;
  opacity:0;
  perspective:1000px;
  transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
}
.timeline-item:last-child{margin-bottom:0;}

.timeline-left{transform:translateX(-70px) rotateY(8deg) scale(.94);}
.timeline-right{transform:translateX(70px) rotateY(-8deg) scale(.94);}
.timeline-item.is-visible{
  opacity:1;
  transform:translateX(0) rotateY(0) scale(1);
}

.timeline-left .timeline-card{grid-column:1;grid-row:1;justify-self:end;text-align:left;}
.timeline-left .timeline-node{grid-column:2;grid-row:1;justify-self:center;}
.timeline-right .timeline-card{grid-column:3;grid-row:1;justify-self:start;text-align:left;}
.timeline-right .timeline-node{grid-column:2;grid-row:1;justify-self:center;}

/* Timeline node — the circular marker where each card meets the line.
   With `.timeline-item{align-items:center}` above, the grid itself now
   vertically centers the node against whichever cell is taller in that
   row (always the card), so every node lines up with its box's true
   center regardless of how tall that particular card is. */
.timeline-node{
  position:relative;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--bg2);
  border:2px solid rgba(77,171,255,0.28);
  transition:border-color .4s ease, box-shadow .4s ease;
}
.timeline-node-dot{
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--blue);
  opacity:0;
  transition:opacity .35s ease;
}
.timeline-item.is-visible .timeline-node{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(77,171,255,0.12), 0 0 16px rgba(77,171,255,0.5);
}
.timeline-item.is-visible .timeline-node-dot{opacity:1;}

/* The single "current" node (nearest viewport center) pulses gently and
   its card gets a slightly stronger highlight — this is what creates the
   "discovering services one by one" feel while scrolling. */
.timeline-item.is-current .timeline-node{
  animation:timelineNodePulse 1.8s ease-in-out infinite;
}
.timeline-item.is-current .timeline-card{
  border-color:rgba(77,171,255,0.45);
  box-shadow:
    0 30px 65px rgba(0,0,0,0.5),
    0 0 0 1px rgba(77,171,255,0.4),
    0 0 55px rgba(77,171,255,0.3),
    0 0 100px rgba(77,171,255,0.15);
}
@keyframes timelineNodePulse{
  0%,100%{box-shadow:0 0 0 4px rgba(77,171,255,0.12), 0 0 16px rgba(77,171,255,0.5);}
  50%{box-shadow:0 0 0 8px rgba(77,171,255,0.16), 0 0 26px rgba(77,171,255,0.7);}
}

/* Card refinements — glass background, subtle blue/cyan glow, soft
   layered shadow for a gentle premium 3D/depth feel, plus a light
   sweep on hover. Layered on top of the existing .service-card rules
   defined earlier in this file. */
.timeline-card{
  max-width:560px;
  width:100%;
  flex:none;
  background:rgba(10,28,50,0.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  box-shadow:
    0 30px 65px rgba(0,0,0,0.55),
    0 0 0 1px rgba(77,171,255,0.18),
    0 0 45px rgba(77,171,255,0.22),
    0 0 90px rgba(77,171,255,0.1);
}
.timeline-card::after{
  content:'';
  position:absolute;
  top:0;
  left:-160%;
  width:55%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(125,211,252,0.16),transparent);
  transform:skewX(-20deg);
  transition:left .8s ease;
  pointer-events:none;
}
.timeline-card:hover::after{left:160%;}
.timeline-card:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:
    0 26px 55px rgba(0,0,0,0.4),
    0 0 0 1px rgba(77,171,255,0.28),
    0 0 32px rgba(77,171,255,0.22);
}
.timeline-card:hover .service-icon{transform:scale(1.08) rotate(-4deg);}
.service-icon{transition:transform .35s ease;}

/* Connector nub — meets the node at a fixed 44px from the top of the
   card (matching the node's own fixed top offset), so every node lines
   up consistently at the same point on every card regardless of how
   tall that card's content is. */
/* Connector nub — meets the node at the exact vertical center of the
   card (top:50%), which is where align-items:center places the node
   for every item, so it always lines up correctly no matter how tall
   an individual card's content is. */
.timeline-left .timeline-card::before{
  content:'';position:absolute;top:50%;right:-24px;width:24px;height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(77,171,255,.5),transparent);z-index:2;
}
.timeline-right .timeline-card::before{
  content:'';position:absolute;top:50%;left:-24px;width:24px;height:2px;
  transform:translateY(-50%);
  background:linear-gradient(270deg,rgba(77,171,255,.5),transparent);z-index:2;
}

@media (prefers-reduced-motion: reduce){
  .timeline-item{opacity:1 !important;transform:none !important;transition:none !important;}
  .timeline-track-progress{transform:scaleY(1) !important;}
  .timeline-item.is-current .timeline-node{animation:none;}
  .timeline-card::after{display:none;}
}

/* Mobile: collapse to a single-side timeline — line moves to the left,
   every card (regardless of left/right in the HTML) sits to its right. */
@media(max-width:760px){
  .services-timeline{padding-left:6px;}
  .timeline-track{left:20px;transform:none;}
  .timeline-item{
    grid-template-columns:40px 1fr !important;
    column-gap:16px;
    margin-bottom:26px;
  }
  .timeline-left,.timeline-right{transform:translateX(30px) scale(.96);}
  .timeline-left .timeline-card,
  .timeline-right .timeline-card{
    grid-column:2 !important;
    justify-self:start !important;
    text-align:left !important;
    max-width:100%;
  }
  .timeline-left .timeline-node,
  .timeline-right .timeline-node{grid-column:1 !important;}
  .timeline-left .timeline-card::before,
  .timeline-right .timeline-card::before{
    left:-20px;right:auto;top:50%;width:20px;
    transform:translateY(-50%);
    background:linear-gradient(270deg,rgba(77,171,255,.5),transparent);
  }
}

/* =====================================================================
   INFINITE MARQUEE (shared by "What We Offer" cards and Client
   testimonials). Pure CSS: a track holding two duplicate sets of cards,
   translated by exactly -50% in a linear infinite loop, so the reset
   point is visually identical to the start — no visible jump.
   ===================================================================== */

.offer-marquee,
.testimonial-marquee{
  overflow:hidden;
  width:100%;
  /* fade the edges instead of animating per-card opacity/scale — cheap
     and gives the same "entering/leaving" impression */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

.offer-track,
.testimonial-track{
  display:flex;
  width:max-content;
  gap:20px;
  will-change:transform;
}
.offer-track{animation:marqueeScroll 34s linear infinite;}
.testimonial-track{animation:marqueeScroll 42s linear infinite;}

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

.offer-marquee:hover .offer-track,
.testimonial-marquee:hover .testimonial-track{
  animation-play-state:paused;
}

.offer-card{
  flex:0 0 280px;
  width:280px;
  perspective:800px;
}
.marquee-card{
  flex:0 0 340px;
  width:340px;
}

@media (prefers-reduced-motion: reduce){
  .offer-track,.testimonial-track{animation:none;}
  .offer-marquee,.testimonial-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
}

@media(max-width:768px){
  .offer-card{flex-basis:230px;width:230px;}
  .marquee-card{flex-basis:280px;width:280px;}
}

/* ===== WHATSAPP ===== */
.whatsapp-float{position:fixed;bottom:28px;right:20px;width:54px;height:54px;background:#25D366;color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:26px;text-decoration:none;z-index:9999;transition:.3s;animation:wpulse 2.5s infinite;}
.whatsapp-float:hover{transform:scale(1.12);background:#1ebe5d;}
@keyframes wpulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6);}70%{box-shadow:0 0 0 18px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

/* ===== MOBILE ===== */
@media(max-width:1024px){
  .about-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid .service-card{flex-basis:calc(50% - 10px);max-width:calc(50% - 10px);}
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .hero-content-wrap{grid-template-columns:1fr;text-align:center;gap:44px;}
  .hero-left{text-align:center;}
  .hero-left .hero-btns{justify-content:center;}
  .hero p{margin:0 auto 36px;}
  .code-panel{max-width:520px;}
}
@media(max-width:768px){
  .internship-grid{grid-template-columns:1fr!important;}
  .services-grid .service-card{flex-basis:100%;max-width:100%;}
  .events-grid{grid-template-columns:1fr!important;}
  .features-grid{grid-template-columns:1fr!important;}
  .nav-links{position:fixed;top:0;right:-280px;height:100vh;background:var(--bg2);flex-direction:column;width:260px;padding:80px 24px 24px;transition:.35s;border-left:1px solid var(--border);gap:4px;z-index:1001;}
  .nav-links.open{right:0;}
  .nav-links a{width:100%;padding:12px 16px;}
  .menu-toggle{display:block;position:relative;z-index:1002;}
  .nav-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:20px;right:20px;width:36px;height:36px;
    background:rgba(77,171,255,0.1);border:1px solid var(--border);border-radius:8px;
    color:var(--text);font-size:16px;cursor:pointer;transition:.2s;
  }
  .nav-close:hover{background:rgba(77,171,255,0.18);border-color:rgba(77,171,255,0.4);color:var(--blue);}
  .hero h1{font-size:34px;letter-spacing:-1px;}
  .hero-stats{gap:24px;}
  .about-features{grid-template-columns:1fr;}
  .internship-card.da-special{grid-column:auto;}
  .code-panel{max-width:100%;}
  .code-body{font-size:12.5px;padding:18px 14px 20px;}
  .code-line.indent{padding-left:16px;}
  .services-ticker{width:150px;}

  /* Lighter, faster reveal animation on mobile — smaller movement,
     shorter duration, so scroll feels snappy on smaller devices. */
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale{
    transition-duration:.45s;
  }
  .reveal{transform:translateY(14px);}
  .reveal-up{transform:translateY(12px);}
  .reveal-left{transform:translateX(-12px);}
  .reveal-right{transform:translateX(12px);}
  .reveal-scale{transform:scale(.985) translateY(8px);}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr;text-align:center;}
  .footer-brand p{max-width:100%;}
  .footer-contact li{justify-content:center;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .footer-bottom-links a{margin:0 10px;}
  .cta-box{padding:36px 24px;}
  .footer-social{justify-content:center;}
}