/* Shared look for the inner pages of ozyr.online (About, Portfolio, Privacy, Thanks): the same dark graphite + amber,
   sticky header and footer as the homepage (index.html keeps its own copy inline). Page-specific styles stay in each page. */
:root { --bg:#0C0C0E; --card:#141417; --card2:#18181C; --ink:#F4F4F5; --soft:#9A9AA3; --line:#24242A; --accent:#F5A524; --accent-ink:#1A1206 }
* { box-sizing:border-box; margin:0; padding:0 }
body { background:var(--bg); color:var(--ink); font-family:Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.55 }
a { color:inherit; text-decoration:none }
img { display:block; max-width:100%; height:auto }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 24px }
.narrow { max-width:820px }
.display { font-family:"Plus Jakarta Sans", sans-serif; font-weight:800; letter-spacing:-.035em; line-height:1.08 }
em { font-style:normal; color:var(--accent) }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; padding:13px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; white-space:nowrap; font-family:inherit }
.btn-primary { background:var(--accent); color:var(--accent-ink) }
.btn-primary:hover { background:#ffb83d }
.btn-ghost { border-color:var(--line); color:var(--ink); background:transparent }
.btn-ghost:hover { border-color:#3a3a42; background:var(--card) }
.eyebrow { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600 }

/* header (same as the homepage; links go back to its sections) */
.top { position:sticky; top:0; z-index:20; background:rgba(12,12,14,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line) }
.top .wrap { height:72px; display:flex; align-items:center; gap:28px }
.brand { display:flex; align-items:center; gap:11px; font-family:"Plus Jakarta Sans", sans-serif; font-weight:800; font-size:21px; letter-spacing:-.02em }
.brand b { color:var(--accent) }
.top nav { display:flex; gap:26px; font-size:15px; color:var(--soft); margin-left:auto }
.top nav a:hover, .top nav a[aria-current] { color:var(--ink) }
.top .btn { padding:10px 18px; font-size:14px }

/* page title block */
.page-head { position:relative; padding:80px 0 56px; overflow:hidden }
.page-head::before { content:""; position:absolute; left:50%; top:-260px; width:1000px; height:600px; transform:translateX(-50%); pointer-events:none;
                     background:radial-gradient(closest-side, rgba(245,165,36,.12), transparent) }
.page-head > .wrap { position:relative }
.page-head h1 { font-size:clamp(38px, 5.6vw, 64px); margin-top:14px }
.page-head p { color:var(--soft); font-size:clamp(17px, 1.5vw, 19px); margin-top:16px; max-width:680px }
section { padding:72px 0; border-top:1px solid var(--line) }

/* closing call to action */
.cta { text-align:center; padding:88px 0 }
.cta h2 { font-size:clamp(30px, 4vw, 44px) }
.cta p { color:var(--soft); font-size:18px; margin:14px auto 28px; max-width:560px }
.cta .row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* footer (same as the homepage) */
footer { border-top:1px solid var(--line) }
footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:28px; padding-bottom:32px; font-size:14px; color:var(--soft) }
footer nav { display:flex; gap:20px; flex-wrap:wrap }
footer nav a:hover, footer nav a[aria-current] { color:var(--ink) }

@media (max-width:960px) {
  .top nav { display:none }
  .top .btn { margin-left:auto }
  section { padding:56px 0 }
}
@media (max-width:560px) {
  .wrap { padding:0 16px }
  .page-head { padding:56px 0 40px }
  footer .wrap { flex-direction:column-reverse; align-items:flex-start }
}