:root{
    --bg:#EEF1F3;
    --surface:#FFFFFF;
    --surface-2:#E3E9ED;
    --ink:#121A22;
    --ink-muted:#4C5A69;
    --line:#C7D2D9;
    --accent:#E1590C;
    --accent-ink:#FFFFFF;
    --accent-soft:#FBE3D3;
    --steel:#1F3A5F;
    --steel-soft:#DCE6EF;
    --shadow: 0 1px 0 rgba(18,26,34,.05);
    --maxw: 1180px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12161B;
      --surface:#1A2027;
      --surface-2:#212832;
      --ink:#EBEFF2;
      --ink-muted:#9FACB8;
      --line:#323C46;
      --accent:#FF7A33;
      --accent-ink:#1A0F08;
      --accent-soft:rgba(255,122,51,.14);
      --steel:#8FB4D9;
      --steel-soft:rgba(143,180,217,.12);
    }
  }
  :root[data-theme="dark"]{
    --bg:#12161B;
    --surface:#1A2027;
    --surface-2:#212832;
    --ink:#EBEFF2;
    --ink-muted:#9FACB8;
    --line:#323C46;
    --accent:#FF7A33;
    --accent-ink:#1A0F08;
    --accent-soft:rgba(255,122,51,.14);
    --steel:#8FB4D9;
    --steel-soft:rgba(143,180,217,.12);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:16px;
    line-height:1.55;
    padding-inline:0;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  h1,h2,h3,h4{
    font-family:"Oswald", "Arial Narrow", sans-serif;
    text-transform:uppercase;
    letter-spacing:.01em;
    line-height:1.12;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  .mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; }
  .eyebrow{
    font-family:"IBM Plex Mono", monospace;
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:.6em;
    margin-bottom:.9em;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px;
    background:var(--accent);
    display:inline-block;
  }
  .wrap{
    max-width:var(--maxw);
    margin-inline:auto;
    padding-inline:24px;
  }
  section{ padding-block: 76px; }
  @media (max-width:640px){ section{ padding-block:52px; } }

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

  /* ---------- Blueprint frame motif ---------- */
  .blueprint{
    position:relative;
    border:1px solid var(--line);
  }
  .blueprint::before,.blueprint::after,
  .blueprint .bp-tl, .blueprint .bp-br{
    content:"";
    position:absolute;
    width:14px; height:14px;
    pointer-events:none;
  }
  .blueprint::before{ /* top-left */
    top:-1px; left:-1px;
    border-top:2.5px solid var(--accent);
    border-left:2.5px solid var(--accent);
  }
  .blueprint::after{ /* bottom-right */
    bottom:-1px; right:-1px;
    border-bottom:2.5px solid var(--accent);
    border-right:2.5px solid var(--accent);
  }
  .ruler{
    height:14px;
    background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 24px);
    background-position:left center;
    border-bottom:1px solid var(--line);
    margin-bottom:28px;
  }

  /* ---------- Nav ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid var(--line);
  }
  header.site::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .nav{
    max-width:var(--maxw); margin-inline:auto; padding-inline:24px;
    display:flex; align-items:center; justify-content:space-between;
    height:68px;
  }
  .brand{
    display:flex; align-items:center; gap:.6em;
    font-family:"Oswald"; font-weight:700; letter-spacing:.02em;
    text-transform:uppercase; font-size:1.05rem; text-decoration:none;
  }
  .brand .mark{
    width:30px; height:30px; flex:none;
    background:var(--accent); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center;
    font-family:"IBM Plex Mono"; font-weight:700; font-size:1.05rem;
    clip-path: polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
  }
  .brand .full{ display:inline; }
  .brand .sub{ display:block; font-family:"IBM Plex Mono"; font-size:.62rem; letter-spacing:.12em; color:var(--ink-muted); text-transform:none; margin-top:1px;}
  nav.links{ display:flex; gap:28px; align-items:center; }
  nav.links a{
    text-decoration:none; font-size:.86rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted);
    padding-block:6px; border-bottom:2px solid transparent;
  }
  nav.links a:hover{ color:var(--ink); border-color:var(--accent); }
  .btn{
    display:inline-flex; align-items:center; gap:.5em;
    background:var(--accent); color:var(--accent-ink);
    font-family:"IBM Plex Mono"; font-weight:600; font-size:.82rem;
    letter-spacing:.04em; text-transform:uppercase;
    padding:.85em 1.3em; text-decoration:none;
    clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
    white-space:nowrap;
  }
  .btn.ghost{
    background:transparent; color:var(--ink); border:1.5px solid var(--line);
  }
  .btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }

  #nav-toggle{ display:none; }
  .burger{ display:none; }

  @media (max-width:1100px){
    nav.links{
      position:fixed; inset:68px 0 0 0; background:var(--bg);
      flex-direction:column; align-items:flex-start; gap:0;
      padding:20px 24px; transform:translateX(100%);
      transition:transform .25s ease; overflow-y:auto;
    }
    nav.links a{ padding-block:16px; width:100%; border-bottom:1px solid var(--line); }
    nav.links .btn{ margin-top:16px; }
    #nav-toggle:checked ~ nav.links{ transform:translateX(0); }
    .burger{
      display:flex; flex-direction:column; gap:5px; justify-content:center;
      width:34px; height:34px; cursor:pointer; background:none; border:none;
    }
    .burger span{ height:2px; background:var(--ink); display:block; }
  }

  /* ---------- Hero ---------- */
  .hero{ position:relative; overflow:hidden; background:var(--steel); }
  .hero-media{
    position:absolute; inset:0;
  }
  .hero-media img{ width:100%; height:100%; object-fit:cover; }
  .hero-media::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(15,22,29,.72) 0%, rgba(15,22,29,.55) 45%, rgba(15,22,29,.88) 100%);
  }
  .hero-inner{
    position:relative; z-index:2; color:#F4F6F8;
    padding-block:120px 88px;
    max-width:var(--maxw); margin-inline:auto; padding-inline:24px;
  }
  @media (max-width:640px){ .hero-inner{ padding-block:92px 56px; } }
  .hero-inner .eyebrow{ color:#FFC9A3; }
  .hero-inner .eyebrow::before{ background:#FFC9A3; }
  .hero h1{
    font-size:clamp(2.4rem, 6vw, 4.4rem);
    color:#fff;
    max-width:14ch;
  }
  .hero p.lead{
    margin-top:22px; max-width:52ch; font-size:1.08rem;
    color:#D9E0E6;
  }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
  .hero-stats{
    margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.25);
    padding-top:22px; gap:20px;
  }
  @media (max-width:760px){ .hero-stats{ grid-template-columns:repeat(2,1fr); } }
  .hero-stats .num{ font-family:"Oswald"; font-size:2rem; color:#fff; }
  .hero-stats .lbl{ font-family:"IBM Plex Mono"; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#B9C3CB; margin-top:4px;}

  /* ---------- About / title block ---------- */
  .about-grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start;
  }
  @media (max-width:880px){ .about-grid{ grid-template-columns:1fr; } }
  .about-copy h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); max-width:16ch; }
  .about-copy p{ color:var(--ink-muted); margin-top:18px; max-width:58ch; }
  .about-media{ position:relative; }
  .about-media img{ width:100%; }
  .about-media .tag{
    position:absolute; left:14px; bottom:14px;
    background:var(--accent); color:var(--accent-ink);
    font-family:"IBM Plex Mono"; font-size:.7rem; letter-spacing:.06em;
    padding:.4em .7em; text-transform:uppercase;
  }

  .titleblock{
    margin-top:34px; background:var(--surface);
  }
  .titleblock .tb-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px; border-bottom:1.5px solid var(--ink);
    font-family:"IBM Plex Mono"; font-size:.72rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-muted);
  }
  .tb-rows{ display:grid; grid-template-columns:1fr 1fr; }
  .tb-cell{
    padding:14px 16px; border-bottom:1px solid var(--line);
    border-right:1px solid var(--line);
  }
  .tb-cell:nth-child(2n){ border-right:none; }
  .tb-cell .k{ font-family:"IBM Plex Mono"; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
  .tb-cell .v{ margin-top:4px; font-weight:600; font-size:.95rem; }

  /* ---------- VMV ---------- */
  .vmv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:760px){ .vmv-grid{ grid-template-columns:1fr; } }
  .vmv-card{ background:var(--surface); padding:32px 28px; }
  .vmv-card .idx{ font-family:"IBM Plex Mono"; color:var(--accent); font-size:.78rem; letter-spacing:.1em; }
  .vmv-card h3{ margin-top:14px; font-size:1.15rem; }
  .vmv-card p, .vmv-card ul{ color:var(--ink-muted); margin-top:12px; font-size:.94rem; }
  .vmv-card ul{ padding-left:1.1em; margin-bottom:0; }
  .vmv-card li{ margin-bottom:6px; }
  .vmv-card blockquote{ margin:10px 0 0; padding-left:12px; border-left:2px solid var(--accent); font-style:italic; color:var(--ink); }

  .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:760px){ .testi-grid{ grid-template-columns:1fr; } }
  .testi-card{ background:var(--surface); padding:32px 28px; }
  .testi-card .quote-mark{ font-family:"Oswald"; font-size:2.4rem; color:var(--accent); line-height:1; opacity:.55; }
  .testi-card blockquote{ margin:14px 0 0; font-style:italic; color:var(--ink); font-size:.96rem; line-height:1.6; }
  .testi-card .who{ margin-top:18px; }
  .testi-card .who .nm{ font-family:"Oswald"; font-weight:600; font-size:.92rem; text-transform:uppercase; letter-spacing:.02em; }
  .testi-card .who .rl{ font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--ink-muted); margin-top:2px; }
  .testi-card.placeholder{
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:210px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line);
  }
  .testi-card.placeholder .ph-txt{
    font-family:"IBM Plex Mono"; font-size:.72rem; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-muted);
  }

  /* ---------- Services ---------- */
  .svc-list{ border-top:1px solid var(--line); }
  details.svc{
    border-bottom:1px solid var(--line);
  }
  details.svc summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; gap:18px;
    padding:18px 4px; -webkit-tap-highlight-color:transparent;
  }
  details.svc summary::-webkit-details-marker{ display:none; }
  details.svc summary .no{
    font-family:"IBM Plex Mono"; color:var(--accent); font-weight:600;
    font-size:.85rem; flex:none; width:2.4em;
  }
  details.svc summary .t{ flex:1; font-weight:600; font-size:1rem; }
  details.svc summary .plus{
    font-family:"IBM Plex Mono"; color:var(--ink-muted); font-size:1.1rem; flex:none;
    transition:transform .2s ease;
  }
  details.svc[open] summary .plus{ transform:rotate(45deg); color:var(--accent); }
  details.svc .body{ display:flex; align-items:flex-start; gap:18px; padding:0 4px 24px 2.4em; color:var(--ink-muted); font-size:.94rem; }
  details.svc .svc-illus{
    flex:none; width:52px; height:52px; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); background:var(--surface-2); color:var(--accent);
  }
  details.svc .svc-illus svg{ width:26px; height:26px; }
  details.svc .svc-text{ flex:1; min-width:0; max-width:66ch; }
  details.svc .body ul{ margin:0; padding-left:1.2em; }
  details.svc .body li{ margin-bottom:5px; }
  details.svc .svc-gallery-tag{
    display:block; font-family:"IBM Plex Mono"; font-size:.62rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-muted); opacity:.7; margin:16px 0 8px;
  }
  details.svc .svc-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:480px; }
  details.svc .svc-gallery .ph{ aspect-ratio:1/1; overflow:hidden; background:var(--surface-2); }
  details.svc .svc-gallery .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:520px){
    details.svc .body{ padding-left:1.1em; gap:12px; }
    details.svc .svc-illus{ width:40px; height:40px; }
    details.svc .svc-illus svg{ width:20px; height:20px; }
    details.svc .svc-gallery{ max-width:100%; gap:6px; }
  }

  /* ---------- FAQ ---------- */
  .faq-list{ border-top:1px solid var(--line); max-width:820px; }
  details.faq{ border-bottom:1px solid var(--line); }
  details.faq summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; gap:18px;
    padding:20px 4px; -webkit-tap-highlight-color:transparent;
  }
  details.faq summary::-webkit-details-marker{ display:none; }
  details.faq summary .q{ flex:1; font-weight:600; font-size:1rem; }
  details.faq summary .plus{
    font-family:"IBM Plex Mono"; color:var(--ink-muted); font-size:1.1rem; flex:none;
    transition:transform .2s ease;
  }
  details.faq[open] summary .plus{ transform:rotate(45deg); color:var(--accent); }
  details.faq .body{ padding:0 30px 22px 4px; color:var(--ink-muted); font-size:.94rem; line-height:1.65; max-width:70ch; }
  details.faq .body a{ color:var(--accent); }
  @media (max-width:520px){
    details.faq .body{ padding-right:4px; }
  }

  .maint-strip{
    margin-top:44px; background:var(--steel-soft); border:1px solid var(--line);
    padding:26px 26px;
  }
  .maint-strip h4{ font-size:1rem; letter-spacing:.04em; }
  .maint-strip .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
  .maint-strip .chip{
    background:var(--surface); border:1px solid var(--line);
    font-family:"IBM Plex Mono"; font-size:.76rem; padding:.5em .8em;
    color:var(--ink-muted);
  }

  /* ---------- Portfolio ---------- */
  .port-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--line);
    border:1px solid var(--line);
  }
  @media (max-width:920px){ .port-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:560px){ .port-grid{ grid-template-columns:repeat(2,1fr); } }
  .port-card{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--surface); }
  .port-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .port-card:hover img{ transform:scale(1.07); }
  .port-card .cap{
    position:absolute; inset:auto 0 0 0; padding:14px 14px 12px;
    background:linear-gradient(0deg, rgba(10,14,18,.86), rgba(10,14,18,0));
    color:#F2F5F7;
  }
  .port-card .cap .lbl{ font-family:"Oswald"; font-size:.92rem; letter-spacing:.02em; text-transform:uppercase;}
  .port-card .cap .ds{ font-family:"IBM Plex Mono"; font-size:.66rem; color:#CBD5DC; display:block; margin-top:2px;}
  .port-grid.cols-8{ grid-template-columns:repeat(4,1fr); }
  @media (max-width:920px){ .port-grid.cols-8{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:560px){ .port-grid.cols-8{ grid-template-columns:repeat(2,1fr); } }
  .port-card.placeholder{
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2);
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .port-card.placeholder .ph-txt{
    font-family:"IBM Plex Mono"; font-size:.72rem; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-muted); text-align:center; padding:0 12px;
  }

  /* ---------- Why us ---------- */
  .why{
    position:relative; color:#F2F5F7;
    background:var(--steel);
  }
  .why-media{ position:absolute; inset:0; }
  .why-media img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
  .why-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,14,18,.7), rgba(10,14,18,.86)); }
  .why-inner{ position:relative; z-index:2; }
  .why .eyebrow{ color:#FFC9A3; }
  .why .eyebrow::before{ background:#FFC9A3; }
  .why h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.5rem); max-width:20ch; }
  .why-grid{
    margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18);
  }
  @media (max-width:700px){ .why-grid{ grid-template-columns:1fr; } }
  .why-item{ background:rgba(18,24,30,.55); padding:22px 24px; display:flex; gap:16px; }
  .why-item .n{ font-family:"IBM Plex Mono"; color:var(--accent); font-weight:600; flex:none; }
  .why-item p{ margin:0; font-size:.94rem; color:#DCE3E8; }

  /* ---------- Contact ---------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-panel{ background:var(--surface); padding:38px; }
  .contact-panel h2{ font-size:1.7rem; max-width:14ch; }
  .contact-panel p{ color:var(--ink-muted); margin-top:14px; max-width:44ch; }
  .clist{ margin-top:28px; display:flex; flex-direction:column; gap:18px; }
  .citem{ display:flex; gap:14px; text-decoration:none; }
  .citem .ic{
    flex:none; width:38px; height:38px; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:"IBM Plex Mono"; font-size:.85rem; color:var(--accent);
  }
  .citem .k{ font-family:"IBM Plex Mono"; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
  .citem .v{ font-weight:600; margin-top:2px; }
  .contact-panel.dark{ background:var(--steel); color:#F2F5F7; }
  .contact-panel.dark p{ color:#C7D2D9; }
  .map-note{
    margin-top:28px; border:1px dashed var(--line); padding:16px;
    font-family:"IBM Plex Mono"; font-size:.78rem; color:var(--ink-muted);
  }
  .spk-note{
    margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2);
    font-family:"IBM Plex Mono"; font-size:.76rem; color:#B9C3CB;
  }

  footer.site{
    border-top:1px solid var(--line); padding-block:34px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  }
  footer.site .fbrand{ font-family:"Oswald"; text-transform:uppercase; font-weight:600; font-size:.95rem; }
  footer.site .fmeta{ font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--ink-muted); }
  footer.site .flink{
    font-family:"IBM Plex Mono"; font-size:.72rem; font-weight:600;
    letter-spacing:.03em; color:var(--accent); text-decoration:none;
    display:inline-flex; align-items:center; gap:.5em;
  }
  footer.site .flink:hover{ text-decoration:underline; }

  /* ---------- WhatsApp floating button ---------- */
  .wa-float{
    position:fixed; right:22px; bottom:70px; z-index:40;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .wa-float svg{ width:30px; height:30px; }
  .wa-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 10px 24px rgba(0,0,0,.32); }
  @media (max-width:560px){
    .wa-float{ width:52px; height:52px; right:16px; bottom:60px; }
    .wa-float svg{ width:26px; height:26px; }
  }

  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

  /* ---------- Sticky CTA bar ---------- */
  body.has-sticky-cta{ padding-bottom:64px; }
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    background:var(--steel); box-shadow:0 -4px 18px rgba(0,0,0,.2);
  }
  .sticky-cta-inner{
    max-width:var(--maxw); margin:0 auto; padding:12px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .sticky-cta .sc-text{ font-family:"Oswald"; font-size:.92rem; letter-spacing:.01em; color:#fff; }
  .sticky-cta .sc-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
  .sticky-cta .btn{ padding:9px 18px; font-size:.78rem; white-space:nowrap; }
  .sticky-cta .btn.ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
  @media (max-width:640px){
    .sticky-cta .sc-text{ display:none; }
    .sticky-cta-inner{ padding:10px 16px; justify-content:center; }
    body.has-sticky-cta{ padding-bottom:58px; }
  }

  /* ---------- Nav active state ---------- */
  nav.links a.nav-active{ color:var(--ink); border-color:var(--accent); }

  /* ---------- Article list (Artikel) ---------- */
  .article-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); margin-top:36px;
  }
  @media (max-width:820px){ .article-grid{ grid-template-columns:1fr; } }
  .article-card{
    background:var(--surface); padding:28px 24px; text-decoration:none;
    display:flex; flex-direction:column; gap:10px; transition:background .2s ease;
  }
  .article-card:hover{ background:var(--surface-2); }
  .article-card .ac-tag{ font-family:"IBM Plex Mono"; color:var(--accent); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
  .article-card h3{ font-size:1.05rem; line-height:1.4; }
  .article-card p{ color:var(--ink-muted); font-size:.88rem; margin:0; line-height:1.55; }
  .article-card .ac-more{ margin-top:auto; padding-top:6px; font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }

  /* ---------- Article body (single article page) ---------- */
  .article-meta{ font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--ink-muted); letter-spacing:.05em; text-transform:uppercase; margin-top:14px; }
  .article-body{ max-width:70ch; margin-top:8px; }
  .article-body p{ margin:0 0 16px; color:var(--ink); line-height:1.7; }
  .article-body h2{ font-size:1.35rem; margin:34px 0 12px; }
  .article-body ul, .article-body ol{ margin:0 0 18px; padding-left:1.3em; }
  .article-body li{ margin-bottom:8px; color:var(--ink); line-height:1.65; }
  .article-cta{
    margin-top:36px; background:var(--steel-soft); border:1px solid var(--line);
    padding:26px 28px; max-width:70ch;
  }
  .article-cta p{ margin:0 0 14px; color:var(--ink); }
  .article-back{
    display:inline-block; margin-top:28px; font-family:"IBM Plex Mono"; font-size:.78rem;
    color:var(--accent); text-decoration:none; letter-spacing:.03em;
  }
  .article-back:hover{ text-decoration:underline; }

  /* ---------- Home quick links ---------- */
  .quick-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); margin-top:36px;
  }
  @media (max-width:820px){ .quick-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:460px){ .quick-grid{ grid-template-columns:1fr; } }
  .quick-card{
    background:var(--surface); padding:28px 22px; text-decoration:none;
    display:flex; flex-direction:column; gap:10px; transition:background .2s ease;
  }
  .quick-card:hover{ background:var(--surface-2); }
  .quick-card .qn{ font-family:"IBM Plex Mono"; color:var(--accent); font-size:.78rem; letter-spacing:.08em; }
  .quick-card h3{ font-size:1.02rem; }
  .quick-card .qa{ margin-top:auto; font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--ink-muted); letter-spacing:.05em; text-transform:uppercase; }

  /* ---------- Page hero (non-home pages) ---------- */
  .page-hero{ background:var(--steel); color:#F4F6F8; padding-block:64px 48px; }
  .page-hero .eyebrow{ color:#FFC9A3; }
  .page-hero .eyebrow::before{ background:#FFC9A3; }
  .page-hero h1{ color:#fff; font-size:clamp(1.9rem,4.4vw,3rem); max-width:22ch; }
  .page-hero p{ margin-top:16px; max-width:60ch; color:#D9E0E6; }

  /* ---------- Experience category blocks ---------- */
  .exp-block{ padding-block:56px; border-bottom:1px solid var(--line); }
  .exp-block:last-child{ border-bottom:none; }
  .exp-block .exp-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }
  @media (max-width:880px){ .exp-block .exp-grid{ grid-template-columns:1fr; } }
  .exp-block .exp-copy h2{ font-size:clamp(1.5rem,3vw,2.1rem); max-width:20ch; }
  .exp-block .exp-copy p{ color:var(--ink-muted); margin-top:14px; max-width:58ch; }
  .exp-block .exp-media img{ width:100%; }
  .exp-num{ font-family:"IBM Plex Mono"; color:var(--accent); font-size:.78rem; letter-spacing:.1em; margin-bottom:10px; display:block; }

  /* ---------- Client page placeholder ---------- */
  .client-placeholder{
    margin-top:32px; border:1.5px dashed var(--line); padding:42px 28px;
    text-align:center; background:var(--surface);
  }
  .client-placeholder .cp-icon{ font-size:2rem; margin-bottom:12px; }
  .client-placeholder h3{ font-size:1.15rem; }
  .client-placeholder p{ color:var(--ink-muted); margin-top:10px; max-width:52ch; margin-inline:auto; }
  .sector-grid{
    margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  @media (max-width:760px){ .sector-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:460px){ .sector-grid{ grid-template-columns:1fr; } }
  .sector-card{ background:var(--surface); padding:24px 20px; }
  .sector-card .sn{ font-family:"IBM Plex Mono"; color:var(--accent); font-size:.75rem; }
  .sector-card h4{ margin-top:8px; font-size:.98rem; }

  /* ---------- Lead-capture modal (Company Profile gate) ---------- */
  .lead-modal{
    position:fixed; inset:0; z-index:200; display:none;
    align-items:center; justify-content:center; padding:20px;
  }
  .lead-modal.open{ display:flex; }
  .lead-modal-backdrop{
    position:absolute; inset:0; background:rgba(18,26,34,.55);
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  }
  .lead-modal-box{
    position:relative; background:var(--surface); width:100%; max-width:420px;
    padding:34px 28px 28px; box-shadow:0 20px 60px rgba(0,0,0,.32);
    max-height:90vh; overflow-y:auto;
  }
  .lead-modal-close{
    position:absolute; top:12px; right:14px; background:none; border:0;
    font-size:1.6rem; line-height:1; color:var(--ink-muted); cursor:pointer; padding:4px;
  }
  .lead-modal-close:hover{ color:var(--ink); }
  .lead-modal-box .eyebrow{ margin-bottom:6px; }
  .lead-modal-box h3{ margin:0 0 6px; font-family:"Oswald"; font-size:1.35rem; padding-right:20px; }
  .lead-modal-sub{ color:var(--ink-muted); font-size:.86rem; margin:0 0 22px; line-height:1.5; }
  .lead-field{ margin-bottom:14px; }
  .lead-field label{
    display:block; font-family:"IBM Plex Mono"; font-size:.7rem; text-transform:uppercase;
    letter-spacing:.05em; color:var(--ink-muted); margin-bottom:6px;
  }
  .lead-field input, .lead-field select, .lead-field textarea{
    width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--line);
    background:var(--surface-2); font-family:"IBM Plex Sans"; font-size:.92rem; color:var(--ink);
  }
  .lead-field select{ appearance:auto; }
  .lead-field textarea{ resize:vertical; min-height:96px; font-family:"IBM Plex Sans"; }
  .lead-field input:focus, .lead-field select:focus, .lead-field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  #leadForm button[type="submit"]{
    width:100%; text-align:center; margin-top:8px; border:0; cursor:pointer;
    font-family:"Oswald"; letter-spacing:.03em;
  }
  #leadForm button[type="submit"]:disabled{ opacity:.65; cursor:default; }
  .lead-modal-note{ font-size:.72rem; color:var(--ink-muted); margin:14px 0 0; line-height:1.5; }

  /* ---------- RFQ form (Contact page) ---------- */
  .rfq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; }
  @media (max-width:600px){ .rfq-grid{ grid-template-columns:1fr; } }
  #rfqForm button[type="submit"]{
    border:0; cursor:pointer; font-family:"Oswald"; letter-spacing:.03em;
    padding:13px 28px; margin-top:6px;
  }
  #rfqForm button[type="submit"]:disabled{ opacity:.65; cursor:default; }
  .rfq-success{
    display:none; margin:16px 0 0; padding:14px 16px; background:var(--accent-soft);
    color:var(--ink); font-size:.88rem; line-height:1.5; box-shadow:inset 0 0 0 1px var(--accent);
  }

  /* ---------- Promo: Konsultasi & Desain Gratis ---------- */
  #promo{ background:var(--steel); padding:56px 0; }
  .promo-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; }
  @media (max-width:860px){ .promo-grid{ grid-template-columns:1fr; } }
  .promo-badge{
    display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono";
    font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#1A0F08;
    background:var(--accent); padding:6px 12px; margin-bottom:16px;
  }
  .promo-copy h2{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.35rem); margin:0; max-width:17ch; line-height:1.2; }
  .promo-copy > p{ color:#DCE6EF; margin-top:16px; max-width:50ch; font-size:1rem; line-height:1.6; }
  .promo-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
  .promo-note{ margin-top:16px; font-size:.78rem; color:#AFC0CE; max-width:52ch; line-height:1.5; }
  .promo-cards{ display:grid; gap:14px; }
  .promo-card{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); padding:24px 22px; }
  .promo-card .idx{ font-family:"IBM Plex Mono"; color:var(--accent); font-size:.76rem; letter-spacing:.09em; }
  .promo-card h3{ color:#fff; margin:12px 0 0; font-size:1.05rem; }
  .promo-card p{ color:#C7D2D9; margin-top:10px; font-size:.88rem; line-height:1.55; }
  .rfq-success.show{ display:block; }