/* MSDC Surabaya — surabaya.microscaledc.net
   Acuan visual: Platform/Web/mockup-v2/surabaya/index.html */

/* ---------- Font (self-host, OFL) ---------- */
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/sora-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sora-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

/* ---------- Token ---------- */
:root{
  --bg:#050D1A; --bg-2:#081426; --navy:#0B1F38; --paper:#F5F8FC; --white:#FFFFFF;
  --line:#13243D; --line-2:#1B3354; --line-3:#2A4466;
  --card-line:#DCE5EF; --row-line:#E6ECF3; --input-line:#C9D5E3;
  --text:#0B1F38; --text-2:#33465C; --text-3:#4A5A6E; --text-4:#5F6B79;
  --on-dark:#E8EEF6; --muted:#A9B8CC; --muted-3:#7F93AD;
  --sky:#5CC2FF; --link:#1576B8; --pink:#E30F74; --pink-dark:#C20D63;
  --gold:#DD9F3E; --gold-soft:#E8B96A; --green:#4CC38A;
  --f-head:'Sora',system-ui,sans-serif; --f-body:'IBM Plex Sans',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---------- Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-body)}
img,svg{max-width:100%}
a{color:var(--link)} a:hover{color:#0B5A8F}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--sky)}
h1,h2,h3,p{margin:0}
.wrap{max-width:1200px;margin:0 auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--bg);padding:10px 16px;z-index:10;font-weight:600}
.skip:focus{left:16px;top:16px}
.mono{font-family:var(--f-mono)}
.eyebrow{margin:0 0 18px;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--link)}
.eyebrow--gold{color:var(--gold)}
.h2{font-family:var(--f-head);font-size:40px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.c-link{color:var(--link)} .c-pink{color:var(--pink-dark)} .c-green{color:var(--green)} .c-sky{color:var(--sky)} .c-gold{color:var(--gold-soft)}

/* ---------- Tombol ---------- */
.btn{display:inline-block;text-decoration:none;padding:16px 28px;border-radius:8px;font-weight:600;font-size:15px;border:0;font-family:inherit;cursor:pointer;text-align:center}
.btn--pink{background:var(--pink);color:var(--white)} .btn--pink:hover{background:var(--pink-dark);color:var(--white)}
.btn--ghost{border:1px solid var(--line-3);color:var(--on-dark)} .btn--ghost:hover{color:var(--white);border-color:var(--sky)}
.btn--sky{background:var(--sky);color:var(--bg);padding:13px 22px} .btn--sky:hover{background:#86D3FF;color:var(--bg)}
.btn--gold{background:var(--gold);color:var(--navy);padding:15px 26px} .btn--gold:hover{background:var(--gold-soft);color:var(--navy)}
.btn--navy{background:var(--navy);color:var(--white);padding:13px 22px} .btn--navy:hover{background:#163659;color:var(--white)}
.btn--wa{background:var(--white);color:var(--text);border:1px solid var(--input-line);padding:15px} .btn--wa:hover{border-color:var(--link);color:var(--text)}

/* ---------- Status bar ---------- */
.status{background:var(--bg);color:var(--muted);padding:10px 24px;font-family:var(--f-mono);font-size:12px;border-bottom:1px solid var(--line)}
.status .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
.status__ix{display:flex;flex-wrap:wrap;gap:8px 24px}

/* ---------- Hero + navigasi ---------- */
.hero{background-color:var(--bg);background-image:linear-gradient(rgba(92,194,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(92,194,255,.06) 1px,transparent 1px);background-size:56px 56px;color:var(--on-dark);padding:0 24px 96px}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
.brand{display:flex;align-items:center;background:var(--white);border-radius:10px;padding:7px 14px;text-decoration:none}
.brand picture,.foot__logo picture{display:block}
.brand img{height:42px;width:auto;display:block}
.nav-toggle{display:none;align-items:center;gap:10px;background:transparent;border:1px solid var(--line-3);color:var(--on-dark);font:inherit;font-weight:600;font-size:14px;padding:10px 14px;border-radius:8px;cursor:pointer}
.nav-toggle__bars{display:block;width:18px;height:12px;position:relative}
.nav-toggle__bars::before,.nav-toggle__bars::after,.nav-toggle__bars span{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
.nav-toggle__bars::before{top:0}.nav-toggle__bars span{top:5px}.nav-toggle__bars::after{bottom:0}
.nav-links{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;font-size:14px;font-weight:500}
.nav-links a{color:var(--muted);text-decoration:none} .nav-links a:hover{color:var(--white)}
.nav-links .nav-cta{background:var(--pink);color:var(--white);padding:11px 20px;border-radius:8px;font-weight:600}
.nav-links .nav-cta:hover{background:var(--pink-dark);color:var(--white)}

.hero__body{padding-top:80px;display:flex;flex-wrap:wrap;gap:48px;align-items:end}
.hero__text{flex:999 1 600px;min-width:0}
.hero__kicker{margin:0 0 24px;font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;color:var(--gold)}
.hero h1{font-family:var(--f-head);font-size:62px;line-height:1.06;font-weight:600;letter-spacing:-.025em;color:var(--white)}
.hero h1 span{color:var(--sky)}
.hero__lead{margin-top:28px;font-size:19px;line-height:1.7;color:var(--muted);max-width:640px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.kpi{margin-top:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.kpi__item{background:var(--bg-2);padding:24px 26px}
.kpi__label{font-family:var(--f-mono);font-size:12px;color:var(--muted-3)}
.kpi__val{margin-top:8px;font-family:var(--f-head);font-size:32px;font-weight:600;color:var(--white)}
.kpi__val small{font-size:16px;font-weight:500;color:var(--muted)}

/* ---------- 01 Layanan ---------- */
.sec{padding:104px 24px}
.sec--flush{padding:0 24px 104px}
.sec .h2.mb{margin-bottom:52px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.card{background:var(--white);border:1px solid var(--card-line);border-radius:14px;padding:30px}
.card__code{font-family:var(--f-mono);font-size:12px}
.card h3{margin:14px 0 10px;font-family:var(--f-head);font-size:20px;font-weight:600}
.card p:last-child{font-size:15px;line-height:1.7;color:var(--text-3)}
.rate{margin-top:24px;background:var(--navy);color:var(--on-dark);border-radius:14px;padding:26px 30px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.rate p{font-size:16px;line-height:1.6}

/* ---------- 02 Spesifikasi ---------- */
.spec-wrap{display:flex;flex-wrap:wrap;gap:48px}
.spec-wrap > div:first-child{flex:1 1 340px;min-width:0}
.spec{flex:1.6 1 520px;min-width:0;background:var(--white);border:1px solid var(--card-line);border-radius:14px;overflow:hidden;margin:0}
.spec__row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr);border-bottom:1px solid var(--row-line)}
.spec__row:last-child{border-bottom:0}
.spec dt{margin:0;padding:18px 24px;font-family:var(--f-mono);font-size:13px;color:var(--text-4);background:#F8FAFD}
.spec dd{margin:0;padding:18px 24px;font-size:15px}

/* ---------- 03 Founding member ---------- */
.fm{max-width:1296px;border-radius:20px;background-color:var(--navy);background-image:linear-gradient(rgba(221,159,62,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(221,159,62,.07) 1px,transparent 1px);background-size:48px 48px;color:var(--on-dark);padding:56px 48px}
.fm__head{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:end;margin-bottom:36px}
.fm__head > div:first-child{flex:999 1 520px;min-width:0}
.fm .h2{font-size:38px;color:var(--white)}
.fm__note{margin-top:18px;font-size:16px;line-height:1.7;color:var(--muted)}
.fm__slot{flex:0 0 auto;border:1px solid var(--gold);border-radius:12px;padding:18px 24px;font-family:var(--f-mono)}
.fm__slot p:first-child{font-size:12px;color:var(--gold-soft)}
.fm__slot p:last-child{margin-top:6px;font-size:28px;font-weight:500;color:var(--white)}
.fm__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.fm__item{border:1px solid var(--line-3);border-radius:12px;padding:22px}
.fm__item h3{font-family:var(--f-head);font-weight:600;font-size:17px;color:var(--white)}
.fm__item p{margin-top:6px;font-size:13px;color:var(--muted)}
.fm .btn--gold{margin-top:32px}

/* ---------- 04 Karier ---------- */
.career{display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.career > div:first-child{flex:1 1 360px;min-width:0}
.job{flex:1 1 440px;min-width:0;background:var(--white);border:1px solid var(--card-line);border-radius:14px;padding:30px;display:flex;flex-direction:column;gap:12px}
.job__tag{font-family:var(--f-mono);font-size:12px;color:var(--pink-dark)}
.job h3{font-family:var(--f-head);font-size:22px;font-weight:600}
.job p{font-size:15px;color:var(--text-3)}
.job .btn{align-self:start;margin-top:8px}

/* ---------- 05 Kontak ---------- */
.sec--contact{background:var(--white);border-top:1px solid var(--card-line)}
.contact{display:flex;flex-wrap:wrap;gap:48px}
.contact > div:first-child{flex:1 1 380px;min-width:0}
.contact .h2{margin-bottom:28px}
.contact__list{display:flex;flex-direction:column;gap:16px;font-size:15px;color:var(--text-2)}
.contact__list span{display:block;font-family:var(--f-mono);font-size:12px;color:var(--text-4)}
.form{flex:1 1 440px;min-width:0;background:var(--paper);border:1px solid var(--card-line);border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-2)}
.form input,.form select,.form textarea{font:inherit;font-weight:400;font-size:15px;padding:13px 14px;border:1px solid var(--input-line);border-radius:8px;background:var(--white);color:var(--text)}
.form textarea{resize:vertical;min-height:88px}
.form__actions{display:grid;grid-template-columns:1fr;gap:10px}
.form__note{font-size:13px;color:var(--text-4);line-height:1.6}
.form__status{font-size:13px;color:var(--pink-dark);min-height:1em}

/* ---------- Footer ---------- */
.foot{background:var(--bg);color:var(--muted-3);padding:32px 24px;border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:13px}
.foot__brand{display:flex;align-items:center;gap:14px}
.foot__logo{background:var(--white);border-radius:8px;padding:5px 9px;display:inline-flex}
.foot__logo img{height:28px;width:auto;display:block}
.tagline{font-family:var(--f-mono);letter-spacing:.16em;color:var(--gold-soft)}
.foot a{color:var(--sky)}

/* ---------- 404 ---------- */
.nf{min-height:60vh;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:96px 24px}

/* ---------- Target sentuh minimal 24px (WCAG 2.2 AA 2.5.8) untuk tautan mandiri ---------- */
.nav-links a{padding-top:8px;padding-bottom:8px}
.contact__list a{display:inline-block;padding:4px 0}
.foot a{display:inline-block;padding:4px 0}

/* ---------- Responsif ---------- */
@media (max-width:767px){
  .js .nav-toggle{display:inline-flex}
  .js .nav-links{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:4px;padding:8px 0 4px;font-size:16px}
  .js .nav.is-open .nav-links{display:flex}
  .js .nav-links a{padding:12px 4px;border-bottom:1px solid var(--line)}
  .js .nav-links .nav-cta{margin-top:12px;text-align:center;border-bottom:0;padding:14px 20px}
  .hero{padding-bottom:72px}
  .hero__body{padding-top:48px}
  .hero h1{font-size:38px}
  .hero__lead{font-size:17px}
  .kpi{margin-top:48px;grid-template-columns:1fr 1fr}
  .kpi__item{padding:20px}
  .kpi__val{font-size:26px}
  .sec{padding:80px 20px}
  .sec--flush{padding:0 20px 80px}
  .h2,.fm .h2{font-size:30px}
  .cards,.fm__grid{grid-template-columns:1fr}
  .spec__row{grid-template-columns:1fr}
  .spec dt{padding:14px 20px 4px}
  .spec dd{padding:4px 20px 14px;background:#F8FAFD}
  .spec dt,.spec dd{background:transparent}
  .fm{padding:36px 24px}
  .form{padding:24px}
  .spec-wrap > div:first-child,.spec,.fm__head > div:first-child,.career > div:first-child,.job,.contact > div:first-child,.form,.hero__text{flex-basis:100%}
}
@media (max-width:380px){
  .kpi__item{padding:16px 14px}
  .kpi__val{font-size:20px;white-space:nowrap}
  .kpi__val small{font-size:13px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.nf .brand{align-self:start}