: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;
  --danger:#d94b4b;

  --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);
}

body.worked-modal-open{
overflow:hidden;
}

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);
position:relative;
transition:color .18s ease;
}

.nav a:hover{
color:#fff;
}

.nav a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0%;
height:2px;
background:var(--ocean);
transition:width .25s ease;
}

.nav a:hover::after{
width:100%;
}

.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;
}

@keyframes heroDrift{
0%{ transform:scale(1.05) translateY(0px) translateX(0px); }
25%{ transform:scale(1.08) translateY(-10px) translateX(-4px); }
50%{ transform:scale(1.09) translateY(-18px) translateX(3px); }
75%{ transform:scale(1.07) translateY(-8px) translateX(6px); }
100%{ transform:scale(1.05) translateY(0px) translateX(0px); }
}

.hero-bg{
position:absolute;
inset:0;
background:url("../../images/hero.jpg") center center/cover no-repeat;
opacity:.40;
transform:scale(1.05);
filter:saturate(1.05) contrast(1.02);
animation:heroDrift 20s ease-in-out infinite;
will-change:transform;
}

.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,.50) 100%),
linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.82));
}

.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;
}

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-motto{
margin-top:22px;
display:inline-flex;
flex-direction:column;
gap:6px;
padding:14px 18px 13px;
border-radius:18px;
background:linear-gradient(180deg, rgba(217,75,75,.16), rgba(217,75,75,.08));
border:1px solid rgba(217,75,75,.42);
box-shadow:0 10px 28px rgba(0,0,0,.34);
}

.hero-motto-main{
font-size:20px;
font-weight:900;
letter-spacing:.14em;
line-height:1.1;
color:#fff;
text-transform:uppercase;
}

.hero-motto-sub{
font-size:13px;
letter-spacing:.08em;
text-transform:uppercase;
color:rgba(255,255,255,.78);
}

.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;
position:relative;
}

.dot.on{
background:#7FD07A;
box-shadow:0 0 0 rgba(127,208,122,.7);
animation:onairPulse 2s infinite;
}

.dot.off{
background:var(--danger);
animation:none;
box-shadow:none;
}

@keyframes onairPulse{
0%{box-shadow:0 0 0 0 rgba(127,208,122,.7);}
70%{box-shadow:0 0 0 10px rgba(127,208,122,0);}
100%{box-shadow:0 0 0 0 rgba(127,208,122,0);}
}

.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;
}

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

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

.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;
box-shadow:var(--shadow);
}

.tile:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-lg);
}

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

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

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

.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:url("../../images/g1.jpg") center/cover;
}

.tile-b{
background:url("../../images/g2.jpg") center/cover;
}

.tile-c{
background:url("../../images/g3.jpg") center/cover;
}

.tile-d{
background:url("../../images/g4.jpg") center/cover;
}

/* 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;
box-shadow:var(--shadow);
}

.panel:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-lg);
}

/* WORKED VK2FR */

.worked-wrap{
margin-top:20px;
}

.worked-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 420px;
gap:20px;
align-items:center;
}

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

.worked-form{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:12px;
align-items:end;
}

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

.worked-btn{
min-width:150px;
height:48px;
}

.worked-note{
margin-top:12px;
font-size:12px;
color:var(--muted2);
line-height:1.6;
}

.worked-visual{
display:flex;
justify-content:center;
align-items:center;
}

.worked-visual img{
max-width:100%;
height:auto;
border-radius:18px;
box-shadow:var(--shadow-lg);
}

/* CONTACT + QSL */

.contact-split{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
gap:18px;
align-items:start;
margin-top:20px;
}

.contact-col{
min-width:0;
}

.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 span{
display:block;
margin-bottom:6px;
font-size:13px;
color:var(--muted);
}

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

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;
}

.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;
}

.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);
}

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

.qsl-kicker{
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--muted2);
margin-bottom:10px;
}

.qsl-title{
font-size:24px;
line-height:1.1;
margin-bottom:12px;
}

.qsl-text{
margin:0;
color:var(--muted);
line-height:1.72;
font-size:14px;
}

.qsl-text-tight{
margin-top:0;
}

.qsl-block{
margin-top:18px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.08);
}

.qsl-block:first-of-type{
margin-top:16px;
}

.qsl-block-title{
font-size:13px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:#fff;
margin-bottom:10px;
}

.qsl-list{
margin:0;
padding-left:18px;
color:var(--muted);
}

.qsl-list li{
margin:0 0 10px;
line-height:1.65;
}

.qsl-list li:last-child{
margin-bottom:0;
}

.qsl-address{
font-size:14px;
line-height:1.8;
color:#fff;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.06);
padding:14px 14px;
border-radius:14px;
}

/* FOOTER */

.footer{
border-top:1px solid rgba(255,255,255,.08);
padding:32px 0 22px;
color:var(--muted2);
background:rgba(255,255,255,.015);
}

.footer-grid{
display:grid;
grid-template-columns:1.2fr .9fr 1fr;
gap:24px;
align-items:start;
}

.footer-block{
min-width:0;
}

.footer-block:first-child{
opacity:.92;
}

.footer-block:first-child .footer-title{
color:rgba(255,255,255,.60);
letter-spacing:.18em;
}

.footer-block:first-child .footer-text{
color:rgba(255,255,255,.46);
line-height:1.75;
}

.footer-title{
font-size:13px;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
color:#fff;
margin-bottom:12px;
}

.footer-text{
margin:0;
font-size:14px;
line-height:1.7;
color:var(--muted);
max-width:38ch;
}

.footer-links{
display:flex;
flex-direction:column;
gap:10px;
}

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

.footer-links a:hover{
color:#fff;
transform:translateX(2px);
}

.footer-meta{
display:grid;
gap:10px;
}

.footer-meta div{
display:flex;
flex-direction:column;
gap:3px;
}

.footer-meta span{
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--muted2);
}

.footer-meta strong{
font-size:14px;
font-weight:500;
color:#fff;
}

.footer-bottom{
margin-top:24px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.06);
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
font-size:12px;
color:var(--muted2);
}

.footer-sep{
opacity:.45;
}

/* LIVE QSO TOAST */

.qso-toast{
position:fixed;
right:20px;
bottom:20px;
z-index:120;
width:min(360px, calc(100vw - 28px));
display:flex;
align-items:flex-start;
gap:12px;
padding:14px 14px 14px 13px;
border-radius:18px;
background:linear-gradient(180deg, rgba(10,13,18,.92), rgba(8,10,14,.88));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 46px rgba(0,0,0,.42);
backdrop-filter:blur(14px);
transform:translateY(16px);
opacity:0;
pointer-events:none;
transition:opacity .28s ease, transform .28s ease, border-color .28s ease;
}

.qso-toast.is-on{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

.qso-toast:hover{
border-color:rgba(31,127,182,.36);
}

.qso-toast-dot{
width:10px;
height:10px;
border-radius:50%;
background:var(--gum);
margin-top:6px;
flex:0 0 auto;
box-shadow:0 0 0 rgba(127,208,122,.7);
animation:onairPulse 2s infinite;
}

.qso-toast-body{
min-width:0;
}

.qso-toast-title{
font-size:14px;
font-weight:700;
line-height:1.35;
color:#fff;
letter-spacing:-.01em;
}

.qso-toast-meta{
margin-top:4px;
font-size:12px;
line-height:1.5;
color:rgba(255,255,255,.68);
}

/* WORKED MODAL */

.worked-modal{
position:fixed;
inset:0;
z-index:160;
display:none;
}

.worked-modal.is-open{
display:block;
}

.worked-modal-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.68);
backdrop-filter:blur(6px);
}

.worked-modal-dialog{
position:relative;
width:min(760px, calc(100% - 28px));
margin:56px auto;
background:linear-gradient(180deg, rgba(12,13,16,.98), rgba(7,8,10,.98));
border:1px solid rgba(255,255,255,.10);
border-radius:24px;
box-shadow:var(--shadow-lg);
padding:24px 22px 22px;
}

.worked-modal-close{
position:absolute;
top:14px;
right:14px;
width:40px;
height:40px;
border:none;
border-radius:999px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:24px;
line-height:1;
cursor:pointer;
transition:background .18s ease, transform .18s ease;
}

.worked-modal-close:hover{
background:rgba(255,255,255,.12);
transform:scale(1.03);
}

.worked-modal-head{
padding-right:48px;
}

.worked-modal-sub{
margin:10px 0 0;
font-size:14px;
line-height:1.7;
color:var(--muted);
}

.worked-summary{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:20px;
}

.worked-summary-item{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:14px;
}

.worked-summary-item span{
display:block;
font-size:12px;
letter-spacing:.10em;
text-transform:uppercase;
color:var(--muted2);
margin-bottom:8px;
}

.worked-summary-item strong{
font-size:18px;
font-weight:700;
color:#fff;
}

.worked-slots{
margin-top:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:18px;
}

.worked-slot-head{
font-size:14px;
font-weight:700;
letter-spacing:.10em;
text-transform:uppercase;
color:#fff;
margin-bottom:14px;
}

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

.worked-slot{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 14px;
border-radius:14px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
}

.worked-slot span{
font-size:14px;
color:#fff;
}

.worked-slot strong{
font-size:18px;
font-weight:700;
color:var(--muted2);
}

.worked-slot strong.is-worked{
color:var(--gum);
}

/* 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;
}

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

.worked-visual{
order:-1;
margin-bottom:10px;
}

.worked-visual img{
max-width:320px;
}

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

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

.worked-form{
grid-template-columns:1fr;
}

.worked-btn{
width:100%;
}

.worked-summary{
grid-template-columns:1fr;
}

.worked-slot-grid{
grid-template-columns:1fr 1fr;
}

.footer-grid{
grid-template-columns:1fr;
gap:20px;
}

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

}

@media(max-width:620px){

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

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

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

.tile-media{
height:180px;
}

.hero-motto{
padding:12px 14px 11px;
}

.hero-motto-main{
font-size:16px;
letter-spacing:.11em;
}

.hero-motto-sub{
font-size:12px;
letter-spacing:.06em;
}

.worked-modal-dialog{
margin:18px auto;
padding:20px 16px 16px;
border-radius:20px;
}

.worked-slot-grid{
grid-template-columns:1fr;
}

.footer-bottom{
margin-top:20px;
}

.qso-toast{
right:14px;
left:14px;
bottom:14px;
width:auto;
padding:13px 13px 13px 12px;
border-radius:16px;
}

}