/* =========================================================
DHYANII TECHSTUDIO
Global Stylesheet
========================================================= */

/* ---------- RESET ---------- */

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

html {
scroll-behavior: smooth;
}

body {
font-family: "Inter", sans-serif;
background: #08090d;
color: #f5f5f7;
line-height: 1.6;
overflow-x: hidden;
}

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

button {
font: inherit;
}

img {
max-width: 100%;
display: block;
}

/* ---------- VARIABLES ---------- */

:root {
--bg: #08090d;
--bg-soft: #0d0f15;
--card: #11131a;
--card-hover: #151821;

--text: #f5f5f7;
--text-soft: #a7a9b4;
--text-muted: #727582;

--accent: #8b5cf6;
--accent-light: #a78bfa;
--accent-dark: #6d28d9;

--border: rgba(255, 255, 255, 0.09);

--container: 1180px;

--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 28px;

}

/* ---------- CONTAINER ---------- */

.container {
width: min(92%, var(--container));
margin: 0 auto;
}

/* =========================================================
NAVBAR
========================================================= */

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;

background: rgba(8, 9, 13, 0.78);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);

border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}

.nav-container {
min-height: 76px;

display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;

}

/* LOGO */

.logo {
display: inline-flex;
align-items: center;
gap: 11px;

font-family: "Space Grotesk", sans-serif;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.4px;

}

.logo strong {
font-weight: 700;
}

.logo-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

/* NAV LINKS */

.nav-links {
display: flex;
align-items: center;
gap: 34px;
}

.nav-links a {
position: relative;

color: var(--text-soft);
font-size: 14px;
font-weight: 500;

transition: 0.3s ease;

}

.nav-links a:hover,
.nav-links a.active {
color: white;
}

.nav-links a::after {
content: "";

position: absolute;
left: 0;
bottom: -9px;

width: 0;
height: 2px;

background: var(--accent-light);

border-radius: 10px;

transition: width 0.3s ease;

}

.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}

/* NAV BUTTON */

.nav-btn {
display: inline-flex;
align-items: center;
gap: 9px;

padding: 11px 18px;

border: 1px solid rgba(167, 139, 250, 0.35);
border-radius: 10px;

background: rgba(139, 92, 246, 0.08);

font-size: 13px;
font-weight: 600;

transition: 0.3s ease;

}

.nav-btn:hover {
background: var(--accent);
border-color: var(--accent);
transform: translateY(-2px);
}

/* MOBILE MENU */

.menu-btn {
display: none;

border: 0;
background: transparent;
color: white;

font-size: 26px;
cursor: pointer;

}

/* =========================================================
HERO
========================================================= */

.hero {
position: relative;
min-height: 100vh;

display: flex;
align-items: center;

padding: 150px 0 100px;

overflow: hidden;

}

/* BACKGROUND GLOWS */

.hero::before {
content: "";

position: absolute;
top: 15%;
left: 50%;

width: 700px;
height: 500px;

transform: translateX(-50%);

background: radial-gradient(
    ellipse,
    rgba(109, 40, 217, 0.14),
    transparent 68%
);

pointer-events: none;

}

.hero-glow {
position: absolute;

width: 280px;
height: 280px;

border-radius: 50%;

filter: blur(100px);

opacity: 0.18;

pointer-events: none;

}

.glow-one {
top: 20%;
left: -120px;
background: var(--accent);
}

.glow-two {
right: -100px;
bottom: 5%;
background: #4f46e5;
}

/* HERO LAYOUT */

.hero-container {
display: grid;
grid-template-columns: 1.05fr 0.95fr;

align-items: center;

gap: 70px;

}

/* EYEBROW */

.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;

padding: 8px 13px;

margin-bottom: 24px;

border: 1px solid rgba(167, 139, 250, 0.18);
border-radius: 50px;

background: rgba(139, 92, 246, 0.06);

color: var(--text-soft);

font-size: 12px;
font-weight: 500;

}

.status-dot {
width: 7px;
height: 7px;

border-radius: 50%;

background: #a78bfa;

box-shadow: 0 0 12px rgba(167, 139, 250, 0.8);

}

/* HERO HEADING */

.hero h1 {
max-width: 720px;

font-family: "Space Grotesk", sans-serif;

font-size: clamp(46px, 5.2vw, 72px);

line-height: 1.02;

letter-spacing: -3.5px;

font-weight: 700;

}

.hero h1 span {
display: inline;

background: linear-gradient(
    90deg,
    #c4b5fd,
    #8b5cf6,
    #a78bfa
);

-webkit-background-clip: text;
background-clip: text;
color: transparent;

}

.hero-content > p {
max-width: 570px;

margin-top: 25px;

color: var(--text-soft);

font-size: 16px;
line-height: 1.8;

}

/* HERO BUTTONS */

.hero-buttons {
display: flex;
align-items: center;
gap: 13px;

margin-top: 34px;

}

.primary-btn,
.secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;

min-height: 48px;

padding: 0 20px;

border-radius: 11px;

font-size: 13px;
font-weight: 600;

transition: 0.3s ease;

}

.primary-btn {
background: linear-gradient(
135deg,
#9b78f5,
#7042d6
);

box-shadow: 0 12px 35px rgba(109, 40, 217, 0.25);

}

.primary-btn:hover {
transform: translateY(-3px);

box-shadow: 0 17px 40px rgba(109, 40, 217, 0.35);

}

.secondary-btn {
border: 1px solid var(--border);

background: rgba(255, 255, 255, 0.025);

color: var(--text-soft);

}

.secondary-btn:hover {
border-color: rgba(167, 139, 250, 0.4);

color: white;

transform: translateY(-3px);

}

/* HERO TRUST */

.hero-trust {
display: flex;
align-items: center;
gap: 22px;

margin-top: 48px;

}

.trust-item {
display: flex;
flex-direction: column;
gap: 1px;
}

.trust-item strong {
font-family: "Space Grotesk", sans-serif;

font-size: 15px;

}

.trust-item span {
color: var(--text-muted);

font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.8px;

}

.trust-line {
width: 1px;
height: 27px;

background: var(--border);

}

/* =========================================================
HERO VISUAL / CODE WINDOW
========================================================= */

.hero-visual {
position: relative;

min-height: 460px;

display: flex;
align-items: center;
justify-content: center;

}

/* CODE WINDOW */

.code-window {
position: relative;

width: min(100%, 500px);

border: 1px solid rgba(255, 255, 255, 0.1);

border-radius: 18px;

background: #0c0e14;

box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(109, 40, 217, 0.08);

overflow: hidden;

transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);

animation: floatingWindow 5s ease-in-out infinite;

}

@keyframes floatingWindow {
0%,
100% {
transform:
perspective(1000px)
rotateY(-5deg)
rotateX(2deg)
translateY(0);
}

50% {
    transform:
        perspective(1000px)
        rotateY(-5deg)
        rotateX(2deg)
        translateY(-9px);
}

}

/* WINDOW BAR */

.window-bar {
height: 48px;

display: flex;
align-items: center;

padding: 0 17px;

border-bottom: 1px solid rgba(255, 255, 255, 0.07);

background: #101219;

}

.window-dots {
display: flex;
gap: 6px;
}

.window-dots span {
width: 9px;
height: 9px;

border-radius: 50%;

background: #343641;

}

.window-title {
margin-left: auto;
margin-right: auto;

color: #686b77;

font-family: monospace;
font-size: 10px;

}

/* CODE */

.code-content {
padding: 30px 25px 34px;

font-family: "Courier New", monospace;

font-size: 14px;
line-height: 2.4;

}

.code-number {
display: inline-block;

width: 35px;

color: #414451;

user-select: none;

}

.code-tag {
color: #777b8a;
}

.code-indent {
padding-left: 25px;
}

.code-highlight {
color: #bda8ff;
}

.code-indent:nth-child(3) .code-highlight {
color: #d7c8ff;
}

.code-indent:nth-child(4) .code-highlight {
color: #a78bfa;
}

.code-indent:nth-child(5) .code-highlight {
color: #8b5cf6;
}

/* FLOATING CARDS */

.floating-card {
position: absolute;

display: flex;
align-items: center;
gap: 11px;

padding: 12px 15px;

border: 1px solid rgba(255, 255, 255, 0.09);

border-radius: 13px;

background: rgba(17, 19, 26, 0.88);

backdrop-filter: blur(15px);

box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);

animation: floatingCard 4s ease-in-out infinite;

}

.floating-icon {
width: 32px;
height: 32px;

display: grid;
place-items: center;

border-radius: 9px;

background: rgba(139, 92, 246, 0.13);

color: #b9a4ff;

font-size: 15px;

}

.floating-card div {
display: flex;
flex-direction: column;
}

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

.floating-card small {
color: var(--text-muted);

font-size: 9px;

}

.card-one {
top: 55px;
right: -20px;
}

.card-two {
bottom: 60px;
left: -25px;

animation-delay: 1.2s;

}

@keyframes floatingCard {
0%,
100% {
transform: translateY(0);
}

50% {
    transform: translateY(-8px);
}

}

/* =========================================================
GENERAL SECTIONS
========================================================= */

.section {
padding: 110px 0;
}

.section-label {
display: inline-block;

margin-bottom: 17px;

color: #a78bfa;

font-size: 10px;
font-weight: 700;

letter-spacing: 2px;

}

/* SECTION HEADING */

.section-heading {
display: flex;
align-items: end;
justify-content: space-between;

gap: 40px;

margin-bottom: 55px;

}

.section-heading h2,
.why-content h2 {
font-family: "Space Grotesk", sans-serif;

font-size: clamp(34px, 4vw, 51px);

line-height: 1.1;

letter-spacing: -2px;

}

.section-heading h2 span,
.why-content h2 span,
.cta-box h2 span {
color: #a78bfa;
}

.text-link {
padding-bottom: 5px;

color: var(--text-soft);

border-bottom: 1px solid rgba(255, 255, 255, 0.18);

font-size: 12px;
font-weight: 600;

transition: 0.3s ease;

}

.text-link:hover {
color: white;
border-color: #a78bfa;
}

/* =========================================================
SERVICE CARDS
========================================================= */

.service-grid {
display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 17px;

}

.service-card {
position: relative;

min-height: 300px;

padding: 28px;

border: 1px solid var(--border);

border-radius: var(--radius-md);

background: var(--card);

overflow: hidden;

transition: 0.4s ease;

}

.service-card::before {
content: "";

position: absolute;

top: -100px;
right: -100px;

width: 200px;
height: 200px;

border-radius: 50%;

background: rgba(139, 92, 246, 0.08);

filter: blur(30px);

transition: 0.4s ease;

}

.service-card:hover {
transform: translateY(-7px);

border-color: rgba(167, 139, 250, 0.28);

background: var(--card-hover);

}

.service-card:hover::before {
transform: scale(1.4);
}

.featured-service {
border-color: rgba(139, 92, 246, 0.25);

background:
    linear-gradient(
        145deg,
        rgba(139, 92, 246, 0.09),
        rgba(17, 19, 26, 1) 65%
    );

}

.service-number {
position: absolute;

top: 24px;
right: 25px;

color: #393b46;

font-family: "Space Grotesk", sans-serif;

font-size: 11px;
font-weight: 600;

}

.service-icon {
width: 44px;
height: 44px;

display: grid;
place-items: center;

margin-bottom: 38px;

border: 1px solid rgba(167, 139, 250, 0.18);

border-radius: 12px;

background: rgba(139, 92, 246, 0.09);

color: #bba8ff;

font-size: 19px;

}

.service-card h3 {
margin-bottom: 11px;

font-family: "Space Grotesk", sans-serif;

font-size: 19px;

}

.service-card p {
margin-bottom: 24px;

color: var(--text-muted);

font-size: 12px;

line-height: 1.7;

}

.service-card a {
color: #bba8ff;

font-size: 11px;
font-weight: 600;

}

/* =========================================================
WHY SECTION
========================================================= */

.why-section {
background: #0a0b10;

border-top: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}

.why-container {
display: grid;

grid-template-columns: 0.9fr 1.1fr;

gap: 90px;

align-items: center;

}

.why-content h2 {
margin-bottom: 22px;
}

.why-content > p {
max-width: 530px;

margin-bottom: 30px;

color: var(--text-soft);

font-size: 14px;

line-height: 1.8;

}

.why-features {
display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 14px;

}

.feature {
display: flex;
gap: 16px;

padding: 23px;

border: 1px solid var(--border);

border-radius: 15px;

background: rgba(255, 255, 255, 0.018);

transition: 0.3s ease;

}

.feature:hover {
border-color: rgba(167, 139, 250, 0.25);

transform: translateY(-4px);

}

.feature-icon {
flex-shrink: 0;

width: 37px;
height: 37px;

display: grid;
place-items: center;

border-radius: 10px;

background: rgba(139, 92, 246, 0.1);

color: #bba8ff;

font-size: 14px;

}

.feature h3 {
margin-bottom: 5px;

font-family: "Space Grotesk", sans-serif;

font-size: 14px;

}

.feature p {
color: var(--text-muted);

font-size: 10px;

line-height: 1.6;

}

/* =========================================================
CTA
========================================================= */

.cta-section {
padding: 100px 0;
}

.cta-box {
position: relative;

padding: 90px 30px;

text-align: center;

border: 1px solid rgba(167, 139, 250, 0.18);

border-radius: var(--radius-lg);

background:
    radial-gradient(
        circle at center,
        rgba(109, 40, 217, 0.15),
        transparent 58%
    ),
    #101119;

overflow: hidden;

}

.cta-glow {
position: absolute;

top: 50%;
left: 50%;

width: 250px;
height: 250px;

transform: translate(-50%, -50%);

border-radius: 50%;

background: rgba(139, 92, 246, 0.15);

filter: blur(80px);

pointer-events: none;

}

.cta-box h2 {
position: relative;

max-width: 700px;

margin: 0 auto 17px;

font-family: "Space Grotesk", sans-serif;

font-size: clamp(38px, 5vw, 58px);

line-height: 1.05;

letter-spacing: -2.5px;

}

.cta-box p {
position: relative;

max-width: 520px;

margin: 0 auto 30px;

color: var(--text-soft);

font-size: 13px;

}

.cta-box .primary-btn {
position: relative;
}

/* =========================================================
FOOTER
========================================================= */

.footer {
padding-top: 75px;

background: #06070a;

border-top: 1px solid rgba(255, 255, 255, 0.06);

}

.footer-container {
display: flex;

justify-content: space-between;

gap: 80px;

padding-bottom: 60px;

}

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

.footer-brand p {
margin-top: 18px;

color: var(--text-muted);

font-size: 12px;

line-height: 1.8;

}

.footer-links {
display: flex;

gap: 100px;

}

.footer-links div {
display: flex;
flex-direction: column;

gap: 10px;

}

.footer-links h4 {
margin-bottom: 8px;

color: white;

font-family: "Space Grotesk", sans-serif;

font-size: 12px;

}

.footer-links a {
color: var(--text-muted);

font-size: 11px;

transition: 0.3s ease;

}

.footer-links a:hover {
color: #bba8ff;

transform: translateX(3px);

}

.footer-bottom {
min-height: 65px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 20px;

border-top: 1px solid rgba(255, 255, 255, 0.06);

color: #565964;

font-size: 10px;

}

.footer-bottom span {
color: #a78bfa;
}

/* =========================================================
WHATSAPP BUTTON
========================================================= */

.whatsapp-btn {
position: fixed;

right: 24px;
bottom: 24px;

z-index: 900;

display: flex;
align-items: center;
gap: 10px;

padding: 11px 15px;

border: 1px solid rgba(255, 255, 255, 0.12);

border-radius: 50px;

background: rgba(20, 22, 29, 0.94);

backdrop-filter: blur(15px);

box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);

font-size: 11px;
font-weight: 600;

transition: 0.3s ease;

}

.whatsapp-btn strong {
width: 25px;
height: 25px;

display: grid;
place-items: center;

border-radius: 50%;

background: #25d366;

color: white;

font-size: 12px;

}

.whatsapp-btn:hover {
transform: translateY(-4px);

border-color: rgba(37, 211, 102, 0.4);

}

/* =========================================================
RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

.nav-links {
    gap: 20px;
}

.hero-container {
    grid-template-columns: 1fr;

    gap: 70px;
}

.hero-content {
    text-align: center;
}

.hero-content > p {
    margin-left: auto;
    margin-right: auto;
}

.eyebrow,
.hero-buttons,
.hero-trust {
    justify-content: center;
}

.hero-visual {
    min-height: 400px;
}

.why-container {
    grid-template-columns: 1fr;

    gap: 50px;
}

.why-content {
    text-align: center;
}

.why-content > p {
    margin-left: auto;
    margin-right: auto;
}

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

}

/* =========================================================
RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 720px) {

.nav-container {
    min-height: 68px;
}

.nav-links {
    position: absolute;

    top: 68px;
    left: 4%;

    width: 92%;

    display: none;
    flex-direction: column;

    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: rgba(13, 15, 21, 0.97);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.nav-links.show {
    display: flex;
}

.nav-links a {
    width: 100%;

    padding: 10px;

    text-align: center;
}

.nav-links a::after {
    display: none;
}

.nav-btn {
    display: none;
}

.menu-btn {
    display: block;
}


/* HERO */

.hero {
    min-height: auto;

    padding: 125px 0 80px;
}

.hero h1 {
    font-size: clamp(39px, 11vw, 54px);

    letter-spacing: -2.5px;
}

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

.hero-buttons {
    flex-direction: column;

    width: 100%;
}

.primary-btn,
.secondary-btn {
    width: 100%;
}

.hero-trust {
    gap: 13px;
}

.trust-line {
    height: 23px;
}

.hero-visual {
    min-height: 340px;
}

.code-window {
    width: 100%;

    transform: none;
}

.floating-card {
    display: none;
}

.code-content {
    font-size: 11px;

    padding: 23px 15px 25px;
}

.code-number {
    width: 28px;
}

.code-indent {
    padding-left: 15px;
}


/* SECTIONS */

.section {
    padding: 75px 0;
}

.section-heading {
    display: block;

    margin-bottom: 35px;
}

.section-heading h2,
.why-content h2 {
    font-size: 34px;

    letter-spacing: -1.5px;
}

.section-heading .text-link {
    display: inline-block;

    margin-top: 22px;
}


/* SERVICES */

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

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


/* WHY */

.why-features {
    grid-template-columns: 1fr;
}

.feature {
    padding: 20px;
}


/* CTA */

.cta-section {
    padding: 70px 0;
}

.cta-box {
    padding: 65px 20px;
}

.cta-box h2 {
    font-size: 37px;

    letter-spacing: -1.8px;
}


/* FOOTER */

.footer {
    padding-top: 55px;
}

.footer-container {
    flex-direction: column;

    gap: 45px;

    padding-bottom: 45px;
}

.footer-links {
    gap: 60px;
}

.footer-bottom {
    flex-direction: column;

    justify-content: center;

    padding: 20px 0;

    text-align: center;
}

.whatsapp-btn {
    right: 15px;
    bottom: 15px;
}

.whatsapp-btn span {
    display: none;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

.logo {
    font-size: 14px;
}

.logo-mark {
    width: 33px;
    height: 33px;

    font-size: 16px;
}

.hero h1 {
    font-size: 38px;
}

.hero-trust {
    gap: 9px;
}

.trust-item strong {
    font-size: 13px;
}

.trust-item span {
    font-size: 8px;
}

.section-heading h2,
.why-content h2 {
    font-size: 30px;
}

}
/* =========================================================
ABOUT PAGE
========================================================= */

/* ---------- PAGE HERO ---------- */

.page-hero {
position: relative;

min-height: 62vh;

display: flex;
align-items: center;

padding: 150px 0 90px;

overflow: hidden;

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}

.page-hero::before {
content: "";

position: absolute;

top: -180px;
left: 50%;

width: 650px;
height: 500px;

transform: translateX(-50%);

background: radial-gradient(
    ellipse,
    rgba(109, 40, 217, 0.17),
    transparent 68%
);

pointer-events: none;

}

.page-hero-glow {
position: absolute;

right: -150px;
bottom: -180px;

width: 350px;
height: 350px;

border-radius: 50%;

background: rgba(139, 92, 246, 0.13);

filter: blur(100px);

}

.page-hero-content {
position: relative;

text-align: center;

max-width: 850px;

}

.page-hero-content h1 {
font-family: "Space Grotesk", sans-serif;

font-size: clamp(45px, 6vw, 72px);

line-height: 1.03;

letter-spacing: -3px;

margin-bottom: 25px;

}

.page-hero-content h1 span {
display: block;

background: linear-gradient(
    90deg,
    #c4b5fd,
    #8b5cf6,
    #a78bfa
);

-webkit-background-clip: text;
background-clip: text;

color: transparent;

}

.page-hero-content p {
max-width: 620px;

margin: auto;

color: var(--text-soft);

font-size: 15px;

line-height: 1.8;

}

/* ---------- ABOUT INTRO ---------- */

.about-intro {
background: #08090d;
}

.about-intro-grid {
display: grid;

grid-template-columns: 0.8fr 1.2fr;

gap: 100px;

align-items: start;

}

.about-big-text h2 {
font-family: "Space Grotesk", sans-serif;

font-size: clamp(38px, 4vw, 55px);

line-height: 1.05;

letter-spacing: -2px;

}

.about-big-text h2 span {
color: #a78bfa;
}

.about-description {
padding-top: 8px;
}

.about-description p {
margin-bottom: 22px;

color: var(--text-soft);

font-size: 14px;

line-height: 1.9;

}

.about-description p:last-child {
margin-bottom: 0;
}

.about-description strong {
color: white;
}

/* ---------- APPROACH ---------- */

.approach-section {
background: #0a0b10;

border-top: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}

.process-grid {
display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 14px;

}

.process-card {
position: relative;

min-height: 280px;

padding: 28px;

border: 1px solid var(--border);

border-radius: 17px;

background: rgba(255, 255, 255, 0.018);

overflow: hidden;

transition: 0.35s ease;

}

.process-card::after {
content: "";

position: absolute;

width: 130px;
height: 130px;

right: -65px;
bottom: -65px;

border-radius: 50%;

background: rgba(139, 92, 246, 0.08);

filter: blur(20px);

transition: 0.35s ease;

}

.process-card:hover {
transform: translateY(-7px);

border-color: rgba(167, 139, 250, 0.28);

background: rgba(139, 92, 246, 0.035);

}

.process-card:hover::after {
transform: scale(1.4);
}

.process-number {
position: absolute;

top: 23px;
right: 24px;

color: #3d3f49;

font-family: "Space Grotesk", sans-serif;

font-size: 11px;
font-weight: 600;

}

.process-icon {
width: 45px;
height: 45px;

display: grid;
place-items: center;

margin-bottom: 45px;

border: 1px solid rgba(167, 139, 250, 0.18);

border-radius: 12px;

background: rgba(139, 92, 246, 0.08);

color: #bba8ff;

font-size: 18px;

}

.process-card h3 {
margin-bottom: 10px;

font-family: "Space Grotesk", sans-serif;

font-size: 18px;

}

.process-card p {
color: var(--text-muted);

font-size: 11px;

line-height: 1.75;

}

/* ---------- VALUES ---------- */

.values-section {
background: #08090d;
}

.values-container {
display: grid;

grid-template-columns: 0.75fr 1.25fr;

gap: 100px;

align-items: start;

}

.values-heading h2 {
font-family: "Space Grotesk", sans-serif;

font-size: clamp(38px, 4vw, 55px);

line-height: 1.05;

letter-spacing: -2px;

}

.values-heading h2 span {
color: #a78bfa;
}

.values-list {
border-top: 1px solid var(--border);
}

.value-item {
display: grid;

grid-template-columns: 55px 1fr;

gap: 15px;

padding: 25px 0;

border-bottom: 1px solid var(--border);

transition: 0.3s ease;

}

.value-item:hover {
padding-left: 8px;
}

.value-number {
color: #555864;

font-family: "Space Grotesk", sans-serif;

font-size: 11px;

}

.value-item h3 {
margin-bottom: 5px;

font-family: "Space Grotesk", sans-serif;

font-size: 16px;

}

.value-item p {
max-width: 520px;

color: var(--text-muted);

font-size: 11px;

line-height: 1.7;

}

/* =========================================================
ABOUT PAGE RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

.about-intro-grid {
    grid-template-columns: 1fr;

    gap: 35px;
}

.values-container {
    grid-template-columns: 1fr;

    gap: 50px;
}

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

}

@media (max-width: 720px) {

.page-hero {
    min-height: 55vh;

    padding: 125px 0 70px;
}

.page-hero-content h1 {
    font-size: 43px;

    letter-spacing: -2px;
}

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

.about-intro-grid {
    gap: 25px;
}

.about-big-text h2,
.values-heading h2 {
    font-size: 37px;
}

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

.process-card {
    min-height: 245px;
}

.values-container {
    gap: 35px;
}

.value-item {
    grid-template-columns: 40px 1fr;
}

}
/* =========================================================
SERVICES PAGE
========================================================= */

/* ---------- SERVICES HERO ---------- */

.services-hero {
min-height: 60vh;
}

/* ---------- SERVICES INTRO ---------- */

.services-intro {
max-width: 700px;

margin-bottom: 55px;

}

.services-intro h2 {
font-family: "Space Grotesk", sans-serif;

font-size: clamp(38px, 4.5vw, 56px);

line-height: 1.05;

letter-spacing: -2.2px;

margin-bottom: 20px;

}

.services-intro h2 span {
color: #a78bfa;
}

.services-intro p {
max-width: 600px;

color: var(--text-soft);

font-size: 14px;

line-height: 1.8;

}

/* ---------- LARGE SERVICE GRID ---------- */

.services-large-grid {
display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 16px;

}

/* ---------- LARGE SERVICE CARD ---------- */

.large-service-card {
position: relative;

min-height: 420px;

padding: 32px;

border: 1px solid var(--border);

border-radius: 20px;

background: var(--card);

overflow: hidden;

transition: 0.4s ease;

}

.large-service-card::before {
content: "";

position: absolute;

top: -120px;
right: -120px;

width: 260px;
height: 260px;

border-radius: 50%;

background: rgba(139, 92, 246, 0.07);

filter: blur(35px);

transition: 0.4s ease;

}

.large-service-card:hover {
transform: translateY(-7px);

border-color: rgba(167, 139, 250, 0.3);

background: var(--card-hover);

}

.large-service-card:hover::before {
transform: scale(1.35);
}

/* FEATURED SERVICE */

.featured-large-service {
border-color: rgba(139, 92, 246, 0.25);

background:
    linear-gradient(
        145deg,
        rgba(139, 92, 246, 0.09),
        #11131a 60%
    );

}

/* CARD TOP */

.large-service-top {
display: flex;

align-items: flex-start;
justify-content: space-between;

margin-bottom: 55px;

}

.large-service-number {
color: #454751;

font-family: "Space Grotesk", sans-serif;

font-size: 11px;
font-weight: 600;

}

.large-service-icon {
width: 48px;
height: 48px;

display: grid;
place-items: center;

border: 1px solid rgba(167, 139, 250, 0.2);

border-radius: 13px;

background: rgba(139, 92, 246, 0.09);

color: #bdaaff;

font-size: 19px;

}

/* CARD CONTENT */

.large-service-card h3 {
position: relative;

margin-bottom: 12px;

font-family: "Space Grotesk", sans-serif;

font-size: 22px;

}

.large-service-card > p {
position: relative;

max-width: 500px;

margin-bottom: 20px;

color: var(--text-soft);

font-size: 12px;

line-height: 1.75;

}

/* SERVICE LIST */

.large-service-card ul {
position: relative;

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 8px 20px;

padding: 0;

margin: 0 0 27px;

list-style: none;

}

.large-service-card li {
color: var(--text-muted);

font-size: 10px;

padding-left: 16px;

position: relative;

}

.large-service-card li::before {
content: "✓";

position: absolute;

left: 0;

color: #a78bfa;

font-size: 9px;

}

/* SERVICE LINK */

.large-service-card > a {
position: relative;

display: inline-flex;

align-items: center;

color: #bdaaff;

font-size: 11px;
font-weight: 600;

transition: 0.3s ease;

}

.large-service-card > a:hover {
color: white;

transform: translateX(4px);

}

/* =========================================================
INDUSTRY SOLUTIONS
========================================================= */

.specialized-section {
background: #0a0b10;

border-top: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}

.specialized-container {
display: grid;

grid-template-columns: 0.85fr 1.15fr;

gap: 90px;

align-items: center;

}

.specialized-content h2 {
font-family: "Space Grotesk", sans-serif;

font-size: clamp(38px, 4vw, 53px);

line-height: 1.05;

letter-spacing: -2px;

margin-bottom: 20px;

}

.specialized-content h2 span {
color: #a78bfa;
}

.specialized-content p {
max-width: 470px;

margin-bottom: 30px;

color: var(--text-soft);

font-size: 13px;

line-height: 1.8;

}

/* INDUSTRY GRID */

.industry-grid {
display: grid;

grid-template-columns: repeat(2, 1fr);

border-top: 1px solid var(--border);
border-left: 1px solid var(--border);

}

.industry-item {
min-height: 100px;

display: flex;

flex-direction: column;

justify-content: center;

gap: 8px;

padding: 20px 23px;

border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);

background: rgba(255, 255, 255, 0.012);

transition: 0.3s ease;

}

.industry-item:hover {
background: rgba(139, 92, 246, 0.05);

padding-left: 29px;

}

.industry-item span {
color: #535660;

font-family: "Space Grotesk", sans-serif;

font-size: 9px;

}

.industry-item strong {
color: #e7e7eb;

font-family: "Space Grotesk", sans-serif;

font-size: 13px;

}

/* =========================================================
SERVICE PROCESS
========================================================= */

.service-process {
background: #08090d;
}

.service-process-grid {
display: grid;

grid-template-columns: repeat(4, 1fr);

border-top: 1px solid var(--border);
border-left: 1px solid var(--border);

}

.service-process-item {
position: relative;

min-height: 245px;

padding: 28px;

border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);

transition: 0.35s ease;

}

.service-process-item:hover {
background: rgba(139, 92, 246, 0.035);
}

.service-process-item > span {
display: block;

margin-bottom: 55px;

color: #555762;

font-family: "Space Grotesk", sans-serif;

font-size: 10px;

}

.service-process-item h3 {
margin-bottom: 10px;

font-family: "Space Grotesk", sans-serif;

font-size: 17px;

}

.service-process-item p {
color: var(--text-muted);

font-size: 10px;

line-height: 1.75;

}

/* =========================================================
SERVICES RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

.services-large-grid {
    grid-template-columns: 1fr;
}

.specialized-container {
    grid-template-columns: 1fr;

    gap: 55px;
}

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

}

@media (max-width: 720px) {

.services-intro {
    margin-bottom: 35px;
}

.services-intro h2 {
    font-size: 36px;

    letter-spacing: -1.5px;
}

.large-service-card {
    min-height: auto;

    padding: 25px;
}

.large-service-top {
    margin-bottom: 40px;
}

.large-service-card h3 {
    font-size: 20px;
}

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

.specialized-content h2 {
    font-size: 37px;
}

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

.industry-item {
    min-height: 85px;
}

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

.service-process-item {
    min-height: 210px;
}

.service-process-item > span {
    margin-bottom: 40px;
}

}
/* =========================================================
PORTFOLIO PAGE
========================================================= */

/* ---------- PORTFOLIO HERO ---------- */

.portfolio-hero {
min-height: 60vh;
}

/* ---------- PORTFOLIO HEADING ---------- */

.portfolio-heading {
display: flex;

align-items: end;
justify-content: space-between;

gap: 50px;

margin-bottom: 50px;

}

.portfolio-heading h2 {
font-family: "Space Grotesk", sans-serif;

font-size: clamp(40px, 4vw, 56px);

line-height: 1;

letter-spacing: -2px;

}

.portfolio-heading h2 span {
color: #a78bfa;
}

.portfolio-heading > p {
max-width: 390px;

color: var(--text-soft);

font-size: 12px;

line-height: 1.8;

}

/* =========================================================
PROJECT CARD
========================================================= */

.project-card {
display: grid;

grid-template-columns: 1.15fr 0.85fr;

min-height: 480px;

margin-bottom: 18px;

border: 1px solid var(--border);

border-radius: 22px;

background: var(--card);

overflow: hidden;

transition: 0.4s ease;

}

.project-card:hover {
border-color: rgba(167, 139, 250, 0.25);

transform: translateY(-5px);

}

.featured-project {
border-color: rgba(139, 92, 246, 0.2);
}

/* =========================================================
PROJECT PREVIEW
========================================================= */

.project-preview {
position: relative;

min-height: 480px;

display: flex;

align-items: center;
justify-content: center;

padding: 45px;

background:
    radial-gradient(
        circle at center,
        rgba(139, 92, 246, 0.1),
        transparent 62%
    );

overflow: hidden;

}

.project-preview::before {
content: "";

position: absolute;

width: 500px;
height: 500px;

border-radius: 50%;

border: 1px solid rgba(167, 139, 250, 0.05);

pointer-events: none;

}

.project-preview-two {
background:
radial-gradient(
circle at center,
rgba(99, 102, 241, 0.09),
transparent 65%
);
}

.project-preview-three {
background:
radial-gradient(
circle at center,
rgba(168, 85, 247, 0.08),
transparent 65%
);
}

/* =========================================================
BROWSER MOCKUP
========================================================= */

.browser-window {
position: relative;

width: 90%;

max-width: 570px;

border: 1px solid rgba(255, 255, 255, 0.12);

border-radius: 13px;

background: #0c0e13;

box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.45),
    0 0 50px rgba(139, 92, 246, 0.08);

overflow: hidden;

transform: perspective(900px) rotateX(3deg) rotateY(-3deg);

transition: 0.5s ease;

}

.project-card:hover .browser-window {
transform:
perspective(900px)
rotateX(1deg)
rotateY(0deg)
translateY(-5px);
}

.browser-top {
height: 38px;

display: flex;

align-items: center;

padding: 0 12px;

border-bottom: 1px solid rgba(255, 255, 255, 0.06);

background: #12141a;

}

.browser-dots {
display: flex;

gap: 5px;

}

.browser-dots span {
width: 7px;
height: 7px;

border-radius: 50%;

background: #393b45;

}

.browser-address {
margin: auto;

padding: 5px 55px;

border: 1px solid rgba(255, 255, 255, 0.05);

border-radius: 5px;

color: #5e616c;

font-family: monospace;

font-size: 7px;

}

.preview-content {
min-height: 260px;

padding: 40px 35px;

background:
    linear-gradient(
        145deg,
        #11131a,
        #090a0e
    );

}

.preview-brand {
margin-bottom: 20px;

color: #d9d4ea;

font-family: "Space Grotesk", sans-serif;

font-size: 11px;
font-weight: 700;

letter-spacing: 2px;

}

.preview-line {
height: 7px;

margin-bottom: 9px;

border-radius: 5px;

background: rgba(255, 255, 255, 0.11);

}

.preview-line.large {
width: 70%;
}

.preview-line.medium {
width: 45%;
}

.preview-boxes {
display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 8px;

margin-top: 35px;

}

.preview-boxes span {
height: 65px;

border: 1px solid rgba(167, 139, 250, 0.1);

border-radius: 6px;

background:
    linear-gradient(
        145deg,
        rgba(139, 92, 246, 0.12),
        rgba(255, 255, 255, 0.025)
    );

}

/* PREVIEW LABEL */

.preview-label {
position: absolute;

bottom: 20px;
left: 25px;

color: #535661;

font-size: 8px;
font-weight: 700;

letter-spacing: 1.5px;

}

/* =========================================================
CONCEPT WINDOWS
========================================================= */

.concept-window {
width: 75%;
max-width: 390px;

border: 1px solid rgba(255, 255, 255, 0.1);

border-radius: 12px;

background: #0d0f15;

box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);

overflow: hidden;

transition: 0.5s ease;

}

.project-card:hover .concept-window {
transform: translateY(-7px) scale(1.02);
}

.concept-header {
height: 35px;

display: flex;

align-items: center;

gap: 5px;

padding-left: 12px;

border-bottom: 1px solid rgba(255, 255, 255, 0.06);

background: #12141a;

}

.concept-header span {
width: 7px;
height: 7px;

border-radius: 50%;

background: #3b3d47;

}

.concept-content {
min-height: 220px;

display: flex;

align-items: center;
justify-content: center;

flex-direction: column;

gap: 17px;

padding: 25px;

}

.concept-circle {
width: 55px;
height: 55px;

border: 1px solid rgba(167, 139, 250, 0.25);

border-radius: 50%;

background: rgba(139, 92, 246, 0.1);

box-shadow: 0 0 35px rgba(139, 92, 246, 0.12);

}

.concept-title {
width: 120px;
height: 7px;

border-radius: 5px;

background: rgba(255, 255, 255, 0.1);

}

.concept-small {
width: 80px;
height: 5px;

border-radius: 5px;

background: rgba(255, 255, 255, 0.05);

}

.concept-button {
width: 70px;
height: 22px;

border-radius: 5px;

background: rgba(139, 92, 246, 0.25);

}

/* CONCEPT GRID */

.concept-grid {
display: grid;

grid-template-columns: repeat(2, 75px);

gap: 10px;

}

.concept-grid span {
width: 75px;
height: 60px;

border: 1px solid rgba(167, 139, 250, 0.1);

border-radius: 7px;

background: rgba(139, 92, 246, 0.06);

}

/* =========================================================
PROJECT INFO
========================================================= */

.project-info {
display: flex;

flex-direction: column;

justify-content: center;

padding: 55px 45px;

border-left: 1px solid rgba(255, 255, 255, 0.06);

}

.project-meta {
display: flex;

align-items: center;

gap: 14px;

margin-bottom: 25px;

color: #666974;

font-family: "Space Grotesk", sans-serif;

font-size: 9px;

letter-spacing: 1px;

}

.project-meta span:first-child {
color: #a78bfa;
}

.project-info h3 {
margin-bottom: 15px;

font-family: "Space Grotesk", sans-serif;

font-size: clamp(25px, 3vw, 34px);

line-height: 1.1;

letter-spacing: -1px;

}

.project-info > p {
max-width: 450px;

margin-bottom: 23px;

color: var(--text-soft);

font-size: 12px;

line-height: 1.8;

}

/* PROJECT TAGS */

.project-tags {
display: flex;

flex-wrap: wrap;

gap: 7px;

margin-bottom: 27px;

}

.project-tags span {
padding: 6px 9px;

border: 1px solid var(--border);

border-radius: 6px;

color: #888b96;

font-size: 8px;

background: rgba(255, 255, 255, 0.02);

}

.project-actions {
display: flex;
}

/* =========================================================
PORTFOLIO NOTE
========================================================= */

.portfolio-note {
padding: 70px 20px;

text-align: center;

}

.portfolio-note .section-label {
margin-bottom: 8px;
}

.portfolio-note p {
color: var(--text-muted);

font-size: 11px;

}

/* =========================================================
PORTFOLIO RESPONSIVE
========================================================= */

@media (max-width: 900px) {

.portfolio-heading {
    align-items: flex-start;

    flex-direction: column;

    gap: 20px;
}

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

.project-preview {
    min-height: 400px;
}

.project-info {
    border-left: 0;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    padding: 40px;
}

}

@media (max-width: 720px) {

.portfolio-heading h2 {
    font-size: 38px;
}

.portfolio-heading > p {
    font-size: 11px;
}

.project-preview {
    min-height: 380px;

    padding: 15px;
}

.browser-window {
    width: 100%;

    transform: none;
}

.project-card:hover .browser-window {
    transform: none;
}

.preview-content {
    min-height: 190px;

    padding: 25px 20px;
}

.preview-boxes {
    margin-top: 22px;
}

.preview-boxes span {
    height: 45px;
}

.concept-window {
    width: 95%;
}

.concept-content {
    min-height: 170px;
}

.project-info {
    padding: 32px 25px;
}

.project-info h3 {
    font-size: 25px;
}

.project-info > p {
    font-size: 11px;
}

.portfolio-note {
    padding: 50px 15px;
}

}
/* =========================================================
CONTACT PAGE
========================================================= */

.contact-hero {
min-height: 55vh;
}

/* =========================================================
CONTACT GRID
========================================================= */

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

.contact-grid {
display: grid;

grid-template-columns: 0.85fr 1.15fr;

gap: 80px;

align-items: start;

}

/* =========================================================
CONTACT INFORMATION
========================================================= */

.contact-info {
padding-top: 15px;
}

.contact-info h2 {
max-width: 520px;

margin: 18px 0 20px;

font-family: "Space Grotesk", sans-serif;

font-size: clamp(38px, 4vw, 52px);

line-height: 1.05;

letter-spacing: -2px;

}

.contact-info h2 span {
display: block;

color: #a78bfa;

}

.contact-description {
max-width: 450px;

margin-bottom: 40px;

color: var(--text-soft);

font-size: 13px;

line-height: 1.85;

}

/* ---------- CONTACT DETAILS ---------- */

.contact-details {
display: flex;

flex-direction: column;

border-top: 1px solid var(--border);

}

.contact-detail {
display: flex;

align-items: center;

gap: 16px;

padding: 18px 0;

border-bottom: 1px solid var(--border);

transition: 0.3s ease;

}

.contact-detail:hover {
padding-left: 7px;
}

.contact-detail-icon {
width: 42px;
height: 42px;

flex-shrink: 0;

display: grid;
place-items: center;

border: 1px solid rgba(167, 139, 250, 0.18);

border-radius: 11px;

background: rgba(139, 92, 246, 0.07);

color: #bca8ff;

font-size: 14px;

}

.contact-detail div:last-child {
display: flex;

flex-direction: column;

gap: 5px;

}

.contact-detail span {
color: #666974;

font-size: 9px;

text-transform: uppercase;

letter-spacing: 1px;

}

.contact-detail strong {
color: #e7e7eb;

font-family: "Space Grotesk", sans-serif;

font-size: 12px;

font-weight: 600;

}

/* ---------- CONTACT NOTE ---------- */

.contact-note {
margin-top: 30px;

padding: 18px;

border: 1px solid rgba(139, 92, 246, 0.13);

border-radius: 12px;

background: rgba(139, 92, 246, 0.035);

}

.contact-note > span {
display: block;

margin-bottom: 7px;

color: #a78bfa;

font-family: "Space Grotesk", sans-serif;

font-size: 9px;

letter-spacing: 1px;

}

.contact-note p {
color: var(--text-muted);

font-size: 10px;

line-height: 1.7;

}

/* =========================================================
CONTACT FORM
========================================================= */

.contact-form-wrapper {
padding: 35px;

border: 1px solid var(--border);

border-radius: 20px;

background:
    linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.025),
        rgba(255, 255, 255, 0.01)
    );

box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);

}

.form-header {
margin-bottom: 32px;
}

.form-header h3 {
margin-top: 12px;

font-family: "Space Grotesk", sans-serif;

font-size: 25px;

letter-spacing: -0.7px;

}

/* ---------- FORM ROW ---------- */

.form-row {
display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 14px;

}

/* ---------- FORM GROUP ---------- */

.form-group {
display: flex;

flex-direction: column;

gap: 8px;

margin-bottom: 17px;

}

.form-group label {
color: #9a9ca5;

font-size: 10px;

font-weight: 600;

}

/* ---------- INPUTS ---------- */

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;

border: 1px solid rgba(255, 255, 255, 0.08);

border-radius: 9px;

outline: none;

background: rgba(255, 255, 255, 0.025);

color: #eeeeF1;

font-family: "Inter", sans-serif;

font-size: 11px;

transition: 0.3s ease;

}

.form-group input,
.form-group select {
height: 46px;

padding: 0 14px;

}

.form-group textarea {
min-height: 125px;

padding: 13px 14px;

resize: vertical;

}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #50525c;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: rgba(167, 139, 250, 0.45);

background: rgba(139, 92, 246, 0.025);

box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.06);

}

/* SELECT */

.form-group select {
appearance: none;

cursor: pointer;

background-image:
    linear-gradient(45deg, transparent 50%, #777 50%),
    linear-gradient(135deg, #777 50%, transparent 50%);

background-position:
    calc(100% - 17px) 19px,
    calc(100% - 12px) 19px;

background-size:
    5px 5px,
    5px 5px;

background-repeat: no-repeat;

}

.form-group select option {
background: #11131a;

color: white;

}

/* ---------- SUBMIT ---------- */

.form-submit {
width: 100%;

justify-content: center;

margin-top: 5px;

border: none;

cursor: pointer;

}

.form-small-text {
margin-top: 13px;

text-align: center;

color: #555862;

font-size: 9px;

line-height: 1.6;

}

/* =========================================================
FAQ
========================================================= */

.faq-section {
background: #0a0b10;

border-top: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}

.faq-heading {
max-width: 550px;

margin-bottom: 45px;

}

.faq-heading h2 {
margin-top: 15px;

font-family: "Space Grotesk", sans-serif;

font-size: clamp(38px, 4vw, 52px);

line-height: 1.05;

letter-spacing: -2px;

}

.faq-heading h2 span {
color: #a78bfa;
}

/* ---------- FAQ ITEMS ---------- */

.faq-list {
max-width: 850px;

margin: auto;

border-top: 1px solid var(--border);

}

.faq-item {
border-bottom: 1px solid var(--border);
}

.faq-item summary {
display: flex;

align-items: center;
justify-content: space-between;

gap: 20px;

padding: 23px 5px;

color: #e6e6ea;

font-family: "Space Grotesk", sans-serif;

font-size: 13px;
font-weight: 600;

cursor: pointer;

list-style: none;

}

.faq-item summary::-webkit-details-marker {
display: none;
}

.faq-item summary span {
flex-shrink: 0;

color: #a78bfa;

font-size: 18px;

font-weight: 400;

transition: 0.3s ease;

}

.faq-item[open] summary span {
transform: rotate(45deg);
}

.faq-item p {
max-width: 700px;

padding: 0 35px 23px 5px;

color: var(--text-muted);

font-size: 11px;

line-height: 1.8;

}

/* =========================================================
CONTACT RESPONSIVE
========================================================= */

@media (max-width: 950px) {

.contact-grid {
    grid-template-columns: 1fr;

    gap: 55px;
}

.contact-info {
    max-width: 700px;
}

}

@media (max-width: 650px) {

.contact-info h2 {
    font-size: 37px;

    letter-spacing: -1.5px;
}

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

    border-radius: 16px;
}

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

    gap: 0;
}

.form-header h3 {
    font-size: 22px;
}

.faq-heading h2 {
    font-size: 37px;
}

.faq-item summary {
    font-size: 12px;

    padding: 20px 2px;
}

.faq-item p {
    padding-left: 2px;
}

}
/* =========================================================
MEET THE PEOPLE
========================================================= */

.people-section {
    background: #08090d;
}

.people-heading {
    margin-bottom: 55px;
}

.people-heading h2 {
    margin-top: 15px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(40px, 4vw, 56px);

    line-height: 1;

    letter-spacing: -2px;
}

.people-heading h2 span {
    color: #a78bfa;
}


/* ---------- PERSON ROW ---------- */

.person-row {
    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 55px;

    padding: 45px 0;

    border-top: 1px solid var(--border);

    transition: 0.35s ease;
}

.person-row:last-child {
    border-bottom: 1px solid var(--border);
}

.person-row:hover {
    padding-left: 10px;
}


/* ---------- NUMBER ---------- */

.person-number {
    padding-top: 7px;

    color: #555762;

    font-family: "Space Grotesk", sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.2px;
}


/* ---------- CONTENT ---------- */

.person-content {
    max-width: 700px;
}

.person-title {
    margin-bottom: 18px;
}

.person-title h3 {
    margin-bottom: 6px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(28px, 3vw, 38px);

    line-height: 1.1;

    letter-spacing: -1.2px;
}

.person-title span {
    color: #a78bfa;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.5px;
}

.person-content > p {
    max-width: 650px;

    margin-bottom: 23px;

    color: var(--text-soft);

    font-size: 13px;

    line-height: 1.85;
}


/* ---------- TAGS ---------- */

.person-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.person-tags span {
    padding: 7px 10px;

    border: 1px solid var(--border);

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.02);

    color: #888b96;

    font-size: 9px;

    transition: 0.3s ease;
}

.person-tags span:hover {
    border-color: rgba(167, 139, 250, 0.3);

    color: #bba8ff;

    background: rgba(139, 92, 246, 0.05);
}


/* =========================================================
PEOPLE RESPONSIVE
========================================================= */

@media (max-width: 720px) {

    .people-heading {
        margin-bottom: 35px;
    }

    .people-heading h2 {
        font-size: 37px;

        letter-spacing: -1.5px;
    }

    .person-row {
        grid-template-columns: 1fr;

        gap: 15px;

        padding: 32px 0;
    }

    .person-row:hover {
        padding-left: 5px;
    }

    .person-number {
        padding-top: 0;

        font-size: 9px;
    }

    .person-title h3 {
        font-size: 27px;
    }

    .person-content > p {
        font-size: 11px;

        line-height: 1.8;
    }

    .person-tags span {
        font-size: 8px;

        padding: 6px 8px;
    }

}