/* Mobway IT Solutions — brand: #00C65E green, #121111 black, #F4F4F4 light.
   Single, committed dark identity: every color is painted explicitly. */

:root{
  color-scheme: dark;

  --ink:        #0A0B0A;
  --ink-2:      #0F110F;
  --surface:    #151715;
  --surface-2:  #1C1F1C;
  --line:       rgba(244,244,244,.12);
  --line-strong:rgba(244,244,244,.28);

  --text:       #F4F4F4;
  --muted:      #96A099;   /* grey biased toward the brand green */
  --accent:     #00C65E;
  --accent-ink: #062615;
  --accent-soft: rgba(0,198,94,.10);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --shell: 1220px;
  --gutter: clamp(20px, 5vw, 64px);
  --slant: -14deg;              /* echoes the slant of the Mobway mark */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-ink);
  padding:12px 18px; font-family:var(--mono); font-size:.8rem;
}
.skip:focus{ left:12px; top:12px; }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- Type ---------- */

.h2, .hero-title{
  font-family:var(--display);
  font-weight:700;
  font-variation-settings:"wdth" 110;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.96;
  text-wrap:balance;
  margin:0;
}
.hero-title{ font-size:clamp(2.6rem, 7.2vw, 5.4rem); }
.h2{ font-size:clamp(1.9rem, 3.6vw, 3.1rem); }

h3{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"wdth" 100;
  letter-spacing:-.01em;
  margin:0;
}

p{ margin:0; }
.lede{ font-size:clamp(1.02rem,.5vw + .95rem,1.28rem); color:#D6DAD7; max-width:58ch; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
  display:flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:18px; height:9px;
  background:var(--accent);
  transform:skewX(var(--slant));
  flex:none;
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; padding:13px 22px; border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  cursor:pointer; white-space:nowrap;
}
.btn-lg{ padding:16px 28px; font-size:.84rem; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); font-weight:500; }
.btn-primary:hover{ background:#22DC79; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--text); background:transparent; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Header ---------- */

.site-header{
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:40;
  background:rgba(10,11,10,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:24px;
  min-height:74px;
}
.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-decoration:none; flex:none; }
.brand img{ width:132px; height:auto; }
.brand-suffix{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
  padding-left:2px;
}
.nav{ display:flex; gap:clamp(14px,1.8vw,26px); margin-left:auto; }
.nav a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:#C9CFCB; padding:6px 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--accent); transition:right .22s ease;
}
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:16px; margin-left:8px; }
.lang{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.lang-btn{
  background:none; border:0; padding:2px; color:var(--muted); cursor:pointer;
  font:inherit; font-size:inherit; letter-spacing:.1em; line-height:1;
}
.lang-btn.is-active{ color:var(--accent); }
.menu-toggle{ display:none; }

/* ---------- Hero ---------- */

.hero{ position:relative; overflow:hidden; padding-block:clamp(72px,11vw,140px) clamp(48px,6vw,72px); }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.hero-inner{ position:relative; display:grid; gap:26px; justify-items:start; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }

.stats{
  position:relative;
  margin:clamp(56px,8vw,92px) 0 0;
  padding-top:26px;
  border-top:1px solid var(--line);
  display:grid; gap:28px 40px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.stat dt{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.stat dd{
  margin:.35em 0 0; font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 110;
  font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; font-variant-numeric:tabular-nums;
}

/* ---------- Sections ---------- */

.section{ padding-block:clamp(72px,9vw,128px); border-top:1px solid var(--line); }
.section-tight{ padding-block:clamp(56px,7vw,96px); }
.section-alt{ background:var(--ink-2); }

.section-head{ display:grid; gap:16px; margin-bottom:clamp(36px,5vw,60px); }

.split{ display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2.6fr); gap:clamp(24px,4vw,60px); }
.split-body{ display:grid; gap:22px; max-width:68ch; }
.split-body p{ color:#C4CAC6; }

/* ---------- Services ---------- */

.service-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.service{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:8px clamp(20px,4vw,56px);
  padding:26px 0 26px 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:padding-left .25s ease;
}
.service::before{
  content:""; position:absolute; left:0; top:50%; width:14px; height:8px;
  background:var(--accent); transform:translateY(-50%) skewX(var(--slant)) scaleX(0);
  transform-origin:left center; transition:transform .25s ease;
}
.service:hover{ padding-left:30px; }
.service:hover::before{ transform:translateY(-50%) skewX(var(--slant)) scaleX(1); }
.service h3{ font-size:clamp(1.25rem,1.9vw,1.75rem); text-transform:uppercase; font-variation-settings:"wdth" 105; }
.service p{ color:var(--muted); }

/* ---------- Cards ---------- */

.cards{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); }
.card{
  background:var(--surface); border:1px solid var(--line);
  padding:28px 26px 24px; display:grid; gap:14px; align-content:start;
}
.card h3{ font-size:1.3rem; }
.card > p{ color:var(--muted); }
.meta{ margin:6px 0 0; display:grid; gap:12px; border-top:1px solid var(--line); padding-top:16px; }
.meta dt{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.meta dd{ margin:2px 0 0; font-size:.95rem; }

/* ---------- Process ---------- */

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.step{ background:var(--ink-2); padding:26px 22px 30px; display:grid; gap:12px; align-content:start; }
.step-n{ font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; color:var(--accent); }
.step h3{ font-size:1.12rem; text-transform:uppercase; }
.step p{ color:var(--muted); font-size:.95rem; }

/* ---------- Tags ---------- */

.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.tags li{
  border:1px solid var(--line-strong); padding:9px 16px;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:#D3D8D5;
}

/* ---------- Stack ---------- */

.stack-groups{ display:grid; gap:0; max-width:none; }
.stack-group{
  display:grid; grid-template-columns:minmax(110px,180px) minmax(0,1fr); gap:10px 28px;
  padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.stack-group:first-child{ border-top:1px solid var(--line); }
.stack-group h3{ font-family:var(--mono); font-weight:500; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.stack-group p{ color:#D3D8D5; }

/* ---------- Cases ---------- */

.cases{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.case{
  border:1px solid var(--line); background:var(--surface); padding:26px 24px;
  display:grid; gap:12px; align-content:start;
  transition:border-color .2s ease, transform .2s ease;
}
.case:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.case-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.case h3{ font-size:1.3rem; text-transform:uppercase; }
.case > p:not(.case-tag):not(.case-metric){ color:var(--muted); font-size:.95rem; }
.case-metric{
  margin-top:4px; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--accent);
}

/* ---------- Contact ---------- */

.contact{ background:var(--ink-2); }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(32px,5vw,72px); align-items:start; }
.contact-grid > div{ display:grid; gap:20px; align-content:start; }
.contact-grid p{ color:#C4CAC6; max-width:48ch; }

.contact-list{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:14px; }
.contact-list li{ display:grid; gap:2px; border-top:1px solid var(--line); padding-top:12px; }
.contact-list span:first-child{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.contact-list a{ text-decoration:none; color:var(--text); }
.contact-list a:hover{ color:var(--accent); }

.form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field{ display:grid; gap:7px; }
.field-wide{ grid-column:1 / -1; }
.form label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.form input,.form select,.form textarea{
  font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--line); padding:12px 14px; width:100%; border-radius:0;
}
.form textarea{ resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--accent); outline:none; }
.form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.form-note{ font-family:var(--mono); font-size:.72rem; color:var(--muted); max-width:34ch; }
.form-note.is-ok{ color:var(--accent); }

/* ---------- Footer ---------- */

.site-footer{ border-top:1px solid var(--line); padding-block:44px calc(44px + env(safe-area-inset-bottom, 0px)); }
.footer-inner{ display:grid; gap:26px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; }
.footer-brand{ display:grid; gap:12px; justify-items:start; }
.footer-brand img{ width:120px; }
.footer-brand p{ color:var(--muted); font-size:.9rem; max-width:34ch; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:18px; justify-content:flex-end; }
.footer-nav a{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:#C9CFCB; }
.footer-nav a:hover{ color:var(--accent); }
.copyright{ grid-column:1 / -1; border-top:1px solid var(--line); padding-top:20px; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--muted); }

/* ---------- Reveal ---------- */

.reveal{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: no-preference){
  /* Content is always readable: the reveal only lifts, it never hides. */
  .js .reveal{ transform:translateY(14px); }
  .js .reveal.is-in{ transform:none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 940px){
  .split{ grid-template-columns:1fr; gap:18px; }
  .service{ grid-template-columns:1fr; gap:6px; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-nav{ justify-content:flex-start; }
}

@media (max-width: 820px){
  .menu-toggle{
    display:grid; gap:5px; width:42px; height:38px; place-content:center;
    background:transparent; border:1px solid var(--line-strong); cursor:pointer; padding:0;
  }
  .menu-toggle span{ display:block; width:18px; height:1.5px; background:var(--text); }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; margin:0;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 20px;
  }
  .nav:not(.is-open){ display:none; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .header-inner{ position:relative; }
  .brand-suffix{ display:none; }
  .header-actions .btn-primary{ display:none; }
}

@media (max-width: 560px){
  .form{ grid-template-columns:1fr; }
  .stack-group{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- FAQ ---------- */

.faq{ margin:0; display:grid; gap:0; }
.faq-item{ border-top:1px solid var(--line); padding:20px 0; display:grid; gap:8px; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq dt{
  font-family:var(--display); font-weight:600; font-size:1.06rem;
  text-transform:uppercase; letter-spacing:-.005em;
}
.faq dd{ margin:0; color:var(--muted); max-width:62ch; }

/* language switch: links now, not buttons */
a.lang-btn{ text-decoration:none; }
a.lang-btn:hover{ color:var(--text); }
.lang-btn.is-active{ color:var(--accent); }