/* ==========================================================
   V33 DESKTOP-FIRST PERFECT UI SYSTEM
   Prestige Coding and Technology Limited
   Purpose: Desktop is the default. Laptop/mini-laptop stay desktop.
   Mobile layout starts ONLY at max-width: 767px.
   ========================================================== */

:root{
  --p33-navy:#07142f;
  --p33-blue:#0b3b8f;
  --p33-blue2:#1455d9;
  --p33-gold:#d9a441;
  --p33-gold2:#f5c65b;
  --p33-text:#111827;
  --p33-muted:#5d6b82;
  --p33-bg:#f7f9fc;
  --p33-card:#ffffff;
  --p33-line:#e5eaf2;
  --p33-radius:24px;
  --p33-radius-lg:34px;
  --p33-shadow:0 18px 50px rgba(7,20,47,.09);
  --p33-shadow-lg:0 30px 90px rgba(7,20,47,.15);
  --p33-container:1180px;
}

*{box-sizing:border-box!important;}
html{font-size:16px!important;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden!important;}
body{margin:0!important;overflow-x:hidden!important;background:var(--p33-bg)!important;color:var(--p33-text)!important;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:16px!important;line-height:1.65!important;}
img,svg,video,canvas{max-width:100%!important;height:auto;}
a{color:inherit;text-decoration:none;}

/* ================= Desktop default layout ================= */
.container{width:min(calc(100% - 56px),var(--p33-container))!important;max-width:var(--p33-container)!important;margin-inline:auto!important;padding-inline:0!important;}
.section{padding:86px 0!important;position:relative;overflow:hidden;}
.section:first-child{padding-top:74px!important;}
.head{max-width:760px!important;margin:0 auto 42px!important;text-align:center!important;}
.head p{max-width:680px!important;margin-inline:auto!important;}

h1,h2,h3,h4,h5,h6{font-family:"Space Grotesk",Inter,sans-serif!important;color:var(--p33-navy)!important;letter-spacing:-.035em!important;margin:0 0 16px!important;line-height:1.05!important;}
h1{font-size:clamp(3rem,4.65vw,5.25rem)!important;max-width:860px!important;}
h2,.section h2,.head h2{font-size:clamp(2.1rem,3.15vw,3.65rem)!important;max-width:820px!important;}
h3{font-size:clamp(1.25rem,1.65vw,1.65rem)!important;}
p{color:var(--p33-muted)!important;margin:0 0 18px!important;font-size:1rem!important;line-height:1.78!important;}
.tag,.px-kicker{display:inline-flex!important;align-items:center!important;gap:8px!important;width:max-content!important;max-width:100%!important;padding:8px 13px!important;border:1px solid rgba(217,164,65,.28)!important;border-radius:999px!important;background:linear-gradient(135deg,#fff9ea,#fff)!important;color:#81590f!important;font-size:.78rem!important;font-weight:900!important;letter-spacing:.05em!important;text-transform:uppercase!important;margin-bottom:16px!important;}

/* ================= Header / Desktop Navigation ================= */
.topbar{display:block!important;background:linear-gradient(90deg,var(--p33-navy),#0b2b6a)!important;color:#eaf1ff!important;font-size:.82rem!important;}
.topbar .container{min-height:38px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;}
.topbar p,.topbar a{margin:0!important;color:#eaf1ff!important;font-size:.82rem!important;line-height:1.35!important;}
.header,.prestige-pro-header{position:sticky!important;top:0!important;z-index:3000!important;background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;border-bottom:1px solid rgba(226,232,240,.9)!important;box-shadow:0 12px 34px rgba(7,20,47,.06)!important;}
.nav{height:78px!important;min-height:78px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;position:relative!important;overflow:visible!important;}
.brand{display:inline-flex!important;align-items:center!important;gap:10px!important;min-width:0!important;flex:0 0 auto!important;}
.brand img{width:48px!important;height:48px!important;object-fit:contain!important;border-radius:15px!important;box-shadow:0 8px 22px rgba(7,20,47,.12)!important;}
.brand span{display:flex!important;flex-direction:column!important;line-height:1.05!important;min-width:0!important;max-width:190px!important;}
.brand strong{font-size:.96rem!important;color:var(--p33-navy)!important;font-weight:950!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.brand small{font-size:.68rem!important;color:var(--p33-muted)!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.mobile-toggle,.mobile-menu-head,.mobile-close{display:none!important;}
.menu.prestige-menu,#menu{position:static!important;inset:auto!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-direction:row!important;gap:4px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;flex:1 1 auto!important;}
.menu.prestige-menu>a:not(.btn),.nav-dropbtn{position:relative!important;height:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:0 12px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:#17243a!important;font-family:Inter,system-ui,sans-serif!important;font-size:.88rem!important;font-weight:850!important;line-height:1!important;white-space:nowrap!important;cursor:pointer!important;transition:color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease!important;}
.menu.prestige-menu>a:not(.btn)::before,.nav-dropbtn::before{content:"";position:absolute;inset:5px;border-radius:999px;background:linear-gradient(135deg,rgba(11,59,143,.08),rgba(217,164,65,.18));opacity:0;transform:scale(.82);transition:opacity .25s ease,transform .25s ease;z-index:-1;}
.menu.prestige-menu>a:not(.btn)::after,.nav-dropbtn::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--p33-gold),var(--p33-blue2));transform:translateX(-50%);transition:width .28s ease;}
.menu.prestige-menu>a:not(.btn):hover,.menu.prestige-menu>a:not(.btn):focus-visible,.nav-dropbtn:hover,.nav-dropbtn:focus-visible{color:var(--p33-blue)!important;transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(7,20,47,.07)!important;outline:0!important;}
.menu.prestige-menu>a:not(.btn):hover::before,.menu.prestige-menu>a:not(.btn):focus-visible::before,.nav-dropbtn:hover::before,.nav-dropbtn:focus-visible::before{opacity:1;transform:scale(1);}
.menu.prestige-menu>a:not(.btn):hover::after,.menu.prestige-menu>a:not(.btn):focus-visible::after,.nav-dropbtn:hover::after,.nav-dropbtn:focus-visible::after{width:46%;}
.nav-dropdown{position:relative!important;display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;overflow:visible!important;}
.nav-dropbtn i{font-size:.72rem!important;transition:transform .22s ease!important;}
.nav-dropdown:hover .nav-dropbtn i,.nav-dropdown:focus-within .nav-dropbtn i{transform:rotate(180deg)!important;}
.nav-dropdown-menu{position:absolute!important;top:calc(100% + 14px)!important;left:0!important;right:auto!important;width:310px!important;min-width:310px!important;display:grid!important;grid-template-columns:1fr!important;gap:4px!important;padding:12px!important;border:1px solid rgba(226,232,240,.95)!important;border-radius:22px!important;background:rgba(255,255,255,.98)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;box-shadow:0 28px 70px rgba(7,20,47,.16)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(12px) scale(.98)!important;transform-origin:top left!important;transition:opacity .22s ease,visibility .22s ease,transform .22s ease!important;z-index:5000!important;}
.nav-dropdown:last-of-type .nav-dropdown-menu{left:auto!important;right:0!important;transform-origin:top right!important;}
.nav-dropdown:hover>.nav-dropdown-menu,.nav-dropdown:focus-within>.nav-dropdown-menu,.nav-dropdown.open>.nav-dropdown-menu{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0) scale(1)!important;}
.nav-dropdown-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav-dropdown-menu a{display:flex!important;align-items:center!important;min-height:40px!important;padding:10px 12px!important;border-radius:14px!important;color:#16233a!important;background:transparent!important;font-size:.88rem!important;font-weight:820!important;text-decoration:none!important;transition:background .2s ease,color .2s ease,transform .2s ease!important;}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{background:linear-gradient(135deg,#f7faff,#fff7e8)!important;color:var(--p33-blue)!important;transform:translateX(5px)!important;outline:0!important;}
.nav-cta,.menu .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:42px!important;min-height:42px!important;padding:0 16px!important;border-radius:999px!important;font-size:.86rem!important;font-weight:950!important;white-space:nowrap!important;line-height:1!important;}
.nav-cta{flex:0 0 auto!important;box-shadow:0 12px 28px rgba(11,59,143,.16)!important;}

/* ================= Hero / page openings ================= */
.hero-slide,.hero,.prestige-hero-shell,.px-hero{min-height:auto!important;overflow:hidden!important;}
.hero-slide{background:radial-gradient(circle at 16% 10%,rgba(245,198,91,.18),transparent 30%),linear-gradient(135deg,#07142f,#092866 60%,#0b3b8f)!important;color:#fff!important;}
.hero-grid,.px-hero-grid,.ai-section-grid{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(300px,.78fr)!important;align-items:center!important;gap:clamp(34px,4.5vw,62px)!important;padding:clamp(70px,7.4vw,112px) 0!important;min-height:auto!important;}
.hero-grid>*,.px-hero-grid>*,.ai-section-grid>*{min-width:0!important;}
.hero-slide h1,.px-hero h1{color:#fff!important;}
.hero-slide p,.px-hero p{color:#dce8ff!important;max-width:700px!important;font-size:clamp(1rem,1.25vw,1.18rem)!important;line-height:1.75!important;}
.px-hero-actions,.hero-actions,.actions{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important;margin-top:24px!important;}
.px-trust-row,.ai-benefit-row{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important;margin-top:22px!important;}
.hero-card,.px-dashboard,.ai-orbit-card,.card,.course-card,.service-card,.blog-card,.project-card,.mode-card,.value-card,article.card{max-width:100%!important;border:1px solid rgba(226,232,240,.96)!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;border-radius:var(--p33-radius)!important;box-shadow:var(--p33-shadow)!important;padding:clamp(22px,2.2vw,32px)!important;overflow:hidden!important;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important;}
.hero-card,.px-dashboard,.ai-orbit-card{border-radius:var(--p33-radius-lg)!important;box-shadow:var(--p33-shadow-lg)!important;}
.card:hover,.course-card:hover,.service-card:hover,.blog-card:hover,.project-card:hover,.mode-card:hover,.value-card:hover{transform:translateY(-7px)!important;box-shadow:0 26px 70px rgba(7,20,47,.13)!important;border-color:rgba(217,164,65,.4)!important;}

/* ================= Grids and content flow ================= */
.grid-2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(24px,3vw,42px)!important;align-items:stretch!important;}
.grid-3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(20px,2.4vw,32px)!important;align-items:stretch!important;}
.grid-4{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(18px,2vw,28px)!important;align-items:stretch!important;}
.grid-5{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(16px,1.8vw,24px)!important;align-items:stretch!important;}
.form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;}
.card h3,.course-card h3,.service-card h3{margin-top:0!important;margin-bottom:10px!important;}
.card p:last-child,.course-card p:last-child,.service-card p:last-child{margin-bottom:0!important;}
.feature-band{background:linear-gradient(180deg,#f4f7fb,#fff)!important;}
.btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:46px!important;padding:13px 21px!important;border-radius:999px!important;font-size:.94rem!important;font-weight:900!important;line-height:1!important;border:0!important;text-decoration:none!important;transition:transform .23s ease,box-shadow .23s ease,background .23s ease,border-color .23s ease!important;}
.btn:hover,.btn:focus-visible{transform:translateY(-3px)!important;box-shadow:0 20px 46px rgba(7,20,47,.18)!important;outline:0!important;}
.btn-primary{background:linear-gradient(135deg,var(--p33-navy),var(--p33-blue) 64%,var(--p33-blue2))!important;color:#fff!important;}
.btn-outline{background:#fff!important;color:var(--p33-navy)!important;border:1px solid #cbd5e1!important;}
.btn-light{background:#fff!important;color:var(--p33-navy)!important;}
input,select,textarea{width:100%!important;min-height:48px!important;border:1px solid #d8e0eb!important;border-radius:16px!important;background:#fff!important;padding:12px 14px!important;font:inherit!important;color:var(--p33-text)!important;outline:0!important;transition:border-color .2s ease,box-shadow .2s ease!important;}
textarea{min-height:130px!important;resize:vertical!important;}
input:focus,select:focus,textarea:focus{border-color:var(--p33-blue2)!important;box-shadow:0 0 0 4px rgba(20,85,217,.12)!important;}

/* ================= Footer ================= */
.footer{padding:70px 0 26px!important;background:radial-gradient(circle at 12% 10%,rgba(217,164,65,.18),transparent 28%),linear-gradient(135deg,#06142e,#081f4d)!important;color:#eaf1ff!important;}
.footer .brand strong,.footer h4{color:#fff!important;}
.footer p,.footer a,.copy{color:#dbe7ff!important;}
.footer-grid{display:grid!important;grid-template-columns:1.25fr .82fr .9fr 1.05fr!important;gap:32px!important;align-items:start!important;}
.footer-grid a{display:block!important;margin:8px 0!important;}
.copy{border-top:1px solid rgba(255,255,255,.12)!important;margin-top:34px!important;padding-top:20px!important;font-size:.88rem!important;text-align:center!important;}
.whatsapp-dock,.whatsapp-bar{z-index:2600!important;}

/* ================= Small/mini laptop: still desktop, never hamburger ================= */
@media (max-width:1199px){
  :root{--p33-container:1060px;}
  html{font-size:15px!important;}
  .container{width:min(calc(100% - 34px),var(--p33-container))!important;}
  .section{padding:72px 0!important;}
  .nav{height:68px!important;min-height:68px!important;gap:8px!important;}
  .brand img{width:40px!important;height:40px!important;border-radius:12px!important;}
  .brand span{max-width:144px!important;}
  .brand strong{font-size:.8rem!important;}
  .brand small{font-size:.58rem!important;}
  .menu.prestige-menu,#menu{gap:1px!important;}
  .menu.prestige-menu>a:not(.btn),.nav-dropbtn{height:36px!important;padding:0 7px!important;font-size:.74rem!important;gap:4px!important;}
  .nav-cta,.menu .btn{height:36px!important;min-height:36px!important;padding:0 9px!important;font-size:.72rem!important;}
  .nav-dropdown-menu{width:282px!important;min-width:282px!important;}
  .hero-grid,.px-hero-grid,.ai-section-grid{grid-template-columns:minmax(0,1.05fr) minmax(260px,.72fr)!important;gap:28px!important;padding:64px 0!important;}
  h1{font-size:clamp(2.65rem,4.8vw,4.2rem)!important;}
  h2,.section h2,.head h2{font-size:clamp(1.95rem,3.3vw,3.15rem)!important;}
  .grid-4,.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .footer-grid{grid-template-columns:1fr 1fr!important;}
}

@media (max-width:920px) and (min-width:768px){
  :root{--p33-container:860px;}
  html{font-size:14.4px!important;}
  .container{width:min(calc(100% - 24px),var(--p33-container))!important;}
  .topbar p:first-child{max-width:470px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .nav{gap:5px!important;}
  .brand span{max-width:86px!important;}
  .brand small{display:none!important;}
  .menu.prestige-menu>a:not(.btn),.nav-dropbtn{font-size:.67rem!important;padding:0 5px!important;}
  .menu .btn{font-size:.66rem!important;padding:0 7px!important;}
  .nav-cta{display:none!important;}
  .hero-grid,.px-hero-grid,.ai-section-grid{grid-template-columns:minmax(0,1fr) minmax(240px,.58fr)!important;gap:20px!important;}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* ================= TRUE MOBILE ONLY ================= */
@media (max-width:767px){
  html{font-size:15px!important;}
  body{font-size:15px!important;}
  .container{width:min(calc(100% - 28px),560px)!important;max-width:560px!important;}
  .topbar{display:none!important;}
  .header,.prestige-pro-header{position:sticky!important;top:0!important;}
  .nav{height:72px!important;min-height:72px!important;gap:10px!important;}
  .brand img{width:44px!important;height:44px!important;}
  .brand span{max-width:190px!important;}
  .brand strong{font-size:.88rem!important;}
  .brand small{font-size:.62rem!important;display:block!important;}
  .nav-cta{display:none!important;}
  .mobile-toggle{display:grid!important;place-items:center!important;margin-left:auto!important;width:44px!important;height:44px!important;border:1px solid var(--p33-line)!important;border-radius:15px!important;background:#fff!important;color:var(--p33-navy)!important;box-shadow:0 10px 24px rgba(7,20,47,.1)!important;}
  .mobile-menu-head{display:flex!important;align-items:center!important;justify-content:space-between!important;position:absolute!important;top:16px!important;left:18px!important;right:18px!important;padding-bottom:14px!important;border-bottom:1px solid var(--p33-line)!important;}
  .mobile-close{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border:1px solid var(--p33-line)!important;border-radius:14px!important;background:#fff!important;color:var(--p33-navy)!important;}
  .menu.prestige-menu,#menu{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(390px,88vw)!important;height:100dvh!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:8px!important;padding:94px 18px 26px!important;background:rgba(255,255,255,.985)!important;border-left:1px solid var(--p33-line)!important;box-shadow:-24px 0 80px rgba(7,20,47,.23)!important;transform:translateX(106%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility .3s ease!important;z-index:5000!important;overflow-y:auto!important;}
  .menu.prestige-menu.active,#menu.active{transform:translateX(0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
  body.menu-open::before{content:"";position:fixed;inset:0;background:rgba(7,20,47,.48);z-index:4200;}
  .menu.prestige-menu>a:not(.btn),.nav-dropbtn{width:100%!important;height:50px!important;justify-content:space-between!important;padding:0 15px!important;background:#f8fafc!important;border:1px solid #eef2f7!important;border-radius:16px!important;font-size:.95rem!important;color:var(--p33-navy)!important;}
  .menu.prestige-menu>a:not(.btn)::before,.menu.prestige-menu>a:not(.btn)::after,.nav-dropbtn::before,.nav-dropbtn::after{display:none!important;}
  .nav-dropdown{display:block!important;width:100%!important;}
  .nav-dropdown-menu{position:static!important;width:100%!important;min-width:0!important;max-width:100%!important;margin-top:8px!important;padding:8px!important;box-shadow:none!important;border-radius:16px!important;display:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;background:#fff!important;}
  .nav-dropdown:hover>.nav-dropdown-menu,.nav-dropdown:focus-within>.nav-dropdown-menu{display:none!important;}
  .nav-dropdown.open>.nav-dropdown-menu{display:grid!important;}
  .menu .btn{width:100%!important;height:50px!important;min-height:50px!important;margin-top:4px!important;}
  .section{padding:62px 0!important;}
  .head{text-align:left!important;margin:0 0 30px!important;}
  h1{font-size:clamp(2.2rem,10vw,3.05rem)!important;line-height:1.04!important;}
  h2,.section h2,.head h2{font-size:clamp(1.75rem,7.6vw,2.45rem)!important;}
  p{font-size:.98rem!important;line-height:1.72!important;}
  .hero-grid,.px-hero-grid,.ai-section-grid{grid-template-columns:1fr!important;gap:24px!important;padding:52px 0 66px!important;}
  .px-hero-actions,.hero-actions,.actions{flex-direction:column!important;align-items:stretch!important;}
  .btn{width:100%!important;min-height:48px!important;}
  .grid-2,.grid-3,.grid-4,.grid-5,.footer-grid,.form-grid{grid-template-columns:1fr!important;gap:18px!important;}
  .card,.course-card,.service-card,.blog-card,.project-card,.mode-card,.value-card,article.card{border-radius:20px!important;padding:22px!important;}
  .footer{padding:58px 0 94px!important;}
}

@media (max-width:420px){
  .container{width:min(calc(100% - 22px),390px)!important;}
  .brand span{max-width:150px!important;}
  .brand small{display:none!important;}
  .menu.prestige-menu,#menu{width:91vw!important;}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}
