/*
Copyright 2018 The Manrope Project Authors (https://github.com/sharanda/manrope)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

*/
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/manrope-latin.woff2") format("woff2")}
:root {
--ink: #02405a;
--blue: #0573a4;
--sky: #07a7ec;
--green: #90d208;
--yellow: #f9de10;
--orange: #f5a002;
--text: #102b36;
--muted: #526970;
--canvas: #f7fafa;
--surface: #ffffff;
--soft-blue: #eef8fc;
--soft-green: #f4fae8;
--soft-warm: #fff9e8;
--border: #dce8eb;
--shadow: 0 24px 70px rgba(2, 64, 90, 0.11);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--container: 1320px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 120px;
}
body {
min-width: 320px;
margin: 0;
overflow-x: hidden;
color: var(--text);
background: var(--canvas);
font-family: "Manrope", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.menu-open {
overflow: hidden;
}
img,
svg {
display: block;
max-width: 100%;
}
a,
button {
color: inherit;
font: inherit;
}
a {
text-decoration: none;
}
button {
border: 0;
}
:focus-visible {
outline: 3px solid rgba(7, 167, 236, 0.48);
outline-offset: 4px;
}
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 1000;
padding: 12px 16px;
border-radius: 10px;
color: #fff;
background: var(--ink);
transform: translateY(-150%);
transition: transform 180ms ease;
}
.skip-link:focus {
transform: translateY(0);
}
.container {
width: min(calc(100% - 48px), var(--container));
margin-inline: auto;
}
.site-header {
position: fixed;
z-index: 100;
top: 18px;
left: 0;
width: 100%;
padding-inline: 24px;
opacity: 0;
transform: translateY(-14px);
animation: header-in 800ms 100ms var(--ease) forwards;
}
.header-surface {
position: relative;
display: flex;
align-items: center;
width: min(100%, 1380px);
height: 76px;
margin-inline: auto;
padding: 8px 10px 8px 18px;
border: 1px solid rgba(220, 232, 235, 0.9);
border-radius: 24px;
background: rgba(255, 255, 255, 0.79);
box-shadow: 0 12px 40px rgba(2, 64, 90, 0.055);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
transition: height 350ms var(--ease), box-shadow 350ms var(--ease), background 350ms ease;
}
.site-header.is-scrolled .header-surface {
height: 68px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 14px 44px rgba(2, 64, 90, 0.1);
}
.brand {
flex: 0 0 auto;
width: 142px;
}
.brand img {
width: 100%;
height: auto;
}
.desktop-nav {
display: flex;
align-items: center;
gap: clamp(14px, 1.5vw, 27px);
margin-left: clamp(28px, 3.7vw, 66px);
}
.desktop-nav a,
.header-link {
position: relative;
padding-block: 12px;
color: #385763;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: -0.01em;
white-space: nowrap;
transition: color 200ms ease;
}
.desktop-nav a::after {
position: absolute;
right: 0;
bottom: 6px;
left: 0;
height: 1.5px;
background: var(--sky);
content: "";
transform: scaleX(0);
transform-origin: right;
transition: transform 300ms var(--ease);
}
.desktop-nav a:hover,
.header-link:hover {
color: var(--ink);
}
.desktop-nav a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.header-actions {
display: flex;
align-items: center;
gap: 17px;
margin-left: auto;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 52px;
padding: 0 24px;
border: 1px solid transparent;
border-radius: 17px;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: -0.02em;
cursor: pointer;
transition: color 250ms ease, background 250ms ease, border-color 250ms ease,
box-shadow 300ms var(--ease), transform 300ms var(--ease);
}
.button:hover {
transform: translateY(-2px);
}
.button--small {
min-height: 54px;
padding-inline: 21px;
border-radius: 17px;
}
.button--ink {
color: #fff;
background: linear-gradient(135deg, var(--ink), #036c90);
box-shadow: 0 12px 24px rgba(2, 64, 90, 0.17);
}
.button--ink:hover {
box-shadow: 0 17px 32px rgba(2, 64, 90, 0.24);
}
.button--outline {
color: var(--ink);
border-color: var(--border);
background: #fff;
}
.button--text {
color: var(--ink);
border-color: var(--border);
background: rgba(255, 255, 255, 0.68);
}
.button--text:hover {
border-color: rgba(7, 167, 236, 0.45);
background: #fff;
}
.menu-toggle,
.mobile-menu {
display: none;
}
.hero {
position: relative;
min-height: 100svh;
overflow: hidden;
padding: 138px 0 72px;
background:
radial-gradient(circle at 82% 32%, rgba(7, 167, 236, 0.075), transparent 28%),
radial-gradient(circle at 84% 86%, rgba(144, 210, 8, 0.07), transparent 25%),
linear-gradient(180deg, #fbfdfd 0%, var(--canvas) 100%);
}
.hero-grid {
position: absolute;
inset: 0;
opacity: 0.55;
background-image:
linear-gradient(rgba(2, 64, 90, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(2, 64, 90, 0.045) 1px, transparent 1px);
background-size: 84px 84px;
mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.82) 70%, transparent 100%);
}
.hero::before {
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: linear-gradient(transparent, rgba(2, 64, 90, 0.07), transparent);
content: "";
}
.hero-layout {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
align-items: center;
}
.hero-copy {
grid-column: 1 / span 7;
padding-top: 12px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 22px;
color: var(--blue);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.eyebrow-dot {
position: relative;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 7px rgba(144, 210, 8, 0.11);
}
h1,
h2,
p {
margin-top: 0;
}
h1 {
max-width: 820px;
margin-bottom: 28px;
color: var(--text);
font-family: "Manrope", "Arial Narrow", sans-serif;
font-size: clamp(3.75rem, 5.1vw, 5.6rem);
font-weight: 600;
letter-spacing: -0.066em;
line-height: 0.93;
}
.title-line {
display: block;
width: fit-content;
}
.title-line--accent {
position: relative;
z-index: 1;
color: var(--blue);
}
.title-line--accent::after {
position: absolute;
z-index: -1;
right: -4px;
bottom: 3px;
left: 2px;
height: 8px;
border-radius: 8px;
background: linear-gradient(90deg, var(--sky), var(--green) 55%, var(--yellow));
content: "";
opacity: 0.78;
transform: scaleX(0);
transform-origin: left;
animation: line-draw 900ms 1.15s var(--ease) forwards;
}
.hero-lead {
max-width: 670px;
margin-bottom: 31px;
color: var(--muted);
font-size: clamp(1rem, 1.2vw, 1.12rem);
line-height: 1.77;
}
.hero-actions {
display: flex;
align-items: center;
gap: 12px;
}
.button--hero {
min-height: 60px;
padding-inline: 27px;
border-radius: 19px;
font-size: 0.93rem;
}
.commitments {
display: flex;
flex-wrap: wrap;
gap: 17px 24px;
max-width: 720px;
margin: 36px 0 0;
padding: 21px 0 0;
border-top: 1px solid var(--border);
list-style: none;
}
.commitments li {
display: flex;
align-items: center;
gap: 9px;
color: #4b6570;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}
.commitment-icon {
display: grid;
width: 27px;
height: 27px;
place-items: center;
border-radius: 50%;
color: #5c8e00;
background: var(--soft-green);
}
.commitment-icon svg {
width: 15px;
height: 15px;
}
.commitment-icon--sky {
color: var(--blue);
background: var(--soft-blue);
}
.commitment-icon--yellow {
color: #8a7100;
background: var(--soft-warm);
}
.hero-visual {
--mx: 0px;
--my: 0px;
position: relative;
grid-column: 8 / -1;
min-height: 650px;
isolation: isolate;
transform: translate3d(var(--mx), var(--my), 0);
transition: transform 500ms var(--ease);
}
.visual-glow {
position: absolute;
z-index: -2;
top: 14%;
left: 6%;
width: 92%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(7, 167, 236, 0.18), rgba(144, 210, 8, 0.05) 42%, transparent 68%);
filter: blur(36px);
}
.visual-stage {
position: absolute;
inset: 28px 0 15px 30px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.92);
border-radius: 36px;
background:
linear-gradient(140deg, rgba(255, 255, 255, 0.89), rgba(244, 250, 250, 0.74)),
var(--surface);
box-shadow: var(--shadow), inset 0 0 0 1px rgba(220, 232, 235, 0.55);
backdrop-filter: blur(12px);
}
.visual-stage::before {
position: absolute;
top: -90px;
right: -90px;
width: 310px;
height: 310px;
border: 48px solid rgba(7, 167, 236, 0.08);
border-radius: 49% 51% 44% 56%;
content: "";
transform: rotate(24deg);
}
.visual-topline {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
margin: 28px 30px 0;
padding-bottom: 18px;
border-bottom: 1px solid rgba(220, 232, 235, 0.86);
color: var(--blue);
font-size: 0.63rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.visual-topline__mark {
display: flex;
gap: 4px;
}
.visual-topline__mark i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sky);
}
.visual-topline__mark i:nth-child(2) {
background: var(--green);
}
.visual-topline__mark i:nth-child(3) {
background: var(--yellow);
}
.visual-statement {
position: relative;
z-index: 2;
max-width: 220px;
padding: 28px 30px 0;
}
.visual-statement p {
margin-bottom: 8px;
color: var(--muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.visual-statement h2 {
margin-bottom: 0;
color: var(--ink);
font-family: "Manrope", sans-serif;
font-size: clamp(1.9rem, 2.55vw, 2.6rem);
font-weight: 600;
letter-spacing: -0.05em;
line-height: 1.02;
}
.cie-composition {
position: absolute;
z-index: 2;
right: 8px;
bottom: 84px;
width: 255px;
transform: translate3d(calc(var(--mx) * -0.4), calc(var(--my) * -0.35), 0) rotate(-1.5deg);
transition: transform 600ms var(--ease);
}
.cie-composition img {
position: relative;
z-index: 2;
width: 100%;
height: auto;
border: 1px solid rgba(220, 232, 235, 0.7);
border-radius: 18px;
box-shadow: 0 22px 34px rgba(2, 64, 90, 0.13);
}
.cie-composition small {
position: absolute;
z-index: 3;
right: 9px;
bottom: 9px;
padding: 5px 8px;
border: 1px solid rgba(220, 232, 235, 0.8);
border-radius: 999px;
color: #6d848d;
background: rgba(255, 255, 255, 0.92);
font-size: 0.48rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cie-composition__halo {
position: absolute;
top: 32px;
left: 50%;
width: 250px;
height: 250px;
border: 1px solid rgba(7, 167, 236, 0.24);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(7, 167, 236, 0.05) 60%, transparent 61%);
transform: translateX(-50%);
}
.floating-note {
position: absolute;
z-index: 4;
display: flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 0 14px;
border: 1px solid rgba(220, 232, 235, 0.92);
border-radius: 999px;
color: var(--ink);
background: rgba(255, 255, 255, 0.91);
box-shadow: 0 12px 28px rgba(2, 64, 90, 0.1);
font-size: 0.65rem;
font-weight: 800;
backdrop-filter: blur(8px);
}
.floating-note span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 5px rgba(144, 210, 8, 0.1);
}
.floating-note--one {
top: 296px;
left: 25px;
}
.floating-note--two {
right: 23px;
bottom: 145px;
}
.floating-note--two span {
background: var(--sky);
box-shadow: 0 0 0 5px rgba(7, 167, 236, 0.1);
}
.visual-footer {
position: absolute;
z-index: 5;
right: 30px;
bottom: 25px;
left: 30px;
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
padding-top: 17px;
border-top: 1px solid rgba(220, 232, 235, 0.92);
}
.visual-footer__number {
color: var(--sky);
font-family: "Manrope", sans-serif;
font-size: 0.72rem;
font-weight: 700;
}
.visual-footer p {
max-width: 315px;
margin: 0;
color: #5b7179;
font-size: 0.65rem;
line-height: 1.55;
}
.orbit,
.nexo {
position: absolute;
pointer-events: none;
}
.orbit {
z-index: -1;
border-style: solid;
border-radius: 48% 52% 46% 54%;
opacity: 0.42;
}
.orbit--blue {
top: -6px;
left: -20px;
width: 290px;
height: 430px;
border-width: 26px;
border-color: rgba(7, 167, 236, 0.25);
transform: rotate(47deg);
}
.orbit--green {
right: -95px;
bottom: 28px;
width: 340px;
height: 470px;
border-width: 34px;
border-color: rgba(144, 210, 8, 0.22);
transform: rotate(-32deg);
}
.orbit--yellow {
right: 4px;
bottom: -20px;
width: 450px;
height: 220px;
border-width: 20px;
border-color: rgba(249, 222, 16, 0.21);
transform: rotate(16deg);
}
.nexo {
z-index: 1;
border-style: solid;
border-radius: 50%;
opacity: 0.16;
}
.nexo--one {
right: -300px;
bottom: -480px;
width: 900px;
height: 900px;
border-width: 110px;
border-color: var(--sky);
}
.nexo--two {
right: -470px;
bottom: -350px;
width: 900px;
height: 620px;
border-width: 80px;
border-color: var(--green);
transform: rotate(24deg);
}
.scroll-cue {
position: absolute;
z-index: 5;
bottom: 22px;
left: 50%;
display: flex;
align-items: center;
gap: 14px;
color: #78909a;
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
transform: translateX(-50%);
}
.scroll-cue i {
display: block;
width: 34px;
height: 1px;
background: linear-gradient(90deg, var(--sky), transparent);
}
.trust {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 126px 0 118px;
color: #fff;
background:
radial-gradient(circle at 87% 20%, rgba(7, 167, 236, 0.2), transparent 28%),
radial-gradient(circle at 12% 88%, rgba(144, 210, 8, 0.1), transparent 24%),
linear-gradient(145deg, #01364c 0%, var(--ink) 47%, #012f43 100%);
}
.trust::before {
position: absolute;
z-index: -3;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 30%);
content: "";
}
.trust-grid {
position: absolute;
z-index: -2;
inset: 0;
opacity: 0.34;
background-image:
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 84px 84px;
mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.trust-glow {
position: absolute;
z-index: -2;
top: 180px;
left: 50%;
width: 760px;
height: 500px;
border-radius: 50%;
background: rgba(7, 167, 236, 0.09);
filter: blur(120px);
transform: translateX(-50%);
}
.trust-nexo {
position: absolute;
z-index: -1;
border-style: solid;
border-radius: 49% 51% 46% 54%;
pointer-events: none;
}
.trust-nexo--blue {
top: -390px;
right: -310px;
width: 850px;
height: 850px;
border-width: 92px;
border-color: rgba(7, 167, 236, 0.13);
transform: rotate(28deg);
}
.trust-nexo--green {
bottom: -430px;
left: -330px;
width: 820px;
height: 760px;
border-width: 80px;
border-color: rgba(144, 210, 8, 0.09);
transform: rotate(-18deg);
}
.trust-container {
position: relative;
z-index: 2;
}
.trust-heading {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
align-items: end;
margin-bottom: 62px;
}
.trust-heading__title {
grid-column: 1 / span 8;
}
.section-eyebrow {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 23px;
color: #83d9fa;
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.section-eyebrow span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 7px rgba(144, 210, 8, 0.11);
}
.trust h2 {
max-width: 890px;
margin-bottom: 0;
color: #fff;
font-family: "Manrope", sans-serif;
font-size: clamp(3.4rem, 5vw, 5.2rem);
font-weight: 600;
letter-spacing: -0.06em;
line-height: 0.95;
}
.trust-heading__copy {
position: relative;
grid-column: 9 / -1;
padding: 4px 0 4px 36px;
border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.trust-heading__index {
display: block;
margin-bottom: 18px;
color: var(--green);
font-family: "Manrope", sans-serif;
font-size: 0.77rem;
font-weight: 700;
letter-spacing: 0.12em;
}
.trust-heading__copy p {
max-width: 420px;
margin-bottom: 0;
color: rgba(235, 246, 249, 0.72);
font-size: 0.92rem;
line-height: 1.75;
}
.trust-board {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 18px;
}
.trust-anchor {
position: relative;
display: flex;
min-height: 570px;
overflow: hidden;
flex-direction: column;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: 34px;
color: var(--text);
background:
radial-gradient(circle at 100% 0%, rgba(7, 167, 236, 0.15), transparent 35%),
linear-gradient(145deg, #fff 0%, #f4fafb 100%);
box-shadow: 0 34px 75px rgba(0, 18, 28, 0.2);
}
.trust-anchor::before {
position: absolute;
right: -135px;
bottom: -150px;
width: 390px;
height: 390px;
border: 48px solid rgba(7, 167, 236, 0.08);
border-radius: 48% 52% 44% 56%;
content: "";
transform: rotate(32deg);
}
.trust-anchor::after {
position: absolute;
right: 65px;
bottom: -165px;
width: 340px;
height: 300px;
border: 35px solid rgba(144, 210, 8, 0.075);
border-radius: 50%;
content: "";
}
.trust-anchor__topline {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 22px;
border-bottom: 1px solid var(--border);
color: var(--blue);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.trust-anchor__topline svg {
color: var(--green);
}
.trust-anchor__content {
position: relative;
z-index: 2;
max-width: 430px;
padding-top: 72px;
}
.trust-anchor__content > p:first-child {
margin-bottom: 13px;
color: var(--blue);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.trust-anchor h3 {
margin: 0 0 21px;
color: var(--ink);
font-family: "Manrope", sans-serif;
font-size: clamp(2.5rem, 3.25vw, 3.45rem);
font-weight: 600;
letter-spacing: -0.055em;
line-height: 0.98;
}
.trust-anchor__body {
max-width: 390px;
margin-bottom: 0;
color: var(--muted);
font-size: 0.91rem;
line-height: 1.7;
}
.trust-anchor__seal {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 14px;
margin-top: auto;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.trust-anchor__seal-mark {
position: relative;
display: block;
width: 44px;
height: 44px;
flex: 0 0 auto;
}
.trust-anchor__seal-mark i {
position: absolute;
inset: 7px;
border: 3px solid var(--sky);
border-radius: 50%;
}
.trust-anchor__seal-mark i:nth-child(2) {
border-color: var(--green);
transform: translate(7px, -5px);
}
.trust-anchor__seal-mark i:nth-child(3) {
border-color: var(--yellow);
transform: translate(-7px, -5px);
}
.trust-anchor__seal p {
margin: 0;
color: #71868e;
font-size: 0.64rem;
line-height: 1.5;
}
.trust-anchor__seal strong {
display: block;
color: var(--ink);
font-size: 0.68rem;
}
.trust-pillars {
display: grid;
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 34px;
background: rgba(255, 255, 255, 0.055);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
list-style: none;
backdrop-filter: blur(14px);
}
.trust-pillar {
display: grid;
grid-template-columns: 50px 1fr 58px;
gap: 20px;
align-items: center;
min-height: 190px;
padding: 28px 30px;
transition: background 300ms ease;
}
.trust-pillar + .trust-pillar {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.trust-pillar:hover {
background: rgba(255, 255, 255, 0.045);
}
.trust-pillar__number {
align-self: start;
padding-top: 7px;
color: rgba(133, 216, 250, 0.82);
font-family: "Manrope", sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
}
.trust-pillar__label {
margin-bottom: 8px;
color: var(--green);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.trust-pillar h3 {
margin: 0 0 8px;
color: #fff;
font-family: "Manrope", sans-serif;
font-size: clamp(1.45rem, 2vw, 1.9rem);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1.05;
}
.trust-pillar__content > p:last-child {
max-width: 510px;
margin-bottom: 0;
color: rgba(231, 243, 247, 0.65);
font-size: 0.81rem;
line-height: 1.65;
}
.trust-pillar__icon {
display: grid;
width: 54px;
height: 54px;
place-items: center;
border: 1px solid rgba(7, 167, 236, 0.24);
border-radius: 17px;
color: #74d5fa;
background: rgba(7, 167, 236, 0.08);
}
.trust-pillar__icon svg {
width: 24px;
height: 24px;
}
.trust-pillar__icon--green {
color: #b3e651;
border-color: rgba(144, 210, 8, 0.24);
background: rgba(144, 210, 8, 0.08);
}
.trust-pillar__icon--yellow {
color: #ffe85f;
border-color: rgba(249, 222, 16, 0.24);
background: rgba(249, 222, 16, 0.075);
}
.trust-closing {
display: grid;
grid-template-columns: auto minmax(0, 610px) 1fr;
gap: 23px;
align-items: center;
margin-top: 42px;
color: rgba(229, 243, 247, 0.64);
}
.trust-closing > span {
color: #83d9fa;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.trust-closing p {
margin: 0;
font-size: 0.75rem;
line-height: 1.6;
}
.trust-closing i {
height: 1px;
background: linear-gradient(90deg, rgba(131, 217, 250, 0.5), transparent);
}
.has-scroll-reveal .trust-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 850ms var(--ease), transform 850ms var(--ease);
}
.has-scroll-reveal .trust-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.cie-section {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 128px 0 116px;
background:
radial-gradient(circle at 78% 20%, rgba(7, 167, 236, 0.08), transparent 26%),
linear-gradient(180deg, #fbfdfd 0%, var(--canvas) 100%);
}
.cie-grid {
position: absolute;
z-index: -3;
inset: 0;
opacity: 0.48;
background-image:
linear-gradient(rgba(2, 64, 90, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(2, 64, 90, 0.045) 1px, transparent 1px);
background-size: 84px 84px;
mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 86%, transparent);
}
.cie-nexo {
position: absolute;
z-index: -2;
border-style: solid;
border-radius: 48% 52% 46% 54%;
pointer-events: none;
}
.cie-nexo--sky {
top: 220px;
right: -340px;
width: 760px;
height: 620px;
border-width: 78px;
border-color: rgba(7, 167, 236, 0.09);
transform: rotate(22deg);
}
.cie-nexo--yellow {
bottom: -360px;
left: -260px;
width: 680px;
height: 610px;
border-width: 62px;
border-color: rgba(249, 222, 16, 0.08);
transform: rotate(-28deg);
}
.cie-container {
position: relative;
z-index: 2;
}
.cie-heading {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
align-items: end;
margin-bottom: 62px;
}
.cie-heading__title {
grid-column: 1 / span 8;
}
.cie-eyebrow {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 23px;
color: var(--blue);
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.cie-eyebrow span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--yellow);
box-shadow: 0 0 0 7px rgba(249, 222, 16, 0.13);
}
.cie-heading h2 {
max-width: 900px;
margin-bottom: 0;
color: var(--text);
font-family: "Manrope", sans-serif;
font-size: clamp(3.5rem, 5vw, 5.25rem);
font-weight: 600;
letter-spacing: -0.06em;
line-height: 0.95;
}
.cie-heading__copy {
grid-column: 9 / -1;
padding: 4px 0 4px 36px;
border-left: 1px solid var(--border);
}
.cie-heading__copy > span {
display: block;
margin-bottom: 18px;
color: var(--sky);
font-family: "Manrope", sans-serif;
font-size: 0.77rem;
font-weight: 700;
letter-spacing: 0.12em;
}
.cie-heading__copy p {
margin-bottom: 0;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.75;
}
.cie-showcase {
position: relative;
display: grid;
grid-template-columns: 7fr 5fr;
gap: 18px;
}
.cie-format {
position: relative;
display: grid;
min-height: 680px;
overflow: hidden;
grid-template-rows: auto minmax(360px, 1fr) auto;
padding: 29px 30px 31px;
border: 1px solid rgba(220, 232, 235, 0.96);
border-radius: 35px;
box-shadow: 0 28px 70px rgba(2, 64, 90, 0.09);
}
.cie-format--physical {
background:
radial-gradient(circle at 86% 15%, rgba(7, 167, 236, 0.13), transparent 28%),
linear-gradient(145deg, #fff 0%, #eef8fc 100%);
}
.cie-format--digital {
background:
radial-gradient(circle at 20% 78%, rgba(144, 210, 8, 0.12), transparent 28%),
linear-gradient(150deg, #fff 0%, #f6faed 100%);
}
.cie-format__topline {
position: relative;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20px;
border-bottom: 1px solid rgba(2, 64, 90, 0.1);
color: var(--blue);
font-size: 0.61rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.cie-format__topline p {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.cie-format__topline p span {
color: var(--sky);
}
.cie-format__topline > span {
padding: 6px 9px;
border: 1px solid rgba(2, 64, 90, 0.1);
border-radius: 999px;
color: #71878f;
background: rgba(255, 255, 255, 0.72);
font-size: 0.49rem;
}
.cie-format__visual {
position: relative;
z-index: 2;
display: grid;
min-width: 0;
margin: 0;
place-items: center;
}
.cie-format__halo {
position: absolute;
width: 350px;
height: 350px;
border: 1px solid rgba(7, 167, 236, 0.15);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 64%);
}
.cie-format__visual img {
position: relative;
z-index: 2;
height: auto;
}
.cie-format__visual--physical img {
width: min(92%, 670px);
border-radius: 24px;
box-shadow: 0 24px 42px rgba(2, 64, 90, 0.17);
transform: rotate(-1.5deg);
transition: transform 650ms var(--ease);
}
.cie-format--physical:hover .cie-format__visual img {
transform: rotate(0deg) translateY(-5px);
}
.cie-format__visual--digital img {
width: auto;
max-height: 445px;
filter: drop-shadow(0 25px 30px rgba(2, 64, 90, 0.16));
transform: translateY(8px);
transition: transform 650ms var(--ease);
}
.cie-format--digital:hover .cie-format__visual img {
transform: translateY(0) scale(1.015);
}
.cie-format__copy {
position: relative;
z-index: 4;
max-width: 520px;
padding-top: 24px;
border-top: 1px solid rgba(2, 64, 90, 0.1);
}
.cie-format__copy > p:first-child {
margin-bottom: 9px;
color: var(--blue);
font-size: 0.61rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.cie-format__copy h3 {
margin: 0 0 11px;
color: var(--ink);
font-family: "Manrope", sans-serif;
font-size: clamp(1.65rem, 2.35vw, 2.25rem);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1.03;
}
.cie-format__copy > p:last-child {
max-width: 470px;
margin-bottom: 0;
color: var(--muted);
font-size: 0.79rem;
line-height: 1.65;
}
.cie-connector {
position: absolute;
z-index: 8;
top: 45%;
left: calc(58.333% - 26px);
display: grid;
width: 68px;
height: 68px;
place-items: center;
border: 1px solid rgba(220, 232, 235, 0.92);
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 17px 34px rgba(2, 64, 90, 0.14);
backdrop-filter: blur(9px);
}
.cie-connector i {
position: absolute;
width: 24px;
height: 24px;
border: 2px solid var(--sky);
border-radius: 50%;
opacity: 0.72;
}
.cie-connector i:nth-child(2) {
border-color: var(--green);
transform: translate(7px, -5px);
}
.cie-connector i:nth-child(3) {
border-color: var(--yellow);
transform: translate(-7px, -5px);
}
.cie-connector span {
position: relative;
z-index: 2;
color: var(--ink);
font-size: 1rem;
font-weight: 800;
}
.cie-standard {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) minmax(280px, 430px);
gap: 22px;
align-items: center;
margin-top: 22px;
padding: 28px 30px;
border: 1px solid var(--border);
border-radius: 24px;
background: rgba(255, 255, 255, 0.74);
box-shadow: 0 18px 45px rgba(2, 64, 90, 0.055);
backdrop-filter: blur(10px);
}
.cie-standard__mark {
display: grid;
width: 54px;
height: 54px;
place-items: center;
border-radius: 17px;
color: var(--green);
background: var(--soft-green);
}
.cie-standard__mark svg {
width: 28px;
height: 28px;
}
.cie-standard > div:nth-child(2) > p {
margin-bottom: 7px;
color: var(--blue);
font-size: 0.59rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.cie-standard h3 {
margin: 0;
color: var(--ink);
font-family: "Manrope", sans-serif;
font-size: clamp(1.35rem, 1.8vw, 1.7rem);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.08;
}
.cie-standard__body {
margin: 0;
padding-left: 24px;
border-left: 1px solid var(--border);
color: var(--muted);
font-size: 0.76rem;
line-height: 1.65;
}
.has-scroll-reveal .cie-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 850ms var(--ease), transform 850ms var(--ease);
}
.has-scroll-reveal .cie-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.prototype-note {
position: fixed;
z-index: 500;
right: 24px;
bottom: 24px;
max-width: 330px;
padding: 14px 17px;
border: 1px solid var(--border);
border-radius: 14px;
color: var(--ink);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 16px 42px rgba(2, 64, 90, 0.15);
font-size: 0.75rem;
font-weight: 700;
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity 200ms ease, transform 300ms var(--ease);
}
.prototype-note.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal {
opacity: 0;
transform: translateY(24px);
animation: reveal-in 850ms var(--ease) forwards;
}
.reveal--1 { animation-delay: 250ms; }
.reveal--2 { animation-delay: 330ms; }
.reveal--3 { animation-delay: 400ms; }
.reveal--4 { animation-delay: 470ms; }
.reveal--5 { animation-delay: 540ms; }
.reveal--6 { animation-delay: 630ms; }
.reveal--7 { animation-delay: 710ms; }
.reveal--8 { animation-delay: 790ms; }
@keyframes header-in {
to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-in {
to { opacity: 1; transform: translateY(0); }
}
@keyframes line-draw {
to { transform: scaleX(1); }
}
@media (max-width: 1180px) {
.desktop-nav {
gap: 15px;
margin-left: 28px;
}
.desktop-nav a:nth-last-child(-n + 2) {
display: none;
}
.header-link {
display: none;
}
.hero-copy {
grid-column: 1 / span 7;
}
h1 {
font-size: clamp(3.45rem, 5.4vw, 4.6rem);
}
.hero-visual {
grid-column: 8 / -1;
}
.visual-stage {
left: 0;
}
.cie-composition {
width: 232px;
}
.visual-statement {
max-width: 190px;
}
.visual-statement h2 {
font-size: 2.15rem;
}
.floating-note--one {
left: 18px;
}
}
@media (max-width: 900px) {
.container {
width: min(calc(100% - 36px), 700px);
}
.site-header {
top: 12px;
padding-inline: 12px;
}
.header-surface,
.site-header.is-scrolled .header-surface {
height: 62px;
padding: 6px 7px 6px 14px;
border-radius: 19px;
}
.brand {
width: 112px;
}
.desktop-nav,
.header-actions {
display: none;
}
.menu-toggle {
display: grid;
width: 48px;
height: 48px;
margin-left: auto;
place-content: center;
gap: 6px;
border-radius: 15px;
color: #fff;
background: var(--ink);
cursor: pointer;
}
.menu-toggle span {
width: 19px;
height: 1.5px;
border-radius: 2px;
background: currentColor;
transition: transform 300ms var(--ease);
}
.menu-toggle[aria-expanded="true"] span:first-child {
transform: translateY(3.75px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:last-child {
transform: translateY(-3.75px) rotate(-45deg);
}
.mobile-menu {
position: absolute;
top: 71px;
right: 0;
left: 0;
display: block;
padding: 16px;
border: 1px solid var(--border);
border-radius: 20px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 22px 60px rgba(2, 64, 90, 0.16);
backdrop-filter: blur(18px);
}
.mobile-menu[hidden] {
display: none;
}
.mobile-menu nav {
display: grid;
}
.mobile-menu nav a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 49px;
padding-inline: 7px;
border-bottom: 1px solid #edf3f4;
color: var(--text);
font-size: 0.92rem;
font-weight: 700;
}
.mobile-menu nav small {
color: #82969d;
font-size: 0.59rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mobile-menu__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding-top: 14px;
}
.mobile-menu__actions .button {
padding-inline: 12px;
text-align: center;
}
.hero {
min-height: auto;
padding: 112px 0 74px;
}
.hero::before {
display: none;
}
.hero-layout {
display: block;
}
.hero-copy {
padding-top: 26px;
}
h1 {
max-width: 730px;
font-size: clamp(3.25rem, 9.2vw, 5rem);
}
.hero-lead {
max-width: 650px;
}
.hero-visual {
width: min(100%, 580px);
min-height: 650px;
margin: 58px auto 0;
}
.visual-stage {
inset: 0;
}
.scroll-cue {
display: none;
}
.trust {
padding: 94px 0 90px;
}
.trust-heading {
display: block;
margin-bottom: 46px;
}
.trust-heading__copy {
margin-top: 32px;
padding-left: 25px;
}
.trust-heading__copy p {
max-width: 580px;
}
.trust-board {
grid-template-columns: 1fr;
}
.trust-anchor {
min-height: 520px;
}
.trust-pillars {
margin-top: 2px;
}
.cie-section {
padding: 96px 0 90px;
}
.cie-heading {
display: block;
margin-bottom: 46px;
}
.cie-heading__copy {
margin-top: 32px;
padding-left: 25px;
}
.cie-showcase {
grid-template-columns: 1fr;
}
.cie-format {
min-height: 660px;
}
.cie-format__visual--physical img {
width: min(88%, 650px);
}
.cie-connector {
top: calc(50% - 28px);
left: 50%;
transform: translate(-50%, -50%);
}
.cie-standard {
grid-template-columns: 54px 1fr;
}
.cie-standard__body {
grid-column: 1 / -1;
padding: 20px 0 0;
border-top: 1px solid var(--border);
border-left: 0;
}
}
@media (max-width: 560px) {
html {
scroll-padding-top: 92px;
}
.container {
width: min(calc(100% - 28px), 520px);
}
.hero {
padding-top: 92px;
}
.hero-grid {
background-size: 48px 48px;
}
.hero-copy {
padding-top: 30px;
}
.eyebrow {
margin-bottom: 19px;
font-size: 0.61rem;
letter-spacing: 0.13em;
}
h1 {
margin-bottom: 23px;
font-size: clamp(2.72rem, 13.15vw, 3.75rem);
letter-spacing: -0.065em;
line-height: 0.96;
}
.title-line {
width: auto;
}
.title-line--accent::after {
bottom: 0;
height: 6px;
}
.hero-lead {
margin-bottom: 25px;
font-size: 0.96rem;
line-height: 1.7;
}
.hero-actions {
display: grid;
grid-template-columns: 1fr;
}
.button--hero {
width: 100%;
}
.commitments {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 10px;
margin-top: 28px;
padding-top: 20px;
}
.commitments li {
font-size: 0.65rem;
white-space: normal;
}
.commitments li:last-child {
grid-column: 1 / -1;
}
.hero-visual {
min-height: 680px;
margin-top: 44px;
}
.visual-stage {
border-radius: 27px;
}
.visual-topline {
margin: 23px 21px 0;
}
.visual-statement {
max-width: 290px;
padding: 23px 21px 0;
}
.visual-statement h2 {
font-size: 2rem;
}
.cie-composition {
right: 8px;
bottom: 90px;
width: 205px;
}
.floating-note {
min-height: 34px;
padding-inline: 11px;
font-size: 0.58rem;
}
.floating-note--one {
top: 255px;
left: 15px;
}
.floating-note--two {
right: 16px;
bottom: 130px;
}
.visual-footer {
right: 21px;
bottom: 20px;
left: 21px;
}
.visual-footer p {
max-width: 260px;
font-size: 0.59rem;
}
.mobile-menu__actions {
grid-template-columns: 1fr;
}
.prototype-note {
right: 14px;
bottom: 14px;
left: 14px;
max-width: none;
}
.trust {
padding: 78px 0 74px;
}
.trust-grid {
background-size: 48px 48px;
}
.trust h2 {
font-size: clamp(2.75rem, 13vw, 3.55rem);
}
.section-eyebrow {
font-size: 0.59rem;
letter-spacing: 0.12em;
}
.trust-heading__copy {
margin-top: 28px;
padding-left: 19px;
}
.trust-heading__copy p {
font-size: 0.86rem;
}
.trust-anchor {
min-height: 535px;
padding: 23px;
border-radius: 27px;
}
.trust-anchor__content {
padding-top: 54px;
}
.trust-anchor h3 {
font-size: 2.55rem;
}
.trust-pillars {
border-radius: 27px;
}
.trust-pillar {
grid-template-columns: 34px 1fr;
gap: 13px;
min-height: 0;
padding: 28px 23px;
}
.trust-pillar__icon {
grid-column: 2;
grid-row: 2;
width: 44px;
height: 44px;
margin-top: 14px;
border-radius: 14px;
}
.trust-pillar__icon svg {
width: 21px;
height: 21px;
}
.trust-pillar h3 {
font-size: 1.55rem;
}
.trust-closing {
grid-template-columns: 1fr;
gap: 13px;
margin-top: 34px;
}
.trust-closing i {
width: 100%;
}
.cie-section {
padding: 78px 0 74px;
}
.cie-grid {
background-size: 48px 48px;
}
.cie-heading h2 {
font-size: clamp(2.75rem, 13vw, 3.55rem);
}
.cie-eyebrow {
font-size: 0.59rem;
letter-spacing: 0.12em;
}
.cie-heading__copy {
margin-top: 28px;
padding-left: 19px;
}
.cie-heading__copy p {
font-size: 0.86rem;
}
.cie-format {
min-height: 590px;
grid-template-rows: auto minmax(290px, 1fr) auto;
padding: 23px;
border-radius: 27px;
}
.cie-format--digital {
min-height: 665px;
grid-template-rows: auto minmax(385px, 1fr) auto;
}
.cie-format__topline {
align-items: flex-start;
gap: 10px;
}
.cie-format__topline > span {
max-width: 95px;
text-align: center;
}
.cie-format__visual--physical img {
width: 94%;
border-radius: 16px;
}
.cie-format__visual--digital img {
max-height: 390px;
}
.cie-format__copy h3 {
font-size: 1.75rem;
}
.cie-connector {
width: 58px;
height: 58px;
}
.cie-standard {
grid-template-columns: 46px 1fr;
gap: 16px;
padding: 22px;
border-radius: 20px;
}
.cie-standard__mark {
width: 46px;
height: 46px;
border-radius: 14px;
}
.cie-standard h3 {
font-size: 1.3rem;
}
}
.hero {
min-height: auto;
padding: 126px 0 48px;
background:
radial-gradient(circle at 10% 28%, rgba(7, 167, 236, 0.09), transparent 25%),
radial-gradient(circle at 88% 78%, rgba(144, 210, 8, 0.08), transparent 24%),
var(--canvas);
}
.hero::before {
display: none;
}
.hero-grid {
opacity: 0.32;
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.65) 62%, transparent 100%);
}
.hero-banner {
--mx: 0px;
--my: 0px;
position: relative;
display: flex;
align-items: center;
min-height: clamp(480px, calc(100svh - 210px), 620px);
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.68);
border-radius: 40px;
color: #fff;
background: var(--ink);
box-shadow: 0 34px 90px rgba(2, 64, 90, 0.18), inset 0 0 0 1px rgba(2, 64, 90, 0.12);
}
.hero-banner::before {
position: absolute;
z-index: 2;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: inherit;
content: "";
pointer-events: none;
}
.hero-banner__media {
position: absolute;
z-index: 0;
inset: -14px;
width: calc(100% + 28px);
max-width: none;
height: calc(100% + 28px);
object-fit: cover;
object-position: center;
transform: translate3d(calc(var(--mx) * -0.22), calc(var(--my) * -0.16), 0) scale(1.035);
transition: transform 700ms var(--ease);
}
.hero-banner__shade {
position: absolute;
z-index: 1;
inset: 0;
background:
linear-gradient(90deg, rgba(2, 30, 42, 0.97) 0%, rgba(2, 39, 53, 0.87) 36%, rgba(2, 41, 53, 0.34) 63%, rgba(2, 30, 42, 0.06) 82%),
linear-gradient(0deg, rgba(1, 29, 40, 0.83) 0%, transparent 36%),
linear-gradient(180deg, rgba(2, 41, 53, 0.24), transparent 30%);
}
.hero-banner__content {
position: relative;
z-index: 4;
width: min(58%, 750px);
margin-left: clamp(34px, 5vw, 76px);
padding-block: 64px;
}
.hero-kicker {
display: inline-flex;
align-items: center;
gap: 11px;
margin: 0 0 20px;
color: rgba(255, 255, 255, 0.76);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.17em;
text-transform: uppercase;
}
.hero-kicker > span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 7px rgba(144, 210, 8, 0.14);
}
.hero .hero-banner h1 {
max-width: 760px;
margin-bottom: 27px;
color: #fff;
font-size: clamp(2.8rem, 4.4vw, 4.3rem);
font-weight: 500;
letter-spacing: -0.058em;
line-height: 1.04;
text-wrap: balance;
}
.hero-title__line {
display: block;
width: fit-content;
}
.hero-title__line--accent {
position: relative;
z-index: 1;
margin-top: 4px;
color: #9bddf8;
font-size: inherit;
letter-spacing: inherit;
line-height: inherit;
}
.hero-title__line--accent::after {
position: absolute;
z-index: -1;
right: 0;
bottom: -7px;
left: 1px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--sky), var(--green) 62%, var(--yellow));
content: "";
opacity: 0.9;
transform: scaleX(0);
transform-origin: left;
animation: line-draw 900ms 1.05s var(--ease) forwards;
}
.hero-banner .hero-lead {
max-width: 42ch;
margin-bottom: 27px;
color: rgba(234, 245, 248, 0.9);
font-size: 1rem;
line-height: 1.6;
}
.hero-banner .hero-actions {
gap: 10px;
}
.hero-banner .button--hero {
min-height: 54px;
padding-inline: 23px;
border-radius: 999px;
font-size: 0.94rem;
}
.button--light {
color: var(--ink);
background: #fff;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.button--light:hover {
color: var(--blue);
background: var(--soft-blue);
box-shadow: 0 19px 42px rgba(0, 0, 0, 0.24);
}
.button--glass {
color: #fff;
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.09);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
}
.button--glass:hover {
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.16);
}
.uges-orbits {
position: absolute;
z-index: 4;
top: 38px;
right: 42px;
width: 166px;
height: 166px;
transform: translate3d(calc(var(--mx) * 0.34), calc(var(--my) * 0.34), 0);
transition: transform 650ms var(--ease);
}
.uges-orbits__ring,
.uges-orbits__core {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.uges-orbits__ring {
border: 2px solid rgba(255, 255, 255, 0.28);
}
.uges-orbits__ring--one {
width: 100%;
height: 100%;
border-top-color: var(--sky);
border-right-color: transparent;
animation: uges-orbit-spin 16s linear infinite;
}
.uges-orbits__ring--two {
width: 72%;
height: 72%;
border-bottom-color: var(--green);
border-left-color: transparent;
animation: uges-orbit-spin-reverse 12s linear infinite;
}
.uges-orbits__ring--three {
width: 45%;
height: 45%;
border-top-color: var(--yellow);
border-bottom-color: transparent;
animation: uges-orbit-spin 9s linear infinite;
}
.uges-orbits__core {
display: flex;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
gap: 3px;
border: 1px solid rgba(255, 255, 255, 0.24);
background: rgba(2, 64, 90, 0.38);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.17);
backdrop-filter: blur(10px);
}
.uges-orbits__core i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--sky);
}
.uges-orbits__core i:nth-child(2) {
background: var(--green);
}
.uges-orbits__core i:nth-child(3) {
background: var(--yellow);
}
@keyframes uges-orbit-spin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes uges-orbit-spin-reverse {
from { transform: translate(-50%, -50%) rotate(360deg); }
to { transform: translate(-50%, -50%) rotate(0deg); }
}
@media (max-width: 900px) {
.hero {
padding: 102px 0 30px;
}
.hero-banner {
align-items: flex-end;
min-height: 580px;
border-radius: 32px;
}
.hero-banner__media {
object-position: 62% center;
}
.hero-banner__shade {
background:
linear-gradient(90deg, rgba(2, 31, 42, 0.95) 0%, rgba(2, 39, 52, 0.72) 58%, rgba(2, 32, 42, 0.18) 100%),
linear-gradient(0deg, rgba(1, 27, 37, 0.93) 0%, rgba(1, 31, 43, 0.55) 60%, rgba(1, 30, 41, 0.16) 100%);
}
.hero-banner__content {
width: auto;
margin: 0;
padding: 180px 36px 44px;
}
.hero .hero-banner h1 {
max-width: 650px;
font-size: clamp(2.85rem, 7.7vw, 4.15rem);
}
}
@media (max-width: 560px) {
.container {
width: min(calc(100% - 20px), 520px);
}
.hero {
padding: 88px 0 18px;
}
.hero-grid {
background-size: 44px 44px;
}
.hero-banner {
min-height: clamp(500px, calc(100svh - 160px), 580px);
border-radius: 27px;
}
.hero-banner__media {
object-position: 61% center;
}
.hero-banner__shade {
background:
linear-gradient(90deg, rgba(2, 31, 42, 0.4), rgba(2, 39, 52, 0.16)),
linear-gradient(0deg, rgba(1, 25, 35, 0.98) 0%, rgba(1, 31, 43, 0.88) 42%, rgba(1, 30, 41, 0.16) 100%);
}
.hero-banner__content {
padding: 172px 22px 30px;
}
.hero-kicker {
margin-bottom: 18px;
font-size: 0.625rem;
letter-spacing: 0.13em;
}
.hero .hero-banner h1 {
margin-bottom: 24px;
font-size: clamp(2rem, 9.5vw, 2.65rem);
letter-spacing: -0.052em;
line-height: 1.06;
}
.hero-title__line {
width: auto;
}
.hero-title__line--accent {
margin-top: 4px;
}
.hero-title__line--accent::after {
bottom: -5px;
height: 2px;
}
.hero-banner .hero-lead {
margin-bottom: 24px;
}
.hero-banner .hero-actions {
display: flex;
}
.hero-banner .button--hero {
width: 100%;
min-height: 54px;
padding-inline: 22px;
}
.uges-orbits {
top: 22px;
right: 18px;
width: 88px;
height: 88px;
}
.uges-orbits__ring {
border-width: 1.5px;
}
.uges-orbits__core {
width: 31px;
height: 31px;
}
.uges-orbits__core i {
width: 4px;
height: 4px;
}
}
@media (max-width: 370px) {
.hero-banner__content {
padding-top: 138px;
padding-bottom: 26px;
}
.hero .hero-banner h1 {
font-size: 2rem;
}
}
.cards-section {
position: relative;
overflow: hidden;
padding: 80px 0;
background:
radial-gradient(circle at 92% 13%, rgba(144, 210, 8, 0.06), transparent 24%),
radial-gradient(circle at 8% 78%, rgba(7, 167, 236, 0.07), transparent 26%),
#fff;
}
.cards-grid {
position: absolute;
inset: 0;
opacity: 0.24;
background-image:
linear-gradient(rgba(2, 64, 90, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(2, 64, 90, 0.04) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.cards-container {
position: relative;
z-index: 2;
}
.cards-nexo {
position: absolute;
width: 420px;
height: 310px;
border: 35px solid rgba(7, 167, 236, 0.06);
border-radius: 44% 56% 61% 39% / 45% 38% 62% 55%;
pointer-events: none;
}
.cards-nexo--sky {
top: -170px;
left: -150px;
transform: rotate(24deg);
}
.cards-nexo--green {
right: -220px;
bottom: 120px;
border-color: rgba(144, 210, 8, 0.06);
transform: rotate(-22deg);
}
.cards-heading {
margin-bottom: 32px;
}
.cards-heading h2 {
margin: 0;
color: var(--text);
font-family: "Manrope", sans-serif;
font-size: clamp(2.4rem, 4vw, 3.6rem);
font-weight: 500;
letter-spacing: -0.05em;
line-height: 1.08;
text-wrap: balance;
}
.cards-showcase {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.student-card {
position: relative;
display: grid;
min-width: 0;
grid-template-rows: auto 320px auto;
gap: 20px;
overflow: hidden;
padding: 28px;
border: 1px solid var(--border);
border-radius: 34px;
box-shadow: 0 18px 54px rgba(2, 64, 90, 0.07);
transition: transform 450ms var(--ease), box-shadow 450ms var(--ease);
}
.student-card:hover {
transform: translateY(-4px);
box-shadow: 0 28px 68px rgba(2, 64, 90, 0.12);
}
.student-card::before {
position: absolute;
width: 390px;
height: 290px;
border: 28px solid rgba(7, 167, 236, 0.08);
border-radius: 43% 57% 61% 39% / 42% 38% 62% 58%;
content: "";
pointer-events: none;
}
.student-card--bundle {
background:
radial-gradient(circle at 18% 38%, rgba(7, 167, 236, 0.1), transparent 28%),
linear-gradient(145deg, #fff 10%, var(--soft-blue) 56%, #f8fce9);
}
.student-card--bundle::before {
top: 55px;
right: -155px;
transform: rotate(-18deg);
}
.student-card--digital {
color: #fff;
border-color: rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at 74% 26%, rgba(7, 167, 236, 0.2), transparent 29%),
radial-gradient(circle at 30% 68%, rgba(144, 210, 8, 0.07), transparent 24%),
#071b24;
box-shadow: 0 24px 64px rgba(2, 42, 57, 0.18);
}
.student-card--digital::before {
top: 84px;
left: -210px;
border-color: rgba(144, 210, 8, 0.08);
transform: rotate(16deg);
}
.student-card__topline {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 16px;
color: var(--ink);
}
.student-card__topline h3 {
margin: 0;
font-family: "Manrope", sans-serif;
font-size: clamp(1.45rem, 2.2vw, 1.9rem);
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1.15;
}
.student-card__price {
margin: 0;
white-space: nowrap;
}
.student-card__price strong {
font-family: "Manrope", sans-serif;
font-size: clamp(1.65rem, 2.4vw, 2.1rem);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1.1;
}
.student-card--digital .student-card__topline {
color: #fff;
}
.student-card__visual {
position: relative;
z-index: 2;
display: grid;
min-width: 0;
min-height: 0;
margin: 0;
place-items: center;
}
.student-card__halo {
position: absolute;
top: 50%;
left: 50%;
width: 76%;
aspect-ratio: 1.45;
border: 1px solid rgba(7, 167, 236, 0.14);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(7, 167, 236, 0.06) 58%, transparent 60%);
transform: translate(-50%, -50%);
}
.student-card--digital .student-card__halo {
width: 70%;
aspect-ratio: 1;
border-color: rgba(7, 167, 236, 0.18);
background: radial-gradient(circle, rgba(7, 167, 236, 0.12), transparent 64%);
}
.student-card__visual img {
position: relative;
z-index: 2;
width: auto;
height: 100%;
max-height: 320px;
object-fit: contain;
transition: transform 600ms var(--ease), filter 600ms var(--ease);
}
.student-card__visual--bundle img {
filter: drop-shadow(0 20px 20px rgba(2, 64, 90, 0.2));
}
.student-card__visual--digital img {
filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.3));
transform: rotate(1.5deg);
}
.student-card--bundle:hover .student-card__visual img,
.student-card--digital:hover .student-card__visual img {
transform: translateY(-3px) scale(1.02);
}
.student-card__content {
position: relative;
z-index: 3;
display: grid;
gap: 18px;
align-content: end;
}
.student-card__description {
margin: 0;
color: var(--muted);
font-size: 1rem;
line-height: 1.5;
}
.student-card--digital .student-card__description {
color: #bdcdd4;
}
.student-card__button {
width: 100%;
min-height: 52px;
padding-inline: 20px;
border-radius: 999px;
color: #fff;
background: linear-gradient(110deg, var(--ink), var(--blue));
box-shadow: 0 13px 28px rgba(2, 64, 90, 0.18);
font-size: 0.94rem;
}
.student-card--digital .student-card__button {
color: var(--ink);
background: #fff;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}
.student-card__button:hover svg {
transform: translateX(3px);
}
.student-card__button svg {
flex-shrink: 0;
transition: transform 260ms var(--ease);
}
.cards-image-note {
margin: 18px 0 0;
color: var(--muted);
font-size: 0.75rem;
line-height: 1.5;
text-align: center;
}
@media (max-width: 900px) {
.cards-section {
padding: 64px 0;
}
.student-card {
grid-template-rows: auto 260px auto;
gap: 18px;
padding: 22px;
}
.student-card__visual img {
max-height: 260px;
}
}
@media (max-width: 680px) {
.cards-showcase {
grid-template-columns: 1fr;
gap: 16px;
}
}
@media (max-width: 560px) {
.cards-section {
padding: 52px 0;
}
.cards-grid {
background-size: 44px 44px;
}
.cards-heading {
margin-bottom: 24px;
padding-inline: 10px;
}
.cards-heading h2 {
font-size: clamp(2rem, 8.5vw, 2.65rem);
}
.student-card {
grid-template-rows: auto 230px auto;
gap: 18px;
padding: 22px 20px;
border-radius: 27px;
}
.student-card__topline {
column-gap: 12px;
}
.student-card__topline h3 {
font-size: clamp(1.25rem, 5.5vw, 1.5rem);
}
.student-card__price strong {
font-size: clamp(1.6rem, 7vw, 1.85rem);
}
.student-card__visual img {
max-height: 230px;
}
.student-card__content {
gap: 16px;
}
}
.eligibility {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 80px 0;
background:
radial-gradient(circle at 10% 22%, rgba(144, 210, 8, 0.07), transparent 24%),
radial-gradient(circle at 91% 72%, rgba(7, 167, 236, 0.07), transparent 26%),
linear-gradient(180deg, #f7fbf4 0%, #eef8fb 100%);
}
.eligibility-grid {
position: absolute;
z-index: -3;
inset: 0;
opacity: 0.24;
background-image:
linear-gradient(rgba(2, 64, 90, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(2, 64, 90, 0.045) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 86%, transparent);
}
.eligibility-orbit {
position: absolute;
z-index: -2;
width: 460px;
height: 350px;
border: 36px solid rgba(7, 167, 236, 0.06);
border-radius: 45% 55% 61% 39% / 48% 40% 60% 52%;
pointer-events: none;
}
.eligibility-orbit--sky {
top: -250px;
right: -140px;
transform: rotate(22deg);
}
.eligibility-orbit--green {
bottom: -270px;
left: -190px;
border-color: rgba(144, 210, 8, 0.07);
transform: rotate(-28deg);
}
.eligibility-container {
position: relative;
z-index: 2;
}
.eligibility-heading {
margin-bottom: 32px;
}
.eligibility-heading h2 {
margin: 0;
color: var(--text);
font-family: "Manrope", sans-serif;
font-size: clamp(2.4rem, 4vw, 3.6rem);
font-weight: 500;
letter-spacing: -0.05em;
line-height: 1.08;
text-wrap: balance;
}
.eligibility-heading p {
max-width: 650px;
margin: 16px 0 0;
color: var(--muted);
font-size: 1rem;
line-height: 1.6;
}
.eligibility-modalities {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.eligibility-modalities li {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
min-width: 0;
min-height: 96px;
padding: 20px;
border: 1px solid rgba(2, 64, 90, 0.1);
border-radius: 20px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 8px 24px rgba(2, 64, 90, 0.035);
}
.eligibility-modality__name {
color: var(--ink);
font-family: "Manrope", sans-serif;
font-size: 1.15rem;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.25;
}
.eligibility-modality__detail {
color: var(--muted);
font-size: 0.85rem;
line-height: 1.4;
}
.eligibility-note {
max-width: 760px;
margin: 24px 0 0;
padding-left: 16px;
border-left: 2px solid var(--green);
color: var(--muted);
font-size: 0.94rem;
line-height: 1.6;
}
.eligibility-note strong {
color: var(--ink);
font-weight: 600;
}
.has-scroll-reveal .eligibility-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.has-scroll-reveal .eligibility-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 900px) {
.eligibility {
padding: 64px 0;
}
.eligibility-modalities {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.eligibility-modalities li {
min-height: 80px;
padding: 18px;
}
}
@media (max-width: 560px) {
.eligibility {
padding: 52px 0;
}
.eligibility-grid {
background-size: 44px 44px;
}
.eligibility-heading {
margin-bottom: 24px;
padding-inline: 10px;
}
.eligibility-heading h2 {
font-size: clamp(2rem, 8.5vw, 2.65rem);
}
.eligibility-heading p {
margin-top: 14px;
}
.eligibility-modalities {
gap: 10px;
}
.eligibility-modalities li {
min-height: 76px;
padding: 16px 12px;
border-radius: 17px;
}
.eligibility-modality__name {
font-size: 1rem;
line-height: 1.3;
}
.eligibility-modality__detail {
font-size: 0.8125rem;
}
.eligibility-note {
margin: 22px 10px 0;
padding-left: 12px;
}
}
.about {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 80px 0;
color: #fff;
background:
radial-gradient(circle at 84% 18%, rgba(7, 167, 236, 0.18), transparent 28%),
radial-gradient(circle at 9% 90%, rgba(144, 210, 8, 0.08), transparent 25%),
linear-gradient(145deg, #062b3a 0%, var(--ink) 52%, #032f42 100%);
}
.about-grid {
position: absolute;
z-index: -3;
inset: 0;
opacity: 0.22;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 87%, transparent);
}
.about-orbit {
position: absolute;
z-index: -2;
width: 520px;
height: 410px;
border: 44px solid rgba(7, 167, 236, 0.09);
border-radius: 46% 54% 59% 41% / 44% 39% 61% 56%;
pointer-events: none;
}
.about-orbit--sky {
top: -290px;
right: -170px;
transform: rotate(24deg);
}
.about-orbit--green {
bottom: -320px;
left: -220px;
border-color: rgba(144, 210, 8, 0.07);
transform: rotate(-24deg);
}
.about-container {
position: relative;
z-index: 2;
}
.about-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 7vw, 100px);
align-items: start;
}
.about-heading h2 {
margin: 0;
color: #fff;
font-family: "Manrope", sans-serif;
font-size: clamp(2.4rem, 4vw, 3.6rem);
font-weight: 500;
letter-spacing: -0.05em;
line-height: 1.08;
text-wrap: balance;
}
.about-heading p {
max-width: 550px;
margin: 20px 0 0;
color: #c7dce4;
font-size: 1.0625rem;
line-height: 1.65;
}
.about-heading strong {
color: #fff;
font-weight: 600;
}
.about-principles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 32px;
margin: 0;
}
.about-principles > div {
min-width: 0;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.about-principles dt {
color: #9bddf8;
font-family: "Manrope", sans-serif;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.2;
}
.about-principles dd {
max-width: 250px;
margin: 8px 0 0;
color: #c7dce4;
font-size: 0.94rem;
line-height: 1.5;
}
.has-scroll-reveal .about-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.has-scroll-reveal .about-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 900px) {
.about {
padding: 64px 0;
}
.about-layout {
grid-template-columns: 1fr;
gap: 36px;
}
.about-heading p {
max-width: 650px;
}
}
@media (max-width: 560px) {
.about {
padding: 52px 0;
}
.about-grid {
background-size: 44px 44px;
}
.about-layout {
gap: 30px;
padding-inline: 10px;
}
.about-heading h2 {
font-size: clamp(2rem, 8.5vw, 2.65rem);
}
.about-heading p {
margin-top: 16px;
font-size: 1rem;
}
.about-principles {
gap: 24px;
}
.about-principles dt {
font-size: 1.3rem;
}
}
.faq {
position: relative;
isolation: isolate;
overflow: clip;
padding: 80px 0;
background:
radial-gradient(circle at 7% 18%, rgba(249, 222, 16, 0.06), transparent 23%),
radial-gradient(circle at 92% 78%, rgba(7, 167, 236, 0.07), transparent 27%),
linear-gradient(180deg, #fbfdfd 0%, #f3f9fa 100%);
}
.faq-grid {
position: absolute;
z-index: -3;
inset: 0;
opacity: 0.22;
background-image:
linear-gradient(rgba(2, 64, 90, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(2, 64, 90, 0.045) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 87%, transparent);
}
.faq-orbit {
position: absolute;
z-index: -2;
width: 470px;
height: 350px;
border: 36px solid rgba(7, 167, 236, 0.06);
border-radius: 46% 54% 61% 39% / 44% 39% 61% 56%;
pointer-events: none;
}
.faq-orbit--sky {
top: -250px;
right: -170px;
transform: rotate(22deg);
}
.faq-orbit--yellow {
bottom: -270px;
left: -180px;
border-color: rgba(249, 222, 16, 0.07);
transform: rotate(-25deg);
}
.faq-container {
position: relative;
z-index: 2;
}
.faq-layout {
max-width: 1000px;
margin-inline: auto;
}
.faq-heading {
margin-bottom: 32px;
}
.faq-heading h2 {
margin: 0;
color: var(--text);
font-family: "Manrope", sans-serif;
font-size: clamp(2.4rem, 4vw, 3.6rem);
font-weight: 500;
letter-spacing: -0.05em;
line-height: 1.08;
text-wrap: balance;
}
.faq-accordion {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 28px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 50px rgba(2, 64, 90, 0.06);
}
.faq-item + .faq-item {
border-top: 1px solid var(--border);
}
.faq-item summary {
display: grid;
min-height: 78px;
grid-template-columns: minmax(0, 1fr) 34px;
gap: 20px;
align-items: center;
padding: 20px 26px;
color: var(--ink);
cursor: pointer;
list-style: none;
transition: background 200ms ease;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:hover {
background: rgba(7, 167, 236, 0.035);
}
.faq-item summary:focus-visible {
outline: 3px solid var(--blue);
outline-offset: -4px;
border-radius: 12px;
}
.faq-item__question {
min-width: 0;
font-family: "Manrope", sans-serif;
font-size: clamp(1.2rem, 1.6vw, 1.4rem);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.25;
}
.faq-item__toggle {
position: relative;
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid rgba(2, 64, 90, 0.1);
border-radius: 50%;
color: var(--blue);
background: var(--soft-blue);
transition: color 200ms ease, background 200ms ease;
}
.faq-item__toggle i {
position: absolute;
width: 11px;
height: 1.5px;
border-radius: 2px;
background: currentColor;
}
.faq-item__toggle i:last-child {
transform: rotate(90deg);
transition: transform 250ms var(--ease);
}
.faq-item[open] .faq-item__toggle {
color: #5f8e00;
background: var(--soft-green);
}
.faq-item[open] .faq-item__toggle i:last-child {
transform: rotate(0deg);
}
.faq-item__answer {
padding: 0 80px 24px 26px;
}
.faq-item__answer p,
.faq-item__answer ol,
.faq-item__answer ul {
max-width: 68ch;
margin: 0;
color: var(--muted);
font-size: 1rem;
line-height: 1.6;
}
.faq-item__answer ol,
.faq-item__answer ul {
padding-left: 1.25em;
}
.faq-item__answer li + li {
margin-top: 8px;
}
.faq-item__answer p + ul {
margin-top: 12px;
}
.faq-item__answer strong {
color: var(--ink);
font-weight: 600;
}
.faq-item__answer a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.faq-item__answer a:hover {
text-decoration-thickness: 2px;
}
.faq-item__answer a:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 3px;
border-radius: 4px;
}
.faq-item__answer .faq-modalities {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 28px;
}
.faq-modalities li + li {
margin-top: 0;
}
.faq-app-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.faq-app-links a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--soft-blue);
font-size: 0.9375rem;
font-weight: 600;
}
.has-scroll-reveal .faq-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.has-scroll-reveal .faq-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 900px) {
.faq {
padding: 64px 0;
}
}
@media (max-width: 560px) {
.faq {
padding: 52px 0;
}
.faq-grid {
background-size: 44px 44px;
}
.faq-heading {
margin-bottom: 24px;
padding-inline: 10px;
}
.faq-heading h2 {
font-size: clamp(2rem, 8.5vw, 2.65rem);
}
.faq-accordion {
border-radius: 24px;
}
.faq-item summary {
min-height: 72px;
grid-template-columns: minmax(0, 1fr) 30px;
gap: 14px;
padding: 18px;
}
.faq-item__question {
font-size: 1.125rem;
line-height: 1.3;
}
.faq-item__toggle {
width: 30px;
height: 30px;
}
.faq-item__answer {
padding: 0 18px 20px;
}
.faq-item__answer .faq-modalities {
grid-template-columns: minmax(0, 1fr);
}
}
.closing {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 72px 0;
color: #fff;
background:
radial-gradient(circle at 83% 15%, rgba(7, 167, 236, 0.18), transparent 25%),
radial-gradient(circle at 9% 87%, rgba(144, 210, 8, 0.1), transparent 25%),
linear-gradient(145deg, #01364b 0%, #012c3d 48%, #021f2d 100%);
}
.closing-grid {
position: absolute;
z-index: -3;
inset: 0;
opacity: 0.22;
background-image:
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 74px 74px;
mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 88%, transparent);
}
.closing-orbits {
position: absolute;
z-index: -2;
top: -300px;
right: -245px;
width: 640px;
height: 640px;
pointer-events: none;
}
.closing-orbits span {
position: absolute;
inset: 0;
border: 1px solid rgba(130, 218, 252, 0.16);
border-radius: 46% 54% 59% 41% / 42% 38% 62% 58%;
transform: rotate(18deg);
}
.closing-orbits span:nth-child(2) {
inset: 72px;
border-color: rgba(144, 210, 8, 0.17);
transform: rotate(42deg);
}
.closing-orbits span:nth-child(3) {
inset: 150px;
border-color: rgba(249, 222, 16, 0.2);
transform: rotate(-14deg);
}
.closing-container {
position: relative;
z-index: 2;
}
.closing-layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
align-items: center;
gap: 48px;
}
.closing-intro h2 {
max-width: 650px;
margin: 0;
color: #fff;
font-family: "Manrope", sans-serif;
font-size: clamp(2.6rem, 4.5vw, 4rem);
font-weight: 500;
letter-spacing: -0.055em;
line-height: 1.04;
text-wrap: balance;
}
.closing-primary {
min-height: 54px;
margin-top: 26px;
padding-inline: 24px;
border-radius: 999px;
color: var(--ink);
background: #fff;
box-shadow: 0 14px 30px rgba(0, 15, 24, 0.18);
font-size: 0.94rem;
}
.closing-primary:hover {
background: var(--soft-blue);
}
.closing-primary svg {
flex-shrink: 0;
transition: transform 250ms var(--ease);
}
.closing-primary:hover svg {
transform: translateX(3px);
}
.closing-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
padding-left: 48px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.closing-contact h3 {
margin: 0 0 18px;
color: #c7dce4;
font-family: "Manrope", sans-serif;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.2;
}
.closing-contact__button {
min-height: 52px;
padding-inline: 22px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 999px;
color: #fff;
background: rgba(255, 255, 255, 0.07);
font-size: 0.94rem;
}
.closing-contact__button:hover {
border-color: #9bddf8;
background: rgba(255, 255, 255, 0.12);
}
.closing-contact__button svg {
flex-shrink: 0;
color: #b3e653;
}
.closing-contact__phone {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 6px;
color: #c7dce4;
font-size: 0.875rem;
line-height: 1.5;
}
.closing-contact__phone:hover {
color: #fff;
text-decoration: underline;
}
.has-scroll-reveal .closing-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.has-scroll-reveal .closing-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.site-footer {
color: var(--text);
background: #f2f7f8;
}
.footer-container {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
gap: 32px;
padding-block: 40px 32px;
}
.footer-brand > a {
display: block;
width: 154px;
max-width: 100%;
}
.footer-brand img {
width: 100%;
height: auto;
}
.footer-nav,
.footer-channels {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.footer-nav > p,
.footer-channels > p {
margin: 0 0 8px;
color: var(--muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.footer-nav a,
.footer-channels a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
max-width: 100%;
color: var(--ink);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.5;
transition: color 200ms ease;
}
.footer-nav a:hover,
.footer-channels a:hover {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 4px;
}
.footer-channels svg {
flex: 0 0 13px;
width: 13px;
height: 13px;
}
.footer-bottom {
padding-block: 20px 24px;
border-top: 1px solid #d5e2e5;
}
.footer-bottom p {
margin: 0;
color: var(--muted);
font-size: 0.75rem;
line-height: 1.5;
}
@media (max-width: 900px) {
.closing {
padding: 64px 0;
}
.closing-layout {
gap: 32px;
grid-template-columns: minmax(0, 1.2fr) minmax(240px, 1fr);
}
.closing-contact {
padding-left: 28px;
}
.footer-container {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
}
@media (max-width: 680px) {
.closing-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.closing-contact {
padding: 28px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-left: 0;
}
.footer-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 560px) {
.closing {
padding: 52px 0 40px;
}
.closing-grid {
background-size: 44px 44px;
}
.closing-orbits {
top: -210px;
right: -190px;
width: 430px;
height: 430px;
}
.closing-orbits span:nth-child(2) {
inset: 48px;
}
.closing-orbits span:nth-child(3) {
inset: 108px;
}
.closing-layout {
padding-inline: 10px;
}
.closing-intro h2 {
font-size: clamp(2rem, 9.5vw, 2.65rem);
line-height: 1.08;
}
.closing-primary {
width: 100%;
margin-top: 24px;
}
.closing-contact__button {
width: 100%;
}
.closing-contact__phone {
align-self: center;
}
.footer-container {
padding: 28px 10px 24px;
column-gap: 20px;
}
.footer-brand > a {
width: 136px;
}
.footer-bottom {
padding: 18px 10px 22px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero-visual,
.cie-composition {
transform: none !important;
}
.hero-banner__media,
.uges-orbits {
transform: none !important;
}
.uges-orbits__ring {
animation: none !important;
}
.has-scroll-reveal .trust-reveal {
opacity: 1;
transform: none;
transition: none;
}
.has-scroll-reveal .cie-reveal {
opacity: 1;
transform: none;
transition: none;
}
.has-scroll-reveal .eligibility-reveal {
opacity: 1;
transform: none;
transition: none;
}
.has-scroll-reveal .about-reveal {
opacity: 1;
transform: none;
transition: none;
}
.has-scroll-reveal .faq-reveal {
opacity: 1;
transform: none;
transition: none;
}
.has-scroll-reveal .closing-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
.typography-manrope,
.typography-manrope :is(
h1,
h2,
h3,
.student-card__price strong,
.eligibility-modality__name,
.about-principles dt,
.faq-item__question
) {
font-family: "Manrope", Arial, sans-serif;
}
.typography-manrope :is(
h1,
h2,
h3,
.eligibility-modality__name,
.about-principles dt,
.faq-item__question
) {
font-weight: 600;
}
@media (min-width: 901px) {
.hero--dne .hero-title__line--accent {
max-width: 14ch;
}
}
@media (max-width: 900px) {
.hero--dne .hero-banner__media {
height: 68%;
object-position: 68% 42%;
mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.hero--dne .hero-banner__shade {
background:
linear-gradient(90deg, rgba(2, 31, 42, 0.16), rgba(2, 39, 52, 0.04)),
linear-gradient(0deg, rgba(1, 25, 35, 0.98) 0%, rgba(1, 31, 43, 0.92) 35%, rgba(1, 30, 41, 0.05) 70%);
}
}
@media (max-width: 560px) {
.hero--dne .hero-banner__media {
height: 62%;
object-position: 64% 42%;
}
}