@font-face { font-family: "Optika Display"; src: url("../fonts/shator-display-regular.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Optika Display"; src: url("../fonts/shator-display-bold.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Optika Body"; src: url("../fonts/shator-body-regular.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Optika Body"; src: url("../fonts/shator-body-bold.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  --ink: #111214;
  --black: #0d0e10;
  --black-deep: #08090a;
  --magenta: #d02d78;
  --cyan: #1497aa;
  --paper: #f4f4f2;
  --white: #fffefd;
  --line: #d9d9d4;
  --muted: #626568;
  --serif: "Optika Display", "Palatino Linotype", Palatino, serif;
  --sans: "Optika Body", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.64 var(--sans); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }

.site-header { position: sticky; top: 0; z-index: 50; height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 38px; padding: 0 clamp(22px, 5vw, 74px); background: rgba(255,255,253,.95); border-bottom: 1px solid rgba(17,18,20,.08); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; color: #151619; }
.brand-mark { width: 43px; height: 43px; color: var(--magenta); }
.brand-mark svg { width: 100%; height: 100%; }
.brand > span:last-child { display: grid; line-height: 1; }
.brand b { font: 700 1.12rem/1 var(--serif); letter-spacing: .055em; }
.brand small { margin-top: 6px; font: 700 .59rem/1 var(--sans); letter-spacing: .21em; }
nav { display: flex; align-items: center; gap: 32px; color: #282a2d; font-size: .9rem; font-weight: 700; }
nav a { transition: color .2s ease; }
nav a:hover { color: var(--magenta); }
.header-cta { justify-self: end; padding: 12px 20px; color: white; background: var(--magenta); border-radius: 7px; font-size: .86rem; font-weight: 700; box-shadow: 0 9px 24px rgba(208,45,120,.2); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0 10px; background: transparent; border: 1px solid var(--line); border-radius: 6px; }
.menu-toggle span { display: block; height: 1px; margin: 6px 0; background: var(--ink); }

.page-shell { width: min(1450px, calc(100% - 36px)); margin: 18px auto 0; }
.hero { position: relative; min-height: 650px; overflow: hidden; border-radius: 28px; background: var(--black-deep); box-shadow: 0 26px 70px rgba(17,18,20,.18); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: 71% 45%; animation: ken-burns 15s cubic-bezier(.42,0,.25,1) infinite alternate; will-change: transform; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,8,9,.99) 0%, rgba(9,10,11,.94) 31%, rgba(9,10,11,.68) 49%, rgba(9,10,11,.08) 73%, rgba(8,9,10,.12) 100%); }
.hero-copy { position: relative; z-index: 5; min-height: 650px; display: flex; flex-direction: column; justify-content: center; padding: clamp(46px, 7vw, 104px); color: white; }
.eyebrow { display: flex; align-items: center; gap: 10px; width: max-content; margin: 0 0 28px; padding: 8px 12px; border: 1px solid rgba(208,45,120,.7); border-radius: 3px; color: #ea70a8; font-size: .73rem; font-weight: 700; letter-spacing: .12em; }
.eyebrow span { width: 18px; height: 1px; background: var(--cyan); }
.hero h1 { max-width: 760px; margin: 0; font: 400 clamp(4.4rem, 6.7vw, 7.2rem)/.9 var(--serif); letter-spacing: -.052em; }
.hero-lead { max-width: 585px; margin: 29px 0 0; color: #e3e3e2; font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.72; }
.hero-actions { display: flex; gap: 14px; margin-top: 37px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 51px; padding: 0 24px; border-radius: 6px; font-size: .92rem; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--magenta); box-shadow: 0 12px 30px rgba(208,45,120,.25); }
.button-ghost { border: 1px solid rgba(36,173,192,.63); color: #f1f3f3; }

.registration-motif { position: absolute; z-index: 3; pointer-events: none; }
.motif-main { width: 570px; height: 570px; left: 42%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(208,45,120,.35); border-radius: 50%; }
.motif-main::before, .motif-main::after { content: ""; position: absolute; background: rgba(23,157,175,.42); }
.motif-main::before { width: 132%; height: 1px; left: -16%; top: 50%; }
.motif-main::after { width: 1px; height: 132%; left: 50%; top: -16%; }
.registration-motif i { position: absolute; width: 44px; height: 44px; border-style: solid; border-color: rgba(225,225,222,.38); }
.motif-main i:nth-child(1) { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.motif-main i:nth-child(2) { right: -1px; top: -1px; border-width: 1px 1px 0 0; }
.motif-main i:nth-child(3) { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.motif-main i:nth-child(4) { left: -1px; bottom: -1px; border-width: 0 0 1px 1px; }
.registration-motif span { position: absolute; padding: 4px 7px; color: #ee75ad; background: rgba(8,9,10,.67); font: 700 .62rem/1 var(--sans); letter-spacing: .16em; }
.motif-main span { right: 4%; top: 48.5%; }
.motif-small { width: 260px; height: 180px; right: 4%; bottom: 6%; border-left: 1px solid rgba(20,151,170,.3); border-top: 1px solid rgba(208,45,120,.3); }
.motif-small::after { content: ""; position: absolute; inset: 20px 0 0 20px; border-left: 1px solid rgba(208,45,120,.23); border-top: 1px solid rgba(20,151,170,.23); }
.motif-small i:nth-child(1) { left: -7px; top: -1px; width: 14px; height: 1px; background: rgba(255,255,255,.55); border: 0; }
.motif-small i:nth-child(2) { left: -1px; top: -7px; width: 1px; height: 14px; background: rgba(255,255,255,.55); border: 0; }
.motif-small span { left: 9px; top: 9px; }
.color-bar { position: absolute; z-index: 3; left: 42%; bottom: 7%; width: 150px; height: 5px; background: rgba(255,255,255,.35); }
.color-bar i { float: left; width: 33.333%; height: 100%; }
.color-bar i:first-child { background: var(--magenta); }
.color-bar i:last-child { background: var(--cyan); }

.facts { position: relative; z-index: 8; display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0 0; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 40px rgba(22,23,25,.07); }
.fact { min-height: 208px; padding: 28px 34px; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact-heading { display: flex; align-items: center; gap: 10px; color: var(--magenta); font-size: .78rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.fact-heading svg { width: 22px; height: 22px; }
.fact strong { display: block; margin-top: 23px; color: #17181a; font: 400 clamp(1.65rem, 2.2vw, 2.25rem)/1.05 var(--serif); }
.fact p { margin: 13px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.62; }

.section-kicker { margin: 0 0 18px; color: var(--magenta); font-size: .77rem; font-weight: 700; letter-spacing: .16em; }
.about { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(58px, 8vw, 132px); align-items: center; padding: clamp(108px, 11vw, 168px) clamp(25px, 4vw, 62px); }
.about h2, .contact h2 { max-width: 620px; margin: 0; font: 400 clamp(3.65rem, 5.25vw, 5.8rem)/.97 var(--serif); letter-spacing: -.05em; }
.about-copy > p:not(.section-kicker) { max-width: 620px; margin: 30px 0 0; color: #55595d; font-size: 1.11rem; line-height: 1.86; }
.company-meta { display: grid; grid-template-columns: 1.25fr .75fr; gap: 13px; margin: 36px 0 0; }
.company-meta div { padding: 19px 20px; background: var(--white); border: 1px solid #cecfc9; border-radius: 7px; }
.company-meta dt { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.company-meta dd { margin: 9px 0 0; color: #202124; font-size: .93rem; font-weight: 700; line-height: 1.45; }
.about-visual { position: relative; min-height: 470px; margin: 0; overflow: hidden; background: #dddcd7; border: 1px solid #d4d3ce; border-radius: 20px; box-shadow: 0 25px 68px rgba(22,23,25,.11); }
.about-visual::before { content: ""; position: absolute; z-index: 1; inset: 0; background-image: linear-gradient(rgba(208,45,120,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(20,151,170,.07) 1px, transparent 1px); background-size: 46px 46px; mix-blend-mode: multiply; pointer-events: none; }
.about-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.about-visual:hover img { transform: scale(1.018); }
.about-visual figcaption { position: absolute; z-index: 2; right: 18px; bottom: 17px; padding: 7px 10px; color: #503445; background: rgba(255,254,253,.91); border: 1px solid #d8cdd3; border-radius: 3px; font-size: .66rem; font-weight: 700; letter-spacing: .14em; }

.owner { display: grid; grid-template-columns: 1.2fr 1fr .35fr; align-items: stretch; margin: 0 0 24px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 12px 40px rgba(22,23,25,.055); }
.owner-heading { padding: 39px 46px; }
.owner-heading .section-kicker { margin-bottom: 8px; }
.owner h2 { margin: 0; font: 400 clamp(2.65rem, 3.6vw, 4rem)/.95 var(--serif); letter-spacing: -.04em; }
.owner article { display: flex; flex-direction: column; justify-content: center; padding: 36px 39px; border-left: 1px solid var(--line); }
.owner article strong { font: 400 1.48rem/1.2 var(--serif); }
.owner article p { margin: 10px 0 0; color: #37393c; font-size: .96rem; font-weight: 700; }
.owner-code { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border-left: 1px solid var(--line); color: var(--magenta); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.owner-code i { width: 1px; height: 25px; background: var(--cyan); }

.activities { position: relative; min-height: 720px; display: grid; place-items: center; overflow: hidden; border-radius: 28px; color: white; background: var(--black-deep); }
.parallax-layer { position: absolute; inset: -150px 0; overflow: hidden; }
.parallax-layer img { position: absolute; width: 100%; height: calc(100% + 300px); left: 0; top: -150px; object-fit: cover; object-position: center; transition: transform .06s linear; will-change: transform; }
.activities-overlay { position: absolute; inset: 0; background: linear-gradient(102deg, rgba(7,8,9,.97) 0%, rgba(11,12,14,.93) 51%, rgba(10,11,13,.65) 100%); }
.activities-overlay::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(208,45,120,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(20,151,170,.06) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent 0, black 58%); }
.activities-content { position: relative; z-index: 2; width: 100%; padding: clamp(76px, 8vw, 116px) clamp(28px, 7vw, 108px); }
.section-heading-light { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 34px; margin-bottom: 47px; }
.section-heading-light .section-kicker { color: #ed70aa; }
.section-heading-light h2 { margin: 0; font: 400 clamp(3.7rem, 5.2vw, 5.8rem)/.95 var(--serif); letter-spacing: -.05em; }
.section-heading-light > p { max-width: 315px; margin: 0 0 5px; color: #bec0c3; font-size: 1rem; line-height: 1.7; }
.activity-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(36px, 7vw, 94px); border-top: 1px solid rgba(208,45,120,.34); }
.activity-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; min-height: 76px; border-bottom: 1px solid rgba(20,151,170,.22); }
.activity-item:last-child { grid-column: 1 / -1; }
.activity-item > span { color: #ed70aa; font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.activity-item p { margin: 0; color: #f2f2f1; font-size: 1rem; line-height: 1.4; }
.activity-item b { color: #56b7c5; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }

.contact { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(50px, 7vw, 110px); align-items: start; margin: 24px 0; padding: clamp(78px, 8vw, 114px) clamp(28px, 6vw, 96px); background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 15px 50px rgba(22,23,25,.07); }
.contact-details > p:not(.section-kicker) { margin: 24px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.72; }
.contact-details ul { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 18px; }
.contact-details li { display: flex; align-items: center; gap: 14px; color: #2d2f32; font-size: 1rem; }
.contact-icon { flex: 0 0 auto; width: 25px; color: var(--magenta); font-size: .66rem; font-weight: 700; letter-spacing: .08em; }
.contact-form { padding: clamp(26px, 3vw, 41px); background: #faf9f7; border: 1px solid #ddd9d4; border-radius: 13px; box-shadow: 0 12px 38px rgba(22,23,25,.07); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 8px; margin-bottom: 16px; color: #36383b; font-size: .79rem; font-weight: 700; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; color: #202124; background: var(--white); border: 1px solid #cfcbc5; border-radius: 6px; outline: none; transition: border-color .2s, box-shadow .2s; }
.contact-form input, .contact-form select { height: 52px; padding: 0 14px; }
.contact-form textarea { resize: vertical; min-height: 132px; padding: 14px; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(208,45,120,.1); }
.submit-button { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; color: white; background: var(--magenta); border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 26px rgba(208,45,120,.2); }
.form-note, .form-success { min-height: 20px; margin: 13px 0 0; color: #737679; font-size: .77rem; text-align: center; }
.form-success { color: #287448; font-weight: 700; }

footer { position: relative; overflow: hidden; color: #eef0ef; background: #090a0c; }
.footer-motif { position: absolute; width: 510px; height: 510px; right: -155px; bottom: -315px; border: 1px solid rgba(208,45,120,.25); border-radius: 50%; }
.footer-motif::before, .footer-motif::after { content: ""; position: absolute; background: rgba(20,151,170,.22); }
.footer-motif::before { width: 140%; height: 1px; left: -20%; top: 50%; }
.footer-motif::after { width: 1px; height: 140%; left: 50%; top: -20%; }
.footer-motif i { position: absolute; width: 60px; height: 60px; border-color: rgba(255,255,255,.14); border-style: solid; }
.footer-motif i:nth-child(1) { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.footer-motif i:nth-child(2) { right: -1px; top: -1px; border-width: 1px 1px 0 0; }
.footer-motif i:nth-child(3) { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.footer-motif i:nth-child(4) { left: -1px; bottom: -1px; border-width: 0 0 1px 1px; }
.footer-inner { position: relative; z-index: 2; width: min(1320px, calc(100% - 48px)); margin: auto; display: grid; grid-template-columns: 1.55fr .55fr .9fr; gap: 72px; align-items: end; padding: 88px 0 70px; }
.footer-identity { display: flex; align-items: center; gap: 19px; }
.footer-mark { width: 65px; color: #de448b; }
.footer-mark svg { width: 100%; }
.footer-identity strong { display: block; font: 400 clamp(4.6rem, 7.2vw, 7.7rem)/.8 var(--serif); letter-spacing: -.052em; }
.footer-identity p { margin: 19px 0 0; color: #b7b9bb; font-size: .75rem; font-weight: 700; letter-spacing: .2em; }
.footer-links, .footer-contact { display: flex; flex-direction: column; gap: 12px; color: #c8cacc; font-size: .97rem; }
.footer-links > span, .footer-contact > span { margin-bottom: 6px; color: #e15b98; font-size: .72rem; font-weight: 700; letter-spacing: .17em; }
.footer-contact p { margin: 0; }
.footer-bottom { position: relative; z-index: 2; padding: 20px; border-top: 1px solid rgba(208,45,120,.14); color: #929598; font-size: .85rem; text-align: center; }

@keyframes ken-burns { from { transform: scale(1.01) translate3d(0,0,0); } to { transform: scale(1.105) translate3d(-2.05%,-1.1%,0); } }

@media (max-width: 1040px) {
  .site-header { grid-template-columns: 1fr auto; }
  nav { display: none; position: absolute; top: 82px; right: 18px; width: min(320px, calc(100vw - 36px)); padding: 22px; flex-direction: column; align-items: flex-start; gap: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 46px rgba(20,21,23,.15); }
  nav.is-open { display: flex; }
  .header-cta { display: none; }
  .menu-toggle { display: block; justify-self: end; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .about { grid-template-columns: 1fr; }
  .owner { grid-template-columns: 1fr 1fr; }
  .owner-heading { border-bottom: 1px solid var(--line); }
  .owner article { border-bottom: 1px solid var(--line); }
  .owner-code { grid-column: 1 / -1; min-height: 72px; flex-direction: row; border-left: 0; }
  .owner-code i { width: 30px; height: 1px; }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 78px; }
  body { font-size: 16px; }
  .site-header { height: 70px; padding: 0 15px; }
  nav { top: 70px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand b { font-size: .94rem; }
  .page-shell { width: calc(100% - 16px); margin-top: 8px; }
  .hero { min-height: 720px; border-radius: 17px; }
  .hero-media img { object-position: 67% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(7,8,9,.99) 0%, rgba(8,9,10,.91) 50%, rgba(8,9,10,.25) 100%); }
  .hero-copy { min-height: 720px; justify-content: flex-end; padding: 46px 24px 58px; }
  .hero h1 { font-size: clamp(3.65rem, 16vw, 4.9rem); line-height: .91; }
  .hero-lead { max-width: 93%; margin-top: 22px; }
  .hero-actions { flex-wrap: wrap; margin-top: 28px; }
  .eyebrow { margin-bottom: 22px; font-size: .62rem; }
  .motif-main { width: 440px; height: 440px; left: 61%; top: 31%; opacity: .7; }
  .motif-small, .color-bar { display: none; }
  .facts { grid-template-columns: 1fr; padding: 8px; border-radius: 14px; }
  .fact { min-height: auto; padding: 27px 22px; border-right: 0; border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
  .about { gap: 46px; padding: 92px 16px; }
  .about h2, .contact h2 { font-size: 3.25rem; }
  .about-copy > p:not(.section-kicker) { font-size: 1.02rem; }
  .company-meta { grid-template-columns: 1fr; }
  .about-visual { min-height: 350px; }
  .owner { grid-template-columns: 1fr; }
  .owner-heading, .owner article { padding: 31px 24px; }
  .owner article { border-left: 0; }
  .owner-code { grid-column: 1; }
  .activities { min-height: auto; border-radius: 17px; }
  .parallax-layer { inset: -40px 0; }
  .parallax-layer img { height: calc(100% + 80px); top: -40px; transform: scale(1.08) !important; }
  .activities-content { padding: 74px 22px; }
  .section-heading-light { display: block; }
  .section-heading-light h2 { font-size: 3.35rem; }
  .section-heading-light > p { margin-top: 20px; }
  .activity-grid { grid-template-columns: 1fr; }
  .activity-item, .activity-item:last-child { grid-column: 1; min-height: 76px; grid-template-columns: 33px 1fr; }
  .activity-item b { grid-column: 2; padding-bottom: 12px; }
  .contact { margin: 12px 0; padding: 70px 18px; border-radius: 17px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer-inner { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 45px; padding-top: 74px; }
  .footer-identity { align-items: flex-end; }
  .footer-mark { width: 48px; }
  .footer-identity strong { font-size: clamp(4.15rem, 21vw, 5.9rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media img { animation: none; transform: scale(1.04); }
  .parallax-layer img { transform: scale(1.08) !important; transition: none; }
}