
:root{
  --amber:#b0742a;
  --amber-light:#d99a4e;
  --amber-dark:#784a14;
  --charcoal:#1c1c1c;
  --charcoal-light:#2b2b2b;
  --cream:#fdf8f0;
  --cream-dark:#f3e9d8;
  --grey:#6b6b6b;
  --white:#ffffff;
  --teal:#1e6e6e;
  --shadow: 0 10px 30px rgba(0,0,0,0.12);
  --radius: 14px;
  --transition: 0.35s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--charcoal);overflow-x:hidden;}
::selection{background:var(--amber);color:#fff;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--cream-dark);}
::-webkit-scrollbar-thumb{background:var(--amber);border-radius:10px;}
img{max-width:100%;display:block;}
a{color:inherit;}

#loader{position:fixed;inset:0;background:var(--charcoal);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .6s ease,visibility .6s ease;}
#loader.hide{opacity:0;visibility:hidden;}
.loader-book{width:70px;height:70px;border:4px solid var(--amber);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Top utility bar */
.topbar{ background:var(--charcoal); color:#ddd; font-size:.8rem; padding:6px 6%; display:flex; justify-content:space-between; align-items:center; }
.topbar a{ color:#ddd; text-decoration:none; margin-right:18px; }
.topbar a:hover{ color:var(--amber-light); }
.topbar .tb-right span{ margin-left:16px; }

/* Nav */
.navbar{position:sticky;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:14px 6%;background:rgba(253,248,240,0.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(176,116,42,0.15);transition:var(--transition);}
.navbar.scrolled{padding:10px 6%;box-shadow:var(--shadow);}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;}
.nav-logo img{height:42px;border-radius:6px;}
.nav-logo .brand-text{ display:flex; flex-direction:column; line-height:1; }
.nav-logo .brand-text span.name{font-family:'Georgia',serif;font-size:1.3rem;letter-spacing:1px;color:var(--charcoal);}
.nav-logo .brand-text span.sub{font-size:.62rem;letter-spacing:2px;color:var(--amber-dark);text-transform:uppercase;}
.nav-links{display:flex;gap:30px;list-style:none;align-items:center;}
.nav-links a{text-decoration:none;color:var(--charcoal);font-weight:600;font-size:.94rem;position:relative;padding:6px 0;transition:color .25s;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--amber);transition:width .3s;}
.nav-links a:hover{color:var(--amber-dark);}
.nav-links a:hover::after{width:100%;}
.nav-cta{background:var(--amber);color:#fff;padding:10px 24px;border-radius:30px;font-weight:700;text-decoration:none;transition:var(--transition);box-shadow:0 6px 18px rgba(176,116,42,0.35);white-space:nowrap;}
.nav-cta:hover{background:var(--amber-dark);transform:translateY(-2px);}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.burger span{width:26px;height:3px;background:var(--charcoal);border-radius:2px;}

/* Hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 6% 70px;background:radial-gradient(circle at 15% 20%,rgba(176,116,42,0.08),transparent 50%),radial-gradient(circle at 85% 80%,rgba(30,110,110,0.06),transparent 50%),var(--cream);overflow:hidden;}
#circuit-canvas{position:absolute;inset:0;z-index:0;opacity:.5;}
.hero-content{position:relative;z-index:2;max-width:920px;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--charcoal); color:var(--amber); padding:8px 20px; border-radius:30px; font-size:.8rem; font-weight:700; letter-spacing:1px; margin-bottom:26px;}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.15;font-weight:800;margin-bottom:20px;color:var(--charcoal);}
.hero h1 .accent{color:var(--amber);}
.hero p.sub{font-size:1.12rem;color:var(--grey);max-width:680px;margin:0 auto 34px;}
.hero-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.btn{padding:15px 32px;border-radius:34px;font-weight:700;text-decoration:none;transition:var(--transition);display:inline-block;font-size:1rem;border:none;cursor:pointer;}
.btn-primary{background:var(--amber);color:#fff;box-shadow:0 10px 26px rgba(176,116,42,0.4);}
.btn-primary:hover{background:var(--amber-dark);transform:translateY(-4px);}
.btn-outline{border:2px solid var(--charcoal);color:var(--charcoal);background:transparent;}
.btn-outline:hover{background:var(--charcoal);color:#fff;transform:translateY(-4px);}
.hero-stats{display:flex;gap:50px;justify-content:center;margin-top:56px;flex-wrap:wrap;}
.stat{text-align:center;}
.stat .num{font-size:2.3rem;font-weight:800;color:var(--amber-dark);font-family:'Georgia',serif;}
.stat .num .plus{color:var(--amber);}
.stat .lbl{color:var(--grey);font-size:.82rem;text-transform:uppercase;letter-spacing:1px;}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;}
.scroll-cue span{display:block;width:22px;height:36px;border:2px solid var(--amber);border-radius:14px;position:relative;}
.scroll-cue span::before{content:'';position:absolute;top:6px;left:50%;width:4px;height:8px;background:var(--amber);border-radius:2px;transform:translateX(-50%);animation:scrollDot 1.5s infinite;}
@keyframes scrollDot{0%{opacity:1;top:6px;}100%{opacity:0;top:20px;}}

section{padding:96px 6%;position:relative;}
.section-head{text-align:center;max-width:760px;margin:0 auto 56px;}
.section-tag{color:var(--amber);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.85rem;}
.section-head h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:12px 0 16px;color:var(--charcoal);font-family:'Georgia',serif;}
.section-head p{color:var(--grey);font-size:1.04rem;}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* Trust strip */
.trust-strip{ background:var(--white); padding:34px 6%; display:flex; justify-content:center; gap:50px; flex-wrap:wrap; border-bottom:1px solid var(--cream-dark); }
.trust-item{ display:flex; align-items:center; gap:10px; color:var(--grey); font-size:.9rem; font-weight:600; }
.trust-item .dot{ width:8px;height:8px;border-radius:50%;background:var(--amber); }

/* Categories */
.categories{ background:var(--white); }
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:1200px; margin:0 auto; }
.cat-card{ background:var(--cream); border-radius:var(--radius); padding:30px 22px; text-align:center; transition:var(--transition); cursor:pointer; border:1px solid transparent; }
.cat-card:hover{ background:#fff; box-shadow:var(--shadow); transform:translateY(-8px); border-color:var(--amber-light); }
.cat-card .cat-icon{ font-size:2.2rem; margin-bottom:14px; }
.cat-card h4{ font-size:1rem; margin-bottom:6px; color:var(--charcoal); }
.cat-card p{ font-size:.82rem; color:var(--grey); }

/* Courses */
.courses{ background:var(--cream); }
.filter-bar{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:50px; }
.filter-btn{ padding:10px 22px; border-radius:30px; border:1.5px solid var(--amber-light); background:#fff; color:var(--amber-dark); font-weight:600; font-size:.88rem; cursor:pointer; transition:var(--transition); }
.filter-btn.active, .filter-btn:hover{ background:var(--amber); color:#fff; border-color:var(--amber); }
.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1240px; margin:0 auto; }
.course-card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); display:flex; flex-direction:column; position:relative; }
.course-card:hover{ transform:translateY(-10px); box-shadow:0 20px 45px rgba(0,0,0,0.15); }
.course-banner{ height:130px; background:linear-gradient(135deg,var(--amber),var(--amber-dark)); position:relative; display:flex; align-items:center; justify-content:center; }
.course-banner .cb-icon{ font-size:2.6rem; }
.course-badge{ position:absolute; top:14px; left:14px; background:var(--charcoal); color:var(--amber-light); font-size:.7rem; font-weight:700; padding:5px 12px; border-radius:20px; letter-spacing:.5px; }
.course-badge.soon{ background:var(--teal); color:#fff; }
.course-body{ padding:24px 24px 26px; flex:1; display:flex; flex-direction:column; }
.course-body h4{ font-size:1.15rem; margin-bottom:8px; color:var(--charcoal); }
.course-body p.desc{ color:var(--grey); font-size:.88rem; line-height:1.6; margin-bottom:16px; flex:1; }
.course-meta{ display:flex; gap:16px; font-size:.78rem; color:var(--grey); margin-bottom:16px; flex-wrap:wrap; }
.course-meta span{ display:flex; align-items:center; gap:5px; }
.course-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.course-price{ font-size:1.3rem; font-weight:800; color:var(--amber-dark); }
.course-price .old{ font-size:.85rem; color:var(--grey); text-decoration:line-through; font-weight:400; margin-right:6px; }
.course-link{ font-size:.85rem; font-weight:700; color:var(--amber-dark); text-decoration:none; display:flex; align-items:center; gap:4px; }
.course-link:hover{ color:var(--amber); }
.course-card.disabled{ opacity:.75; }
.course-card.disabled .course-link{ color:var(--grey); cursor:not-allowed; }

/* Why us */
.why{ background:var(--white); }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; max-width:1200px; margin:0 auto; }
.why-card{ text-align:center; padding:30px 20px; border-radius:var(--radius); transition:var(--transition); }
.why-card:hover{ background:var(--cream); }
.why-card .icon{ width:60px;height:60px;margin:0 auto 16px; }
.why-card h4{ font-size:1.05rem; margin-bottom:8px; color:var(--charcoal); }
.why-card p{ color:var(--grey); font-size:.88rem; }

/* Process */
.process{ background:var(--cream-dark); }
.process-flow{ display:flex; justify-content:center; gap:0; max-width:1100px; margin:0 auto; flex-wrap:wrap; }
.p-step{ flex:1; min-width:150px; text-align:center; position:relative; padding:0 14px; }
.p-step .p-num{ width:52px;height:52px;border-radius:50%;background:var(--amber);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;margin:0 auto 14px; box-shadow:0 8px 18px rgba(176,116,42,0.35);}
.p-step h5{ font-size:.95rem; margin-bottom:6px; color:var(--charcoal); }
.p-step p{ font-size:.8rem; color:var(--grey); }
.p-step:not(:last-child)::after{ content:'›'; position:absolute; right:-6px; top:14px; font-size:1.6rem; color:var(--amber-light); }

/* Testimonials */
.testimonials{ background:var(--charcoal); color:#fff; }
.testimonials .section-head h2, .testimonials .section-tag{ color:#fff; }
.testimonials .section-tag{ color:var(--amber); }
.testimonials .section-head p{ color:#bbb; }
.t-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1200px; margin:0 auto; }
.t-card2{ background:var(--charcoal-light); border-radius:var(--radius); padding:28px 24px; transition:var(--transition); }
.t-card2:hover{ transform:translateY(-6px); }
.t-card2 .stars{ color:var(--amber-light); margin-bottom:12px; }
.t-card2 p.quote{ color:#ddd; font-size:.92rem; line-height:1.6; margin-bottom:18px; font-style:italic; }
.t-author{ display:flex; align-items:center; gap:12px; }
.t-avatar{ width:42px;height:42px;border-radius:50%;background:var(--amber);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700; }
.t-author div h6{ font-size:.88rem; color:#fff; margin-bottom:2px; }
.t-author div span{ font-size:.76rem; color:#999; }

/* CTA banner */
.cta-banner{ background:linear-gradient(135deg,var(--amber-dark),var(--amber)); color:#fff; text-align:center; padding:70px 6%; }
.cta-banner h2{ font-size:clamp(1.6rem,3.6vw,2.3rem); margin-bottom:14px; font-family:'Georgia',serif; }
.cta-banner p{ margin-bottom:30px; opacity:.92; max-width:600px; margin-left:auto; margin-right:auto; }
.cta-banner .btn-outline{ border-color:#fff; color:#fff; }
.cta-banner .btn-outline:hover{ background:#fff; color:var(--amber-dark); }
.cta-banner .btn-primary{ background:var(--charcoal); }
.cta-banner .btn-primary:hover{ background:#000; }

/* Contact */
.contact{ background:var(--white); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; max-width:1100px; margin:0 auto; }
.contact-info h3{ font-size:1.5rem; margin-bottom:18px; color:var(--charcoal); }
.contact-info p{ color:var(--grey); margin-bottom:24px; line-height:1.7; }
.info-item{ display:flex; gap:14px; margin-bottom:20px; align-items:flex-start; }
.info-item .ic{ width:40px;height:40px;background:var(--cream-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--amber-dark);font-weight:700;flex-shrink:0; }
.info-item div h5{ font-size:.94rem; color:var(--charcoal); margin-bottom:2px; }
.info-item div p{ margin:0; font-size:.86rem; color:var(--grey); }
.form-card{ background:var(--cream); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:.84rem; font-weight:600; margin-bottom:6px; color:var(--charcoal); }
.form-group input, .form-group select, .form-group textarea{ width:100%; padding:12px 14px; border-radius:8px; border:1px solid #ddd; font-size:.9rem; background:#fff; transition:border .25s; font-family:inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color:var(--amber); }
.form-submit{ width:100%; padding:14px; background:var(--amber); color:#fff; border:none; border-radius:30px; font-weight:700; font-size:1rem; cursor:pointer; transition:var(--transition); }
.form-submit:hover{ background:var(--amber-dark); }
.form-success{ display:none; text-align:center; color:var(--teal); font-weight:700; margin-top:14px; }

/* Footer */
footer{ background:var(--charcoal); color:#ccc; padding:60px 6% 26px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; max-width:1240px; margin:0 auto 40px; }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:38px; border-radius:6px; }
.footer-brand span{ font-family:'Georgia',serif; font-size:1.25rem; color:#fff; }
footer p{ font-size:.86rem; line-height:1.7; color:#999; }
footer h5{ color:#fff; margin-bottom:16px; font-size:.98rem; }
footer ul{ list-style:none; }
footer ul li{ margin-bottom:10px; }
footer ul li a{ color:#aaa; text-decoration:none; font-size:.86rem; transition:color .25s; }
footer ul li a:hover{ color:var(--amber); }
.footer-bottom{ text-align:center; border-top:1px solid #333; padding-top:22px; font-size:.8rem; color:#777; }

#backToTop{ position:fixed; bottom:26px; right:26px; width:46px; height:46px; border-radius:50%; background:var(--amber); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition:var(--transition); z-index:900; font-size:1.2rem; border:none; }
#backToTop.show{ opacity:1; visibility:visible; }
#backToTop:hover{ background:var(--amber-dark); transform:translateY(-4px); }

@media(max-width:1000px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .course-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .t-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .process-flow{ flex-direction:column; align-items:center; }
  .p-step::after{ display:none; }
}
@media(max-width:768px){
  .topbar{ display:none; }
  .nav-links{ position:fixed; top:64px; left:0; right:0; background:var(--cream); flex-direction:column; padding:20px; gap:16px; box-shadow:var(--shadow); transform:translateY(-120%); transition:transform .35s; z-index:999; }
  .nav-links.open{ transform:translateY(0); }
  .burger{ display:flex; }
  .nav-cta{ display:none; }
  .cat-grid, .course-grid, .why-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:24px; }
}
