/*
  Global stylesheet for the law office site (version 2).
  Defines colour variables, layout utilities and responsive behaviour.
*/

:root{
  --bg:#0b1324;
  --bg-2:#0f172a;
  --fg:#e5e7eb;
  --muted:#9ca3af;
  --brand:#1e90ff;
  --brand-2:#60a5fa;
  --accent:#22d3ee;
  --card:#0b1324cc;
  --border:#1f2a44;
  --maxw:1120px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--fg);
  background: radial-gradient(1000px 600px at 10% -10%, #12254a 0%, transparent 60%),
              radial-gradient(900px 500px at 110% -20%, #0e3a5f 0%, transparent 60%),
              linear-gradient(180deg,var(--bg),var(--bg-2));
  line-height:1.6;
  scroll-behavior:smooth;
}
a{color:var(--brand)}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: saturate(160%) blur(12px);
  background: rgba(11,19,36,.6);
  border-bottom:1px solid var(--border);
}
.nav{max-width:var(--maxw); margin:auto; padding:10px 20px; display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-mark{width:36px; height:36px; border-radius:10px; background: conic-gradient(from 180deg, var(--brand), var(--accent)); box-shadow: var(--shadow)}
.brand h1{font-size:18px; margin:0; color:#fff; letter-spacing:.3px}
.spacer{flex:1}
.nav a{color:var(--fg); text-decoration:none; padding:8px 12px; border-radius:10px}
.nav a:hover{background:#ffffff14}

.hero{position:relative; overflow:hidden;}
.hero-wrap{max-width:var(--maxw); margin:auto; padding:64px 20px 72px; display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.kicker{color:var(--accent); letter-spacing:.2em; text-transform:uppercase; font-weight:600; font-size:.8rem}
.title{font-size: clamp(34px, 4vw, 52px); line-height:1.1; margin:.3em 0 .4em;}
.subtitle{color:var(--muted); font-size: clamp(16px, 2vw, 19px)}
.cta{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.btn{border:none; background:linear-gradient(90deg, var(--brand), var(--accent)); color:#001225; padding:14px 18px; border-radius:12px; font-weight:700; text-decoration:none; box-shadow:var(--shadow)}
.btn.secondary{background:#ffffff12; color:#eaf2ff; border:1px solid #ffffff2a}
.btn:focus-visible{outline:3px solid #94ccff}

.hero-art{position:relative; min-height:280px; border-radius:var(--radius); background:linear-gradient(180deg,#0e213c,#0b1324); border:1px solid var(--border); box-shadow:var(--shadow);}
.grid{position:absolute; inset:0; background-image: radial-gradient(#60a5fa22 1px, transparent 1px); background-size:22px 22px; mask-image: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.1));}
.scale{position:absolute; inset:auto 10% 14% auto; width:220px; aspect-ratio:1.4; border:1px solid #6fb3ff3a; border-radius:16px; transform: rotate(-6deg);}
.globe{position:absolute; top:-18px; left:-18px; width:240px; height:240px; border-radius:50%; border:1px solid #4ac6f333; background: radial-gradient(circle at 30% 30%,#2e7bd1 0 40%, transparent 50%), radial-gradient(circle at 70% 60%, #15bfe0 0 35%, transparent 46%);}    
.badge{position:absolute; bottom:14px; left:14px; background:#061024; color:#a7c6ff; border:1px solid #2a3b61; padding:10px 12px; border-radius:12px; font-size:.85rem}

section{max-width:var(--maxw); margin:48px auto; padding:0 20px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--card); border:1px solid var(--border); padding:22px; border-radius:var(--radius); box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}

.practice-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pill{display:inline-flex; align-items:center; gap:10px; padding:12px 14px; background:#0c1a33; border:1px solid var(--border); border-radius:12px}

.split{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start}

.contact{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.contact .panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}

footer{margin-top:60px; border-top:1px solid var(--border); padding:26px 20px; color:var(--muted)}

@media (max-width: 900px){
  .hero-wrap{grid-template-columns:1fr}
  .cards, .practice-list, .contact{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .hero-art{min-height:220px}
}