/* ===========================================================
   TMITS — Design System
   Display: Space Grotesk / Body: IBM Plex Sans / Utility: IBM Plex Mono
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- color tokens --- */
  --graphite-950:#0a0d10;
  --graphite-900:#0d1114;
  --navy-900:#0e1620;
  --navy-800:#131f2c;
  --navy-700:#1b2c3d;
  --steel-600:#4b5a6b;
  --steel-400:#7c8b98;
  --steel-300:#a8b3bd;
  --line-800:#22303d;
  --white:#f5f7f8;
  --white-dim:#c7cfd4;
  --signal:#29d3ff;        /* electric blue/cyan accent */
  --signal-dim:#1a8fae;
  --amber:#ff8a3d;         /* used sparingly — before/warning states */
  --ok:#3ddc97;

  /* --- type --- */
  --f-display:'Space Grotesk', sans-serif;
  --f-body:'IBM Plex Sans', sans-serif;
  --f-mono:'IBM Plex Mono', monospace;

  /* --- layout --- */
  --max:1240px;
  --pad:clamp(20px, 5vw, 64px);
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--graphite-950);
  color:var(--white-dim);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--white);
  line-height:1.08;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem, 5vw, 4.2rem); font-weight:700;}
h2{font-size:clamp(1.9rem, 3.4vw, 2.8rem); font-weight:700;}
h3{font-size:clamp(1.2rem, 2vw, 1.5rem); font-weight:600;}
p{margin:0 0 1em;}

.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}

.eyebrow{
  font-family:var(--f-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--signal);
  display:inline-block;
}

.lede{font-size:1.15rem; color:var(--white-dim); max-width:640px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:14px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--signal); color:var(--graphite-950); font-weight:600;}
.btn-primary:hover{background:#7fe5f5; transform:translateY(-1px);}
.btn-primary:focus-visible{outline:2px solid var(--white); outline-offset:3px;}
.btn-ghost{background:transparent; border-color:var(--line-800); color:var(--white);}
.btn-ghost:hover{border-color:var(--signal); color:var(--signal);}
.btn-ghost:focus-visible{outline:2px solid var(--signal); outline-offset:3px;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.btn-arrow{transition:transform .2s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,13,16,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-800);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:var(--f-display); font-weight:700; font-size:1.25rem; color:var(--white);
  display:flex; align-items:center; gap:8px; letter-spacing:0.01em;
}
.logo .dot{width:7px; height:7px; background:var(--signal); border-radius:50%; box-shadow:0 0 8px var(--signal);}
.logo span.small{font-family:var(--f-mono); font-size:0.6rem; color:var(--steel-400); letter-spacing:0.1em; display:block; margin-top:2px;}

nav.main-nav{display:flex; align-items:center; gap:2px;}
nav.main-nav a{
  font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.02em;
  color:var(--white-dim); padding:10px 14px; border-radius:var(--radius);
  transition:color .2s ease;
  position:relative;
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--white);}
nav.main-nav a.active::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--signal);
}
.nav-cta{display:flex; align-items:center; gap:16px;}
.nav-toggle{display:none; background:none; border:1px solid var(--line-800); color:var(--white); padding:8px 10px; border-radius:var(--radius);}

@media (max-width:1080px){
  nav.main-nav{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav-cta .btn-primary{display:none;}
}

/* mobile drawer */
.mobile-drawer{
  position:fixed; inset:0; background:var(--graphite-950); z-index:200;
  display:none; flex-direction:column; padding:20px var(--pad);
  transform:translateY(-8px); opacity:0;
  transition:transform .25s ease, opacity .25s ease;
}
.mobile-drawer.open{display:flex; transform:translateY(0); opacity:1;}
.mobile-drawer .drawer-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:36px;}
.mobile-drawer a{
  font-family:var(--f-display); font-size:1.6rem; color:var(--white); padding:14px 0;
  border-bottom:1px solid var(--line-800);
}
.mobile-drawer .btn-primary{margin-top:24px; justify-content:center;}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{
  font-family:var(--f-mono); font-size:0.72rem; color:var(--steel-400);
  padding:16px var(--pad); max-width:var(--max); margin:0 auto; letter-spacing:0.02em;
}
.breadcrumbs a{color:var(--steel-400);}
.breadcrumbs a:hover{color:var(--signal);}
.breadcrumbs .sep{margin:0 8px; color:var(--line-800);}
.breadcrumbs .current{color:var(--white-dim);}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-800);
  background:var(--graphite-950);
}
.hero-grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-800) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-800) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.35;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto; padding:var(--pad);
  padding-top:clamp(56px, 9vw, 108px); padding-bottom:clamp(56px, 9vw, 108px);
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.hero.text-only .hero-inner{grid-template-columns:1fr; max-width:800px;}
@media (max-width:920px){.hero-inner{grid-template-columns:1fr;}}

.hero-copy h1{margin-bottom:0.4em;}
.hero-copy .lede{margin-bottom:1.6em;}
.hero-tags{
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; color:var(--steel-400);
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line-800);
  text-transform:uppercase;
}

.hero-media{position:relative;}
.frame{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line-800);
}
.frame img{width:100%; height:100%; object-fit:cover; display:block;}
.frame::before, .frame::after,
.corner-tl, .corner-br{ }
.corner-marks .frame{outline:none;}
.corner-marks{position:relative;}
.corner-marks::before,.corner-marks::after{
  content:''; position:absolute; width:22px; height:22px; z-index:3; pointer-events:none;
}
.corner-marks::before{top:-1px; left:-1px; border-top:2px solid var(--signal); border-left:2px solid var(--signal);}
.corner-marks::after{bottom:-1px; right:-1px; border-bottom:2px solid var(--signal); border-right:2px solid var(--signal);}

.hero-media .tag-chip{
  position:absolute; bottom:16px; left:16px; z-index:3;
  background:rgba(10,13,16,0.82); border:1px solid var(--line-800);
  font-family:var(--f-mono); font-size:0.68rem; color:var(--signal);
  padding:8px 12px; letter-spacing:0.05em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.tag-chip .pulse{width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 6px var(--signal); animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.25;}}

/* ---------- section shell ---------- */
section{padding:clamp(56px, 8vw, 108px) 0;}
.section-head{max-width:680px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.divider{border:none; height:1px; background:var(--line-800); margin:0;}

/* trace-line divider — signature motif */
.trace-divider{position:relative; height:2px; margin:0; background:none;}
.trace-divider svg{display:block; width:100%; height:24px; overflow:visible;}
.trace-divider path{fill:none; stroke:var(--line-800); stroke-width:1;}
.trace-divider circle{fill:var(--signal);}

/* ---------- intro split ---------- */
.split{display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center;}
@media (max-width:920px){.split{grid-template-columns:1fr; gap:36px;}}
.split.reverse{grid-template-columns:1.05fr 0.95fr;}
@media (max-width:920px){.split.reverse{grid-template-columns:1fr;}}

/* ---------- service cards ---------- */
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-800); border:1px solid var(--line-800);}
@media (max-width:900px){.service-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.service-grid{grid-template-columns:1fr;}}
.service-card{
  background:var(--graphite-950); padding:32px 28px; position:relative;
  transition:background .25s ease;
}
.service-card:hover{background:var(--navy-900);}
.service-card .idx{font-family:var(--f-mono); font-size:0.72rem; color:var(--signal); letter-spacing:0.08em;}
.service-card h3{margin:14px 0 10px;}
.service-card p{font-size:0.95rem; margin-bottom:18px;}
.service-card .card-link{font-family:var(--f-mono); font-size:0.76rem; color:var(--white); display:inline-flex; align-items:center; gap:8px; letter-spacing:0.03em;}
.service-card .card-link .arrow{transition:transform .2s ease;}
.service-card:hover .card-link .arrow{transform:translateX(4px);}
.service-card:hover .card-link{color:var(--signal);}

/* ---------- spec list (mono tag list) ---------- */
.spec-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 20px;}
@media (max-width:520px){.spec-list{grid-template-columns:1fr;}}
.spec-list li{
  font-family:var(--f-mono); font-size:0.85rem; color:var(--white-dim);
  padding:10px 0; border-bottom:1px solid var(--line-800);
  display:flex; align-items:center; gap:10px;
}
.spec-list li::before{content:'▹'; color:var(--signal); font-size:0.8rem;}

/* ---------- process / timeline ---------- */
.process-rail{position:relative;}
.process-rail::before{
  content:''; position:absolute; left:0; right:0; top:22px; height:1px; background:var(--line-800);
}
.process-track{display:grid; grid-template-columns:repeat(7,1fr); gap:16px;}
@media (max-width:1000px){.process-track{grid-template-columns:repeat(4,1fr);}}
@media (max-width:640px){.process-track{grid-template-columns:repeat(2,1fr);}}
.process-step{position:relative; padding-top:44px;}
.process-step .node{
  position:absolute; top:14px; left:0; width:16px; height:16px; border-radius:50%;
  background:var(--graphite-950); border:2px solid var(--signal);
}
.process-step .num{font-family:var(--f-mono); color:var(--signal); font-size:0.72rem; letter-spacing:0.06em; display:block; margin-bottom:8px;}
.process-step h4{font-family:var(--f-display); font-size:1rem; color:var(--white); margin:0 0 8px; font-weight:600;}
.process-step p{font-size:0.86rem; color:var(--steel-300); margin:0;}

/* vertical variant for narrower contexts */
.process-track.vertical{display:flex; flex-direction:column; gap:0;}
.process-track.vertical .process-step{padding:24px 0 24px 44px; border-left:1px solid var(--line-800); margin-left:8px;}
.process-track.vertical .node{top:26px; left:-9px;}
.process-track.vertical::before{display:none;}

/* ---------- before/after slider ---------- */
.ba-slider{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line-800); user-select:none; touch-action:pan-y;
}
.ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.ba-slider .ba-after{position:absolute; inset:0; overflow:hidden; width:50%;}
.ba-slider .ba-after img{width:var(--ba-img-w, 100%); max-width:none;}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--signal);
  cursor:ew-resize; transform:translateX(-1px);
}
.ba-handle .grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:var(--graphite-950);
  border:2px solid var(--signal); display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); color:var(--signal); font-size:0.9rem;
}
.ba-label{
  position:absolute; top:14px; font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.08em;
  background:rgba(10,13,16,0.82); padding:6px 10px; border:1px solid var(--line-800); text-transform:uppercase;
}
.ba-label.before{left:14px; color:var(--amber);}
.ba-label.after{right:14px; color:var(--signal);}

/* ---------- rack hotspot diagram ---------- */
.rack-diagram{position:relative; border:1px solid var(--line-800); border-radius:var(--radius); overflow:hidden;}
.rack-diagram img{width:100%; display:block;}
.hotspot{
  position:absolute; width:16px; height:16px; border-radius:50%;
  background:rgba(41,211,255,0.18); border:1px solid var(--signal);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.hotspot::after{content:''; width:5px; height:5px; border-radius:50%; background:var(--signal);}
.hotspot .hs-tip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:200px; background:var(--graphite-950); border:1px solid var(--line-800);
  padding:12px 14px; font-size:0.82rem; color:var(--white-dim); display:none; z-index:5;
}
.hotspot .hs-tip strong{display:block; color:var(--white); font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:6px; color:var(--signal);}
.hotspot:hover .hs-tip, .hotspot:focus .hs-tip, .hotspot.active .hs-tip{display:block;}
.hotspot:focus-visible{outline:2px solid var(--white);}

/* ---------- industries ---------- */
.industry-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-800); border:1px solid var(--line-800);}
@media (max-width:900px){.industry-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.industry-grid{grid-template-columns:repeat(2,1fr);}}
.industry-cell{background:var(--graphite-950); padding:26px 20px; min-height:120px; display:flex; flex-direction:column; justify-content:space-between; transition:background .2s ease;}
.industry-cell:hover{background:var(--navy-900);}
.industry-cell .idx{font-family:var(--f-mono); font-size:0.68rem; color:var(--steel-400);}
.industry-cell h4{font-family:var(--f-display); font-size:1.02rem; color:var(--white); margin:0; font-weight:600;}

/* ---------- why / feature list ---------- */
.feature-list{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-800); border:1px solid var(--line-800); margin-top:20px;}
@media (max-width:720px){.feature-list{grid-template-columns:1fr;}}
.feature-item{background:var(--graphite-950); padding:28px;}
.feature-item h4{margin:0 0 8px; font-size:1.05rem;}
.feature-item p{font-size:0.92rem; margin:0; color:var(--steel-300);}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; background:var(--navy-900); border-top:1px solid var(--line-800); border-bottom:1px solid var(--line-800);
  overflow:hidden;
}
.cta-band .hero-grid-overlay{opacity:0.25;}
.cta-band .container{position:relative; z-index:2; text-align:center; max-width:760px;}
.cta-band .btn-row{justify-content:center; margin-top:28px;}

/* ---------- footer ---------- */
footer.site-footer{background:var(--graphite-900); border-top:1px solid var(--line-800); padding:64px 0 28px;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
@media (max-width:820px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-top{grid-template-columns:1fr;}}
.footer-top h5{font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel-400); margin:0 0 18px;}
.footer-top ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.footer-top a{font-size:0.9rem; color:var(--white-dim);}
.footer-top a:hover{color:var(--signal);}
.footer-brand p{font-size:0.9rem; max-width:280px; color:var(--steel-300);}
.footer-bottom{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line-800);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:var(--f-mono); font-size:0.72rem; color:var(--steel-400); letter-spacing:0.03em;
}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--steel-400);}
.field input, .field select, .field textarea{
  background:var(--navy-900); border:1px solid var(--line-800); color:var(--white);
  padding:13px 14px; font-family:var(--f-body); font-size:0.95rem; border-radius:var(--radius);
  transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--signal);
}
.field .hint{font-size:0.76rem; color:var(--steel-400); font-family:var(--f-mono);}
.field-file{
  border:1px dashed var(--line-800); border-radius:var(--radius); padding:22px; text-align:center;
  color:var(--steel-400); font-family:var(--f-mono); font-size:0.8rem; cursor:pointer; transition:border-color .2s ease;
}
.field-file:hover{border-color:var(--signal); color:var(--signal);}
.form-note{font-size:0.82rem; color:var(--steel-400); margin-top:18px;}
.success-box{
  border:1px solid var(--signal); background:rgba(41,211,255,0.06); padding:28px; text-align:center; border-radius:var(--radius);
}
.success-box .eyebrow{justify-content:center;}
.radio-group{display:flex; gap:10px; flex-wrap:wrap;}
.radio-chip{
  font-family:var(--f-mono); font-size:0.78rem; padding:10px 16px; border:1px solid var(--line-800);
  cursor:pointer; color:var(--white-dim); border-radius:var(--radius);
}
.radio-chip input{display:none;}
.radio-chip:has(input:checked){border-color:var(--signal); color:var(--signal); background:rgba(41,211,255,0.06);}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--line-800);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--white);
  font-family:var(--f-display); font-size:1.05rem; font-weight:600;
  padding:22px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:20px;
}
.faq-q .plus{font-family:var(--f-mono); color:var(--signal); font-size:1.1rem; transition:transform .2s ease;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{padding-bottom:22px; margin:0; color:var(--steel-300); max-width:640px;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- solutions / gallery filters ---------- */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-chip{
  font-family:var(--f-mono); font-size:0.76rem; padding:9px 16px; border:1px solid var(--line-800);
  color:var(--steel-300); cursor:pointer; letter-spacing:0.02em; border-radius:var(--radius);
}
.filter-chip.active{border-color:var(--signal); color:var(--signal);}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.gallery-grid{grid-template-columns:1fr;}}
.gallery-item{border:1px solid var(--line-800); overflow:hidden;}
.gallery-item .frame{aspect-ratio:4/3;}
.gallery-item .g-info{padding:18px;}
.gallery-item .g-cat{font-family:var(--f-mono); font-size:0.68rem; color:var(--signal); text-transform:uppercase; letter-spacing:0.05em;}
.gallery-item h4{margin:8px 0 0; font-size:1.02rem;}
.gallery-placeholder{
  grid-column:1/-1; border:1px dashed var(--line-800); padding:56px 24px; text-align:center; color:var(--steel-400);
}
.gallery-placeholder .eyebrow{justify-content:center;}

/* ---------- solution scenario blocks ---------- */
.solution-block{display:grid; grid-template-columns:0.4fr 1fr 1fr; gap:32px; padding:36px 0; border-bottom:1px solid var(--line-800);}
@media (max-width:900px){.solution-block{grid-template-columns:1fr; gap:14px;}}
.solution-block h3{margin-bottom:4px;}
.solution-block .label{font-family:var(--f-mono); font-size:0.72rem; color:var(--signal); letter-spacing:0.06em; text-transform:uppercase;}
.solution-block .col h5{font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel-400); margin:0 0 10px;}
.solution-block .col p{font-size:0.92rem; margin:0; color:var(--white-dim);}

/* util */
.mt-0{margin-top:0;}
.text-signal{color:var(--signal);}
.small-mono{font-family:var(--f-mono); font-size:0.76rem; color:var(--steel-400); letter-spacing:0.04em;}