/*
Theme Name: TeMetaTech
Theme URI: https://example.com/temetatech
Author: Mahesh
Description: Animated multi-page WordPress theme for TeMetaTech — technology consulting, products, partnerships, events, blog and career, with dashboard-managed content, a working dark/light toggle and header search.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: temetatech
*/

/* =====================================================
   1. DESIGN TOKENS (light default, dark override)
===================================================== */
:root{
  --tmt-bg:#f5f7fc;
  --tmt-bg-alt:#ffffff;
  --tmt-bg-deep:#0d1740;
  --tmt-text:#0d1330;
  --tmt-text-dim:#5b6482;
  --tmt-line:rgba(13,19,48,0.10);
  --tmt-blue:#2755d6;
  --tmt-blue-dim:#1c3fa8;
  --tmt-navy:#0d1740;
  --tmt-cyan:#22d3ee;
  --tmt-card:#ffffff;
  --tmt-shadow:0 20px 50px -20px rgba(13,23,64,0.25);
  --font-head:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --radius:16px;
  --ease:cubic-bezier(.16,.84,.44,1);
}
html[data-theme="dark"]{
  --tmt-bg:#080c1f;
  --tmt-bg-alt:#0d1330;
  --tmt-bg-deep:#050815;
  --tmt-text:#f2f4fb;
  --tmt-text-dim:#9aa2c0;
  --tmt-line:rgba(242,244,251,0.10);
  --tmt-card:#101736;
  --tmt-shadow:0 20px 50px -20px rgba(0,0,0,0.6);
}

/* =====================================================
   2. BASE / RESET
===================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--tmt-bg);color:var(--tmt-text);
  font-family:var(--font-body);line-height:1.6;overflow-x:hidden;
  transition:background .4s ease,color .4s ease;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;margin:0 0 .5em;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.eyebrow{font-family:var(--font-mono);color:var(--tmt-blue);letter-spacing:.14em;text-transform:uppercase;font-size:13px;}
.section{padding:110px 0;position:relative;}
.text-center{text-align:center;}

.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:999px;background:var(--tmt-blue);color:#fff;font-weight:600;border:none;cursor:pointer;transition:transform .35s var(--ease),background .3s,box-shadow .3s;box-shadow:0 10px 30px -10px rgba(39,85,214,.6);}
.btn:hover{transform:translateY(-3px);background:var(--tmt-blue-dim);}
.btn.btn-outline{background:transparent;border:1px solid var(--tmt-line);color:var(--tmt-text);box-shadow:none;}
.btn.btn-cyan{background:var(--tmt-cyan);color:#04222a;box-shadow:0 10px 30px -10px rgba(34,211,238,.6);}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.stagger > *{opacity:0;animation:tmtFadeUp .8s var(--ease) forwards;}
.stagger > *:nth-child(1){animation-delay:.05s;}
.stagger > *:nth-child(2){animation-delay:.15s;}
.stagger > *:nth-child(3){animation-delay:.25s;}
.stagger > *:nth-child(4){animation-delay:.35s;}
.stagger > *:nth-child(5){animation-delay:.45s;}
.stagger > *:nth-child(6){animation-delay:.55s;}
@keyframes tmtFadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes tmtFloat{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-40px);}}
@keyframes tmtMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* =====================================================
   3. PRELOADER / SCROLL PROGRESS
===================================================== */
#tmt-preloader{position:fixed;inset:0;background:var(--tmt-bg-deep);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s ease;}
#tmt-preloader.loaded{opacity:0;visibility:hidden;}
#tmt-preloader .mark{font-family:var(--font-head);font-size:34px;color:#fff;letter-spacing:.02em;}
#tmt-preloader .mark span{color:var(--tmt-cyan);}
#tmt-scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--tmt-blue),var(--tmt-cyan));z-index:1000;width:0%;}

/* =====================================================
   4. HEADER + PRIMARY NAVIGATION (desktop + mobile combined)
===================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:900;padding:20px 0;transition:padding .4s,border-color .4s;}
.site-header.scrolled{padding:12px 0;border-bottom:1px solid var(--tmt-line);}
/* Blur lives on a ::before layer, not on .site-header itself — backdrop-filter/filter/transform
   on an element creates a new containing block for its fixed-position descendants, which would
   trap the full-screen mobile nav (a descendant of the header) inside the header's own small box. */
.site-header.scrolled::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb, var(--tmt-bg) 88%, transparent);backdrop-filter:blur(12px);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.site-branding a{font-family:var(--font-head);font-size:22px;font-weight:700;}
.site-branding span{color:var(--tmt-blue);}

.main-navigation > ul{list-style:none;display:flex;gap:30px;margin:0;padding:0;}
.main-navigation li{position:relative;}
.main-navigation a{position:relative;font-weight:500;}
.main-navigation a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--tmt-blue);transition:width .3s var(--ease);}
.main-navigation a:hover::after,.main-navigation .current-menu-item > a::after{width:100%;}

/* --- Dropdown submenus: desktop hover/focus --- */
.main-navigation .menu-item-has-children > a{padding-right:16px;}
.main-navigation .menu-item-has-children > a::before{
  content:'';position:absolute;right:0;top:45%;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg);transition:transform .3s var(--ease);
}
.main-navigation li:hover > a::before,
.main-navigation li:focus-within > a::before{transform:translateY(-30%) rotate(225deg);}
.main-navigation .sub-menu{
  list-style:none;margin:0;padding:10px;position:absolute;top:calc(100% + 16px);left:50%;
  transform:translate(-50%,8px);min-width:200px;background:var(--tmt-card);border:1px solid var(--tmt-line);
  border-radius:14px;box-shadow:var(--tmt-shadow);display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s ease;z-index:50;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0);}
.main-navigation .sub-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;white-space:nowrap;}
.main-navigation .sub-menu a::after{display:none;}
.main-navigation .sub-menu a:hover{background:rgba(39,85,214,.08);}
.submenu-toggle{display:none;} /* mobile-only button, injected by JS — hidden by default */

/* --- Header action icons + mobile toggle --- */
.header-actions{display:flex;align-items:center;gap:14px;}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--tmt-line);background:var(--tmt-card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tmt-text);transition:border-color .3s,transform .3s;}
.icon-btn:hover{border-color:var(--tmt-blue);transform:translateY(-2px);}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.menu-toggle{display:none;background:none;border:none;color:var(--tmt-text);font-size:26px;cursor:pointer;}

#theme-toggle .icon-sun{display:none;}
html[data-theme="dark"] #theme-toggle .icon-sun{display:block;}
html[data-theme="dark"] #theme-toggle .icon-moon{display:none;}

.nav-close{display:none;position:absolute;top:24px;right:24px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:22px;align-items:center;justify-content:center;cursor:pointer;}

/* --- Mobile nav overlay (single, definitive breakpoint — do not duplicate elsewhere) --- */
@media(max-width:900px){
  .main-navigation{
    position:fixed;inset:0;background:var(--tmt-bg-deep);display:flex;align-items:center;justify-content:center;
    transform:translateY(-100%);transition:transform .5s var(--ease);z-index:1001;overflow-y:auto;padding:100px 20px 60px;
  }
  .main-navigation.open{transform:translateY(0);}
  .main-navigation > ul{flex-direction:column;text-align:center;gap:22px;font-size:22px;}
  .main-navigation a{color:#fff;}

  .main-navigation .menu-item-has-children{text-align:center;}
  .main-navigation .menu-item-has-children > a{display:inline-flex;align-items:center;gap:8px;padding-right:0;}
  .main-navigation .menu-item-has-children > a::before{display:none;}
  .main-navigation .menu-item-has-children .submenu-toggle{
    display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;
    margin-left:6px;border-radius:50%;background:rgba(255,255,255,.08);border:none;color:#fff;cursor:pointer;
    transition:transform .3s var(--ease),background .3s;vertical-align:middle;position:relative;top:1px;
  }
  .main-navigation .menu-item-has-children .submenu-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;pointer-events:none;}
  .main-navigation .menu-item-has-children.submenu-open .submenu-toggle{transform:rotate(180deg);background:var(--tmt-blue);}

  /* Centered with left:50% + translateX(-50%) rather than margin:auto — this stays correct
     regardless of how the parent li is stretched/sized by the column-flex nav, unlike margin:auto
     which is sensitive to that. */
  .main-navigation .sub-menu{
    position:relative;left:50%;top:auto;transform:translateX(-50%);
    opacity:1;visibility:visible;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:none;
    display:block;width:fit-content;min-width:160px;max-width:88vw;
    max-height:0;overflow:hidden;padding:0;margin:0;
    transition:max-height .35s var(--ease),margin .35s var(--ease),padding .35s var(--ease);
  }
  .main-navigation .menu-item-has-children.submenu-open .sub-menu{max-height:400px;padding:8px 0;margin:10px 0 0;}
  .main-navigation .sub-menu li{width:100%;}
  .main-navigation .sub-menu a{display:block;width:100%;color:#c9cfe6;font-size:16px;padding:8px 18px;text-align:center;white-space:nowrap;}

  .nav-close{display:flex !important;}
  .menu-toggle{display:block;}
}

/* =====================================================
   5. SEARCH OVERLAY
===================================================== */
#tmt-search-overlay{position:fixed;inset:0;background:color-mix(in srgb, var(--tmt-bg-deep) 92%, transparent);backdrop-filter:blur(6px);z-index:1200;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;}
#tmt-search-overlay.open{opacity:1;visibility:visible;}
#tmt-search-overlay form{width:min(600px,90vw);display:flex;gap:10px;}
#tmt-search-overlay input{flex:1;background:var(--tmt-card);border:1px solid var(--tmt-line);border-radius:14px;padding:16px 20px;font-size:18px;color:var(--tmt-text);}
#tmt-search-overlay input:focus{outline:none;border-color:var(--tmt-blue);}
#tmt-search-overlay .search-close{color:#fff;background:rgba(255,255,255,.1);border:none;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:20px;}

/* =====================================================
   6. FALLBACK HERO (used when no slider slides are configured)
===================================================== */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding-top:110px;overflow:hidden;transition:background 1s ease;}
.hero-bg{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1s ease;background-size:cover;background-position:center;}
.hero-bg.active{opacity:1;}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,31,.55),rgba(8,12,31,.92));}
.hero .container{position:relative;z-index:1;}
.hero-inner{max-width:720px;}
.hero h1{font-size:clamp(36px,5.6vw,66px);color:#fff;}
.hero p{color:#c9cfe6;font-size:18px;max-width:560px;margin-bottom:20px;}
.hero-panel{display:none;animation:tmtFadeUp .6s var(--ease);}
.hero-panel.active{display:block;}
.hero-switch{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.hero-switch button{
  display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#fff;
  cursor:pointer;transition:all .35s var(--ease);font-weight:600;
}
.hero-switch button.active{background:var(--tmt-blue);border-color:var(--tmt-blue);box-shadow:0 10px 30px -10px rgba(39,85,214,.7);}
.hero-switch button:hover{transform:translateY(-2px);}

/* =====================================================
   7. GRID / CARDS / FEATURE RING
===================================================== */
.grid{display:grid;gap:28px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.partnership-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media(max-width:960px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4,.partnership-row{grid-template-columns:1fr;}
  .partnership-row > div{order:0 !important;}
}

.card{background:var(--tmt-card);border:1px solid var(--tmt-line);border-radius:var(--radius);padding:32px;transition:transform .4s var(--ease),box-shadow .4s;}
.card:hover{transform:translateY(-8px);box-shadow:var(--tmt-shadow);}
.card .service-icon{width:50px;height:50px;border-radius:12px;background:rgba(39,85,214,.12);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.card .service-icon svg{width:24px;height:24px;stroke:var(--tmt-blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

.feature-ring{position:relative;width:100%;max-width:400px;margin:0 auto;aspect-ratio:1;}
.feature-ring .ring-center{
  position:absolute;inset:18%;border-radius:5%;background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-head);font-weight:700;padding:20px;overflow:hidden;
}
.feature-ring .ring-item{position:absolute;width:150px;background:var(--tmt-card);border:1px solid var(--tmt-line);border-radius:14px;padding:14px 16px;font-size:13px;box-shadow:var(--tmt-shadow);}
.feature-ring .ring-item.tl{top:0;left:0%;}
.feature-ring .ring-item.tr{top:0;right:0%;}
.feature-ring .ring-item.bl{bottom:0;left:0%;}
.feature-ring .ring-item.br{bottom:0;right:0%;}

/* =====================================================
   8. MARQUEE (tech strip / partner logos)
===================================================== */
.marquee-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;width:max-content;animation:tmtMarquee 30s linear infinite;}
.marquee-track.reverse{animation-direction:reverse;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
.partner-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:110px;width:200px;margin:0 14px;border:1px solid var(--tmt-line);border-radius:var(--radius);background:var(--tmt-card);flex-shrink:0;}
.partner-badge strong{font-family:var(--font-head);font-size:16px;}
.partner-badge small{color:var(--tmt-text-dim);font-size:11px;}
.global-footprint-image{border-radius:10px;}

/* =====================================================
   9. DEEP/DARK CTA BAND
===================================================== */
.band-deep{background:radial-gradient(circle at 20% 20%,rgba(39,85,214,.35),transparent 60%),var(--tmt-bg-deep);color:#fff;}
.band-deep .eyebrow{color:var(--tmt-cyan);}
.band-deep .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#fff;}
.band-deep .card p{color:#c9cfe6;}

/* =====================================================
   10. BLOG
===================================================== */
.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media(max-width:900px){.blog-list{grid-template-columns:1fr;}}
.post-card{background:var(--tmt-card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--tmt-line);transition:transform .4s var(--ease),box-shadow .4s;}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--tmt-shadow);}
.post-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--tmt-line);}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.post-card:hover .thumb img{transform:scale(1.08);}
.post-card .content{padding:22px;}
.post-card .meta{font-family:var(--font-mono);font-size:12px;color:var(--tmt-text-dim);margin-bottom:10px;}
.single-post .featured{border-radius:var(--radius);overflow:hidden;margin-bottom:36px;}
.single-post .entry-content{max-width:760px;margin:0 auto;font-size:18px;}
.single-post .entry-content img{border-radius:var(--radius);margin:24px 0;}

/* =====================================================
   11. EVENTS — distinct visual language from blog
===================================================== */
.event-list{display:flex;flex-direction:column;gap:22px;}
.event-card{display:grid;grid-template-columns:120px 1fr auto;gap:26px;align-items:center;background:var(--tmt-card);border:1px solid var(--tmt-line);border-radius:var(--radius);padding:22px 26px;transition:border-color .3s,transform .3s;}
.event-card:hover{border-color:var(--tmt-blue);transform:translateX(6px);}
.event-date-badge{background:var(--tmt-navy);color:#fff;border-radius:12px;padding:14px 10px;text-align:center;}
.event-date-badge .day{font-family:var(--font-head);font-size:26px;font-weight:700;line-height:1;}
.event-date-badge .month{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--tmt-cyan);}
.event-tags{display:flex;gap:8px;margin-top:6px;font-family:var(--font-mono);font-size:12px;color:var(--tmt-text-dim);}
.single-event .event-hero{background:var(--tmt-navy);color:#fff;border-radius:var(--radius);padding:50px;margin-bottom:40px;}
.single-event .event-meta-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px;font-family:var(--font-mono);font-size:13px;color:var(--tmt-cyan);}
@media(max-width:700px){
  .event-card{grid-template-columns:80px 1fr;}
  .event-card .btn{grid-column:1/-1;}
}

/* =====================================================
   12. CAREER
===================================================== */
.job-list{display:flex;flex-direction:column;gap:18px;}
.job-item{background:var(--tmt-card);border:1px solid var(--tmt-line);border-radius:var(--radius);padding:26px 30px;transition:border-color .3s;}
.job-item:hover{border-color:var(--tmt-blue);}
.job-item-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.job-item h3{margin:0 0 6px;}
.job-item .tags{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;color:var(--tmt-text-dim);}
.skill-chip{display:inline-block;background:rgba(39,85,214,.1);color:var(--tmt-blue);border-radius:999px;padding:5px 12px;font-size:12px;margin:4px 6px 0 0;font-family:var(--font-mono);}
.job-apply-form{background:var(--tmt-card);border:1px solid var(--tmt-line);border-radius:var(--radius);padding:36px;max-width:640px;margin:40px auto 0;display:none;}
.job-apply-form.open{display:block;}

/* =====================================================
   13. FORMS (contact + job application)
===================================================== */
.tmt-form{display:grid;gap:18px;max-width:640px;}
.tmt-form label{font-size:13px;color:var(--tmt-text-dim);display:block;margin-bottom:6px;}
.tmt-form input,.tmt-form textarea,.tmt-form select{
  width:100%;background:var(--tmt-bg-alt);border:1px solid var(--tmt-line);border-radius:10px;
  padding:14px 16px;color:var(--tmt-text);font-family:var(--font-body);font-size:15px;
}
.tmt-form input:focus,.tmt-form textarea:focus{outline:none;border-color:var(--tmt-blue);}
.form-msg{padding:14px 18px;border-radius:10px;font-size:14px;display:none;}
.form-msg.success{background:rgba(40,180,100,.15);color:#1fae63;display:block;}
.form-msg.error{background:rgba(220,60,60,.15);color:#dc3c3c;display:block;}

.contact-socials{display:flex;align-items:center;gap:12px;margin-top:25px;}
.contact-socials a{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--tmt-line);border-radius:50%;color:var(--tmt-text);background:var(--tmt-card);text-decoration:none;font-size:18px;transition:all .3s ease;}
.contact-socials a:hover{color:#fff;background:var(--tmt-blue);border-color:var(--tmt-blue);transform:translateY(-3px);}
.contact-socials i{line-height:1;}

/* =====================================================
   14. 404
===================================================== */
.error-404{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background:var(--tmt-bg-deep);color:#fff;}
.error-404 .code{font-family:var(--font-head);font-size:clamp(100px,22vw,260px);font-weight:700;color:transparent;-webkit-text-stroke:2px var(--tmt-cyan);line-height:1;}
.error-404 .orb{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--tmt-blue) 0%,transparent 70%);opacity:.35;filter:blur(50px);animation:tmtFloat 8s ease-in-out infinite;}

/* =====================================================
   15. FOOTER
===================================================== */
footer.site-footer{border-top:1px solid var(--tmt-line);padding:70px 0 30px;color:var(--tmt-text-dim);background:var(--tmt-bg-alt);}
footer.site-footer h4{color:var(--tmt-text);}
footer.site-footer a:hover{color:var(--tmt-blue);}
footer.site-footer ul{list-style:none;padding:0;display:grid;gap:8px;}

/* =====================================================
   16. CUSTOM CURSOR (Partnership page)
===================================================== */
#tmt-cursor{position:fixed;width:14px;height:14px;border-radius:50%;background:var(--tmt-cyan);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s,opacity .2s;mix-blend-mode:difference;}
#tmt-cursor.grow{width:44px;height:44px;background:var(--tmt-blue);}
@media(max-width:900px){#tmt-cursor{display:none;}}

/* =====================================================
   17. HERO SLIDER (stacked-card GSAP hero)
===================================================== */
#hero-slider{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--tmt-bg-deep);color:#fff;}

.hs-card{position:absolute;left:0;top:0;background-position:center;background-size:cover;box-shadow:rgba(0,0,0,.4) 0 2px 4px,rgba(0,0,0,.3) 0 7px 13px -3px,rgba(0,0,0,.2) 0 -3px 0 inset;}
.hs-card-fallback.grad-0{background-image:radial-gradient(circle at 30% 20%,rgba(39,85,214,.7),transparent 55%),radial-gradient(circle at 80% 80%,rgba(34,211,238,.5),transparent 55%),#0b1230;}
.hs-card-fallback.grad-1{background-image:radial-gradient(circle at 70% 30%,rgba(34,211,238,.6),transparent 55%),radial-gradient(circle at 20% 80%,rgba(39,85,214,.55),transparent 55%),#0a0f2b;}
.hs-card-fallback.grad-2{background-image:radial-gradient(circle at 20% 70%,rgba(39,85,214,.65),transparent 55%),radial-gradient(circle at 80% 20%,rgba(34,211,238,.4),transparent 55%),#0d1338;}
.hs-card-fallback.grad-3{background-image:radial-gradient(circle at 60% 60%,rgba(34,211,238,.55),transparent 55%),radial-gradient(circle at 15% 15%,rgba(39,85,214,.6),transparent 55%),#0a1029;}

.hs-card-content{position:absolute;left:0;top:0;color:#fff;padding-left:16px;padding-right:8px;box-sizing:border-box;overflow:hidden;}
.hs-content-place{margin-top:6px;font-size:12px;font-weight:500;font-family:var(--font-mono);color:var(--tmt-cyan);overflow-wrap:break-word;}
.hs-content-title-1,.hs-content-title-2{font-weight:700;font-size:19px;font-family:var(--font-head);line-height:1.2;overflow-wrap:break-word;}
.hs-content-start{width:28px;height:4px;border-radius:99px;background-color:var(--tmt-cyan);}

.hs-details{z-index:22;position:absolute;top:22%;left:6%;right:6%;max-width:640px;}
.hs-details .hs-place-box{height:44px;overflow:hidden;}
.hs-details .hs-place-box .hs-place-text{padding-top:14px;font-size:18px;position:relative;font-family:var(--font-mono);color:var(--tmt-cyan);letter-spacing:.08em;text-transform:uppercase;}
.hs-details .hs-place-box .hs-place-text::before{top:0;left:0;position:absolute;content:'';width:28px;height:4px;border-radius:99px;background-color:var(--tmt-cyan);}
.hs-details .hs-title-1,.hs-details .hs-title-2{font-weight:700;font-size:clamp(34px,5.4vw,64px);font-family:var(--font-head);color:#000000;}
/* .hs-details .hs-title-box-1,.hs-details .hs-title-box-2{margin-top:2px;height:100px;overflow:hidden;} */
.hs-details > .hs-desc{margin-top:14px;max-width:480px;color:#000000;font-size:16px;}
.hs-details > .hs-cta{max-width:500px;margin-top:26px;display:flex;align-items:center;flex-wrap:wrap;gap:0;}
.hs-details > .hs-cta > .hs-bookmark,.hs-details > .hs-cta > .hs-star{
  border:none;background:rgba(255,255,255,.08);width:40px;height:40px;border-radius:99px;color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background .3s;
}
.hs-details > .hs-cta > .hs-bookmark:hover,.hs-details > .hs-cta > .hs-star:hover{background:var(--tmt-blue);}
.hs-details > .hs-cta > .hs-bookmark svg,.hs-details > .hs-cta > .hs-star svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;}
.hs-details > .hs-cta > .hs-discover{
  border:1px solid rgba(255,255,255,.4);background:transparent;height:40px;border-radius:99px;color:#fff;
  padding:0 24px;font-size:12px;letter-spacing:.06em;margin-left:14px;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;
  transition:background .3s,border-color .3s;background:var(--tmt-blue);border-color:var(--tmt-blue);
}
.hs-details > .hs-cta > .hs-discover:hover{background:var(--tmt-blue);border-color:var(--tmt-blue); box-shadow: 0 0 10px black;}
.hs-details > .hs-cta > .hs-discover svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}

#hero-slider .hs-pagination{position:absolute;left:0;top:0;display:inline-flex;align-items:center;}
#hero-slider .hs-arrow{z-index:60;width:46px;height:46px;border-radius:999px;border:2px solid rgba(255,255,255,.25);display:grid;place-items:center;cursor:pointer;transition:border-color .3s,background .3s;}
#hero-slider .hs-arrow:hover{border-color:var(--tmt-cyan);background:rgba(34,211,238,.1);}
#hero-slider .hs-arrow:nth-child(2){margin-left:16px;}
#hero-slider .hs-arrow svg{width:20px;height:20px;stroke-width:2;color:rgba(255,255,255,.8);}
#hero-slider .hs-progress-sub-container{margin-left:24px;z-index:60;width:420px;max-width:30vw;height:46px;display:flex;align-items:center;}
#hero-slider .hs-progress-sub-background{width:100%;height:3px;background-color:rgba(255,255,255,.2);}
#hero-slider .hs-progress-sub-foreground{height:3px;background:linear-gradient(90deg,var(--tmt-blue),var(--tmt-cyan));}
#hero-slider .hs-slide-numbers{width:46px;height:46px;overflow:hidden;z-index:60;position:relative;}
#hero-slider .hs-item{width:46px;height:46px;position:absolute;color:#fff;top:0;left:0;display:grid;place-items:center;font-size:26px;font-weight:700;font-family:var(--font-head);}
#hero-slider .hs-cover{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--tmt-bg-deep);z-index:100;}

@media(max-width:900px){
  #hero-slider .hs-progress-sub-container{display:none;}
  .hs-details{top:16%;}
  .hs-details .hs-title-1,.hs-details .hs-title-2{font-size:clamp(28px,9vw,48px);}
  .hs-details > .hs-desc{font-size:14px;}
  #hero-slider .hs-arrow{width:40px;height:40px;}
  #hero-slider .hs-arrow svg{width:17px;height:17px;}
  .hs-content-title-1,.hs-content-title-2{font-size:16px;}
  .hs-card{height:400px;}
}
@media(max-width:560px){
  #hero-slider{min-height:560px;}
  .hs-details{top:14%;right:5%;left:5%;}
  .hs-details > .hs-cta > .hs-discover{padding:0 16px;font-size:11px;margin-left:8px;}
  .hs-card-content{padding-left:10px;padding-right:6px;}
  .hs-content-title-1,.hs-content-title-2{font-size:14px;line-height:1.15;}
  .hs-content-place{font-size:10px;margin-top:4px;}
  .hs-content-start{width:20px;height:3px;}
  #hero-slider .hs-arrow{width:38px;height:38px;}
}
@media(max-width:400px){
  .hs-content-title-1,.hs-content-title-2{font-size:12.5px;}
  .hs-card-content{padding-left:8px;}
}

/* =====================================================
   18. PAGE-TOP HERO BANNER (interior pages)
===================================================== */
.page-hero-section{
  position:relative;width:100%;height:50vh;
  display:flex;align-items:center;justify-content:center;
  background-color:#111525;background-size:cover;background-position:center;background-repeat:no-repeat;
  overflow:hidden;
}
.page-hero-overlay{position:absolute;inset:0;background:rgba(5,8,20,.55);z-index:1;}
.page-hero-content{position:relative;z-index:2;width:100%;text-align:center;padding:30px;}
.page-hero-content h1{margin:0;color:#fff;font-size:clamp(32px,4vw,60px);font-weight:500;line-height:1.05;letter-spacing:-2px;}
@media(max-width:767px){
  .page-hero-section{height:60vh;min-height:350px;}
  .page-hero-content h1{font-size:clamp(38px,12vw,60px);letter-spacing:-1px;}
}

/* =====================================================
   19. GENERAL RESPONSIVE POLISH (things not covered per-component above)
===================================================== */
@media(max-width:900px){
  .section{padding:80px 0;}
  .hero .hero-inner{max-width:100%;}
}
@media(max-width:640px){
  .section{padding:60px 0;}
  .container{padding:0 18px;}
  h1{font-size:clamp(28px,8vw,40px);}
  h2{font-size:clamp(22px,6vw,30px);}
  .job-item{padding:20px;}
  .event-card{padding:16px 18px;gap:16px;}
  .card{padding:24px;}
  .btn{padding:13px 22px;font-size:14px;}
  .site-branding a{font-size:19px;}
  #tmt-search-overlay form{width:94vw;}
  #tmt-search-overlay input{font-size:16px;padding:14px 16px;}
}
@media(max-width:400px){
  .header-actions{gap:8px;}
  .icon-btn{width:36px;height:36px;}
}