/* 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}