:root{--black:#060606;--off:#f2eee5;--acid:#dbff00;--line:rgba(255,255,255,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:white;font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input{font:inherit}

.site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:72px;background:rgba(5,5,5,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between;padding:0 4vw}
.header-logo{display:inline-flex;align-items:center;width:96px;line-height:0}.header-logo img{display:block;width:100%;height:auto}
.site-header nav{display:flex;align-items:center;gap:30px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.pill{border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:10px 16px}

.hero{position:relative;height:100svh;min-height:760px;overflow:hidden;background:radial-gradient(circle at 53% 46%,#373737 0,#161616 38%,#050505 78%);isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-4;opacity:.32;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),radial-gradient(circle at 20% 30%,#777 0 1px,transparent 1px),radial-gradient(circle at 70% 60%,#555 0 1px,transparent 1px);background-size:auto,14px 14px,19px 19px}
.student-collage{position:absolute;inset:0;z-index:2;background:url("../assets/images/student-collage-bg-final.png") center center / cover no-repeat;opacity:.50;mix-blend-mode:screen;filter:none}
.paper{position:absolute;background:var(--off);color:#060606;padding:20px 24px;border:1px solid #cfc9bd;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:4;overflow:hidden}
.paper:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(0deg,transparent 0 3px,#000 4px)}
.bg-note{display:none}
.b1{left:11%;top:14%;width:21%;height:14%;transform:rotate(-8deg)}
.b2{right:14%;top:18%;width:24%;height:22%;transform:rotate(5deg)}
.b3{left:37%;bottom:10%;width:22%;height:15%;transform:rotate(-3deg)}
.source{font-size:11px;font-weight:900;letter-spacing:.06em;display:block;margin-bottom:8px}.paper h2{font-family:Georgia,serif;margin:0;font-size:clamp(29px,2.45vw,50px);line-height:.94;letter-spacing:-.035em}.paper p{font-family:Georgia,serif;font-size:15px;line-height:1.18;margin:10px 0 0}
.p1{left:2.1%;top:12%;width:35%;transform:rotate(-4deg)}
.p2{left:3.8%;bottom:8.8%;width:38%;transform:rotate(2.3deg)}
.p3{right:8%;top:13%;width:34%;transform:rotate(3.4deg)}
.p4{right:1.6%;bottom:8%;width:30%;transform:rotate(-4deg)}
.p5{left:39%;bottom:-2%;width:24%;transform:rotate(1deg)}
.p6{left:26%;bottom:3.5%;width:30%;transform:rotate(-2deg)}
.big-stat{font-family:"Archivo Black",sans-serif;font-size:clamp(74px,7.8vw,142px);line-height:.75;letter-spacing:-.065em}.big-stat.small{font-size:clamp(70px,7vw,128px)}
.quote-card p{font-family:Georgia,serif;font-size:clamp(18px,1.5vw,26px);font-weight:700}

.ghost-photo{display:none}
.gp1{left:-1%;bottom:3%;width:19%;height:28%;transform:rotate(-2deg)}.gp2{right:24%;top:32%;width:15%;height:29%;transform:rotate(3deg)}.gp3{right:4%;bottom:2%;width:20%;height:24%;transform:rotate(-2deg)}

.brand-lockup{position:absolute;z-index:24;left:50%;top:50.5%;transform:translate(-50%,-50%) rotate(-2deg);width:min(58vw,1000px);text-align:center;pointer-events:none}.brand-lockup img{display:block;width:100%;height:auto;filter:drop-shadow(10px 12px 0 rgba(0,0,0,.28))}

.chat{position:absolute;z-index:38;background:#f7f7f4;color:#111;border-radius:14px;padding:10px 14px 10px 15px;box-shadow:0 12px 30px rgba(0,0,0,.3);font-size:14px;line-height:1.05;min-width:142px}.chat small{font-size:9px;color:#858585;margin-left:12px;float:right}.sent{background:#dfff99}.ch1{left:7.5%;top:58%;transform:rotate(-2deg)}.ch2{left:18%;top:66%;transform:rotate(1deg)}.ch3{left:27%;top:72%;transform:rotate(-1deg)}.ch4{right:12%;top:58%;transform:rotate(2deg)}.ch5{right:8%;top:68%;transform:rotate(-1deg)}.typing{right:17%;top:77%;min-width:72px;text-align:center}.typing i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#777;margin:0 2px}.typing small{float:none;margin-left:8px}
.hero-meta{position:absolute;z-index:45;left:2.2%;right:2.2%;bottom:18px;display:flex;justify-content:space-between;font-size:11px;font-weight:900;letter-spacing:.11em;color:#ddd}.hero-meta a{border-bottom:1px solid currentColor;padding-bottom:4px}

.pablo{min-height:68vh;display:grid;grid-template-columns:1.12fr .72fr;background:#080808;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pablo-portrait-wrap{position:relative;min-height:560px;background:#080808;overflow:hidden;border-right:1px solid var(--line)}
.pablo-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.pablo-copy{display:flex;flex-direction:column;justify-content:center;padding:6vw}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--acid);margin:0 0 16px}.pablo-copy h2{font-family:"Archivo Black",sans-serif;font-size:clamp(70px,7.2vw,118px);line-height:.82;letter-spacing:-.055em;margin:0 0 20px}.lead{font-family:Georgia,serif;font-size:22px;line-height:1.05;margin:0 0 15px}.body-copy{color:#bbb;font-size:14px;line-height:1.45;max-width:360px}.linkedin-link{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:22px;color:#fff;font-size:12px;font-weight:900;letter-spacing:.055em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.34);padding:0 0 7px;transition:border-color .2s ease,color .2s ease}
.linkedin-link:hover,.linkedin-link:focus-visible{color:var(--acid);border-color:var(--acid);outline:none}
.linkedin-icon{display:grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:3px;font-size:12px;line-height:1;font-weight:900;text-transform:none}
.external-arrow{font-size:16px;line-height:1;transform:translateY(-1px)}

.join-bar{background:#090909;color:white;min-height:118px;padding:26px 3vw;display:flex;align-items:center;gap:34px;border-top:1px solid rgba(255,255,255,.16)}
.join-bar h2{flex:1.25;font-family:"Archivo Black",sans-serif;font-size:clamp(34px,3.5vw,56px);letter-spacing:-.055em;line-height:.88;margin:0}
.join-bar p{flex:.6;font-size:12px;color:#ddd;margin:0;max-width:320px}
.join-bar form{flex:.9;display:grid;grid-template-columns:minmax(0,1fr) 58px;border:1px solid rgba(255,255,255,.28);height:52px;min-width:0;max-width:620px;width:100%}
.join-bar input{min-width:0;width:100%;background:transparent;border:0;outline:0;color:white;padding:0 15px}
.join-bar button{border:0;background:var(--acid);color:#111;font-size:26px;cursor:pointer}


@media (max-width:900px){
.site-header{height:60px;padding:0 16px}.site-header nav a:first-child{display:none}.site-header nav{gap:12px}.header-logo{width:82px}.pill{padding:8px 13px}
.hero{height:100svh;min-height:760px}.paper{padding:12px 14px}.paper h2{font-size:20px}.paper p{font-size:12px}.source{font-size:9px}.p1{left:-10%;top:10%;width:82%}.p2{left:-15%;bottom:7%;width:88%}.p3{right:-18%;top:18%;width:74%}.p4{right:-16%;bottom:8%;width:72%}.p5{display:none}.p6{display:none}.big-stat{font-size:64px}.brand-lockup{width:97vw;top:49%}.chat{font-size:12px;padding:8px 10px;min-width:118px}.ch1{left:3%;top:58%}.ch2{left:19%;top:65%}.ch3{left:6%;top:72%}.ch4{right:2%;top:59%}.ch5{right:3%;top:76%}.typing{display:none}.hero-meta{left:15px;right:15px}.ghost-photo,.bg-note,.student-collage{position:absolute;inset:0;z-index:2;background:url("../assets/images/student-collage-bg-final.png") center center / cover no-repeat;opacity:.50;mix-blend-mode:screen;filter:none}
.pablo{grid-template-columns:1fr}.pablo-portrait-wrap{min-height:54svh;border-right:0;border-bottom:1px solid var(--line)}.pablo-copy{padding:48px 20px 60px}.pablo-copy h2{font-size:76px}
.join-bar{display:grid;grid-template-columns:1fr;padding:26px 20px;gap:18px}.join-bar h2{font-size:47px}.join-bar p{max-width:none}.join-bar form{width:100%;max-width:none}

}
@media(max-width:520px){.hero{min-height:720px}.brand-lockup{width:96vw;top:49.5%}.pablo-copy h2{font-size:64px}.join-bar h2{font-size:40px}}


/* --- MOTION / DEPTH --- */
.hero{
  perspective: 1200px;
}
.parallax-layer{will-change:translate;translate:var(--px,0) var(--py,0)}
.student-collage{
  animation: collageDrift 18s ease-in-out infinite alternate;
  transform-origin:center center;
}
.brand-lockup{
  animation: logoBreathe 6.5s ease-in-out infinite;
  transform-origin:center center;
}
.chat{
  animation: chatFloat 5.5s ease-in-out infinite;
}
.ch2{animation-delay:.5s}
.ch3{animation-delay:1.1s}
.ch4{animation-delay:.8s}
.ch5{animation-delay:1.5s}
.typing{animation-delay:2s}
.paper{
  transition: filter .35s ease, box-shadow .35s ease;
}
.paper:hover{
  filter:brightness(1.03);
  box-shadow:0 26px 50px rgba(0,0,0,.62);
}

.reveal{
  opacity:0;
  animation: revealIn .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.p1{animation-delay:.05s}
.p3{animation-delay:.12s}
.p2{animation-delay:.18s}
.p4{animation-delay:.24s}
.p5{animation-delay:.3s}
.p6{animation-delay:.36s}
.ch1{animation-delay:.5s,0s}
.ch2{animation-delay:.65s,.5s}
.ch3{animation-delay:.8s,1.1s}
.ch4{animation-delay:.95s,.8s}
.ch5{animation-delay:1.1s,1.5s}
.typing{animation-delay:1.25s,2s}

.reveal-logo{
  opacity:0;
  animation: logoReveal .95s cubic-bezier(.16,.8,.24,1) .55s forwards,
             logoBreathe 6.5s ease-in-out 1.5s infinite;
}

@keyframes revealIn{
  from{opacity:0;filter:blur(6px)}
  to{opacity:1;filter:blur(0)}
}
@keyframes logoReveal{
  from{opacity:0;filter:blur(8px) drop-shadow(8px 10px 0 rgba(0,0,0,.18))}
  to{opacity:1;filter:blur(0) drop-shadow(10px 12px 0 rgba(0,0,0,.28))}
}
  to{opacity:1;filter:blur(0);scale:1}
}
@keyframes logoBreathe{
  0%,100%{filter:drop-shadow(10px 12px 0 rgba(0,0,0,.28))}
  50%{filter:drop-shadow(14px 16px 0 rgba(0,0,0,.35))}
}
  50%{filter:drop-shadow(15px 18px 0 rgba(0,0,0,.36));}
}
@keyframes chatFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}
@keyframes collageDrift{
  0%{background-position:47% 51%;scale:1.015}
  100%{background-position:53% 48%;scale:1.055}
}
  100%{background-position:52% 48%;scale:1.06}
}

@media (hover:none), (max-width:900px){
  .parallax-layer{--px:0!important;--py:0!important}
  .paper:hover{filter:none;box-shadow:0 18px 40px rgba(0,0,0,.55)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .parallax-layer,.student-collage,.brand-lockup,.chat,.reveal,.reveal-logo{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }
}


/* Logo anchor: never changes position with motion effects */
.brand-lockup{
  translate:none!important;
}

/* Stronger parallax polish */
.hero{
  perspective:1400px;
}
.chat{
  transition:box-shadow .25s ease;
}
.chat:hover{
  box-shadow:0 18px 38px rgba(0,0,0,.42);
}


/* --- LOGO INTEGRATION PASS --- */
@media (min-width: 901px){
  .brand-lockup{
    left:48.6%;
    top:53.2%;
    width:min(71vw,1240px);
    transform:translate(-50%,-50%) rotate(-2.8deg);
    z-index:26;
    isolation:isolate;
  }

  .brand-lockup img{
    opacity:.985;
    filter:
      drop-shadow(12px 16px 0 rgba(0,0,0,.22))
      saturate(1.04)
      contrast(1.02);
  }

  .brand-lockup::after{
    content:"";
    position:absolute;
    inset:5% 3% 8% 3%;
    pointer-events:none;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), transparent 58%),
      radial-gradient(circle at 50% 55%, rgba(0,0,0,.14), transparent 76%);
    mix-blend-mode:soft-light;
  }

  /* Bring selected elements above the logo so it feels embedded, not pasted */
  .p4{z-index:30;}
  .p6{z-index:32;}
  .ch3{z-index:41;}
  .ch4{z-index:39;}
}

/* Keep mobile stable */
@media (max-width: 900px){
  .brand-lockup{
    left:50%;
    top:49%;
  }
}

@media(max-width:900px){.pablo-portrait{object-position:center 22%}}


/* --- EMAIL SIGNUP / MYSQL --- */
.signup-wrap{flex:.9;min-width:0;max-width:620px;width:100%}
.signup-wrap form{width:100%;max-width:none}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.form-status{min-height:16px;margin:7px 0 0;font-size:11px;line-height:1.3;color:var(--acid)}
.privacy-note{margin:4px 0 0!important;max-width:none!important;font-size:9px!important;line-height:1.35!important;color:#8f8f8f!important}
.join-bar button:disabled{opacity:.68;cursor:wait}
@media(max-width:900px){.signup-wrap{width:100%;max-width:none}}

.privacy-link{text-decoration:underline;text-underline-offset:3px}.privacy-link:hover,.privacy-link:focus-visible{color:var(--acid);outline:none}