/* MCP-first information architecture — layout layer only.
   Every colour, type size, radius, border and shadow below is an existing
   Biznet Gio token or a value already used by an existing component.
   No new visual language is introduced here. */

/* ---------- Header: three disclosure menus + two actions ---------- */
.header-actions .btn-outline{background:transparent}
@media(max-width:1200px){.header-actions .btn-outline{display:none}}
.nav .mobile-portal+.mobile-portal{margin-top:0}

/* Wider ecosystem menus reuse .mega-menu, .mega-category, .mega-feature. */
.mega-menu--wide .mega-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin-bottom:24px}
.mega-menu--wide .mega-group{min-width:0}
.mega-menu--wide .mega-group .mega-categories{grid-template-columns:1fr;margin-bottom:0}
.mega-menu .mega-category--described{align-items:start;min-height:0;padding-block:12px}
.mega-menu .mega-category--described svg{margin-top:2px}
.mega-menu .mega-category--described .arrow{margin-top:2px}
.mega-menu .mega-category__copy{display:flex!important;flex-direction:column;gap:2px;min-width:0}
.mega-menu .mega-category__copy small{display:block;font-size:14px;line-height:20px;letter-spacing:0;color:var(--text);font-weight:400}
.mega-menu .mega-category:hover .mega-category__copy small{color:var(--text)}
@media(max-width:900px){.mega-menu--wide .mega-groups{grid-template-columns:1fr;row-gap:16px}}

/* ---------- Footer: six columns for the expanded sitemap ---------- */
.footer-grid.footer-grid--sitemap{grid-template-columns:1.6fr repeat(5,minmax(0,1fr))}
@media(max-width:1200px){.footer-grid.footer-grid--sitemap{grid-template-columns:1.6fr repeat(3,minmax(0,1fr));row-gap:40px}}
@media(max-width:900px){.footer-grid.footer-grid--sitemap{grid-template-columns:1fr 1fr 1fr}.footer-grid--sitemap>div:first-child{grid-column:1/-1}}
@media(max-width:600px){.footer-grid.footer-grid--sitemap{grid-template-columns:minmax(0,1fr)}}

/* ---------- CTA with two actions (same .btn components) ---------- */
.cta-v4 .cta-v4__actions{grid-column:1;grid-row:2;align-self:start;display:flex;flex-wrap:wrap;gap:12px;margin:0}
@media(max-width:900px){.cta-v4 .cta-v4__actions{grid-row:2}}

/* ---------- Pillar sections ---------- */
@media(max-width:600px){.product-list--four .product-item{min-height:0}}

/* Section intro variant used when the intro carries an action link. */
.section-intro .section-intro__link{grid-column:2;justify-self:end;align-self:end;margin-top:12px}
@media(max-width:900px){.section-intro .section-intro__link{justify-self:start}}

/* ---------- Product-item details: access line + link row ---------- */
.product-list--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-list--four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.product-list--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.product-list--three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.product-list--three,.product-list--four{grid-template-columns:1fr}}
.feature-group+.feature-group{margin-top:56px}
.feature-group>.eyebrow{display:block;margin-bottom:16px}

/* ---------- Code / terminal content inside the existing .interface ---------- */
.terminal--code{min-height:0;overflow-x:auto;padding:20px 24px}
.terminal--code .terminal-line{display:block;white-space:pre;min-height:16px}
.terminal--code .terminal-line--dim{opacity:.62}
.terminal--code .terminal-line--strong{color:#f2faf5;font-weight:600}
.interface--code{background:var(--surface)}
.interface--code .interface-head{justify-content:space-between}
.interface--code .interface-head>span:first-child{display:flex;align-items:center;gap:8px}
.interface--code .interface-body{padding:20px}
.interface--code .interface-title{margin-bottom:12px}
.interface--code .terminal{margin-top:0}
.workflow-visual--flat{transform:none}
html[data-theme=dark] .interface{background:var(--surface)}

/* Inline tool names inside existing tables and copy. */
.price-table-scroll code,.product-item code,.step code,.service-row code{font:600 14px/20px "Geist",sans-serif;letter-spacing:0;color:var(--p)}
.price-table-scroll--tools td:first-child{white-space:nowrap}
.price-table-scroll--tools td:nth-child(3){min-width:280px}

/* In-page anchors clear the sticky header + .category-nav (existing component). */
main [id]{scroll-margin-top:170px}

/* Group intros inside long pages (Managed Services, Harga). */
.group-intro{padding-top:96px}
.service-group:first-child .group-intro{padding-top:0}
.group-intro .section-intro{margin-bottom:8px}
@media(max-width:600px){.group-intro{padding-top:56px}}

/* Pricing models row on Harga. */
.pricing-content .price-section--intro{padding-top:56px}

/* Small screens: keep long code lines inside their panel. */
@media(max-width:600px){.terminal--code{padding:16px}.interface--code .interface-body{padding:12px}}

/* The CTA's primary action keeps the original .cta-v4>.btn treatment when grouped with a second action. */
.cta-v4 .cta-v4__actions .btn-primary{background:var(--action-green);border-color:var(--brand-green);color:#ffffff}
.cta-v4 .cta-v4__actions .btn-primary:hover{background:var(--action-hover);border-color:var(--green-bright);color:#ffffff}

/* Catalog layers carry a one-line description under the title. */
.product-category .section-intro p{margin:12px 0 0;max-width:560px}
.interface--code .interface-head>span:first-child{white-space:nowrap;color:var(--muted)}
.interface--code .interface-head svg{width:16px;height:16px;flex-shrink:0;color:var(--p)}

/* Dark mode only: code panels use the primary-100 surface. */
html[data-theme=dark] .interface--code .terminal{background:var(--color-primary-100)}

/* Testimonial tabs without their number keep the original label colour. */
.testimonial-tab>span:only-child{color:inherit;font-variant-numeric:normal}

/* Compact CTA: same component, tighter box and a smaller 3D scene. */
.cta.cta-v4{min-height:0;align-items:center}
.cta-v4 .cta3d-stage{height:230px}
.cta-v4 .ecos3d-world{--scene-scale:.64}
.cta-v4 .cta-v4__copy p{margin-bottom:0}
@media(min-width:901px){.cta.cta-v4{padding:44px 56px;row-gap:24px}}
@media(max-width:1200px){.cta-v4 .ecos3d-world{--scene-scale:.56}}
@media(max-width:900px){.cta-v4 .cta3d-stage{height:200px}.cta-v4 .ecos3d-world{--scene-scale:.6}}
@media(max-width:600px){.cta-v4 .cta3d-stage{height:170px}.cta-v4 .ecos3d-world{--scene-scale:.48}}

/* Compact domain card: same component, tighter box and a smaller 3D visual. */
.domain-card{padding:36px 48px}
.domain-card__header{grid-template-columns:minmax(0,1fr) 180px;gap:32px;margin-bottom:24px}
.domain-visual{height:140px;scale:.68}
@media(max-width:1100px){.domain-card{padding:32px 40px}.domain-card__header{grid-template-columns:minmax(0,1fr) 160px}.domain-visual{height:130px;scale:.6}}
@media(max-width:900px){.domain-card{padding:28px 32px}.domain-card__header{margin-bottom:20px}}
@media(max-width:600px){.domain-card{padding:24px 20px}.domain-card__header{margin-bottom:16px}}

/* Service-row visuals sit on the page background. */
.service-row .motion-art{background:var(--bg)}

/* NEO Lite Pro features: each group is a row — title on the left, features as a spec list on the right. */
.feature-group--rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:56px;padding-block:40px;border-top:1px solid var(--line)}
.feature-group--rows+.feature-group--rows{margin-top:0}
.feature-group--rows:last-child{border-bottom:1px solid var(--line)}
.feature-group__head{position:sticky;top:180px;align-self:start}
.feature-group__head h3{margin:0 0 8px;font-size:24px;line-height:32px;letter-spacing:-.01em;color:var(--ink)}
.feature-group__head p{margin:0;max-width:300px;font-size:16px;line-height:24px;letter-spacing:0;color:var(--text)}
.feature-group__list.product-list{grid-template-columns:1fr}
.feature-group__list .product-item{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1.5fr);column-gap:24px;align-items:start;min-height:0;padding:24px 0}
.feature-group__list .product-item:first-child{border-top:0;padding-top:0}
.feature-group__list .product-item:last-child{padding-bottom:0}
.feature-group__list .product-icon{grid-column:1;grid-row:1/span 2;margin:0}
.feature-group__list .product-item h3{grid-column:2;grid-row:1/span 2;margin:0}
.feature-group__list .product-item p{grid-column:3;margin:0}
.feature-group__list .product-item a{grid-column:3;justify-self:start;margin-top:12px}
@media(max-width:900px){
 .feature-group--rows{grid-template-columns:1fr;gap:24px;padding-block:32px}
 .feature-group__head{position:static}
 .feature-group__list .product-item{grid-template-columns:32px minmax(0,1fr);column-gap:16px}
 .feature-group__list .product-item h3{grid-column:2;grid-row:1;margin-bottom:8px}
 .feature-group__list .product-item p,.feature-group__list .product-item a{grid-column:2}
 .feature-group__list .product-icon{grid-row:1}
}

/* Domain card now sits directly above the tinted testimonial band: give it matching breathing room. */
.domain-discovery{padding-bottom:56px}
@media(max-width:600px){.domain-discovery{padding-bottom:32px}}

/* ---------- Home hero: action-first CTAs (Deploy / Ship with Agents) ----------
   Buttons keep their .btn styles; only arrangement, state feedback and the
   inline agent-setup disclosure are added. Timing and easing follow --ease. */
.hero-actions .btn{transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.hero-actions .btn:active{transform:translateY(1px)}
.hero-actions__deploy span{display:inline-block;transition:transform .25s var(--ease)}
.hero-actions__deploy:hover span,.hero-actions__deploy:focus-visible span{transform:translateX(3px)}
.hero-actions__agents[aria-expanded=true]{background:var(--mint);border-color:var(--p);color:var(--p)}
.hero-actions__signin{margin:16px 0 0;font-size:14px;line-height:20px;letter-spacing:0;color:var(--text)}
.hero-actions__signin a{color:var(--p);font-weight:600;border-bottom:1px solid var(--line);transition:border-color .2s}
.hero-actions__signin a:hover,.hero-actions__signin a:focus-visible{border-color:var(--p)}

.hero-agent{display:grid;grid-template-rows:1fr;margin-top:20px;max-width:560px;transition:grid-template-rows .35s var(--ease),opacity .25s ease,margin-top .35s var(--ease)}
.hero-agent[data-open=false]{grid-template-rows:0fr;opacity:0;margin-top:0}
.hero-agent__inner{min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .25s}
.hero-agent[data-open=false] .hero-agent__inner{border-color:transparent;border-width:0}
.hero-agent__row{display:flex;align-items:center;gap:16px;padding:14px 16px}
.hero-agent__row+.hero-agent__row{border-top:1px solid var(--line)}
.hero-agent__text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.hero-agent__label{font-size:12px;line-height:16px;letter-spacing:.04em;color:var(--muted)}
.hero-agent__code{font:600 14px/20px "Geist",sans-serif;letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
.hero-agent__copy{flex-shrink:0;min-width:72px}
.hero-agent__copy[data-copied=true]{background:var(--mint);border-color:var(--p)}
.hero-agent__note{margin:0;padding:12px 16px;border-top:1px solid var(--line);background:var(--soft);font-size:12px;line-height:16px;letter-spacing:0;color:var(--text)}
.hero-agent__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-copy .hero-agent+.trustline{margin-top:24px}
@media(max-width:600px){.hero-agent{max-width:none}.hero-agent__row{align-items:flex-start;padding:12px}.hero-agent__note{padding:12px}}
@media(prefers-reduced-motion:reduce){.hero-agent,.hero-agent__inner,.hero-actions .btn,.hero-actions__deploy span{transition:none!important}.hero-actions .btn:active{transform:none}}

/* =====================================================================
   Layout rhythm system (spacing & alignment pass)
   One 8-pt scale, four tiers, four breakpoints. Values reuse the site's
   existing steps (112 / 64 / 56 / 32) and only fill the gaps between them.
     --space-section   major content sections
     --space-feature   the dark "foundation" feature band (deliberately larger)
     --space-band      compact bands: testimonials, domain search, catalog rows, price groups
     --space-intro     heading block → its content
     --space-intro-sm  compact heading → content (catalog, price tables, testimonials)
   The duplicated class selectors (.section.section) only raise specificity
   above the legacy breakpoint layers (style / responsive / mobile-spacing).
   ===================================================================== */
:root{--space-section:112px;--space-feature:128px;--space-band:64px;--space-intro:56px;--space-intro-sm:40px;--hero-breathing:56px}
@media(max-width:1200px){:root{--space-section:96px;--space-feature:112px;--space-intro:48px}}
@media(max-width:900px){:root{--space-section:72px;--space-feature:80px;--space-band:56px;--space-intro:40px;--space-intro-sm:32px;--hero-breathing:40px}}
@media(max-width:600px){:root{--space-section:56px;--space-feature:64px;--space-band:40px;--space-intro:32px;--space-intro-sm:24px;--hero-breathing:0px}}

/* 1. Section tiers */
body main > .section.section{padding-block:var(--space-section)}
body main > .section.foundation-section{padding-block:var(--space-feature)}
body main > .section.home-testimonials{padding-block:var(--space-band)}
body main > .domain-discovery.domain-discovery{padding-block:var(--space-section)}
/* A section that follows the category nav keeps its full top spacing (mobile used to drop it to 0). */
body main > .category-nav + .section.section{padding-block:var(--space-section)}

/* 2. Two consecutive sections on the same page background must not stack their
      padding (112 + 112). The second one starts at the shared edge. */
body main > .section.section:not(.section-tint):not(.foundation-section):not(.home-testimonials) + .section.section:not(.section-tint):not(.foundation-section):not(.home-testimonials){padding-top:0}

/* 3. Heading → content */
body .section-intro{margin-bottom:var(--space-intro)}
body .product-category .section-intro{margin-bottom:var(--space-intro-sm)}
body .home-testimonials__heading{margin-bottom:var(--space-intro-sm)}
body .group-intro{padding-top:var(--space-section)}
body .service-group:first-child .group-intro{padding-top:0}
body .group-intro .section-intro{margin-bottom:0}

/* 4. Platform catalog: alternating rows share one band rhythm; the catalog's last
      (tinted) row meets the CTA with a full section gap. */
body main > .section.section--catalog{padding-bottom:0}
body main > .section.section--catalog + .section.section{padding-top:var(--space-section)}
body .product-category.product-category{margin:0;padding-block:var(--space-band)}
body .product-category.product-category:first-child{padding-top:0}

/* 5. Price & promo listings: same page rhythm as content sections, one band between groups. */
body .pricing-content.pricing-content{padding-block:var(--space-section)}
body .pricing-content > .price-section.price-section{margin:0 0 var(--space-band);padding:0}
body .pricing-content .price-heading.price-heading{padding-block:0;margin-bottom:var(--space-intro-sm)}
body .pricing-content > .price-end{margin-top:0}
body .pricing-content > .price-section--intro{padding-top:0}

/* 6. Hero: guaranteed breathing room under the header when the copy is tall
      (centred heroes keep their position; only overflowing copy is pushed down). */
@media(min-width:601px){body .hero .hero-layout{padding-block:var(--hero-breathing)}}

/* 7. NEO Lite Pro feature rows end on their divider, not on extra padding. */
body .feature-group--rows:last-child{padding-bottom:0;border-bottom:0}
body main > .category-nav + .section.section--catalog{padding-bottom:0}
/* The last service row in a group closes on its content; the section padding takes over. */
body .service-row:last-child{border-bottom:0;padding-bottom:0}
/* The catalog ends on a tinted row, so the next section needs its full top spacing (overrides rule 2). */
body main > .section.section--catalog:not(.section-tint):not(.foundation-section):not(.home-testimonials) + .section.section:not(.section-tint):not(.foundation-section):not(.home-testimonials){padding-top:var(--space-section)}