:root{
      --radius:18px; --radius-lg:22px; --maxw:1200px; --shadow:0 10px 30px rgba(0,0,0,.12);
      --accent:#2563eb; --accent-2:#93c5fd; --highlight:#10b981; --danger:#ef4444;
    }

    /* Light & Dark palettes */
    :root[data-theme="light"]{
      --bg: #f7f9fc; --bg2:#ffffff; --card:#ffffff; --surface: rgba(17,24,39,.04);
      --border: rgba(17,24,39,.08); --muted:#6b7280; --text:#0b1020; --text-dim:#364152; --grad1:#ffffff; --grad2:#f4f7fb;
    }
    :root[data-theme="dark"]{
      --bg:#0b0d12; --bg2:#0e1117; --card:#0f1319; --surface: rgba(255,255,255,.04);
      --border: rgba(255,255,255,.06); --muted:#8b94aa; --text:#e9edf5; --text-dim:#c8cfdf; --grad1:#0b0d12; --grad2:#0e1117;
    }

    /* Base */
    html,body{height:100%;}
    body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; background:linear-gradient(180deg,var(--grad1) 0%, var(--grad2) 100%); color:var(--text); -webkit-font-smoothing:antialiased;}
    a { color:var(--accent); }
    .container-max { max-width: var(--maxw); margin: 0 auto; }

    /* Utilities (small) */
    .card-soft{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
    .pill{padding:6px 12px;border-radius:999px;font-size:12px;background: rgba(37,99,235,.08);color:var(--accent);border:1px solid rgba(37,99,235,.2);}
    .muted{color:var(--muted);} .dim{color:var(--text-dim);} .center{text-align:center}

    /* Header */
    header{position:fixed;top:0;z-index:1030;background:color-mix(in oklab, var(--bg) 75%, transparent);backdrop-filter: blur(8px);border-bottom:1px solid var(--border); width:100%;} 
    .logo-circle{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;}
    .logo-circle1{width:62px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;}
    .brand-text{font-weight:700;letter-spacing:.3px;font-size:36px;color:var(--text-dim)}

	#book1{padding:100px 0 40px;    margin-top: 70px;}

    /* Hero */
    .hero{padding:100px 0 40px}
    .hero-illustration{border-radius:var(--radius-lg); overflow:hidden;border:1px solid var(--border); min-height:260px}
    .spark{position:absolute;right:-18px;bottom:-18px;width:110px;height:110px;border-radius:20px;background: radial-gradient(120% 120% at 20% 20%, color-mix(in oklab, var(--accent), #000 12%), transparent 70%);filter:blur(12px);opacity:.7}
	p {
	font-family: font-family: 'DM Sans';
	}
    /* Metrics */
    .metric{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px;text-align:center}

    /* Services */
    .service-card{padding:18px;position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease}
    .service-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.06)}

    /* Pricing */
    .price-card{padding:22px;position:relative;transition:transform .18s ease;border-radius:14px}
    .price-card.popular{outline:2px solid color-mix(in oklab, var(--accent) 55%, var(--grad1) 45%);box-shadow:0 10px 28px rgba(37,99,235,.08)}
    .ribbon{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#facc15,#f59e0b);color:#0b1020;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px}

    /* Testimonials */
    .t-slider{border-radius:var(--radius);overflow:hidden}
    .t-track{display:flex;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
    .testimonial{min-width:100%;padding:24px}

    /* FAQ */
    .faq-q{display:flex;justify-content:space-between;align-items:center;padding:16px 0;cursor:pointer}
    .faq-item{border-bottom:1px solid var(--border)}

    /* Footer */
    footer{border-top:1px solid var(--border);background:var(--bg2);padding:40px 0}

    /* Floating WA */
    .fab{position:fixed;right:18px;bottom:18px;z-index:1040}
    .fab a{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#08210e;font-weight:800;}

    /* small responsive tweaks */
    @media (max-width: 768px){ .hero{padding:40px 0} }

    /* animations */
    .fade-up{opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease}
    .fade-up.show{opacity:1; transform:none}
    .btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, .25);
    }

.btn-primary1 {
    background: #0d6efd !important;
    box-shadow: none !important;
    }

    .btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    }
	h3 {
      font-size: 16px;
      font-weight: bold;
    }


	.flex-caption {
  width: 96%;
  padding: 2%;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  font-size: 14px;
  line-height: 18px;
}
/* Slider */
.slider{
    width:100%;
    height:430px;
    position:relative;
    overflow:hidden;
}

/* Grid */
.grid{
    width:100%;
    height:100%;
    position:absolute;
    background-image:
       linear-gradient(var(--border) 1px, transparent 1px),
       linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:40px 40px;
}

/* CIRCLE (Black Line) */
.curve{
    position:absolute;
    left:-482px;
    top:-120px;
    width:650px;
    height:650px;
    border:3px solid var(--text);;
    border-radius:50%;
}

/* Number Strip OVER Circle */
.number-strip{
    position:absolute;
    top:24%;
    left:20px;
    transform:translateY(-50%);
    height:210px;
    width:200px;
    pointer-events:none;
}

/* Each number */
.number-line{
    height:43px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:34px;
    font-weight:800;
    color:var(--text);
    opacity:0.45;
    position:relative;
}

/* active */
.number-line.active{
    opacity:1;
}

/* Arrow */
.arrow{
    font-size:42px;
    position:absolute;
    left:-50px;
    transition:top 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity:0;
	color:var(--text);
}

/* Text */
.text{
    position:absolute;
    top:50%;
    left:42%;
    transform:translateY(-50%);
    color:var(--text);
}

.text h1{
    font-size:44px;
    font-weight:900;
	color:var(--text);
}