/* DOable premium theme — custom classes layered on top of Tailwind utilities. */
:root{
  --doable-green:#10b981;
  --doable-green-dark:#059669;
  --doable-green-light:#34d399;
}
html{scroll-behavior:smooth;}
body{overflow-x:hidden;color:#111827;-webkit-font-smoothing:antialiased;}

.text-premium-heading{font-weight:700;letter-spacing:-0.03em;}

.gradient-text{
  background:linear-gradient(135deg,#10b981 0%,#34d399 50%,#059669 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.gradient-mesh{
  background:
    radial-gradient(at 40% 20%, rgba(16,185,129,0.12) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(52,211,153,0.08) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(16,185,129,0.08) 0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(5,150,105,0.08) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(16,185,129,0.08) 0px, transparent 50%);
}

.card-premium{
  border-radius:1rem;background:rgba(255,255,255,0.9);
  backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.03);
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.card-premium:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.08),0 10px 10px -5px rgba(0,0,0,.04),0 0 0 1px rgba(16,185,129,.1);
}

.btn-premium{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  box-shadow:0 4px 6px -1px rgba(16,185,129,.2),inset 0 1px 0 rgba(255,255,255,.2);
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.btn-premium:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 25px -5px rgba(16,185,129,.3),0 10px 10px -5px rgba(16,185,129,.15);
}

.glass{background:rgba(255,255,255,.8);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.05);}
.scroll-mt-nav{scroll-margin-top:100px;}

/* Simple reveal-on-scroll (progressive enhancement) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* Blog article typography */
.prose-doable h2{font-size:1.6rem;font-weight:700;margin:1.6rem 0 .8rem;color:#111827;}
.prose-doable h3{font-size:1.25rem;font-weight:700;margin:1.3rem 0 .6rem;color:#111827;}
.prose-doable p{margin:0 0 1rem;line-height:1.75;color:#374151;}
.prose-doable ul{margin:0 0 1rem 1.25rem;list-style:disc;color:#374151;}
.prose-doable li{margin:.35rem 0;}
.prose-doable a{color:#059669;text-decoration:underline;}