/* ============================================================
   RAXZ.DESIGN — Final Build
   Reference: dan.danow.ski (layout/menu/background) — personalised
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg:        #FCFCFB;
  --bg2:       #F4F4F3;
  --bg3:       #EAEAE8;
  --surface:   #FFFFFF;
  --ink:       #14141A;
  --ink2:      #3D3D42;
  --muted:     #75757A;
  --faint:     #ACACAF;
  --acc:       #E63178;
  --acc-d:     #BF1560;
  --acc-s:     #FDE9F1;
  --line:      rgba(20,20,26,.09);
  --line2:     rgba(20,20,26,.14);
  --shadow-sm: 0 1px 3px rgba(20,20,26,.05), 0 3px 10px rgba(20,20,26,.04);
  --shadow-md: 0 4px 18px rgba(20,20,26,.07), 0 1px 3px rgba(20,20,26,.05);
  --shadow-lg: 0 14px 44px rgba(20,20,26,.10), 0 2px 6px rgba(20,20,26,.05);
  --nav-bg:    rgba(252,252,251,.90);

  --f-body: 'Google Sans', 'Google Sans Text', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --max: 1120px;
  --g: clamp(1.25rem,5vw,2.75rem);
  --ease: cubic-bezier(.16,1,.3,1);
  --r: 16px;
  --r-sm: 9px;
}

[data-theme="dark"] {
  --bg:        #0D0D10;
  --bg2:       #17171B;
  --bg3:       #202024;
  --surface:   #18181C;
  --ink:       #EFEEEC;
  --ink2:      #C6C4C0;
  --muted:     #87868C;
  --faint:     #4E4D52;
  --acc:       #F04585;
  --acc-d:     #D02563;
  --acc-s:     #26121B;
  --line:      rgba(255,255,255,.08);
  --line2:     rgba(255,255,255,.13);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.3);
  --shadow-md: 0 4px 18px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg: 0 14px 44px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --nav-bg:    rgba(13,13,16,.90);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0D0D10;--bg2:#17171B;--bg3:#202024;--surface:#18181C;
    --ink:#EFEEEC;--ink2:#C6C4C0;--muted:#87868C;--faint:#4E4D52;
    --acc:#F04585;--acc-d:#D02563;--acc-s:#26121B;
    --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.13);
    --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 3px 10px rgba(0,0,0,.3);
    --shadow-md:0 4px 18px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3);
    --shadow-lg:0 14px 44px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
    --nav-bg:rgba(13,13,16,.90);
  }
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;}}

body{
  font-family:var(--f-body); background:var(--bg); color:var(--ink);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
  transition:background .3s var(--ease), color .3s var(--ease);
}
main{flex:1;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--acc);color:#fff;}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--g);padding-right:var(--g);}

h1,h2,h3{font-family:var(--f-body);font-weight:900;letter-spacing:-.03em;line-height:1.05;}

/* Mono eyebrow — used for numbered section labels */
.eyebrow{
  font-family:var(--f-mono); font-size:.78rem; font-weight:500;
  color:var(--muted); letter-spacing:.01em;
  display:flex; align-items:center; flex-wrap:wrap; gap:.6em; margin-bottom:1.1rem;
}
.eyebrow .idx{ color:var(--acc); font-size:1em; font-weight:inherit; }
.eyebrow-txt{ display:inline-block; }
.eyebrow-dot{
  display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--acc); flex-shrink:0;
}

[data-r]{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease);}
[data-r].on{opacity:1;transform:translateY(0);}
[data-r][data-d="1"]{transition-delay:.08s;}
[data-r][data-d="2"]{transition-delay:.16s;}
[data-r][data-d="3"]{transition-delay:.24s;}

/* ============================================================
   NAV — plain text links, Dan-style
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:200;
  background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
  transition:background .3s;
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--g);
  height:60px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav-brand{
  font-weight:900; font-size:1.15rem; letter-spacing:.04em; color:var(--ink);
  display:flex; align-items:center; gap:.5em; flex-shrink:0;
}
.nav-brand .dot{ color:var(--acc); font-weight:400; font-size:1.5em; line-height:0; }
.nav-brand .word-design{ font-weight:400; color:var(--muted); }
.nav-links{ display:flex; align-items:center; gap:1.8rem; list-style:none; }
.nav-links a{
  font-size:.88rem; font-weight:500; color:var(--muted);
  transition:color .2s; padding:.3rem 0; position:relative;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--acc); transform:scaleX(0); transform-origin:right; transition:transform .25s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.active{ color:var(--ink); }

.nav-right{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.theme-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line2);
  background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; transition:border-color .2s, transform .25s var(--ease);
}
.theme-btn:hover{ border-color:var(--acc); transform:rotate(18deg); }
.theme-btn .sun{display:block;}.theme-btn .moon{display:none;}
[data-theme="dark"] .theme-btn .sun{display:none;}
[data-theme="dark"] .theme-btn .moon{display:block;}

.nav-cta{
  font-size:.82rem; font-weight:600; color:var(--bg); background:var(--ink);
  padding:.5em 1.1em; border-radius:100px; transition:background .2s, color .2s;
}
.nav-cta:hover{ background:var(--acc); color:#fff; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:5px; }
.nav-toggle span{ display:block; width:20px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media(max-width:800px){
  .nav-links{
    position:fixed; top:60px; left:0; right:0; background:var(--bg);
    flex-direction:column; align-items:stretch; gap:0; max-height:0; overflow:hidden;
    transition:max-height .35s var(--ease); box-shadow:0 10px 30px var(--line);
  }
  .nav-links.open{ max-height:340px; }
  .nav-links li a{ display:block; padding:1rem var(--g); border-bottom:1px solid var(--line); }
  .nav-links a::after{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:48px; padding:0 1.7em;
  font-family:var(--f-body); font-size:.88rem; font-weight:600;
  border-radius:100px; cursor:pointer;
  transition:transform .25s var(--ease), background .2s, box-shadow .25s, color .2s, border-color .2s;
  white-space:nowrap; border:1px solid transparent;
}
.btn-dark{ background:var(--ink); color:var(--bg); }
.btn-dark:hover{ background:var(--acc); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line2); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-acc{ background:var(--acc); color:#fff; }
.btn-acc:hover{ background:var(--acc-d); transform:translateY(-2px); box-shadow:0 8px 22px rgba(230,49,120,.35); }

/* ============================================================
   FOOTER — light, editorial, Dan-style
   ============================================================ */
.footer{
  box-shadow:0 -1px 0 var(--line); padding:3rem 0 2rem; margin-top:2rem;
  transition:background .3s;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2rem; box-shadow:0 1px 0 var(--line);
}
.footer-brand{ font-weight:900; font-size:1.1rem; letter-spacing:-.02em; margin-bottom:.6rem; }
.footer-brand .dot{ color:var(--acc); }
.footer-tag{ font-size:.85rem; color:var(--muted); max-width:26ch; line-height:1.6; }
.footer-contact{ display:flex; flex-direction:column; gap:.55rem; margin-top:1.1rem; }
.footer-contact a{ display:inline-flex; align-items:center; gap:.55em; font-size:.85rem; color:var(--muted); transition:color .2s; }
.footer-contact a:hover{ color:var(--acc); }
.footer-contact svg{ width:15px; height:15px; flex-shrink:0; }
.footer-col-h{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin-bottom:.85rem; display:block;
}
.footer-col a{
  display:block; font-size:.85rem; color:var(--muted); padding:.32rem 0; transition:color .2s;
}
.footer-col a:hover{ color:var(--acc); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem;
  padding-top:1.4rem; font-size:.78rem; color:var(--faint);
}
.footer-bottom a{ color:var(--faint); transition:color .2s; }
.footer-bottom a:hover{ color:var(--acc); }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem; } }

/* ============================================================
   NEXT-PAGE STRIP
   ============================================================ */
.page-next{ box-shadow:0 -1px 0 var(--line); padding:2.2rem 0; }
.page-next a{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.92rem; font-weight:600; color:var(--muted); transition:color .25s;
}
.page-next a:hover{ color:var(--acc); }
.arr{ display:inline-block; font-size:1.2em; line-height:1; }
@media(max-width:640px){ .arr{ font-size:1.35em; } }
.page-next a .arr{ transition:transform .3s var(--ease); }
.page-next a:hover .arr{ transform:translateX(5px); }
.page-next-split{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }