/* Shared layers: navigation 30; contact 35; dialogs use the native top layer.
   Preserve brand: Geist, #FF6B2C, #242424, #FF9A6C, #FAFAF9, #FFFFFF.
   Panels/cards 16px; controls 8px; CTAs pill. */
.architecture-header.site-header{width:100%;height:76px;display:flex;gap:24px;margin:0;padding:0 max(24px,calc((100vw - 1340px)/2));background:var(--background);border-bottom:1px solid var(--line);backdrop-filter:none;position:sticky;top:0;z-index:30;isolation:isolate}
.architecture-header .brand{font-size:24px;flex:none;gap:9px}
.architecture-header .brand-lockup small{font-size:10px;letter-spacing:.04em;line-height:1.4;margin-top:3px}
.architecture-header .brand-symbol{width:38px;height:38px}
.architecture-header{--icon-filter:brightness(0) saturate(100%) invert(35%) sepia(77%) saturate(1930%) hue-rotate(354deg) brightness(82%) contrast(104%)}
.architecture-header .desktop-nav{display:flex;flex:0 1 auto;justify-content:center;align-items:center;align-self:center;min-height:48px;height:48px;margin-left:auto;gap:2px;padding:0 12px;background:#F0EFED;border:1px solid #E9E6E2;border-radius:999px}
.architecture-header .desktop-nav>.nav-dropdown,.architecture-header .desktop-nav>.nav-dropdown>summary{height:100%}
.architecture-header .desktop-nav>a,.architecture-header .desktop-nav summary{padding:10px 9px;font-size:15px;font-weight:580;line-height:1.5;white-space:nowrap;color:var(--dark);border-radius:999px;display:flex;align-items:center;gap:6px;cursor:pointer}
.architecture-header .desktop-nav>a:hover,.architecture-header .desktop-nav summary:hover,.architecture-header .nav-dropdown[open]>summary{background:var(--white);color:var(--primary-ink)}
.architecture-header .desktop-nav>a[href="/lien-he/"]{margin-left:4px;padding-inline:16px;background:var(--primary);color:var(--on-primary)}
.architecture-header .desktop-nav>a[href="/lien-he/"]:hover{background:var(--primary-strong)}
/* WEBHD-inspired pill navigation, not its brand/content. The transparent
   bridge connects the 48px pill to the floating panel below the 76px header. */
.architecture-header .desktop-nav>.nav-dropdown>summary{position:relative}
.architecture-header .desktop-nav>.nav-dropdown>summary::after{content:"";position:absolute;top:100%;left:0;width:100%;height:18px}
.architecture-header summary{list-style:none}.architecture-header summary::-webkit-details-marker{display:none}
.architecture-header summary>img{transition:transform .2s;filter:var(--icon-filter)}
.architecture-header details[open]>summary>img{transform:rotate(180deg)}
.architecture-header .nav-panel{position:absolute;top:calc(100% - 1px);right:24px;width:min(740px,calc(100vw - 48px));padding:24px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 36px #442A1E18;max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain}
.architecture-header .nav-panel a{font-size:15px;padding:10px 12px;line-height:1.7;white-space:normal;display:block;border-radius:8px;color:var(--dark)}
.architecture-header .nav-panel a:hover{background:var(--surface-brand,#FFF0E8);color:var(--primary-ink)}
.architecture-header .desktop-nav .nav-panel a{font-size:15px;padding:10px 12px;white-space:normal;display:block;border-radius:8px;line-height:1.7}
.architecture-header .desktop-nav .nav-panel a:hover{background:var(--surface-brand);color:var(--primary-ink);border-radius:8px}
.architecture-header .nav-overview{font-size:18px!important;font-weight:700;margin-bottom:12px}
.architecture-header .nav-overview>span{float:right;color:var(--primary-ink)}
.architecture-header .nav-panel-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:2px}
.architecture-header .nav-subgroup{grid-column:1/-1;border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.architecture-header .nav-subgroup>a{font-weight:700;color:var(--primary-ink)}
.architecture-header .nav-subgroup>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}
.architecture-header .menu-toggle{display:none}
.architecture-header .mobile-menu{display:none}
.architecture-header .nav-panel[hidden]{display:none}
.architecture-header :is(a,summary,button):focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.site-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:1256px;margin:0 auto;padding:24px 32px 0;font-size:12px;line-height:1.8;color:var(--muted)}
.site-breadcrumb a{color:var(--primary-ink)}
.site-breadcrumb span[aria-current]{overflow-wrap:anywhere}
.architecture-page h1{font-size:clamp(30px,3.1vw,44px);line-height:1.4;font-weight:740;letter-spacing:0;color:var(--primary-ink);overflow:visible}
.architecture-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-top:38px;padding-bottom:44px;min-height:380px}
.architecture-hero>div>p{color:var(--muted);max-width:600px;margin-top:18px;font-size:16px;line-height:1.8}
.architecture-hero figure{margin:0;min-width:0;background:var(--surface-brand);border:1px solid var(--line);border-radius:16px;padding:10px;overflow:hidden}
.architecture-hero img{display:block;width:100%;height:auto;max-height:330px;object-fit:contain;border-radius:8px}
.architecture-content{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:64px;padding-top:36px;padding-bottom:48px;border-top:1px solid var(--line)}
.architecture-prose{min-width:0;overflow-wrap:anywhere;font-size:15px;line-height:1.85}
.architecture-prose h2{font-size:25px;margin:26px 0 14px;line-height:1.5}.architecture-prose h2:first-child{margin-top:0}
.architecture-prose p{margin:14px 0;color:var(--muted)}
.architecture-prose ul,.architecture-prose ol{padding-left:22px;margin:16px 0;display:grid;gap:10px;list-style:revert}
.architecture-prose a{color:var(--primary-ink);text-decoration:underline;text-underline-offset:3px}
.architecture-prose img{max-width:100%;height:auto;border-radius:8px}.architecture-prose table{display:block;max-width:100%;overflow:auto}
.architecture-content aside{align-self:start;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.architecture-content aside h2{font-size:18px}.architecture-content aside p{font-size:13px;margin:12px 0;color:var(--muted)}
.architecture-content aside a{display:block;margin-top:14px;font-size:14px;color:var(--primary-ink);font-weight:650}
.architecture-related{padding:28px 0 44px}.architecture-related>h2{font-size:26px;margin-bottom:24px}
.architecture-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.architecture-links>a{display:block;border:1px solid var(--line);background:var(--surface);padding:24px;border-radius:16px;transition:transform .22s,border-color .22s}
.architecture-links h3{font-size:17px;line-height:1.6}.architecture-links h3 span{float:right;color:var(--primary-ink)}
.architecture-links p{font-size:13px;margin-top:10px;color:var(--muted)}
.architecture-links>a:nth-child(4n+2){background:var(--surface-brand)}
.architecture-next{padding:32px;margin-bottom:44px;border-radius:16px;background:var(--surface-brand);border:1px solid var(--line)}
.architecture-next h2{font-size:26px}.architecture-next p{margin:12px 0 20px;color:var(--muted)}
.architecture-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.architecture-tabs a{padding:10px 15px;border:1px solid var(--line);border-radius:999px;font-size:13px;line-height:1.5;background:var(--white)}
.architecture-tabs a[aria-current=page]{background:#FF6B2C;color:#FFFFFF;border-color:#FF6B2C}
.architecture-empty{grid-column:1/-1;padding:30px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.architecture-empty h2{font-size:22px}.architecture-empty p{max-width:660px;color:var(--muted);margin:12px 0;font-size:14px}.architecture-empty a{color:var(--primary-ink);font-weight:650}
.architecture-articles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.architecture-articles img{width:100%;height:auto;border:1px solid var(--line);border-radius:16px}.architecture-articles h2{font-size:22px;line-height:1.5;margin-top:16px}.architecture-articles p{font-size:14px;color:var(--muted);margin-top:12px}
.architecture-detail .svc-price-grid{margin-top:28px}.architecture-detail #packages,.architecture-detail #contact{padding-top:28px;padding-bottom:48px}
@media(hover:hover) and (pointer:fine){.architecture-links>a:hover{transform:translateY(-3px) scale(1.01);border-color:var(--primary)}}
@media(max-width:1199px){
  .architecture-header.site-header{height:68px;padding:0 24px;justify-content:space-between;gap:18px}
  .architecture-header .desktop-nav{display:none}
  .architecture-header .menu-toggle{display:flex;width:44px;height:44px;justify-content:center;align-items:center;flex-direction:column;gap:5px;padding:0;background:var(--white);border:1px solid var(--line);border-radius:8px}
  .architecture-header .menu-toggle span{display:block;width:20px;height:2px;background:var(--dark)}
  .architecture-header .mobile-menu{display:block;position:fixed;top:68px;left:0;right:0;bottom:0;padding:16px 24px 60px;background:var(--background);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-8px)}
  .architecture-header .mobile-menu.open{opacity:1;visibility:visible;transform:none}
  .architecture-header .mobile-menu>a,.architecture-header .mobile-menu summary{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:17px;font-weight:600;line-height:1.7;border-bottom:1px solid var(--line);color:var(--dark)}
  .architecture-header .mobile-menu .nav-panel{position:static;width:100%;max-height:none;padding:12px 0;background:var(--surface);box-shadow:none;border:0;border-radius:8px}
  .architecture-header .mobile-menu .nav-panel-links{grid-template-columns:1fr;gap:0}
  .architecture-header .mobile-menu .nav-subgroup>div{grid-template-columns:1fr;gap:0}
}
@media(max-width:767px){
  .architecture-header.site-header{padding-inline:18px}.architecture-header .brand{font-size:22px}
  .site-breadcrumb{padding:18px 18px 0;font-size:11px;gap:6px}
  .architecture-page .section-shell{width:calc(100% - 36px)}
  .architecture-hero{grid-template-columns:1fr;gap:24px;min-height:0;padding-top:28px;padding-bottom:32px}
  .architecture-page h1{font-size:29px;line-height:1.45}.architecture-hero>div>p{font-size:14px;margin-top:14px}
  .architecture-hero img{max-height:250px}.architecture-hero .svc-hero-actions{margin-top:20px;gap:10px}
  .architecture-content{grid-template-columns:1fr;gap:24px;padding:24px 0 30px}
  .architecture-prose h2{font-size:22px}.architecture-content aside{padding:20px}
  .architecture-links,.architecture-articles{grid-template-columns:1fr;gap:16px}
  .architecture-related{padding:20px 0 30px}.architecture-links>a{padding:20px}
  .architecture-next{padding:24px;margin-bottom:30px}.architecture-next h2{font-size:23px}
  .architecture-tabs{gap:7px}.architecture-tabs a{font-size:12px;padding:9px 12px}
  .architecture-empty{padding:24px}.architecture-empty h2{font-size:21px}
}

@media(prefers-reduced-motion:reduce){.architecture-header summary>img,.architecture-links>a{transition:none}.architecture-links>a:hover{transform:none}}