/* LPOINT — hand-written styles that sit on top of site.css.
   site.css is the compiled Tailwind stylesheet from the original design: it only
   contains the utility classes already used on the site. If you add a Tailwind
   class that does not exist yet, add a plain CSS rule for it here instead. */

[hidden] { display: none !important; }

/* Shared button base (used as class="btn ..." together with colour/size utilities) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.btn svg { pointer-events: none; width: 1rem; height: 1rem; flex-shrink: 0; }
.btn[disabled] { pointer-events: none; opacity: .5; }

/* Floating Internship / WhatsApp buttons */
.float-btn {
  position: fixed;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 50px;
  color: #fff;
  font: 700 13px/1 Inter, sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.float-btn:hover { transform: scale(1.05); }
.float-btn--red { background: #c53030; box-shadow: 0 4px 20px rgba(197, 48, 48, .35); }
.float-btn--red:hover { background: #9b2c2c; }
.float-btn--green { background: #0b7a3b; box-shadow: 0 4px 20px rgba(37, 211, 102, .35); }
.float-btn--green:hover { background: #08602e; }

/* Form controls (Get Started / Enrollment) */
.field {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: .5rem .75rem;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: .875rem;
}
textarea.field { height: auto; min-height: 7rem; resize: vertical; }
select.field { appearance: auto; }
.field:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.field-label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; color: hsl(var(--foreground)); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: .75rem; padding: 1rem 1.25rem; font-size: .9rem; margin-bottom: 1.5rem; }
.alert--ok { background: #ecfdf3; border: 1px solid #abefc6; color: #05603a; }
.alert--err { background: #fef3f2; border: 1px solid #fecdca; color: #b42318; }

/* Internship duration tabs */
.tab-btn { flex: 1; padding: .6rem 1rem; border-radius: .4rem; font-weight: 600; font-size: .9rem; color: hsl(var(--muted-foreground)); background: transparent; border: 0; cursor: pointer; }
.tab-btn[aria-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* Utilities used by the PHP pages that the compiled site.css does not include */
.gap-x-4 { column-gap: 1rem; }
.gap-y-1 { row-gap: .25rem; }
.pt-40 { padding-top: 10rem; }
.pb-32 { padding-bottom: 8rem; }
.underline { text-decoration: underline; }
@media (min-width: 640px) { .sm\:p-8 { padding: 2rem; } }
@media (min-width: 640px) { .sm\:p-6 { padding: 1.5rem; } .sm\:gap-6 { gap: 1.5rem; } }

/* Advanced Learning banner (home page, Education section) */
.al-banner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:0 auto 48px;max-width:1100px;padding:22px 28px;border-radius:16px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-left:6px solid hsl(var(--primary));box-shadow:0 6px 24px rgba(15,23,42,.06);text-decoration:none;transition:box-shadow .2s,border-color .2s}
.al-banner:hover{border-color:hsl(var(--primary) / .5);box-shadow:0 12px 32px rgba(15,23,42,.1)}
.al-banner__tag{flex-shrink:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--primary));background:hsl(var(--primary) / .1);border:1px solid hsl(var(--primary) / .3);padding:6px 12px;border-radius:999px}
.al-banner__body{flex:1 1 360px;display:flex;flex-direction:column;gap:4px}
.al-banner__body strong{font-size:18px;color:hsl(var(--foreground));line-height:1.35}
.al-banner__body span{font-size:14px;color:hsl(var(--muted-foreground))}
.al-banner__cta{flex-shrink:0;font-weight:600;font-size:14px;color:hsl(var(--primary-foreground));background:hsl(var(--primary));padding:10px 18px;border-radius:8px}
.al-banner:hover .al-banner__cta{filter:brightness(1.08)}

/* Site map page (/site-map) */
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:32px}
.sitemap-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.sitemap-list a{color:hsl(var(--primary));font-weight:500}
.sitemap-list a:hover{text-decoration:underline}

/* Home page: Advanced Learning tracks (Education section) */
.al-tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:24px}
.al-track{--c:hsl(var(--primary));background:hsl(var(--card));border:1px solid hsl(var(--border));border-top:5px solid var(--c);border-radius:16px;padding:24px;box-shadow:0 6px 24px rgba(15,23,42,.05);display:flex;flex-direction:column}
.al-track--beginner{--c:#16a34a}.al-track--intermediate{--c:#2f5bea}.al-track--advanced{--c:#7c3aed}
.al-track__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.al-track__head span{font-size:20px;font-weight:800;color:hsl(var(--foreground))}
.al-track__head small{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c)}
.al-track__desc{margin:6px 0 16px;font-size:14px;color:hsl(var(--muted-foreground))}
.al-track__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.al-track__list a{display:block;padding:12px 14px;border:1px solid hsl(var(--border));border-radius:12px;text-decoration:none;transition:border-color .2s,background .2s}
.al-track__list a:hover{border-color:var(--c);background:hsl(var(--secondary) / .5)}
.al-track__list b{display:block;font-size:15px;line-height:1.35;color:hsl(var(--foreground))}
.al-track__list span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:hsl(var(--muted-foreground))}
.al-tracks__cta{text-align:center;margin:0 0 48px}

/* ===================== Scroll motion (assets/js/motion.js) ===================== */
/* Reveal: only hidden once the script has started (html.motion), so content never disappears without JS */
html.motion .rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--rv-delay,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--rv-delay,0ms)}
html.motion .rv.in{opacity:1;transform:none}

/* Process: pinned section with stacking cards */
.hw{background:hsl(var(--background))}
.hw-track{position:relative}
.hw-sticky{max-width:1200px;margin:0 auto;padding:96px 24px;display:grid;gap:40px}
.hw-title{font-size:clamp(34px,4.4vw,56px);line-height:1.08;font-weight:800;letter-spacing:-.02em;color:hsl(var(--foreground));margin:0 0 16px}
.hw-intro{font-size:17px;line-height:1.7;color:hsl(var(--muted-foreground));max-width:460px;margin:0 0 28px}
.hw-steps{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:6px;max-width:440px}
.hw-steps button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;font-size:15px;font-weight:500;color:hsl(var(--muted-foreground));background:none;border:0;border-radius:12px;padding:11px 12px;cursor:pointer;transition:background .3s,color .3s}
.hw-steps button:hover{color:hsl(var(--foreground))}
.hw-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:12px;font-weight:800;border:1.5px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--muted-foreground));transition:all .3s}
.hw-steps button.is-done .hw-num{border-color:hsl(var(--primary) / .5);color:hsl(var(--primary))}
.hw-steps button.is-active{background:hsl(var(--primary) / .08);color:hsl(var(--foreground));font-weight:700}
.hw-steps button.is-active .hw-num{background:hsl(var(--primary));border-color:hsl(var(--primary));color:#fff;box-shadow:0 6px 16px hsl(var(--primary) / .35)}
.hw-stage{display:grid;gap:20px}
.hw-card{position:relative;overflow:hidden;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:24px;padding:36px 36px 32px;box-shadow:0 24px 60px rgba(15,23,42,.10)}
.hw-card__top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.hw-badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:hsl(var(--primary));color:#fff;font-size:13px;font-weight:800}
.hw-chip{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--primary));background:hsl(var(--primary) / .08);border:1px solid hsl(var(--primary) / .25);padding:5px 12px;border-radius:999px}
.hw-card h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15;font-weight:800;letter-spacing:-.01em;color:hsl(var(--foreground));margin:0 0 14px}
.hw-card p{font-size:16px;line-height:1.75;color:hsl(var(--muted-foreground));margin:0 0 22px}
.hw-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hw-card li{position:relative;padding-left:28px;font-size:15px;color:hsl(var(--foreground))}
.hw-card li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:hsl(var(--primary) / .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
.hw-ghost{position:absolute;right:22px;bottom:-18px;font-size:150px;font-weight:900;line-height:1;color:hsl(var(--primary) / .05);pointer-events:none;user-select:none}

@media (min-width:1024px){
  html.motion .hw-track{height:calc(100vh + (var(--hw-steps) - 1) * 75vh)}
  html.motion .hw-sticky{position:sticky;top:64px;height:calc(100vh - 64px);padding:40px 32px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:56px}
  html.motion .hw-stage{position:relative;height:min(470px,calc(100vh - 160px));display:block}
  html.motion .hw-card{position:absolute;inset:0;transform-origin:left center;will-change:transform;transition:box-shadow .4s}
  html.motion .hw-card:not(:first-child){transform:translateX(115%)}
  html.motion .hw-card.is-covered{box-shadow:0 10px 30px rgba(15,23,42,.06)}
  html.motion .hw-stage{overflow:visible}
  html.motion .hw{overflow:clip}
}
/* without motion (or on phones) the steps are a normal list of cards */
@media (min-width:1024px){
  html:not(.motion) .hw-sticky{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
}

/* Stack: product cards stick under the menu, the covered one shrinks */
.stack-img{height:clamp(190px,21vw,250px);overflow:hidden;border-bottom:1px solid hsl(var(--border))}
.stack-img img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform}
@media (min-width:768px){
  html.motion .stack{display:grid;gap:28px}
  html.motion .stack > *{margin-top:0 !important}
  html.motion .stack-card{position:sticky;top:88px;transform-origin:center top;will-change:transform;box-shadow:0 -10px 40px rgba(15,23,42,.06)}
}
/* phones and tablets: the cards are already in order, so the step list is not needed */
@media (max-width:1023px){.hw-steps{display:none}.hw-sticky{padding:72px 16px}.hw-card{padding:28px 22px 26px}.hw-ghost{font-size:110px}}

/* ===================== Projects: 3D fan gallery (motion.js) ===================== */
article[id]{scroll-margin-top:96px}
.fan{padding:8px 0 40px}
.fan-sticky{padding:0 16px}
.fan-stage{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 20px;-webkit-overflow-scrolling:touch}
.fan-card{flex:0 0 82%;scroll-snap-align:center;display:flex;flex-direction:column;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(15,23,42,.12);text-decoration:none;color:inherit}
.fan-img{display:block;aspect-ratio:960/520;overflow:hidden;background:hsl(var(--secondary))}
.fan-img img{display:block;width:100%;height:100%;object-fit:cover}
.fan-body{display:flex;flex-direction:column;gap:4px;padding:16px 20px 20px}
.fan-tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--primary));background:hsl(var(--primary) / .08);border:1px solid hsl(var(--primary) / .25);padding:4px 10px;border-radius:999px;margin-bottom:4px}
.fan-body b{font-size:20px;font-weight:800;color:hsl(var(--foreground))}
.fan-body > span:last-child{font-size:14px;color:hsl(var(--muted-foreground))}
.fan-dots{display:none;justify-content:center;gap:10px;margin-top:8px}
.fan-dots button{width:10px;height:10px;border-radius:999px;border:0;padding:0;background:hsl(var(--border));cursor:pointer;transition:width .3s,background .3s}
.fan-dots button.is-active{width:30px;background:hsl(var(--primary))}
.fan-hint{text-align:center;font-size:13px;color:hsl(var(--muted-foreground));margin:14px 0 0}

@media (min-width:900px){
  html.motion .fan-track{height:calc(100vh + (var(--fan-n) - 1) * 55vh)}
  html.motion .fan-sticky{position:sticky;top:64px;height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  html.motion .fan-stage{position:relative;display:block;overflow:visible;height:min(470px,calc(100vh - 220px));perspective:1600px;padding:0}
  html.motion .fan-card{position:absolute;left:50%;top:0;width:min(560px,46vw);margin-left:calc(min(560px,46vw) / -2);transform-origin:center 120%;will-change:transform,opacity;transition:box-shadow .3s}
  html.motion .fan-card.is-front{box-shadow:0 30px 80px rgba(15,23,42,.22)}
  html.motion .fan-card.is-front:hover{box-shadow:0 34px 90px hsl(var(--primary) / .25)}
  html.motion .fan-dots{display:flex}
}
.fan-hint--wide{display:none}
@media (min-width:900px){html.motion .fan-hint--wide{display:inline}html.motion .fan-hint--narrow{display:none}}

/* Certificate check (/verify) */
.vf-form{display:flex;gap:10px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:14px;padding:8px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.vf-form input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:17px;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;color:hsl(var(--foreground))}
.vf-form input::placeholder{text-transform:none;letter-spacing:0;color:hsl(var(--muted-foreground))}
.vf-form:focus-within{border-color:hsl(var(--primary) / .5);box-shadow:0 0 0 4px hsl(var(--primary) / .1)}
.vf-form button{flex:none;border:0;border-radius:10px;background:hsl(var(--primary));color:#fff;font:inherit;font-weight:700;padding:0 26px;cursor:pointer}
.vf-form button:hover{filter:brightness(1.08)}
.vf-result{margin-top:24px;border-radius:16px;padding:22px 24px;border:1px solid}
.vf-result b{display:block;font-size:17px;margin-bottom:6px}
.vf-result p{margin:0;color:hsl(var(--muted-foreground));line-height:1.6}
.vf-result a{color:hsl(var(--primary));font-weight:600}
.vf-result--bad{background:#fef2f2;border-color:#fecaca}
.vf-result--bad b{color:#991b1b}
.vf-result--warn{background:#fffbeb;border-color:#fde68a}
.vf-result--ok{background:#f0fdf4;border-color:#bbf7d0;padding:0;overflow:hidden}
.vf-ok-head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid #bbf7d0}
.vf-ok-head b{color:#166534;margin:0}
.vf-ok-head span{font-size:14px;color:#15803d}
.vf-tick{flex:none;width:40px;height:40px;border-radius:50%;background:#16a34a;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.vf-details{margin:0;padding:8px 24px 18px;background:#fff}
.vf-details div{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid hsl(var(--border))}
.vf-details div:last-child{border-bottom:0}
.vf-details dt{font-size:14px;color:hsl(var(--muted-foreground))}
.vf-details dd{margin:0;font-weight:600;color:hsl(var(--foreground))}
@media (max-width:520px){.vf-details div{grid-template-columns:1fr;gap:2px}.vf-form button{padding:0 18px}}

/* ===== Phone motion (motion.js) ===== */
@media (max-width:1023px){
  /* process: the same pinned slide-in as desktop, in a compact single column */
  html.motion .hw{overflow:clip}
  html.motion .hw-track{height:calc(100vh + (var(--hw-steps) - 1) * 70vh);height:calc(100svh + (var(--hw-steps) - 1) * 70svh)}
  html.motion .hw-sticky{position:sticky;top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);display:flex;flex-direction:column;gap:14px;padding:18px 16px 16px}
  html.motion .hw-left > div:first-child{margin-bottom:10px}
  html.motion .hw-title{font-size:clamp(26px,7.4vw,34px);margin:0}
  html.motion .hw-intro,html.motion .hw-cta{display:none}
  html.motion .hw-steps{display:flex;gap:8px;margin:12px 0 0;max-width:none}
  html.motion .hw-steps li{flex:none}
  html.motion .hw-steps button{width:auto;padding:0;gap:0;font-size:0;background:none}
  html.motion .hw-steps .hw-num{font-size:12px;width:34px;height:34px}
  html.motion .hw-stage{position:relative;flex:1;min-height:0;display:block}
  html.motion .hw-card{position:absolute;inset:0;overflow:hidden;padding:22px 20px;transform-origin:left center;will-change:transform}
  html.motion .hw-card:not(:first-child){transform:translateX(115%)}
  html.motion .hw-card h3{font-size:22px;margin-bottom:10px}
  html.motion .hw-card p{font-size:15px;line-height:1.6;margin-bottom:14px}
  html.motion .hw-card li{font-size:14px}
  html.motion .hw-card__top{margin-bottom:12px}
}
@media (max-width:1023px) and (max-height:680px){
  html.motion .hw-card p{font-size:14px;line-height:1.5}
  html.motion .hw-ghost{display:none}
  html.motion .hw-title{font-size:24px}
}
@media (max-width:899px){
  html.motion .fan-card{transition:transform .25s ease-out,opacity .25s ease-out;will-change:transform}
  .fan-stage{padding-left:9%;padding-right:9%;scroll-padding:0 9%}
}