/* Loopi & Friends storefront identity; product and app styles remain separate. */
:root{--ink:#173f50;--muted:#4d6972;--page:#fffdf7;--line:#d7e7de;--gold:#f3d379;--gold-edge:#af843e}
body{background:var(--page)}
.site-header{height:90px;background:#fffdf8f2;border-bottom-color:#d8e7de;backdrop-filter:blur(16px)}
.brand{display:inline-flex;align-items:center;min-width:0;line-height:1}
.brand>img{display:block;width:205px;height:78px;object-fit:contain;object-position:left center}
.brand:focus-visible{outline:3px solid #177c95;outline-offset:4px;border-radius:8px}
.main-nav a{transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease}
.main-nav .cards-nav{background:#f1d488;border-color:#d7b760;box-shadow:0 3px 0 #b98e50}
.main-nav .workbook-nav{background:#f9f5e8;border-color:#e4dfca}
.main-nav .app-nav{background:#193e4d;color:#fffdf4;border-color:#193e4d}
.site-footer{background:#163c48;color:#f6f2de}
.site-footer a{color:#f6f2de}
.site-footer .footer-top>p{color:#f4dc9c}
.intro-hero{background:#102d3e;padding-top:74px;padding-bottom:80px}
.intro-hero:before{background:radial-gradient(ellipse at 84% 36%,#32768673 0,transparent 53%),radial-gradient(ellipse at 24% 88%,#9774423b 0,transparent 48%)}
.intro-hero .intro-layout{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:36px}
.intro-hero .intro-copy .loopi-eyebrow{font-size:12px;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;font-weight:900;color:#f2d797;margin:0 0 18px}
.intro-hero .intro-copy h1{font-size:clamp(42px,4.7vw,68px);line-height:1.04;letter-spacing:-.045em;max-width:680px;text-wrap:balance;color:#fff9e9}
.intro-hero .intro-copy h2{font-size:clamp(23px,2.4vw,31px);color:#f1d78e;margin-top:25px}
.intro-hero .intro-copy p{font-size:17px;line-height:1.68;max-width:58ch;color:#e4eee9}
.intro-hero .intro-copy strong{color:#fff6d9}
.loopi-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.loopi-hero-actions a{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:900;transition:transform .22s ease,background-color .22s ease}
.loopi-hero-actions a:first-child{background:#f1d488;color:#183c49;box-shadow:0 4px 0 #a77a37}
.loopi-hero-actions a:last-child{border:1px solid #b4d0cb;color:#fff9e9;background:#ffffff14}
.loopi-hero-actions a:hover{transform:translateY(-2px)}
.loopi-hero-actions a:active{transform:translateY(2px)}
.loopi-hero-actions a:focus-visible{outline:3px solid #fff;outline-offset:4px}
.intro-art{height:600px}
.intro-art .back{width:40%;left:2%;top:130px;transform:rotate(-16deg);z-index:1}
.intro-art .greece{width:41%;right:8%;top:57px;transform:rotate(13deg);z-index:1}
.intro-art .special{width:45%;left:21%;top:49px;transform:rotate(-3deg);z-index:2}
.intro-art .wc-loopi{width:48%;right:-3%;bottom:70px;z-index:3;filter:drop-shadow(0 20px 18px #051e2c9c)}
.intro-art .cfp-wonderbolt-stamp{width:44%;left:38%;bottom:0;z-index:4;max-width:250px}
@media(max-width:900px){.intro-hero{padding:42px 0 56px}.intro-hero .intro-layout{grid-template-columns:1fr}.intro-art{width:min(100%,540px);height:575px}.intro-hero .intro-copy h1{font-size:clamp(38px,7vw,56px)}}
@media(max-width:700px){.site-header{height:auto;min-height:72px}.brand>img{width:155px;height:67px}.header-inner{gap:8px}.main-nav{gap:5px}.main-nav a{padding:10px 8px;font-size:11px}.intro-hero .intro-copy .loopi-eyebrow{font-size:10px}.intro-hero .intro-copy h1{font-size:clamp(35px,8vw,43px)}.intro-hero .intro-copy h2{font-size:23px}.intro-hero .intro-copy p{font-size:15px}.intro-art{height:calc((100vw - 36px) * 1.14);min-height:345px;max-height:565px}.intro-art .back{top:18%}.intro-art .greece{top:8%}.intro-art .special{top:4%}.intro-art .wc-loopi{bottom:12%}.intro-art .cfp-wonderbolt-stamp{bottom:0}}
@media(max-width:440px){.brand>img{width:166px;height:72px}.main-nav a{font-size:11px;padding:9px 7px}.loopi-hero-actions a{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.loopi-hero-actions a,.main-nav a{transition:none}}