/* Homepage evolution: "Satu perintah. Aplikasimu langsung jalan."
   Built only from the existing tokens, type scale and part vocabulary (iso boxes, chip boards,
   dark MCP console, journey links). Nothing here introduces a new colour or typeface. */

/* ---------- Hero ---------- */
.home-page .hero.hero-command{height:auto;max-height:none;min-height:calc(100svh - 122px);padding-bottom:56px}
.hero-command .hero-copy{margin-top:8px}
.hero-command h1{line-height:1.02}
.hero-badge{display:inline-flex!important;align-items:center;gap:10px!important;width:max-content;max-width:100%;padding:4px 14px 4px 4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:12px!important;letter-spacing:.02em!important;text-transform:none;transition:border-color .2s,background .2s}
.hero-badge:hover,.hero-badge:focus-visible{border-color:var(--primary);background:var(--primary-soft)}
.hero-badge-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;background:var(--primary);color:#F9FBFD;font-weight:600;letter-spacing:.04em}
.hero-badge>[data-arrow]{color:var(--primary-text);transition:transform .2s}
.hero-badge:hover>[data-arrow]{transform:translateX(3px)}
.hero-command .hero-copy>p:not(.hero-install-note){max-width:430px}
.hero-install{max-width:min(540px,100%);margin-top:28px;background:var(--surface)}
.hero-install pre{margin:0;padding:14px 16px;overflow-x:auto;font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:pre}
.hero-install code::before{content:"$ ";color:var(--primary-text);font-weight:600}
.hero-install .agent-copy-status{font-size:12px;line-height:18px;padding:0 16px;color:var(--primary-text)}
.hero-install .agent-copy-status:empty{display:none}
.hero-command .hero-copy>p.hero-install-note{max-width:540px}
.hero-install-note{margin-top:12px!important;font-size:12px!important;line-height:1.7!important;color:var(--muted)}
.hero-install-note code,.shipped-info code{font:600 .95em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--primary-text);background:var(--primary-soft);padding:1px 5px}

/* Hero scene: extra labels for the app window and the domain plate. */
.hero-command .infrastructure-scene>.scene-label{z-index:4;white-space:nowrap}
.hero-command .infrastructure-scene>.label-network{left:6%;top:21%;right:auto;bottom:auto}
.hero-command .infrastructure-scene>.label-app{left:24%;top:4%;right:auto}
.hero-command .infrastructure-scene>.label-compute{left:60%;top:16%;right:auto}
.hero-command .infrastructure-scene>.label-storage{right:2%;left:auto;top:63%}
.hero-command .infrastructure-scene>.label-domain{left:13%;top:70%;right:auto;bottom:auto}
.hero-ui-dot{fill:#91DDB9}
.hero-ui-field{fill:none;stroke:#6F9C86;stroke-width:.6}
.hero-ui-block{fill:#285440;stroke:#43775E;stroke-width:.5}
.hero-ui-block.is-hero{fill:#118D62;stroke:#7DE1BB}
.hero-terminal .nf-ui-bar.is-prompt{fill:#E6F5EE}
.hero-terminal .nf-ui-bar.is-reply{fill:#29AE87}
.hero-terminal .nf-ui-bar{transform-box:fill-box;transform-origin:left center;animation:hero-type 6s cubic-bezier(.22,1,.36,1) infinite}
.hero-terminal .nf-ui-bar:nth-child(2){animation-delay:.15s}
.hero-terminal .nf-ui-bar.is-reply{animation-delay:.9s}
.hero-terminal .nf-ui-bar.is-reply+.is-reply{animation-delay:1.1s}
.hero-terminal .nf-ui-caret{fill:#6ED8AD;animation:led-blink 1.2s steps(2) infinite}
.hero-app .hero-ui-block{animation:hero-build 6s ease-out infinite;animation-delay:1.6s}
.hero-app .hero-ui-block.is-hero{animation-delay:1.4s}
.hero-chip-mark,.hero-domain-mark{font:600 15px var(--font);fill:#F9FBFD;letter-spacing:.02em}
.hero-domain-mark{font-size:22px}
.hero-lock{fill:none;stroke:#F9FBFD;stroke-width:2;stroke-linecap:round}
@keyframes hero-type{0%,8%{transform:scaleX(0)}22%,82%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes hero-build{0%,18%{opacity:.25}30%,84%{opacity:1}100%{opacity:.25}}

/* ---------- Trust row (replaces the metrics strip under the logos) ---------- */
.trust-row .metric-context{display:flex;flex-direction:column;justify-content:center;gap:12px}
.trust-avatars{display:flex}
.trust-avatars>span{display:grid;place-items:center;width:32px;height:32px;margin-left:-6px;border:2px solid var(--paper);border-radius:50%;background:var(--primary-soft);color:var(--primary-text);font:600 10px var(--font);letter-spacing:.02em}
.trust-avatars>span:first-child{margin-left:0}
.trust-avatars>span:nth-child(2){background:#B9DCCB;color:#08744E}
.trust-avatars>span:nth-child(3){background:#118D62;color:#F9FBFD}
.trust-avatars>span:last-child{background:var(--ink);color:var(--paper)}
.trust-row .metric{display:flex;flex-direction:column;gap:6px}
.trust-row .metric-text strong{font-size:28px;line-height:1.15;letter-spacing:-.03em}
.trust-stars{display:block;font-size:12px;line-height:18px;color:var(--muted)}
.trust-stars>span{color:var(--primary);letter-spacing:.08em}

/* ---------- Demo: Dipakai manusia / Dipakai agen AI ---------- */
.demo-console .neo-ai-tabs>button{display:inline-flex;align-items:center;gap:8px}
.demo-console .neo-ai-tabs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.demo-chip{border:1px solid var(--line);padding:2px 8px}
.demo-log{min-height:340px;align-content:start}
.demo-log>li{animation:content-in .4s both}
.demo-log .demo-alert>p{border-left-color:#E8B24A;color:#F3D9A4}
.demo-call.is-pending{display:none}
.demo-call.is-running strong{color:var(--muted)}
.demo-call.is-warn>i{color:#E8B24A}
.demo-call-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;align-items:baseline}
.demo-call-head strong{font:600 15px/24px var(--font)!important;letter-spacing:-.01em}
.demo-call-head small{margin:0!important;font-size:12px;color:var(--primary-text)!important}
.demo-call-details{margin-top:6px}
.demo-call-details>summary{width:max-content;cursor:pointer;font:12px/20px var(--font);color:var(--muted);list-style:none}
.demo-call-details>summary::-webkit-details-marker{display:none}
.demo-call-details>summary::after{content:" +";color:var(--primary-text)}
.demo-call-details[open]>summary::after{content:" −"}
.demo-call-details>summary:hover{color:var(--ink)}
.demo-call-details pre{margin:8px 0 0;padding:10px 12px;border:1px solid var(--line);background:#0B1610;font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#B9E9D2;white-space:pre-wrap;word-break:break-word}
.demo-comment{color:#6F9C86}
.demo-done>span{font-size:14px;line-height:24px;color:var(--ink)}
.demo-done.is-pending{display:none}
.demo-form{padding:20px 0 16px;border-top:1px solid var(--line)}
.demo-form>label{display:block;font-size:8px;line-height:16px;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.demo-form-row{display:flex;gap:8px}
.demo-form input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--line);background:#0B1610;color:var(--ink);font-size:14px}
.demo-form input::placeholder{color:#6F9C86}
.demo-form input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.demo-form .button{min-height:44px;font-size:12px;gap:16px;flex-shrink:0}

.demo-resources{gap:0}
.demo-resources-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.demo-resources-head .technical{display:flex;align-items:center;gap:8px;font-size:12px;line-height:20px;letter-spacing:.06em;color:var(--muted)}
.demo-region{border:1px solid var(--line);padding:2px 8px;color:var(--primary-text)!important}
.demo-empty{flex:1;display:grid;place-content:center;min-height:220px;text-align:center;font-size:14px;line-height:24px;border:1px dashed var(--line);margin-bottom:24px}
.demo-empty[hidden]{display:none}
.demo-resource-list{flex:1}
.demo-resource-list>li{grid-template-columns:40px minmax(0,1fr) auto!important;align-items:center}
.demo-resource-list>li[hidden]{display:none}
.demo-resource-list>li.is-new{animation:content-in .45s both}
.demo-resource-list h3{font-size:22px!important;line-height:30px!important;letter-spacing:-.025em!important}
.demo-resource-list p{margin-top:2px!important;font-size:14px!important;line-height:22px!important}
.demo-res-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);background:var(--primary-soft);color:var(--primary-text)}
.demo-res-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.demo-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:20px;color:var(--primary-text);border:1px solid var(--line);padding:2px 10px}
.demo-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary)}

/* ---------- Network ---------- */
.network-eyebrow{display:block;margin-bottom:20px;color:#91DDB9!important}
.map-meta{display:flex;justify-content:space-between;gap:16px;font-size:8px;line-height:16px;letter-spacing:.06em;color:#A4BFB1;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #304D3D}
.map-cloud-global rect{fill:#17241D;stroke:#43775E}
.map-cloud-global text{fill:#F9FBFD;font:600 10px var(--font);letter-spacing:.06em}
.map-cloud-global .map-cloud-caption{fill:#91DDB9;font-size:8px;letter-spacing:.1em}
.map-cloud,.map-routes{transition:opacity .4s}
.map-cloud-premise,.map-routes-premise{opacity:0}
.indonesia-map.is-premise .map-cloud-global,.indonesia-map.is-premise .map-routes-global{opacity:0}
.indonesia-map.is-premise .map-cloud-premise,.indonesia-map.is-premise .map-routes-premise{opacity:1}

/* ---------- Agent bento ---------- */
.agent-section{border-bottom:1px solid var(--line)}
.agent-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.agent-bento>*{min-width:0}
.bento-deploy{grid-column:span 2;display:flex;flex-direction:column;border:0!important}
.bento-card .product-graphic{min-height:0!important}
.bento-card .graphic-meta{font-size:8px;line-height:16px;letter-spacing:.06em}
.deploy-log{list-style:none;margin:24px 0 0;padding:0;flex:1;display:grid;align-content:start;gap:2px;font:14px/26px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink)}
.deploy-log>li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.deploy-log>li:first-child{border-top:0}
.deploy-log code{font:inherit}
.deploy-log strong{font-weight:600;color:var(--primary-text)}
.deploy-log-mark{color:var(--primary-text);text-align:center}
.deploy-log .is-command{color:#F9FBFD}
.deploy-log .is-command .deploy-log-mark{color:var(--muted)}
.deploy-log .is-live a{color:var(--primary-text);text-decoration:underline;text-underline-offset:4px}
.deploy-log .is-live>span:last-child{display:flex;align-items:center;gap:10px}
.deploy-log .activity-dot{width:6px;height:6px;background:var(--primary-text)}
.bento-deploy .mcp-console-foot{margin-top:16px}
.js-motion .bento-deploy.is-armed .deploy-log>li{opacity:0}
.js-motion .bento-deploy.is-playing .deploy-log>li{opacity:1;animation:content-in .45s both;animation-delay:calc(var(--step) * .42s + .1s)}
.fw-glyph{font:600 18px var(--font);fill:#F9FBFD;letter-spacing:-.02em}
.scale-spark{stroke:#7DE1BB;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.scale-state{fill:var(--primary-text)!important}
.scale-state.is-idle{fill:var(--muted)!important}
.domain-row>rect:first-child{fill:var(--surface);stroke:#6F9C86;stroke-width:.8}
.domain-row.is-free .domain-pill{fill:#118D62}
.domain-row.is-free .domain-pill-text{fill:#F9FBFD!important}
.domain-row.is-taken .domain-pill{fill:none;stroke:#6F9C86;stroke-width:.8}
.domain-row.is-taken .domain-pill-text,.domain-row.is-taken>text:first-of-type{fill:var(--muted)!important}
.domain-lock{stroke:#91DDB9}
.db-cap{fill:#285440}
.db-band{stroke:#43775E;stroke-width:1}
.db-table-frame{fill:var(--surface);stroke:#6F9C86;stroke-width:.8}
.db-rule{stroke:var(--line);stroke-width:1}
.db-head{fill:var(--muted)!important}
.db-num{fill:var(--primary-text)!important}
.db-track{fill:none;stroke:#6F9C86;stroke-width:.8}
.db-fill{fill:var(--primary)}
.bento-prompt{grid-column:1/-1;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:20px;align-items:center;padding:24px 28px;background:var(--surface);transition:background .2s}
.bento-prompt:hover{background:var(--primary-soft)}
.bento-prompt-icon{display:grid;place-items:center;width:48px;height:48px;background:var(--primary);color:#F9FBFD}
.bento-prompt-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bento-prompt-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.bento-prompt-text .technical{font-size:8px;line-height:16px;letter-spacing:.08em;color:var(--muted)}
.bento-prompt-text strong{font-size:22px;line-height:30px;letter-spacing:-.02em;font-weight:600}
.bento-caret{display:inline-block;width:2px;height:22px;margin-left:4px;vertical-align:-4px;background:var(--primary);animation:led-blink 1.2s steps(2) infinite}
.bento-prompt>.button{font-size:12px;gap:24px;white-space:nowrap}

/* ---------- Fondasi (status) ---------- */

.status-scene .stack-annotations text{font-size:11px}
.status-ring{animation:led-blink 3s steps(2) infinite}
.status-panel{display:flex;flex-direction:column;min-width:0}
.status-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px}
.status-head>.technical{font-size:12px;line-height:20px;letter-spacing:.06em;color:var(--muted)}
.status-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:20px;font-weight:600;color:var(--primary-text);border:1px solid var(--line);background:var(--primary-soft);padding:2px 10px}
.status-badge .activity-dot{width:6px;height:6px;background:var(--primary)}
.fondasi-section .stack-name{font-family:var(--font)}
.status-foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.status-foot>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0}
.status-foot>div+div{border-left:1px solid var(--line);padding-left:20px}
.status-foot>div:first-child{padding-right:20px}
.status-foot .technical{font-size:12px;line-height:20px;letter-spacing:.06em;color:var(--muted)}
.status-foot strong{font-size:24px;line-height:32px;letter-spacing:-.03em}
.status-scene .stack-part{transition:transform .5s cubic-bezier(.22,1,.36,1)}
[data-stack-active=web] [data-stack-part=web],[data-stack-active=db] [data-stack-part=db],[data-stack-active=app] [data-stack-part=app]{transform:translateY(-10px)}
[data-stack-active=web] [data-stack-part=web] .box-top,[data-stack-active=db] [data-stack-part=db] .box-top,[data-stack-active=app] [data-stack-part=app] .box-top{stroke:#7DE1BB}
[data-stack-active=web] [data-stack-label=web],[data-stack-active=db] [data-stack-label=db],[data-stack-active=app] [data-stack-label=app]{opacity:1}
.fondasi-metrics{margin-top:64px}
@media(prefers-reduced-motion:reduce){.status-scene .stack-part{transition:none}.status-ring{animation:none}}

/* ---------- Products: seven categories ---------- */
.product-tabs.product-tabs-7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.product-tabs-7 button{white-space:nowrap;min-width:0}
.product-board [data-scene=domain],.product-board [data-scene=license]{display:none}
.product-stage[data-product=domain] .product-board [data-scene=domain],
.product-stage[data-product=license] .product-board [data-scene=license]{display:inline}
.domain-ext{font-size:26px}
.license-seal{fill:#118D62;stroke:#7DE1BB;stroke-width:1}
.license-check{fill:none;stroke:#F9FBFD;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.product-use{margin-top:16px;font-size:14px;line-height:22px;color:var(--ink)}
.product-use>.technical{display:block;font-size:8px;line-height:16px;letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
.product-list{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.product-list li{border-bottom:1px solid var(--line)}
.product-list a{display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:12px;align-items:center;min-height:64px;padding:10px 12px;margin:0 -12px;transition:background .2s}
.product-list a:hover,.product-list a:focus-visible{background:var(--primary-soft)}
.product-list strong{display:block;font-size:16px;line-height:24px;font-weight:600}
.product-list small{display:block;font-size:14px;line-height:20px;color:var(--muted)}
.product-list i{font-style:normal;color:var(--primary-text);transition:transform .2s}
.product-list a:hover i{transform:translate(2px,-2px)}
.product-stage.switching .product-list li{animation:content-in .45s both}
.product-stage.switching .product-list li:nth-child(2){animation-delay:.05s}
.product-stage.switching .product-list li:nth-child(3){animation-delay:.1s}
.product-stage.switching .product-list li:nth-child(4){animation-delay:.15s}
.products .product-info .product-footer{margin-top:auto;padding-top:24px}

/* ---------- Domain ---------- */
.domain-hints{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.domain-hints li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:22px;color:var(--muted)}
.domain-hints strong{color:var(--primary-text);font-weight:600}
.domain-extension-options.domain-extension-options-7{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- Footer: four groups ---------- */
.site-footer .footer-links-platform.footer-links-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- Dark theme ---------- */
[data-theme=dark] .trust-avatars>span{border-color:var(--paper)}
[data-theme=dark] .trust-avatars>span:nth-child(2){background:#285440;color:#B9E9D2}
[data-theme=dark] .db-table-frame,[data-theme=dark] .domain-row>rect:first-child{fill:#17241D}

/* ---------- Responsive ---------- */
@media(max-width:1200px){
  .product-tabs.product-tabs-7{display:flex;overflow-x:auto;scrollbar-width:none}
  .product-tabs-7::-webkit-scrollbar{display:none}
  .product-tabs-7 button{flex:0 0 auto;padding-inline:20px}
  .domain-extension-options.domain-extension-options-7{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1100px){
  .site-footer .footer-links-platform.footer-links-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .agent-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-deploy{grid-column:1/-1}
  .bento-prompt{grid-template-columns:48px minmax(0,1fr)}
  .bento-prompt>.button{grid-column:1/-1;justify-self:start}
}
@media(max-width:700px){
  .hero-badge{font-size:11px!important}
  .hero-install pre{font-size:11px;padding:12px}
  .hero-command .label-app,.hero-command .label-domain{display:none}
  .trust-row .metric-text strong{font-size:22px}
  .demo-log{min-height:300px}
  .demo-form-row{flex-direction:column}
  .demo-form .button{justify-content:space-between}
  .demo-resource-list h3{font-size:16px!important;line-height:24px!important}
  .agent-bento{grid-template-columns:minmax(0,1fr)}
  .deploy-log{font-size:12px;line-height:22px}
  .bento-prompt{padding:20px}
  .bento-prompt-text strong{font-size:18px;line-height:26px}
  .status-foot{grid-template-columns:1fr}
  .status-foot>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .fondasi-metrics{margin-top:40px}
  .domain-extension-options.domain-extension-options-7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer .footer-links-platform.footer-links-4{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .hero-terminal .nf-ui-bar,.hero-app .hero-ui-block,.bento-caret,.demo-log>li,.demo-resource-list>li.is-new{animation:none}
}
@media(min-width:961px){.products .product-stage{min-height:688px}}
/* The install command is a single long line: keep it from widening the hero grid track. */
.hero-command{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.hero-command .hero-copy,.hero-command .hero-visual{min-width:0}
.hero-install{max-width:min(540px,100%)}
@media(max-width:960px){.hero-command{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:700px){.hero-command{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
  .hero-command .infrastructure-scene>.label-compute{left:56%;top:12%}
  .hero-command .infrastructure-scene>.label-compute>span:last-child,.hero-command .infrastructure-scene>.label-storage>span:last-child{display:none}
  .hero-command .infrastructure-scene>.label-network{left:4%;top:18%}
}
.trust-row .metric{align-self:stretch;justify-content:flex-start}