.company-hero { padding: 132px 0 76px; overflow: hidden; }
.company-hero__canvas { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr); gap: clamp(48px, 8vw, 116px); align-items: center; min-height: 574px; padding: clamp(36px, 6vw, 76px); border: 1px solid rgba(255, 255, 255, .88); border-radius: 38px; background: rgba(255, 255, 255, .78); box-shadow: 0 26px 70px rgba(68, 56, 92, .12); isolation: isolate; }
.company-hero__canvas::before, .company-hero__canvas::after { position: absolute; z-index: -1; width: 38%; aspect-ratio: 1; border-radius: 50%; content: ""; filter: blur(12px); opacity: .62; }
.company-hero__canvas::before { top: -20%; left: -13%; background: rgba(212, 255, 0, .54); }
.company-hero__canvas::after { top: -18%; right: -12%; background: rgba(205, 170, 255, .42); }
.company-hero h1, .company-section h2 { margin: 0; letter-spacing: 0; color: var(--ink); font-weight: 900; line-height: .98; }
.company-hero h1 { max-width: 720px; font-size: clamp(44px, 5vw, 74px); }
.company-hero__description { max-width: 650px; margin: 26px 0 0; color: #4e5360; font-size: 17px; line-height: 1.7; }
.location-statement { display: flex; gap: 14px; align-items: flex-start; max-width: 630px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.location-statement__icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--lime); font-size: 14px; }
.location-statement p { margin: 2px 0 0; color: #4e5360; font-size: 14px; line-height: 1.6; }
.company-hero__visual { position: relative; align-self: stretch; min-height: 382px; overflow: hidden; border: 1px solid rgba(17, 17, 17, .11); border-radius: 28px; background: #111; box-shadow: 0 20px 42px rgba(17, 17, 17, .18); }
.visual-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(212, 255, 0, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 255, 0, .14) 1px, transparent 1px); background-size: 31px 31px; mask-image: linear-gradient(to bottom, #000, transparent 94%); }
.visual-city { position: absolute; right: -13px; bottom: 42px; color: #fff; font-size: clamp(50px, 7vw, 94px); font-weight: 900; letter-spacing: 0; line-height: .82; opacity: .96; writing-mode: vertical-rl; }
.visual-marker { position: absolute; top: 31%; left: 31%; display: grid; width: 62px; height: 62px; place-items: center; border-radius: 50% 50% 50% 0; background: var(--lime); color: #111; font-size: 25px; transform: rotate(-45deg); box-shadow: 0 0 0 12px rgba(212, 255, 0, .12), 0 0 0 24px rgba(212, 255, 0, .06); }
.visual-marker i { transform: rotate(45deg); }
.visual-card { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 15px 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(255, 255, 255, .09); color: #fff; backdrop-filter: blur(12px); }
.visual-card span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.visual-card strong { color: var(--lime); font-size: 20px; line-height: 1; }
.visual-card--headquarters { top: 48px; left: 48px; }
.visual-card--global { right: 31px; bottom: 31px; flex-direction: row; align-items: center; width: 168px; font-size: 12px; line-height: 1.35; }
.visual-card--global i { color: var(--lime); font-size: 18px; }
.company-section { padding: 118px 0; }
.company-section__layout, .information-layout { display: grid; grid-template-columns: minmax(240px, .74fr) minmax(0, 1.26fr); gap: clamp(46px, 11vw, 156px); align-items: start; }
.section-intro .eyebrow { color: #5e6370; }
.section-intro h2 { font-size: clamp(38px, 4.2vw, 59px); }
.focus-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.focus-list li { display: grid; grid-template-columns: 42px 1fr 22px; gap: 16px; align-items: center; min-height: 80px; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.55vw, 22px); font-weight: 750; line-height: 1.28; transition: color .3s ease-out, padding .3s ease-out; }
.focus-list li:hover { padding-left: 9px; color: #596a00; }
.focus-list__number { color: #848995; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.focus-list i { color: #717784; font-size: 13px; justify-self: end; }
.company-section--principles { padding: 0; }
.principles-panel { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: clamp(46px, 11vw, 156px); padding: clamp(48px, 7vw, 86px); border-radius: 32px; background: #111; color: #fff; }
.section-intro--light .eyebrow { color: var(--lime); }
.section-intro--light h2 { color: #fff; }
.principles-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.principles-list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; min-height: 56px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); font-size: 16px; font-weight: 700; }
.principles-list li:last-child { border-bottom: 0; }
.principles-list i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: rgba(212, 255, 0, .14); color: var(--lime); font-size: 14px; }
.company-section--information { padding-bottom: 132px; }
.company-details { margin: 0; border-top: 1px solid var(--line); }
.company-details > div { display: grid; grid-template-columns: minmax(130px, .64fr) minmax(0, 1.36fr); gap: 22px; min-height: 71px; align-items: center; border-bottom: 1px solid var(--line); }
.company-details dt { color: #737784; font-size: 13px; font-weight: 800; }
.company-details dd { margin: 0; font-size: 16px; font-weight: 750; }
@media (max-width: 840px) { .company-hero { padding: 98px 0 52px; } .company-hero__canvas { grid-template-columns: 1fr; min-height: 0; padding: 34px 24px 24px; gap: 36px; border-radius: 26px; } .company-hero h1 { font-size: clamp(42px, 11vw, 60px); } .company-hero__description { font-size: 16px; } .company-hero__visual { min-height: 315px; } .visual-card--headquarters { top: 25px; left: 24px; } .visual-card--global { right: 20px; bottom: 20px; } .company-section { padding: 76px 0; } .company-section__layout, .information-layout, .principles-panel { grid-template-columns: 1fr; gap: 38px; } .principles-panel { padding: 42px 26px; border-radius: 25px; } .focus-list li { grid-template-columns: 35px 1fr 18px; min-height: 74px; font-size: 17px; } .company-details > div { grid-template-columns: 1fr; gap: 5px; padding: 17px 0; } .company-section--information { padding-bottom: 84px; } }