:root{
  --bg-1: #0b0b0b;
  --bg-2: #151515;
  --card: rgba(16,16,16,0.78);
  --border: rgba(255,255,255,.08);
  --muted: #b7c0c3;
  --text: #f1f5f6;
  --accent: #ff7a00; /* tiger orange */
  --accent-2: #ffb36b; /* light orange for gradients */
  --ring: rgba(255,122,0,.45);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font-family:"Work Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{
  background: linear-gradient(135deg,var(--bg-1),var(--bg-2));
  min-height:100dvh;
  overflow-x:hidden;
  animation: bgShift 18s ease-in-out infinite alternate;
}
@keyframes bgShift{
  0%{background: radial-gradient(1200px 600px at 20% 10%, #111 0%, var(--bg-2) 60%), radial-gradient(800px 400px at 80% 90%, #1c1c1c 0%, var(--bg-1) 60%);}
  100%{background: radial-gradient(900px 500px at 80% 15%, #1b1b1b 0%, var(--bg-1) 60%), radial-gradient(1000px 600px at 10% 85%, #101010 0%, var(--bg-2) 60%);}
}

.container{max-width:1080px;margin:0 auto;padding:24px}
.narrow{max-width:760px}

.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:16px;top:16px;background:#000;color:#fff;padding:8px 12px;border-radius:8px;z-index:999}

.hero{position:relative;padding:40px 0 30px;border-bottom:1px solid var(--border)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(600px 280px at 20% 0%, rgba(255,122,0,.18), transparent 60%),
    radial-gradient(520px 260px at 90% 40%, rgba(255,179,107,.2), transparent 60%);
  pointer-events:none;
}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.school-logo{width:min(360px,60vw);height:auto;filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));margin-bottom:8px}
.brand{font-weight:900;letter-spacing:.5px;margin:6px 0 6px;font-size:clamp(24px,4vw,38px)}
.brand .cursive{font-family:"Allura",cursive;font-size:1.5em;font-weight:400;letter-spacing:.5px;display:block;line-height:1}
.tagline{color:var(--muted);margin:2px 0 14px;font-size:clamp(14px,2.2vw,18px)}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:6px 0 8px}
.btn{border:none;border-radius:14px;padding:12px 18px;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow);transform:translateY(0);transition:transform .15s ease, filter .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.primary{background:linear-gradient(180deg,var(--accent),#d46500);color:#0b0b0b}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none}

.hero-stats{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:10px 0 0;padding:0;list-style:none;color:var(--muted)}
.hero-stats li{background:rgba(0,0,0,.22);padding:10px 12px;border:1px solid var(--border);border-radius:999px}
.hero-stats li span{color:var(--accent);font-weight:900;margin-right:6px}

.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px 22px 18px;margin:20px 0;box-shadow:var(--shadow);backdrop-filter: blur(8px)}
.h2{font-family:"Allura",cursive;font-size:2rem;font-weight:400;margin:0 0 10px;position:relative}
.h2:after{content:"";position:absolute;left:0;bottom:-6px;width:88px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px;opacity:.9}

.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 6px}
.kpi{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center}
.kpi span{display:block;font-weight:900;font-size:20px;color:var(--accent)}
.kpi em{color:var(--muted);font-style:normal;font-size:12px}

ul.bullets{padding-left:18px}
ul.bullets li{margin:8px 0}
.small{font-size:.92rem}
.muted{color:var(--muted)}
.hidden{display:none}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column}
.field-full{grid-column:1 / -1}
.field span{font-weight:800;margin-bottom:6px}
.field input,.field select,.field textarea{
  background:#0f0f0f;border:1px solid rgba(255,255,255,.12);color:var(--text);padding:12px 14px;border-radius:12px;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 5px var(--ring)}
.field input:active,.field select:active,.field textarea:active{transform:scale(0.998)}
.hint{display:block;text-align:right;color:var(--muted);margin-top:4px}

legend{font-weight:900;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{background:#0f0f0f;border:1px solid rgba(255,255,255,.12);padding:8px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:8px}
.other-inline input{width:180px}

.checkbox{display:flex;align-items:flex-start;gap:10px;margin-top:8px}
.checkbox input{transform:translateY(2px)}

.card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.deadline-chip{background:rgba(255,122,0,.16);border:1px solid var(--accent);color:var(--text);padding:6px 10px;border-radius:999px;font-weight:900}

.actions{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.btn + .btn{margin-left:0}

.site-footer{padding:24px 0;color:var(--muted);text-align:center}

.floating-cta{
  position:fixed;right:16px;bottom:16px;z-index:50;
  background:linear-gradient(180deg,var(--accent),#d46500);color:#0b0b0b;
  border-radius:999px;padding:12px 16px;font-weight:900;text-decoration:none;box-shadow:var(--shadow);
}
@media (min-width:900px){.floating-cta{display:none}}

.pretty-list{counter-reset:item;padding-left:0}
.pretty-list li{list-style:none;margin:10px 0;padding-left:36px;position:relative}
.pretty-list li:before{
  counter-increment:item;content:counter(item);position:absolute;left:0;top:-2px;
  width:26px;height:26px;border-radius:999px;background:linear-gradient(180deg,var(--accent),#d46500);
  color:#0b0b0b;font-weight:900;display:grid;place-items:center;box-shadow:var(--shadow)
}

/* mobile */
@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(3,1fr)}
}

.field input::placeholder,.field textarea::placeholder{color:#8a8f91}