@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
/* styles.css — trimmed to essentials for this package */
:root{
  --primary: #6E56CF; /* purple */
  --accent: #5271FF;  /* blue */
  --text: #E7EAF3;
  --text-light: #9BA3AF;
  --bg: #0B0F19;
  --panel: #0F1222;
  --border: rgba(255,255,255,.08);
  --highlight: rgba(255,255,255,.04);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body { background: var(--bg); margin:0; font:16px/1.6 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto; color:var(--text)}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1100px,92%); margin-inline:auto}

header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(11,15,25,.8); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.7rem 0; min-height:64px}
.nav a.logo{display:flex; align-items:center; gap:.5rem; padding:.15rem .25rem; border-radius:10px}
.nav a.logo img{height:48px; display:block}
.nav ul{display:flex; gap:1.1rem; list-style:none; margin:0; padding:0; align-items:center}
.nav a.link{padding:.5rem .7rem; border-radius:10px; color:#B3B8FF}
.nav a.link:hover{background:rgba(255,255,255,.06)}
.nav .mobile{display:none}
@media (max-width:900px){.nav ul{display:none}.nav .mobile{display:flex; gap:.6rem}}

.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.1rem; border-radius:12px; font-weight:600; background:linear-gradient(180deg, #6E56CF, #4D3DB3); color:white; box-shadow:var(--shadow); border:0; cursor:pointer; transition:transform .08s ease, filter .15s ease}
.btn:hover{transform:translateY(-1px); filter:brightness(0.96)}
.btn.ghost{background:transparent; outline:1px solid var(--border); color:#B3B8FF}
.btn.small{padding:.55rem .8rem; border-radius:10px; font-size:.95rem}
.badge{font-size:.8rem; padding:.25rem .5rem; border-radius:999px; background:rgba(110,86,207,.15); color:#C9C6FF; border:1px solid rgba(110,86,207,.35)}

.hero{padding:4rem 0 3rem; background:radial-gradient(1200px 500px at 15% -5%, rgba(110,86,207,.25), transparent 70%), radial-gradient(900px 400px at 85% 0%, rgba(82,113,255,.18), transparent 70%)}
.hero .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(2.1rem,3.4vw + 1rem,3.2rem); line-height:1.1; margin:.3rem 0 1rem}
.lead{color:var(--text-light); font-size:1.05rem}

.section{padding:3.2rem 0; border-top:1px solid rgba(255,255,255,.06)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:var(--shadow)}
.card p{color:#B6BCC8}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}}

.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem}
.kpi{padding:1rem; background:#0F1629; border:1px solid rgba(255,255,255,.06); border-radius:14px}
.kpi .n{font-weight:800; font-size:1.2rem; color:#E7EAF3}

.feature{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.feature:nth-child(even){grid-template-columns:.9fr 1.1fr}
.feature .panel{padding:1rem; border:1px solid var(--border); border-radius:16px; background:linear-gradient(180deg, #11152A, #0D1224)}

.testimonials{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.t{padding:1rem; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:#0F1629}
@media (max-width:900px){.testimonials{grid-template-columns:1fr}}

footer{padding:2rem 0; color:#9BA3AF; background:#0B0F19; border-top:1px solid var(--border)}
footer .grid{display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center}
footer .links{display:flex; gap:.8rem; flex-wrap:wrap}
footer a{color:#B3B8FF}
.copy{margin-top:.8rem; font-size:.9rem; color:#7E8694}

input, select, textarea{background:#0F1629; border:1px solid rgba(255,255,255,.08); color:var(--text); padding:.7rem .8rem; border-radius:12px; width:100%}
label{display:block; font-weight:600; margin:.4rem 0 .3rem}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
@media (max-width:900px){.form-row{grid-template-columns:1fr}}
.form-actions{display:flex; gap:.6rem; align-items:center; margin-top:.8rem}

/* ===== Canvas-like Weekly Calendar ===== */
.cal-toolbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.6rem 0 1rem; flex-wrap:wrap}
.cal-legend{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; color:#9BA3AF; font-size:.9rem}
.legend-dot{display:inline-block; width:.8rem; height:.8rem; border-radius:999px; border:1px solid rgba(15,23,42,.2); vertical-align:middle; margin-right:.35rem}
.legend-dot.subj-alg{background:#ecfeff; border-color:#a5f3fc}
.legend-dot.subj-cal{background:#f0f9ff; border-color:#bae6fd}
.legend-dot.subj-phy{background:#fefce8; border-color:#fde68a}
.legend-dot.subj-chem{background:#fef2f2; border-color:#fecaca}
.legend-dot.subj-sat{background:#f0fdf4; border-color:#bbf7d0}
.legend-dot.subj-act{background:#fdf4ff; border-color:#e9d5ff}

.calendar{
  --slot: 22px;
  --start: 14;   /* 2 PM */
  --end: 24;     /* 12 AM */
  display:grid;
  grid-template-columns: 80px repeat(7, 1fr);
  grid-template-rows: 40px repeat(calc((var(--end) - var(--start)) * 4), var(--slot));
  background: #0F1629;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  position: relative;
  box-shadow: var(--shadow);
}
.day-head{
  grid-row: 1;
  padding:.5rem; text-align:center; font-weight:700; color:#E7EAF3;
  background: var(--highlight);
  border-left:1px solid var(--border);
}
.time-head{grid-row:1; grid-column:1; background:var(--highlight); color:#9BA3AF}
.time-label{
  grid-column: 1;
  font-size:.85rem;
  color:#7E8694;
  padding-left:.6rem;
  padding-right:.4rem;
  align-self:start;
  transform: translateY(-8px);
  text-align:right;
}
.hour-line{
  grid-column: 2 / -1;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.calendar > .col-sep{ grid-row: 2 / -1; border-left:1px solid rgba(255,255,255,.06); }
.event{
  position: relative;
  padding:.45rem .55rem;
  border-radius:10px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(110,86,207,.20), rgba(82,113,255,.18));
  display:flex; flex-direction:column; gap:.2rem;
}
.event .title{font-weight:700; font-size:.95rem; line-height:1.2; color:#E7EAF3}
.event .meta{font-size:.8rem; color:#9BA3AF}

/* ===== Calendar Toolbar (Month/Week) ===== */
.cal-switchbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; margin:.6rem 0 1rem; flex-wrap:wrap;
}
.cal-switchbar .left, .cal-switchbar .right{display:flex; align-items:center; gap:.4rem}
.cal-title{font-weight:800; color:#E7EAF3}
.cal-btn{
  padding:.5rem .8rem; border-radius:999px; border:1px solid var(--border);
  background:#0F1629; cursor:pointer; font-weight:600; color:#E7EAF3;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.cal-btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.4); transform:translateY(-1px)}
.cal-btn.toggle{background:#12172A}
.cal-btn.active{border-color:#6E56CF; background:rgba(110,86,207,.18); color:#E7EAF3}

/* ===== Month View Grid ===== */
.monthgrid{
  display:grid; grid-template-columns:80px repeat(7, 1fr);
  background:#0F1629; border:1px solid var(--border);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
}
.monthgrid .dow, .monthgrid .blank-head{
  padding:.5rem; text-align:center; font-weight:700; color:#E7EAF3; background:var(--highlight);
  border-left:1px solid var(--border);
}
.monthgrid .blank-head{grid-column:1}
.monthgrid .cell{
  min-height:86px; border-top:1px solid rgba(255,255,255,.06); padding:.5rem;
  position:relative
}
.monthgrid .date{
  position:absolute; top:.45rem; right:.55rem; font-size:.85rem; color:#7E8694; font-weight:600;
}
.monthgrid .chips{display:flex; flex-wrap:wrap; gap:.25rem; margin-top:1.2rem}
.monthgrid .chip{
  font-size:.72rem; padding:.15rem .45rem; border-radius:999px; border:1px solid var(--border);
  color:#E7EAF3; background:#12172A;
}
.chip.alg{ background:#ecfeff; border-color:#a5f3fc }
.chip.cal{ background:#f0f9ff; border-color:#bae6fd }
.chip.phy{ background:#fefce8; border-color:#fde68a }
.chip.chem{ background:#fef2f2; border-color:#fecaca }
.chip.sat{ background:#f0fdf4; border-color:#bbf7d0 }
.chip.act{ background:#fdf4ff; border-color:#e9d5ff }


/* Make Desmos section wider than the default container */
.desmos-section .container{
  width: min(1200px,95%);
}


/* Make Desmos section wider than the default container */
.desmos-section > .container{
  width: min(1400px,95%);
}