@font-face{font-family:"Ahrefs";src:url("fonts/ahrefs_regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ahrefs";src:url("fonts/ahrefs_bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-regular.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#0b0b0c; --ink-2:#26262a; --grey:#6c6c70; --muted:#5e5e62; --body:#333336; --line:#c9c9cd;
  --card:#f7f7f7; --blue:#3a57fc; --dark:#111111; --black:#0b0b0c; --orange:#ff8d00; --orange-hover:#f07f00;
  --display:"Ahrefs",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-ctl:4px; --r-card:6px;
  --pad:clamp(20px,3.75vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/27px var(--text);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance}
.sr-only,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{width:min(1184px,100% - 2*var(--pad));margin-inline:auto}

/* Header */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:block;width:123px;flex:none}
.nav__links{display:flex;align-items:center;gap:32px;font:400 18px/25px var(--display)}
.nav__links a{text-decoration:none;color:#000;transition:color .2s}
.nav__links a:not(.nav__cta):hover{color:var(--grey)}
.nav__cta{font-weight:700;padding:6px 16px;border:1px solid rgba(0,0,0,.35);border-radius:var(--r-ctl);transition:border-color .2s,background .2s}
.nav__cta:hover{border-color:#000}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 24px;border:0;border-radius:var(--r-ctl);background:var(--orange);color:#fff;font:700 18px/25px var(--display);text-decoration:none;cursor:pointer;transition:background .2s var(--ease),transform .15s var(--ease)}
.btn:hover{background:var(--orange-hover)}
.btn:active{transform:translateY(1px)}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* Hero */
.hero{padding:clamp(32px,3.2vw,40px) 0 40px}
.hero .wrap{width:min(1200px,100% - 2*clamp(20px,3.2vw,40px))}
.hero__title{max-width:1020px;font-size:clamp(46px,7.8vw,100px);line-height:.92;letter-spacing:-.0367em;color:var(--ink-2)}
.hero__title span{display:block;color:var(--grey)}
.hero .btn{margin-top:32px}

/* Manifesto */
.manifesto__in{display:grid;grid-template-columns:1fr 1fr}
.manifesto__col{grid-column:2;max-width:492px;margin-left:-8px}
.label{font:400 20px/35px var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--grey);padding-bottom:16px}
.label--light{color:rgba(255,255,255,.8)}
.manifesto__lead{font:400 32px/35px var(--display);letter-spacing:-.5px;color:var(--ink);text-wrap:balance;padding-bottom:16px}
.manifesto__body{display:grid;gap:16px;color:var(--body)}

/* Books */
.books{padding:128px 0}
.h2{font-size:clamp(38px,4.6vw,58.9px);line-height:1.05;letter-spacing:-.03em;color:var(--ink);margin-bottom:40px}
.books__list{display:grid;gap:8px}
.book{display:grid;grid-template-columns:684fr 500fr;align-items:center;min-height:589px;border-radius:var(--r-card);overflow:hidden;background:var(--card);color:var(--ink)}
.book--flip{grid-template-columns:500fr 684fr}
.book--flip .book__stage{order:-1}
.book--blue{background:var(--blue);color:#fff}
.book--dark{background:var(--dark);color:#fff}
.book__info{display:flex;flex-direction:column;align-items:flex-start;padding:64px}
.book__meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font:400 16px/24px var(--display);color:var(--muted);margin-bottom:16px}
.book--blue .book__meta,.book--dark .book__meta{color:rgba(255,255,255,.8)}
.tag{background:#000;color:#fff;border-radius:2px;padding:2px 7px;line-height:21px}
.book__title{font-size:clamp(32px,3.4vw,43.5px);line-height:46px;letter-spacing:-.025em}
.book__tagline{margin-top:11px;font:400 20px/24px var(--display)}
.book__desc{margin:24px 0 16px;max-width:511px;color:#38383c}
.book--blue .book__desc,.book--dark .book__desc{color:rgba(255,255,255,.8)}
.book__author{font:400 17px/24px var(--display);color:var(--muted);margin-bottom:32px}
.book--blue .book__author,.book--dark .book__author{color:#fff}
.book__stage{display:grid;place-items:center;padding:64px 32px;height:100%}
.book__cover{width:auto;max-height:460px;transition:transform .6s var(--ease)}
.book--blue .book__cover{max-height:480px;filter:none}
.book--dark .book__cover{max-height:435px;filter:drop-shadow(0 28px 32px rgba(0,0,0,.45))}
.book:hover .book__cover{transform:translateY(-6px)}

/* Notify */
.notify{background:var(--black);color:#fff;padding:128px 0}
.notify__in{display:grid;grid-template-columns:699fr 408fr;gap:clamp(40px,6.5vw,77px);align-items:center}
.notify__copy .label{padding-bottom:16px}
.notify__title{max-width:600px;font:400 clamp(34px,4.6vw,58.9px)/1.05 var(--display);letter-spacing:-.03em;text-wrap:balance}
.notify__note{margin-top:16px;color:rgba(255,255,255,.8)}
.notify__card{background:#fff;color:var(--ink);border-radius:var(--r-card);padding:32px}
.form__label{display:block;font:400 21px/26px var(--display);margin-bottom:16px}
.form__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.form__input{min-height:48px;width:100%;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-ctl);font:400 17px var(--display);color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.form__input::placeholder{color:#8a8a8f}
.form__input:hover{border-color:#8a8a8f}
.form__input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,141,0,.35)}
.form.is-error .form__input{border-color:#d92d20}
.form__btn.is-loading{opacity:.7;cursor:progress}
.form__msg{min-height:24px;margin-top:4px;font-size:15px;line-height:24px;color:#d92d20}
.form__done{font:400 21px/1.35 var(--display)}

/* Footer */
.footer{background:#fff;color:var(--grey);border-top:1px solid #e6e6e9}
.footer__in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:32px 0;font:400 15px/24px var(--display)}
.footer a:not(.logo){color:var(--ink);text-decoration:none;transition:opacity .2s}
.footer a:not(.logo):hover{opacity:.7}

/* Tablet */
@media (max-width:1024px){
  .book,.book--flip{grid-template-columns:1fr 1fr;min-height:0}
  .book__info{padding:48px 40px}
  .book__cover{max-height:380px!important}
  .notify__in{grid-template-columns:1fr;gap:40px}
  .notify__card{max-width:560px}
}
/* Mobile */
@media (max-width:760px){
  .nav__links{gap:20px;font-size:16px}
  .nav__links a:not(.nav__cta){display:none}
  .hero{padding-bottom:64px}
  .manifesto__in{display:block}
  .manifesto__col{margin-left:0;max-width:none}
  .manifesto__lead{font-size:26px;line-height:30px}
  .books{padding:80px 0}
  .h2{margin-bottom:24px}
  .book,.book--flip{grid-template-columns:1fr}
  .book__stage,.book--flip .book__stage{order:-1;padding:40px 24px 0}
  .book__cover{max-height:300px!important}
  .book__info{padding:32px 24px}
  .book__title{line-height:1.1}
  .book__info .btn{width:100%;justify-content:center}
  .notify{padding:80px 0}
  .notify__card{padding:24px}
}
@media (max-width:420px){
  .form__row{grid-template-columns:1fr}
  .form__btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}