/* ============================================================
    — review.css
   ================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Sans:wght@300;400;500;600&family=DM+Mono:wght@300;400;500&display=swap');

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:      #0d0d0d;
  --ink-2:    #111113;
  --ink-3:    #18191c;
  --ink-4:    #1f2023;

  --rule:     rgba(255,255,255,0.07);
  --rule-b:   rgba(255,255,255,0.14);

  --cream:    #f5f0e8;
  --dim:      #9a969f;
  --ghost:    #565060;

  --coral:    #c8f542;
  --coral-lt: #d8f96e;
  --coral-dk: #9dc518;
  --coral-dim:rgba(200,245,66,0.10);
  --coral-glow:0 0 32px rgba(200,245,66,0.22),0 0 80px rgba(200,245,66,0.07);
  --coral-grad:linear-gradient(120deg,#c8f542 0%,#d8f96e 55%,#9dc518 100%);

  --fd:'Bebas Neue',sans-serif;
  --fb:'Instrument Sans',sans-serif;
  --fm:'DM Mono',monospace;

  --hh:64px;
  --r:6px;
  --rl:12px;
  --max:1140px;
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 48px)}

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--fb);
  font-size:1rem;
  line-height:1.7;
  overflow-x:hidden;
  cursor:crosshair;
}

a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}

::selection{background:var(--coral);color:#0a0a0a}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--coral);border-radius:2px}

/* ════════════════════════════════════════════
   HEADER
════════════════════════════════════════════ */
.site-header{
  position:fixed;inset:0 0 auto;
  z-index:1000;height:var(--hh);
  background:rgba(10,10,10,0.82);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-bottom:1px solid var(--rule);
  transition:border-color .4s,box-shadow .4s;
}
.site-header.scrolled{
  border-color:var(--rule-b);
  box-shadow:0 1px 0 var(--rule-b),0 8px 40px rgba(0,0,0,.7);
}
.header-container{
  width:100%;
  padding:0 2.5rem;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
}

/* Logo */
.logo-text{
  font-family:var(--fd);font-size:2.1rem;
  letter-spacing:.08em;line-height:1;
  position:relative;z-index:1201;
  color:var(--cream);
  transition:color .2s;
}
.logo-text span{color:var(--coral)}
.logo-text::after{
  content:'';display:block;
  height:2px;width:0;border-radius:2px;
  background:var(--coral-grad);
  transition:width .4s cubic-bezier(.16,1,.3,1);
}
.logo-text:hover::after{width:100%}

/* Hamburger */
.menu-toggle{
  display:flex;align-items:center;justify-content:center;
  background:none;
  border:1px solid var(--rule);
  color:var(--cream);
  width:42px;height:42px;
  border-radius:var(--r);
  cursor:pointer;font-size:0;
  position:relative;z-index:1201;
  flex-shrink:0;
  transition:border-color .2s,background .2s;
}
.menu-toggle:hover{border-color:var(--coral);background:var(--coral-dim)}
.menu-toggle::before,.menu-toggle::after,.menu-toggle .burger-mid{
  content:'';display:block;
  width:18px;height:1.5px;
  background:currentColor;border-radius:2px;
  position:absolute;
  left:50%;margin-left:-9px;
  transition:transform .35s,opacity .25s,top .35s;
}
.menu-toggle::before    {top:13px}
.menu-toggle .burger-mid{top:20px;opacity:1;transform:none}
.menu-toggle::after     {top:27px}
.menu-toggle.open::before    {transform:rotate(45deg);top:20px}
.menu-toggle.open .burger-mid{opacity:0;transform:scaleX(0)}
.menu-toggle.open::after     {transform:rotate(-45deg);top:20px}

/* Nav panel */
.nav{
  position:fixed;top:var(--hh);right:0;
  width:280px;
  background:#080809;
  border:1px solid var(--rule);border-top:none;
  border-radius:0 0 var(--rl) var(--rl);
  padding:1rem 0;
  transform:translateY(-16px);opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .28s;
  z-index:1200;
  box-shadow:0 40px 80px rgba(0,0,0,.9);
}
.nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
.nav ul{display:flex;flex-direction:column}
.nav ul li{border-bottom:1px solid var(--rule)}
.nav ul li:last-child{border-bottom:none}
.nav ul li a{
  font-family:var(--fm);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ghost);
  padding:.95rem 1.6rem;
  display:flex;align-items:center;gap:.8rem;
  position:relative;
  transition:color .2s,padding-left .28s,background .2s;
}
.nav ul li a:hover{
  color:var(--cream);
  padding-left:2.2rem;
  background:rgba(255,255,255,0.03);
}
.nav ul li a::before{
  content:'';
  width:4px;height:4px;border-radius:50%;
  background:var(--coral);flex-shrink:0;
  transform:scale(0);transition:transform .2s;
}
.nav ul li a:hover::before{transform:scale(1)}
.nav ul li a::after{
  content:attr(data-idx);
  font-family:var(--fm);font-size:.55rem;
  color:var(--ghost);opacity:.4;
  margin-left:auto;
}

/* Backdrop */
.nav-backdrop{
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.7);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
  backdrop-filter:blur(4px);
}
.nav-backdrop.open{opacity:1;pointer-events:auto}

/* ════════════════════════════════════════════
   PAGE HERO
════════════════════════════════════════════ */
.page-hero{
  padding-top:calc(var(--hh) + 3rem);
  padding-bottom:3rem;
  padding-left:2rem;padding-right:2rem;
  min-height:28vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  position:relative;overflow:hidden;
}

.page-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:120px 120px;
  mask-image:radial-gradient(ellipse 70% 100% at 50% 0%,black 0%,transparent 100%);
  pointer-events:none;
}

.page-hero::after{
  content:'';position:absolute;
  width:500px;height:300px;
  top:-100px;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(200,245,66,.04),transparent 70%);
  pointer-events:none;
}

.page-hero h2{
  font-family:var(--fd);
  font-size:clamp(3rem,8vw,7rem);
  letter-spacing:.03em;line-height:.92;
  color:var(--cream);
  position:relative;z-index:1;
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) forwards;
  opacity:0;
}

.page-hero .intro-text{
  max-width:500px;
  margin-top:1rem;
  font-size:.92rem;
  color:var(--dim);
  font-weight:300;
  line-height:1.8;
  position:relative;z-index:1;
  animation:fadeUp .9s .18s cubic-bezier(.16,1,.3,1) forwards;
  opacity:0;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to  {opacity:1;transform:translateY(0)}
}

/* ════════════════════════════════════════════
   FORM SECTION
════════════════════════════════════════════ */
.form-section{
  max-width:640px;
  margin:0 auto;
  padding:6rem 2rem 8rem;
}

.form-section h3.middle{
  font-family:var(--fd);
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:.06em;
  color:var(--cream);
  text-align:center;
  margin-bottom:2.8rem;
}

.form-section p.middle{
  font-family:var(--fm);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ghost);
  text-align:center;
  margin-top:2rem;
}

/* ── Form rows ──────────────────────────── */
form{display:flex;flex-direction:column;gap:1.4rem}

.form-row{
  display:flex;flex-direction:column;gap:.5rem;
}

.form-row label{
  font-family:var(--fm);
  font-size:.65rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--coral);
}

/* ── Toast notification ─────────────────── */
#toast{
  position:fixed;
  bottom:2.5rem;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink-3);
  border:1px solid rgba(200,245,66,.3);
  border-radius:var(--r);
  padding:.9rem 2rem;
  font-family:var(--fm);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--coral);
  box-shadow:0 8px 32px rgba(0,0,0,.5),var(--coral-glow);
  opacity:0;pointer-events:none;
  transition:opacity .4s,transform .4s;
  z-index:9999;
  white-space:nowrap;
}
#toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
@media(max-width:480px){
  #toast{font-size:.6rem;padding:.75rem 1.4rem;white-space:normal;text-align:center;width:88vw}
}

.form-row input,
.form-row textarea{
  background:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:var(--r);
  color:var(--cream);
  font-family:var(--fb);
  font-size:.95rem;
  padding:.85rem 1.1rem;
  width:100%;
  outline:none;
  transition:border-color .25s,box-shadow .25s,background .25s;
  resize:none;
  cursor:text;
}

.form-row input::placeholder,
.form-row textarea::placeholder{
  color:var(--ghost);
  font-size:.88rem;
}

.form-row input:focus,
.form-row textarea:focus{
  border-color:rgba(200,245,66,.4);
  background:var(--ink-4);
  box-shadow:0 0 0 3px rgba(200,245,66,.06),var(--coral-glow);
}

.form-row input:invalid:not(:placeholder-shown),
.form-row textarea:invalid:not(:placeholder-shown){
  border-color:rgba(255,60,60,.35);
}

.form-row textarea{
  min-height:140px;
  line-height:1.7;
}

/* ── Submit button ──────────────────────── */
.form-actions{
  margin-top:.4rem;
  display:flex;
  justify-content:flex-end;
}

.btn-submit{
  font-family:var(--fm);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--coral-grad);
  border:none;
  border-radius:var(--r);
  padding:.85rem 2.2rem;
  cursor:pointer;
  transition:opacity .25s,transform .25s,box-shadow .25s;
  font-weight:700;
}

.btn-submit:hover{
  opacity:.88;
  transform:translateY(-2px);
  box-shadow:var(--coral-glow);
}

.btn-submit:active{
  transform:translateY(0);
  opacity:1;
}

/* ════════════════════════════════════════════
   FOOTER  
════════════════════════════════════════════ */
footer{
  border-top:1px solid var(--rule);
  padding:3rem 2rem;
  background:var(--ink-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  text-align:center;
}

footer ul{
  display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;
}
footer ul li a{
  font-family:var(--fm);font-size:.65rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);
  transition:color .2s;
}
footer ul li a:hover{color:var(--coral)}
.footer-copy{
  font-size:.68rem;font-family:var(--fm);
  letter-spacing:.1em;
  color:var(--ghost);
  opacity:.75;font-weight:500;
}

/* ════════════════════════════════════════════
   SHIMMER KEYFRAME
════════════════════════════════════════════ */
@keyframes skShimmer{
  0%  {background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ════════════════════════════════════════════
   PAGE TRANSITION LOADER
════════════════════════════════════════════ */
#page-transition{
  position:fixed;inset:0;z-index:10000;
  background:var(--ink);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:1.6rem;
  opacity:0;pointer-events:none;
  transition:opacity .22s;
}
#page-transition.active{opacity:1;pointer-events:all}

.pt-spinner{
  width:36px;height:36px;
  border:2px solid var(--rule);
  border-top-color:var(--coral);
  border-radius:50%;
  animation:ptSpin .8s linear infinite;
}
@keyframes ptSpin{ to{transform:rotate(360deg)} }

.pt-bars{
  display:flex;flex-direction:column;gap:10px;
  width:min(280px,72vw);
}
.pt-bar{
  height:8px;border-radius:4px;
  background:linear-gradient(90deg,var(--ink-3) 25%,var(--ink-4) 50%,var(--ink-3) 75%);
  background-size:400% 100%;
  animation:skShimmer 1.3s infinite ease-in-out;
}
.pt-bar:nth-child(1){width:100%}
.pt-bar:nth-child(2){width:70%;animation-delay:.1s}
.pt-bar:nth-child(3){width:45%;animation-delay:.22s}
.pt-label{
  font-family:var(--fm);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ghost);opacity:.45;
}

/* ════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════ */
[data-reveal]{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
[data-reveal].revealed{
  opacity:1;
  transform:translateY(0);
}
[data-reveal]:nth-child(2){transition-delay:.1s}
[data-reveal]:nth-child(3){transition-delay:.2s}
[data-reveal]:nth-child(4){transition-delay:.3s}
[data-reveal]:nth-child(5){transition-delay:.4s}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media(max-width:640px){
  .header-container{padding:0 1.25rem}
  .nav{width:calc(100% - 2.5rem);right:1.25rem}
  .form-actions{justify-content:stretch}
  .btn-submit{width:100%;text-align:center}
  .page-hero h2{font-size:clamp(2.4rem,10vw,4rem)}
}