/* ===========================================================
   MLgrads Tech — Design tokens
   Graphite base, warm signal-amber accent, muted sage secondary
   =========================================================== */
:root{
  --bg:            #161819;
  --bg-raised:     #1d2022;
  --bg-card:       #1a1c1d;
  --line:          #2c2f31;
  --line-soft:     #232527;
  --text:          #EDEAE4;
  --text-dim:      #9a9d9e;
  --text-faint:    #6e7173;
  --accent:        #E8A33D;
  --accent-dim:    #b9842f;
  --sage:          #6B8F71;
  --font-display:  'Inter', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;
  --max-w:         1180px;
  --radius:        4px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}

/* subtle grain overlay for texture */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:0.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--accent);
  letter-spacing:0.02em;
  margin-bottom:0.9rem;
}

::selection{background:var(--accent); color:var(--bg);}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(22,24,25,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.5rem;
  width:100%;
  gap:0.75rem;
}
.logo{display:flex; align-items:center; gap:0.6rem; min-width:0; flex-shrink:1;}
.logo-mark{
  width:34px; height:34px;
  color:var(--text);
  flex-shrink:0;
}
.logo-mark .mark-node{color:var(--text);}
.logo-mark .mark-node-accent{color:var(--accent);}
.logo-mark .mark-link{color:var(--text-faint);}
.logo-mark .mark-hex{color:var(--line);}
.logo:hover .logo-mark{color:var(--accent);}
.logo:hover .mark-hex{color:var(--accent-dim);}
.logo-text{
  font-family:var(--font-mono);
  font-weight:500; font-size:1rem;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.logo-text.small{font-size:0.95rem;}
.logo-accent{color:var(--accent);}

.nav-links{display:flex; align-items:center; gap:2rem; flex-shrink:0;}
.nav-links a{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--text-dim);
  transition:color 0.2s ease;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--text);}
.nav-cta{
  border:1px solid var(--accent);
  color:var(--accent) !important;
  padding:0.5rem 1rem;
  border-radius:var(--radius);
}
.nav-cta:hover{
  background:var(--accent);
  color:var(--bg) !important;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:pointer;
  padding:0.4rem;
  flex-shrink:0;
}
.nav-toggle span{
  width:22px; height:2px; background:var(--text);
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  padding:9.5rem 1.5rem 5rem;
  max-width:var(--max-w);
  margin:0 auto;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:3.5rem;
  align-items:center;
}
.hero-title{
  font-size:clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin-bottom:0.6rem;
}
.hero-tagline{
  font-family:var(--font-mono);
  font-size:clamp(1.1rem, 2vw, 1.4rem);
  color:var(--accent);
  margin-bottom:1.5rem;
}
.hero-tagline .plus{color:var(--sage);}
.hero-tagline .amp{color:var(--text-faint);}
.hero-sub{
  color:var(--text-dim);
  font-size:1.05rem;
  max-width:480px;
  margin-bottom:2.2rem;
}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-size:0.9rem;
  padding:0.85rem 1.6rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--accent);
  color:var(--bg);
  font-weight:600;
}
.btn-primary:hover{background:#f0ad52;}
.btn-ghost{
  border-color:var(--line);
  color:var(--text-dim);
}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-block{width:100%; margin-top:0.6rem;}

/* terminal */
.hero-terminal{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
}
.terminal-bar{
  display:flex; align-items:center; gap:0.5rem;
  padding:0.7rem 1rem;
  background:var(--bg-raised);
  border-bottom:1px solid var(--line);
}
.dot{width:10px; height:10px; border-radius:50%;}
.dot-r{background:#e85d5d;}
.dot-y{background:#e8c25d;}
.dot-g{background:#6BC58A;}
.terminal-title{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--text-faint);
  margin-left:0.5rem;
}
.terminal-body{
  font-family:var(--font-mono);
  font-size:0.85rem;
  line-height:1.8;
  padding:1.4rem;
  min-height:260px;
  color:var(--text-dim);
  white-space:pre-wrap;
}
.terminal-body .prompt{color:var(--sage);}
.terminal-body .out{color:var(--text);}
.terminal-body .accent{color:var(--accent);}
.cursor{
  display:inline-block; width:7px; height:1em;
  background:var(--accent);
  vertical-align:text-bottom;
  animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}

/* ===========================================================
   STRIP
   =========================================================== */
.strip{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-raised);
}
.strip-inner{
  max-width:var(--max-w); margin:0 auto;
  padding:2.6rem 1.5rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.strip-item{display:flex; gap:1rem; align-items:flex-start;}
.strip-num{
  font-family:var(--font-mono);
  color:var(--accent);
  font-size:0.85rem;
  flex-shrink:0;
  margin-top:0.2rem;
}
.strip-item p{color:var(--text-dim); font-size:0.95rem;}

/* ===========================================================
   SECTION HEAD (shared)
   =========================================================== */
.section-head{
  max-width:var(--max-w); margin:0 auto;
  padding:5rem 1.5rem 2.5rem;
  text-align:left;
}
.section-head h2{
  font-size:clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:0.6rem;
}
.section-sub{color:var(--text-dim); font-size:1.05rem;}

/* ===========================================================
   SERVICES
   =========================================================== */
.services{padding-bottom:3rem;}
.service-groups{
  max-width:var(--max-w); margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.service-group{
  background:var(--bg);
  padding:2.2rem 2rem;
}
.group-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.8rem 1rem;
  margin-bottom:1.4rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--line-soft);
}
.group-icon{
  width:48px; height:48px;
  flex-shrink:0;
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px;
}
.group-icon svg{width:100%; height:100%;}
.group-icon .icon-pop{color:var(--accent);}
.group-icon .icon-dim{opacity:0.4;}
.service-group[data-group="01"] .group-icon{color:var(--sage);}
.service-group[data-group="01"] .group-icon .icon-pop{color:var(--accent);}
.service-group[data-group="02"] .group-icon{color:var(--accent-dim);}
.service-group[data-group="02"] .group-icon .icon-pop{color:var(--accent);}
.service-group[data-group="03"] .group-icon{color:var(--text-dim);}
.service-group[data-group="03"] .group-icon .icon-pop{color:var(--sage);}
.group-tag{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--accent);
  border:1px solid var(--line);
  padding:0.2rem 0.55rem;
  border-radius:3px;
}
.group-head h3{font-size:1.4rem; font-weight:700;}
.group-head p{color:var(--text-faint); font-size:0.9rem; width:100%;}

.service-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.9rem 2rem;
}
.service-list li{
  display:flex; flex-direction:column; gap:0.25rem;
  padding:0.7rem 0;
  border-bottom:1px solid var(--line-soft);
}
.svc-name{
  font-weight:600; font-size:0.97rem;
  display:flex; align-items:center; gap:0.5rem;
}
.svc-name::before{
  content:"›";
  color:var(--accent);
  font-family:var(--font-mono);
}
.svc-desc{color:var(--text-faint); font-size:0.87rem; padding-left:1.1rem;}

/* ===========================================================
   PROCESS
   =========================================================== */
.process-flow{
  max-width:var(--max-w); margin:0 auto;
  padding:0 1.5rem 5.5rem;
  display:flex;
  align-items:stretch;
  gap:1.2rem;
}
.process-step{
  flex:1;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.8rem 1.6rem;
}
.process-index{
  font-family:var(--font-mono);
  color:var(--sage);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.process-step h3{font-size:1.25rem; margin:0.6rem 0 0.5rem;}
.process-step p{color:var(--text-dim); font-size:0.92rem;}
.process-arrow{
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint);
  font-size:1.4rem;
  flex-shrink:0;
}

/* ===========================================================
   ABOUT
   =========================================================== */
.about{background:var(--bg-raised); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.about-inner{
  max-width:760px; margin:0 auto;
  padding:5.5rem 1.5rem;
}
.about-inner h2{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  font-weight:700;
  line-height:1.3;
  margin-bottom:1.2rem;
}
.about-inner p:last-child{color:var(--text-dim); font-size:1.02rem;}

/* ===========================================================
   CONTACT
   =========================================================== */
.contact-inner{
  max-width:var(--max-w); margin:0 auto;
  padding:5.5rem 1.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
}
.contact-copy h2{
  font-size:clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight:700; margin-bottom:0.8rem;
}
.contact-copy p{color:var(--text-dim); margin-bottom:1.6rem;}
.contact-email{
  font-family:var(--font-mono);
  color:var(--accent);
  font-size:1.05rem;
  border-bottom:1px solid var(--accent-dim);
  padding-bottom:0.2rem;
}
.contact-email:hover{color:#f0ad52;}

.contact-form{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.8rem;
  display:flex;
  flex-direction:column;
}
.contact-form label{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--text-dim);
  margin-bottom:0.4rem;
  margin-top:1rem;
}
.contact-form label:first-child{margin-top:0;}
.contact-form input, .contact-form textarea{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font-display);
  font-size:0.95rem;
  padding:0.7rem 0.9rem;
  resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.form-status{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--sage);
  margin-top:0.8rem;
  min-height:1.2rem;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{border-top:1px solid var(--line-soft);}
.footer-inner{
  max-width:var(--max-w); margin:0 auto;
  padding:3rem 1.5rem;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:2.5rem;
}
.footer-col{display:flex; flex-direction:column;}
.footer-brand{gap:0.8rem;}
.footer-logo{display:flex; align-items:center; gap:0.6rem;}
.footer-logo .logo-mark{width:28px; height:28px;}
.footer-copy{color:var(--text-faint); font-size:0.85rem;}
.footer-label{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--accent);
  margin-bottom:0.6rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.footer-text{
  color:var(--text-dim);
  font-size:0.88rem;
  line-height:1.6;
}
.footer-phone{margin-top:0.5rem;}
.footer-phone a{color:var(--text-dim);}
.footer-phone a:hover{color:var(--accent);}
.footer-social{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  align-items:flex-start;
}
.footer-social a{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--text-dim);
}
.footer-social a:hover{color:var(--accent);}

/* ===========================================================
   SCROLL REVEAL
   =========================================================== */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-terminal{order:-1;}
  .strip-inner{grid-template-columns:1fr; gap:1.4rem;}
  .service-list{grid-template-columns:1fr;}
  .process-flow{flex-direction:column;}
  .process-arrow{transform:rotate(90deg); padding:0.2rem 0;}
  .contact-inner{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr; gap:1.8rem;}
}

@media (max-width:860px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0;
    z-index:99;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--bg-raised);
    border-bottom:1px solid var(--line-soft);
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
  }
  .nav-links.open{max-height:400px;}
  .nav-links a{
    width:100%;
    padding:1rem 1.5rem;
    border-bottom:1px solid var(--line-soft);
  }
  .nav-links a.nav-cta,
  #navLinks a.nav-cta,
  a#navCta{
    margin:1rem 1.5rem !important;
    width:fit-content !important;
    max-width:200px !important;
    padding:0.6rem 1.2rem !important;
    border:1px solid var(--accent) !important;
    display:table !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }
  .nav-toggle{display:flex;}
}

@media (max-width:480px){
  .hero{padding-top:8rem;}
  .group-head h3{font-size:1.2rem;}
}