/* Professional blue & black landing page styles */

:root{
  --bg-img: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1600&q=80');
  --blue: #0d47a1;
  --blue-500: #1976d2;
  --black: #0b0c10;
  --glass: rgba(10,12,18,0.56);
  --muted: #cfe3ff;
  --radius: 14px;
  --container: 1100px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background-color:var(--black);color:#e9f0ff}

body{
  background-image: var(--bg-img);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background: linear-gradient(180deg, rgba(4,6,12,0.62) 0%, rgba(9,12,20,0.78) 100%), rgba(13,71,161,0.06);
  z-index:0; pointer-events:none;
}

/* Page container */
.site-header, .main, .site-footer { position:relative; z-index:1; max-width:var(--container); margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; }

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:28px 0;
}
.brand { display:flex; align-items:center; gap:12px; }
.logo { border-radius:8px; box-shadow:0 6px 24px rgba(2,12,40,0.35); }
.brand-text .title{ font-family: 'Playfair Display', serif; color:var(--muted); font-size:20px; font-weight:700; letter-spacing:0.6px;}
.brand-text .title span{ color:var(--blue-500); margin-right:6px; }
.brand-text .tag{ font-size:13px; color:rgba(227,234,252,0.9); opacity:0.9; margin-top:-2px; }

.header-actions{ display:flex; align-items:center; gap:12px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:12px; font-weight:600; cursor:pointer; border:0; text-decoration:none; color:inherit; }
.btn:focus{ outline:2px solid rgba(25,118,210,0.18); outline-offset:2px; }
.btn.primary{ background:linear-gradient(90deg,var(--blue-500),var(--blue)); color:#fff; box-shadow:0 10px 30px rgba(13,71,161,0.16); }
.btn.ghost{ background:transparent; color:#eaf4ff; border:1px solid rgba(255,255,255,0.06); }

/* Hero */
.hero{ display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:center; margin-top:12px; margin-bottom:36px; }
.hero-inner{ background: linear-gradient(180deg, rgba(7,10,20,0.28), rgba(7,10,20,0.12)); border-radius:18px; padding:34px; color:#fff; box-shadow:0 10px 40px rgba(2,8,24,0.6); backdrop-filter: blur(6px); }
.hero-inner h1{ font-family:'Playfair Display', serif; font-size:34px; margin:0 0 10px 0; line-height:1.05; color:#fff; }
.hero-inner p{ margin:0 0 18px 0; color:var(--muted); font-size:16px; max-width:50ch; }
.hero-cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hero-visual{ border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(2,8,24,0.6); }
.hero-visual img{ display:block; width:420px; height:280px; object-fit:cover; }

/* Features */
.features{ display:flex; gap:18px; margin:24px 0 16px; justify-content:space-between; }
.feature{ background:var(--glass); padding:18px; border-radius:12px; flex:1; color: #e9f6ff; box-shadow: 0 8px 30px rgba(2,8,24,0.5); border:1px solid rgba(255,255,255,0.03); }
.feature h3{ margin:0 0 8px 0; color:#fff; }
.feature p{ margin:0; color:rgba(230,241,255,0.9); font-size:14px; }

/* Form card */
.forms{ margin:28px 0 48px; display:flex; justify-content:center; }
.form-card{ width:100%; max-width:820px; display:block; background:linear-gradient(180deg, rgba(5,8,18,0.6), rgba(7,10,20,0.42)); border-radius:18px; padding:26px; box-shadow:0 20px 60px rgba(2,8,24,0.6); border:1px solid rgba(255,255,255,0.04); }
.form-title{ margin:0 0 12px; font-size:20px; color:var(--muted); }

/* Form layout */
#cvForm{ display:flex; flex-direction:column; gap:14px; }
label{ font-size:13px; color:rgba(220,235,255,0.95); font-weight:600; display:block; margin-bottom:6px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea, input[type="file"]{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); color:#eaf4ff; font-size:14px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02);
}
textarea{ min-height:92px; resize:vertical; }
.row{ display:flex; gap:12px; }
.row.small{ gap:10px; }
.col{ flex:1 }

/* Actions */
.form-actions{ display:flex; gap:12px; align-items:center; margin-top:6px; }
.generate-btn{ padding:14px 20px; border-radius:12px; font-size:15px; width:260px; }
.btn.ghost.reset{ border:1px solid rgba(255,255,255,0.06); background:transparent; color:var(--muted); }

/* Footer */
.site-footer{ padding:28px 0; text-align:center; color:rgba(230,240,255,0.8); border-top:1px solid rgba(255,255,255,0.03); margin-bottom:40px; }
.footer-link{ color:var(--blue-500); margin-left:10px; text-decoration:none; font-weight:600; }

/* Responsive */
@media (max-width:1000px){
  .hero{ grid-template-columns: 1fr 320px; }
  .hero-visual img{ width:320px; height:220px; }
}
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; padding:0 10px; }
  .hero-visual{ display:none; }
  .features{ flex-direction:column; }
  .row{ flex-direction:column; }
  .generate-btn{ width:100%; }
}
@media (max-width:420px){
  .brand-text .title{ font-size:18px; }
  .brand-text .tag{ font-size:12px; }
  .hero-inner h1{ font-size:28px; }
  .hero-inner p{ font-size:14px; }
  .feature{ flex-direction:column, padding:18px 12px; }
  .form-card{ padding:22px; }
  .btn{ font-size:14px; padding:10px 14px; }
}