:root {

  /* ===== PRIMARY THEME ===== */
  --primary: #0e222e;        /* dark navy */
  --secondary: #576661;      /* muted UI gray */
  --background: #f6f7fb;     /* app background */
  --card: #ffffff;

  /* ===== ACCENT (CTA COLOR) ===== */
  --accent: #ff8a00;        /* orange highlight */
  --accent-hover: #e67600;

  /* ===== TEXT COLORS ===== */
  --text-dark: #0f172a;
  --text-muted: #6b7280;

  /* ===== BORDER ===== */
  --border: #e5e7eb;

  /* ===== SHADOW ===== */
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ===== GLOBAL ===== */
body {
  font-family: 'Inter', sans-serif;
  background: var(--background);
  color: var(--text-dark);
}

/* Headings */
h1, h2, h3, h4, h5 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}

/* Buttons */
.btn-primary {
  background: var(--primary);
  border: none;
}

.btn-primary:hover {
  background: #0b1a23;
}

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

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

/* Cards */
.card-ui {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

/* Inputs */
.form-control {
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 12px;
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: none;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}
.password-wrapper{
    position:relative;
}

.password-wrapper .form-control{
    padding-right:50px;
}

.password-toggle{
    position:absolute;
    top:50%;
    right:18px;
    transform:translateY(-50%);
    cursor:pointer;
    color:#6b7280;
    font-size:15px;
    z-index:5;
    transition:.2s;
}

.password-toggle:hover{
    color:var(--accent);
}
body{
    font-family:Inter,sans-serif;
    background:var(--background);
}

/* Navbar */

.navbar-modern{
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:999;
}

/* Hero */

.hero{
    padding:120px 0;
    background:
        radial-gradient(circle at top right,
        rgba(59,130,246,.12),
        transparent 35%),
        radial-gradient(circle at left,
        rgba(14,165,233,.10),
        transparent 30%);
}

.hero-title{
    font-family:Sora;
    font-size:58px;
    font-weight:700;
    line-height:1.1;
    color:var(--primary);
}

.hero-text{
    color:var(--text-muted);
    max-width:700px;
    margin:auto;
    font-size:18px;
}

.hero-card{
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    padding:35px;
}

/* Buttons */

.btn-modern{
    border-radius:14px;
    padding:12px 28px;
    font-weight:600;
    transition:.3s;
}

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

/* Cards */

.card-modern{
    background:white;
    border:none;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.35s;
    height:100%;
}

.card-modern:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* Sections */

.section{
    padding:90px 0;
}

.section-title{
    font-family:Sora;
    font-weight:700;
    margin-bottom:50px;
}

/* Pricing */

.pricing-pro{
    border:2px solid var(--accent);
    position:relative;
    overflow:hidden;
}

.pricing-badge{
    position:absolute;
    top:15px;
    right:-35px;
    background:var(--accent);
    color:white;
    padding:8px 40px;
    transform:rotate(35deg);
    font-size:12px;
    font-weight:600;
}

/* CTA */

.cta{
    background:linear-gradient(135deg,var(--primary),#0ea5e9);
    color:white;
    border-radius:30px;
    padding:70px 40px;
}

/* Footer */

.footer{
    background:#081018;
    color:#94a3b8;
}

@media(max-width:768px){

.hero-title{
    font-size:40px;
}

.hero{
    padding:90px 0;
}

}