:root{
  --bg:#111111;
  --bg-soft:#171717;

  --panel:#1b1b1b;
  --panel-strong:#202020;
  --panel-hover:#232323;

  --text:#f2f2f2;
  --muted:#8f8f8f;
  --muted-2:#747474;

  --line:#2d2d2d;
  --line-strong:#3a3a3a;

  /* subtle brown-red accent */
  --accent:#6a3b34;
  --accent-hover:#7a443c;
  --accent-soft:#2a1e1c;

  --danger:#c96a6a;
  --success:#cfcfcf;

  --radius:20px;
  --radius-sm:14px;

  --shadow-sm:0 4px 12px rgba(0,0,0,.18);
  --shadow:0 10px 26px rgba(0,0,0,.26);
  --shadow-lg:0 18px 40px rgba(0,0,0,.32);

  --max:1240px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

/*

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

*/

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(120,60,50,0.18),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(80,40,35,0.18),
      transparent 45%
    ),
    linear-gradient(
      rgba(10,10,10,0.90),
      rgba(10,10,10,0.92)
    ),
    url("background.jpg");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;

  line-height:1.42;
  font-size:13.5px;
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}

button,input,textarea,select{font:inherit}

img{max-width:100%;display:block}

.container{
  width:min(94%,var(--max));
  margin:0 auto;
}

/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(17,17,17,.94);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  gap:18px;
}

.nav-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:-.02em;
  font-size:.96rem;
}

.brand-mark{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#242424;
  border:1px solid var(--line);
  font-weight:800;
}

.nav-links{
  display:flex;
  gap:20px;
  color:var(--muted);
  font-size:.88rem;
}

.nav-links a:hover{
  color:var(--text);
}

/* BUTTONS */

.btn{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  font-size:.88rem;
  cursor:pointer;
  background:transparent;
  color:var(--text);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.btn-primary:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}

.btn-secondary{
  background:#1a1a1a;
}

.btn-secondary:hover,
.btn-ghost:hover{
  background:#242424;
  border-color:var(--line-strong);
}

/* TYPOGRAPHY */

h1,h2,h3,h4{
  letter-spacing:-.04em;
  line-height:1.05;
  margin:0 0 10px;
}

h1{
  font-size:clamp(2.2rem,4.6vw,3.8rem);
  font-weight:700;
}

h2{
  font-size:clamp(1.55rem,3vw,2.2rem);
}

h3{
  font-size:1.02rem;
}

h4{
  font-size:.94rem;
}

p,.muted,.lead{
  color:var(--muted);
}

/* HERO */

.hero{
  padding:68px 0 36px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:36px;
  align-items:start;
}

.hero h1{
  max-width:11ch;
}

.hero p{
  max-width:60ch;
  margin:0 0 22px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* hero layout */


.hero-grid{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:60px;
  align-items:center;
}

/* preview panel */

.hero-preview{
  display:flex;
  justify-content:center;
}

.preview-card{
  width:100%;
  padding:22px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:8px;
}

.preview-title{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:16px;
}

.preview-metric{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.preview-metric:last-child{
  border-bottom:none;
}

.preview-metric strong{
  font-size:1.2rem;
  font-weight:700;
}

.inline-points{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:.85rem;
  margin-top:18px;
}

.inline-points span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.inline-points span::before{
  content:"•";
  color:#cfcfcf;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 13px;
  border-radius:999px;
  background:#181818;
  border:1px solid var(--line);
  font-size:.82rem;
  margin-bottom:16px;
}

/* SURFACES */

.card,
.panel,
.tool-shell,
.report-shell,
.auth-shell,
.kpi{
  background:rgba(26,26,26,0.88);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:22px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.card,
.panel,
.tool-shell{
  padding:22px;
}

.card:hover,
.panel:hover,
.tool-card:hover,
.kpi:hover{
  background:rgba(26,26,26,0.9);
  border-color:var(--line-strong);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

/* GRID */

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

/* SECTIONS */

.section{
  padding:32px 0 60px;
}

.section-head{
  margin:0 0 28px;
}

.section-head p{
  margin:0;
}

/* TOOL LIBRARY */

.tool-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.tool-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:220px;
  padding:22px;
}

.tool-card p{
  margin:0;
  font-size:.9rem;
}

.tool-card .btn{
  margin-top:auto;

}

.tool-card{
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.tool-card:hover{
  transform: translateY(-4px);
  border-color:#444;
  background:#1c1c1c;
}

#tools{
  margin-top:100px;
}

/* KPI 

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:18px 0 24px;
}

.kpi{
  padding:18px;
}

.kpi .label{
  color:var(--muted);
  font-size:.82rem;
  margin-bottom:6px;
}

.kpi .value{
  font-size:1.35rem;
  font-weight:800;
}

*/

/* KPI alignment fix */

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

.kpi{
  min-height:150px;
  padding:18px 16px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:6px;
  display:grid;
  grid-template-rows:48px 1fr;
  align-items:start;
  text-align:left;
}

.kpi .label{
  font-size:.78rem;
  line-height:1.35;
  color:var(--muted);
  margin:0;
  display:flex;
  align-items:flex-start;
}

.kpi .value{
  font-size:1.35rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
  margin:0;
  display:flex;
  align-items:flex-end;

  /* makes numbers same-width */
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum";
}

/* optional: keep currency/value strings from shifting */
.kpi .value,
.kpi .label{
  width:100%;
}



/* Insight Panel */

.insight-panel{
  margin-top:24px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:8px;
  overflow:hidden;
}

.insight-row{
  display:grid;
  grid-template-columns:160px 1fr;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}

.insight-row:last-child{
  border-bottom:none;
}

.insight-title{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.insight-text{
  font-size:.9rem;
  line-height:1.4;
}

.insight-list{
  margin:0;
  padding-left:18px;
}

/* FORM */

.field{
  display:grid;
  gap:6px;
  margin-bottom:14px;
}

.field label{
  font-weight:600;
  font-size:.88rem;
}

.input,
textarea.input,
select.input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--bg-soft);
  color:var(--text);
}

.input:focus,
textarea.input:focus,
select.input:focus{
  border-color:#4a4a4a;
  background:#1d1d1d;
}

textarea.input{
  min-height:100px;
  resize:vertical;
}

.actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* TABLE */

.table-wrap{overflow:auto}

.table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}

.table th,
.table td{
  padding:12px 10px;
  text-align:left;
  border-bottom:1px solid var(--line);
}

.table th{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

/* BADGES */

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#2a2a2a;
  border:1px solid var(--line);
  font-size:.74rem;
  font-weight:700;
}

/* RESULT BLOCK */

.result-note{
  padding:13px 14px;
  border-radius:14px;
  background:#252525;
  border:1px solid var(--line);
}

.score-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#2a2a2a;
  overflow:hidden;
}

.score-bar>span{
  display:block;
  height:100%;
  background:#d9d9d9;
}

/* LIST */

.list{
  display:grid;
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
}

.list li{
  padding:13px 14px;
  border-radius:14px;
  background:#252525;
  border:1px solid var(--line);
}

.empty-state{
  padding:24px;
  border:1px dashed #424242;
  border-radius:18px;
  background:#191919;
  text-align:center;
}

/* ===== KPI + bottom section layout fix ===== */

.panel{
  padding:28px;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
  margin-bottom:24px;
  align-items:stretch;
}

.kpi{
  min-height:120px;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  text-align:left;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
}

.kpi .label{
  font-size:.78rem;
  line-height:1.35;
  color:var(--muted);
  margin:0 0 12px 0;
  width:100%;
}

.kpi .value{
  font-size:1.4rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
  margin:0;
  width:100%;

  /* keeps numbers visually aligned */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

.score-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#2a2a2a;
  overflow:hidden;
  margin-top:18px;
}

.score-bar > span{
  display:block;
  height:100%;
  background:#d9d9d9;
}

/* hide the bar completely if empty */
.score-bar:empty{
  display:none;
}

/* if your page uses .track instead of .score-bar */
.track{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#2a2a2a;
  overflow:hidden;
  margin-top:18px;
}

.track > span,
.track > div{
  display:block;
  height:100%;
  background:#d9d9d9;
}

.track:empty{
  display:none;
}

/* add breathing room below textarea / generated idea area */
textarea.input,
.input{
  margin-bottom:2px;
}

/* mobile stacking */
@media (max-width:1100px){
  .kpi-grid{
    grid-template-columns:1fr;
  }

  .kpi{
    min-height:auto;
  }
}

/* FOOTER */

.footer{
  padding:20px 0 40px;
  color:var(--muted);
  font-size:.85rem;
}

/* RESPONSIVE */

@media(max-width:1100px){

.hero-grid,
.grid-2,
.grid-3,
.grid-4,
.tool-grid,
.kpi-grid{
grid-template-columns:1fr;
}

.hero h1{
max-width:100%;
}

}

@media(max-width:760px){

.nav-links{display:none}

.btn{width:100%}

.actions{flex-direction:column}

.hero{padding-top:44px}

}