/* =========================================================
   Sumnot — design tokens
   ========================================================= */
:root{
  --bg:        #ffffff;
  --ink:       #0b0b0c;
  --ink-soft:  #47474d;
  --gray:      #8c8c92;
  --line:      #e9e9e7;
  --accent:    #2e5bff;
  --accent-10: rgba(46, 91, 255, 0.08);

  --font-display: "Space Grotesk", sans-serif;
  --font-body:    "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  --shear: 14px; /* the diagonal cut echoing the SUMNOT wordmark */
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3{
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.01em;
}

p{ margin: 0; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =========================================================
   Layout helpers
   ========================================================= */
.nav, .hero, .footer{
  position: relative;
  z-index: 1;
}

/* =========================================================
   Nav
   ========================================================= */
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 32px;
}

.nav__brand{ display: inline-flex; align-items: center; }
.nav__wordmark{ height: 160px; width: auto; }

/* =========================================================
   GitHub button (top right)
   ========================================================= */
.btn--github{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--github:hover{
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn__github-icon{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 32px 120px;
}

.hero__lede{
  margin-top: 0;
  max-width: 46ch;
  font-size: 1.08rem;
  color: var(--ink-soft);
}

.hero__actions{
  display: flex;
  gap: 16px;
  margin-top: 40px;
}

/* =========================================================
   Buttons — clipped corner echoes the wordmark's shear
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-size: 0.94rem;
  font-weight: 500;
  font-family: var(--font-body);
  clip-path: polygon(0 0, calc(100% - var(--shear)) 0, 100% 100%, 0 100%);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn--lg{ padding: 16px 32px; font-size: 1rem; }

.btn--primary{
  background: var(--ink);
  color: #fff;
}
.btn--primary:hover{ background: var(--accent); transform: translateY(-1px); }

.btn--ghost{
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover{ box-shadow: inset 0 0 0 1.5px var(--ink); }

/* =========================================================
   Footer
   ========================================================= */
.footer{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px 48px;
}

.footer__top{
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.footer__wordmark{ height: 64px; width: auto; }
.footer__top p{
  font-size: 0.9rem;
  color: var(--gray);
}
.footer__contact{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer__contact:hover{
  color: var(--accent);
  border-color: var(--accent);
}

.footer__bottom{
  padding-top: 22px;
  font-size: 0.82rem;
  color: var(--gray);
  font-family: var(--font-mono);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .hero{ padding-top: 48px; }
}

@media (max-width: 480px){
  .nav__wordmark{ height: 88px; }
  .btn--github span{ display: none; }
  .btn--github{ padding: 10px 14px; }
}

@media (max-width: 560px){
  .hero__actions{ flex-direction: column; }
  .footer__top{ flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}