/* ===========
BASE
=========== */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--bg: #020617;
--bg-alt: #050816;
--card: #0b1220;
--accent: #f97316;          /* orange */
--accent2: #f97316;         /* keep same tone for consistency */
--text: #f9fafb;
--muted: #9ca3af;
--border: #1f2937;
--radius-lg: 18px;
--radius-md: 12px;
--shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.75);
--transition: 0.2s ease;
--max-width: 1100px;
--font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
}
html,
body {
margin: 0;
padding: 0;
font-family: var(--font-main);
background: radial-gradient(circle at top, #020617 0, #020617 30%, #000 80%);
color: var(--text);
}
/* Layout helper */
.container {
width: 100%;
max-width: var(--max-width);
padding: 0 16px;
margin: 0 auto;
}
/* ===========
HEADER
=========== */
.header {
position: sticky;
top: 0;
z-index: 30;
backdrop-filter: blur(16px);
background: linear-gradient(
to bottom,
rgba(2, 6, 23, 0.98),
rgba(2, 6, 23, 0.9),
transparent
);
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: 8px;
}
.logo-mark {
width: 32px;
height: 32px;
border-radius: 999px;
background: radial-gradient(circle at 30% 0, #f97316, #4c1d95);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
}
.logo-text {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.logo-text span {
color: var(--accent);
}
/* Nav */
.nav {
display: flex;
align-items: center;
gap: 18px;
}
.nav a {
font-size: 13px;
text-decoration: none;
color: var(--muted);
padding-bottom: 3px;
border-bottom: 1px solid transparent;
transition: color var(--transition), border-color var(--transition),
transform var(--transition);
}
.nav a:hover {
color: var(--text);
border-color: var(--accent);
transform: translateY(-1px);
}
.nav-cta {
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(249, 115, 22, 0.8);
background: radial-gradient(circle at top, rgba(249, 115, 22, 0.2), transparent);
}
/* Mobile toggle (for future use) */
.nav-toggle {
display: none;
background: transparent;
border: none;
color: var(--text);
font-size: 22px;
}
/* ===========
HERO
=========== */
.hero {
position: relative;
padding: 60px 0 72px;
overflow: hidden;
}
.hero-gradient {
position: absolute;
inset: -40%;
background:
radial-gradient(circle at top left, rgba(249, 115, 22, 0.2), transparent 55%),
radial-gradient(circle at 80% 20%, rgba(15, 23, 42, 0.8), transparent 60%);
opacity: 0.9;
pointer-events: none;
}
.hero-inner {
position: relative;
display: grid;
gap: 36px;
align-items: center;
z-index: 1;
}
.hero-copy {
max-width: 520px;
}
.eyebrow {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.hero-copy h1 {
font-size: clamp(30px, 4.4vw, 42px);
line-height: 1.1;
margin: 0 0 18px;
}
.hero-sub {
color: var(--muted);
font-size: 14px;
margin-bottom: 20px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 11px;
color: var(--muted);
}
.hero-meta span {
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.5);
padding: 4px 10px;
background: rgba(15, 23, 42, 0.9);
}
/* Hero media card */
.hero-media {
display: flex;
justify-content: center;
}
.hero-card {
background: radial-gradient(circle at top left, #1f2937, #020617);
border-radius: 22px;
border: 1px solid rgba(148, 163, 184, 0.4);
padding: 16px;
box-shadow: var(--shadow-soft);
max-width: 360px;
width: 100%;
}
.hero-video {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 200px;
    background: #000; /* fallback while video loads */
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-card-bottom {
margin-top: 10px;
}
.hero-quote {
font-size: 13px;
margin: 0 0 4px;
}
.hero-client {
font-size: 11px;
color: var(--muted);
margin: 0;
}
/* ===========
BUTTONS
=========== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 9px 18px;
font-size: 13px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--transition), transform var(--transition),
box-shadow var(--transition), border-color var(--transition), color var(--transition);
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), #fbbf24);
color: #0b0f19;
font-weight: 600;
box-shadow: 0 16px 50px rgba(249, 115, 22, 0.35);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.9);
}
.btn-ghost {
border-color: rgba(148, 163, 184, 0.7);
color: var(--text);
background: rgba(15, 23, 42, 0.7);
}
.btn-ghost:hover {
background: rgba(15, 23, 42, 0.95);
}
.btn-full {
width: 100%;
}
/* ===========
SECTIONS
=========== */
.section {
padding: 56px 0;
}
.section-alt {
background: radial-gradient(circle at top right, #020617, #020617 60%, #000 100%);
border-top: 1px solid rgba(15, 23, 42, 0.9);
border-bottom: 1px solid rgba(15, 23, 42, 0.9);
}
.section-head {
max-width: 520px;
margin-bottom: 24px;
}
.section-head h2 {
font-size: 20px;
margin: 0 0 8px;
}
.section-head p {
margin: 0;
font-size: 14px;
color: var(--muted);
}
/* ===========
SERVICES
=========== */
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.card {
background: var(--card);
border-radius: var(--radius-lg);
padding: 18px;
border: 1px solid var(--border);
box-shadow: var(--shadow-soft);
transition: transform var(--transition),
border-color var(--transition),
box-shadow var(--transition),
background var(--transition);
}
.card h3 {
margin: 0 0 6px;
font-size: 16px;
}
.card p {
margin: 0 0 8px;
font-size: 13px;
color: var(--muted);
}
.card ul {
padding-left: 16px;
margin: 0;
}
.card li {
font-size: 13px;
color: var(--muted);
margin-bottom: 3px;
}
/* Active card (left one with orange outline) */
.card-active {
border-color: var(--accent);
}
.card:hover {
transform: translateY(-3px);
border-color: var(--accent);
background: #020617;
}
/* ===========
WORK / PROJECTS
=========== */
.projects {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.project {
display: grid;
gap: 10px;
background: #020617;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
padding: 12px;
}
.project-thumb {
    position: relative;
    height: 160px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000; /* fallback colour */
}

.project-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tag {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.7);
z-index: 1;
}
.project-info h3 {
margin: 0 0 4px;
font-size: 15px;
}
.project-info p {
margin: 0;
font-size: 13px;
color: var(--muted);
}
.project-metric {
margin-top: 6px;
font-size: 12px;
color: var(--accent);
}
/* ===========
ABOUT
=========== */
.about {
display: grid;
gap: 24px;
align-items: start;
}
.about-copy p {
font-size: 14px;
color: var(--muted);
}
.bullet-list {
padding-left: 16px;
margin: 10px 0 0;
}
.bullet-list li {
font-size: 14px;
color: var(--muted);
margin-bottom: 6px;
}
.about-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.stat-card {
background: radial-gradient(circle at top, rgba(249, 115, 22, 0.18), #020617);
border-radius: var(--radius-lg);
border: 1px solid rgba(249, 115, 22, 0.6);
padding: 12px;
text-align: center;
}
.stat-number {
margin: 0;
font-size: 19px;
font-weight: 600;
}
.stat-label {
margin: 2px 0 0;
font-size: 11px;
color: var(--muted);
}
/* ===========
CONTACT
=========== */
.contact {
display: grid;
gap: 24px;
align-items: start;
}
.contact-copy p {
font-size: 14px;
color: var(--muted);
}
.contact-note span {
color: var(--accent);
}
.contact-form {
background: #020617;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
padding: 18px;
max-width: 420px;
width: 100%;
box-shadow: var(--shadow-soft);
}
.form-row {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
label {
font-size: 12px;
color: var(--muted);
}
input,
select,
textarea {
background: #020617;
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.7);
padding: 9px 11px;
color: var(--text);
font-size: 14px;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--accent);
}
/* ===========
FOOTER
=========== */
.footer {
padding: 18px 0 24px;
border-top: 1px solid rgba(15, 23, 42, 0.9);
background: #020617;
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: var(--muted);
}
.footer-small {
font-size: 11px;
}
/* ===========
RESPONSIVE
=========== */
@media (min-width: 768px) {
.hero-inner {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.projects {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.project {
grid-template-rows: auto auto;
}
.about {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.footer-inner {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}