/* =========================================================================
   Tinybits — bold, color-blocked studio site
   Personality: bits / retro-computing · orange brand · angled color blocks
   ========================================================================= */

/* ---- Fonts (self-hosted, OFL) ----------------------------------------- */
@font-face{font-family:"Hanken";src:url("fonts/hanken.woff2") format("woff2");font-weight:400 800;font-display:swap;}

/* ---- Tokens ----------------------------------------------------------- */
:root{
  --ink:#100e0d;          /* dark base            */
  --ink-soft:#1b1714;
  --paper:#ffffff;        /* white light block    */
  --paper-ink:#1c1a18;    /* text on white        */
  --paper-mut:#6b6660;
  --line-lite:#ececea;    /* hairline on white    */
  --brand:#fe4900;
  --brand-2:#ff6a33;
  --brand-ink:#b0330a;   /* darker orange for small text on white (AA) */
  --text:#f3efe9;         /* text on dark         */
  --text-mut:#9c948b;
  --line:#2c2825;

  --display:"Hanken", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:"Hanken", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap:64rem;
  --pad:clamp(1.25rem, 5vw, 3rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem,0.95rem + 0.3vw,1.15rem); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  accent-color:var(--brand);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
strong{font-weight:700;}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px;}
.maker :focus-visible{outline-color:#241610;}   /* orange bg needs a dark ring */

/* honor reduced-motion: no infinite loops, near-instant transitions */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* brand selection — a small non-generic detail */
::selection{background:var(--brand);color:#fff;text-shadow:none;}

/* balanced headings, orphan-free body */
.hero__title,.section-title,.app__name,.foot__mail{text-wrap:balance;}
.hero__sub,.app__tag,.maker__lead,.maker__body{text-wrap:pretty;}

/* subtle branded scrollbar (desktop) */
@supports (scrollbar-color: auto){
  html{scrollbar-color:#3a332e var(--ink); scrollbar-width:thin;}
}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}

.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Shared type devices ---------------------------------------------- */
.eyebrow{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(.72rem,1.1vw,.8rem); letter-spacing:.2em;
  color:var(--brand); margin:0 0 1.25rem; text-transform:uppercase;
}
.eyebrow--ink{color:var(--brand-ink);}
.eyebrow--light{color:#3a1608;opacity:1;}
.section-title{
  font-family:var(--display); font-weight:800; line-height:.98;
  font-size:clamp(2.3rem,7vw,4rem); letter-spacing:-0.03em;
  margin:0 0 clamp(2rem,5vw,3.5rem);
}

/* ---- HERO ------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; padding:clamp(4rem,12vh,7rem) 0 clamp(6rem,14vh,9rem);}
.hero__grid{
  position:absolute; inset:-2px; z-index:0;
  background-image:
    linear-gradient(rgba(254,73,0,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(254,73,0,.14) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 26%, #000 38%, transparent 76%);
          mask-image:radial-gradient(ellipse 78% 68% at 50% 26%, #000 38%, transparent 76%);
}
.hero__glow{
  position:absolute; z-index:0; left:50%; top:5%; translate:-50% 0;
  width:min(720px,96vw); aspect-ratio:1/.7; border-radius:50%;
  background:radial-gradient(circle, rgba(254,73,0,.28), rgba(254,73,0,.05) 45%, transparent 70%);
  filter:blur(20px);
}
.hero__inner{position:relative; z-index:1; text-align:center;}
.hero__mark{
  width:clamp(96px,17vw,140px); height:auto; margin:0 auto 1.6rem;
  filter:drop-shadow(0 6px 26px rgba(254,73,0,.4));
}
.hero__title{
  font-family:var(--display); font-weight:800; line-height:.94;
  font-size:clamp(3rem,11vw,6.5rem); letter-spacing:-0.04em;
  margin:0 0 1.4rem;
}
.mark-word{position:relative; white-space:nowrap; color:var(--brand);}
.mark-word::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.06em; height:.09em;
  background:var(--brand); border-radius:2px; opacity:.4;
}
.hero__sub{
  font-family:var(--sans); font-size:clamp(1.05rem,2.1vw,1.3rem); line-height:1.6;
  color:var(--text-mut); max-width:40ch; margin:0 auto;
}
.kw{
  font-weight:700; color:var(--text);
  background-image:linear-gradient(var(--brand),var(--brand));
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .28s cubic-bezier(.2,.7,.2,1), color .18s;
}
.kw:hover{color:var(--brand); background-size:100% 2px;}
.scrollcue{
  display:inline-block; margin-top:clamp(2rem,5vw,3.2rem);
  width:2.6rem; height:2.6rem; line-height:2.5rem; border-radius:50%;
  border:1px solid var(--line); color:var(--text-mut); font-size:1.1rem;
  transition:transform .2s, color .2s, border-color .2s;
  animation:bob 2.4s ease-in-out infinite;
}
.scrollcue:hover{color:var(--brand); border-color:var(--brand); transform:translateY(2px);}
.scrollcue:active{transform:scale(.96);}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* ---- APPS (white block, angled, icon-forward) ------------------------- */
.apps{
  position:relative; background:var(--paper); color:var(--paper-ink);
  margin-top:clamp(-4vw,-3vw,-2vw);
  padding:clamp(4.5rem,10vw,7.5rem) 0 clamp(6.5rem,12vw,9rem);
  clip-path:polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%);
}
.apps .eyebrow{color:var(--brand-ink);}
.apps .section-title{color:var(--paper-ink);}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.4vw,1.9rem);}

.app{
  --accent:#3f639e;   /* shared button/hover accent for all apps */
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(2rem,3.5vw,2.75rem) clamp(1.1rem,2vw,1.6rem) clamp(1.75rem,3vw,2.25rem);
  background:#fff; border:1px solid var(--line-lite); border-radius:26px;
  box-shadow:0 1px 2px rgba(30,25,20,.04), 0 10px 22px -14px rgba(30,25,20,.20), 0 30px 50px -34px rgba(30,25,20,.5);
  transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.app:hover{
  transform:translateY(-6px);
  box-shadow:0 1px 2px rgba(30,25,20,.04), 0 16px 30px -18px rgba(30,25,20,.22), 0 40px 60px -34px rgba(30,25,20,.5);
  border-color:color-mix(in srgb, var(--accent, var(--brand)) 32%, var(--line-lite));
}

.app__icon{position:relative; display:block; width:clamp(90px,14vw,112px); height:auto; margin-bottom:1.4rem;}
.app__glow{ /* neutral ambient shadow beneath the icon */
  position:absolute; z-index:0; inset:-30%;
  background:radial-gradient(circle, rgba(28,20,12,.20), transparent 60%);
  filter:blur(15px); opacity:.7; transition:opacity .32s ease;
}
.app:hover .app__glow{opacity:1;}
.app__icon img{
  position:relative; z-index:1; width:100%; height:auto; border-radius:22.5%;
  box-shadow:0 14px 30px -10px rgba(30,20,10,.42), inset 0 0 0 1px rgba(0,0,0,.10);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.app:hover .app__icon img{transform:scale(1.05) rotate(-3deg);}

.app__name{
  font-family:var(--display); font-weight:800; letter-spacing:-0.02em; line-height:1;
  font-size:clamp(1.7rem,3.4vw,2.1rem); margin:0 0 .55rem;
}
.app__name a{transition:color .18s;}
.app__name a:hover{color:var(--accent, var(--brand));}
.app__tag{color:var(--paper-mut); margin:0 0 1.5rem; font-size:1.02rem; max-width:26ch;}
.app__pills{display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin:auto 0 0;}
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.6rem 1.15rem; min-height:40px; border-radius:999px; font-weight:600; font-size:.88rem;
  background:var(--accent, var(--paper-ink)); color:#fff;
  box-shadow:0 1px 2px rgba(20,15,10,.06), 0 10px 20px -12px var(--accent, rgba(20,15,10,.6));
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, filter .18s, background-color .18s, color .18s, border-color .18s;
}
.pill:hover{transform:translateY(-2px); filter:brightness(1.09); box-shadow:0 2px 4px rgba(20,15,10,.06), 0 14px 24px -12px var(--accent, rgba(20,15,10,.6));}
.pill:active{transform:translateY(0) scale(.96); transition-duration:.06s;}
.pill--ghost{
  background:transparent; color:var(--accent, var(--paper-ink));
  border:1px solid color-mix(in srgb, var(--accent, #333) 45%, transparent); box-shadow:none;
}
.pill--ghost:hover{
  background:color-mix(in srgb, var(--accent, #333) 10%, transparent);
  border-color:color-mix(in srgb, var(--accent, #333) 70%, transparent);
  filter:none; box-shadow:none;
}

/* ---- MAKER (orange block, angled) ------------------------------------- */
.maker{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--brand), #e23e00);
  color:#fff; margin-top:-5vw;
  padding:clamp(5.5rem,12vw,9rem) 0 clamp(5rem,11vw,8rem);
  clip-path:polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%);
}
.maker__inner{position:relative; text-align:center; max-width:44rem;}
.maker__mark{
  width:clamp(78px,12vw,110px); height:auto; margin:0 auto 1.4rem;
  opacity:.95; filter:drop-shadow(0 8px 18px rgba(120,30,0,.4));
}
.section-title--light{color:#fff; text-shadow:0 2px 20px rgba(120,25,0,.35);}
.maker__lead{color:#2a1105; font-size:clamp(1.15rem,2.4vw,1.4rem); margin:0 0 1.1rem; line-height:1.5; font-weight:500;}
.maker__lead strong{color:#000;}
.maker__body{color:#3d1c0d; margin:0 0 2rem; max-width:52ch; margin-inline:auto;}
.pill--light{
  background:#fff; color:var(--brand-ink); font-size:1rem; padding:.7rem 1.4rem;
  box-shadow:0 12px 26px -10px rgba(90,20,0,.5);
}
.pill--light:hover{filter:none; background:#fff5f0;}

/* ---- FOOTER ----------------------------------------------------------- */
.foot{position:relative; overflow:hidden; background:var(--ink); padding:clamp(4rem,9vw,6rem) 0 clamp(3.5rem,8vw,5rem);}
.foot__grid{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(254,73,0,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(254,73,0,.09) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 120%, #000 30%, transparent 72%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 120%, #000 30%, transparent 72%);
}
.foot__inner{position:relative; z-index:1; text-align:center;}
.foot__mail{
  display:inline-block;
  font-family:var(--display); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(1.6rem,5vw,2.8rem); color:var(--text);
  background-image:linear-gradient(var(--brand),var(--brand));
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .32s cubic-bezier(.2,.7,.2,1), color .2s;
}
.foot__mail:hover{color:var(--brand); background-size:100% 2px;}
.foot__copy{
  font-family:var(--sans); font-size:.85rem; color:var(--text-mut);
  margin:1.6rem 0 0;
}

/* ---- Reveal on scroll ------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.is-in{opacity:1; transform:none;}
  .hero__inner.reveal{transform:translateY(14px);}
  /* once revealed, hand control back to the component's snappy hover transition */
  .app.is-in{transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease, opacity .5s ease;}
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width:52rem){
  .grid{grid-template-columns:repeat(2,1fr);}
  .grid > .app:first-child{grid-column:1 / -1;}
}
@media (max-width:38rem){
  .grid{grid-template-columns:1fr; max-width:24rem; margin-inline:auto;}
  .grid > .app:first-child{grid-column:auto;}
}
@media (max-width:46rem){
  .apps{clip-path:polygon(0 4.5vw,100% 0,100% 100%,0 100%);}
  .maker{clip-path:polygon(0 4.5vw,100% 0,100% 100%,0 100%);}
}
@media (max-width:30rem){
  .hero__sub{max-width:28ch;}
}