/* =========================================================
main.css
Modern Belmiro Mohlala Portfolio
========================================================= */

:root {
--bg: #070a12;
--bg-soft: #0b1020;
--surface: #101625;
--surface-light: #151c2e;
--border: rgba(255,255,255,0.09);
--border-hover: rgba(255,255,255,0.18);


--text: #f5f7fb;
--text-soft: #aab2c4;
--text-muted: #70798d;

--accent: #ff6b00;
--accent-light: #ff9b4a;
--accent-soft: rgba(255,107,0,0.12);

--green: #38d996;
--blue: #5b8cff;

--max-width: 1180px;

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

--radius: 20px;
--radius-small: 12px;

--header-height: 78px;


}

/* =========================
RESET
========================= */

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

html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}

body {
width: 100%;
min-height: 100%;
background: var(--bg);
color: var(--text);
font-family: "Inter", Arial, sans-serif;
line-height: 1.7;
overflow-x: hidden;
}

body.menu-open {
overflow: hidden;
}

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

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

button,
input,
textarea {
font: inherit;
}

button {
cursor: pointer;
}

::selection {
color: #fff;
background: var(--accent);
}

/* =========================
SCROLLBAR
========================= */

::-webkit-scrollbar {
width: 9px;
}

::-webkit-scrollbar-track {
background: #070a12;
}

::-webkit-scrollbar-thumb {
background: #272f42;
border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}

/* =========================
LOADER
========================= */

.page-loader {
position: fixed;
inset: 0;
z-index: 99999;


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

background: var(--bg);

transition:
    opacity 0.5s ease,
    visibility 0.5s ease;


}

.page-loader.hidden {
opacity: 0;
visibility: hidden;
}

.loader-content {
width: 220px;
text-align: center;
}

.loader-logo {
margin-bottom: 20px;


color: var(--accent);

font-family: "Space Grotesk", sans-serif;
font-size: 2rem;
font-weight: 700;


}

.loader-line {
width: 100%;
height: 2px;


overflow: hidden;

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


}

.loader-line span {
display: block;


width: 45%;
height: 100%;

background: var(--accent);

animation: loader 1.1s infinite ease-in-out;


}

.loader-content p {
margin-top: 12px;


color: var(--text-muted);
font-size: 0.75rem;


}

@keyframes loader {


0% {
    transform: translateX(-120%);
}

100% {
    transform: translateX(350%);
}


}

/* =========================
HEADER
========================= */

.site-header {
position: fixed;
top: 0;
left: 0;


width: 100%;
height: var(--header-height);

z-index: 1000;

border-bottom: 1px solid transparent;

transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;


}

.site-header.scrolled {
background: rgba(7,10,18,0.86);
border-bottom-color: var(--border);


box-shadow:
    0 10px 40px rgba(0,0,0,0.18);

backdrop-filter: blur(18px);


}

.nav-container {
width: min(
calc(100% - 48px),
var(--max-width)
);


height: 100%;
margin: auto;

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


}

.brand {
display: inline-flex;
align-items: center;
gap: 10px;


white-space: nowrap;


}

.brand-mark {
color: var(--accent);


font-family: "Space Grotesk", sans-serif;
font-size: 1rem;
font-weight: 700;


}

.brand-name {
color: var(--text);


font-family: "Space Grotesk", sans-serif;
font-size: 1.15rem;
font-weight: 700;


}

.brand-name > span {
color: var(--accent);
}

.main-navigation {
display: flex;
align-items: center;
gap: 30px;
}

.nav-link {
position: relative;


color: var(--text-soft);

font-size: 0.82rem;
font-weight: 500;

transition: color 0.25s ease;


}

.nav-link::after {
content: "";


position: absolute;

left: 50%;
bottom: -9px;

width: 0;
height: 2px;

background: var(--accent);

transform: translateX(-50%);

transition: width 0.25s ease;


}

.nav-link:hover,
.nav-link.active {
color: #fff;
}

.nav-link:hover::after,
.nav-link.active::after {
width: 18px;
}

.nav-cta {
display: inline-flex;
align-items: center;
gap: 8px;


padding: 10px 17px;

border: 1px solid rgba(255,107,0,0.35);
border-radius: 10px;

background: var(--accent-soft);
color: var(--accent-light);

font-size: 0.8rem;
font-weight: 600;

transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;


}

.nav-cta:hover {
background: var(--accent);
color: #fff;


transform: translateY(-2px);


}

.mobile-menu-button {
display: none;


width: 42px;
height: 42px;

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

background: var(--surface);

align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;


}

.mobile-menu-button span {
width: 18px;
height: 2px;


background: #fff;

transition:
    transform 0.25s ease,
    opacity 0.25s ease;


}

.mobile-menu-button.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}

.mobile-menu-button.open span:nth-child(2) {
opacity: 0;
}

.mobile-menu-button.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

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

main {
overflow: hidden;
}

.section {
position: relative;


padding: 120px 0;


}

.section-container {
width: min(
calc(100% - 48px),
var(--max-width)
);


margin: 0 auto;


}

.section-heading {
max-width: 720px;
margin-bottom: 55px;
}

.section-heading.centered {
margin-left: auto;
margin-right: auto;
text-align: center;
}

.section-label {
display: flex;
align-items: center;
gap: 12px;


margin-bottom: 16px;

color: var(--accent);

font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;


}

.centered .section-label {
justify-content: center;
}

.section-label span {
color: var(--text-muted);
font-family: "Space Grotesk", sans-serif;
}

.section-heading h2 {
color: var(--text);


font-family: "Space Grotesk", sans-serif;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.12;
letter-spacing: -0.04em;


}

.section-heading h2 span {
color: var(--text-soft);
}

.section-heading > p {
max-width: 650px;
margin: 18px auto 0;


color: var(--text-soft);
font-size: 0.95rem;


}

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

.hero-section {
min-height: 100vh;
min-height: 100svh;


display: flex;
align-items: center;

padding-top: calc(var(--header-height) + 60px);
padding-bottom: 70px;

background:
    radial-gradient(
        circle at 80% 25%,
        rgba(255,107,0,0.09),
        transparent 25%
    ),
    radial-gradient(
        circle at 15% 70%,
        rgba(61,100,255,0.06),
        transparent 25%
    ),
    var(--bg);


}

.hero-grid {
position: absolute;
inset: 0;


background-image:
    linear-gradient(
        rgba(255,255,255,0.025) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,0.025) 1px,
        transparent 1px
    );

background-size: 55px 55px;

mask-image: linear-gradient(
    to bottom,
    black,
    transparent 90%
);

pointer-events: none;


}

.hero-glow {
position: absolute;


width: 320px;
height: 320px;

border-radius: 50%;

filter: blur(100px);

pointer-events: none;

opacity: 0.08;


}

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

.hero-glow-two {
bottom: 10%;
left: 5%;
background: var(--blue);
}

.hero-container {
position: relative;
z-index: 2;


width: min(
    calc(100% - 48px),
    var(--max-width)
);

margin: auto;

display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 80px;


}

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


margin-bottom: 25px;
padding: 7px 12px;

border: 1px solid rgba(56,217,150,0.2);
border-radius: 50px;

background: rgba(56,217,150,0.06);

color: #9be8c8;

font-size: 0.72rem;
font-weight: 500;


}

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


border-radius: 50%;

background: var(--green);

box-shadow:
    0 0 0 4px rgba(56,217,150,0.08);

animation: pulse 2s infinite;


}

@keyframes pulse {


0%,
100% {
    box-shadow:
        0 0 0 3px rgba(56,217,150,0.08);
}

50% {
    box-shadow:
        0 0 0 7px rgba(56,217,150,0.03);
}


}

.hero-eyebrow {
display: flex;
align-items: center;
gap: 10px;


margin-bottom: 18px;

color: var(--accent);

font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.17em;


}

.hero-eyebrow span {
width: 32px;
height: 1px;


background: var(--accent);


}

.hero-title {
max-width: 750px;


color: #fff;

font-family: "Space Grotesk", sans-serif;
font-size: clamp(3rem, 6vw, 5.4rem);
font-weight: 700;
line-height: 0.99;
letter-spacing: -0.065em;


}

.gradient-text {
display: inline;


color: var(--accent);

background:
    linear-gradient(
        100deg,
        #ff6b00,
        #ffad66
    );

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


}

.hero-description {
max-width: 610px;
margin-top: 28px;


color: var(--text-soft);

font-size: 1rem;


}

.hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;


margin-top: 32px;


}

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


min-height: 48px;
padding: 0 20px;

border: 1px solid transparent;
border-radius: 10px;

font-size: 0.82rem;
font-weight: 600;

transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;


}

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

.btn-primary {
background: var(--accent);
color: #fff;


box-shadow:
    0 10px 30px rgba(255,107,0,0.18);


}

.btn-primary:hover {
background: #ff7c1f;


box-shadow:
    0 14px 35px rgba(255,107,0,0.25);


}

.btn-secondary {
border-color: var(--border);


background: rgba(255,255,255,0.025);
color: #fff;


}

.btn-secondary:hover {
border-color: rgba(255,255,255,0.2);
background: rgba(255,255,255,0.06);
}

.hero-links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px;


margin-top: 25px;

color: var(--text-muted);

font-size: 0.75rem;


}

.hero-links a {
display: inline-flex;
align-items: center;
gap: 7px;


transition: color 0.2s ease;


}

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

.hero-links > span {
width: 3px;
height: 3px;


border-radius: 50%;

background: var(--text-muted);


}

/* =========================
CODE WINDOW
========================= */

.hero-visual {
position: relative;
}

.code-window {
overflow: hidden;


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

background: rgba(13,18,31,0.88);

box-shadow: var(--shadow);

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

transition: transform 0.4s ease;


}

.code-window:hover {
transform:
perspective(1000px)
rotateY(0)
rotateX(0);
}

.window-top {
height: 48px;


display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;

padding: 0 15px;

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

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


}

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

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


border-radius: 50%;

background: #41495b;


}

.window-controls span:nth-child(1) {
background: #ff6b6b;
}

.window-controls span:nth-child(2) {
background: #ffd166;
}

.window-controls span:nth-child(3) {
background: #52d273;
}

.window-title {
color: var(--text-muted);


font-size: 0.68rem;


}

.window-status {
text-align: right;


color: var(--green);

font-size: 0.45rem;


}

.code-body {
padding: 26px 22px 22px;


font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

font-size: 0.75rem;
line-height: 2;


}

.code-line {
display: grid;
grid-template-columns: 28px auto auto auto auto auto;
gap: 6px;


min-height: 24px;


}

.code-line.indent {
padding-left: 22px;
}

.code-line.double-indent {
padding-left: 45px;
}

.code-number {
color: #3d4658;
user-select: none;
}

.code-purple {
color: #c792ea;
}

.code-blue {
color: #82aaff;
}

.code-green {
color: #c3e88d;
}

.code-yellow {
color: #ffcb6b;
}

.code-white {
color: #d8dee9;
}

.code-symbol {
color: #89ddff;
}

.terminal-line {
display: flex;
align-items: center;
gap: 8px;


margin-top: 22px;
padding: 10px 12px;

border: 1px solid rgba(56,217,150,0.12);
border-radius: 8px;

background: rgba(56,217,150,0.035);

color: var(--text-soft);

font-size: 0.68rem;


}

.terminal-symbol {
color: var(--green);
}

.terminal-cursor {
width: 5px;
height: 12px;


background: var(--green);

animation: cursorBlink 1s infinite;


}

@keyframes cursorBlink {


0%,
45% {
    opacity: 1;
}

46%,
100% {
    opacity: 0;
}


}

.floating-card {
position: absolute;


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

padding: 11px 14px;

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

background: rgba(16,22,37,0.92);

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

backdrop-filter: blur(12px);

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


}

.floating-card-one {
left: -35px;
bottom: 12%;
}

.floating-card-two {
right: -25px;
top: 12%;


animation-delay: -2s;


}

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


display: grid;
place-items: center;

border-radius: 9px;

background: var(--accent-soft);
color: var(--accent);

font-size: 0.75rem;


}

.floating-icon.green {
background: rgba(56,217,150,0.09);
color: var(--green);
}

.floating-card strong {
display: block;


color: #fff;

font-family: "Space Grotesk", sans-serif;
font-size: 0.9rem;


}

.floating-card span {
display: block;


color: var(--text-muted);

font-size: 0.6rem;


}

@keyframes floating {


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

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


}

.hero-scroll {
position: absolute;


left: 50%;
bottom: 25px;

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

color: var(--text-muted);

font-size: 0.65rem;

transform: translateX(-50%);


}

.hero-scroll i {
color: var(--accent);


animation: scrollArrow 1.5s infinite;


}

@keyframes scrollArrow {


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

50% {
    transform: translateY(4px);
}


}

/* =========================
ABOUT
========================= */

.about-section {
background: var(--bg-soft);
}

.about-grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
align-items: center;
gap: 90px;
}

.about-image {
position: relative;
max-width: 390px;
}

.image-frame {
position: relative;


padding: 10px;

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

background: var(--surface);


}

.image-frame img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;


border-radius: 17px;

filter: saturate(0.9);


}

.image-frame-accent {
position: absolute;


right: -9px;
bottom: -9px;

width: 90px;
height: 90px;

border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);

border-radius: 0 0 20px 0;

pointer-events: none;


}

.experience-badge {
position: absolute;


right: -35px;
bottom: 30px;

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

padding: 13px 17px;

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

background: var(--surface-light);

box-shadow: var(--shadow);


}

.experience-badge strong {
color: var(--accent);


font-family: "Space Grotesk", sans-serif;
font-size: 1.7rem;


}

.experience-badge span {
color: var(--text-soft);


font-size: 0.65rem;
line-height: 1.35;


}

.about-content {
max-width: 680px;
}

.about-content p {
margin-bottom: 17px;


color: var(--text-soft);

font-size: 0.94rem;


}

.about-content .lead-text {
color: #fff;


font-size: 1.12rem;
font-weight: 500;


}

.about-highlights {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 13px;


margin: 30px 0;


}

.about-highlights div {
display: flex;
align-items: center;
gap: 9px;


color: var(--text-soft);

font-size: 0.76rem;


}

.about-highlights i {
color: var(--green);
font-size: 0.65rem;
}

.text-link {
display: inline-flex;
align-items: center;
gap: 8px;


color: var(--accent);

font-size: 0.8rem;
font-weight: 600;

transition: gap 0.25s ease;


}

.text-link:hover {
gap: 13px;
}

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

.services-section {
background: var(--bg);
}

.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}

.service-card {
position: relative;


min-height: 310px;
padding: 28px;

overflow: hidden;

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

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.035),
        rgba(255,255,255,0.012)
    );

transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;


}

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


position: absolute;

left: 0;
top: 0;

width: 100%;
height: 2px;

background:
    linear-gradient(
        90deg,
        var(--accent),
        transparent
    );

transform: scaleX(0);
transform-origin: left;

transition: transform 0.3s ease;


}

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


border-color: rgba(255,107,0,0.25);

background:
    linear-gradient(
        145deg,
        rgba(255,107,0,0.055),
        rgba(255,255,255,0.012)
    );


}

.service-card:hover::before {
transform: scaleX(1);
}

.service-number {
position: absolute;


top: 20px;
right: 23px;

color: rgba(255,255,255,0.06);

font-family: "Space Grotesk", sans-serif;
font-size: 2.2rem;
font-weight: 700;


}

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


display: grid;
place-items: center;

margin-bottom: 28px;

border: 1px solid rgba(255,107,0,0.18);
border-radius: 12px;

background: var(--accent-soft);
color: var(--accent);

font-size: 1rem;


}

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


color: #fff;

font-family: "Space Grotesk", sans-serif;
font-size: 1.1rem;


}

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


font-size: 0.78rem;
line-height: 1.75;


}

.service-tags,
.technology-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.service-tags {
margin-top: 23px;
}

.service-tags span,
.technology-list span {
padding: 4px 8px;


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

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

color: var(--text-muted);

font-size: 0.58rem;


}

/* =========================
SKILLS
========================= */

.skills-section {
background: var(--bg-soft);
}

.skills-layout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 80px;
align-items: start;
}

.terminal-card {
overflow: hidden;


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

background: #090d17;

box-shadow: var(--shadow);


}

.terminal-header {
height: 45px;


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

padding: 0 15px;

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

color: var(--text-muted);


}

.terminal-header > div {
display: flex;
gap: 5px;
}

.terminal-header span {
width: 8px;
height: 8px;


border-radius: 50%;

background: #3a4252;


}

.terminal-header span:nth-child(1) {
background: #ff6b6b;
}

.terminal-header span:nth-child(2) {
background: #ffd166;
}

.terminal-header span:nth-child(3) {
background: #52d273;
}

.terminal-header small {
font-size: 0.6rem;
}

.terminal-content {
padding: 25px;


color: var(--text-soft);

font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

font-size: 0.72rem;


}

.terminal-content p {
margin-bottom: 11px;
}

.terminal-green {
color: var(--green);
}

.terminal-output {
color: #7e899e;
padding-left: 16px;
}

.terminal-blink {
color: var(--green);


animation: cursorBlink 1s infinite;


}

.skills-list {
display: grid;
gap: 21px;
}

.skill-info {
display: flex;
align-items: center;
justify-content: space-between;


margin-bottom: 8px;


}

.skill-info span {
display: flex;
align-items: center;
gap: 8px;


color: #e9edf5;

font-size: 0.78rem;
font-weight: 500;


}

.skill-info i {
width: 18px;


color: var(--accent);

text-align: center;


}

.skill-info small {
color: var(--text-muted);


font-size: 0.6rem;


}

.skill-bar {
width: 100%;
height: 4px;


overflow: hidden;

border-radius: 10px;

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


}

.skill-bar span {
display: block;


width: 0;
height: 100%;

border-radius: inherit;

background:
    linear-gradient(
        90deg,
        var(--accent),
        var(--accent-light)
    );

transition: width 1.2s cubic-bezier(0.16,1,0.3,1);


}

.skill-bar span.animate {
width: var(--skill-width);
}

/* =========================
EDUCATION
========================= */

.education-section {
background: var(--bg);
}

.education-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;


margin-bottom: 18px;


}

.education-card {
display: flex;
gap: 20px;


padding: 28px;

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

background: var(--surface);


}

.education-icon {
flex: 0 0 46px;


width: 46px;
height: 46px;

display: grid;
place-items: center;

border-radius: 12px;

background: var(--accent-soft);
color: var(--accent);


}

.education-label {
display: block;


margin-bottom: 5px;

color: var(--accent);

font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;


}

.education-card h3,
.certificate-card h3 {
margin-bottom: 10px;


color: #fff;

font-family: "Space Grotesk", sans-serif;
font-size: 1.05rem;


}

.education-card ul {
padding-left: 17px;


color: var(--text-muted);

font-size: 0.75rem;


}

.certificate-card {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
align-items: center;
gap: 35px;


padding: 25px;

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

background: var(--surface);


}

.certificate-content p {
max-width: 430px;
margin-bottom: 17px;


color: var(--text-muted);

font-size: 0.78rem;


}

.certificate-image {
overflow: hidden;


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


}

.certificate-image img {
width: 100%;
}

/* =========================
PROJECTS
========================= */

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

.projects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}

.project-card {
overflow: hidden;


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

background: var(--surface);

transition:
    transform 0.3s ease,
    border-color 0.3s ease;


}

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


border-color: var(--border-hover);


}

.project-card.featured {
grid-column: span 2;


display: grid;
grid-template-columns: 1.25fr 0.75fr;


}

.project-image {
position: relative;


overflow: hidden;

background: #05070c;


}

.project-image img {
width: 100%;
height: 100%;
min-height: 240px;


object-fit: cover;

transition:
    transform 0.5s ease,
    filter 0.5s ease;


}

.project-card:hover .project-image img {
transform: scale(1.045);


filter: brightness(0.7);


}

.project-overlay {
position: absolute;
inset: 0;


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

background: rgba(7,10,18,0.48);

opacity: 0;

transition: opacity 0.3s ease;


}

.project-card:hover .project-overlay {
opacity: 1;
}

.project-overlay a {
width: 46px;
height: 46px;


display: grid;
place-items: center;

border: 1px solid rgba(255,255,255,0.15);
border-radius: 50%;

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

color: #fff;

backdrop-filter: blur(10px);

transition:
    transform 0.2s ease,
    background 0.2s ease;


}

.project-overlay a:hover {
background: var(--accent);


transform: scale(1.08);


}

.project-actions {
gap: 9px;
}

.project-featured {
position: absolute;


top: 15px;
left: 15px;

padding: 5px 9px;

border: 1px solid rgba(255,107,0,0.2);
border-radius: 5px;

background: rgba(255,107,0,0.85);

color: #fff;

font-size: 0.58rem;
font-weight: 700;


}

.project-content {
padding: 26px;
}

.project-meta {
margin-bottom: 9px;


color: var(--accent);

font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;


}

.project-content h3 {
margin-bottom: 10px;


color: #fff;

font-family: "Space Grotesk", sans-serif;
font-size: 1.2rem;


}

.project-content p {
margin-bottom: 18px;


color: var(--text-muted);

font-size: 0.76rem;
line-height: 1.7;


}

.technology-list {
margin-bottom: 22px;
}

.project-link {
display: inline-flex;
align-items: center;
gap: 8px;


color: #fff;

font-size: 0.72rem;
font-weight: 600;

transition:
    color 0.2s ease,
    gap 0.2s ease;


}

.project-link:hover {
gap: 12px;
color: var(--accent);
}

.projects-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;


margin-top: 45px;


}

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


font-size: 0.8rem;


}

/* =========================
TESTIMONIALS
========================= */

.testimonials-section {
background: var(--bg);
}

.testimonials-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}

.testimonial-card {
position: relative;


padding: 34px;

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

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.035),
        rgba(255,255,255,0.012)
    );


}

.quote-icon {
position: absolute;


top: 25px;
right: 28px;

color: rgba(255,107,0,0.12);

font-size: 2.3rem;


}

.stars {
display: flex;
gap: 4px;


margin-bottom: 23px;

color: #ffb020;

font-size: 0.62rem;


}

.testimonial-card blockquote {
margin-bottom: 16px;


color: #e8ecf4;

font-size: 0.87rem;
line-height: 1.8;


}

.testimonial-detail {
color: var(--text-muted);


font-size: 0.75rem;
font-style: italic;


}

.testimonial-author {
display: flex;
align-items: center;
gap: 11px;


margin-top: 27px;
padding-top: 20px;

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


}

.author-avatar {
width: 37px;
height: 37px;


display: grid;
place-items: center;

border-radius: 50%;

background: var(--accent-soft);
color: var(--accent);

font-size: 0.6rem;
font-weight: 700;


}

.testimonial-author strong {
display: block;


color: #fff;

font-size: 0.72rem;


}

.testimonial-author span {
display: block;


color: var(--text-muted);

font-size: 0.6rem;


}

.review-link {
display: inline-flex;
align-items: center;
gap: 7px;


margin-top: 18px;

color: var(--text-muted);

font-size: 0.62rem;

transition: color 0.2s ease;


}

.review-link:hover {
color: var(--accent);
}

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

.contact-section {
background: var(--bg-soft);
}

.contact-wrapper {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 70px;
align-items: start;
}

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


margin: 15px 0 20px;

color: #fff;

font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.2rem, 4vw, 3.6rem);
line-height: 1.05;
letter-spacing: -0.04em;


}

.contact-content h2 span {
color: var(--accent);
}

.contact-content > p {
max-width: 550px;


margin-bottom: 35px;

color: var(--text-soft);

font-size: 0.86rem;


}

.contact-details {
display: grid;
gap: 15px;
}

.contact-details > a,
.contact-location {
display: flex;
align-items: center;
gap: 13px;
}

.contact-details > a:hover strong {
color: var(--accent);
}

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


flex: 0 0 42px;

display: grid;
place-items: center;

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

background: var(--surface);

color: var(--accent);

font-size: 0.8rem;


}

.contact-icon.whatsapp {
color: var(--green);
}

.contact-details small {
display: block;


color: var(--text-muted);

font-size: 0.6rem;


}

.contact-details strong {
display: block;


color: #e9edf5;

font-size: 0.74rem;
font-weight: 500;

transition: color 0.2s ease;


}

.social-links {
display: flex;
gap: 8px;


margin-top: 30px;


}

.social-links a {
width: 38px;
height: 38px;


display: grid;
place-items: center;

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

background: var(--surface);

color: var(--text-muted);

font-size: 0.75rem;

transition:
    transform 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;


}

.social-links a:hover {
transform: translateY(-3px);


border-color: rgba(255,107,0,0.3);

color: var(--accent);


}

.contact-form-card {
padding: 30px;


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

background: var(--surface);

box-shadow: var(--shadow);


}

.form-header {
display: flex;
align-items: center;
gap: 9px;


margin-bottom: 25px;

color: #fff;

font-family: "Space Grotesk", sans-serif;
font-size: 0.9rem;
font-weight: 600;


}

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


border-radius: 50%;

background: var(--green);

box-shadow:
    0 0 0 4px rgba(56,217,150,0.08);


}

.form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 13px;
}

.form-group {
margin-bottom: 16px;
}

.form-group label {
display: block;


margin-bottom: 7px;

color: #c9cfda;

font-size: 0.67rem;
font-weight: 500;


}

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


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

outline: none;

background: #0b101c;
color: #fff;

font-size: 0.75rem;

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;


}

.form-group input {
height: 45px;
padding: 0 13px;
}

.form-group textarea {
min-height: 140px;
padding: 12px 13px;


resize: vertical;


}

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

.form-group input:focus,
.form-group textarea:focus {
border-color: rgba(255,107,0,0.5);


box-shadow:
    0 0 0 3px rgba(255,107,0,0.07);


}

.submit-button {
width: 100%;


margin-top: 3px;


}

.submit-button.sending {
pointer-events: none;
opacity: 0.8;
}

.form-note {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;


margin-top: 15px;

color: var(--text-muted);

font-size: 0.58rem;


}

.form-note i {
color: var(--green);
}

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

.site-footer {
border-top: 1px solid var(--border);


background: #05070d;


}

.footer-container {
width: min(
calc(100% - 48px),
var(--max-width)
);


margin: auto;
padding: 40px 0;

display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 30px;


}

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


margin-top: 10px;

color: var(--text-muted);

font-size: 0.65rem;


}

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

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


font-size: 0.65rem;

transition: color 0.2s ease;


}

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

.footer-copy {
text-align: right;
}

.footer-copy p {
color: #4e5769;


font-size: 0.6rem;


}

/* =========================
BACK TO TOP
========================= */

.back-to-top {
position: fixed;


right: 25px;
bottom: 25px;

z-index: 500;

width: 42px;
height: 42px;

display: grid;
place-items: center;

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

background: rgba(16,22,37,0.92);

color: var(--text);

opacity: 0;
visibility: hidden;

transform: translateY(10px);

transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background 0.25s ease;


}

.back-to-top.visible {
opacity: 1;
visibility: visible;


transform: translateY(0);


}

.back-to-top:hover {
background: var(--accent);


border-color: var(--accent);


}

/* =========================
REVEAL ANIMATIONS
========================= */

.reveal {
opacity: 0;


transform: translateY(25px);

transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.16,1,0.3,1);


}

.reveal.revealed {
opacity: 1;


transform: translateY(0);


}

/* =========================
ACCESSIBILITY
========================= */

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}

/* =========================================================
desktop.css
========================================================= */

@media only screen and (min-width: 993px) {


.hero-content {
    padding-bottom: 30px;
}


}

/* =========================================================
tablet.css
========================================================= */

@media only screen and (min-width: 601px) and (max-width: 992px) {


:root {
    --header-height: 70px;
}


.section {
    padding: 95px 0;
}


.section-container,
.nav-container,
.hero-container {
    width: min(
        calc(100% - 40px),
        760px
    );
}


.mobile-menu-button {
    display: flex;
}


.main-navigation {
    position: fixed;

    top: var(--header-height);
    right: 20px;

    width: 280px;

    padding: 20px;

    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;

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

    background: rgba(12,17,29,0.97);

    box-shadow: var(--shadow);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}


.main-navigation.open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.nav-link {
    padding: 11px;
}


.nav-link::after {
    display: none;
}


.nav-cta {
    margin-top: 8px;
    justify-content: center;
}


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

    gap: 65px;
}


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


.availability-badge,
.hero-eyebrow {
    justify-content: center;
}


.hero-description {
    margin-left: auto;
    margin-right: auto;
}


.hero-actions,
.hero-links {
    justify-content: center;
}


.hero-visual {
    width: min(100%, 650px);
    margin: auto;
}


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


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

    gap: 50px;
}


.about-image {
    margin: auto;
}


.about-content {
    margin: auto;
}


.skills-layout {
    grid-template-columns: 1fr;

    gap: 45px;
}


.terminal-card {
    max-width: 650px;
    margin: auto;
}


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


.project-card.featured {
    grid-column: span 2;

    grid-template-columns: 1fr;
}


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


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

    gap: 50px;
}


.contact-content {
    max-width: 650px;
    margin: auto;
}


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


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


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

    text-align: center;
}


.footer-brand p {
    margin-left: auto;
    margin-right: auto;
}


.footer-links {
    justify-content: center;
}


.footer-copy {
    text-align: center;
}


}

/* =========================================================
phone.css
========================================================= */

@media only screen and (max-width: 600px) {


:root {
    --header-height: 66px;
}

.gradient-text {
    font-size: 25px !important;
}

.section {
    padding: 80px 0;
}


.section-container,
.nav-container,
.hero-container {
    width: calc(100% - 30px);
}


.site-header {
    height: var(--header-height);
}


.nav-container {
    width: calc(100% - 30px);
}


.mobile-menu-button {
    display: flex;
}


.main-navigation {
    position: fixed;

    top: var(--header-height);
    left: 15px;
    right: 15px;

    padding: 13px;

    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 2px;

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

    background: rgba(10,14,24,0.98);

    box-shadow: var(--shadow);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}


.main-navigation.open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.nav-link {
    padding: 11px;
}


.nav-link::after {
    display: none;
}


.nav-cta {
    justify-content: center;
    margin-top: 6px;
}


.brand-name {
    font-size: 1rem;
}


.brand-mark {
    font-size: 0.82rem;
}


.hero-section {
    min-height: auto;

    padding-top: 120px;
    padding-bottom: 80px;
}


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

    gap: 55px;
}


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


.availability-badge,
.hero-eyebrow {
    justify-content: center;
}


.availability-badge {
    font-size: 0.63rem;
}


.hero-eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
}


.hero-title {
    font-size: clamp(2.55rem, 13vw, 4rem);
    line-height: 1.02;
}


.hero-description {
    margin-top: 22px;

    font-size: 0.84rem;
}


.hero-actions {
    display: grid;
    grid-template-columns: 1fr;

    gap: 9px;

    margin-top: 27px;
}


.btn {
    width: 100%;
}


.hero-links {
    justify-content: center;

    gap: 12px;

    font-size: 0.68rem;
}


.hero-links > span {
    display: none;
}


.hero-visual {
    width: 100%;
}


.code-window {
    transform: none;
}


.code-window:hover {
    transform: none;
}


.window-top {
    height: 42px;
}


.code-body {
    padding: 18px 12px;

    font-size: 0.57rem;
    line-height: 1.9;
}


.code-line {
    grid-template-columns: 20px auto auto auto auto auto;
    gap: 3px;
}


.code-line.indent {
    padding-left: 10px;
}


.code-line.double-indent {
    padding-left: 20px;
}


.floating-card {
    padding: 8px 10px;
}


.floating-card-one {
    left: -3px;
    bottom: -20px;
}


.floating-card-two {
    right: -3px;
    top: -20px;
}


.floating-icon {
    width: 27px;
    height: 27px;
}


.floating-card strong {
    font-size: 0.75rem;
}


.floating-card span {
    font-size: 0.52rem;
}


.hero-scroll {
    display: none;
}


.section-heading {
    margin-bottom: 38px;
}


.section-label {
    font-size: 0.62rem;
}


.section-heading h2 {
    font-size: 2rem;
}


.section-heading > p {
    font-size: 0.8rem;
}


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

    gap: 45px;
}


.about-image {
    width: min(100%, 300px);
    margin: auto;
}


.experience-badge {
    right: -5px;
    bottom: 15px;
}


.about-content {
    text-align: left;
}


.about-content .lead-text {
    font-size: 0.95rem;
}


.about-content p {
    font-size: 0.8rem;
}


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


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


.service-card {
    min-height: auto;
    padding: 23px;
}


.service-icon {
    margin-bottom: 20px;
}


.skills-layout {
    grid-template-columns: 1fr;

    gap: 35px;
}


.terminal-content {
    padding: 18px;

    font-size: 0.62rem;
}


.skill-info span {
    font-size: 0.7rem;
}


.skill-info small {
    font-size: 0.52rem;
}


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


.education-card {
    padding: 22px;
    gap: 14px;
}


.education-card h3 {
    font-size: 0.95rem;
}


.education-card ul {
    font-size: 0.68rem;
}


.certificate-card {
    grid-template-columns: 1fr;

    padding: 18px;
    gap: 25px;
}


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


.project-card.featured {
    grid-column: auto;

    display: block;
}


.project-image img {
    min-height: 190px;
}


.project-content {
    padding: 20px;
}


.project-content h3 {
    font-size: 1rem;
}


.project-content p {
    font-size: 0.7rem;
}


.projects-cta {
    flex-direction: column;

    gap: 12px;
}


.projects-cta .btn {
    width: auto;
}


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


.testimonial-card {
    padding: 25px;
}


.testimonial-card blockquote {
    font-size: 0.78rem;
}


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

    gap: 40px;
}


.contact-content h2 {
    font-size: 2.3rem;
}


.contact-content > p {
    font-size: 0.78rem;
}


.contact-form-card {
    padding: 20px;
}


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


.form-group input {
    height: 43px;
}


.footer-container {
    width: calc(100% - 30px);

    grid-template-columns: 1fr;

    text-align: center;
}


.footer-brand p {
    margin-left: auto;
    margin-right: auto;
}


.footer-links {
    flex-wrap: wrap;
    justify-content: center;
}


.footer-copy {
    text-align: center;
}


.back-to-top {
    right: 15px;
    bottom: 15px;

    width: 38px;
    height: 38px;
}


}

/* =========================
VERY SMALL PHONES
========================= */

@media only screen and (max-width: 380px) {


.hero-title {
    font-size: 2.35rem;
}


.code-body {
    font-size: 0.5rem;
}


.floating-card {
    transform: scale(0.9);
}


.floating-card-two {
    right: -10px;
}


.floating-card-one {
    left: -10px;
}


}