/* Tripflowra shared marketing/auth styles (Homepage + Auth pages) */

:root{
  --bg:#08090c;
  --paper:#f7f4ef;
  --ink:#0b1020;
  --muted:rgba(247,244,239,.78);
  --gold:#c9a84c;
  --teal:#14b8a6;

  --stroke:rgba(201,168,76,.18);
  --radius:18px;
  --radius-sm:10px;
  --shadow:0 18px 60px rgba(0,0,0,.35);

  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body)}

/* Page shell */
.home-page{
  background:radial-gradient(1200px 600px at 20% -10%, rgba(201,168,76,.20), transparent 60%),
             radial-gradient(900px 500px at 100% 0%, rgba(20,184,166,.14), transparent 55%),
             linear-gradient(180deg, #06070a, var(--bg));
  color:var(--paper);
  min-height:100vh;
  overflow-x:hidden;
}

.container{
  width:min(1120px, calc(100% - 48px));
  margin:0 auto;
}

/* Header / Nav */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(8,9,12,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:900;
  letter-spacing:-.5px;
  color:var(--paper);
  text-decoration:none;
}
.nav-cta{display:flex; gap:10px; align-items:center}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  line-height:1;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  user-select:none;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, rgba(201,168,76,1), rgba(232,197,122,1));
  border-color:rgba(201,168,76,.35);
  color:#111827;
}
.btn-primary:hover{filter:saturate(1.05) brightness(1.02)}
.btn-ghost{
  background:rgba(255,255,255,.06);
  color:var(--paper);
}
.btn-ghost:hover{background:rgba(255,255,255,.10)}

/* Small headings */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(201,168,76,.22);
  background:rgba(201,168,76,.08);
  color:rgba(247,244,239,.92);
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Cards (used by auth pages) */
.home-page .auth-left,
.home-page .auth-right{
  background:rgba(255,255,255,.06);
  color:var(--paper);
  border-color:rgba(255,255,255,.12);
}

/* Make DevExtreme inputs feel closer to theme */
.home-page .dx-widget{font-family:var(--font-body)}
.home-page .dx-texteditor.dx-editor-outlined{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  border-radius:12px;
}
.home-page .dx-texteditor.dx-editor-outlined .dx-texteditor-input{color:var(--paper)}
.home-page .dx-placeholder{color:rgba(247,244,239,.58)}
.home-page .dx-button.dx-button-default{
  border-radius:14px;
  border:1px solid rgba(201,168,76,.35);
  background:linear-gradient(135deg, rgba(201,168,76,1), rgba(232,197,122,1));
  color:#111827;
  font-weight:700;
}

@media (max-width:640px){
  .container{width:min(1120px, calc(100% - 28px))}
  .brand{font-size:24px}
}