/* =====================================================================
   PDFKing — Free Online PDF Tools (backlink resource page)
   Concept : "The Royal Rail" — dark hero with a kinetic word-by-word
             headline + self-drawing crown; signature is a PINNED
             HORIZONTAL RAIL (vertical scroll slides the four tool
             families sideways); a full crawlable tool index; and a
             cursor-spotlight bento grid.
   Type    : Plus Jakarta Sans (display) / Space Mono (labels) / system.
   Logo    : wordmark aspect ratio is ~4.23:1 — all logo boxes match it
             exactly so the mark never distorts.
   ===================================================================== */

:root {
  --navy:      #0a1426;
  --navy-2:    #101d38;
  --ink:       #16233f;
  --ink-soft:  #46536e;
  --ink-faint: #8b96ad;
  --paper:     #f4f6fb;
  --surface:   #ffffff;
  --line:      #dde4f2;
  --line-dark: rgba(255,255,255,.1);

  --royal:     #1157d8;
  --royal-lt:  #6ea8ff;
  --royal-deep:#0c3fa0;

  --shadow-sm: 0 1px 2px rgba(10,20,38,.06), 0 6px 18px rgba(10,20,38,.06);
  --shadow-md: 0 14px 34px rgba(10,20,38,.12);
  --shadow-lg: 0 30px 64px rgba(10,20,38,.2);

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.62; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.12; letter-spacing:-.015em; }
p,ul{ margin:0; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; position:relative; }
.skip-link{ position:absolute; left:12px; top:-60px; background:var(--royal); color:#fff; padding:10px 16px; border-radius:8px; z-index:100; transition:top .2s var(--ease); }
.skip-link:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--royal-lt); outline-offset:3px; border-radius:4px; }

.progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:90; }
.progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--royal),var(--royal-lt)); }

.eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--royal-deep); margin-bottom:14px; }
.section-head{ max-width:660px; margin-bottom:38px; }
.section-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,4.2vw,2.5rem); }
.section-sub{ color:var(--ink-soft); margin-top:12px; }

.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:.96rem; padding:13px 24px; border-radius:12px; text-decoration:none; border:1.5px solid transparent; transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); }
.btn--solid{ background:var(--royal); color:#fff; box-shadow:0 10px 24px rgba(17,87,216,.32); }
.btn--solid:hover{ background:var(--royal-deep); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line-dark); color:#e7edf9; font-size:.88rem; }
.btn--ghost:hover{ border-color:var(--royal-lt); transform:translateY(-2px); }
.btn--text{ color:#dbe4f5; padding-inline:4px; }
.btn--text:hover{ color:var(--royal-lt); }
.btn--lg{ padding:15px 30px; font-size:1.02rem; }

/* brand logo — fixed aspect box so the wordmark never squashes */
.brand{ display:inline-flex; align-items:center; }
.brand__logo{ height:34px; width:auto; aspect-ratio:816 / 193; object-fit:contain; }

/* topbar over dark hero */
.topbar{ position:sticky; top:3px; z-index:60; background:rgba(10,20,38,.72); backdrop-filter:saturate(1.2) blur(12px); border-bottom:1px solid var(--line-dark); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; height:66px; }

/* hero */
.hero{ position:relative; background:radial-gradient(80% 90% at 70% -10%, #14306b 0%, var(--navy-2) 45%, var(--navy) 100%); color:#eef2fb; overflow:hidden; padding:clamp(60px,8vw,104px) 0 clamp(56px,7vw,88px); }
.hero__grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(70% 60% at 50% 28%, #000 40%, transparent 100%); mask-image:radial-gradient(70% 60% at 50% 28%, #000 40%, transparent 100%); pointer-events:none; }
.hero__inner{ text-align:center; max-width:840px; margin-inline:auto; }
.hero__crown{ width:56px; height:auto; color:var(--royal-lt); margin:0 auto 12px; }
.hero__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,5.6vw,3.7rem); color:#fff; }
.hero__title .w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.hero__title .w > span{ display:inline-block; transform:translateY(110%); transition:transform .7s var(--ease); }
.hero__title.is-in .w > span{ transform:translateY(0); }
.hero__lede{ color:#b9c6e2; font-size:1.08rem; max-width:60ch; margin:20px auto 0; }
.hero__actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin-top:28px; }
.hero__stats{ list-style:none; padding:0; display:flex; justify-content:center; gap:clamp(28px,6vw,64px); margin-top:44px; }
.hero__stats li{ display:grid; justify-items:center; gap:2px; }
.stat{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,4vw,2.4rem); color:var(--royal-lt); }
.stat__label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#7c89a6; }

/* ---- pinned horizontal rail ---- */
.railzone{ height:340vh; background:var(--navy); }
.railzone__pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
.rail{ display:flex; gap:clamp(18px,3vw,36px); padding-inline:max(20px, calc((100vw - var(--wrap)) / 2)); will-change:transform; }
.panel{
  flex:0 0 auto; width:min(84vw, 760px);
  background:var(--navy-2); border:1px solid var(--line-dark); border-radius:22px;
  padding:clamp(26px,4vw,46px); color:#e8edf8;
  box-shadow:var(--shadow-lg);
}
.panel__num{ font-family:var(--font-mono); font-size:.8rem; color:var(--royal-lt); border:1px solid var(--line-dark); border-radius:8px; padding:4px 10px; }
.panel__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3.4vw,2.2rem); margin:14px 0 8px; color:#fff; }
.panel__text{ color:#a9b6d3; max-width:52ch; margin-bottom:22px; }
.panel__tools{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.panel__tools a{ display:inline-block; text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:.92rem; background:rgba(110,168,255,.12); color:#cfe0ff; border-radius:999px; padding:9px 16px; transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.panel__tools a:hover{ background:var(--royal); color:#fff; transform:translateY(-2px); }
.rail__dots{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; gap:10px; }
.dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22); transition:background .25s var(--ease), transform .25s var(--ease); }
.dot.is-on{ background:var(--royal-lt); transform:scale(1.3); }

/* ---- full tool index ---- */
.index-sec{ padding:clamp(60px,8vw,100px) 0; }
.index-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tool{
  display:flex; flex-direction:column; gap:3px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.tool span{ font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink); }
.tool small{ color:var(--ink-faint); font-size:.82rem; }
.tool:hover{ transform:translateY(-3px); border-color:#c3d0ea; box-shadow:var(--shadow-sm); }
.tool:hover span{ color:var(--royal-deep); }

/* ---- spotlight bento ---- */
.bento-sec{ padding:clamp(56px,8vw,96px) 0; background:var(--surface); border-block:1px solid var(--line); }
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cell{
  --mx:50%; --my:50%;
  position:relative; grid-column:span 1;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:24px 22px; overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cell--wide{ grid-column:span 2; }
.cell:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.cell::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(240px circle at var(--mx) var(--my), rgba(17,87,216,.10), transparent 65%); transition:opacity .25s var(--ease); }
.cell:hover::before{ opacity:1; }
.cell h3{ font-family:var(--font-display); font-weight:800; font-size:1.06rem; margin-bottom:8px; }
.cell p{ color:var(--ink-soft); font-size:.94rem; }

/* faq */
.faq{ padding:clamp(56px,8vw,96px) 0; }
.faq__grid{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(32px,5vw,60px); align-items:start; }
.faq__intro .btn{ margin-top:20px; }
.faq__list{ display:grid; gap:12px; }
.qa{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:0 20px; transition:border-color .2s var(--ease); }
.qa[open]{ border-color:#c3d0ea; box-shadow:var(--shadow-sm); }
.qa summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:17px 0; font-family:var(--font-display); font-weight:700; font-size:1.02rem; }
.qa summary::-webkit-details-marker{ display:none; }
.qa__mark{ position:relative; flex:none; width:15px; height:15px; }
.qa__mark::before,.qa__mark::after{ content:""; position:absolute; background:var(--royal); border-radius:2px; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.qa__mark::before{ top:6.5px; left:0; width:15px; height:2px; }
.qa__mark::after{ top:0; left:6.5px; width:2px; height:15px; }
.qa[open] .qa__mark::after{ transform:rotate(90deg); opacity:0; }
.qa p{ color:var(--ink-soft); padding-bottom:17px; }

/* cta */
.cta{ padding:clamp(60px,9vw,110px) 0; background:linear-gradient(150deg,var(--navy) 0%, #12306b 100%); color:#fff; text-align:center; }
.cta__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,4.8vw,3rem); }
.cta__text{ color:#c2cde6; margin:14px auto 28px; max-width:46ch; }

/* footer */
.foot{ background:#060d1b; color:#c2cbdf; padding:52px 0 26px; }
.foot__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:30px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.08); }
.foot__tag{ margin-top:12px; color:#8a94ac; max-width:30ch; font-size:.94rem; }
.foot__head{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#707b95; margin-bottom:13px; }
.foot__nav{ display:grid; gap:9px; align-content:start; }
.foot__nav a{ text-decoration:none; color:#c2cbdf; width:max-content; transition:color .16s var(--ease); }
.foot__nav a:hover{ color:var(--royal-lt); }
.foot__base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:20px; font-size:.84rem; color:#7d879f; }
.foot__base a{ color:#c2cbdf; }

/* reveal */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.bento .cell:nth-child(2){ transition-delay:.05s; }
.bento .cell:nth-child(3){ transition-delay:.1s; }
.bento .cell:nth-child(5){ transition-delay:.05s; }

/* responsive */
@media (max-width:1000px){
  .index-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .bento{ grid-template-columns:1fr 1fr; }
  .cell--wide{ grid-column:span 2; }
  .faq__grid{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1/-1; }
  /* rail fallback: vertical stack, no pin */
  .railzone{ height:auto; background:var(--navy); padding:56px 0; }
  .railzone__pin{ position:static; height:auto; overflow:visible; display:block; }
  .rail{ flex-direction:column; transform:none !important; padding-inline:20px; }
  .panel{ width:100%; }
  .rail__dots{ display:none; }
}
@media (max-width:600px){
  .topbar__cta{ display:none; }
  .index-grid{ grid-template-columns:1fr 1fr; }
  .bento{ grid-template-columns:1fr; }
  .cell--wide{ grid-column:span 1; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:420px){
  .index-grid{ grid-template-columns:1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__title .w > span{ transform:none; }
  .railzone{ height:auto; padding:56px 0; }
  .railzone__pin{ position:static; height:auto; overflow:visible; display:block; }
  .rail{ flex-direction:column; transform:none !important; padding-inline:20px; }
  .panel{ width:100%; }
  .rail__dots{ display:none; }
  .cell::before{ display:none; }
}