@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
--bg: #07070a;
--bg-soft: #0c0c11;
--card: #101016;
--text: #f5f5f7;
--muted: #9999a5;
--line: rgba(255,255,255,.09);
--accent: #ff2d9b;
--accent-2: #a855f7;
--white: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
background: var(--bg);
color: var(--text);
font-family: 'DM Sans', sans-serif;
overflow-x: hidden;
}

a {
color: inherit;
text-decoration: none;
}

.loader {
position: fixed;
inset: 0;
background: #050507;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 18px;
transition: .8s ease;
}

.loader.hide {
opacity: 0;
visibility: hidden;
}

.loader-logo {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border: 1px solid var(--accent);
color: var(--accent);
font-family: 'Space Grotesk';
font-weight: 700;
box-shadow: 0 0 35px rgba(255,45,155,.25);
}

.loader-line {
width: 120px;
height: 2px;
background: var(--accent);
animation: loading 1.3s infinite;
}

.loader span {
font-size: 10px;
letter-spacing: 4px;
color: #777780;
}

@keyframes loading {
0% { transform: scaleX(0); transform-origin: left; }
50% { transform: scaleX(1); transform-origin: left; }
51% { transform-origin: right; }
100% { transform: scaleX(0); transform-origin: right; }
}

.navbar {
height: 82px;
padding: 0 6%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
background: rgba(7,7,10,.7);
backdrop-filter: blur(18px);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}

.logo {
display: flex;
align-items: center;
gap: 11px;
font-family: 'Space Grotesk';
font-weight: 700;
letter-spacing: 1px;
}

.logo > span:last-child {
font-size: 14px;
}

.logo > span:last-child span {
color: var(--accent);
}

.logo-icon {
width: 34px;
height: 34px;
border: 1px solid var(--accent);
display: grid;
place-items: center;
color: var(--accent);
font-size: 11px;
box-shadow: 0 0 18px rgba(255,45,155,.2);
}

.nav-menu {
display: flex;
gap: 34px;
}

.nav-menu a {
color: #85858f;
font-size: 13px;
transition: .3s;
}

.nav-menu a:hover,
.nav-menu a.active {
color: var(--white);
}

.nav-button {
padding: 11px 18px;
border: 1px solid var(--line);
font-size: 12px;
transition: .3s;
}

.nav-button:hover {
border-color: var(--accent);
color: var(--accent);
}

.nav-button span {
color: var(--accent);
}

.menu-toggle {
display: none;
background: none;
border: 0;
width: 35px;
}

.menu-toggle span {
display: block;
height: 2px;
background: white;
margin: 6px 0;
}

.hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
padding: 120px 8% 80px;
overflow: hidden;
}

.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 70px 70px;
mask-image: linear-gradient(to bottom, black, transparent);
}

.hero-content {
position: relative;
z-index: 2;
width: 57%;
}

.hero-badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 13px;
border: 1px solid var(--line);
background: rgba(255,255,255,.025);
color: #aaaab5;
font-size: 11px;
letter-spacing: .7px;
margin-bottom: 25px;
}

.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #35e89a;
box-shadow: 0 0 10px #35e89a;
}

.hero h1 {
font-family: 'Space Grotesk';
font-size: clamp(58px, 8vw, 112px);
line-height: .91;
letter-spacing: -6px;
max-width: 850px;
}

.hero h1 span {
display: block;
color: transparent;
-webkit-text-stroke: 1px #777780;
}

.hero-content > p {
max-width: 570px;
color: var(--muted);
line-height: 1.8;
margin: 30px 0;
font-size: 15px;
}

.hero-buttons {
display: flex;
gap: 12px;
}

.btn-primary,
.btn-secondary {
padding: 14px 21px;
font-size: 12px;
transition: .3s;
}

.btn-primary {
background: var(--accent);
color: white;
box-shadow: 0 0 30px rgba(255,45,155,.18);
}

.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 0 40px rgba(255,45,155,.35);
}

.btn-primary span {
margin-left: 18px;
}

.btn-secondary {
border: 1px solid var(--line);
color: #aaaab5;
}

.btn-secondary:hover {
color: white;
border-color: #555560;
}

.hero-trust {
display: flex;
align-items: center;
gap: 12px;
margin-top: 55px;
color: #5d5d68;
font-size: 9px;
letter-spacing: 2px;
}

.trust-line {
width: 35px;
height: 1px;
background: var(--accent);
}

.hero-visual {
position: absolute;
right: 4%;
width: 42%;
height: 620px;
top: 50%;
transform: translateY(-50%);
}

.orb {
position: absolute;
width: 430px;
height: 430px;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
}

.orb-main {
background: radial-gradient(circle, rgba(255,45,155,.12), transparent 62%);
}

.orb-core {
width: 135px;
height: 135px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: 'Space Grotesk';
font-size: 38px;
font-weight: 700;
color: var(--accent);
border: 1px solid rgba(255,45,155,.5);
box-shadow: 0 0 80px rgba(255,45,155,.25);
background: rgba(255,45,155,.04);
}

.orb-ring {
position: absolute;
border: 1px solid rgba(255,45,155,.18);
border-radius: 50%;
}

.ring-one {
width: 220px;
height: 220px;
animation: rotate 9s linear infinite;
}

.ring-two {
width: 330px;
height: 330px;
border-color: rgba(168,85,247,.18);
animation: rotate 14s linear infinite reverse;
}

.ring-three {
width: 450px;
height: 450px;
border-style: dashed;
border-color: rgba(255,255,255,.08);
animation: rotate 20s linear infinite;
}

@keyframes rotate {
to { transform: rotate(360deg); }
}

.floating-card {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: rgba(12,12,17,.75);
border: 1px solid var(--line);
backdrop-filter: blur(12px);
font-size: 11px;
}

.floating-card strong {
display: block;
font-size: 11px;
}

.floating-card small {
color: #666672;
font-size: 9px;
}

.card-icon {
color: var(--accent);
font-size: 18px;
}

.card-one {
top: 18%;
left: 2%;
animation: float 4s ease-in-out infinite;
}

.card-two {
right: 1%;
top: 38%;
animation: float 5s ease-in-out infinite reverse;
}

.card-three {
bottom: 18%;
left: 14%;
animation: float 4.5s ease-in-out infinite;
}

@keyframes float {
50% { transform: translateY(-12px); }
}

.hero-glow {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
filter: blur(130px);
opacity: .1;
}

.glow-one {
background: var(--accent);
right: 8%;
top: 20%;
}

.glow-two {
background: var(--accent-2);
left: -15%;
bottom: -30%;
}

.scroll-indicator {
position: absolute;
bottom: 35px;
left: 8%;
display: flex;
align-items: center;
gap: 14px;
color: #555560;
font-size: 8px;
letter-spacing: 2px;
}

.scroll-line {
width: 50px;
height: 1px;
background: #33333b;
}

.stats {
display: grid;
grid-template-columns: repeat(4,1fr);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-soft);
}

.stat-item {
padding: 34px 8%;
border-right: 1px solid var(--line);
}

.stat-item:last-child {
border-right: 0;
}

.stat-item strong {
font-family: 'Space Grotesk';
font-size: 38px;
}

.stat-item span {
color: var(--accent);
font-weight: 700;
}

.stat-item p {
color: #666672;
font-size: 10px;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 1px;
}

.section {
padding: 140px 8%;
}

.section-label {
color: var(--accent);
font-size: 9px;
letter-spacing: 3px;
margin-bottom: 65px;
}

.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12%;
}

.about-title > span,
.section-heading span {
color: #777780;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
}

.about-title h2,
.section-heading h2 {
font-family: 'Space Grotesk';
font-size: clamp(38px, 5vw, 70px);
line-height: 1;
letter-spacing: -3px;
margin-top: 18px;
}

em {
color: var(--accent);
font-style: normal;
}

.about-text {
padding-top: 35px;
}

.about-text p {
color: var(--muted);
line-height: 1.9;
margin-bottom: 20px;
font-size: 14px;
}

.text-link {
display: inline-block;
margin-top: 15px;
padding-bottom: 8px;
border-bottom: 1px solid var(--accent);
font-size: 11px;
color: #ddd;
}

.text-link span {
color: var(--accent);
margin-left: 15px;
}

.services {
background: #09090d;
}

.section-heading {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 70px;
}

.section-heading > p {
width: 280px;
color: #777780;
font-size: 12px;
line-height: 1.8;
}

.service-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
}

.service-card {
min-height: 390px;
padding: 28px;
border: 1px solid var(--line);
position: relative;
transition: .4s;
}

.service-card:hover {
background: #111118;
border-color: rgba(255,45,155,.3);
transform: translateY(-8px);
}

.service-number {
color: #555560;
font-size: 10px;
}

.service-icon {
margin-top: 65px;
color: var(--accent);
font-size: 30px;
}

.service-card h3 {
font-family: 'Space Grotesk';
font-size: 20px;
margin: 20px 0 12px;
}

.service-card p {
color: #777780;
font-size: 12px;
line-height: 1.7;
}

.service-arrow {
position: absolute;
right: 25px;
bottom: 25px;
color: var(--accent);
}

.projects {
background: var(--bg);
}

.project-list {
display: flex;
flex-direction: column;
gap: 20px;
}

.project-card {
min-height: 330px;
display: grid;
grid-template-columns: 40% 60%;
border: 1px solid var(--line);
overflow: hidden;
}

.project-info {
padding: 45px;
display: flex;
flex-direction: column;
justify-content: center;
}

.project-info > span {
color: var(--accent);
font-size: 8px;
letter-spacing: 2px;
}

.project-info h3 {
font-family: 'Space Grotesk';
font-size: 38px;
margin: 15px 0 8px;
}

.project-info p {
color: #777780;
font-size: 12px;
}

.project-info a {
color: white;
font-size: 10px;
margin-top: 30px;
}

.project-visual {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
background:
radial-gradient(circle at center, rgba(255,45,155,.2), transparent 55%),
#101016;
}

.project-visual:before {
content: "";
position: absolute;
width: 300px;
height: 300px;
border: 1px solid rgba(255,45,155,.2);
border-radius: 50%;
}

.project-visual div {
position: relative;
font-family: 'Space Grotesk';
font-size: 32px;
letter-spacing: 4px;
}

.project-visual div span {
color: var(--accent);
}

.project-two {
background:
radial-gradient(circle at center, rgba(168,85,247,.22), transparent 55%),
#101016;
}

.project-three {
background:
radial-gradient(circle at center, rgba(255,45,155,.16), transparent 55%),
#101016;
}

.cta {
min-height: 650px;
display: grid;
place-items: center;
text-align: center;
position: relative;
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.cta-glow {
position: absolute;
width: 500px;
height: 500px;
background: var(--accent);
opacity: .08;
filter: blur(130px);
border-radius: 50%;
}

.cta-content {
position: relative;
z-index: 2;
}

.cta-content > span {
color: var(--accent);
font-size: 9px;
letter-spacing: 3px;
}

.cta h2 {
font-family: 'Space Grotesk';
font-size: clamp(48px, 7vw, 95px);
line-height: .95;
letter-spacing: -5px;
margin: 25px 0;
}

.cta p {
max-width: 500px;
margin: 0 auto 30px;
color: #777780;
font-size: 13px;
line-height: 1.8;
}

.footer {
padding: 70px 8% 25px;
background: #050507;
}

.footer-top {
display: flex;
justify-content: space-between;
padding-bottom: 70px;
}

.footer-brand {
max-width: 300px;
}

.footer-brand p {
color: #666672;
font-size: 12px;
line-height: 1.8;
margin-top: 20px;
}

.footer-links {
display: flex;
gap: 100px;
}

.footer-links div {
display: flex;
flex-direction: column;
gap: 12px;
}

.footer-links span {
color: #555560;
font-size: 9px;
letter-spacing: 2px;
margin-bottom: 8px;
}

.footer-links a {
color: #888892;
font-size: 11px;
transition: .3s;
}

.footer-links a:hover {
color: var(--accent);
}

.footer-bottom {
padding-top: 22px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
color: #44444d;
font-size: 9px;
}

.reveal {
opacity: 0;
transform: translateY(35px);
transition: opacity .8s ease, transform .8s ease;
}

.reveal.show {
opacity: 1;
transform: translateY(0);
}

@media (max-width: 1000px) {
.hero-content {
width: 65%;
}

.hero-visual {
    opacity: .5;
    right: -15%;
}

.service-grid {
    grid-template-columns: repeat(2,1fr);
}

}

@media (max-width: 700px) {
.navbar {
height: 70px;
padding: 0 5%;
}

.nav-menu,
.nav-button {
    display: none;
}

.menu-toggle {
    display: block;
}

.nav-menu.open {
    display: flex;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    padding: 25px;
    background: rgba(7,7,10,.97);
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid var(--line);
}

.hero {
    padding: 130px 6% 80px;
    min-height: 850px;
}

.hero-content {
    width: 100%;
}

.hero h1 {
    font-size: clamp(55px, 17vw, 90px);
    letter-spacing: -4px;
}

.hero-content > p {
    font-size: 13px;
}

.hero-visual {
    opacity: .18;
    width: 100%;
    right: -25%;
    top: 58%;
}

.orb {
    width: 340px;
    height: 340px;
}

.scroll-indicator {
    display: none;
}

.stats {
    grid-template-columns: repeat(2,1fr);
}

.stat-item {
    padding: 25px 20px;
}

.stat-item:nth-child(2) {
    border-right: 0;
}

.stat-item:nth-child(3),
.stat-item:nth-child(4) {
    border-top: 1px solid var(--line);
}

.section {
    padding: 90px 6%;
}

.section-label {
    margin-bottom: 45px;
}

.about-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.about-text {
    padding-top: 0;
}

.section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.section-heading > p {
    width: 100%;
}

.service-grid {
    grid-template-columns: 1fr;
}

.service-card {
    min-height: 330px;
}

.project-card {
    grid-template-columns: 1fr;
}

.project-info {
    padding: 30px;
    min-height: 250px;
}

.project-visual {
    min-height: 250px;
}

.cta {
    min-height: 550px;
    padding: 50px 6%;
}

.cta h2 {
    font-size: 53px;
    letter-spacing: -3px;
}

.footer-top {
    flex-direction: column;
    gap: 50px;
}

.footer-links {
    gap: 60px;
}

.footer-bottom {
    flex-direction: column;
    gap: 10px;
}

                            }
.page-hero {
min-height: 650px;
padding: 180px 8% 100px;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
border-bottom: 1px solid var(--line);
}

.page-hero-content {
position: relative;
z-index: 2;
max-width: 950px;
}

.page-hero h1 {
font-family: 'Space Grotesk';
font-size: clamp(55px, 8vw, 105px);
line-height: .92;
letter-spacing: -5px;
margin-bottom: 30px;
}

.page-hero h1 span {
display: block;
color: transparent;
-webkit-text-stroke: 1px #777780;
}

.page-hero-content > p {
max-width: 600px;
color: var(--muted);
line-height: 1.8;
font-size: 14px;
}

.about-values,
.process {
background: #09090d;
}

.value-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
}

.value-card {
min-height: 350px;
padding: 35px;
border: 1px solid var(--line);
transition: .4s;
}

.value-card:hover {
transform: translateY(-8px);
border-color: rgba(255,45,155,.3);
background: #101016;
}

.value-card > span,
.process-item > span {
color: #555560;
font-size: 10px;
}

.value-card .service-icon {
margin-top: 55px;
}

.value-card h3 {
font-family: 'Space Grotesk';
font-size: 22px;
margin: 18px 0 12px;
}

.value-card p {
color: #777780;
font-size: 12px;
line-height: 1.8;
}

.vision {
background: var(--bg);
}

.vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--line);
}

.vision-box {
padding: 60px;
min-height: 300px;
}

.vision-box:first-child {
border-right: 1px solid var(--line);
}

.vision-box > span {
color: var(--accent);
font-size: 9px;
letter-spacing: 3px;
}

.vision-box h2 {
font-family: 'Space Grotesk';
font-size: clamp(35px, 4vw, 58px);
line-height: 1;
margin-top: 35px;
}

.vision-box p {
color: #777780;
max-width: 450px;
line-height: 1.9;
margin-top: 35px;
font-size: 13px;
}

.service-grid-large {
grid-template-columns: repeat(3,1fr);
}

.service-grid-large .service-card {
min-height: 390px;
}

.process-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.process-item {
padding: 40px 30px;
min-height: 240px;
border-right: 1px solid var(--line);
}

.process-item:last-child {
border-right: 0;
}

.process-item h3 {
font-family: 'Space Grotesk';
font-size: 24px;
margin: 45px 0 12px;
}

.process-item p {
color: #777780;
font-size: 11px;
line-height: 1.8;
}

.project-feature {
min-height: 420px;
}

.project-four {
background:
radial-gradient(circle at center, rgba(255,255,255,.08), transparent 55%),
#101016;
}

.project-statement {
background: #09090d;
}

.project-statement-inner {
max-width: 950px;
}

.project-statement-inner > span {
color: var(--accent);
font-size: 9px;
letter-spacing: 3px;
}

.project-statement-inner h2 {
font-family: 'Space Grotesk';
font-size: clamp(40px, 6vw, 80px);
line-height: 1;
letter-spacing: -4px;
margin-top: 25px;
}

.contact-section {
background: #09090d;
}

.contact-grid {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 10%;
}

.contact-info > span {
color: #777780;
font-size: 10px;
letter-spacing: 2px;
}

.contact-info h2 {
font-family: 'Space Grotesk';
font-size: clamp(40px, 5vw, 65px);
line-height: .98;
letter-spacing: -3px;
margin: 22px 0;
}

.contact-info > p {
color: #777780;
font-size: 13px;
line-height: 1.8;
max-width: 420px;
}

.contact-list {
margin-top: 45px;
display: flex;
flex-direction: column;
gap: 14px;
}

.contact-item {
display: flex;
align-items: center;
gap: 15px;
padding: 17px;
border: 1px solid var(--line);
transition: .3s;
}

.contact-item:hover {
border-color: rgba(255,45,155,.3);
transform: translateX(5px);
}

.contact-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid var(--line);
color: var(--accent);
}

.contact-item small {
display: block;
color: #555560;
font-size: 8px;
letter-spacing: 2px;
margin-bottom: 4px;
}

.contact-item strong {
font-size: 11px;
font-weight: 500;
}

.contact-form-wrapper {
border: 1px solid var(--line);
background: #0d0d12;
padding: 40px;
}

.contact-form {
display: flex;
flex-direction: column;
gap: 25px;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.form-group {
display: flex;
flex-direction: column;
gap: 9px;
}

.form-group label {
color: #666672;
font-size: 8px;
letter-spacing: 2px;
}

.form-group input,
.form-group textarea {
width: 100%;
border: 1px solid var(--line);
background: #08080b;
color: white;
padding: 15px;
outline: none;
font-family: inherit;
font-size: 12px;
resize: vertical;
transition: .3s;
}

.form-group input:focus,
.form-group textarea:focus {
border-color: rgba(255,45,155,.5);
box-shadow: 0 0 20px rgba(255,45,155,.06);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #44444d;
}

.form-button {
border: 0;
cursor: pointer;
width: fit-content;
}

.form-message {
display: none;
color: #35e89a;
font-size: 11px;
line-height: 1.6;
}

.contact-banner {
min-height: 430px;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at center, rgba(255,45,155,.09), transparent 45%),
var(--bg);
}

.contact-banner-inner {
text-align: center;
}

.contact-banner-inner > span {
color: var(--accent);
font-size: 9px;
letter-spacing: 4px;
}

.contact-banner-inner h2 {
font-family: 'Space Grotesk';
font-size: clamp(50px, 8vw, 100px);
line-height: .9;
letter-spacing: -5px;
margin-top: 20px;
}

@media (max-width: 700px) {
.page-hero {
min-height: 600px;
padding: 140px 6% 80px;
}

.page-hero h1 {
    font-size: 58px;
    letter-spacing: -4px;
}

.value-grid,
.vision-grid,
.service-grid-large,
.process-grid,
.contact-grid {
    grid-template-columns: 1fr;
}

.value-card {
    min-height: 300px;
}

.vision-box {
    padding: 35px;
}

.vision-box:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
}

.process-item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
}

.process-item:last-child {
    border-bottom: 0;
}

.project-feature {
    min-height: 330px;
}

.form-row {
    grid-template-columns: 1fr;
}

.contact-form-wrapper {
    padding: 25px;
}

.contact-banner-inner h2 {
    font-size: 55px;
}

  }