/* Homepage layout. Kept separate from the shared student/admin themes. */
@property --ict-current-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
body.ict-home {
  --accent: #20c8ff; --accent2: #966bff; --accent-light: #21c8ff14;
  --text: #edf6ff; --muted: #a2b7ce; --light: #809bb7; --border: #4b9ede35;
  --nav-h: 76px; --surface: #091a30; --bg: #040b18;
  background: radial-gradient(ellipse at 85% 5%, #17245570, transparent 36%), #040b18;
  color: var(--text); font-family: 'Inter', 'Noto Sans Sinhala', sans-serif;
  overflow-x: clip;
}
body.ict-home .container { width: min(1320px, calc(100% - 64px)); max-width: none; margin-inline: auto; padding: 0; }
body.ict-home .section-pad { padding-block: 68px; scroll-margin-top: 110px; }
body.ict-home #features { padding-top: 60px !important; }
body.ict-home .alt-bg { background: #10243c38; border-color: #4b9ede18; }
body.ict-home .ambient { opacity: .26; pointer-events: none; }
body.ict-home :is(h1,h2,h3,h4,h5) { color: var(--text); }
body.ict-home .section-h { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3; margin-bottom: 30px; background: none; -webkit-text-fill-color: currentColor; text-align: left; }
body.ict-home .eyebrow { text-align: left; color: #70ddff; letter-spacing: 2px; font-size: 11px; margin-bottom: 12px; }
body.ict-home .ict-skip { position: fixed; left: 24px; top: -100px; z-index: 3000; background: #fff; color: #041023; padding: 12px 20px; border-radius: 10px; }
body.ict-home .ict-skip:focus { top: 16px; }
body.ict-home :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #80e6ff; outline-offset: 4px; }
/* The border moves within its rounded track; the frame never rotates. */
body.ict-home .navbar {
  top: 16px; inset-inline: 0; margin-inline: auto; width: min(1376px, calc(100% - 40px));
  height: auto; min-height: var(--nav-h); padding: 12px 18px; gap: 20px;
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  transform: none; overflow: visible; isolation: isolate;
  border: 1px solid #41c8ff50; border-radius: 24px;
  background: #051326ed; backdrop-filter: blur(20px);
  box-shadow: 0 16px 42px #0005, 0 0 26px #18b5ff12; z-index: 1000;
}
body.ict-home .navbar.scrolled { background: #051326f5; box-shadow: 0 12px 40px #0008; }
body.ict-home .navbar::before { content: none; }
body.ict-home :is(.navbar,.video-card,.event-card,.inst-card)::after {
  content: ''; display: block; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 4; opacity: .95;
  background: conic-gradient(from var(--ict-current-angle), transparent 0 25%, #55dcff 31%, #e6fbff 33%, #7075ff 36%, transparent 42% 74%, #b087ff 80%, transparent 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ict-current 7s linear infinite;
}
/* Cards clip their images, so keep the luminous track inside that clipping edge. */
body.ict-home :is(.video-card,.event-card,.inst-card)::after { inset: 0; padding: 1.5px; }
body.ict-home .logo-wrap { min-width: 0; flex-shrink: 0; }
body.ict-home .logo-wrap img { width: auto; height: 38px; max-width: 190px; object-fit: contain; }
body.ict-home .nav-links { display: flex; justify-content: center; gap: 3px; min-width: 0; }
body.ict-home .nav-links a { display: inline-flex; justify-content: center; align-items: center; min-height: 42px; padding: 9px 11px; border-radius: 12px; font-size: 12px; white-space: nowrap; color: #bccde0 !important; transition: background .2s, color .2s, box-shadow .2s; }
body.ict-home .nav-links a:is(:hover,.active) { color: white !important; background: linear-gradient(115deg,#137fef,#7953de) !important; box-shadow: 0 0 18px #168dff35; }
body.ict-home .nav-actions { gap: 10px; }
body.ict-home .nav-actions .btn { display: inline-flex; min-height: 44px; padding: 10px 17px; white-space: nowrap; }
body.ict-home .mobile-auth-btn { display: none; }
body.ict-home .hamburger { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid #49b4ed50; border-radius: 10px; background: #13304e; color: #e4f8ff; }
/* Text participates in normal flow, so translated/long headings cannot crop CTAs. */
body.ict-home #home { margin: 112px auto 0; width: min(1376px,calc(100% - 40px)); scroll-margin-top: 112px; }
body.ict-home .hero-slider { width: 100%; height: auto; min-height: 0; margin: 0; border: 1px solid #42c7ff35; border-radius: 28px; background: #051224; overflow: hidden; box-shadow: 0 20px 70px #0004; }
body.ict-home .hero-slider .swiper-wrapper { align-items: flex-start; }
body.ict-home .hero-slider .swiper-slide { height: auto; min-height: 550px; display: flex; align-items: center; background: #051224; overflow: hidden; }
body.ict-home .hero-slider .swiper-slide[hidden] { display: none; }
body.ict-home .hero-content { width: 58%; max-width: none; margin: 0; padding: 62px clamp(24px,4vw,62px) 86px; opacity: 1; transform: none; transition: none; z-index: 2; }
body.ict-home .hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; color: #7fe2ff; font-size: 11px; letter-spacing: 1.6px; padding: 8px 12px; background: #06345480; border: 1px solid #20b9f452; border-radius: 9px; margin-bottom: 24px; }
body.ict-home .hero-title { width: 100%; max-width: none; font-size: clamp(34px,4.1vw,58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.35; margin: 0 0 22px; min-height: 0; opacity: 1; background: none; -webkit-text-fill-color: #eef8ff; text-shadow: 0 3px 25px #119be82b; overflow-wrap: anywhere; }
body.ict-home .hero-desc { color: #b3c9dd; font-size: clamp(15px,1.25vw,18px); line-height: 1.85; max-width: 520px; margin: 0 0 30px; }
body.ict-home .hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; opacity: 1; margin: 0; }
body.ict-home :is(.hero-btn-primary,.hero-btn-outline) { min-height: 50px; max-width: 100%; padding: 13px 21px; border-radius: 12px; border: 1px solid #37beff70; font-size: 14px; line-height: 1.5; justify-content: center; white-space: normal; color: #fff; }
body.ict-home .hero-btn-primary { background: linear-gradient(115deg,#137df0,#8951e4); box-shadow: 0 8px 24px #207bef30; }
body.ict-home .hero-btn-outline { background: #0b2238c9; color: #d9f1ff; }
body.ict-home .hero-media { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; overflow: hidden; background: #061224; }
body.ict-home .hero-bg { width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: 50% 18%; filter: none; transform: none; transition: transform 1.1s ease; }
body.ict-home .hero-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,#051224,transparent 25%),linear-gradient(0deg,#05122488,transparent 35%); }
body.ict-home .hero-scrim { display: none; }
body.ict-home .hero-controls { position: absolute; bottom: 24px; left: clamp(24px,4vw,62px); display: flex; align-items: center; gap: 18px; z-index: 5; }
body.ict-home .hero-controls .swiper-pagination { position: static; width: auto; transform: none; }
body.ict-home .hero-pause { width: 36px; height: 36px; border: 1px solid #4ba3d55c; border-radius: 50%; background: #041526d9; color: #caf1ff; cursor: pointer; }
body.ict-home .hero-controls[hidden] { display: none; }
/* The network occupies the slide interior without intercepting text or controls. */
body.ict-home .hero-network { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; user-select: none; }
body.ict-home .hero-network-pause { position: absolute; right: 18px; bottom: 18px; z-index: 6; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #64d8ff70; border-radius: 12px; background: #06192bdc; color: #a2eaff; cursor: pointer; box-shadow: 0 0 16px #3ebcff18; }
body.ict-home .hero-network-pause:is(:hover,:focus-visible) { background: #164261; color: #fff; }
body.ict-home .hero-network-pause[hidden] { display: none; }
body.ict-home .hero-network-enabled .sound-toggle-btn { right: 72px; }
@media (prefers-reduced-motion: reduce) { body.ict-home .hero-network { opacity: .55; } }
body.ict-home .swiper-pagination-bullet { background: #517491; opacity: 1; }
body.ict-home .swiper-pagination-bullet-active { background: #35d1ff; box-shadow: 0 0 10px #2ec8ff80; }
body.ict-home .sound-toggle-btn { bottom: 20px; right: 20px; width: 44px; height: 44px; background: #041526d9; }
body.ict-home .stats-strip { width: min(1320px,calc(100% - 64px)); margin: 22px auto 0; padding: 0; position: relative; z-index: auto; }
body.ict-home .stats-grid { padding: 24px 20px; gap: 12px; border-radius: 18px; background: #08192c; }
body.ict-home .stat-num { font-size: clamp(24px,3vw,34px); color: #6ed9ff; }
body.ict-home .stat-lbl { color: #96b0c9; font-size: 12px; }
body.ict-home .glass { background: linear-gradient(145deg,#0c233be8,#071527f5); color: var(--text); border: 1px solid #449be839; box-shadow: 0 10px 30px #0003; border-radius: 18px; backdrop-filter: none; }
body.ict-home .glass::before { display: none; }
body.ict-home .glass::after { pointer-events: none; }
body.ict-home .glass:not(.video-card):not(.event-card):not(.inst-card)::after { content: none; }
body.ict-home .features-grid { gap: 20px; }
body.ict-home .feature-card { padding: 28px; }
body.ict-home .feat-icon { width: 50px; height: 50px; font-size: 22px; border: 1px solid #34bcef50; background: #12394e; color: #62ddff; box-shadow: none; }
body.ict-home .teacher-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: center; gap: 32px; }
body.ict-home .teacher-photo { min-width: 0; height: auto; max-height: 480px; border-radius: 22px; background: radial-gradient(ellipse at bottom,#10354d,#071426); border: 1px solid #4bc7ff40; box-shadow: 0 14px 45px #0005; overflow: hidden; }
body.ict-home .teacher-photo img { width: 100%; height: auto; max-height: 480px; object-fit: contain; object-position: center; }
body.ict-home .teacher-photo::after { background: linear-gradient(0deg,#05132633,transparent 30%); }
/* Portrait keeps its original dimensions; only light moves around the frame. */
body.ict-home .teacher-photo { position: relative; isolation: isolate; }
body.ict-home .teacher-photo::before { content: ''; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none; z-index: 5; background: conic-gradient(from var(--ict-current-angle),#328ee52b 10%,#32ccff 23%,#edfcff 26%,#9990ff 30%,#328ee52b 40% 60%,#c08dff 70%,#ffe0ad 74%,#328ee52b 82%); -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ict-current 5s linear infinite; }
body.ict-home .ict-orbit-point { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #e9fbff; box-shadow: 0 0 10px 3px #63d9ff,0 0 23px 7px #7372ef66; offset-path: inset(3px round 22px); offset-rotate: 0deg; animation: ict-orbit 5s linear infinite; pointer-events: none; z-index: 6; }
body.ict-home .ict-orbit-point + .ict-orbit-point { animation-delay: -2.5s; background: #ffe9cb; box-shadow: 0 0 10px 3px #d8a4ff,0 0 23px 7px #985cf466; }
@supports not (offset-path: inset(3px round 22px)) { body.ict-home .ict-orbit-point { display: none; } }
body.ict-home .teacher-photo.ict-motion-active { animation: ict-portrait-glow 5s ease-in-out infinite alternate; }
body.ict-home .teacher-body.ict-reveal h2 { animation: ict-fire-reveal 1.1s ease-out both; }
body.ict-home .hero-media::before { content: ''; position: absolute; inset: -25%; background: linear-gradient(110deg,transparent 38%,#b8f3ff20 46%,#d0f7ff42 48%,transparent 53%); z-index: 3; pointer-events: none; animation: ict-glass-sweep 9s ease-in-out infinite; }
body.ict-home :is(.feature-card,.course-row,.testi-card) { position: relative; overflow: hidden; }
body.ict-home :is(.feature-card,.course-row,.testi-card)::before { content: ''; display: block; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg,transparent 35%,#70d9ff0d 47%,#d2f5ff1c 50%,transparent 62%); pointer-events: none; z-index: 2; animation: ict-glass-sweep 8s ease-in-out infinite; }
body.ict-home .feature-card:nth-child(2)::before { animation-delay: -2s; }
body.ict-home .feature-card:nth-child(3)::before { animation-delay: -4s; }
body.ict-home .inst-card::after { background: conic-gradient(from var(--ict-current-angle),transparent 15% 50%,#68efd6 66%,#d9fff6 70%,#c4a1ff 75%,transparent 82%); animation-duration: 8s; }
body.ict-home .ict-motion-paused, body.ict-home .ict-motion-paused::before, body.ict-home .ict-motion-paused::after, body.ict-home .ict-motion-paused .ict-orbit-point { animation-play-state: paused; }
@keyframes ict-orbit { to { offset-distance: 100%; } }
@keyframes ict-portrait-glow { from { box-shadow: 0 14px 45px #0005,0 0 16px #32bfff24; } to { box-shadow: 0 14px 45px #0005,0 0 32px #31bbff49,0 0 45px #9b64ff1f; } }
@keyframes ict-glass-sweep { 0%,25% { transform: translateX(-110%); opacity: 0; } 35% { opacity: 1; } 65%,100% { transform: translateX(110%); opacity: 0; } }
@keyframes ict-fire-reveal { from { opacity: .4; filter: blur(4px); text-shadow: 0 0 16px #ff8334; translate: 0 12px; } 45% { text-shadow: 0 0 20px #ffa64b77,0 -4px 10px #ffdf9566; } to { opacity: 1; filter: none; text-shadow: none; translate: 0 0; } }
body.ict-home .teacher-body { min-width: 0; min-height: 0; padding: clamp(24px,3vw,42px); }
body.ict-home .teacher-body h2 { font-size: clamp(28px,3.3vw,44px); line-height: 1.3; overflow-wrap: anywhere; }
body.ict-home .teacher-body p { color: #abc1d6; font-size: 16px; line-height: 1.9; }
body.ict-home .teacher-quote { font-size: 17px; color: #c2e7ff; background: linear-gradient(90deg,#208feb18,transparent); border-color: #a982ff; }
body.ict-home .institute-slider { padding: 8px 2px 44px; }
body.ict-home .inst-card { height: 100%; position: relative; }
body.ict-home .inst-thumb { height: 230px; }
body.ict-home .inst-info { padding: 24px; }
body.ict-home .inst-address { color: #7adfff; }
body.ict-home :is(.inst-desc,.event-info p,.video-meta-txt,.testi-course) { color: #a2b9cf; }
body.ict-home :is(.btn-map,.btn-ghost) { color: #caedff; border: 1px solid #39bced60; background: #11345070; min-height: 46px; border-radius: 11px; }
body.ict-home :is(.btn,.btn-map) { white-space: normal; line-height: 1.5; }
body.ict-home .course-row { padding: 28px; gap: 24px; }
body.ict-home .course-info { min-width: 0; }
/* auto-fill reserves empty tracks: one upload never becomes a full-width banner. */
body.ict-home .video-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr)); align-items: start; gap: 22px; }
body.ict-home .video-card { position: relative; isolation: isolate; width: 100%; max-width: 380px; min-width: 0; padding: 0; text-align: left; font: inherit; color: var(--text); overflow: hidden; border-radius: 16px; cursor: pointer; transition: translate .25s, box-shadow .25s; }
body.ict-home .video-card:disabled { cursor: not-allowed; opacity: .65; }
body.ict-home .video-thumb { height: auto; aspect-ratio: 16 / 9; }
body.ict-home .video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.ict-home .video-card .play-btn { opacity: 1; width: 58px; height: 42px; background: #f02647ed; color: #fff; border: 1px solid #ffbccd85; border-radius: 13px; transform: translate(-50%,-50%); box-shadow: 0 5px 24px #0009,0 0 22px #ff316947; }
body.ict-home .video-card:is(:hover,:focus-visible) .play-btn { transform: translate(-50%,-50%) scale(1.1); background: #ff3757; }
body.ict-home .video-tag-free { top: 12px; bottom: auto; left: 12px; background: #052c3aeb; color: #9aeeff; border: 1px solid #51d4fb7a; font-size: 9px; padding: 5px 8px; }
body.ict-home .video-info { display: flex; flex-direction: column; padding: 17px 18px 15px; }
body.ict-home .video-title-txt { font-size: 15px; line-height: 1.65; margin-bottom: 9px; overflow-wrap: anywhere; }
body.ict-home .video-meta-txt { font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
body.ict-home .video-watch-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #57adf026; color: #85ddff; font-size: 12px; font-weight: 600; }
body.ict-home #viewAllWrap[hidden] { display: none; }
body.ict-home #videos > .container { padding: clamp(20px,3vw,36px); border-radius: 24px; border: 1px solid #338be74a; background: radial-gradient(ellipse at top right,#144da426,transparent 65%),#061429; box-shadow: 0 18px 55px #0003; }
body.ict-home .ict-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
body.ict-home .ict-section-heading .section-h { margin-bottom: 8px; }
body.ict-home .ict-section-heading p { color: #a2b9cf; font-size: 13px; line-height: 1.8; }
body.ict-home .ict-fx-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 14px; flex-shrink: 0; border: 1px solid #52b6f64a; border-radius: 12px; color: #bdd7ed; background: #102842; font: inherit; font-size: 11px; cursor: pointer; }
body.ict-home .ict-fx-toggle[aria-pressed=true] { color: #ffe0a7; border-color: #ffb54e; background: #392321; }
body.ict-home .events-grid { gap: 22px; }
body.ict-home .event-card { padding: 24px; gap: 16px; flex-wrap: wrap; }
body.ict-home .event-info { flex: 1 1 190px; min-width: 0; }
body.ict-home .event-thumb { width: 100%; height: 170px; }
body.ict-home .gallery-grid { grid-auto-rows: 220px; gap: 16px; }
body.ict-home .gal-item { min-width: 0; border: 1px solid #41c9ff3b; border-radius: 18px; }
body.ict-home button.gal-item { padding: 0; text-align: left; background: #07182b; font: inherit; }
body.ict-home .gal-overlay { opacity: 1; padding: 20px; }
body.ict-home .gal-overlay h4 { font-size: clamp(14px,1.8vw,20px); }
body.ict-home .gal-item[data-shape=square] { grid-column: span 1; grid-row: span 1; }
body.ict-home .gal-item[data-shape=portrait] { grid-column: span 1; grid-row: span 2; }
body.ict-home .gal-item[data-shape=circle] { grid-column: span 1; grid-row: span 1; border-radius: 50%; }
body.ict-home .gal-item[data-shape=arch] { grid-column: span 1; border-radius: 50% 50% 18px 18px; }
body.ict-home .community-card { min-width: 0; }
body.ict-home .testi-card { padding: 28px; }
body.ict-home .testi-msg { color: #c6d7e8; }
body.ict-home .feedback-panel { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 36px; padding: 36px; }
body.ict-home .feedback-copy i { color: #91ddff; font-size: 26px; }
body.ict-home .feedback-copy h3 { font-size: clamp(24px,2.5vw,32px); line-height: 1.35; margin: 16px 0; }
body.ict-home .feedback-copy p { color: #a6bed4; line-height: 1.8; }
body.ict-home .feedback-public-form { display: grid; gap: 16px; min-width: 0; }
body.ict-home .feedback-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
body.ict-home .feedback-status { min-height: 20px; font-size: 13px; line-height: 1.65; color: #8ee4d0; }
body.ict-home .feedback-status.error { color: #ffb6bd; }
body.ict-home .form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
body.ict-home .f-input { min-width: 0; max-width: 100%; min-height: 48px; background: #041225; border: 1px solid #4a92c14d; color: #edf6ff; font-size: 16px; }
body.ict-home .f-input:focus { background: #071b31; border-color: #4bd5ff; box-shadow: 0 0 0 3px #3cb8ed17; }
body.ict-home .f-input::placeholder { color: #91a9be; }
body.ict-home input[type=file] { padding: 10px; font-size: 12px; }
body.ict-home input[type=file]::file-selector-button { background: #123655; color: #dcefff; border: 1px solid #448ec263; border-radius: 7px; padding: 6px 8px; margin-right: 6px; }
body.ict-home textarea.f-input { min-height: 132px; height: auto; resize: vertical; }
body.ict-home .faq-q { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-weight: 600; color: #dcecff; }
body.ict-home .faq-q:hover { background: #42b7ed12; }
body.ict-home .faq-a-inner { color: #a7bfd5; }
body.ict-home .contact-wrap { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 36px; }
body.ict-home :is(.contact-side,.contact-form) { min-width: 0; }
body.ict-home .contact-form { padding: 36px; }
body.ict-home .c-txt { min-width: 0; overflow-wrap: anywhere; }
body.ict-home footer { background: #030a16; border-top-color: #4b9ede30; padding-top: 50px; }
body.ict-home .footer-inner { gap: 32px; }
body.ict-home .footer-col { min-width: 0; overflow-wrap: anywhere; }
body.ict-home .inst-modal { padding: 20px; }
body.ict-home .inst-modal-content { max-height: calc(100dvh - 40px); overflow-y: auto; transform: none; padding: 30px; }
body.ict-home .inst-modal-close { border: 1px solid #5599be50; color: #daf1ff; background: #14304b; }
body.ict-home .inst-m-map { height: min(42vh,380px); background: #061427; }
body.ict-home .inst-m-map { position: relative; }
body.ict-home .inst-m-map .btv-loading { position: absolute; inset: 0; z-index: 1; }
body.ict-home .comm-modal-box { background: #0a1a2e; color: #e4f4ff; }
body.ict-home .comm-item { background: #102942; border-color: #4387b949; }
body.ict-home .comm-item-info h5 { color: #d4edff; }
body.ict-home .comm-item-info p { color: #a4bed6; }
/* Touch controls stay in normal flow, below the slides, not under clipped photos. */
body.ict-home .ict-slider-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 16px 2px 0; padding-bottom: 4px; }
body.ict-home .ict-slider-controls[hidden] { display: none; }
body.ict-home .ict-slider-controls button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #54bff575; background: #0e2b46; color: #bdeaff; font-size: 18px; cursor: pointer; }
body.ict-home .ict-slider-controls button:disabled { opacity: .4; cursor: default; }
body.ict-home .ict-slider-position { margin-right: auto; font-size: 12px; color: #a9c4dd; font-variant-numeric: tabular-nums; }
body.ict-home .btv-header { position: sticky; top: 0; z-index: 10; background: #08172ff5; backdrop-filter: blur(16px); border-bottom: 1px solid #49b7ff26; }
body.ict-home .btv-dialog { border-color: #3ed2ff88; box-shadow: 0 30px 100px #000c,0 0 55px #218fff33; }
body.ict-home .btv-loading { background: radial-gradient(ellipse,#173d683b,transparent 70%); }
/* Fire is decorative: it never covers a hit target or makes text unreadable. */
body.ict-home .ict-embers { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 2001; }
body.ict-home dialog > .ict-embers { position: absolute; border-radius: inherit; }
body.ict-home .ict-ember { position: absolute; left: var(--x); top: var(--y); width: var(--size,4px); height: var(--size,4px); border-radius: 70% 25% 65% 30%; background: #ffe1a1; box-shadow: 0 0 6px #ffbf44,0 0 14px #ff662c; animation: ict-ember-rise var(--life,900ms) ease-out forwards; }
body.ict-home .ict-ember.magic { background: #cff7ff; box-shadow: 0 0 7px #58d9ff,0 0 15px #9859ff; }
body.ict-home .ict-ignite { animation: ict-ignite .6s ease-out; }
body.ict-home .ict-typing { text-shadow: 0 0 9px #ffad6c9c; border-color: #ffad6c; }
body.ict-home .ict-dialog { width: min(900px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto; overflow: auto; border: 1px solid #5ad5ff80; border-radius: 24px; background: #091a30; color: #e8f5ff; box-shadow: 0 24px 100px #000b; }
body.ict-home .ict-dialog::backdrop { background: #010712dc; backdrop-filter: blur(12px); }
body.ict-home .ict-dialog[open] { animation: ict-glass-in .4s ease-out both; }
body.ict-home .ict-dialog [hidden] { display: none; }
body.ict-home .ict-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; position: sticky; top: 0; z-index: 2; background: #091a30f5; border-bottom: 1px solid #4cacda35; }
body.ict-home .ict-dialog-header h2 { font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
body.ict-home .ict-dialog-close { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #50b4e55f; border-radius: 12px; color: #daf4ff; background: #133450; font-size: 26px; cursor: pointer; }
body.ict-home .ict-dialog-content { padding: 24px; }
body.ict-home .ict-dialog-content > img { display: block; max-height: 65dvh; width: 100%; object-fit: contain; border-radius: 14px; }
body.ict-home .ict-dialog-caption { margin-top: 18px; color: #b8d2e7; line-height: 1.8; }
body.ict-home .ict-book { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #ffa9456b; border-radius: 14px; background: linear-gradient(90deg,#152438 49%,#090f20 50%,#1a2b40 51%); overflow: hidden; box-shadow: 0 0 36px #ff9b2520; }
body.ict-home .ict-book::after { content: ''; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ict-current 6s linear infinite; }
body.ict-home .ict-event-more { width: 100%; margin-top: 18px; }
body.ict-home .ict-book > div { padding: 26px; min-width: 0; }
body.ict-home .ict-book img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; }
body.ict-home .ict-book p { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.9; color: #c1d3e4; font-size: 14px; margin-top: 14px; }
body.ict-home .ict-book h3 { line-height: 1.6; font-size: 22px; }
body.ict-home .ict-book-meta { display: block; color: #ffc88b; font-size: 12px; line-height: 1.8; margin: 12px 0; }
body.ict-home .ict-thanks { text-align: center; padding: 24px 12px; }
body.ict-home .ict-thanks h3 { font-size: 26px; margin: 24px 0 12px; }
body.ict-home .ict-thanks p { color: #b9d0e5; line-height: 1.8; }
body.ict-home .ict-thanks .btv-logo-wrap { margin: auto; width: 110px; height: 80px; }
body.ict-home .ict-closing { pointer-events: none; animation: ict-ash-out .46s ease-in both !important; }
body.ict-home :is(.event-card,.ict-book)::after { background: conic-gradient(from var(--ict-current-angle),transparent 15%,#ff7f28 30%,#ffeabc 35%,transparent 40% 65%,#ffb344 80%,transparent 88%); }
@keyframes ict-ember-rise { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; } 65% { background: #ffa457; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(130deg) scale(.15); background: #8792a3; box-shadow: none; } }
@keyframes ict-ignite { 20% { box-shadow: 0 0 22px #ff8b416b,0 -4px 16px #ffc95c40; } 100% { box-shadow: 0 8px 24px #208bef25; } }
@keyframes ict-ash-out { 25% { filter: sepia(.4); box-shadow: 0 0 35px #ff87286b; } 100% { opacity: 0; filter: grayscale(1) blur(4px); transform: translateY(-16px) scale(.97); } }
/* Visible by default, even with an unavailable slider library or reduced motion. */
body.ict-home .reveal { opacity: 1; transform: none; filter: none; transition: none; }
body.ict-home .ict-reveal { animation: ict-reveal .7s ease-out both; }
body.ict-home :is(.btn,.hero-btn-primary,.hero-btn-outline,.btn-map) { transition: translate .2s, box-shadow .2s, background .2s; }
body.ict-home :is(.btn,.hero-btn-primary,.hero-btn-outline,.btn-map):hover { transform: none; translate: 0 -2px; box-shadow: 0 8px 26px #229be733; }
@keyframes ict-current { to { --ict-current-angle: 360deg; } }
@keyframes ict-reveal { from { opacity: .35; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes ict-glass-in { from { opacity: .25; filter: blur(5px); translate: 16px 0; } to { opacity: 1; filter: none; translate: 0 0; } }
@media (prefers-reduced-motion:no-preference) {
  body.ict-home .swiper-slide-active .hero-media { animation: ict-glass-in 1s ease-out both; }
  body.ict-home .swiper-slide-active .hero-content { animation: ict-reveal .8s ease-out both; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  body.ict-home :is(.video-card,.feature-card,.course-row):hover { translate: 0 -5px; box-shadow: 0 12px 36px #1199e82b; }
  body.ict-home .gal-item:hover { translate: 0 -6px; rotate: 6deg; z-index: 3; }
  body.ict-home .nav-links a:hover { translate: 0 -2px; box-shadow: 0 0 20px #ff983d66,0 -3px 12px #ffc06b33; }
}
@media (max-width:1180px) {
  body.ict-home .navbar { grid-template-columns: minmax(0,1fr) auto; }
  body.ict-home .hamburger { display: inline-grid; place-items: center; cursor: pointer; }
  body.ict-home .navbar .nav-links { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; width: 100%; margin: 0; border: 1px solid #3cb5ed50; border-radius: 18px; background: #07172bf9; padding: 14px; max-height: calc(100dvh - 126px); overflow-y: auto; box-shadow: 0 18px 46px #0009; transform: none; }
  body.ict-home .navbar .nav-links.open { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); opacity: 1; visibility: visible; }
  body.ict-home .navbar .nav-links a { display: flex; min-height: 48px; white-space: normal; }
}
@media (max-width:760px) {
  body.ict-home { --nav-h: 64px; }
  body.ict-home .container { width: calc(100% - 32px); }
  body.ict-home .navbar { width: calc(100% - 24px); top: 12px; padding: 9px 12px; border-radius: 18px; gap: 8px; }
  body.ict-home .navbar .logo-wrap img { height: 30px; max-width: 150px; }
  body.ict-home .nav-actions .btn { font-size: 12px; padding: 9px 11px; }
  body.ict-home .navbar .nav-links.open { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.ict-home #home { margin-top: 94px; width: calc(100% - 24px); }
  body.ict-home .hero-slider { border-radius: 22px; }
  body.ict-home .hero-slider .swiper-slide { display: flex; flex-direction: column; min-height: 0; }
  body.ict-home .hero-content { width: 100%; padding: 30px 24px 32px; order: 1; }
  body.ict-home .hero-title { font-size: clamp(29px,6.6vw,42px); line-height: 1.45; letter-spacing: -.025em; }
  body.ict-home .hero-eyebrow { margin-bottom: 18px; }
  body.ict-home .hero-desc { font-size: 16px; line-height: 1.85; margin-bottom: 24px; }
  body.ict-home .hero-media { position: relative; inset: auto; width: 100%; height: clamp(250px,63vw,380px); flex-shrink: 0; order: 2; }
  body.ict-home .hero-media::after { background: linear-gradient(180deg,#051224,transparent 20%),linear-gradient(0deg,#051224b3,transparent 30%); }
  body.ict-home .hero-bg { object-position: center 20%; }
  body.ict-home .hero-controls { left: 24px; bottom: 18px; }
  body.ict-home .stats-strip { width: calc(100% - 32px); margin-top: 16px; }
  body.ict-home .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 20px 12px; gap: 22px 8px; }
  body.ict-home .section-pad { padding-block: 44px; }
  body.ict-home .teacher-wrap, body.ict-home .feedback-panel, body.ict-home .contact-wrap { grid-template-columns: minmax(0,1fr); gap: 24px; }
  body.ict-home .teacher-photo img { max-height: 420px; }
  body.ict-home .feedback-panel, body.ict-home .contact-form { padding: 24px; }
  body.ict-home .course-row { flex-direction: column; align-items: flex-start; }
  body.ict-home .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 190px; }
  body.ict-home .gal-item:nth-child(3n+1) { grid-column: span 1; grid-row: span 1; }
  body.ict-home .inst-modal { padding: 12px; }
  body.ict-home .inst-modal-content { padding: 24px; max-height: calc(100dvh - 24px); }
  body.ict-home #videos > .container { padding: 20px 16px; }
  body.ict-home .ict-section-heading { gap: 16px; margin-bottom: 22px; }
  body.ict-home .ict-book { grid-template-columns: minmax(0,1fr); background: #14243a; }
  body.ict-home .ict-book > div { padding: 20px; }
  body.ict-home .ict-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  body.ict-home .ict-dialog-content { padding: 16px; }
}
@media (max-width:440px) {
  body.ict-home .navbar .logo-wrap img { max-width: 125px; height: 26px; }
  body.ict-home .nav-actions { gap: 7px; }
  body.ict-home .hero-content { padding: 26px 20px 30px; }
  body.ict-home .hero-actions > a { flex: 1 1 100%; }
  body.ict-home .form-row { grid-template-columns: minmax(0,1fr); }
  body.ict-home .section-h { font-size: 28px; }
  body.ict-home .gallery-grid { grid-auto-rows: 155px; }
  body.ict-home .comm-item { flex-wrap: wrap; }
}
@media (prefers-reduced-motion:reduce) {
  body.ict-home *, body.ict-home *::before, body.ict-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATES
   A section with no rows still has to look finished rather than broken. The
   old markup dropped a bare centred sentence into a full-height section, so
   Courses / Results / Gallery each rendered as a screenful of black on
   desktop. This card is left-aligned like every heading on the page and sized
   to its content, so an empty section reads as "nothing here yet", not "the
   page failed to load".
   ═══════════════════════════════════════════════════════════════════════════ */
body.ict-home .ict-empty {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px;
  padding: 26px clamp(20px, 3vw, 30px);
  border: 1px dashed #4b9ede4d; border-radius: 18px;
  background: linear-gradient(145deg, #0c233b8c, #0715279c);
}
body.ict-home .ict-empty-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 14px;
  border: 1px solid #34bcef50; background: #12394e;
  color: #62ddff; font-size: 22px;
}
body.ict-home .ict-empty-txt { flex: 1 1 260px; min-width: 0; }
body.ict-home .ict-empty-txt h3 { font-size: 18px; line-height: 1.55; margin: 0 0 6px; overflow-wrap: anywhere; }
body.ict-home .ict-empty-txt p { color: #a2b9cf; font-size: 14px; line-height: 1.75; margin: 0; }
body.ict-home .ict-empty-cta { flex-shrink: 0; }
/* The gallery pins its rows to a fixed height for the photo mosaic; an empty
   card must not be stretched to a 220px photo slot. */
body.ict-home .gallery-grid:has(.ict-empty) { grid-auto-rows: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO — uploaded as a JPEG, which cannot carry transparency, so the artwork
   arrives with an opaque near-black box (#00030c) baked in and that box was
   visible against the navbar and footer. `screen` drops those black pixels
   into the dark surface behind them while leaving the white wordmark intact.
   Scoped to .jpg/.jpeg on purpose: upload a transparent PNG or SVG and this
   rule stops applying on its own.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ict-home :is(.logo-wrap, .footer-brand, .footer-col) img[src$=".jpg"],
body.ict-home :is(.logo-wrap, .footer-brand, .footer-col) img[src$=".jpeg"],
body.ict-home :is(.logo-wrap, .footer-brand, .footer-col) img[src$=".JPG"],
body.ict-home :is(.logo-wrap, .footer-brand, .footer-col) img[src$=".JPEG"] {
  mix-blend-mode: screen;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET / SMALL-LAPTOP BAND (761px – 1180px)
   The nav collapsed to a hamburger at 1180px but every two-column panel kept
   its desktop split all the way down to 760px, squeezing the narrower column
   to ~286px — long headings there wrapped to four or five lines. These panels
   now stack one step earlier.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.ict-home :is(.feedback-panel, .contact-wrap) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.ict-home .teacher-wrap { gap: 26px; }
  body.ict-home :is(.feedback-panel, .contact-form) { padding: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER CONTACT ROWS
   The icons used to carry an inline width:16px with a single space after them,
   which collapsed to no visible gap — the footer read "<icon>0771234567". A
   flex row gives a real gap, keeps the icons optically aligned in one column,
   and wraps a long address under the text instead of under the icon.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ict-home .footer-col li > :is(a, span) {
  display: flex; align-items: flex-start; gap: 10px;
  line-height: 1.6; overflow-wrap: anywhere;
}
body.ict-home .footer-col li > :is(a, span) > i {
  flex-shrink: 0; width: 16px; text-align: center;
  line-height: inherit; color: #6fc9f0;
}

/* Empty-state card: tighten the stacked layout on phones, where the icon
   takes a row of its own. */
@media (max-width: 600px) {
  body.ict-home .ict-empty { gap: 12px 18px; padding: 22px 18px; }
  body.ict-home .ict-empty-ico { width: 46px; height: 46px; font-size: 19px; border-radius: 12px; }
  body.ict-home .ict-empty-cta { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIMARY CTA CONTRAST
   The shared button rule painted white text over linear-gradient(115deg,
   var(--accent), var(--accent2)). On this page those tokens are #20c8ff →
   #966bff, so "Login", "Send Message" and "Send feedback" rendered white on
   bright cyan — 1.95:1, far below the 4.5:1 WCAG AA needs and visibly washed
   out. The hero's own CTA already used a deeper blue→purple that reads fine,
   so every primary button now shares one token: consistent, and 4.6:1+ across
   the whole gradient.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ict-home { --ict-cta: linear-gradient(115deg, #0f6fd8, #7a45cf); }
body.ict-home :is(.btn-dark, .btn-accent, .btn-nav, .login-btn, .register-btn, .hero-btn-primary) {
  background: var(--ict-cta);
  border: 1px solid #7a45cf5c;
  box-shadow: 0 8px 24px #1e6fd633;
  color: #fff;
}
body.ict-home :is(.btn-dark, .btn-accent, .btn-nav, .hero-btn-primary):hover {
  background: linear-gradient(115deg, #1279e6, #8a4fe0);
}

/* Community cards carried the same problem with their brand colours: white on
   #25D366 is 1.98:1. These are still the official WhatsApp / Telegram shades,
   just the darker half of each brand's own pair, which clears AA. */
body.ict-home :is(.wa .comm-icon, .wa .comm-btn) { background: linear-gradient(135deg, #0F8074, #075E54); }
body.ict-home :is(.tg .comm-icon, .tg .comm-btn) { background: linear-gradient(135deg, #0077B6, #005F8F); }

/* ═══════════════════════════════════════════════════════════════════════════
   TEACHER PHOTO — PORTRAIT FRAME
   The upload is 1983×793 (2.5:1 landscape) with the subject centred and pure
   black either side, so `object-fit:contain` inside a 480px-tall box rendered
   a short, wide letterbox. A 4:5 frame with `cover` crops only that empty
   black margin — the subject itself spans roughly x650–x1320 of the source and
   a 4:5 crop keeps x674–x1308 — and gives a taller, properly portrait card.
   Capped at 500px wide so it never outgrows the text column beside it.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ict-home .teacher-photo {
  aspect-ratio: 4 / 5;
  width: 100%; max-width: 500px;
  height: auto; max-height: none;
  margin-inline: auto;
}
body.ict-home .teacher-photo img {
  width: 100%; height: 100%; max-height: none;
  object-fit: cover; object-position: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDER CARDS — EQUAL HEIGHT
   Swiper ships `.swiper-slide { height: 100% }`. The wrapper has no definite
   height, so that resolves to the slide's own content height AND, because the
   cross size is no longer `auto`, it opts the slide out of the flex container's
   stretch. Result: a one-line description gave a 395px card next to a two-line
   417px one, with the two "View Location & Details" buttons off by 22px.
   `height:auto` lets stretch do its job; .inst-card already carries
   height:100% and `.btn-map { margin-top:auto }`, so the buttons line up.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ict-home :is(.institute-slider, .results-slider, .testi-slider) .swiper-wrapper { align-items: stretch; }
body.ict-home :is(.institute-slider, .results-slider, .testi-slider) .swiper-slide { height: auto; display: flex; }
body.ict-home :is(.institute-slider, .results-slider, .testi-slider) .swiper-slide > * { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO GRID — FIXED COLUMN COUNT + SEARCH
   auto-fill meant the column count drifted with the viewport, so "8 cards"
   could land as 4+4, 3+3+2 or 5+3. The count is explicit now, which is what
   makes the first screen read as two clean rows of four.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ict-home .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.ict-home .video-card { max-width: none; }
@media (max-width: 1180px) { body.ict-home .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { body.ict-home .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { body.ict-home .video-grid { grid-template-columns: minmax(0, 1fr); } }

/* Search hides a card regardless of the "first 8" state, so it needs to beat
   .hidden-vid.show, which is display:flex. */
body.ict-home .video-card.vid-filtered { display: none !important; }

body.ict-home .ict-video-search {
  position: relative; display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px; padding: 0 16px;
  border: 1px solid #4b9ede3d; border-radius: 14px; background: #08192c;
}
body.ict-home .ict-video-search:focus-within { border-color: #4bd5ff; box-shadow: 0 0 0 3px #3cb8ed1f; }
body.ict-home .ict-video-search > i { flex-shrink: 0; color: #6fc9f0; font-size: 14px; }
/* btech.css styles every input via
   `body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])`.
   Four chained :not() selectors score (0,4,2), which outranks any sane class
   selector here, so the field kept its own card background and border and read
   as a box inside a box. These two are forced; everything else cascades. */
body.ict-home .ict-video-search-input {
  flex: 1; min-width: 0; min-height: 50px;
  border: 0 !important; outline: none; background: transparent !important;
  color: var(--text); font: inherit; font-size: 15px;
}
body.ict-home .ict-video-search-input::placeholder { color: #8ba4bd; }
/* the browser's own clear affordance would sit next to ours */
body.ict-home .ict-video-search-input::-webkit-search-cancel-button { display: none; }
body.ict-home .ict-video-search-clear {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid #4b9ede3d; border-radius: 9px;
  background: #12304c; color: #cfeaff; font-size: 19px; line-height: 1;
}
body.ict-home .ict-video-search-clear[hidden] { display: none; }
body.ict-home .ict-video-noresults {
  margin: 0 0 22px; padding: 18px 20px;
  border: 1px dashed #4b9ede4d; border-radius: 14px;
  color: #a2b9cf; font-size: 14px;
}
body.ict-home .ict-video-noresults[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LESSON CARD PLAY BUTTON
   It was a 58x42 rounded-rectangle in #f02647 — the YouTube play button, near
   enough to read as one. A round badge in the site's own CTA gradient says
   "our player" instead.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ict-home .video-card .play-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ict-cta); border: 1px solid #8a6cff5c; color: #fff;
  box-shadow: 0 6px 24px #0009, 0 0 22px #2b7de83d;
}
body.ict-home .video-card:is(:hover, :focus-visible) .play-btn {
  background: linear-gradient(115deg, #1279e6, #8a4fe0);
}
/* Thumbnails are remote images; a right-click "open image in new tab" is the
   one place the lesson grid still names its source out loud. */
body.ict-home .video-card img { -webkit-user-drag: none; user-select: none; }

/* ============================================================================
   THEME AUDIO CONTROL
   ---------------------------------------------------------------------------
   Floating, because the background track starts on arrival and a visitor must
   be able to silence it from wherever they are on the page — not by scrolling
   back to find a switch. Bottom-LEFT keeps it clear of the bottom-right
   floating action the page already has.
   ========================================================================= */
body.ict-home .ict-theme-toggle {
    position: fixed; left: 18px; bottom: 18px; z-index: 60;
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 10px 15px;
    border: 1px solid #52b6f64a; border-radius: 999px;
    color: #bdd7ed; background: #102842e6;
    font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .01em;
    cursor: pointer; backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px #02070f5c;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
body.ict-home .ict-theme-toggle:hover { transform: translateY(-1px); border-color: #52b6f6; }
body.ict-home .ict-theme-toggle:focus-visible { outline: 2px solid #41c9ff; outline-offset: 3px; }
body.ict-home .ict-theme-toggle.is-on { color: #ffe0a7; border-color: #ffb54e; background: #392321e6; }
body.ict-home .ict-theme-toggle i { font-size: 13px; }

@media (max-width: 640px) {
    body.ict-home .ict-theme-toggle { left: 12px; bottom: 12px; padding: 9px 13px; font-size: 11px; }
    body.ict-home .ict-theme-toggle span { display: none; }   /* icon only on small screens */
    body.ict-home .ict-theme-toggle { min-width: 44px; justify-content: center; }
}
/* Waiting on the visitor's first gesture — a gentle pulse so it reads as
   "ready", not as a dead control. Still silent until they act. */
body.ict-home .ict-theme-toggle.is-waiting { color: #9fd0ff; border-color: #52b6f6; animation: ictThemePulse 2.4s ease-in-out infinite; }
@keyframes ictThemePulse {
    0%, 100% { box-shadow: 0 10px 28px #02070f5c, 0 0 0 0 #41c9ff00; }
    50%      { box-shadow: 0 10px 28px #02070f5c, 0 0 0 7px #41c9ff1f; }
}
@media (prefers-reduced-motion: reduce) {
    body.ict-home .ict-theme-toggle.is-waiting { animation: none; }
}