/* ===========================================================
   Latif Law — static conversion of v0/Next.js project
   Theme: Daman-inspired deep azure blue on a clean light base
=========================================================== */

:root{
  --background:#F7F8FB;
  --foreground:#1D2333;
  --card:#FFFFFF;
  --card-foreground:#1D2333;
  --primary:#2952CC;
  --primary-foreground:#FAFBFE;
  --secondary:#EEF1F7;
  --secondary-foreground:#2C3B66;
  --muted:#EFF1F6;
  --muted-foreground:#5B6478;
  --accent:#3E7BFF;
  --accent-foreground:#FAFBFE;
  --destructive:#D1453D;
  --border:#E1E5EE;
  --input:#E1E5EE;
  --radius:0.25rem;
  --maxw:1280px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Archivo', ui-sans-serif, system-ui, sans-serif;
  background:var(--background);
  color:var(--foreground);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul, ol{list-style:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3{letter-spacing:-0.02em; font-weight:800; line-height:1.05;}
h2{font-size:clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);}
h3{font-size:1.125rem; font-weight:700;}
p{color:var(--muted-foreground);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem;}
@media (min-width:1024px){ .wrap{padding:0 2rem;} }
.text-primary{color:var(--primary);}
.font-mono{font-family:'JetBrains Mono', ui-monospace, monospace;}

.eyebrow-label{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--primary);
}
.eyebrow-label.small{font-size:10px;}
.eyebrow-label.on-dark{color:rgba(255,255,255,0.7);}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  border-radius:var(--radius);
  font-weight:700; font-size:0.9375rem;
  padding:0.75rem 1.5rem;
  border:1px solid transparent;
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-lg{padding:1rem 1.75rem; font-size:1rem;}
.btn-primary{background:var(--primary); color:var(--primary-foreground);}
.btn-outline{border-color:var(--border); color:var(--foreground); background:transparent;}
.btn-outline:hover{border-color:var(--primary); color:var(--primary);}

/* ===== Grid helpers ===== */
.grid-2{display:grid; grid-template-columns:1fr; gap:1.25rem;}
.grid-3{display:grid; grid-template-columns:1fr; gap:1px;}
.grid-4{display:grid; grid-template-columns:1fr; gap:2rem;}
@media (min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-4.tiles{grid-template-columns:1fr 1fr;}
  .grid-4.steps{grid-template-columns:1fr 1fr; gap:1.5rem;}
}
@media (min-width:1024px){
  .grid-3{grid-template-columns:1fr 1fr 1fr;}
  .grid-4.tiles{grid-template-columns:repeat(4,1fr);}
  .grid-4.steps{grid-template-columns:repeat(4,1fr); gap:1.5rem;}
}
.tiles{border:1px solid var(--border); background:var(--border); overflow:hidden; border-radius:0.5rem; gap:1px;}
.review-grid{gap:1.5rem;}
@media (min-width:1024px){ .review-grid{grid-template-columns:1fr 1fr;} }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(225,229,238,0.8);
  background:rgba(247,248,251,0.8);
  backdrop-filter:blur(10px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:4rem;
}
@media (min-width:768px){ .header-inner{height:5rem;} }
.brand{display:flex; align-items:center; gap:0.75rem;}
.brand-mark{
  display:flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:var(--radius);
  background:var(--primary); color:var(--primary-foreground); flex-shrink:0;
}
.brand-mark.small{width:2.25rem; height:2.25rem;}
@media (min-width:768px){ .brand-mark{width:3rem; height:3rem;} }
.brand-text{display:flex; flex-direction:column; line-height:1;}
.brand-name{font-size:1.375rem; font-weight:800; letter-spacing:-0.02em;}
@media (min-width:768px){ .brand-name{font-size:1.625rem;} }
.brand-sub{
  margin-top:0.25rem; font-family:'JetBrains Mono', monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:0.2em; color:var(--muted-foreground);
}
.primary-nav{display:none; align-items:center; gap:2rem;}
@media (min-width:1024px){ .primary-nav{display:flex;} }
.primary-nav a{font-size:0.875rem; font-weight:500; color:var(--muted-foreground); transition:color .15s ease;}
.primary-nav a:hover{color:var(--foreground);}
.header-cta{display:none; align-items:center; gap:0.75rem;}
@media (min-width:768px){ .header-cta{display:flex;} }
.phone-link{display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; font-weight:600; transition:color .15s ease;}
.phone-link svg{color:var(--primary);}
.phone-link:hover{color:var(--primary);}
.burger{
  display:flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border:1px solid var(--border); border-radius:var(--radius);
  background:transparent; color:var(--foreground);
}
@media (min-width:768px){ .burger{display:none;} }

.mobile-menu{display:none; border-top:1px solid var(--border); background:var(--background); padding:1rem 1.25rem;}
.mobile-menu.open{display:block;}
.mobile-nav{display:flex; flex-direction:column; gap:0.25rem;}
.mobile-nav a{padding:0.75rem 0.5rem; border-radius:var(--radius); font-size:1rem; font-weight:500;}
.mobile-nav a:hover{background:var(--secondary);}
.mobile-cta{margin-top:0.75rem; display:flex; flex-direction:column; gap:0.75rem;}
.mobile-cta .btn{width:100%;}

/* ===== Hero ===== */
.hero{position:relative; overflow:hidden;}
.hero-aurora{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.welcome-aurora{
  position:absolute; left:50%; top:50%; width:115%; aspect-ratio:1/1;
  transform:translate(-50%,-50%); border-radius:50%; opacity:0.45; filter:blur(70px);
  background-image:
    radial-gradient(closest-side, rgba(200,50,150,0.7), transparent 72%),
    radial-gradient(closest-side, rgba(230,140,190,0.55), transparent 72%),
    radial-gradient(closest-side, rgba(120,30,110,0.7), transparent 72%),
    radial-gradient(closest-side, rgba(190,90,160,0.6), transparent 72%);
  background-size:62% 62%, 55% 55%, 66% 66%, 50% 50%;
  background-position:16% 22%, 82% 28%, 72% 82%, 30% 74%;
  background-repeat:no-repeat;
  animation:aurora-spin 26s linear infinite;
  -webkit-mask-image:radial-gradient(closest-side, black, transparent);
  mask-image:radial-gradient(closest-side, black, transparent);
}
.aurora-veil{position:absolute; inset:0; background:rgba(247,248,251,0.35);}
@keyframes aurora-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .welcome-aurora{animation:none;} }

.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:3rem;
  padding:3.5rem 0 4rem;
}
@media (min-width:1024px){
  .hero-inner{grid-template-columns:1.05fr 0.95fr; gap:2rem; padding:5rem 0 6rem;}
}
.hero-copy{display:flex; flex-direction:column;}
.eyebrow{
  margin-bottom:2rem; display:flex; align-items:center; gap:0.75rem;
  font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.22em;
  color:var(--muted-foreground);
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--primary);}
.hero-copy h1{font-size:clamp(2.5rem, 1.9rem + 3vw, 4.5rem);}
.lede{margin-top:1.75rem; max-width:28rem; font-size:1.125rem; line-height:1.6; color:var(--muted-foreground);}
.hero-actions{margin-top:2.25rem; display:flex; flex-direction:column; gap:0.75rem;}
@media (min-width:640px){ .hero-actions{flex-direction:row;} }
.hero-note{
  margin-top:2.5rem; display:flex; align-items:center; gap:0.625rem;
  font-family:'JetBrains Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.15em;
  color:var(--muted-foreground);
}
.hero-note svg{color:var(--primary); flex-shrink:0;}

.hero-media{position:relative;}
.hero-photo{position:relative; aspect-ratio:4/5; width:100%; overflow:hidden; border-radius:0.5rem; border:1px solid var(--border);}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:top;}
.hero-photo-fade{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(247,248,251,0.7), transparent 35%, rgba(247,248,251,0.7));}
.hero-photo-caption{position:absolute; left:1.25rem; right:1.25rem; top:1rem;}
.hero-photo-caption .name{font-size:1.125rem; font-weight:800;}
.hero-photo-caption .role{
  margin-top:0.125rem; font-family:'JetBrains Mono', monospace; font-size:10px;
  text-transform:uppercase; letter-spacing:0.18em; color:var(--muted-foreground);
}
.hero-stat-card{
  position:absolute; bottom:-1.25rem; left:1rem; right:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  border-radius:0.5rem; border:1px solid var(--border);
  background:rgba(255,255,255,0.95); backdrop-filter:blur(4px);
  padding:1rem 1.25rem;
}
@media (min-width:640px){ .hero-stat-card{left:1.5rem; right:auto; gap:2.5rem;} }
.stat-num{font-size:1.75rem; font-weight:800;}
.stat-label{margin-top:0.125rem; font-family:'JetBrains Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.18em; color:var(--muted-foreground);}
.stat-divider{display:none; width:1px; height:2.5rem; background:var(--border);}
@media (min-width:640px){ .stat-divider{display:block;} }
.hero-stat-card .stat-block:last-child{display:none;}
@media (min-width:640px){ .hero-stat-card .stat-block:last-child{display:block;} }

/* ===== Generic section spacing ===== */
section{padding:3.5rem 0;}
@media (min-width:1024px){ section{padding:5rem 0;} }
.section-top{display:flex; flex-direction:column; gap:0.75rem; margin-bottom:3rem;}
@media (min-width:768px){ .section-top{flex-direction:row; align-items:flex-end; justify-content:space-between;} }
.section-top h2{margin-top:0.75rem;}
.section-note{max-width:20rem; font-size:0.875rem; line-height:1.6;}
.section-head-max{max-width:42rem;}
.section-head-max h2{margin-top:0.75rem;}

/* ===== Results band ===== */
.results-band{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,0.4);}
.tile{background:var(--background); padding:1.5rem; display:flex; flex-direction:column; gap:0.5rem;}
.tile-amount{font-size:2.25rem; font-weight:800;color:var(--primary);}
.tile-title{font-size:1rem; font-weight:600;}
.tile-detail{font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--muted-foreground);}

/* ===== Practice areas ===== */
.area-card{
  position:relative; background:var(--background);
  padding:1.75rem; display:flex; flex-direction:column; gap:1rem;
  transition:background .15s ease;
}
.area-card:hover{background:var(--card);}
.area-icon{
  display:flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border:1px solid var(--border); border-radius:var(--radius);
  color:var(--primary);
}
.area-card h3{font-size:1.25rem;}
.area-card p{font-size:0.875rem; line-height:1.6;}
.area-arrow{position:absolute; right:1.5rem; top:1.75rem; color:var(--muted-foreground); opacity:0; transition:opacity .15s ease;}
.area-card:hover .area-arrow{opacity:1; color:var(--primary);}

/* ===== Why us ===== */
.why-us{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,0.4);}
.why-inner{display:grid; grid-template-columns:1fr; gap:3rem;}
@media (min-width:1024px){ .why-inner{grid-template-columns:1fr 1fr; gap:4rem;} }
.why-media{position:relative; order:2;}
@media (min-width:1024px){ .why-media{order:1;} }
.why-photo{position:relative; aspect-ratio:1/1; width:100%; overflow:hidden; border-radius:0.5rem; border:1px solid var(--border);}
.why-photo img{width:100%; height:100%; object-fit:cover;}
.pledge-card{
  position:absolute; bottom:1.25rem; left:1.25rem; right:1.25rem;
  border-radius:0.5rem; border:1px solid rgba(41,82,204,0.4);
  background:rgba(255,255,255,0.92); backdrop-filter:blur(4px);
  padding:1.25rem;
}
@media (min-width:640px){ .pledge-card{right:auto; max-width:20rem;} }
.pledge-text{margin-top:0.5rem; font-size:1.125rem; font-weight:700; line-height:1.35; color:var(--foreground);}
.why-copy{display:flex; flex-direction:column; justify-content:center; order:1;}
@media (min-width:1024px){ .why-copy{order:2;} }
.points-list{margin-top:2.25rem; display:flex; flex-direction:column; gap:1.5rem;}
.points-list li{display:flex; gap:1rem;}
.check-bubble{
  margin-top:0.125rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--primary); color:var(--primary-foreground);
}
.points-list h3{font-size:1rem;}
.points-list p{margin-top:0.25rem; font-size:0.875rem; line-height:1.6;}

/* ===== Process ===== */
.step{border-top:1px solid var(--border); padding-top:1.25rem;}
.step-num{font-family:'JetBrains Mono', monospace; font-size:0.875rem; font-weight:700; color:var(--primary);}
.step h3{margin-top:1rem;}
.step p{margin-top:0.5rem; font-size:0.875rem; line-height:1.6;}

/* ===== Testimonials ===== */
.testimonials{border-top:1px solid var(--border); background:rgba(255,255,255,0.4);}
.stars-row{display:flex; align-items:center; gap:1rem;}
.stars{display:flex; gap:0.25rem; color:var(--primary);}
.review-count{font-family:'JetBrains Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.15em; color:var(--muted-foreground);}
.review-grid{margin-top:2.5rem;}
.review-card{
  display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid var(--border); border-radius:0.5rem; background:var(--card); padding:2rem;
}
.review-card blockquote{font-size:1.25rem; font-weight:500; line-height:1.5; color:var(--foreground);}
@media (min-width:640px){ .review-card blockquote{font-size:1.5rem;} }
.review-card figcaption{margin-top:2rem; border-top:1px solid var(--border); padding-top:1.25rem;}
.reviewer-name{font-weight:700;}
.reviewer-case{margin-top:0.125rem; font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--primary);}

/* ===== Case review ===== */
.case-review-grid{
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--border); border-radius:0.75rem; background:var(--border); overflow:hidden;
}
@media (min-width:1024px){ .case-review-grid{grid-template-columns:0.9fr 1.1fr;} }
.case-review-pitch{
  position:relative; isolation:isolate; overflow:hidden;
  background-color:var(--primary);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:2rem; color:var(--primary-foreground);
}
@media (min-width:1024px){ .case-review-pitch{padding:3rem;} }
.case-review-pitch::before{
  content:""; position:absolute; inset:-45%; z-index:-1;
  background-image:
    radial-gradient(closest-side, rgba(255,255,255,0.35), transparent 70%),
    radial-gradient(closest-side, rgba(255,255,255,0.2), transparent 70%),
    radial-gradient(closest-side, rgba(0,20,80,0.4), transparent 70%),
    radial-gradient(closest-side, rgba(255,255,255,0.25), transparent 70%);
  background-size:60% 60%, 52% 52%, 66% 66%, 48% 48%;
  background-position:14% 18%, 84% 26%, 74% 84%, 28% 78%;
  background-repeat:no-repeat;
  filter:blur(34px);
  animation:aurora-spin 30s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .case-review-pitch::before{animation:none;} }
.case-review-pitch h2{margin-top:1rem; color:#fff; font-size:clamp(1.75rem,1.4rem+1.6vw,2.25rem); line-height:1.2;}
.pitch-copy{margin-top:1.25rem; max-width:22rem; color:rgba(255,255,255,0.85); line-height:1.6;}
.pitch-phone{margin-top:2.5rem; display:inline-flex; align-items:center; gap:0.625rem; font-size:1.125rem; font-weight:700; color:#fff;}

.case-review-form-wrap{background:var(--background); padding:2rem;}
@media (min-width:1024px){ .case-review-form-wrap{padding:3rem;} }
.case-form{display:flex; flex-direction:column; gap:1.25rem;}
.field{display:flex; flex-direction:column; gap:0.5rem;}
.field span{
  font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--muted-foreground);
}
.field input, .field select, .field textarea{
  width:100%; border-radius:var(--radius); border:1px solid var(--input);
  background:rgba(238,241,247,0.4); padding:0.75rem 1rem; font-size:0.9375rem; color:var(--foreground);
  font-family:inherit; transition:border-color .15s ease, background .15s ease;
  resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--primary); background:rgba(238,241,247,0.7);
}
.form-disclaimer{text-align:center; font-size:0.75rem; line-height:1.5; color:var(--muted-foreground);}
.case-form-success{
  min-height:20rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  color:var(--primary);
}
.case-form-success h3{margin-top:1.25rem; font-size:1.5rem; color:var(--foreground);}
.case-form-success p{margin-top:0.75rem; max-width:22rem; line-height:1.6;}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); background:var(--background);}
.site-footer .wrap{padding-top:3.5rem; padding-bottom:3.5rem;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:2.5rem;}
@media (min-width:768px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr;} }
.footer-brand .brand{margin-bottom:1rem;}
.footer-brand p{max-width:20rem; font-size:0.875rem; line-height:1.6;}
.footer-heading{font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.2em; color:var(--muted-foreground);}
.footer-links{margin-top:1rem; display:flex; flex-direction:column; gap:0.75rem; font-size:0.875rem;}
.footer-links a{display:flex; align-items:center; gap:0.625rem; color:rgba(29,35,51,0.9); transition:color .15s ease;}
.footer-links a:hover{color:var(--primary);}
.footer-links a svg{color:var(--primary); flex-shrink:0;}
.static-line{display:flex; align-items:center; gap:0.625rem; color:rgba(29,35,51,0.9);}
.static-line svg{color:var(--primary); flex-shrink:0;}
.footer-bottom{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:0.75rem; font-size:0.75rem; color:var(--muted-foreground);
}
@media (min-width:768px){ .footer-bottom{flex-direction:row; align-items:center; justify-content:space-between;} }
.legal-note{max-width:38rem; line-height:1.6;}

/* ===== Reveal-on-scroll (nice-to-have) ===== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }