:root{
  --red:#f31313;
  --red-dark:#c90000;
  --yellow:var(--red);
  --ink:#07131c;
  --navy:#071923;
  --navy-2:#0b2634;
  --white:#fff;
  --muted:#b8c3c8;
  --line:rgba(255,255,255,.13);
  --shadow:0 18px 45px rgba(0,0,0,.25);
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:Arial,Helvetica,sans-serif;background:#07141d;color:#fff;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:auto}
.nav>*,.booking-grid>*,.cards>*,.area-grid>*,.reviews>*,.two-col>*,.contact-grid>*,.footer-grid>*,.form-grid>*{min-width:0}
.topbar{
  height:66px;background:#fff;color:#111;display:flex;align-items:center;
  position:sticky;top:0;z-index:50;box-shadow:0 2px 15px rgba(0,0,0,.18)
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo{font-weight:900;font-size:27px;letter-spacing:-1px;display:flex;align-items:center;gap:8px;color:var(--red)}
.logo-mark{font-size:31px;color:#111;line-height:1}
.logo small{display:block;color:#111;font-size:9px;letter-spacing:1.3px;line-height:1}
.navlinks{display:flex;gap:25px;align-items:center;font-size:13px;font-weight:700}
.navlinks a:hover,.navlinks a.active{color:var(--red)}
.nav-actions{display:flex;gap:9px}
.nav-mobile-actions{display:none}
.btn{
  border:0;border-radius:6px;padding:12px 18px;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px
}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark)}
.btn-dark{background:#111f26;color:#fff;border:1px solid #52616a}
.btn-yellow{background:var(--yellow);color:#fff}
.hero{
  min-height:530px;position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(2,9,13,.92) 0%,rgba(2,9,13,.72) 42%,rgba(2,9,13,.15) 75%),
    url("https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?auto=format&fit=crop&w=1800&q=85") center/cover;
}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.35));pointer-events:none}
.hero-inner{position:relative;z-index:2;padding:68px 0 120px}
.kicker{font-size:13px;letter-spacing:2.2px;font-weight:900;color:#ddd;text-transform:uppercase}
.hero h1{font-size:54px;line-height:.98;max-width:590px;margin:10px 0 16px;letter-spacing:-2px}
.hero h1 span{color:var(--red)}
.hero p{max-width:580px;font-size:17px;color:#eee}
.trust{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px}
.trust-item{display:flex;gap:10px;align-items:center;font-weight:700;font-size:12px}
.trust-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--red)}
.booking{
  position:relative;z-index:5;margin-top:-78px;background:var(--red);border-radius:8px;
  box-shadow:var(--shadow);padding:17px
}
.booking-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr auto;gap:10px;align-items:end}
.booking h2{margin:0 0 3px;font-size:24px}.booking p{margin:0;color:#ffe0e0;font-size:12px}
.field{background:#fff;color:#222;border-radius:6px;padding:9px 12px}
.field label{font-size:10px;color:#666;display:block;font-weight:700;margin-bottom:3px}
.field select,.field input{border:0;outline:0;width:100%;font-weight:700;background:#fff}
.section{padding:70px 0}
.section.dark{background:#06131b}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}
.eyebrow{font-size:11px;letter-spacing:3px;font-weight:900;color:#d5dfe2;text-transform:uppercase}
.section h2{font-size:34px;margin:5px 0;letter-spacing:-1px}.yellow{color:var(--yellow)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.card{
  background:linear-gradient(160deg,#122d3a,#071720);border:1px solid #31505e;border-radius:8px;
  overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.18)
}
.card-img{height:150px;background-size:cover;background-position:center}
.card-body{padding:15px}
.card h3{margin:0 0 7px;font-size:16px}.card p{margin:0;color:#b9c5ca;font-size:12px}
.arrow{float:right;width:32px;height:32px;border-radius:50%;background:var(--yellow);color:#fff;display:grid;place-items:center;font-weight:900;margin-top:8px}
.bg1{background-image: url("images/student-pass-1.jpg");background-position: top !important;}
.bg2{background-image: url("images/student-pass-2.jpg");background-position: top !important;}
.bg3{background-image: url("images/student-pass-3.jpg");background-position: top !important;}
.bg4{background-image: url("images/student-pass-4.jpg");background-position: top !important;}
.bg5{background-image: url("images/student-pass-5.jpg");background-position: top !important;}
.areas{background:linear-gradient(100deg,#06131b 0%,#06131b 42%,#0a2733 42%,#0a2733 100%)}
.area-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:30px;align-items:center}
.area-copy p{color:#c4ced2;max-width:560px}
.mapbox{
  min-height:290px;border:1px solid #375361;border-radius:10px;position:relative;overflow:hidden;
  background:
   radial-gradient(circle at 35% 55%,rgba(243,19,19,.15) 0 3px,transparent 4px),
   linear-gradient(135deg,#0b2531,#081923);
}
.mapbox:before{content:"";position:absolute;inset:15% 8%;border:2px dashed #244452;transform:rotate(-10deg);border-radius:50%}
.pin{position:absolute;color:#fff;background:var(--yellow);width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 4px rgba(243,19,19,.12)}
.pin:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#111;top:8px;left:8px}
.pin b{position:absolute;transform:rotate(45deg);left:25px;top:-4px;color:#fff;white-space:nowrap;font-size:11px;background:#12252f;border:1px solid rgba(243,19,19,.6);padding:3px 7px;border-radius:4px}
.p1{left:28%;top:35%}.p2{left:58%;top:24%}.p3{left:68%;top:62%}.p4{left:43%;top:72%}
.reviews{display:grid;grid-template-columns:1.35fr .8fr;gap:25px}
.students{display:flex;gap:10px;overflow:hidden}
.student{min-width:145px;height:145px;border-radius:7px;background-size:cover;background-position:center;position:relative}
.student span{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.7);padding:3px 6px;font-size:10px}
.reviewbox{border:1px solid #31505e;border-radius:8px;padding:20px;background:#0a202b}
.stars{color:var(--yellow);letter-spacing:3px}.reviewbox p{color:#d1d9dc;font-size:13px}
.page-hero{padding:75px 0;background:linear-gradient(100deg,#06131b,#102c38);border-bottom:1px solid #18333e}
.page-hero h1{font-size:48px;margin:5px 0}.page-hero p{color:#bdc8cc;max-width:680px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.info-panel{background:#0b202b;border:1px solid #2a4755;border-radius:10px;padding:26px}
.info-panel h2{margin-top:0}.checklist{padding:0;list-style:none}.checklist li{margin:12px 0;color:#c6d0d4}.checklist li:before{content:"✓";color:#fff;background:var(--yellow);border-radius:50%;padding:1px 5px;margin-right:8px;font-weight:900}
.course-hero{
  min-height:350px;background:linear-gradient(90deg,rgba(3,10,14,.9),rgba(3,10,14,.4)),
  url("https://images.unsplash.com/photo-1542367597-8849ebbb9d4b?auto=format&fit=crop&w=1800&q=85") center/cover;
}
.price{font-size:30px;font-weight:900;color:var(--yellow)}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-group{display:flex;flex-direction:column;gap:5px}.form-group.full{grid-column:1/-1}
.form-group label{font-size:12px;font-weight:800;color:#d7dfe2}
.form-group input,.form-group textarea,.form-group select{width:100%;min-width:0;padding:12px;border-radius:6px;border:1px solid #3b5662;background:#071923;color:#fff;outline:none}
.form-group textarea{min-height:145px;resize:vertical}
.info-panel p,.footer a{overflow-wrap:anywhere}
.alert{padding:12px;border-radius:6px;background:#173b26;border:1px solid #3d8d58;margin-bottom:16px}
.footer{background:#030b10;padding:45px 0 20px;border-top:1px solid #18303a}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}.footer h3{margin-top:0}.footer p,.footer a{color:#9eabb0;font-size:13px}.footer a{display:block;margin:7px 0}.footer-bottom{border-top:1px solid #1b3038;margin-top:30px;padding-top:18px;color:#718087;font-size:11px;display:flex;justify-content:space-between}
.footer a:hover{color:var(--red)}
.footer-contact .footer-phone-group{margin:9px 0 11px}
.footer-phone-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;color:#7d8f96;margin-bottom:4px}
.footer-phone-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.footer-call-link{display:inline-flex!important;align-items:center;gap:6px;padding:6px 10px;background:#0d222c;border:1px solid #1f3b47;border-radius:6px;color:#fff!important;font-size:12px!important;font-weight:700;margin:0!important;transition:all .2s ease;text-decoration:none}
.footer-call-link:hover{background:#143646;border-color:var(--red);color:#fff!important}
.footer-call-link svg{color:var(--red);flex-shrink:0}
.footer-wa-link{display:inline-flex!important;align-items:center;gap:5px;padding:6px 10px;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.35);border-radius:6px;color:#25d366!important;font-size:11.5px!important;font-weight:700;margin:0!important;transition:all .2s ease;text-decoration:none}
.footer-wa-link:hover{background:#25d366;border-color:#25d366;color:#fff!important}
.footer-wa-link svg{flex-shrink:0}
.footer-email-link{display:inline-flex!important;align-items:center;gap:6px;margin-top:10px!important;color:#9eabb0!important;font-size:12px!important;transition:color .2s ease}
.footer-email-link:hover{color:#fff!important;text-decoration:underline}
.footer-email-link svg{color:#7d8f96;flex-shrink:0}
.mobile-menu{display:none}
.mobile-menu:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/*10k+ student */
.stats-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #080808;
  padding: 35px 80px;
  box-sizing: border-box;
}

.stat-item {
  flex: 1;
  text-align: left;
}

.stat-number {
  color: var(--yellow);
  font-size: 42px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  margin-bottom: 18px;
}

.stat-label {
  color: #999;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.5;
}

.stat-divider {
  width: 1px;
  height: 95px;
  background: #333;
  margin: 0 40px;
}



/* =========================
   COMMON
========================= */

.why-ali,
.areas-section {
  background: #050b12;
  color: #fff;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

.section-small-title {
  display: block;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: 10px;
}

.yellow-btn {
  display: inline-block;
  background: var(--yellow);
  color: #fff;
  text-decoration: none;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 3px;
}

.yellow-btn b {
  margin-left: 8px;
  font-size: 17px;
}


/* =========================
   WHY CHOOSE ALI
========================= */

.why-ali {
  display: grid;
  grid-template-columns: 30% 42% 28%;
  min-height: 320px;
  overflow: hidden;
}


/* IMAGE */

.ali-image {
  height: 320px;
  overflow: hidden;
}

.ali-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* CENTER CONTENT */

.ali-content {
  padding: 35px 30px;
}

.ali-content h2 {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
}

.ali-content h2 span {
  color: var(--yellow);
}

.ali-content p {
  max-width: 470px;
  color: #d0d0d0;
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 18px;
}


/* STATS */

.ali-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 1px solid #26313a;
  margin: 30px 20px 30px 0;
}

.stat-box {
  text-align: center;
  padding: 15px 10px;
  border-bottom: 1px solid #26313a;
  border-right: 1px solid #26313a;
}

.stat-box:nth-child(3),
.stat-box:nth-child(4) {
  border-bottom: none;
}

.stat-icon {
  color: var(--yellow);
  font-size: 25px;
  margin-bottom: 5px;
}

.stat-box strong {
  display: block;
  color: var(--yellow);
  font-size: 21px;
  font-weight: 800;
}

.stat-box p {
  color: #ddd;
  font-size: 11px;
  line-height: 1.35;
  margin: 5px 0 0;
}


/* =========================
   AREAS SECTION
========================= */

.areas-section {
  display: grid;
  grid-template-columns: 34% 46% 20%;
  min-height: 210px;
  background: #071019;
}


/* LEFT CONTENT */

.areas-content {
  padding: 25px 40px 25px 55px;
}

.areas-content h2 {
  margin: 0 0 10px;
  font-size: 27px;
  line-height: 1.1;
  font-weight: 800;
}

.areas-content h2 span {
  color: var(--yellow);
}

.areas-content p {
  color: #ddd;
  font-size: 12px;
  line-height: 1.5;
  max-width: 380px;
  margin: 0 0 15px;
}


/* MAP IMAGE */

.map-image {
  height: 210px;
  overflow: hidden;
}

.map-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* AREAS LIST */

.areas-list {
  border: 1px solid #29353d;
  border-radius: 6px;
  margin: 15px 25px 15px 10px;
  padding: 15px 20px;
}

.areas-list h3 {
  color: var(--yellow);
  font-size: 11px;
  letter-spacing: 2px;
  margin: 0 0 8px;
}

.areas-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.areas-list li {
  color: #ddd;
  font-size: 11px;
  line-height: 1.6;
}

.areas-list li::before {
  content: "●";
  color: var(--yellow);
  margin-right: 8px;
}

.areas-list small {
  color: #aaa;
  font-size: 9px;
}

@media(max-width:900px){
  .nav{position:relative}
  .navlinks{display:none}
  .navlinks.is-open{
    position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:8px;background:#fff;color:#111;border:1px solid #e5e5e5;border-radius:8px;
    box-shadow:0 10px 24px rgba(0,0,0,.2)
  }
  .navlinks a{padding:12px 14px}
  .mobile-menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:6px;background:transparent;color:#111;font-size:24px;line-height:1;cursor:pointer}
  .nav-actions{display:none !important}
  .nav-mobile-actions{display:flex;flex-direction:column;gap:8px;padding:12px 6px 6px;margin-top:6px;border-top:1px solid #eee}
  .navlinks.is-open .nav-mobile-actions a.btn,
  .nav-mobile-actions .btn{display:flex !important;align-items:center;justify-content:center;width:100%;text-align:center;padding:11px 16px !important;border-radius:8px;font-size:13px;font-weight:800;text-decoration:none;box-sizing:border-box}
  .hero h1{font-size:43px}.booking-grid{grid-template-columns:1fr 1fr}.booking-title{grid-column:1/-1}
  .cards{grid-template-columns:1fr 1fr}.area-grid,.two-col,.reviews,.contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid>div:first-child{grid-column:1/-1}
  .stats-section{padding:30px 5%;gap:12px}
  .stat-divider{margin:0 10px}
  .stat-label{font-size:15px}
  .why-ali{grid-template-columns:1fr}
  .ali-image{height:260px}
  .ali-content{padding:30px 5%}
  .ali-stats{margin:0 5% 25px;border-left:0}
  .areas-section{grid-template-columns:1fr}
  .areas-content{padding:30px 5%}
  .areas-list{margin:15px 5%}
}
@media(max-width:680px){
  h1,h2,h3{text-align:center}
  .hero-inner,.page-hero .container,.booking-title,.section-head,.ali-content,.areas-content,.info-panel{text-align:center}
  .section-head{align-items:center;flex-direction:column}
  .section-head .btn,.info-panel .btn,.hero .btn,.page-hero .btn,.ali-content .yellow-btn,.areas-content .yellow-btn{display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
  .students{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .students::-webkit-scrollbar{display:none}
  .student{flex:0 0 min(78%,260px);min-width:0;scroll-snap-align:start}
  .footer-grid>div:last-child{grid-column:1/-1;text-align:center}
  .footer-grid>div:last-child a{margin-left:auto;margin-right:auto}
  .footer-contact .footer-phone-actions{justify-content:center}
  .footer-email-link{justify-content:center;margin-left:auto;margin-right:auto}
}
@media(max-width:560px){
  .hero-inner{padding:45px 0 110px}.hero h1{font-size:37px}.booking-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}
  .footer-grid>div:last-child{text-align:center}
  .footer-grid>div:last-child a{margin-left:auto;margin-right:auto}
  .footer-bottom{display:block}
  .form-grid{grid-template-columns:1fr}.form-group.full{grid-column:auto}.page-hero h1{font-size:38px}
  .stats-section{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:26px 4%;gap:8px}
  .stat-divider{display:none}
  .stat-item{text-align:center}
  .stat-number{font-size:clamp(24px,8vw,36px);margin-bottom:8px}
  .stat-label{font-size:clamp(9px,3vw,13px);letter-spacing:1px}
  .nav{gap:6px}
  .logo{font-size:20px;gap:3px}
  .logo-mark{font-size:23px}
  .mobile-menu{flex:none}
}
@media(max-width:380px){
}


/* Automatic Lesson Booking Flow - screenshot-inspired coded section (no screenshot image used) */
.booking-flow{background:#03131b;padding:32px 0;border-top:1px solid #122c38;border-bottom:1px solid #122c38}
.flow-hero{background:linear-gradient(100deg,#061a22,#07303b);border-radius:12px 12px 0 0;padding:28px 32px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.flow-brand{display:flex;align-items:center;gap:16px}.flow-brand .mini-logo{font-size:28px;font-weight:900;color:var(--yellow)}.flow-brand h2{margin:0;font-size:30px;color:#fff}.flow-brand p{margin:5px 0 0;color:#c0cdd1;font-size:15px}.flow-sub{color:var(--yellow);font-weight:800}.flow-tagline{color:#fff;font-size:12px;font-weight:900;letter-spacing:3px;white-space:nowrap}
.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;background:#061820;padding:16px}
.flow-step{position:relative;background:#052630;border:1px solid #294f5d;border-radius:8px;padding:13px;min-height:325px}.flow-step:not(:last-child):after{content:"→";position:absolute;right:-19px;top:106px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#fff;font-weight:900;z-index:5}.step-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:#fff;font-weight:900;margin-bottom:9px}.flow-step h3{font-size:14px;margin:0 0 10px;color:#fff}.flow-card{background:#fff;color:#172027;border-radius:6px;padding:10px;min-height:175px}.flow-card img{height:84px;width:100%;object-fit:cover;border-radius:5px;margin-bottom:7px}.flow-card p{font-size:10px;margin:6px 0;color:#59666b}.flow-card strong{font-size:11px}.flow-row,.time-row{display:flex;justify-content:space-between;align-items:center;margin:7px 0;font-size:10px}.flow-pill{background:var(--yellow);border-radius:4px;padding:5px 7px;font-weight:900;color:#fff}.calendar-card{font-size:10px}.calendar-head,.calendar-row{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;text-align:center;margin-top:8px}.calendar-head{color:#536169;font-size:8px}.calendar-row span{padding:4px 0}.date-selected{background:var(--yellow);color:#fff;border-radius:4px;font-weight:900}.flow-list{list-style:none;padding:0;margin:0}.flow-list li{font-size:10px;padding:7px 0;border-bottom:1px solid #e3e7e8;color:#526067}.flow-list li:last-child{border:0}.payment-badge{display:flex;align-items:center;justify-content:space-between;background:#f5f7f8;padding:8px;border-radius:5px;margin:5px 0;font-weight:800;font-size:11px}.secure-text{font-size:9px!important;color:#65757b!important}.confirm{display:grid;place-items:center;text-align:center}.check{width:48px;height:48px;border-radius:50%;background:#d8ffe9;color:#12a957;display:grid;place-items:center;font-size:28px;margin-bottom:8px}.confirm p{max-width:160px;line-height:1.45}.status-confirmed{width:100%;background:var(--yellow);border-radius:5px;padding:9px 5px;font-weight:900;color:#fff;font-size:13px;margin-top:3px}
@media(max-width:1000px){.flow-steps{width:100%;min-width:0;grid-template-columns:repeat(5,minmax(190px,1fr));overflow-x:auto;overscroll-behavior-x:contain}.flow-step:not(:last-child):after{display:none}}
@media(max-width:900px){.flow-hero{display:block}.flow-tagline{margin-top:14px}.flow-brand h2{font-size:25px}}
@media(max-width:560px){.flow-steps{grid-template-columns:1fr}.flow-step{min-height:auto}.flow-hero h2{font-size:23px}}