/* Shared company, portfolio and Website Factory presentation. */
[hidden] { display: none !important; }
.primary-nav { gap: clamp(12px, 1.7vw, 28px); }
.builder-menu { position: relative; }
.builder-menu summary { display: flex; align-items: center; gap: 9px; min-height: 44px; list-style: none; color: #d9e9fa; font-size: .83rem; cursor: pointer; }
.builder-menu summary::-webkit-details-marker { display: none; }
.builder-menu summary::after { content: '⌄'; color: var(--cyan); transition: rotate .2s; }
.builder-menu[open] summary::after { rotate: 180deg; }
.builder-menu summary:focus-visible, .ex-details summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.builder-submenu { position: absolute; right: -28px; top: calc(100% + 8px); width: 264px; padding: 12px; border: 1px solid var(--glass-stroke); border-radius: 12px; background: #081d40f5; box-shadow: 0 20px 60px #0006; backdrop-filter: blur(24px); }
.primary-nav .builder-submenu a { display: flex; min-height: 44px; padding: 7px 12px; border-radius: 6px; font-size: .86rem; }
.primary-nav .builder-submenu a::after { display: none; }
.builder-submenu a:hover { background: #00c8f814; }
.builder-submenu small { margin-left: auto; color: #a9bfda; font-size: .65rem; }
.footer-copyright { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.footer-copyright > a { color: #d5f6ff; }
.ex-wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.ex-main { overflow: clip; background: radial-gradient(ellipse at 85% 8%,#154c8240,transparent 34%), radial-gradient(ellipse at 0 45%,#4236ad22,transparent 38%), #071c3e; }
.ex-hero { position: relative; padding-block: calc(var(--header-height) + 76px) 84px; }
.ex-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.ex-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: #89dff7; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ex-kicker::before { content: ''; width: 28px; height: 1px; background: var(--cyan); }
.ex-hero h1 { margin: 0 0 26px; max-width: 850px; font-family: var(--display); font-size: clamp(2.8rem, 4.8vw, 5rem); font-weight: 500; line-height: 1.1; letter-spacing: -.06em; }
.ex-gradient { color: #9ce8ff; background: linear-gradient(100deg,#6cdbff,#a7b0ff); background-clip: text; -webkit-text-fill-color: transparent; }
.ex-lead { max-width: 670px; margin: 0 0 24px; color: #c6d8ed; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.7; }
.ex-small { color: #b0c4df; font-size: .9rem; }
.ex-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.ex-btn { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 46px; padding: 12px 21px; border: 1px solid #9be8ff66; border-radius: 7px; background: #0b325a; color: #edfaff; font-weight: 600; font-size: .94rem; transition: border-color .2s, background .2s, transform .2s; }
.ex-btn:hover { background: #154b73; border-color: #9be8ff; transform: translateY(-2px); }
.ex-btn-primary { background: linear-gradient(120deg,#43d3ff,#8da9ff); border-color: transparent; color: #071c3e; }
.ex-btn:disabled, .ex-btn[aria-disabled='true'] { background: #153451; color: #bbd0e4; border-color: #ffffff26; cursor: default; transform: none; }
.ex-status { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #b6c9ff44; border-radius: 99px; padding: 5px 11px; color: #c6d4ff; font-size: .72rem; letter-spacing: .035em; }
.ex-status::before { content: ''; width: 5px; height: 5px; background: #a5b7ff; border-radius: 50%; }
.ex-section { padding-block: 76px; border-top: 1px solid #d9edff17; scroll-margin-top: 80px; }
.ex-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.ex-section h2, .builder-promo h2 { margin: 0 0 14px; font-family: var(--display); font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 500; line-height: 1.17; letter-spacing: -.045em; }
.ex-section-head p { max-width: 550px; margin-block: 8px 0; color: #b9cce3; }
.ex-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.ex-grid-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ex-panel { position: relative; min-width: 0; padding: 28px; border: 1px solid #c3e2ff26; border-radius: 14px; background: linear-gradient(145deg,#1438647a,#0c234773); backdrop-filter: blur(12px); }
.ex-panel h3 { margin: 13px 0 10px; font-family: var(--display); font-size: 1.18rem; font-weight: 600; letter-spacing: -.025em; }
.ex-panel p { margin: 0 0 16px; color: #c0d2e7; }
.ex-panel > .ex-number { color: #83d9f4; font-size: .8rem; letter-spacing: .13em; }
.ex-details { border-top: 1px solid #c2ddff26; padding-top: 14px; margin-top: 14px; }
.ex-details summary { cursor: pointer; color: #bceeff; padding-block: 7px; }
.ex-details p, .ex-details ul { color: #c0d2e7; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.ex-chips li { padding: 5px 10px; border: 1px solid #b3d9ff2e; border-radius: 5px; color: #d5e7f9; background: #071c3e77; font-size: .85rem; }
.ex-portrait { margin: 0; position: relative; }
.ex-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border: 1px solid #b0d8ff33; border-radius: 16px; }
.ex-portrait figcaption { margin-top: 12px; color: #a7bedb; font-size: .83rem; }
.ex-portrait-tag { position: absolute; bottom: 60px; left: -24px; padding: 16px 22px; max-width: calc(100% + 10px); border: 1px solid #9ddcff44; border-radius: 10px; background: #09203dea; backdrop-filter: blur(12px); }
.ex-portrait-tag strong { display: block; color: #d8f4ff; }
.ex-portrait-tag span { font-size: .83rem; color: #abc4df; }
.ex-team { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
.ex-team-profile { display: grid; grid-template-columns: 160px 1fr; gap: 24px; }
.ex-team-profile .ex-portrait img { aspect-ratio: 4/5; border-radius: 10px; }
.ex-team h3 { margin-top: 0; }
.ex-initial { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 24px; border: 1px solid #a3d6ff33; border-radius: 50%; background: radial-gradient(circle at 30% 20%,#325e8a,#10294c); color: #c6def6; font-family: var(--display); font-size: 1.9rem; }
.ex-story { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; }
.ex-timeline { border-left: 1px solid #63c3ee66; padding-left: 30px; }
.ex-timeline article { position: relative; padding-bottom: 30px; }
.ex-timeline article::before { content: ''; position: absolute; top: 9px; left: -35px; width: 9px; height: 9px; background: #70d5f3; border: 2px solid #0b2246; border-radius: 50%; }
.ex-timeline h3 { margin: 0 0 10px; font-weight: 500; font-size: 1.3rem; }
.ex-timeline p { margin: 0; color: #b9cce3; }
.preview-controls button { min-height: 44px; padding: 8px 14px; border: 1px solid #bddbff30; border-radius: 6px; background: #0e2b51; color: #c5d9ef; font-size: .88rem; }
.preview-controls button[aria-pressed='true'] { background: #b1eaff; color: #081c3c; border-color: #b1eaff; }
.ex-explorer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 46px; }
.ex-constellation { position: relative; display: grid; place-items: center; min-height: 350px; isolation: isolate; }
.ex-constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.ex-constellation .ex-core { display: grid; align-content: center; width: 112px; height: 112px; text-align: center; border: 1px solid #a5e9ff99; border-radius: 50%; background: radial-gradient(circle,#235587,#0a2349); box-shadow: 0 0 65px #3f87df33; font: 600 .9rem var(--display); }
.ex-constellation button { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; min-height: 44px; border: 1px solid #bde4ff44; border-radius: 20px; background: #102e55; color: #d3e8fc; padding: 8px 14px; font-size: .86rem; transition: background .2s, box-shadow .2s; }
.ex-constellation button[aria-pressed='true'] { color: #071c3e; background: #b1eaff; box-shadow: 0 0 25px #52bfea44; }
.ex-expertise-result { min-height: 260px; }
.ex-preview { width: 100%; min-width: 0; padding: 14px; border: 1px solid #9dcaff45; border-radius: 16px; background: linear-gradient(145deg,#244a7666,#091b3cbb); box-shadow: 0 30px 100px #0003; }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #aac2df; padding: 0 4px 14px; font-size: .7rem; letter-spacing: .05em; }
.preview-dots { display: flex; gap: 5px; }
.preview-dots i { width: 5px; height: 5px; border-radius: 50%; background: #8cc3e8; opacity: .7; }
.preview-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.preview-controls button { padding: 6px 10px; font-size: .76rem; }
.preview-stage { padding: 18px; min-height: 285px; border: 1px solid #b8dcff22; border-radius: 8px; background: #081a36; }
.preview-site { width: 100%; min-height: 240px; margin-inline: auto; padding: 20px; border-radius: 5px; background: #f2f5f8; color: #12243c; transition: max-width .35s, background .35s; }
.preview-site[data-device='mobile'] { max-width: 210px; }
.preview-site[data-layout='studio'] { background: #eeeafa; --preview-accent: #6555b9; }
.preview-site[data-layout='shop'] { background: #e5f1ee; --preview-accent: #276c5a; }
.preview-site[data-layout='business'] { --preview-accent: #2762a0; }
.preview-brand { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1232; padding-bottom: 13px; font-size: .61rem; letter-spacing: .13em; text-transform: uppercase; }
.preview-brand b { width: 9px; height: 9px; border-radius: 50%; background: var(--preview-accent); }
.preview-site h3 { margin: 20px 0 10px; max-width: 260px; color: #152941; font: 600 clamp(1.3rem,2.2vw,2rem)/1.15 var(--display); letter-spacing: -.04em; }
.preview-site p { max-width: 260px; margin: 0 0 15px; color: #3e5167; font-size: .76rem; }
.preview-blocks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.preview-blocks span { height: 42px; border-radius: 4px; background: var(--preview-accent); opacity: .25; }
.preview-blocks span:nth-child(2) { opacity: .5; }.preview-blocks span:nth-child(3) { opacity: .75; }
.preview-note { color: #aac2df; font-size: .74rem; margin: 12px 0 0; }
.builder-promo { padding-block: 70px; background: radial-gradient(ellipse at 85% 50%,#305fa233,transparent 55%),#091f41; border-top: 1px solid #aacaff22; }
.builder-promo .ex-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.builder-promo p { color: #c0d3e9; max-width: 560px; }
.builder-promo .preview-site p { color: #3e5167; }
.builder-promo-compact { padding-block: 38px; }
.builder-promo-compact .ex-wrap { grid-template-columns: 1fr auto; gap: 30px; }
.builder-promo-compact h2 { font-size: clamp(1.4rem,2.5vw,2rem); }
.builder-promo-compact .ex-actions { margin: 0; }
.builder-promo-compact p { margin-bottom: 0; max-width: 740px; }
.ex-closing { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 28px 32px; border: 1px solid #98c7ff30; border-radius: 12px; background: #12355a66; }
.ex-closing p { margin: 5px 0; color: #b9cce3; }
.ex-closing .ex-actions { margin: 0; }
.ex-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.ex-step { padding: 20px 24px; border-left: 2px solid #a8d8ff33; margin-bottom: 12px; transition: background .2s, border-color .2s; }
.ex-step.is-active { border-color: #98e1ff; background: #20548155; }
.ex-step h3 { margin: 0 0 8px; font-size: 1.1rem; }.ex-step p { margin: 0; color: #c0d2e7; }
.ex-step-button { min-height: 44px; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: #e6f5ff; }
.ex-step-button span { color: #93ddf9; font-size: 1.2rem; }
.ex-step-detail { padding: 32px; min-height: 240px; border-radius: 12px; border: 1px solid #9bd4ff44; background: linear-gradient(140deg,#1b446c77,#0c214788); }
.ex-step-detail h3 { font: 500 1.7rem var(--display); letter-spacing: -.03em; }.ex-step-detail p { color: #c0d2e7; }
.ex-feature summary { color: #9cddf5; }.ex-feature .ex-status { font-size: .65rem; }
.ex-fade { animation: ex-fade .3s ease both; }
@keyframes ex-fade { from { opacity: .35; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (min-width:1051px) and (max-width:1280px) { .site-header { padding-inline: 24px; }.primary-nav { gap: 15px; }.brand-name { font-size: .62rem; }.primary-nav a,.builder-menu summary { font-size: .78rem; } }
@media (max-width:1050px) { .primary-nav { max-height: calc(100dvh - 69px); overflow-y: auto; visibility: hidden; }.primary-nav.is-open { visibility: visible; }.builder-menu summary { min-height: 48px; border-bottom: 1px solid #ffffff14; }.builder-submenu { position: static; width: 100%; margin-block: 4px 12px; box-shadow: none; }.ex-hero-grid { gap: 36px; }.ex-team { grid-template-columns: 1fr; }.ex-story { gap: 35px; } }
@media (max-width:760px) { .ex-wrap { width: calc(100% - 40px); }.ex-hero { padding-block: calc(var(--header-height) + 44px) 48px; }.ex-hero-grid,.ex-explorer,.builder-promo .ex-wrap,.ex-steps,.ex-story { grid-template-columns: 1fr; gap: 30px; }.ex-grid,.ex-grid-two { grid-template-columns: 1fr; }.ex-hero h1 { font-size: clamp(2.55rem,9vw,4rem); }.ex-hero .ex-portrait { max-width: 400px; width: 100%; margin-inline: auto; }.ex-portrait-tag { left: 12px; }.ex-section { padding-block: 48px; }.ex-section-head { display: block; }.ex-team-profile { grid-template-columns: 100px 1fr; gap: 18px; }.ex-panel { padding: 22px; }.ex-team-profile .ex-actions { grid-column: 1/-1; }.ex-closing { align-items: start; flex-direction: column; padding: 24px; }.builder-promo { padding-block: 45px; }.ex-constellation { min-height: 310px; }.ex-constellation button { font-size: .77rem; padding: 8px 11px; }.ex-constellation .ex-core { width: 92px; height: 92px; font-size: .75rem; } }
@media (max-width:400px) { .ex-team-profile { grid-template-columns: 1fr; }.ex-team-profile .ex-portrait { max-width: 150px; }.ex-team-profile .ex-actions { grid-column: auto; }.ex-constellation { margin-inline: -10px; } }
@media (prefers-reduced-motion:reduce) { .ex-main *, .builder-promo *, .builder-menu * { animation: none !important; transition: none !important; transform: none !important; }.ex-constellation button { transform: none; } }
.ex-hero.wireframe-main { min-height: 0; display: block; padding: calc(var(--header-height) + 76px) 0 84px; }
.ex-hero.wireframe-main .ex-wrap { position: relative; z-index: 1; padding: clamp(22px,3vw,36px); border: 1px solid var(--glass-stroke); border-radius: 14px; background: var(--panel-fill); }
.ex-timeline article { transition: opacity .3s; }
.ex-timeline article.is-current::before { box-shadow: 0 0 18px #8bdfff88; }
@media(max-width:760px) { .ex-hero.wireframe-main { padding-block: calc(var(--header-height) + 44px) 48px; } }
.builder-menu summary:hover { color: #a8e9ff; }
.primary-nav > a, .builder-menu > summary { font-size: .875rem; }
.footer-bottom .footer-copyright > span[aria-hidden] { display: inline; }
@media(min-width:1051px) { body[data-page='about'] .ex-hero.wireframe-main { padding-inline: 0; } }