@font-face { font-family:"HN Roman"; src:url("assets/fonts/helvetica-neue-roman.woff2") format("woff2"), url("assets/fonts/helvetica-neue-roman.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"HN Black Extended"; src:url("assets/fonts/helvetica-black-extended.woff2") format("woff2"), url("assets/fonts/helvetica-black-extended.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Editorial Today"; src:url("assets/fonts/editorial-today.woff2") format("woff2"), url("assets/fonts/editorial-today.ttf") format("truetype"); font-display:swap; }

:root {
  --paper:#fcfaee;
  --acid:#ffcf06;
  --pad:clamp(22px,4vw,68px);
  --sans:"HN Roman","Helvetica Neue",Arial,sans-serif;
  --display:"HN Black Extended","Arial Black",sans-serif;
  --serif:"Editorial Today","Times New Roman",serif;
}

* { box-sizing:border-box; }
html { min-height:100%; scroll-behavior:smooth; background:#050506; }
body { min-height:100%; margin:0; overflow-x:hidden; color:var(--paper); background:#050506; font-family:var(--sans); }
body::before { display:none; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::selection { color:#050506; background:var(--acid); }


html.is-entering.is-revealing::before { animation:ai-yellow-reveal .55s .12s both ease-out; }
@keyframes ai-yellow-reveal { from { opacity:1; } to { opacity:0; } }

.ai-page { position:relative; z-index:1; min-height:100svh; padding:28px var(--pad) 45px; }
.ai-page__top { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.22); font-size:8px; font-weight:800; letter-spacing:.12em; }
.ai-page__brand { transition:color .25s ease; }.ai-page__brand:hover { color:var(--acid); }
.ai-page__back { font-size:8px; font-weight:900; letter-spacing:.1em; }
.ai-page__back i { display:inline-block; margin-left:8px; font-size:16px; font-style:normal; transition:transform .35s; }.ai-page__back:hover i { transform:rotate(90deg); }

.ai-page__head { display:grid; grid-template-columns:.45fr 1.4fr .55fr; gap:4vw; align-items:end; padding:clamp(65px,10vh,125px) 0 clamp(70px,10vh,120px); }
.ai-page__head > span { align-self:start; color:#85818e; font-size:8px; font-weight:800; letter-spacing:.12em; }
.ai-page__head h1 { margin:0; font-family:var(--display); font-size:clamp(3rem,5.35vw,6.35rem); font-weight:400; line-height:.86; letter-spacing:-.055em; }
.ai-page__head h1 em { display:block; margin-top:.06em; font-family:var(--serif); font-size:.93em; font-weight:400; line-height:.94; letter-spacing:-.012em; }
.ai-page__head p { margin:0; color:#aaa5b4; font-family:var(--serif); font-size:clamp(12px,1.1vw,17px); font-style:italic; line-height:1.3; }

.ai-tools__group { display:grid; grid-template-columns:.45fr 1.55fr; gap:4vw; padding:34px 0 50px; border-top:1px solid rgba(255,255,255,.2); content-visibility:auto; contain-intrinsic-size:300px; }
.ai-tools__group h2 { margin:0; color:#777381; font-size:8px; letter-spacing:.13em; }
.ai-tools__grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.ai-tool { min-width:0; padding:18px 8px 13px; contain:layout paint style; border:1px solid rgba(255,255,255,.16); text-align:center; background:transparent; transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s; }
.ai-tool i { position:relative; display:grid; width:clamp(48px,5vw,72px); aspect-ratio:1; margin:0 auto 14px; place-items:center; font-style:normal; }
.ai-tool i::before { display:none; }
.ai-tool i img { width:72%; height:72%; object-fit:contain; filter:none; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.ai-tool span { display:block; overflow:hidden; font-size:9px; font-weight:800; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.ai-tool:hover { z-index:2; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.045); transform:translateY(-5px); }
.ai-tool:hover i img { transform:scale(1.08); }
.ai-page__foot { display:flex; justify-content:space-between; margin-top:70px; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); color:#777381; font-size:8px; font-weight:800; letter-spacing:.1em; }

@media (max-width:800px) {
  .ai-page { padding:20px 20px 35px; }
  .ai-page__top { line-height:1.4; }.ai-page__brand { max-width:48%; }.ai-page__back { max-width:48%; text-align:right; }
  .ai-page__head { display:block; padding:70px 0 65px; }.ai-page__head > span { display:block; margin-bottom:25px; }.ai-page__head h1 { font-size:clamp(2.55rem,9.2vw,4rem); }.ai-page__head h1 em { letter-spacing:-.006em; line-height:1; }.ai-page__head p { max-width:280px; margin-top:30px; }
  .ai-tools__group { display:block; contain-intrinsic-size:600px; }.ai-tools__group h2 { margin-bottom:18px; }.ai-tools__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.ai-tool span { font-size:8px; }
  .ai-page__foot { gap:20px; line-height:1.4; }.ai-page__foot span:last-child { text-align:right; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  html.is-entering::before { display:none; }
  *,*::before,*::after { transition-duration:.01ms !important; }
}