:root{
  --bg:#07080a;
  --bg2:#0c0d10;
  --panel:rgba(255,255,255,.04);
  --panel-strong:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);

  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.48);

  --ocean:#1F7FB6;
  --gum:#7FD07A;

  --w:min(1120px,calc(100% - 40px));
  --r:20px;

  --shadow:0 18px 40px rgba(0,0,0,.35);
  --shadow-lg:0 28px 70px rgba(0,0,0,.58);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
margin:0;
font-family:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
background:
radial-gradient(900px 560px at 14% -10%, rgba(31,127,182,.18), transparent 60%),
radial-gradient(880px 560px at 92% 10%, rgba(31,127,182,.12), transparent 62%),
radial-gradient(720px 520px at 66% 110%, rgba(127,208,122,.08), transparent 62%),
var(--bg);
color:var(--text);
}

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

.container{
width:var(--w);
margin:auto;
}

/* HEADER */

.header{
position:sticky;
top:0;
z-index:50;
backdrop-filter:blur(12px);
background:rgba(7,8,10,.72);
border-bottom:1px solid rgba(255,255,255,.06);
box-shadow:0 8px 30px rgba(0,0,0,.18);
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0;
gap:18px;
}

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

.brand-text{
display:flex;
flex-direction:column;
line-height:1.02;
}

.brand-text b{
font-size:15px;
letter-spacing:.22em;
font-weight:900;
}

.brand-text em{
font-style:normal;
font-size:12px;
color:var(--muted);
margin-top:4px;
}

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

.nav a{
font-size:14px;
color:var(--muted);
transition:color .18s ease, transform .18s ease;
}

.nav a:hover{
color:#fff;
transform:translateY(-1px);
}

.nav-live{
background:var(--ocean);
padding:7px 12px;
border-radius:999px;
color:#fff!important;
box-shadow:0 8px 20px rgba(31,127,182,.35);
}

/* HERO */

.hero{
position:relative;
padding:72px 0 58px;
overflow:hidden;
}

.hero::before{
content:"";
position:absolute;
inset:-180px -180px auto -180px;
height:420px;
background:
radial-gradient(circle at 18% 18%, rgba(31,127,182,.24), transparent 58%),
radial-gradient(circle at 82% 24%, rgba(31,127,182,.14), transparent 60%);
filter:blur(76px);
opacity:.78;
pointer-events:none;
}

.hero-bg{
position:absolute;
inset:0;
background:url("../../images/hero.jpg") center center/cover no-repeat;
opacity:.55;
transform:scale(1.02);
filter:saturate(1.1) contrast(1.05);
}

.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.45) 100%),
linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.65)),
radial-gradient(760px 340px at 18% 14%, rgba(31,127,182,.08), transparent 60%);
}

.hero-inner{
position:relative;
display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
gap:22px;
align-items:stretch;
}

.hero-copy{
background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
border:1px solid rgba(255,255,255,.12);
padding:28px 24px 22px;
border-radius:24px;
box-shadow:var(--shadow-lg);
}

.kicker{
margin:0 0 12px;
font-size:12px;
letter-spacing:.22em;
text-transform:uppercase;
color:rgba(255,255,255,.62);
}

h1,h2,h3{
margin:0;
letter-spacing:-.03em;
}

h1{
font-size:clamp(56px,8vw,74px);
line-height:.98;
margin:0;
}

h2{
font-size:clamp(24px,3.2vw,36px);
}

h3{
font-size:17px;
}

.tagline{
margin:18px 0 0;
color:var(--muted);
line-height:1.7;
max-width:58ch;
font-size:15px;
}

.hero-actions{
margin-top:26px;
display:flex;
gap:10px;
flex-wrap:wrap;
}

/* BUTTONS */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 15px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.16);
transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
color:#fff;
font-weight:500;
}

.btn:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.11);
box-shadow:0 10px 20px rgba(0,0,0,.24);
}

.btn-primary{
background:var(--ocean);
border:none;
}

.btn-primary:hover{
background:#278bcb;
}

.btn-ghost{
background:rgba(255,255,255,.03);
}

/* STATUS */

.status{
margin-top:22px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.status-pill{
padding:8px 12px;
background:rgba(0,0,0,.34);
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
font-size:13px;
display:flex;
gap:8px;
align-items:center;
backdrop-filter:blur(8px);
}

.status-pill .label{color:rgba(255,255,255,.62)}
.status-pill .value{color:#fff}

.dot{
width:8px;
height:8px;
border-radius:50%;
background:#999;
}

.dot.on{background:#7FD07A}

.status-note{
width:100%;
font-size:12px;
color:var(--muted2);
margin-top:2px;
}

/* HERO CARDS */

.hero-cards{
display:grid;
gap:12px;
align-content:start;
}

.mini-card{
padding:16px 18px;
border-radius:22px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.09);
box-shadow:var(--shadow);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
backdrop-filter:blur(10px);
}

.mini-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-lg);
border-color:rgba(255,255,255,.13);
background:rgba(255,255,255,.055);
}

.mini-title{
display:block;
font-weight:700;
font-size:16px;
margin-bottom:8px;
letter-spacing:-.01em;
}

.mini-sub{
display:block;
font-size:12px;
color:var(--muted);
margin-top:5px;
line-height:1.45;
}

/* SECTIONS */

.section{
padding:76px 0;
}

.section-dark{
background:#0c0d10;
border-top:1px solid rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.06);
}

.section-head{
margin-bottom:24px;
}

.sub{
margin-top:8px;
color:var(--muted);
line-height:1.72;
max-width:72ch;
}

/* PORTFOLIO GRID */

.grid-4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-top:20px;
}

.tile{
background:var(--panel);
border:1px solid var(--line);
border-radius:20px;
overflow:hidden;
transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
box-shadow:var(--shadow);
}

.tile:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-lg);
border-color:rgba(255,255,255,.12);
}

.tile-media{
height:205px;
background-size:cover;
background-position:center;
transition:transform .3s ease;
position:relative;
}

.tile:hover .tile-media{
transform:scale(1.04);
}

.tile-media::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.42));
}

.tile-body{
padding:15px 14px 16px;
}

.tile-body p{
margin:10px 0 0;
color:var(--muted);
line-height:1.65;
font-size:14px;
}

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

.chip{
border:1px solid rgba(255,255,255,.16);
padding:4px 8px;
border-radius:16px;
font-size:12px;
background:rgba(255,255,255,.03);
}

.tile-a{
background:
linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.40)),
url("../../images/g1.jpg") center/cover;
}

.tile-b{
background:
linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.40)),
url("../../images/g2.jpg") center/cover;
}

.tile-c{
background:
radial-gradient(circle at 18% 15%, rgba(31,127,182,.35), transparent 52%),
linear-gradient(135deg,#1f7fb644,#0000);
}

.tile-d{
background:
radial-gradient(circle at 18% 15%, rgba(31,127,182,.28), transparent 52%),
linear-gradient(135deg,#1f7fb644,#0000);
}

/* ABOUT */

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

.panel{
background:var(--panel);
border:1px solid var(--line);
padding:18px;
border-radius:20px;
transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
box-shadow:var(--shadow);
}

.panel:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-lg);
border-color:rgba(255,255,255,.12);
}

.panel p{
margin:10px 0 0;
color:var(--muted);
line-height:1.7;
}

/* CONTACT */

.contact{margin-top:20px}

.contact-alert{
display:flex;
flex-direction:column;
gap:4px;
margin-bottom:16px;
padding:14px 16px;
border-radius:16px;
border:1px solid rgba(255,255,255,.10);
box-shadow:var(--shadow);
}

.contact-alert strong{
font-size:14px;
font-weight:700;
}

.contact-alert span{
font-size:13px;
color:var(--muted);
line-height:1.5;
}

.contact-alert-success{
background:rgba(31,127,182,.14);
border-color:rgba(31,127,182,.34);
}

.contact-alert-error{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.12);
}

.form{
background:var(--panel);
border:1px solid var(--line);
padding:18px;
border-radius:20px;
box-shadow:var(--shadow);
}

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

label{
display:block;
}

label span{
display:block;
margin-bottom:6px;
font-size:13px;
color:var(--muted);
}

.message-field{
display:block;
margin-top:10px;
}

.honeypot{
position:absolute !important;
left:-9999px !important;
width:1px !important;
height:1px !important;
opacity:0 !important;
pointer-events:none !important;
}

input,
textarea{
width:100%;
padding:12px 12px;
border-radius:12px;
background:rgba(12,13,16,.96);
border:1px solid rgba(255,255,255,.08);
color:#fff;
font:inherit;
outline:none;
transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

input::placeholder,
textarea::placeholder{
color:rgba(255,255,255,.34);
}

input:focus,
textarea:focus{
border-color:rgba(31,127,182,.55);
box-shadow:0 0 0 3px rgba(31,127,182,.18);
}

textarea{
min-height:120px;
resize:vertical;
}

.form-actions{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:14px;
flex-wrap:wrap;
gap:12px;
}

.tiny{
font-size:12px;
color:var(--muted2);
}

/* FOOTER */

.footer{
border-top:1px solid rgba(255,255,255,.08);
padding:24px 0;
text-align:center;
color:var(--muted2);
}

/* RESPONSIVE */

@media(max-width:980px){

.hero-inner{
grid-template-columns:1fr;
}

.hero-cards{
grid-template-columns:1fr 1fr;
}

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

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

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

.header-inner{
flex-wrap:wrap;
}

}

@media(max-width:620px){

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

.hero{
padding:56px 0 46px;
}

.hero-copy{
padding:22px 18px 18px;
}

.hero-cards{
grid-template-columns:1fr;
}

.tile-media{
height:180px;
}

}