/* Update id: CL-SNJW */

.online-landing { overflow: hidden; background: var(--corporate-paper); color: var(--corporate-ink); }
.online-hero { position: relative; padding: clamp(82px, 9vw, 140px) 0 clamp(72px, 8vw, 120px); background: radial-gradient(circle at 82% 30%, rgba(243, 128, 32, .16), transparent 29%), linear-gradient(150deg, #faf9f6 0%, #f2f0eb 100%); }
.online-hero::before { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(22, 26, 29, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 26, 29, .055) 1px, transparent 1px); background-size: 52px 52px; content: ""; pointer-events: none; }
.online-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); align-items: center; gap: clamp(50px, 8vw, 120px); }
.online-hero__copy h1 { max-width: 760px; margin: 19px 0 25px; font-size: clamp(38px, 5.2vw, 73px); line-height: .92; letter-spacing: -.045em; }
.online-hero__copy > p:not(.corporate-eyebrow) { max-width: 690px; margin: 0 0 35px; color: var(--corporate-muted); font-size: clamp(17px, 1.7vw, 23px); line-height: 1.48; }
.online-hero__visual { position: relative; width: min(100%, 560px); aspect-ratio: 1; justify-self: end; }
.online-orbit { position: absolute; border: 1px solid rgba(22, 26, 29, .18); border-radius: 50%; }
.online-orbit--outer { inset: 3%; }
.online-orbit--inner { inset: 22%; border-style: dashed; }
.online-hero__cloud { position: absolute; inset: 50% auto auto 50%; display: grid; width: 154px; height: 154px; place-items: center; transform: translate(-50%, -50%); border-radius: 38px 38px 10px 38px; background: #171b1f; color: #fff; box-shadow: 14px 14px 0 -5px var(--corporate-logo-orange), 0 28px 60px rgba(22, 26, 29, .2); }
.online-hero__cloud i { color: var(--corporate-logo-orange); font-size: 54px; }
.online-hero__cloud b { margin-top: -18px; font-size: 11px; letter-spacing: .3em; }
.online-node { position: absolute; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid rgba(22, 26, 29, .13); border-radius: 20px 20px 4px 20px; background: rgba(255,255,255,.9); color: var(--corporate-logo-orange); box-shadow: 0 16px 35px rgba(22, 26, 29, .12); font-size: 21px; }
.online-node--domain { top: 4%; left: 43%; }.online-node--site { top: 43%; right: 1%; }.online-node--cloud { bottom: 3%; left: 42%; }.online-node--security { top: 43%; left: 0; }
.online-pillars { position: relative; z-index: 2; margin-top: -31px; }
.online-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--corporate-line); background: #fff; box-shadow: 8px 8px 0 -4px var(--corporate-logo-orange); }
.online-pillars article { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 16px; min-height: 116px; padding: 25px 28px; }
.online-pillars article + article { border-left: 1px solid var(--corporate-line); }
.online-pillars article > i { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: #fff2ec; color: var(--corporate-logo-orange); }
.online-pillars strong,.online-pillars span { display: block; }.online-pillars strong { margin-bottom: 5px; font-size: 14px; }.online-pillars span { color: var(--corporate-muted); font-size: 11px; line-height: 1.45; }
.online-catalogue { padding: clamp(105px, 11vw, 160px) 0 125px; }
.online-section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .7fr); align-items: end; gap: 70px; margin-bottom: 83px; }
.online-section-heading h2 { max-width: 700px; margin: 14px 0 0; font-size: clamp(42px, 5vw, 72px); line-height: .94; letter-spacing: -.045em; }
.online-section-heading > p { margin: 0; color: var(--corporate-muted); font-size: 15px; line-height: 1.7; }
.online-group + .online-group { margin-top: 94px; }
.online-group > header { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; margin-bottom: 26px; }
.online-group > header > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: #171b1f; color: #fff; font-size: 10px; font-weight: 800; }
.online-group > header h3 { margin: 0 0 5px; font-size: 27px; }.online-group > header p { margin: 0; color: var(--corporate-muted); font-size: 12px; }
.online-group { position: relative; }
.online-statement { position: relative; max-width: 620px; margin: 100px auto; padding-top: 26px; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; text-align: center; color: var(--corporate-ink); }
.online-statement::before { position: absolute; top: 0; left: 50%; width: 46px; height: 3px; background: var(--corporate-logo-orange); content: ""; transform: translateX(-50%); }
.online-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.online-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.online-card-grid--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.online-card-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.online-card-grid--featured .online-card--featured { grid-row: 1 / span 2; }
.online-card { display: flex; min-height: 340px; flex-direction: column; padding: 28px; border: 1px solid var(--corporate-line); border-radius: 22px 22px 3px 22px; background: #fff; box-shadow: 4px 4px 0 -3px rgba(243,128,32,.75); color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.online-card:hover,.online-card:focus { transform: translateY(-5px); border-color: rgba(243,128,32,.72); box-shadow: 9px 11px 0 -6px rgba(243,128,32,.8); }
.online-card__icon { display: grid; width: 51px; height: 51px; margin-bottom: 38px; place-items: center; border-radius: 15px 15px 3px 15px; background: #fff1ea; color: var(--corporate-logo-orange); font-size: 18px; }
.online-card small { color: var(--corporate-logo-orange); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.online-card h4 { margin: 10px 0 13px; font-size: 23px; line-height: 1.1; letter-spacing: -.025em; }
.online-card p { margin: 0; color: var(--corporate-muted); font-size: 12px; line-height: 1.62; }
.online-card > b { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 29px; color: var(--corporate-logo-orange); font-size: 10px; letter-spacing: .03em; }
.online-card--featured { position: relative; overflow: hidden; border-color: rgba(243,128,32,.42); background: linear-gradient(155deg, #fff 0%, #fff7f3 100%); }
.online-card--featured > *:not(.online-card__signal):not(.domain-tld-drift) { position: relative; z-index: 1; }
.online-card__signal { position: absolute; right: -22px; bottom: -18px; z-index: 0; width: 220px; height: 220px; opacity: .16; pointer-events: none; }
.domain-tld-drift { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none; }
.domain-tld-drift span { position: absolute; left: 0; top: var(--tld-top, 20%); transform: translate(420px, -420px) rotate(-45deg); white-space: nowrap; font-size: var(--tld-size, 44px); font-weight: 800; letter-spacing: -.02em; color: var(--corporate-logo-orange); opacity: 0; animation: domain-tld-drift var(--tld-duration, 30s) linear infinite backwards; animation-delay: var(--tld-delay, 0s); }
@keyframes domain-tld-drift { 0% { transform: translate(420px, -420px) rotate(-45deg); opacity: 0; } 8% { opacity: .14; } 92% { opacity: .14; } 100% { transform: translate(-420px, 420px) rotate(-45deg); opacity: 0; } }
.online-domain-quicksearch { margin-top: 16px; }
.online-domain-quicksearch__mode { display: flex; gap: 6px; margin-bottom: 8px; }
.online-domain-quicksearch__mode input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.online-domain-quicksearch__mode label { padding: 5px 11px; border: 1px solid var(--corporate-line); border-radius: 999px; color: var(--corporate-muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.online-domain-quicksearch__mode input:checked + label { border-color: var(--corporate-logo-orange); background: var(--corporate-logo-orange); color: #fff; }
.online-domain-quicksearch__mode input:focus-visible + label { outline: 2px solid rgba(243,128,32,.45); outline-offset: 1px; }
.online-domain-quicksearch__row { display: flex; gap: 8px; }
.online-domain-quicksearch__row input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--corporate-line); border-radius: 11px 11px 3px 11px; background: #fff; color: var(--corporate-ink); font-size: 13px; }
.online-domain-quicksearch__row input:focus { outline: 2px solid rgba(243,128,32,.45); outline-offset: 1px; }
.online-domain-quicksearch__row button { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border: 0; border-radius: 11px 11px 3px 11px; background: var(--corporate-logo-orange); color: #fff; font-size: 14px; cursor: pointer; }
.online-domain-quicksearch__row button:hover,.online-domain-quicksearch__row button:focus { background: var(--corporate-orange); }
.online-card--featured > b > a { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 15px; color: inherit; text-decoration: none; }
.online-card--dark { border-color: rgba(243,128,32,.32); background: linear-gradient(155deg, #fff 0%, #fff4ea 100%); box-shadow: 4px 4px 0 -3px rgba(243,128,32,.6); }
.online-card--dark .online-card__icon { background: rgba(243,128,32,.14); }
.online-card-grid--compact .online-card { min-height: 295px; padding: 24px; }.online-card-grid--compact .online-card__icon { margin-bottom: 28px; }.online-card-grid--compact .online-card h4 { font-size: 18px; }
.online-closing { padding: 0 0 120px; }
.online-closing__panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.12fr .88fr; align-items: end; gap: 80px; padding: clamp(45px, 6vw, 78px); border-radius: 28px 28px 4px 28px; background: radial-gradient(circle at 85% 15%, rgba(243,128,32,.25), transparent 28%), #171b1f; color: #fff; box-shadow: 7px 7px 0 -2px var(--corporate-logo-orange); }
.online-closing__panel > *:not(.online-closing__signal) { position: relative; z-index: 1; }
.online-closing__signal { position: absolute; z-index: 0; top: -46px; right: max(1vw, -40px); width: min(46vw, 480px); height: 280px; opacity: .5; pointer-events: none; }
.online-closing h2 { max-width: 700px; margin: 15px 0 0; color: #fff; font-size: clamp(35px, 4vw, 58px); line-height: .98; }.online-closing__panel > div:last-child > p { margin: 0 0 25px; color: #adb6bb; font-size: 14px; line-height: 1.65; }

html[data-theme="dark"] .online-hero { background: radial-gradient(circle at 82% 30%, rgba(255,122,26,.16), transparent 29%), linear-gradient(150deg, #181b1e, #111315); }
html[data-theme="dark"] .online-hero::before { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); }
html[data-theme="dark"] .online-orbit { border-color: rgba(255,255,255,.18); }
html[data-theme="dark"] .online-node,html[data-theme="dark"] .online-pillars__grid,html[data-theme="dark"] .online-card { border-color: #3a4045; background: #20252a; color: #f5f4f0; }
html[data-theme="dark"] .online-card--featured { background: linear-gradient(155deg, #24282c, #2a211e); }
html[data-theme="dark"] .online-card--dark { border-color: #262c31; background: radial-gradient(circle at 90% 5%, rgba(243,128,32,.19), transparent 30%), #0e1113; box-shadow: 5px 5px 0 -2px var(--corporate-logo-orange); }
html[data-theme="dark"] .online-card--dark .online-card__icon { background: rgba(255,255,255,.08); color: #ff986b; }
html[data-theme="dark"] .online-card--dark p { color: #aab2b7; }
html[data-theme="dark"] .online-card--dark > b { color: #ff986b; }
html[data-theme="dark"] .online-pillars article + article { border-color: #3a4045; }
html[data-theme="dark"] .online-pillars article > i,html[data-theme="dark"] .online-card__icon { background: rgba(255,255,255,.08); color: #ff986b; }
html[data-theme="dark"] .online-domain-quicksearch__row input { border-color: #3a4045; background: #20252a; color: #f5f4f0; }
html[data-theme="dark"] .online-domain-quicksearch__mode label { border-color: #3a4045; color: #aab2b7; }
html[data-theme="dark"] .online-domain-quicksearch__mode input:checked + label { border-color: var(--corporate-logo-orange); color: #fff; }
html[data-theme="dark"] .online-statement { color: #f5f4f0; }

@media (max-width: 1120px) { .online-card-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }.online-hero__grid { grid-template-columns: 1fr minmax(310px,.65fr); }.online-hero__visual { max-width: 430px; } }
@media (max-width: 820px) { .online-hero__grid,.online-section-heading,.online-closing__panel { grid-template-columns: 1fr; }.online-hero__visual { width: min(100%, 420px); justify-self: center; }.online-pillars__grid { grid-template-columns: 1fr; }.online-pillars article + article { border-top: 1px solid var(--corporate-line); border-left: 0; }.online-card-grid,.online-card-grid--two,.online-card-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }.online-section-heading { gap: 25px; }.online-closing__panel { gap: 30px; }.domain-tld-drift { display: none; } }
@media (max-width: 560px) { .online-hero { padding-top: 62px; }.online-hero__grid { gap: 45px; }.online-hero__copy h1 { font-size: 36px; }.online-node { width: 54px; height: 54px; border-radius: 16px 16px 3px 16px; }.online-hero__cloud { width: 126px; height: 126px; }.online-hero__cloud i { font-size: 44px; }.online-card-grid,.online-card-grid--two,.online-card-grid--compact { grid-template-columns: 1fr; }.online-card-grid--featured .online-card--featured { grid-row: auto; }.online-card,.online-card-grid--compact .online-card { min-height: 285px; }.online-pillars { margin-top: -20px; }.online-catalogue { padding-top: 90px; }.online-group + .online-group { margin-top: 70px; } }
