/* assets/style.css */

/* Google font import - use in HTML too for reliability */
:root{
  --card-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --accent: linear-gradient(90deg,#6ee7ff,#8b5cf6,#06b6d4);
  --glass-glow: 0 6px 30px rgba(99,102,241,0.08);
  --text: #e6eef8;
  --muted: #a9b4c7;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: linear-gradient(135deg,#0f172a 0%, #020617 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Animated gradient layer */
.bg-animated {
  position:fixed; inset:0; z-index:-2;
  background:linear-gradient(120deg,#0ea5e9,#7c3aed,#06b6d4);
  filter:blur(30px) saturate(120%);
  opacity:0.18;
  animation: hue 12s linear infinite alternate;
  transform: translateZ(0);
}
@keyframes hue {
  0% { filter: blur(30px) hue-rotate(0deg) saturate(120%); transform: scale(1); }
  50% { filter: blur(26px) hue-rotate(60deg) saturate(130%); transform: scale(1.03); }
  100% { filter: blur(30px) hue-rotate(120deg) saturate(120%); transform: scale(1); }
}

/* faint moving gradient overlay for depth */
.bg-overlay {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(600px 300px at 10% 20%, rgba(99,102,241,0.08), transparent 10%),
    radial-gradient(600px 300px at 90% 80%, rgba(6,182,212,0.06), transparent 10%);
  mix-blend-mode: screen;
}

/* Container */
.container{
  max-width:1100px;
  margin:48px auto;
  padding:24px;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}
.brand {
  display:flex; align-items:center; gap:12px;
}
.logo {
  width:46px; height:46px; border-radius:10px;
  background:linear-gradient(135deg,#06b6d4,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#04263a;
  box-shadow: 0 6px 28px rgba(8,145,178,0.15);
}
.site-title { font-size:18px; font-weight:600; letter-spacing:0.1px; }
.site-tag { font-size:12px; color:var(--muted); margin-top:2px; }

/* Top card area */
.grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
@media (max-width:900px){ .grid{ grid-template-columns:1fr } }

/* Glass card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
  border: 1px solid var(--glass-border);
  border-radius:14px;
  padding:20px;
  box-shadow: var(--glass-glow);
  backdrop-filter: blur(8px) saturate(120%);
  transition: transform .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 50px rgba(99,102,241,0.12); }

/* Card header */
.card h3{ margin-bottom:8px; font-size:16px; letter-spacing:0.2px; }
.card p{ color:var(--muted); font-size:13px; margin-bottom:14px }

/* Inputs & buttons */
.textarea, .input, .btn {
  width:100%;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color:var(--text);
  padding:12px 14px;
  border-radius:10px;
  outline:none;
  font-size:14px;
}
.textarea{ min-height:120px; resize:vertical }
.row { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.small { flex:1; min-width:150px; }
.btn {
  cursor:pointer;
  background: linear-gradient(90deg,#6ee7ff, #8b5cf6);
  color:#022332; font-weight:600;
  border:none;
  box-shadow: 0 8px 30px rgba(139,92,246,0.12);
  transition: transform .12s ease;
}
.btn:active{ transform: translateY(1px) }

/* Neon accent text */
.accent {
  background: -webkit-linear-gradient(90deg,#6ee7ff,#8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight:700;
}

/* Footer bar (bottom border) */
.site-footer {
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:center; align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-top:1px solid rgba(255,255,255,0.04);
  padding:10px 14px; backdrop-filter: blur(6px);
  gap:18px; z-index:40;
}
.site-footer a{ color:var(--muted); font-size:13px; text-decoration:none; padding:8px 10px; border-radius:8px; transition: background .12s, color .12s }
.site-footer a:hover{ color:var(--text); background: rgba(255,255,255,0.02) }

/* utility */
.center{ display:flex; align-items:center; justify-content:center }
.meta { color:var(--muted); font-size:13px; margin-bottom:12px; }

/* tool results */
.result-box {
  margin-top:12px;
  padding:12px;
  border-radius:10px;
  background: rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
  color:var(--text);
  font-size:14px;
}

/* small link */
.link { color:var(--muted); text-decoration:none; font-size:13px; }
.link:hover { color:var(--text) }

/* page header title */
.page-header { margin:18px 0 22px 0 }
.page-header h1{ font-size:20px; margin-bottom:6px }
.page-header p{ color:var(--muted); font-size:13px }

/* contact form */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:900px){ .form-grid{ grid-template-columns:1fr } }

/* small helper */
.kv { font-size:13px; color:var(--muted) }