/* TivloLab theme: light sky, built from the logo blue #0278AE */
:root{
  --logo:#0278AE;      /* exact logo colour */
  --glow:#2FB0E8;      /* brighter logo blue */
  --ice:#E3F4FD;       /* pale sky tint */
  --space:#F4FAFE;     /* page background, light sky */
  --deep:#E8F5FD;      /* tinted sections */
  --panel:#FFFFFF;
  --line:#CFE7F5;
  --text:#123A52; --muted:#4F6E82; --head:#0A4A6E;
  --amber:#FFB938;     /* call-to-action accent */
  --ok:#1E9E5A; --bad:#D64545;
  --display:"Outfit","Segoe UI",system-ui,sans-serif;
  --body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  /* aliases used in page markup */
  --blue:var(--logo); --blue-deep:var(--deep); --ink:var(--text); --paper:var(--space); --sun:var(--amber); --soft:var(--deep);
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:auto; scroll-behavior:smooth; scroll-padding-top:calc(76px + env(safe-area-inset-top,0px)); background:var(--space)}
body{margin:0; background:var(--space); color:var(--text); font:1.0625rem/1.65 var(--body)}
img{max-width:100%}
a{color:var(--glow)}
::selection{background:var(--logo); color:#fff}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
h1,h2,h3{font-family:var(--display); line-height:1.15; margin:0 0 .5em; font-weight:600; color:var(--head)}
h2{font-size:clamp(1.8rem,4vw,2.5rem); letter-spacing:-.01em}
h3{font-size:1.15rem}
p{margin:0 0 1em; max-width:62ch}
.wrap{width:min(1160px,100% - 2.5rem); margin-inline:auto}
section{padding:clamp(3.5rem,8vw,6.5rem) 0; position:relative}
.lead{font-size:1.13rem; color:var(--muted)}
.hint{color:var(--muted); font-weight:400; font-size:.92rem}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font:700 1rem var(--body); padding:.8em 1.35em; border-radius:12px; border:1px solid var(--glow); background:var(--logo); color:#fff; text-decoration:none; cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(2,120,174,.55); transition:box-shadow .2s, transform .1s, background .2s}
.btn:hover{background:#0A8BC7; box-shadow:0 0 0 4px rgba(47,176,232,.18), 0 6px 18px -6px rgba(2,120,174,.6)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6; cursor:wait}
.btn.ghost{background:#fff; color:var(--logo); border-color:#9FD3EE; box-shadow:none}
.btn.ghost:hover{border-color:var(--logo); background:var(--ice)}
.btn.sun{background:var(--amber); border-color:var(--amber); color:#3A2700; box-shadow:0 4px 14px -6px rgba(214,140,0,.55)}
.btn.sun:hover{background:#FFC85E; box-shadow:0 0 0 4px rgba(255,185,56,.25)}
.btn.small{padding:.5em .95em; font-size:.95rem}

/* header */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:72px; gap:1rem}
.logo{display:flex; align-items:center; text-decoration:none}
.logo img{height:34px; width:auto; display:block}
nav ul{display:flex; gap:1.6rem; list-style:none; margin:0; padding:0}
nav a{color:var(--muted); text-decoration:none; font-weight:600; transition:color .2s}
nav a:hover{color:var(--logo)}
.menu-btn{display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:.45rem .8rem; font:700 1rem var(--body); color:var(--text)}
.back{font-weight:700; text-decoration:none; color:var(--muted)}
.back:hover{color:var(--logo)}
@media (max-width:960px){
  nav ul{display:none; position:absolute; left:0; right:0; top:72px; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid var(--line)}
  nav ul.open{display:flex}
  nav li a{display:block; padding:1rem 1.25rem; border-top:1px solid var(--line)}
  .menu-btn{display:block}
  .bar > .btn{display:none}
}

/* hero with interactive dot field */
.hero{background:linear-gradient(180deg,#DDF1FC 0%,#F4FAFE 100%); overflow:hidden; padding-top:clamp(3rem,7vw,5.5rem)}
#dots{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.3rem,5.6vw,4rem); letter-spacing:-.02em; font-weight:500; color:var(--head)}
.hero .lead{color:var(--muted)}
.hero .actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}

/* glass panel shared look */
.mission,.mod,.facts,fieldset,.pcard,.done,.tabs button,.quiz{background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 24px -18px rgba(2,120,174,.45)}

/* drone mission */
.mission{border-radius:20px; padding:1.2rem; box-shadow:0 20px 50px -28px rgba(2,120,174,.5)}
.mission h3{margin:0 0 .2rem}
.mission .brief{font-size:.95rem; color:var(--muted); margin-bottom:.8rem}
.board{position:relative; aspect-ratio:6/5; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:
  linear-gradient(#D6ECF8 1px,transparent 1px) 0 0/calc(100%/6) calc(100%/5),
  linear-gradient(90deg,#D6ECF8 1px,transparent 1px) 0 0/calc(100%/6) calc(100%/5), #F7FCFF}
.cell{position:absolute; width:calc(100%/6); height:calc(100%/5); display:grid; place-items:center}
.tower{width:70%; height:80%; align-self:end; margin-bottom:6%}
.tower svg{width:100%; height:100%; display:block}
.pad{width:70%; height:70%; border-radius:50%; border:2px solid var(--amber); display:grid; place-items:center; font:800 1.15rem var(--display); color:#B07800; background:#FFF6E0; box-shadow:0 0 0 0 rgba(255,185,56,.5); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,185,56,0)}}
.start{font:700 .72rem var(--body); color:var(--muted)}
#drone{transition:left .4s ease, top .4s ease; z-index:2}
#drone svg{width:72%; height:72%; transition:transform .35s ease, filter .35s}
#drone svg *{fill:var(--logo)}
#drone svg circle{fill:#7CCBF0; opacity:.5}
#drone svg path:last-child{fill:var(--amber)}
#drone svg path:nth-of-type(1){stroke:var(--logo)}
#drone.up svg{filter:drop-shadow(0 10px 6px rgba(2,60,90,.3))}
.cmds{display:flex; flex-wrap:wrap; gap:.4rem; margin:.8rem 0 .6rem}
.cmds button{font:700 .9rem var(--body); padding:.45em .8em; border-radius:9px; border:1px solid var(--line); background:var(--ice); color:var(--head); cursor:pointer; transition:background .15s, border-color .15s}
.cmds button:hover{background:#CDEBFA; border-color:var(--glow)}
.program{display:flex; flex-wrap:wrap; gap:.3rem; min-height:2.4rem; padding:.4rem; border:1px dashed var(--line); border-radius:10px; font:700 .85rem var(--body)}
.program span{background:var(--logo); color:#fff; border-radius:7px; padding:.25em .6em}
.program span.run{background:var(--amber); color:#3A2700}
.program:empty::before{content:"Your program appears here"; color:var(--muted); font-weight:400; padding:.25em}
.mission-foot{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem}
.mission-msg{margin-top:.6rem; font-weight:700; min-height:1.5em}
.mission-msg.ok{color:var(--ok)} .mission-msg.err{color:var(--bad)}

/* programs */
.tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin:1.6rem 0 1.6rem}
.tabs button{font:700 1rem var(--body); padding:.65em 1.2em; border-radius:99px; color:var(--muted); cursor:pointer; transition:all .2s}
.tabs button:hover{color:var(--logo); border-color:var(--glow)}
.tabs button[aria-selected="true"]{background:var(--logo); border-color:var(--glow); color:#fff; box-shadow:0 6px 16px -8px rgba(2,120,174,.7)}
.prog-intro{display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:start; margin-bottom:1.4rem}
@media (max-width:820px){.prog-intro{grid-template-columns:1fr}}

.facts{display:grid; gap:.45rem; border-radius:16px; padding:1rem 1.2rem; font-size:.97rem}
.facts b{font-family:var(--display); color:var(--logo); font-weight:600}
.mods{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media (max-width:760px){.mods{grid-template-columns:1fr}}
.mod{border-radius:16px; padding:1.2rem 1.3rem; transition:border-color .2s, box-shadow .2s}
.mod:hover{border-color:#8ACDEE; box-shadow:0 14px 30px -20px rgba(2,120,174,.55)}
.mod-row{display:flex; gap:1rem; align-items:flex-start}
.mod-num{flex:none; width:2.3rem; height:2.3rem; display:grid; place-items:center; border-radius:10px; background:var(--ice); color:var(--logo); font:600 1rem var(--display); border:1px solid #BEE1F3; box-shadow:none}
.mod h3{margin:.15rem 0 .2rem}
.mod .price{font-weight:700; color:var(--muted); font-size:.93rem}
.mod details{margin-top:.7rem}
.mod summary{cursor:pointer; font-weight:700; color:var(--logo)}
.mod ol{margin:.6rem 0 .4rem; padding-left:1.3rem; columns:2; column-gap:1.5rem; color:var(--text)}
@media (max-width:480px){.mod ol{columns:1}}
.mod li{break-inside:avoid; margin-bottom:.3rem; font-size:.96rem}
.mod li::marker{color:var(--logo)}
.mod .btn{margin-top:.8rem}
.bundle{margin-top:1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; border-radius:16px; padding:1.2rem 1.4rem;
  background:linear-gradient(100deg,#D4EEFB,#EAF7FE); border:1px solid #A9DAF2}
.bundle p{margin:0; font-weight:700}

/* fee cards */
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.6rem}
@media (max-width:960px){.price-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.price-grid{grid-template-columns:1fr}}
.pcard{border-radius:18px; padding:1.4rem; display:flex; flex-direction:column; gap:.4rem; transition:transform .2s, border-color .2s}
.pcard:hover{transform:translateY(-3px); border-color:#8ACDEE}

.pcard .amt{font:600 2.1rem var(--display); color:var(--logo); letter-spacing:-.01em}
.pcard p{flex:1; color:var(--muted); font-size:.97rem}
.pcard .btn{align-self:flex-start}
.pcard.best{background:linear-gradient(160deg,#0A8BC7,#0278AE); border-color:var(--logo); box-shadow:0 16px 36px -18px rgba(2,120,174,.8)}
.pcard.best h3{color:#fff}
.pcard.best .amt{color:#fff} .pcard.best p{color:#E3F4FD}

/* audiences, how we teach, careers */
.aud{background:#fff; border-block:1px solid var(--line)}
.aud-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); margin-top:2rem}
@media (max-width:860px){.aud-grid{grid-template-columns:1fr}}
.aud-grid article{border-top:2px solid var(--logo); padding-top:1.1rem; position:relative}
.aud-grid article::before{content:""; position:absolute; top:-5px; left:0; width:8px; height:8px; border-radius:50%; background:var(--logo)}

.aud-grid ul{padding-left:1.1rem; margin:0 0 1rem; color:var(--muted)}
.points{list-style:none; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 3rem}
@media (max-width:760px){.points{grid-template-columns:1fr}}
.points li{padding-left:1.6rem; position:relative; color:var(--muted)}
.points li::before{content:""; position:absolute; left:0; top:.45em; width:.65rem; height:.65rem; border-radius:50%; background:var(--glow); box-shadow:0 0 0 4px var(--ice)}
.points strong{display:block; font-family:var(--display); font-size:1.12rem; color:var(--head); font-weight:600}
#careers{background:var(--deep); border-block:1px solid var(--line)}

/* contact and forms */
.contact{background:#fff; border-top:1px solid var(--line)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
form{display:grid; gap:1rem}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.row2[hidden]{display:none}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
label{display:grid; gap:.35rem; font-weight:700; font-size:.95rem}
input,select,textarea{font:1rem var(--body); padding:.75em .9em; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); width:100%; transition:border-color .2s, box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--glow); box-shadow:0 0 0 3px rgba(47,176,232,.2)}
input::placeholder,textarea::placeholder{color:#8AA4B4}

textarea{min-height:110px; resize:vertical}
input[type=file]{padding:.6em}
.hp{position:absolute; left:-9999px}
.form-msg{font-weight:700; min-height:1.5em}
.form-msg.ok{color:var(--ok)} .form-msg.err{color:var(--bad)}
.reach{display:grid; gap:.8rem}
.reach a{font-weight:700; font-size:1.1rem; text-decoration:none}

/* registration and application pages */
.page{padding:clamp(2.5rem,6vw,4rem) 0 5rem; background:linear-gradient(180deg,#DDF1FC 0,var(--space) 340px)}
.narrow{width:min(760px,100% - 2.5rem); margin-inline:auto}
.page h1{font-size:clamp(2.1rem,5vw,3rem); letter-spacing:-.01em}
fieldset{border-radius:16px; padding:1.3rem 1.3rem 1.4rem; margin:0 0 1.2rem; display:grid; gap:1rem; min-width:0}
legend{font:600 1.15rem var(--display); padding:0 .5rem; color:var(--logo)}
.choice{display:flex; gap:.65rem; align-items:flex-start; font-weight:400; padding:.75rem .85rem; border:1px solid var(--line); border-radius:12px; background:var(--space); cursor:pointer; transition:border-color .2s, background .2s}
.choice:hover{border-color:#8ACDEE}
.choice input{width:auto; margin-top:.3rem; accent-color:var(--glow)}
.choice:has(input:checked){border-color:var(--logo); background:var(--ice); box-shadow:0 0 0 1px var(--logo)}
.choice strong{color:var(--head)}
.choices{display:grid; gap:.5rem}
.choices[hidden]{display:none}
.choices.two{grid-template-columns:1fr 1fr}
@media (max-width:560px){.choices.two{grid-template-columns:1fr}}
.total{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; border-radius:14px; padding:1rem 1.2rem; font-weight:700;
  background:#FFF6E0; border:1px solid #F5D58A}
.total b{font:600 1.8rem var(--display); color:#9A6800}
.done{border-radius:16px; padding:1.6rem; border-color:var(--ok)}
.done h2{color:var(--ok)}

footer{background:#0A4A6E; color:#CDE7F5; padding:2.5rem 0; border-top:1px solid var(--line)}
footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
footer img{height:28px; width:auto}
footer a{color:#fff}
.wa{position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:30; width:56px; height:56px; border-radius:50%; background:#1FAF5E; display:grid; place-items:center; box-shadow:0 6px 18px rgba(10,74,110,.3)}

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

/* Advanced Computer Education parts */
.part-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin:2.2rem 0 1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line)}
.part-head h3{margin:.3rem 0 .2rem; font-size:1.35rem}
.part-head p{margin:0; color:var(--muted)}
.part-tag{display:inline-block; font:600 .78rem var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--logo); background:var(--ice); border:1px solid #BEE1F3; border-radius:999px; padding:.2rem .65rem}

/* Practical classes */
.practicals{background:#fff; border-block:1px solid var(--line)}
.prac-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.prac-steps{list-style:none; margin:0; padding:0; display:grid; gap:.9rem; counter-reset:none}
.prac-steps li{display:flex; gap:1rem; align-items:center; background:var(--space); border:1px solid var(--line); border-radius:16px; padding:1rem 1.1rem}
.prac-steps strong{display:block; font-family:var(--display); font-weight:600; color:var(--head); font-size:1.05rem}
.prac-steps span{color:var(--muted)}
.prac-ico{flex:none; width:3rem; height:3rem; border-radius:14px; display:grid; place-items:center; background:var(--ice); border:1px solid #BEE1F3}
.prac-ico svg{width:1.7rem; height:1.7rem; fill:none; stroke:var(--logo); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.included{margin:1.2rem 0 0; padding:.8rem 1rem; border-radius:12px; background:var(--ice); border:1px solid #BEE1F3; color:var(--head); font-weight:600}
@media (max-width:820px){.prac-grid{grid-template-columns:1fr}}

/* Hero: compact animated drone card */
.flycard{justify-self:end; width:100%; max-width:430px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:1rem; box-shadow:0 20px 50px -30px rgba(2,120,174,.55)}
.flycard-top{display:flex; align-items:center; gap:.5rem; font:600 .8rem var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--logo); margin-bottom:.6rem}
.dot-live{width:8px; height:8px; border-radius:50%; background:#1E9E5A; box-shadow:0 0 0 0 rgba(30,158,90,.5); animation:live 1.8s infinite}
@keyframes live{70%{box-shadow:0 0 0 7px rgba(30,158,90,0)}}
.flysky{display:block; width:100%; height:auto; border-radius:12px; background:linear-gradient(180deg,#EAF7FE,#F7FCFF)}
#miniDrone{transition:opacity .45s}
#miniDrone .prop ellipse{transform-box:fill-box; transform-origin:center; animation:prop .18s linear infinite}
@keyframes prop{50%{transform:scaleX(.25)}}
@media (prefers-reduced-motion:reduce){#miniDrone .prop ellipse,.dot-live{animation:none}}
.flycode{display:flex; flex-wrap:wrap; gap:.35rem; margin:.75rem 0 .6rem; font:600 .82rem ui-monospace,Consolas,monospace}
.flycode span{padding:.28em .6em; border-radius:7px; background:var(--ice); color:var(--head); border:1px solid #BEE1F3; transition:background .25s,color .25s}
.flycode span.on{background:var(--logo); color:#fff; border-color:var(--logo)}
.flycode span.done{background:#E3F6EC; color:#1E7A4A; border-color:#B9E5CC}
.flycard-foot{display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap; font-size:.9rem; color:var(--muted)}
@media (max-width:960px){.flycard{justify-self:start; max-width:520px}}
/* game in a pop-up */
#missionDlg{border:0; padding:0; background:transparent; width:min(520px,94vw); max-height:94vh}
#missionDlg::backdrop{background:rgba(10,74,110,.35); backdrop-filter:blur(3px)}
#missionDlg .mission{position:relative; padding:1.1rem}
.dlg-close{position:absolute; top:.5rem; right:.6rem; width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--head); font-size:1.4rem; line-height:1; cursor:pointer}
.dlg-close:hover{background:var(--ice)}
#missionDlg .mission h3{padding-right:2.5rem}

/* mentor form */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 1rem}
.chips label{margin:0; cursor:pointer}
.chips input{position:absolute; opacity:0; pointer-events:none}
.chips span{display:inline-block; padding:.5em .9em; border-radius:999px; border:1px solid var(--line); background:var(--space); font-weight:600; color:var(--head); transition:all .15s}
.chips label:hover span{border-color:#8ACDEE}
.chips input:checked + span{background:var(--logo); border-color:var(--logo); color:#fff; transform:scale(1.03)}
.chips input:focus-visible + span{outline:2px solid var(--glow); outline-offset:2px}
.drop{position:relative; display:flex; align-items:center; gap:1rem; padding:1.4rem; border:2px dashed #9FD3EE; border-radius:16px; background:var(--space); cursor:pointer; transition:all .15s}
.drop input{position:absolute; inset:0; opacity:0; cursor:pointer}
.drop:hover,.drop.over{border-color:var(--logo); background:var(--ice)}
.drop.has{border-style:solid; border-color:var(--ok); background:#EEF9F2}
.drop-ico{font-size:2rem}

/* policy pages */
.legal h2{font-size:1.3rem; margin:2rem 0 .5rem}
.legal ul{padding-left:1.2rem} .legal li{margin:.35rem 0}
.legal p,.legal li{color:var(--text)}
mark.todo{background:#FFF1C2; color:#7A5200; padding:0 .25em; border-radius:4px}
.legal-links{margin-top:2rem; font-weight:600}
footer .policies{display:flex; gap:1rem; flex-wrap:wrap; font-size:.9rem}
.agree{font-size:.9rem; color:var(--muted); margin:.4rem 0 0}

/* UPI payment after registration */
.done.pay{text-align:left}
.paybox{display:grid; gap:.9rem; margin:1.2rem 0 1.4rem; padding:1.4rem; border-radius:18px; background:var(--space); border:1px solid var(--line)}
.payamt{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.payamt span{color:var(--muted); font-weight:600}
.payamt b{font:600 2rem var(--display); color:var(--head)}
.upi-btn{width:100%; justify-content:center; text-align:center; font-size:1.1rem}
.qrwrap{display:none; justify-items:center; gap:.4rem}
.qrwrap #qr{padding:10px; background:#fff; border-radius:12px; border:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){ .qrwrap{display:grid} .upi-btn,.upi-apps{display:none} }
.upiid{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.upiid span{color:var(--muted); font-weight:600}
.upiid code{font-size:1.05rem; color:var(--head); background:#fff; border:1px solid var(--line); padding:.3em .6em; border-radius:8px}

/* Fees cards: value details */
.price-grid{align-items:stretch}
.pcard{position:relative; gap:.35rem}
.ptop{display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.3rem}
.badge{font:600 .72rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--logo); background:var(--ice); border:1px solid #BEE1F3; border-radius:999px; padding:.25rem .6rem}
.save{font:700 .78rem var(--body); color:#1E7A4A; background:#E3F6EC; border:1px solid #B9E5CC; border-radius:999px; padding:.22rem .55rem}
.pcard h3{margin:0}
.pcard .hrs{flex:none; margin:0; font-weight:700; color:var(--head); font-size:.9rem}
.pcard .was{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); margin-top:-.1rem}
.pcard .was s{color:#9A7B7B}
.pcard > p:not(.hrs){flex:none; margin:.3rem 0 0}
.feats{list-style:none; margin:.6rem 0 1rem; padding:0; display:grid; gap:.4rem; flex:1}
.feats li{position:relative; padding-left:1.5rem; font-size:.92rem; color:var(--text); line-height:1.35}
.feats li::before{content:"✓"; position:absolute; left:0; top:0; width:1.1rem; height:1.1rem; border-radius:50%; background:#E3F6EC; color:#1E7A4A; font-size:.72rem; font-weight:800; display:grid; place-items:center}
.pcard.best .badge{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); color:#fff}
.pcard.best .save{background:#FFB938; border-color:#FFB938; color:#3A2700}
.pcard.best .hrs,.pcard.best .feats li{color:#fff}
.pcard.best .was,.pcard.best .was s{color:#CDEBF8}
.pcard.best .feats li::before{background:rgba(255,255,255,.2); color:#fff}
@media (min-width:961px){.pcard.best{transform:scale(1.03)} .pcard.best:hover{transform:scale(1.03) translateY(-3px)}}

/* Launch offer countdown */
.offer-bar{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:1rem 0 0; padding:.75rem 1rem; border-radius:14px; background:linear-gradient(100deg,#FFF4D6,#FFF9EA); border:1px solid #F5D58A; color:#5C3E00; font-size:.97rem}
.offer-bar[hidden]{display:none}
.offer-pill{font:600 .8rem var(--display); letter-spacing:.05em; text-transform:uppercase; background:#FFB938; color:#3A2700; border-radius:999px; padding:.25rem .7rem}
.offer-time{font-variant-numeric:tabular-nums; color:#B4410C}
.saveline{margin:.6rem 0 0; padding:.6rem .9rem; border-radius:12px; background:#E3F6EC; border:1px solid #B9E5CC; color:#1E5E3A}
.saveline s{color:#6B8A78}
.saved-note{margin:.8rem 0 0; padding:.7rem 1rem; border-radius:12px; background:#E3F6EC; border:1px solid #B9E5CC; color:#1E5E3A}
.choice .save{margin-left:.3rem}
.save{white-space:nowrap; display:inline-block}

/* UPI payment steps */
.step-tag{margin:0 0 .3rem; font:600 .78rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--logo)}
.paysteps{margin:.2rem 0; padding-left:1.3rem; display:grid; gap:.55rem; color:var(--text)}
.paysteps .upiid{display:inline-flex; margin-top:.3rem}
.utrform{display:grid; gap:.6rem; padding-top:.6rem; border-top:1px dashed var(--line)}
.utrform input{font-size:1.15rem; letter-spacing:.08em}
.form-msg.err{color:var(--bad)}

/* Why TivloLab + documents */
.why{background:#fff; border-block:1px solid var(--line)}
.ben-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.4rem}
.ben{background:var(--space); border:1px solid var(--line); border-radius:18px; padding:1.3rem}
.ben-ico{display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:14px; background:var(--ice); border:1px solid #BEE1F3; font-size:1.4rem; margin-bottom:.7rem}
.ben h3{margin:0 0 .3rem; font-size:1.12rem}
.ben p{margin:0; color:var(--muted)}
.docs-head{margin:2.4rem 0 1rem}
.docs-head h3{margin:0 0 .2rem; font-size:1.35rem}
.docs-head p{margin:0; color:var(--muted)}
.doc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem}
.doc{display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border-radius:16px; border:1px solid var(--line); background:var(--space); text-decoration:none; color:var(--text); transition:border-color .15s, transform .15s}
.doc:hover{border-color:#8ACDEE; transform:translateY(-2px)}
.doc-ico{flex:none; display:grid; place-items:center; width:3rem; height:3.6rem; border-radius:8px; background:#fff; border:1px solid #F5C9A8; color:#B4410C; font:700 .78rem var(--display); letter-spacing:.04em}
.doc-txt{display:flex; flex-direction:column; gap:.15rem; flex:1}
.doc-txt strong{font-family:var(--display); font-weight:600; color:var(--head)}
.doc-txt span{font-size:.92rem; color:var(--muted)}
.doc-txt small{font-size:.8rem; color:var(--muted)}
.doc-dl{flex:none; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--logo); color:#fff; font-weight:700}
@media (max-width:960px){.ben-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ben-grid,.doc-grid{grid-template-columns:1fr}}
nav a{white-space:nowrap}

/* Course chips in the hero */
.course-chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.3rem}
.course-chips button{display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .8rem; border-radius:999px; border:1px solid #BEE1F3; background:#fff; color:var(--head); font:600 .9rem var(--body); cursor:pointer; transition:border-color .15s, transform .15s}
.course-chips button:hover{border-color:var(--logo); transform:translateY(-1px)}
.course-chips .soon{background:#FFF9EA; border-color:#F5D58A}
.course-chips em{font-style:normal; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:#FFB938; color:#3A2700; border-radius:999px; padding:.1rem .45rem}
@media (max-width:620px){.course-chips{flex-wrap:nowrap; overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none} .course-chips button{flex:none}}
/* Coming soon: drone specialisations */
.soon-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.soon-card{display:flex; flex-direction:column; gap:.5rem; padding:1.3rem; border-radius:18px; border:1.5px dashed #F5D58A; background:linear-gradient(160deg,#FFFBF0,#fff)}
.soon-card h3{margin:0; font-size:1.2rem}
.soon-card p{margin:0; color:var(--muted)}
.soon-card summary{cursor:pointer; font-weight:700; color:var(--logo)}
.soon-top{display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap}
.soon-badge{font:700 .74rem var(--body); text-transform:uppercase; letter-spacing:.06em; background:#FFB938; color:#3A2700; border-radius:999px; padding:.22rem .6rem}
.soon-foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:.4rem}
.soon-price{font:600 1.4rem var(--display); color:var(--head)}
.soon-line{margin-top:1rem; padding:.6rem .9rem; border-radius:12px; background:#FFF9EA; border:1px solid #F5D58A}
@media (max-width:760px){.soon-grid{grid-template-columns:1fr}}

/* Programs: compact course cards by default */
.prog-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:.4rem}
.prog-card{display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; text-align:left; padding:1.3rem; border-radius:18px; border:1px solid var(--line); background:#fff; cursor:pointer; font:inherit; color:var(--text); box-shadow:0 8px 24px -18px rgba(2,120,174,.45); transition:border-color .15s, transform .15s}
.prog-card:hover{border-color:#8ACDEE; transform:translateY(-2px)}
.prog-ico{display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:14px; background:var(--ice); border:1px solid #BEE1F3; font-size:1.4rem; margin-bottom:.3rem}
.prog-card strong{font:600 1.15rem var(--display); color:var(--head)}
.prog-meta{font-weight:700; font-size:.88rem; color:var(--logo)}
.prog-desc{color:var(--muted); font-size:.95rem}
.prog-go{margin-top:auto; padding-top:.5rem; font-weight:700; color:var(--logo)}
.prog-back{margin:.2rem 0 1rem; padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--logo); font:700 .9rem var(--body); cursor:pointer}
.prog-back:hover{border-color:var(--logo)}
.part-fold{border:1px solid var(--line); border-radius:16px; background:#fff; padding:0 1.1rem; margin:1rem 0}
.part-fold > summary{list-style:none; cursor:pointer; margin:0; border-bottom:0; padding:1rem 0}
.part-fold > summary::-webkit-details-marker{display:none}
.part-fold[open] > summary{border-bottom:1px solid var(--line); margin-bottom:1rem}
.part-fold[open]{padding-bottom:1.1rem}
.fold-hint{font-weight:700; color:var(--logo); white-space:nowrap}
.fold-hint::after{content:" ▾"}
.part-fold[open] .fold-hint::after{content:" ▴"}
@media (max-width:860px){.prog-cards{grid-template-columns:1fr}}

/* Documents button in the top bar */
.docs-menu{position:relative; margin-left:auto; margin-right:.6rem}
.docs-btn{display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--logo); font:700 .9rem var(--body); cursor:pointer}
.docs-btn:hover,.docs-btn[aria-expanded="true"]{border-color:var(--logo); background:var(--ice)}
.docs-panel{position:absolute; right:0; top:calc(100% + .5rem); width:min(340px,88vw); padding:.8rem; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px -18px rgba(2,60,90,.45); z-index:40; display:grid; gap:.4rem}
.docs-panel[hidden]{display:none}
.docs-title{margin:0 0 .2rem .3rem; font:600 .8rem var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.docs-item{display:flex; align-items:center; gap:.7rem; padding:.55rem .6rem; border-radius:12px; text-decoration:none; color:var(--text)}
.docs-item:hover{background:var(--space)}
.docs-item .doc-ico{width:2.3rem; height:2.8rem; font-size:.66rem}
.docs-item strong{display:block; font-family:var(--display); font-weight:600; color:var(--head); font-size:.95rem; line-height:1.25}
.docs-item small{color:var(--muted)}
@media (max-width:900px){.docs-label{display:none} .docs-btn{padding:.5rem}}
/* Coming-soon cards in the programs overview */
.soon-head{margin:1.6rem 0 .7rem; font:600 1.05rem var(--display); color:var(--head)}
.prog-cards.two{grid-template-columns:repeat(2,1fr)}
.prog-card.soon{position:relative; border:1.5px dashed #F5D58A; background:linear-gradient(160deg,#FFFBF0,#fff)}
.prog-card.soon .soon-badge{position:absolute; top:1rem; right:1rem}
@media (max-width:860px){.prog-cards.two{grid-template-columns:1fr}}
/* keep the logo full size and the top bar on one line */
.logo{flex:none}
nav ul{gap:1.3rem}
@media (max-width:1240px){.docs-label{display:none} .docs-btn{padding:.5rem}}
@media (max-width:1100px){nav ul{gap:1rem} nav a{font-size:.95rem}}
@media (max-width:1100px){nav ul{gap:.8rem} .bar > .btn{padding:.6rem 1rem} .docs-menu{margin-right:.3rem}}

/* ---------- Top bar layout: logo on the left; menu, Documents and Register grouped on the right ---------- */
.bar{justify-content:flex-start}
.bar nav{margin-left:auto}
.docs-menu{margin-left:.9rem; margin-right:.6rem}
@media (max-width:960px){
  .bar{position:relative}
  .docs-menu{order:2; margin-left:auto; margin-right:.5rem}
  .bar nav{order:3; margin-left:0}
  .menu-btn{display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .8rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--logo); font:700 .9rem var(--body); cursor:pointer}
  .menu-btn:hover,.menu-btn[aria-expanded="true"]{border-color:var(--logo); background:var(--ice)}
  .burger{display:inline-grid; gap:3px; width:16px}
  .burger i{display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .2s, opacity .2s}
  .menu-btn[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  /* the menu opens below, on the right, as a card that matches the Documents panel */
  nav ul{left:auto; right:0; top:calc(100% + .4rem); width:min(270px,88vw); padding:.5rem; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px -18px rgba(2,60,90,.45); z-index:40}
  nav li a{border-top:0; border-radius:10px; padding:.75rem .9rem; color:var(--head)}
  nav li a:hover{background:var(--space)}
  nav ul::after{content:""; display:block; height:1px; background:var(--line); margin:.3rem .4rem}
  nav ul.open::after{display:block}
}
@media (max-width:420px){.menu-label{display:none} .menu-btn{padding:.5rem .65rem}}
.menu-reg{display:none}
@media (max-width:960px){.menu-reg{display:block} .menu-reg a{color:var(--logo) !important; font-weight:800}}
@media (max-width:960px){nav li a{padding:.6rem .9rem}}

/* Login button (top bar) */
.login-btn{display:inline-flex; align-items:center; padding:.42rem .95rem; border-radius:999px; background:#0A4A6E; color:#fff; font:800 .85rem var(--body); letter-spacing:.02em; text-decoration:none; border:1px solid #0A4A6E; transition:background .15s}
.login-btn:hover{background:#0278AE; border-color:#0278AE}
.bar .login-btn{margin-right:.6rem}
@media (max-width:960px){.bar .login-btn{order:2; margin-right:.4rem} .docs-menu{margin-left:auto}}
@media (max-width:960px){.bar .docs-menu{order:1}}
/* Portal pages */
.portal .wide{max-width:960px}
.role-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.role-card{display:flex; flex-direction:column; gap:.35rem; padding:1.4rem; border-radius:18px; border:1px solid var(--line); background:#fff; text-decoration:none; color:var(--text); box-shadow:0 8px 24px -18px rgba(2,120,174,.45); transition:border-color .15s, transform .15s}
.role-card:hover{border-color:#8ACDEE; transform:translateY(-2px)}
.role-card strong{font:600 1.2rem var(--display); color:var(--head)}
.role-card span{color:var(--muted)}
.role-ico{font-size:1.8rem}
.login-form{display:grid; gap:.8rem; max-width:440px; margin-top:1rem; background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.3rem}
.login-form input{font-size:1.1rem}
.okbox{padding:.8rem 1rem; border-radius:12px; background:#E3F6EC; border:1px solid #B9E5CC; color:#1E5E3A}
.errbox{padding:.8rem 1rem; border-radius:12px; background:#FFF1E8; border:1px solid #F5C9A8; color:#7A2E00}
.pcard-box{background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.3rem; margin:1.2rem 0}
.pcard-box h2{margin:.1rem 0 .4rem; font-size:1.4rem}
.next-class{border-color:#9FD3EE; background:linear-gradient(160deg,#EAF7FE,#fff)}
.ph{font-size:1.25rem; margin:1.6rem 0 .6rem}
.mini-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.8rem}
.mini{display:flex; flex-direction:column; gap:.2rem; padding:1rem; border-radius:14px; border:1px solid var(--line); background:#fff}
.mini strong{font-family:var(--display); color:var(--head)}
.mini span{color:var(--muted); font-size:.92rem}
.mini small{color:var(--ok); font-weight:700}
.clist{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.clist li{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; padding:.85rem 1rem; border-radius:14px; border:1px solid var(--line); background:#fff}
.clist li strong{flex:1 1 220px; font-family:var(--display); font-weight:600; color:var(--head)}
.clist li span{color:var(--muted); font-size:.92rem}
.row-actions{display:flex; gap:.8rem; align-items:center}
.row-actions form.inline{display:inline}
.row-actions button{background:none; border:0; color:var(--bad); font:700 .92rem var(--body); cursor:pointer; padding:0}
.pgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem}
.pgrid .span2{grid-column:1/-1}
@media (max-width:760px){.role-grid,.pgrid{grid-template-columns:1fr}}
.bar > .back, .bar > .login-btn:last-child{margin-left:auto}

/* Mentor class cards: green = mine, light = available */
.cls-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.9rem}
.cls{display:flex; flex-direction:column; gap:.3rem; padding:1.1rem; border-radius:16px; border:1px solid var(--line); background:#fff; transition:opacity .15s, transform .15s, border-color .15s}
.cls strong{font:600 1.08rem var(--display); color:var(--head)}
.cls span{color:var(--muted); font-size:.92rem}
.cls .cls-course{font-weight:700; color:var(--logo)}
.cls-tag{align-self:flex-start; font:800 .72rem var(--body) !important; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:.2rem .6rem}
.cls-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.5rem}
.cls.mine{background:#E8F7EE; border:1.5px solid #6FCF97}
.cls.mine .cls-tag{background:#1E9E5A; color:#fff !important}
.cls.mine strong{color:#145A36}
.cls-warn{color:#B4410C !important; font-weight:700}
.cls.open{background:#F7F9FB; border:1px dashed #CBD5DF; opacity:.62}
.cls.open .cls-tag{background:#E6ECF2; color:#5B6B79 !important}
.cls.open:hover{opacity:1; border-color:#8ACDEE; transform:translateY(-2px)}
.linkish{background:none; border:0; color:var(--bad); font:700 .9rem var(--body); cursor:pointer; padding:.2rem .3rem}
form.inline{display:inline}

/* Copyright notes */
.copy-note{flex-basis:100%; margin:.6rem 0 0; font-size:.78rem; line-height:1.5; color:#9CC9E2}
.mini-foot{border-top:1px solid var(--line); background:#fff; padding:1.2rem 0; font-size:.8rem; color:var(--muted)}
.mini-foot a{color:var(--logo)}
.copy-note{max-width:none; width:100%} .mini-foot .wrap{display:block; line-height:1.7} .mini-foot span{margin-right:.4rem}
.prog-card{gap:.3rem; padding:1.1rem 1.2rem} .prog-card.soon{padding-top:2.6rem}