:root{
  --bg:#0b1020; --bg-2:#0f1530; --card:#10182e; --text:#e6eaf2; --muted:#a1acc5;
  --line:#21314d; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.2);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial;color:var(--text);
  background:radial-gradient(1200px 700px at 15% -10%, #1b2a66 0%, transparent 60%),
             radial-gradient(900px 600px at 85% -20%, #442a7a 0%, transparent 60%),
             radial-gradient(1100px 700px at 50% 120%, #112a5b 0%, transparent 60%), var(--bg);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--maxw);margin-inline:auto;padding:0 24px}
.section{padding:80px 0}
@media(min-width:900px){.section{padding:110px 0}}
h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;margin:0 0 14px}
h2{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;margin:0 0 16px}
h3{font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.2;margin:0 0 10px}
p{color:var(--muted);font-size:clamp(1rem,1.1vw,1.05rem);line-height:1.65}
a{color:inherit;text-decoration:none}
.link{text-decoration:underline}
.muted{color:var(--muted)}

.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.3) blur(14px);
  background:linear-gradient(180deg,rgba(10,16,32,.85),rgba(10,16,32,.60));border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:12px;border:1px solid #2b3f6e;background:linear-gradient(135deg,#1d3e7a,#142448)}
.brand-text{display:flex;flex-direction:column;font-weight:700}
.brand-text span{color:var(--muted);font-size:.9rem}
.navlinks{display:none;align-items:center;gap:22px}
.navlinks a{color:var(--muted)}
.navlinks a:hover{color:var(--text)}
.cta{display:inline-grid;place-items:center;padding:10px 14px;border-radius:12px;font-weight:800;border:1px solid #2b3f6e;background:linear-gradient(135deg,#17355f,#1a2b4b);color:#def6ff;box-shadow:var(--shadow)}
.cta.alt{background:transparent;color:#d8e8ff;border-color:#2b3f6e}
.cta.alt:hover{background:rgba(255,255,255,.06)}
.hamb{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:transparent}
@media(min-width:960px){.navlinks{display:flex}.hamb{display:none}}
.mobile{display:none;padding:14px 0 24px;border-bottom:1px solid var(--line)}
.mobile a{display:block;padding:10px 6px;color:var(--muted)}
.mobile a:hover{color:var(--text)}
.mobile.open{display:block}

.hero{display:grid;gap:26px;align-items:center;grid-template-columns:1fr;text-align:center}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:22px}
.btn{padding:14px 18px;border-radius:14px;font-weight:800;border:1px solid #2b3f6e;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,#00d4ff,#2effb5);color:#001428}
.btn.ghost{background:transparent;color:#d8e8ff}.btn.ghost:hover{background:rgba(255,255,255,.04)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #2b3f6e;padding:6px 10px;border-radius:999px;color:#d8e8ff;background:linear-gradient(180deg,#0c1a36,#0a1328)}
.hero-art{position:relative;isolation:isolate;border-radius:24px;padding:18px;margin-top:12px;background:linear-gradient(180deg,rgba(17,34,74,.6),rgba(11,17,34,.6));border:1px solid #233a64;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),var(--shadow)}
.grid-hero{display:grid;grid-template-columns:1fr;gap:18px}
.grid-item{background:linear-gradient(180deg,rgba(19,28,58,.8),rgba(13,20,42,.8));border:1px solid #203459;border-radius:20px;padding:18px;min-height:126px}
@media(min-width:980px){.hero{grid-template-columns:1.1fr .9fr;text-align:left}.hero-cta{justify-content:flex-start}.grid-hero{grid-template-columns:repeat(2,1fr)}}

.cards{display:grid;grid-template-columns:1fr;gap:18px}
.card{background:linear-gradient(180deg,rgba(18,25,54,.85),rgba(12,18,40,.85));border:1px solid #21345a;border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.portfolio{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.portfolio{grid-template-columns:repeat(2,1fr)}}@media(min-width:1100px){.portfolio{grid-template-columns:repeat(3,1fr)}}
.work{position:relative;overflow:hidden;border-radius:18px;border:1px solid #233a64;background:#0e1530}
.work .thumb{aspect-ratio:16/10;display:grid;place-items:center;color:#cfe6ff}
.work .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-top:1px solid #21345a;background:linear-gradient(180deg,#0e1b3a,#0c1530)}
.work .tag{font-size:.8rem;color:#a9c3ff}
.thumb-img{width:100%;height:100%;object-fit:cover}

.grid-2{display:grid;grid-template-columns:1fr;gap:18px}@media(min-width:980px){.grid-2{grid-template-columns:1.2fr .8fr}}
input,textarea,select{background:#0c132b;color:var(--text);border:1px solid #22385f;border-radius:12px;padding:12px 14px;font:inherit;width:100%}
textarea{min-height:120px;resize:vertical}

.photo{width:100%;height:auto;border-radius:18px;border:1px solid #233a64;box-shadow:var(--shadow);display:block}
.gallery{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.gallery{grid-template-columns:repeat(3,1fr)}}

.site-footer{border-top:1px solid var(--line);padding:28px 0 60px;color:var(--muted)}
.footer-grid{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:linear-gradient(180deg,#0f1734,#0a132a);border:1px solid var(--line);color:#d8e8ff}

/* Floating mobile BOOK button */
.fab-book{
  position:fixed;
  bottom:calc(18px + env(safe-area-inset-bottom));
  right:18px;
  z-index:60;
  display:none;
  padding:14px 16px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.3px;
  background:linear-gradient(135deg,#00d4ff,#2effb5);
  color:#001428;
  border:1px solid #2b3f6e;
  box-shadow:var(--shadow);
}
@media(max-width:959px){ .fab-book{display:inline-grid;place-items:center} }