@font-face{
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{

--bg: #07080b;

--text: rgba(255,255,255,0.92);

--muted: rgba(255,255,255,0.62);

--hair: rgba(255,255,255,0.12);

--accent: #a7ffda;

--max: 1180px;

--pad: clamp(18px, 3vw, 34px);

--r: 18px;

--shadow: 0 20px 60px rgba(0,0,0,.45);

}

*{ box-sizing:border-box; }

html, body{ height:100%; }

html{ scroll-behavior: smooth; }

body{

margin:0;

font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

background: radial-gradient(1200px 600px at 65% 10%, rgba(167,255,218,0.10), transparent 60%),

radial-gradient(900px 500px at 10% 20%, rgba(255,255,255,0.06), transparent 55%),

var(--bg);

color: var(--text);

overflow-x:hidden;

}

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

button, input, textarea{ font:inherit; color:inherit; }

::selection{ background: rgba(167,255,218,0.22); }

/* Background grid (general site) */

.grid{

position:fixed; inset:0;

background:

linear-gradient(to right, var(--hair) 1px, transparent 1px),

linear-gradient(to bottom, var(--hair) 1px, transparent 1px);

background-size: 140px 140px;

mask-image: radial-gradient(circle at 60% 20%, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.0) 72%);

pointer-events:none;

opacity:.55;

}

/* Topbar */

.topbar{

position:fixed;

left:0; right:0; top:0;

padding: 14px var(--pad);

z-index:50;

display:flex;

align-items:center;

justify-content:space-between;

gap: 18px;

backdrop-filter: blur(10px);

background: linear-gradient(to bottom, rgba(7,8,11,0.80), rgba(7,8,11,0.0));

}

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

.brand__mark{

width: 12px; height: 12px; border-radius:999px;

background: var(--accent);

box-shadow: 0 0 0 6px rgba(167,255,218,0.12);

}

.brand__text{ font-weight:600; letter-spacing:0.3px; }

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

.nav__link{

font-size: 13px;

letter-spacing:0.5px;

color: var(--muted);

padding: 10px 10px;

border-radius: 999px;

transition: color .2s ease, background .2s ease;

}

.nav__link:hover{ color: var(--text); background: rgba(255,255,255,0.06); }

.cta{

display:inline-flex;

align-items:center;

gap: 10px;

padding: 10px 14px;

border-radius: 999px;

border: 1px solid rgba(167,255,218,0.18);

background: rgba(167,255,218,0.08);

}

.cta__arrow{

width: 14px; height:14px; display:inline-block;

border-right: 1.5px solid var(--text);

border-top: 1.5px solid var(--text);

transform: rotate(45deg);

opacity:.85;

}

.section{

min-height: 100vh;

padding: calc(76px + var(--pad)) var(--pad) var(--pad);

display:flex;

align-items:center;

}

.section--tight{

min-height: auto;

padding: 0 var(--pad) var(--pad);

}

/* HERO with architectural/blueprint feel */

.hero{

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

inset:-40px;

pointer-events:none;

opacity: .55;

background-image:

linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),

linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px),

linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),

linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px),

radial-gradient(closest-side at 22% 42%, rgba(167,255,218,0.12), transparent 60%),

radial-gradient(closest-side at 70% 35%, rgba(255,255,255,0.08), transparent 62%),

linear-gradient(135deg, rgba(167,255,218,0.08), transparent 40%),

linear-gradient(315deg, rgba(255,255,255,0.06), transparent 42%);

background-size:

160px 160px,

160px 160px,

40px 40px,

40px 40px,

auto, auto, auto, auto;

mask-image: radial-gradient(circle at 55% 30%, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 52%, rgba(0,0,0,0) 78%);

transform: translateZ(0);

}

.hero__inner{

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

margin:0 auto;

position:relative;

padding: clamp(22px, 2vw, 36px) 0;

z-index: 1;

}

.hero__meta{

display:flex;

align-items:flex-end;

justify-content:space-between;

gap: 28px;

margin-top: 26px;

max-width: 980px;

}

.lead{

max-width: 60ch;

color: var(--muted);

line-height:1.55;

font-size: clamp(14px, 1.4vw, 16px);

}

.kicker{

margin:0 0 14px;

display:flex;

align-items:center;

gap: 10px;

color: var(--muted);

letter-spacing: 0.2px;

font-size: 13px;

}

.kicker__dot{

width: 6px; height:6px;

border-radius:999px;

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

}

.title{

margin:0;

letter-spacing: -0.03em;

line-height: 0.95;

}

.title--xl{ font-size: clamp(44px, 6.2vw, 92px); }

.title--lg{ font-size: clamp(34px, 4.2vw, 60px); }

.copy{

color: var(--muted);

line-height: 1.65;

max-width: 66ch;

margin: 16px 0 0;

}

.hero__actions{ display:flex; gap: 12px; flex-wrap:wrap; }

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding: 12px 16px;

border-radius: 999px;

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

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

cursor:pointer;

transition: transform .2s ease, background .2s ease, border-color .2s ease;

}

.btn:hover{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.20); }

.btn--ghost{ background: transparent; }

.hero__orb{

position:absolute;

right: clamp(-120px, -6vw, -60px);

top: clamp(-80px, -4vw, -40px);

width: clamp(280px, 30vw, 520px);

aspect-ratio: 1;

border-radius: 999px;

background:

radial-gradient(circle at 30% 30%, rgba(167,255,218,0.95), rgba(167,255,218,0.10) 45%, rgba(255,255,255,0.0) 70%),

radial-gradient(circle at 70% 70%, rgba(255,255,255,0.22), rgba(255,255,255,0.0) 55%);

opacity: .85;

pointer-events:none;

z-index: 1;

}

.scrollhint{

position:absolute;

left:0;

bottom: -8px;

display:flex;

align-items:center;

gap: 10px;

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

font-size: 12px;

z-index: 1;

}

.scrollhint__line{

width: 46px; height: 1px;

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

position:relative;

overflow:hidden;

}

.scrollhint__line::after{

content:"";

position:absolute; inset:0;

background: var(--accent);

transform: translateX(-100%);

animation: hint 1.3s ease-in-out infinite;

}

@keyframes hint{

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

35%{ opacity:1; }

100%{ transform: translateX(120%); opacity:0; }

}

/* Marquee */

.marquee{

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

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

padding: 14px 0;

overflow:hidden;

}

.marquee__track{

display:flex;

gap: 18px;

white-space: nowrap;

will-change: transform;

animation: mar 18s linear infinite;

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

font-size: 13px;

}

.sep{ opacity:.35; }

@keyframes mar{

0%{ transform: translateX(0); }

100%{ transform: translateX(-50%); }

}

/* Columns */

.cols{

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

margin: 0 auto;

display:grid;

grid-template-columns: 1.1fr 0.9fr;

gap: clamp(18px, 4vw, 42px);

align-items:start;

}

.cols--flip{ grid-template-columns: 0.9fr 1.1fr; }

.cols__b{ display:grid; gap: 14px; }

.chips{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 18px; }

.chip{

padding: 9px 12px;

border-radius: 999px;

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

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

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

font-size: 13px;

}

/* Frames */

.frame{

border-radius: var(--r);

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

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

overflow:hidden;

box-shadow: var(--shadow);

}

.frame__img{

width: 100%;

height: 220px;

display:block;

object-fit: cover;

transform: scale(1.02);

filter: saturate(0.95) contrast(1.05);

}

.frame__caption{

padding: 14px 16px 16px;

display:flex;

justify-content:space-between;

gap: 12px;

font-size: 13px;

}

.muted{ color: var(--muted); }

/* Projects (horizontal) */

.projects{ align-items: stretch; }

.projects__head{

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

margin:0 auto;

}

.projects__rail{

margin-top: 24px;

display:flex;

gap: 14px;

align-items: stretch;

width: max-content;

padding-bottom: 10px;

}

/* Card fixed: no empty frame (aspect-ratio + cover) */

.card{

width: min(460px, 80vw);

border-radius: calc(var(--r) + 2px);

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

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

overflow:hidden;

box-shadow: var(--shadow);

transform: translateZ(0);

}

.card__media{

width: 100%;

aspect-ratio: 16 / 10;

overflow:hidden;

background: rgba(0,0,0,0.18);

}

.card__img{

width:100%;

height:100%;

display:block;

object-fit: cover;

object-position: center;

transform: scale(1.03);

filter: saturate(0.95) contrast(1.05);

}

.card__body{

padding: 16px 16px 18px;

display:flex;

justify-content:space-between;

align-items:flex-end;

gap: 14px;

}

.card__title{ margin:0; font-size: 18px; letter-spacing:-0.02em; }

.card__meta{ margin:0; color: var(--muted); font-size: 13px; }

/* List */

.list{ display:grid; gap: 12px; }

.list__item{

display:grid;

grid-template-columns: 42px 1fr;

gap: 12px;

padding: 14px 16px;

border-radius: var(--r);

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

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

}

.list__k{ color: rgba(167,255,218,0.9); font-weight:600; }

.list__c h3{ margin:0 0 4px; font-size:16px; }

.list__c p{ margin:0; color: var(--muted); line-height:1.55; font-size: 13px; }

/* Gallery */

.gallery{

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

margin:0 auto;

display:grid;

gap: 18px;

}

.masonry{

display:grid;

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

gap: 12px;

}

.tile{

position:relative;

overflow:hidden;

border-radius: calc(var(--r) + 2px);

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

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

box-shadow: var(--shadow);

min-height: 220px;

}

.tile img{

width:100%;

height:100%;

display:block;

object-fit: cover;

transform: scale(1.02);

filter: saturate(0.95) contrast(1.05);

transition: transform .5s ease;

}

.tile figcaption{

position:absolute;

left: 12px;

right: 12px;

bottom: 12px;

padding: 10px 12px;

border-radius: 14px;

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

background: rgba(0,0,0,0.35);

backdrop-filter: blur(10px);

display:flex;

justify-content:space-between;

gap: 12px;

font-size: 13px;

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

}

.tile:hover img{ transform: scale(1.08); }

/* Masonry layout */

.tile:nth-child(1){ grid-column: span 7; grid-row: span 2; }

.tile:nth-child(2){ grid-column: span 5; grid-row: span 2; }

.tile:nth-child(3){ grid-column: span 4; }

.tile:nth-child(4){ grid-column: span 4; }

.tile:nth-child(5){ grid-column: span 4; }

.tile:nth-child(6){ grid-column: span 6; grid-row: span 2; }

.tile:nth-child(7){ grid-column: span 6; grid-row: span 2; }

.tile:nth-child(8){ grid-column: span 5; }

.tile:nth-child(9){ grid-column: span 7; }

.tile:nth-child(10){ grid-column: span 4; }

.tile:nth-child(11){ grid-column: span 4; }

.tile:nth-child(12){ grid-column: span 4; }

.tile:nth-child(13){ grid-column: span 6; grid-row: span 2; }

.tile:nth-child(14){ grid-column: span 6; grid-row: span 2; }

/* Contact */

.contact{ align-items: stretch; }

.contact__inner{

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

margin:0 auto;

}

/* WhatsApp card */

.waCard{

margin-top: 18px;

display:flex;

align-items:center;

justify-content:space-between;

gap: 14px;

padding: 16px 16px;

border-radius: calc(var(--r) + 6px);

border: 1px solid rgba(167,255,218,0.18);

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

box-shadow: var(--shadow);

}

.waCard__text{ display:grid; gap: 3px; }

.waCard__title{ font-weight: 600; letter-spacing: -0.01em; }

.waCard__num{ color: rgba(255,255,255,0.72); font-size: 13px; }

.waCard__arrow{

width: 14px; height:14px; display:inline-block;

border-right: 1.5px solid rgba(255,255,255,0.85);

border-top: 1.5px solid rgba(255,255,255,0.85);

transform: rotate(45deg);

opacity:.9;

}

/* Footer */

.footer{

margin-top: 16px;

display:flex;

justify-content:space-between;

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

padding-top: 14px;

gap: 12px;

}

/* Cursor */

.cursor{ position:fixed; inset:0; pointer-events:none; z-index:80; }

.cursor__dot{

position:fixed;

width: 6px; height:6px;

border-radius:999px;

background: rgba(167,255,218,0.95);

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

left: -999px; top: -999px;

}

.cursor__ring{

position:fixed;

width: 34px; height:34px;

border-radius:999px;

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

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

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

left: -999px; top: -999px;

}

/* Loader */

.loader{

position:fixed; inset:0;

background: var(--bg);

z-index: 120;

display:grid;

place-items:center;

}

.loader__panel{

position:absolute; inset:0;

background:

radial-gradient(900px 500px at 60% 20%, rgba(167,255,218,0.16), transparent 60%),

radial-gradient(800px 500px at 30% 70%, rgba(255,255,255,0.08), transparent 60%),

var(--bg);

}

.loader__content{

position:relative;

width: min(520px, 86vw);

border-radius: calc(var(--r) + 4px);

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

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

padding: 18px 18px 16px;

backdrop-filter: blur(10px);

}

.loader__kicker{ color: var(--muted); font-size: 13px; letter-spacing: 0.4px; }

.loader__bar{

margin-top: 12px;

height: 2px;

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

overflow:hidden;

}

.loader__bar span{

display:block;

height:100%;

width: 0%;

background: var(--accent);

}

.loader__pct{

margin-top: 12px;

font-size: 12px;

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

}

/* Reveal */

.reveal{ will-change: transform, opacity; }

/* Responsive */

@media (max-width: 920px){

.nav{ display:none; }

.hero__meta{ flex-direction:column; align-items:flex-start; }

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

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

.tile, .tile:nth-child(n){ grid-column: auto; grid-row: auto; min-height: 240px; }

}

@media (prefers-reduced-motion: reduce){

.marquee__track{ animation: none; }

.cursor{ display:none; }

}