/* =========================================================================
   Apogee Apple — FOUNDATION stylesheet (shared tokens only)
   Section-specific styles now live inside each section file in
   template-parts/. This file holds only what's shared everywhere:
   reset, variables, base typography, buttons, links, animation base.
   ========================================================================= */
:root{
	--accent:#0071e3;--accent-dark:#0058b9;--black:#1d1d1f;--grey:#6e6e73;--light:#f5f5f7;
	--font:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:60px}
body{margin:0;font-family:var(--font);color:var(--black);background:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;line-height:1.5;overflow-x:clip;max-width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.07}
em{font-style:normal;color:var(--accent)}

.eyebrow{font-size:.95rem;font-weight:500;color:var(--accent);margin:0 0 .6em}
.section-head{max-width:980px;margin:0 auto 60px;text-align:center}
.section-head h2{font-size:clamp(2rem,5vw,3.4rem)}
.section-head p{font-size:clamp(1.1rem,2vw,1.4rem);color:var(--grey);margin:.6em auto 0;max-width:46ch}

.btn{display:inline-block;border-radius:980px;padding:13px 26px;font-size:1.02rem;font-weight:500;transition:background-color .25s ease,transform .15s ease,color .25s ease}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-dark)}
.btn--solid:active{transform:scale(.97)}
.btn--ghost{color:var(--accent);padding:13px 18px}
.btn--ghost:hover{color:var(--accent-dark)}
.link{color:var(--accent);font-weight:500;font-size:1.02rem}
.link:hover{text-decoration:underline}

[data-anim]{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
[data-anim="fade-up"]{transform:translateY(44px)}
[data-anim="fade-left"]{transform:translateX(48px)}
[data-anim="fade-right"]{transform:translateX(-48px)}
[data-anim].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	[data-anim]{opacity:1!important;transform:none!important;transition:none!important}
	[data-parallax]{transform:none!important}
}

.basic-page{padding:128px 22px 100px}
.basic-page__inner{max-width:760px;margin:0 auto}
.basic-page h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.5em}
.entry{font-size:1.15rem;line-height:1.7;color:#333}

/* ===== Homepage ambient product-image motion (each image differs) ===== */
@keyframes ag-float   {0%,100%{transform:translateY(0)}            50%{transform:translateY(-14px)}}
@keyframes ag-sway    {0%,100%{transform:rotate(-2.6deg)}          50%{transform:rotate(2.6deg)}}
@keyframes ag-pulse   {0%,100%{transform:scale(1)}                 50%{transform:scale(1.06)}}
@keyframes ag-drift   {0%,100%{transform:translateX(-11px)}        50%{transform:translateX(11px)}}
@keyframes ag-floatrot{0%,100%{transform:translateY(0) rotate(0)}  50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes ag-tilt    {0%,100%{transform:rotate(-3deg) translateY(0)} 50%{transform:rotate(3deg) translateY(-8px)}}
@keyframes ag-bobx    {0%,100%{transform:translate(0,0)}           33%{transform:translate(8px,-8px)} 66%{transform:translate(-8px,-4px)}}
@media (prefers-reduced-motion:reduce){
	.hero__media img,.showcase__media img,.tile__media img{animation:none !important}
}