:root {
  color-scheme: light;
  --cream: #f5f1e8;
  --paper: #fffdf8;
  --ink: #131311;
  --muted: #66675f;
  --line: rgba(19, 19, 17, .14);
  --blue: #3157ef;
  --blue-dark: #1b37b5;
  --lime: #dff25f;
  --coral: #ff7b61;
  --lilac: #d9d0ff;
  --cyan: #97e8df;
  --shell: 1400px;
  --header: 78px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
section[id] { scroll-margin-top: 84px; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--cream); font-family: Inter, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.page-shell, .nav-shell { width: min(calc(100% - 48px),var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 10px 14px; border-radius: 999px; color: white; background: var(--ink); transform: translateY(-150%); }.skip-link:focus { transform: none; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.eyebrow > span { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(223,242,95,.15); }.eyebrow.dark { color: #54564e; }.eyebrow.dark > span { background: var(--blue); box-shadow: 0 0 0 5px rgba(49,87,239,.1); }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 12px; padding: 0 19px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .22s var(--ease),box-shadow .22s,background .22s; }.button:hover { transform: translateY(-2px); }.button-large { min-height: 56px; padding-inline: 27px; font-size: 14px; }.button-dark { color: white; background: var(--ink); box-shadow: 0 9px 24px rgba(19,19,17,.16); }.button-dark:hover { background: #2c2d29; }.button-blue { color: white; background: var(--blue); box-shadow: 0 14px 34px rgba(49,87,239,.25); }.button-blue:hover { background: var(--blue-dark); }.button-light { color: var(--ink); background: white; box-shadow: 0 14px 36px rgba(0,0,0,.18); }

/* Header */
.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: var(--header); border-bottom: 1px solid transparent; transition: height .25s,background .25s,border-color .25s,backdrop-filter .25s; }.site-header.scrolled { height: 66px; border-color: var(--line); background: rgba(245,241,232,.86); backdrop-filter: blur(20px) saturate(120%); }.nav-shell { height: 100%; display: flex; align-items: center; gap: 35px; }.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 850; letter-spacing: -.03em; }.brand img { width: 32px; height: 32px; border-radius: 9px; }.main-nav { display: flex; gap: 29px; margin-inline: auto; }.main-nav a,.nav-text-link { position: relative; color: #5e6058; font-size: 12px; font-weight: 700; }.main-nav a::after,.nav-text-link::after { content: ""; position: absolute; right: 50%; bottom: -7px; left: 50%; height: 2px; border-radius: 99px; background: var(--blue); transition: inset .2s; }.main-nav a:hover::after,.nav-text-link:hover::after { right: 0; left: 0; }.nav-actions { display: flex; align-items: center; gap: 18px; }.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); }.menu-toggle span { display: block; width: 17px; height: 2px; margin: 5px auto; background: var(--ink); transition: transform .2s; }.site-header.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }.site-header.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Hero */
.hero { position: relative; min-height: 900px; display: grid; align-items: center; padding: 145px 0 100px; overflow: hidden; background: var(--cream); }.hero::before { content: ""; position: absolute; width: 600px; height: 600px; top: -260px; left: -220px; border-radius: 50%; background: var(--lilac); filter: blur(1px); opacity: .65; }.hero-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px,7vw,110px); align-items: center; }.hero-copy { position: relative; z-index: 3; }.hero-copy .eyebrow { color: #565851; }.hero-copy h1 { margin: 0; font-size: clamp(62px,6.4vw,102px); line-height: .98; letter-spacing: -.075em; font-weight: 900; }.hero-copy h1 em { color: var(--blue); font-style: normal; }.hero-lead { max-width: 650px; margin: 30px 0 0; color: #5e6058; font-size: clamp(16px,1.45vw,20px); }.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 35px; }.underlined-link { padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 800; }.hero-note { margin: 28px 0 0; color: #85877f; font-size: 11px; }.hero-doodle { position: absolute; border: 2px solid var(--ink); border-radius: 50%; opacity: .1; }.doodle-one { width: 120px; height: 60px; right: 46%; bottom: 65px; transform: rotate(-12deg); }.doodle-two { width: 80px; height: 120px; right: 3%; top: 19%; transform: rotate(28deg); }
.photo-playground { position: relative; min-height: 620px; perspective: 1000px; }.photo-card { position: absolute; overflow: hidden; border: 9px solid white; border-radius: 25px; background: #ddd; box-shadow: 0 28px 70px rgba(38,32,22,.2); transition: left .8s var(--ease),top .8s var(--ease),right .8s var(--ease),bottom .8s var(--ease),width .8s var(--ease),height .8s var(--ease),transform .35s var(--ease); will-change: transform; }.photo-card img { height: 100%; object-fit: cover; }.photo-a { z-index: 2; width: 40%; height: 54%; top: 7%; left: 4%; transform: rotate(-8deg); }.photo-b { z-index: 4; width: 43%; height: 61%; top: 2%; right: 5%; transform: rotate(6deg); }.photo-c { z-index: 3; width: 46%; height: 48%; right: 4%; bottom: 2%; transform: rotate(-4deg); }.photo-d { z-index: 1; width: 39%; height: 45%; bottom: 4%; left: 8%; transform: rotate(7deg); }.photo-playground.is-sorted .photo-a { top: 4%; left: 4%; transform: rotate(-2deg); }.photo-playground.is-sorted .photo-b { top: 4%; right: 4%; transform: rotate(2deg); }.photo-playground.is-sorted .photo-c { right: 4%; bottom: 4%; transform: rotate(-2deg); }.photo-playground.is-sorted .photo-d { bottom: 4%; left: 4%; transform: rotate(2deg); }.hero-sticker { position: absolute; z-index: 8; top: 47%; left: 39%; padding: 16px 20px; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--lime); box-shadow: 6px 7px 0 var(--ink); font-size: 11px; text-align: center; transform: rotate(-8deg); }.hero-sticker strong { font-size: 16px; }.sort-playground { position: absolute; z-index: 9; right: 41%; bottom: -4px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 4px 5px 0 var(--ink); font-size: 11px; cursor: pointer; transition: transform .2s; }.sort-playground:hover { transform: translateY(-3px); }.sort-playground span { color: var(--blue); font-size: 16px; }

.marquee { position: relative; z-index: 2; overflow: hidden; padding: 18px 0; border-block: 2px solid var(--ink); color: white; background: var(--blue); }.marquee-track { width: max-content; display: flex; align-items: center; gap: 31px; animation: marquee 28s linear infinite; }.marquee span { font-size: 14px; font-weight: 850; letter-spacing: .02em; }.marquee i { color: var(--lime); font-size: 18px; font-style: normal; }

/* Shared */
.section { padding: 130px 0; }.section-heading { max-width: 950px; margin-bottom: 65px; }.section-heading h2,.journey-copy h2,.privacy-copy h2,.contact-copy h2,.faq-title h2 { margin: 0; font-size: clamp(44px,5.3vw,76px); line-height: 1.04; letter-spacing: -.065em; font-weight: 900; }.section-heading > p:last-child { max-width: 620px; margin: 24px 0 0; color: var(--muted); font-size: 17px; }

/* Benefits */
.why-section { background: var(--paper); }.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.benefit-card { position: relative; min-height: 620px; padding: 30px; overflow: hidden; border: 2px solid var(--ink); border-radius: 30px; box-shadow: 7px 8px 0 var(--ink); transform-style: preserve-3d; transition: transform .25s var(--ease),box-shadow .25s; }.benefit-card:hover { box-shadow: 11px 13px 0 var(--ink); }.benefit-cull { background: var(--lime); }.benefit-color { background: var(--lilac); }.benefit-finish { background: var(--coral); }.benefit-index { font-size: 11px; font-weight: 850; }.benefit-tag { display: inline-flex; margin-top: 62px; padding: 5px 10px; border: 1px solid var(--ink); border-radius: 999px; background: rgba(255,255,255,.32); font-size: 9px; font-weight: 850; }.benefit-card h3 { margin: 20px 0 15px; font-size: clamp(31px,2.7vw,43px); line-height: 1.08; letter-spacing: -.055em; }.benefit-card > p { max-width: 410px; margin: 0; color: rgba(19,19,17,.7); font-size: 13px; }.mini-stack { position: absolute; right: 26px; bottom: 25px; left: 26px; height: 190px; }.mini-stack img { position: absolute; width: 42%; height: 100%; object-fit: cover; border: 5px solid white; border-radius: 17px; box-shadow: 0 12px 30px rgba(0,0,0,.15); }.mini-stack img:nth-child(1) { left: 0; transform: rotate(-6deg); }.mini-stack img:nth-child(2) { left: 29%; z-index: 2; transform: rotate(2deg); }.mini-stack img:nth-child(3) { right: 0; transform: rotate(7deg); }.mini-stack span { position: absolute; z-index: 5; right: 28%; top: -10px; width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); }.color-sun { position: absolute; right: 32px; bottom: 28px; left: 32px; height: 185px; display: flex; align-items: flex-end; justify-content: center; gap: 11px; }.color-sun i { width: 28%; height: 100%; border: 2px solid var(--ink); border-radius: 90px 90px 15px 15px; background: var(--coral); }.color-sun i:nth-child(2) { height: 77%; background: var(--lime); }.color-sun i:nth-child(3) { height: 58%; background: var(--cyan); }.color-sun span { position: absolute; width: 70px; height: 70px; top: 14px; right: 19%; border: 2px solid var(--ink); border-radius: 50%; background: #ffd861; box-shadow: 5px 5px 0 var(--ink); }.finish-photo { position: absolute; right: 28px; bottom: 28px; left: 28px; height: 200px; overflow: hidden; border: 6px solid white; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,.18); transform: rotate(-2deg); }.finish-photo img { height: 100%; object-fit: cover; }.finish-photo span { position: absolute; top: 13px; right: 13px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; color: white; background: rgba(16,18,16,.48); font-size: 9px; font-weight: 800; backdrop-filter: blur(8px); }

/* Journey */
.journey-section { color: white; background: #11120f; }.journey-shell { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(55px,8vw,120px); align-items: center; }.journey-copy > p:nth-of-type(2) { max-width: 500px; margin: 24px 0 38px; color: #9fa098; }.journey-tabs { display: grid; border-top: 1px solid rgba(255,255,255,.18); }.journey-tabs button { display: grid; grid-template-columns: 32px 1fr; gap: 3px 12px; padding: 21px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.18); color: #82837e; background: transparent; text-align: left; cursor: pointer; transition: color .2s,padding .2s; }.journey-tabs button:hover,.journey-tabs button.active { color: white; padding-left: 10px; }.journey-tabs button > span { grid-row: span 2; color: var(--lime); font-size: 9px; }.journey-tabs b { font-size: 14px; }.journey-tabs small { font-size: 10px; }.journey-stage { position: relative; min-height: 750px; }.journey-panel { position: absolute; inset: 0; overflow: hidden; border-radius: 34px; background: #292a25; animation: panelIn .55s var(--ease); }.journey-panel img { height: 100%; object-fit: cover; }.floating-caption { position: absolute; right: 24px; bottom: 24px; left: 24px; padding: 22px; border: 1px solid rgba(255,255,255,.3); border-radius: 20px; background: rgba(12,13,11,.42); backdrop-filter: blur(16px); }.floating-caption span { color: var(--lime); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }.floating-caption b { display: block; margin-top: 7px; font-size: 23px; line-height: 1.15; }.pick-badge,.safe-badge { position: absolute; top: 24px; right: 24px; padding: 10px 13px; border-radius: 999px; color: var(--ink); background: var(--lime); font-size: 9px; font-weight: 800; }.pick-badge strong { margin-left: 6px; font-size: 14px; }.safe-badge { background: white; }.tone-dots { position: absolute; top: 24px; right: 24px; display: flex; gap: 6px; padding: 8px; border-radius: 999px; background: rgba(255,255,255,.76); }.tone-dots i { width: 16px; height: 16px; border-radius: 50%; background: #f6a55e; }.tone-dots i:nth-child(2) { background: #7dbd9b; }.tone-dots i:nth-child(3) { background: #6fa9d9; }.tone-dots i:nth-child(4) { background: #ceb1c5; }

/* Moments */
.moments-section { background: var(--paper); }.moments-head { display: grid; grid-template-columns: 1fr .6fr; gap: 80px; align-items: end; margin-bottom: 50px; }.moments-head h2 { margin: 0; font-size: clamp(43px,5vw,70px); line-height: 1.04; letter-spacing: -.06em; }.moments-head > p { max-width: 430px; margin: 0 0 7px; color: var(--muted); }.moment-viewer { overflow: hidden; border: 2px solid var(--ink); border-radius: 32px; background: var(--cream); box-shadow: 8px 9px 0 var(--ink); }.moment-images { position: relative; height: min(70vw,720px); max-height: 720px; overflow: hidden; }.moment-images img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.035); transition: opacity .45s,transform .8s var(--ease); }.moment-images img.active { opacity: 1; transform: scale(1); }.moment-counter { position: absolute; right: 24px; bottom: 22px; padding: 9px 13px; border-radius: 999px; color: white; background: rgba(17,18,15,.65); backdrop-filter: blur(10px); font-size: 10px; }.moment-counter span { font-size: 18px; font-weight: 850; }.moment-control { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px 27px; border-top: 2px solid var(--ink); font-size: 9px; font-weight: 800; }.moment-control input { width: 100%; height: 5px; appearance: none; border-radius: 99px; background: linear-gradient(90deg,var(--blue) var(--progress,0%),#d4d0c6 var(--progress,0%)); }.moment-control input::-webkit-slider-thumb { width: 22px; height: 22px; appearance: none; border: 3px solid var(--ink); border-radius: 50%; background: var(--lime); box-shadow: 2px 3px 0 var(--ink); cursor: grab; }

/* Privacy */
.privacy-section { color: white; background: var(--blue); }.privacy-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px,9vw,140px); align-items: center; }.privacy-copy > p:nth-of-type(2) { max-width: 580px; margin: 28px 0 36px; color: rgba(255,255,255,.72); font-size: 17px; }.privacy-points { display: flex; flex-wrap: wrap; gap: 8px; }.privacy-points span { padding: 8px 13px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; font-size: 10px; font-weight: 800; }.privacy-photo { position: relative; min-height: 670px; overflow: hidden; border: 9px solid white; border-radius: 32px; box-shadow: 11px 12px 0 rgba(15,20,66,.8); transform: rotate(2deg); }.privacy-photo img { position: absolute; height: 100%; object-fit: cover; }.privacy-seal { position: absolute; right: 25px; bottom: 25px; width: 150px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--lime); box-shadow: 5px 6px 0 var(--ink); text-align: center; transform: rotate(-9deg); }.privacy-seal span { font-size: 8px; letter-spacing: .2em; }.privacy-seal strong { font-size: 16px; }.privacy-seal small { font-size: 8px; }

/* About */
.about-section { overflow:hidden;background:linear-gradient(125deg,#f7f3ea 0%,#ece7ff 52%,#dff8f4 100%); }
.about-grid { display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(55px,8vw,120px);align-items:start; }
.about-copy { position:sticky;top:105px; }
.about-copy h2 { margin:0;font-size:clamp(44px,5.3vw,76px);line-height:1.04;letter-spacing:-.065em;font-weight:900; }
.about-lead { max-width:650px;margin:28px 0 34px;color:#575950;font-size:17px; }
.about-copy blockquote { max-width:620px;margin:0;padding:22px 25px;border-left:4px solid var(--blue);border-radius:0 18px 18px 0;background:rgba(255,253,248,.62);color:#3e403a;font-size:14px;font-weight:700; }
.about-story { display:grid;overflow:hidden;border:2px solid var(--ink);border-radius:32px;background:rgba(255,253,248,.78);box-shadow:9px 10px 0 var(--ink); }
.about-story article { display:grid;grid-template-columns:52px 1fr;gap:20px;padding:30px; }
.about-story article+article { border-top:1px solid rgba(19,19,17,.14); }
.about-story article>span { width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:white;background:var(--blue);font-size:10px;font-weight:850; }
.about-story article:nth-child(2)>span { color:var(--ink);background:var(--lime); }
.about-story article:nth-child(3)>span { color:var(--ink);background:var(--cyan); }
.about-story b { display:block;margin:1px 0 7px;font-size:19px;letter-spacing:-.03em; }
.about-story p { max-width:570px;margin:0;color:var(--muted);font-size:13px; }
.about-signature { display:flex;align-items:center;gap:17px;padding:25px 30px;color:white;background:var(--blue); }
.about-signature>span { width:54px;height:54px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.35);border-radius:50%;font-size:35px;font-weight:900; }
.about-signature p { display:grid;gap:2px;color:white; }
.about-signature b { margin:0;font-size:16px; }
.about-signature small { color:rgba(255,255,255,.7);font-size:10px; }

/* Contact pet */
.contact-section { background: var(--cream); }.contact-card { display: grid; grid-template-columns: 1fr 520px; gap: clamp(55px,8vw,120px); padding: clamp(40px,6vw,80px); border: 2px solid var(--ink); border-radius: 36px; background: var(--lime); box-shadow: 10px 11px 0 var(--ink); }.contact-copy { align-self: center; }.contact-copy > p:nth-of-type(2) { max-width: 550px; margin: 25px 0; color: #55574f; }.contact-copy > a { display: inline-flex; gap: 10px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); font-size: 16px; font-weight: 850; }.contact-form { position: relative; display: grid; gap: 13px; padding: 175px 24px 24px; border: 2px solid var(--ink); border-radius: 26px; background: var(--paper); }.contact-pet { --look-x:0px;--look-y:0px; position: absolute; width: 170px; height: 135px; top: 28px; left: 50%; transform: translateX(-50%); }.contact-pet svg { position: absolute; bottom: 0; width: 100%; overflow: visible; }.pet-head { fill: var(--blue); stroke: var(--ink); stroke-width: 3; }.pet-ear { fill: var(--lilac); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }.pet-face { fill: #fffaf0; stroke: var(--ink); stroke-width: 2; }.pet-eyes { fill: var(--ink); transform: translate(var(--look-x),var(--look-y)); transition: transform .09s; transform-origin: center; }.pet-paws { fill: var(--lilac); stroke: var(--ink); stroke-width: 2; transition: transform .3s var(--ease); transform-origin: center; }.pet-mouth,.pet-alpha { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }.pet-alpha { stroke: white; }.pet-message { position: absolute; z-index: 3; left: 122px; top: -7px; width: 155px; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 13px 13px 13px 2px; background: white; box-shadow: 3px 4px 0 var(--ink); font-size: 8px; font-weight: 750; }.contact-pet.watching .pet-eyes { transform: translate(0,5px); }.contact-pet.shy .pet-head { transform: rotate(-5deg); transform-origin: center; }.contact-pet.shy .pet-paws { transform: translateY(-28px) scale(1.2); }.contact-pet.happy { animation: petHop .45s var(--ease); }.contact-intents { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #efede7; }.contact-intents button { min-height: 34px; border: 0; border-radius: 999px; color: #73756e; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }.contact-intents button.active { color: white; background: var(--blue); }.contact-form label { display: grid; gap: 5px; font-size: 9px; font-weight: 850; }.contact-form input,.contact-form textarea { width: 100%; padding: 11px 13px; border: 1px solid #cbc9c1; border-radius: 11px; color: var(--ink); background: white; font-size: 12px; resize: vertical; transition: border-color .2s,box-shadow .2s; }.contact-form input:focus,.contact-form textarea:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px rgba(49,87,239,.12); }.contact-submit { width: 100%; margin-top: 2px; }.contact-form > small { color: #878980; font-size: 8px; text-align: center; }

/* FAQ / Download / Footer */
.faq-section { background: var(--paper); }.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(60px,9vw,150px); }.faq-list { border-top: 2px solid var(--ink); }.faq-list details { border-bottom: 1px solid var(--ink); }.faq-list summary { position: relative; padding: 25px 48px 25px 0; list-style: none; font-size: 15px; font-weight: 850; cursor: pointer; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; position: absolute; top: 16px; right: 5px; font-size: 30px; font-weight: 350; transition: transform .2s; }.faq-list details[open] summary::after { transform: rotate(45deg); }.faq-list p { max-width: 700px; margin: -5px 0 25px; color: var(--muted); font-size: 13px; }
.download-section { padding: 30px 0 110px; background: var(--paper); }.download-card { position: relative; min-height: 430px; display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; padding: clamp(40px,6vw,80px); overflow: hidden; border-radius: 36px; color: white; background: var(--blue); }.download-card::before { content: ""; position: absolute; width: 430px; height: 430px; right: 18%; bottom: -280px; border-radius: 50%; border: 70px solid rgba(255,255,255,.08); }.download-card > div:not(.download-orbit),.download-card > button { position: relative; z-index: 2; }.download-card h2 { margin: 0; font-size: clamp(43px,5.2vw,72px); line-height: 1.02; letter-spacing: -.065em; }.download-card p:last-child { margin: 18px 0 0; color: rgba(255,255,255,.72); }.download-orbit { position: absolute; width: 220px; height: 220px; top: -58px; right: 8%; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; animation: orbit 12s linear infinite; }.download-orbit::before { content: ""; position: absolute; width: 17px; height: 17px; top: 18px; left: 28px; border-radius: 50%; background: var(--lime); }.download-orbit span { font-size: 90px; font-weight: 900; transform: rotate(-12deg); }
.site-footer { padding: 62px 0 44px; color: #d6d7d1; background: var(--ink); }.footer-grid { display: grid; grid-template-columns: 2fr .7fr .7fr 1.2fr; gap: 40px; }.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }.footer-grid p { margin: 9px 0 0; color: #797b75; font-size: 11px; }.footer-grid strong { margin-bottom: 5px; color: #6f716b; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }.footer-grid a:not(.brand),.footer-grid span { color: #a5a7a1; font-size: 11px; }.footer-grid a:hover { color: white; }.footer-meta { align-items: flex-end!important; justify-content: flex-end; }.footer-meta a:nth-child(2) { padding-bottom: 2px; border-bottom: 1px solid #565851; }.toast { position: fixed; z-index: 250; right: 22px; bottom: 22px; max-width: min(430px,calc(100% - 44px)); padding: 14px 18px; border: 2px solid var(--ink); border-radius: 14px; color: var(--ink); background: var(--lime); box-shadow: 5px 6px 0 var(--ink); font-size: 12px; font-weight: 750; }

.hero-copy h1 { font-size: clamp(62px,5.7vw,92px); }
.reveal { opacity: 1; transform: none; }.reveal.reveal-pending { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--ease),transform .75s var(--ease); }.reveal.reveal-pending.visible { opacity: 1; transform: none; }
@keyframes marquee { to { transform: translateX(-50%); } } @keyframes panelIn { from { opacity:0;transform:translateY(14px) scale(.985); } } @keyframes orbit { to { transform:rotate(360deg); } } @keyframes petHop { 50% { transform:translateX(-50%) translateY(-9px); } } 

@media (max-width: 1120px) {
  .hero { min-height: 0; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { max-width: 820px; text-align: center; margin-inline: auto; }.hero-copy .eyebrow,.hero-actions { justify-content: center; }.hero-lead { margin-inline: auto; }.photo-playground { max-width: 760px; width: 100%; margin: 20px auto 0; }
  .benefit-grid { grid-template-columns: 1fr; }.benefit-card { min-height: 430px; }.benefit-card h3,.benefit-card > p { max-width: 52%; }.mini-stack,.color-sun,.finish-photo { left: 56%; }
  .journey-shell { grid-template-columns: 1fr; }.journey-copy { max-width: 850px; }.journey-stage { min-height: 720px; }
  .contact-card { grid-template-columns: 1fr; }.contact-copy { max-width: 850px; }.contact-form { max-width: 580px; width: 100%; margin-inline: auto; }
}

@media (max-width: 900px) {
  :root { --header: 68px; }.page-shell,.nav-shell { width: min(calc(100% - 32px),var(--shell)); }.desktop-only { display: none; }.menu-toggle { display: block; }.nav-actions { margin-left: auto; }.nav-actions > .button { display: none; }
  .main-nav { position: fixed; top: 68px; right: 16px; left: 16px; display: grid; gap: 2px; padding: 10px; border: 2px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 6px 7px 0 var(--ink); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .2s; }.site-header.menu-open .main-nav { opacity: 1; visibility: visible; transform: none; }.main-nav a { padding: 12px; }
  .section { padding: 100px 0; }.moments-head { grid-template-columns: 1fr; gap: 15px; }.privacy-grid,.about-grid { grid-template-columns: 1fr; }.about-copy { position:static; }.privacy-photo { min-height: 540px; }.faq-grid { grid-template-columns: 1fr; gap: 35px; }.download-card { align-items: flex-start; flex-direction: column; }.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }.footer-meta { grid-column: 1/-1; align-items: flex-start!important; }
}

@media (max-width: 620px) {
  .page-shell,.nav-shell { width: min(calc(100% - 22px),var(--shell)); }.brand { font-size: 14px; }
  .hero { padding: 116px 0 78px; }.hero-copy h1 { font-size: clamp(48px,14vw,66px); }.hero-lead { font-size: 15px; }.hero-actions { flex-direction: column; }.hero-note { line-height: 1.7; }.photo-playground { min-height: 480px; }.photo-card { border-width: 6px; border-radius: 18px; }.hero-sticker { left: 33%; padding: 11px 14px; }.sort-playground { right: 33%; }
  .section { padding: 80px 0; }.section-heading { margin-bottom: 40px; }.section-heading h2,.journey-copy h2,.privacy-copy h2,.contact-copy h2,.faq-title h2 { font-size: 39px; }.section-heading > p:last-child { font-size: 14px; }
  .benefit-card { min-height: 570px; padding: 24px; }.benefit-card h3,.benefit-card > p { max-width: none; }.mini-stack,.color-sun,.finish-photo { right: 20px; left: 20px; }.journey-stage { min-height: 570px; }.floating-caption b { font-size: 19px; }.moments-head h2 { font-size: 39px; }.moment-images { height: 520px; }.moment-control { grid-template-columns: 1fr; gap: 8px; }.moment-control span { display: none; }
  .privacy-photo { min-height: 450px; border-width: 6px; }.privacy-seal { width: 120px; height: 120px; }.privacy-copy > p:nth-of-type(2) { font-size: 14px; }.about-copy h2 { font-size:39px; }.about-lead { font-size:14px; }.about-story article { grid-template-columns:42px 1fr;gap:13px;padding:22px 18px; }.about-story article>span { width:38px;height:38px;border-radius:12px; }.about-signature { padding:22px 18px; }
  .contact-card { width: min(calc(100% - 22px),var(--shell)); padding: 27px 15px; border-radius: 26px; }.contact-form { padding: 170px 15px 18px; }.pet-message { left: 102px; width: 137px; }.contact-intents { border-radius: 14px; }.contact-intents button { border-radius: 10px; }.download-section { padding-bottom: 70px; }.download-card { min-height: 440px; padding: 34px 25px; }.download-card h2 { font-size: 40px; }.download-card > button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid > div:first-child,.footer-meta { grid-column: 1/-1; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important; } }

/* 2.1 responsive refinement and product presentation */
.hero { min-height: clamp(720px,100svh,900px); padding-block: clamp(118px,14vh,145px) clamp(72px,10vh,100px); }
.photo-playground { min-height: clamp(500px,36vw,620px); }
.marquee { padding: 0; }
.marquee-track { width: max-content; gap: 0; animation-duration: 30s; }
.marquee-group { min-width: 100vw; min-height: 66px; display: flex; align-items: center; justify-content: space-around; gap: clamp(22px,3.2vw,58px); padding-inline: clamp(20px,3vw,55px); }
.marquee-group span { white-space: nowrap; }

.product-demo-section { overflow: hidden; background: #ebe5ff; }
.product-demo-heading { max-width: 930px; margin-bottom: 58px; }
.product-demo-heading h2,.opportunities-heading h2 { margin: 0; font-size: clamp(44px,5.3vw,76px); line-height: 1.04; letter-spacing: -.065em; font-weight: 900; }
.product-demo-heading > p:last-child,.opportunities-heading > p:last-child { max-width: 670px; margin: 24px 0 0; color: var(--muted); font-size: 17px; }
.product-demo { padding: 18px; border: 2px solid var(--ink); border-radius: 36px; background: rgba(255,253,248,.7); box-shadow: 9px 10px 0 var(--ink); }
.demo-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 6px; border: 1px solid rgba(19,19,17,.13); border-radius: 999px; background: rgba(255,255,255,.66); }
.demo-tabs button { min-height: 48px; border: 0; border-radius: 999px; color: #65665f; background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; transition: color .25s,background .25s,transform .25s; }
.demo-tabs button:hover { transform: translateY(-1px); }
.demo-tabs button.active { color: white; background: var(--blue); box-shadow: 0 8px 24px rgba(49,87,239,.24); }
.demo-tabs button span { margin-right: 8px; opacity: .62; font-size: 9px; }
.demo-intro { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 22px 10px 16px; }
.demo-intro strong { max-width: 680px; font-size: clamp(18px,2vw,27px); line-height: 1.3; letter-spacing: -.03em; }
.demo-intro span { max-width: 400px; color: var(--muted); font-size: 12px; text-align: right; }
.demo-window { overflow: hidden; border: 2px solid var(--ink); border-radius: 23px; color: #e9ecf4; background: #111318; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.demo-window-bar { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #292d37; background: #181b21; }
.demo-window-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #5d6270; }
.demo-brand { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; font-size: 11px; font-weight: 850; }.demo-brand img { width: 22px; height: 22px; border-radius: 6px; }
.demo-mode { margin-right: auto; padding: 5px 12px; border: 1px solid #345f9e; border-radius: 999px; color: #d8e7ff; background: #183760; font-size: 9px; font-weight: 800; }
.demo-app { min-height: 690px; display: grid; grid-template-columns: 190px 1fr 210px; }
.demo-sidebar,.demo-inspector { display: flex; flex-direction: column; gap: 10px; padding: 20px 14px; color: #9299aa; background: #15181e; font-size: 10px; }
.demo-sidebar { border-right: 1px solid #292d37; }.demo-inspector { border-left: 1px solid #292d37; }
.demo-sidebar b,.demo-inspector b { margin-bottom: 9px; color: #f2f4fa; font-size: 11px; }
.demo-sidebar span { display: flex; justify-content: space-between; padding: 10px 11px; border-radius: 10px; }.demo-sidebar span.selected { color: white; background: #213b61; }.demo-sidebar em { font-style: normal; }
.demo-inspector span { margin-top: 9px; }.demo-inspector strong { color: #eef2fa; font-size: 12px; }
.demo-histogram { position: relative; height: 105px; overflow: hidden; border-radius: 12px; background: #252a31; }.demo-histogram i { position: absolute; right: -6%; bottom: 0; left: -6%; height: 78%; clip-path: polygon(0 100%,5% 88%,12% 94%,17% 56%,25% 68%,34% 32%,41% 73%,52% 60%,60% 82%,68% 41%,74% 65%,82% 30%,90% 58%,96% 12%,100% 100%); background: rgba(73,130,255,.68); }.demo-histogram i:nth-child(2) { height: 62%; background: rgba(92,216,167,.58); transform: translateX(-9%); }.demo-histogram i:nth-child(3) { height: 46%; background: rgba(255,116,96,.57); transform: translateX(8%); }
.demo-canvas { min-width: 0; display: flex; flex-direction: column; background: #0f1115; }
.demo-toolbar { height: 54px; display: flex; align-items: center; gap: 25px; padding: 0 18px; border-bottom: 1px solid #272b34; color: #aeb4c1; font-size: 10px; }.demo-toolbar span:first-child { color: white; }.demo-toolbar button { margin-left: auto; padding: 7px 13px; border: 1px solid #395a86; border-radius: 8px; color: #dbe9ff; background: #18365b; font-size: 9px; }
.demo-grid { flex: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 12px; overflow: hidden; transition: opacity .25s; }
.demo-grid figure { position: relative; min-height: 0; margin: 0; overflow: hidden; border-radius: 7px; background: #22252b; }.demo-grid img { height: 100%; object-fit: cover; }.demo-grid i { position: absolute; top: 7px; right: 7px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: white; background: #15bd75; font-size: 10px; font-style: normal; }
.demo-hero-image,.demo-map { display: none; position: relative; flex: 1; margin: 12px; overflow: hidden; border-radius: 12px; background: #08090b; }.demo-hero-image img { height: 100%; object-fit: contain; }.demo-before-line { position: absolute; inset: 0 50% 0 auto; width: 2px; background: white; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }.demo-before-line::after { content:""; position:absolute; top:50%; left:50%; width:34px; height:34px; border:2px solid white; border-radius:50%; background:rgba(19,19,17,.65); transform:translate(-50%,-50%); }.demo-before-line span { position:absolute; top:12px; padding:5px 8px; border-radius:99px; background:rgba(19,19,17,.65); font-size:8px; }.demo-before-line span:first-child { right:9px; }.demo-before-line span:last-child { left:9px; }
.demo-map { background: radial-gradient(circle at 42% 40%,rgba(49,87,239,.12),transparent 26%),#e8e1d4; }.demo-map::before,.demo-map::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(35,47,65,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(35,47,65,.08) 1px,transparent 1px); background-size:42px 42px; }.demo-map::after { background:linear-gradient(130deg,transparent 48%,rgba(49,87,239,.25) 49%,transparent 50%); }
.map-land { position:absolute; z-index:2; border-radius:48% 52% 57% 43%; background:#a8b7a1; filter:drop-shadow(0 2px 0 rgba(0,0,0,.08)); }.land-a { width:38%; height:34%; left:9%; top:23%; transform:rotate(-12deg); }.land-b { width:29%; height:45%; right:12%; top:18%; transform:rotate(18deg); }.land-c { width:23%; height:20%; left:40%; bottom:16%; transform:rotate(8deg); }.map-pin { position:absolute; z-index:4; width:38px; height:38px; display:grid; place-items:center; border:3px solid white; border-radius:50% 50% 50% 8px; color:white; background:var(--blue); box-shadow:0 8px 16px rgba(0,0,0,.2); font-size:10px; font-weight:850; transform:rotate(-45deg); }.map-pin::first-letter { transform:rotate(45deg); }.pin-a { left:28%; top:33%; }.pin-b { right:25%; top:37%; }.pin-c { left:51%; bottom:25%; }
.demo-window[data-demo-stage="color"] .demo-grid,.demo-window[data-demo-stage="finish"] .demo-grid,.demo-window[data-demo-stage="map"] .demo-grid { display:none; }.demo-window[data-demo-stage="color"] .demo-hero-image,.demo-window[data-demo-stage="finish"] .demo-hero-image { display:block; }.demo-window[data-demo-stage="map"] .demo-map { display:block; }.demo-window[data-demo-stage="finish"] .demo-before-line { right:35%; }

.journey-section { color: var(--ink); background: #e3dcff; }
.journey-copy > p:nth-of-type(2) { color: #5f6059; }
.journey-tabs { border-top-color: rgba(19,19,17,.2); }
.journey-tabs button { border-bottom-color: rgba(19,19,17,.2); color: #6d6e67; }
.journey-tabs button:hover,.journey-tabs button.active { color: var(--ink); }
.journey-tabs button > span { color: var(--blue); }
.journey-panel { border: 2px solid var(--ink); box-shadow: 8px 9px 0 var(--ink); }

.moment-track { width: 500%; height: 100%; display: flex; will-change: transform; }
.moment-track figure { width: 20%; height: 100%; flex: 0 0 20%; margin: 0; overflow: hidden; }
.moment-track img { position: static; width: 100%; height: 100%; object-fit: cover; opacity: 1; transform: none; transition: none; }
.moment-control input { cursor: ew-resize; }
.moment-control input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }

.opportunities-section { background: var(--paper); }
.opportunities-heading { max-width: 950px; margin-bottom: 56px; }
.opportunity-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.opportunity-card { min-height: 470px; display: flex; flex-direction: column; padding: 30px; border: 2px solid var(--ink); border-radius: 30px; box-shadow: 7px 8px 0 var(--ink); }
.beta-card { background: var(--lime); }.business-card { background: var(--cyan); }.careers-card { background: var(--lilac); }
.opportunity-card > span { font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.opportunity-card h3 { margin: 70px 0 14px; font-size: clamp(31px,3vw,44px); line-height: 1; letter-spacing: -.055em; }
.opportunity-card p { margin: 0; color: rgba(19,19,17,.68); font-size: 13px; }
.opportunity-card ul { display: grid; gap: 10px; margin: 26px 0 35px; padding: 0; list-style: none; font-size: 11px; font-weight: 750; }.opportunity-card li::before { content:"✦"; margin-right:8px; color:var(--blue); }
.opportunity-card a { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 17px; border-top: 1px solid rgba(19,19,17,.25); font-size: 12px; font-weight: 850; }.opportunity-card a b { width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.4); }

.pixel-body { fill: var(--blue); stroke: var(--ink); stroke-width: 3; }.pixel-face { fill: #fffaf0; stroke: var(--ink); stroke-width: 2; }.pixel-alpha { fill:none;stroke:white;stroke-width:5;stroke-linecap:round;stroke-linejoin:round; }.pixel-bits { fill:var(--coral);stroke:var(--ink);stroke-width:2; }.pixel-bits rect:nth-child(2),.pixel-bits rect:nth-child(4) { fill:var(--lime); }
.contact-pet.shy .pixel-body { transform: rotate(-4deg); transform-origin:center; }.contact-pet.shy .pet-paws { transform: translateY(-23px) scale(1.08); }

.site-footer { color: var(--ink); background: #e3dcff; border-top: 2px solid var(--ink); }
.footer-grid p { color: #696a63; }.footer-grid strong { color: #686960; }.footer-grid a:not(.brand),.footer-grid span { color: #4e4f49; }.footer-grid a:hover { color: var(--blue); }.footer-meta a:nth-child(2) { border-bottom-color: rgba(19,19,17,.35); }

@media (max-width: 1120px) {
  .demo-app { grid-template-columns: 160px 1fr; }.demo-inspector { display:none; }
  .opportunity-grid { grid-template-columns:1fr; }.opportunity-card { min-height:340px; }.opportunity-card h3 { margin-top:45px; }
}
@media (max-width: 900px) {
  .hero { min-height:auto; }.photo-playground { min-height:clamp(480px,72vw,620px); }
  .demo-tabs { grid-template-columns:repeat(2,1fr); border-radius:22px; }.demo-tabs button { border-radius:16px; }.demo-intro { align-items:flex-start; flex-direction:column; gap:8px; }.demo-intro span { text-align:left; }
  .demo-app { grid-template-columns:1fr; min-height:620px; }.demo-sidebar { display:none; }.demo-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 620px) {
  .hero-grid { gap:28px; }.photo-playground { min-height:430px; }.hero-sticker { top:43%; }.sort-playground { right:50%; bottom:-8px; transform:translateX(50%); }.sort-playground:hover { transform:translateX(50%) translateY(-2px); }
  .marquee-group { min-height:56px; gap:18px; padding-inline:16px; }.marquee-group span { font-size:11px; }.marquee-group span:nth-of-type(even),.marquee-group i:nth-of-type(even) { display:none; }
  .product-demo-heading h2,.opportunities-heading h2 { font-size:39px; }.product-demo-heading > p:last-child,.opportunities-heading > p:last-child { font-size:14px; }
  .product-demo { padding:9px; border-radius:24px; box-shadow:5px 6px 0 var(--ink); }.demo-tabs { gap:3px;padding:3px; }.demo-tabs button { min-height:42px;font-size:10px; }.demo-tabs button span { display:none; }.demo-intro { min-height:118px;padding:17px 5px 12px; }.demo-intro strong { font-size:17px; }.demo-window { border-radius:16px; }.demo-app { min-height:520px; }.demo-window-bar { height:42px; }.demo-grid { grid-template-columns:repeat(2,1fr);gap:5px;padding:7px; }.demo-grid figure:nth-child(n+7) { display:none; }.demo-toolbar { gap:13px;padding-inline:10px; }.demo-toolbar span:nth-child(3) { display:none; }
  .moment-images { height:470px; }.moment-control { padding:18px; }
  .opportunity-card { min-height:390px;padding:24px; }.opportunity-card h3 { margin-top:48px; }
  .footer-grid { row-gap:30px; }
}

/* Account shell: visual front-end only until the server-side identity service is connected. */
.account-page { min-height:100svh; background:radial-gradient(circle at 12% 10%,rgba(217,208,255,.8),transparent 31%),radial-gradient(circle at 88% 90%,rgba(151,232,223,.62),transparent 28%),var(--cream); }
.account-header { width:min(calc(100% - 48px),var(--shell)); height:86px; display:flex; align-items:center; justify-content:space-between; margin-inline:auto; }
.account-back { padding-bottom:3px; border-bottom:1px solid var(--ink); font-size:12px; font-weight:800; }
.account-main { width:min(calc(100% - 48px),1220px); min-height:calc(100svh - 86px); display:grid; grid-template-columns:1fr 500px; gap:clamp(55px,9vw,130px); align-items:center; margin-inline:auto; padding:40px 0 90px; }
.account-story h1 { margin:0; font-size:clamp(55px,6vw,86px); line-height:.98; letter-spacing:-.07em; }.account-story h1 em { color:var(--blue); font-style:normal; }.account-story > p:last-of-type { max-width:600px; margin:28px 0 0; color:var(--muted); font-size:16px; }
.account-bubbles { display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; }.account-bubbles span { padding:9px 14px; border:1px solid var(--ink); border-radius:999px; background:rgba(255,253,248,.65); box-shadow:3px 4px 0 var(--ink); font-size:10px; font-weight:800; transform:rotate(-2deg); }.account-bubbles span:nth-child(2) { background:var(--lime);transform:rotate(2deg); }.account-bubbles span:nth-child(3) { background:var(--lilac); }
.account-card { position:relative; padding:185px 30px 30px; border:2px solid var(--ink); border-radius:32px; background:var(--paper); box-shadow:10px 11px 0 var(--ink); }
.account-mascot { --look-x:0px;--look-y:0px; position:absolute; top:32px; left:50%; width:180px; height:135px; transform:translateX(-50%); }.account-mascot svg { width:100%;height:100%;overflow:visible; }.account-mascot .pet-message { left:125px;top:-9px; }.account-mascot.is-shy .pet-eyes { opacity:.18;transform:translate(0,2px) scaleY(.2); }.account-mascot.is-shy .pet-paws { transform:translateY(-23px) scale(1.08); }.account-mascot.is-happy { animation:petHop .45s var(--ease); }
.account-tabs { display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;border:1px solid var(--line);border-radius:999px;background:#efede7; }.account-tabs button { min-height:40px;border:0;border-radius:999px;color:#70716a;background:transparent;font-size:11px;font-weight:850;cursor:pointer; }.account-tabs button.active { color:white;background:var(--blue);box-shadow:0 7px 18px rgba(49,87,239,.2); }
.account-card-copy { margin:27px 0 20px; }.account-card-copy h2 { margin:0;font-size:31px;letter-spacing:-.05em; }.account-card-copy p { margin:4px 0 0;color:var(--muted);font-size:12px; }
.account-form { display:grid;gap:15px; }.account-form > label { display:grid;gap:6px;font-size:10px;font-weight:850; }.account-form input[type="email"],.account-form input[type="password"] { width:100%;min-height:50px;padding:0 14px;border:1px solid #cbc9c1;border-radius:13px;color:var(--ink);background:white;font-size:13px; }.account-form input:focus { border-color:var(--blue);outline:0;box-shadow:0 0 0 3px rgba(49,87,239,.12); }
.account-options { display:flex;align-items:center;justify-content:space-between;color:#686a62;font-size:10px; }.account-options label { display:flex;align-items:center;gap:6px; }.account-options button { border:0;border-bottom:1px solid currentColor;background:transparent;font-size:10px;cursor:pointer; }.account-form > .button { width:100%;margin-top:3px; }.account-service-note { margin:0;color:#8a8c84;font-size:8px;text-align:center; }
.account-session { display:grid;gap:14px;padding:24px 0 5px;text-align:center; }.account-session > span { justify-self:center;padding:6px 11px;border-radius:999px;color:#174c37;background:#baf2d6;font-size:9px;font-weight:850; }.account-session strong { overflow-wrap:anywhere;font-size:22px; }.account-session p { margin:0 0 5px;color:var(--muted);font-size:11px; }.account-session .button { width:100%; }.account-logout { justify-self:center;border:0;border-bottom:1px solid currentColor;color:#6b6c65;background:transparent;font-size:10px;cursor:pointer; }
@media (max-width:900px) { .account-main { grid-template-columns:1fr;max-width:650px; }.account-story { text-align:center; }.account-story .eyebrow,.account-bubbles { justify-content:center; }.account-story > p:last-of-type { margin-inline:auto; } }
@media (max-width:620px) { .account-header,.account-main { width:min(calc(100% - 24px),var(--shell)); }.account-header { height:72px; }.account-main { padding:30px 0 60px;gap:50px; }.account-story h1 { font-size:48px; }.account-story > p:last-of-type { font-size:14px; }.account-card { padding:178px 18px 22px;border-radius:25px;box-shadow:6px 7px 0 var(--ink); }.account-mascot .pet-message { left:108px;width:140px; } }

/* 2.2 continuous marquee and motion-led product demo */
.marquee-track { animation-name:marquee!important; animation-duration:26s!important; animation-timing-function:linear!important; animation-iteration-count:infinite!important; will-change:transform; }
.marquee-group { width:max(100vw,1200px); min-width:max(100vw,1200px); flex:none; }
.marquee:hover .marquee-track { animation-play-state:running; }

.demo-intro > div { display:grid;gap:5px; }
.demo-intro > div strong { max-width:760px; }
.demo-intro > div span { max-width:650px;color:var(--muted);font-size:12px;text-align:left; }
.demo-play-toggle { flex:none;display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);font-size:10px;font-weight:850;cursor:pointer;box-shadow:3px 4px 0 var(--ink);transition:transform .2s; }.demo-play-toggle:hover { transform:translateY(-2px); }.demo-play-toggle i { width:8px;height:8px;border-radius:50%;background:#18bc78;box-shadow:0 0 0 4px rgba(24,188,120,.13); }.demo-play-toggle[aria-pressed="true"] i { border-radius:1px;background:var(--coral);box-shadow:none; }
.demo-window { position:relative; }
.demo-progress { position:absolute;z-index:8;top:0;right:0;left:0;height:3px;overflow:hidden;background:rgba(255,255,255,.08); }.demo-progress i { display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));transform-origin:left;animation:demoProgress 5.6s linear infinite; }
.product-demo.is-paused .demo-progress i { animation-play-state:paused; }.product-demo.is-paused .demo-grid figure,.product-demo.is-paused .demo-before-line,.product-demo.is-paused .map-pin { animation-play-state:paused!important; }
.demo-window[data-demo-stage="library"] .demo-grid figure { animation:demoTile 5.6s var(--ease) both; }.demo-window[data-demo-stage="library"] .demo-grid figure:nth-child(2) { animation-delay:.08s; }.demo-window[data-demo-stage="library"] .demo-grid figure:nth-child(3) { animation-delay:.16s; }.demo-window[data-demo-stage="library"] .demo-grid figure:nth-child(4) { animation-delay:.24s; }.demo-window[data-demo-stage="library"] .demo-grid figure:nth-child(5) { animation-delay:.32s; }.demo-window[data-demo-stage="library"] .demo-grid figure:nth-child(6) { animation-delay:.4s; }.demo-window[data-demo-stage="library"] .demo-grid figure:nth-child(7) { animation-delay:.48s; }.demo-window[data-demo-stage="library"] .demo-grid figure:nth-child(8) { animation-delay:.56s; }
.demo-window[data-demo-stage="library"] .demo-grid i { animation:demoBadge 1.8s var(--ease) 1.1s both; }
.demo-window[data-demo-stage="color"] .demo-before-line { animation:demoCompare 5.6s var(--ease) infinite; }.demo-window[data-demo-stage="finish"] .demo-before-line { animation:demoFinish 5.6s var(--ease) infinite; }
.demo-window[data-demo-stage="map"] .map-pin { animation:mapPin 1.1s var(--ease) infinite alternate; }.demo-window[data-demo-stage="map"] .pin-b { animation-delay:.18s; }.demo-window[data-demo-stage="map"] .pin-c { animation-delay:.36s; }
.demo-window[data-demo-stage="color"] .demo-hero-image img { animation:demoTone 5.6s var(--ease) infinite; }
.site-footer { background:var(--cream); }

@keyframes demoProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes demoTile { 0% { opacity:0;transform:translateY(22px) scale(.96); } 15%,100% { opacity:1;transform:none; } }
@keyframes demoBadge { 0% { opacity:0;transform:scale(.2) rotate(-30deg); } 55% { transform:scale(1.18) rotate(7deg); } 100% { opacity:1;transform:none; } }
@keyframes demoCompare { 0%,12% { right:78%; } 48%,64% { right:24%; } 88%,100% { right:50%; } }
@keyframes demoFinish { 0%,15% { right:65%; } 48%,68% { right:28%; } 100% { right:35%; } }
@keyframes demoTone { 0%,100% { filter:saturate(.82) brightness(.92); } 50% { filter:saturate(1.12) brightness(1.04); } }
@keyframes mapPin { to { margin-top:-9px;filter:drop-shadow(0 12px 8px rgba(0,0,0,.22)); } }

@media (max-width:620px) {
  .marquee-group { width:760px;min-width:760px; }
  .demo-intro { display:grid; }.demo-play-toggle { justify-self:start; }.demo-play-toggle span { display:inline; }
}
@media (prefers-reduced-motion:reduce) {
  .marquee-track { animation-duration:80s!important; }
  .demo-progress i,.demo-grid figure,.demo-grid i,.demo-before-line,.demo-hero-image img,.map-pin { animation:none!important; }
}

/* 2.3 account, interaction and desktop-product alignment */
.nav-actions { min-width:150px;justify-content:flex-end; }
.mobile-account-link { display:none; }
.sort-result { position:absolute;z-index:10;right:2%;bottom:8%;padding:8px 12px;border:1px solid rgba(19,19,17,.16);border-radius:999px;background:rgba(255,253,248,.92);box-shadow:0 8px 24px rgba(38,32,22,.11);font-size:10px;font-weight:800;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s; }
.photo-playground.is-sorted .sort-result { opacity:1;transform:none; }
.photo-playground.is-sorted .photo-card { width:44%;height:43%;border-width:7px;border-radius:20px;box-shadow:0 18px 44px rgba(38,32,22,.14); }
.photo-playground.is-sorted .photo-a { top:4%;left:4%;transform:none!important; }
.photo-playground.is-sorted .photo-b { top:4%;right:4%;transform:none!important; }
.photo-playground.is-sorted .photo-c { right:4%;bottom:5%;transform:none!important; }
.photo-playground.is-sorted .photo-d { bottom:5%;left:4%;transform:none!important; }
.photo-playground.is-sorted .hero-sticker { transform:translate(-50%,-50%) rotate(0);top:50%;left:50%;font-size:9px; }
.photo-playground.is-bouncing .sort-playground span { animation:sortSpark .55s var(--ease); }
@keyframes sortSpark { 50% { transform:rotate(180deg) scale(1.45); } }

.value-strip { padding:34px 0;background:linear-gradient(115deg,#ebe6ff 0%,#f7f3ea 47%,#dff8f4 100%);border-bottom:1px solid var(--line); }
.value-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:28px; }
.value-grid article { display:grid;grid-template-columns:34px 1fr;gap:13px;align-items:start;padding:16px 18px;border:1px solid rgba(19,19,17,.09);border-radius:18px;background:rgba(255,253,248,.58); }
.value-grid article > span { width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:white;background:var(--blue);font-size:9px;font-weight:850; }
.value-grid b { display:block;font-size:13px; }.value-grid p { margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.55; }

.alphapix-app-demo { height:clamp(560px,52vw,760px);min-height:0!important;overflow:hidden;background:#0d0f13; }
.alphapix-app-demo .demo-window-bar { height:34px;padding:0 12px;gap:13px;font-size:8px; }
.alphapix-app-demo .demo-window-bar .demo-brand { font-size:9px;margin-right:2px; }.alphapix-app-demo .demo-window-bar .demo-brand img { width:17px;height:17px; }
.alphapix-app-demo .demo-window-bar > i:first-of-type { margin-left:auto; }
.demo-workflow-bar { position:relative;height:42px;display:flex;align-items:center;gap:22px;padding:0 14px;border-bottom:1px solid #292d37;color:#8d94a3;background:#15181e;font-size:8px; }
.demo-workflow-bar > span.active { height:42px;display:flex;align-items:center;color:white;border-bottom:2px solid white; }
.demo-workflow-bar > div { position:absolute;left:50%;display:flex;gap:5px;transform:translateX(-50%); }.demo-workflow-bar button { min-width:70px;padding:6px 11px;border:1px solid #30343e;border-radius:7px;color:#aeb4c1;background:#171a20;font-size:8px; }.demo-workflow-bar button.active { color:white;border-color:#3775db;background:#2562c7; }
.demo-scenes { position:relative;height:calc(100% - 76px); }
.demo-scene { position:absolute;inset:0;display:none;grid-template-columns:17% 1fr 21%;min-width:0;background:#0f1115;animation:demoSceneIn .5s var(--ease) both; }
.demo-scene.active { display:grid; }
@keyframes demoSceneIn { from { opacity:0;transform:translateY(9px); } to { opacity:1;transform:none; } }
.demo-library,.demo-inspector,.demo-adjustments { min-width:0;display:flex;flex-direction:column;gap:7px;padding:14px 10px;color:#949cab;background:#15181e;font-size:8px; }
.demo-library { border-right:1px solid #292d37; }.demo-inspector,.demo-adjustments { border-left:1px solid #292d37; }
.demo-library b,.demo-inspector > b,.demo-adjustments > b { margin:2px 4px 7px;color:#eef2fa;font-size:9px; }
.demo-library span { display:flex;justify-content:space-between;padding:7px 8px;border-radius:8px; }.demo-library span.selected { color:white;border:1px solid #365f91;background:#1a3557; }.demo-library em { padding:1px 6px;border-radius:99px;background:#202631;font-style:normal; }
.demo-center,.demo-editor,.demo-map-panel { min-width:0;display:flex;flex-direction:column;background:#0c0e11; }
.alphapix-app-demo .demo-toolbar { height:40px;min-height:40px;gap:16px;padding-inline:10px;font-size:8px; }.alphapix-app-demo .demo-toolbar button:first-of-type { margin-left:auto; }.alphapix-app-demo .demo-toolbar button + button { margin-left:0; }
.alphapix-app-demo .demo-grid { grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:5px;padding:7px; }
.alphapix-app-demo .demo-grid figure { border-radius:3px; }.alphapix-app-demo .demo-grid i { width:17px;height:17px;top:5px;right:5px;font-size:8px; }
.demo-inspector details { padding:8px;border:1px solid #2a2e36;border-radius:9px;background:#171a20; }.demo-inspector summary { color:#eef2fa;font-weight:750;cursor:default; }.demo-inspector details span { display:block;margin-top:7px; }
.alphapix-app-demo .demo-histogram { height:78px;margin-top:8px;border-radius:5px; }
.demo-editor-head { height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #292d37;color:#8d95a4;font-size:8px; }.demo-editor-head b { color:#eef2fa;font-size:9px; }
.demo-photo-stage { position:relative;min-height:0;flex:1;margin:7px;overflow:hidden;border-radius:5px;background:#050608; }.demo-photo-stage img { width:100%;height:100%;object-fit:contain; }
.demo-tone-wash { position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,177,88,0),rgba(255,183,105,.14));mix-blend-mode:screen;animation:toneWash 5.6s var(--ease) infinite; }
@keyframes toneWash { 0%,100% { opacity:.15; } 48%,65% { opacity:1; } }
.demo-retouch-ring { position:absolute;left:64%;top:42%;width:64px;height:64px;border:1px solid white;border-radius:50%;box-shadow:0 0 0 8px rgba(255,255,255,.1);animation:retouchMove 5.6s var(--ease) infinite; }
@keyframes retouchMove { 0%,100% { transform:translate(-40px,20px);opacity:.35; } 45%,65% { transform:translate(28px,-16px);opacity:1; } }
.demo-filmstrip { height:72px;display:flex;align-items:center;gap:5px;padding:6px;border-top:1px solid #292d37;background:#12151a;overflow:hidden; }.demo-filmstrip img { width:58px;height:58px;flex:none;object-fit:cover;border:2px solid transparent;border-radius:3px; }.demo-filmstrip img.active { border-color:#2e7af2; }
.demo-adjustments span { padding:8px 5px;border-top:1px solid #2a2e36;color:#edf1f8;font-weight:750; }.demo-adjustments label { display:grid;gap:5px;padding:0 5px;color:#aab1bf; }.demo-adjustments label > i { position:relative;height:3px;border-radius:99px;background:#353b47; }.demo-adjustments label u { position:absolute;left:0;top:0;width:62%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5d8fe2,#f2f4fa);text-decoration:none;animation:sliderMove 5.6s var(--ease) infinite; }.demo-adjustments label:nth-of-type(2) u { width:42%;animation-delay:.25s; }
@keyframes sliderMove { 0%,100% { transform:scaleX(.65);transform-origin:left; } 50% { transform:scaleX(1);transform-origin:left; } }
.demo-curve { height:80px;margin:0 5px;border:1px solid #333945;border-radius:5px;background:linear-gradient(#252a33 1px,transparent 1px),linear-gradient(90deg,#252a33 1px,transparent 1px);background-size:25% 25%; }.demo-curve i { display:block;width:100%;height:100%;clip-path:polygon(0 100%,0 93%,24% 75%,48% 60%,72% 35%,100% 5%,100% 10%,73% 42%,50% 67%,25% 80%);background:#73a8ff; }
.demo-map-panel { grid-column:2/4; }.alphapix-app-demo .demo-map { display:block;flex:1;margin:7px;border-radius:5px; }.demo-map-panel .demo-filmstrip { height:80px; }.demo-map-panel .demo-filmstrip img { width:90px; }

.pixel-body { fill:#3157ef; }.axi-ear { fill:#d9d0ff;stroke:var(--ink);stroke-width:3;stroke-linejoin:round; }.axi-antenna { fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round; }.axi-pixel { fill:var(--lime);stroke:var(--ink);stroke-width:2; }.axi-lens { fill:#1d328b;stroke:#fff;stroke-width:3; }.axi-alpha { fill:white;font-size:28px;font-weight:900;text-anchor:middle;font-family:Arial,sans-serif; }.axi-cheeks { fill:#ff9eab;opacity:.75; }.pet-mouth { fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round; }.pet-eyes { transform:translate(var(--look-x,0),var(--look-y,0));transform-origin:center;transition:transform .15s; }.pet-paws { fill:#d9d0ff;stroke:var(--ink);stroke-width:2;transition:transform .25s; }

.site-footer { margin:0;border:0;border-top:1px solid rgba(19,19,17,.12);border-radius:0;background:linear-gradient(115deg,#ebe6ff 0%,#f7f3ea 50%,#dff8f4 100%);box-shadow:none; }
.footer-grid { padding-block:68px; }

.account-main { grid-template-columns:minmax(0,1fr) minmax(480px,560px);align-items:start;padding-top:70px; }
.account-promises { display:grid;gap:10px;max-width:590px;margin-top:38px; }.account-promises > span { display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:center;padding:13px 15px;border:1px solid rgba(19,19,17,.12);border-radius:17px;background:rgba(255,253,248,.68); }.account-promises i { grid-row:span 2;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:white;background:var(--blue);font-size:9px;font-style:normal;font-weight:850; }.account-promises b { font-size:12px; }.account-promises small { color:var(--muted);font-size:9px; }
.account-card { padding-top:190px; }.account-mascot { width:190px;height:145px; }.account-mascot .pet-message { left:134px; }
.login-methods { display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:13px;background:#f1eee7; }.login-methods button { min-height:35px;border:0;border-radius:9px;color:#777970;background:transparent;font-size:10px;font-weight:800;cursor:pointer; }.login-methods button.active { color:var(--ink);background:white;box-shadow:0 4px 12px rgba(19,19,17,.08); }
.account-form input[type="text"],.account-form input[type="url"],.account-form select,.account-form textarea,.profile-form input,.profile-form select,.profile-form textarea,.security-panel input { width:100%;min-height:48px;padding:10px 13px;border:1px solid #cbc9c1;border-radius:13px;color:var(--ink);background:white;font-size:12px;resize:vertical; }.account-form input:focus,.account-form select:focus,.account-form textarea:focus,.profile-form input:focus,.profile-form select:focus,.profile-form textarea:focus,.security-panel input:focus { border-color:var(--blue);outline:0;box-shadow:0 0 0 3px rgba(49,87,239,.12); }
.account-code > span { display:grid;grid-template-columns:1fr 112px;gap:7px; }.account-code button { border:1px solid #b8b6af;border-radius:12px;background:#f4f1ea;font-size:10px;font-weight:800;cursor:pointer; }.account-code button:disabled { color:#979990;cursor:not-allowed; }
.account-session { gap:16px;text-align:left; }.account-session-head { display:flex;align-items:center;justify-content:space-between; }.account-session-head span,.account-session-head b { padding:6px 10px;border-radius:999px;font-size:9px; }.account-session-head span { color:#174c37;background:#baf2d6;font-weight:850; }.account-session-head b { color:#284797;background:#dbe6ff; }.account-session > strong { font-size:24px; }.account-session > p { margin-top:-13px; }
.admin-overview { display:grid;gap:14px;padding:17px;border:1px solid #cbd7f5;border-radius:20px;background:linear-gradient(135deg,#f2f6ff 0%,#f9f7ff 100%); }.admin-overview-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }.admin-overview-head > span { display:grid;gap:3px; }.admin-overview-head b { font-size:13px; }.admin-overview-head small { color:var(--muted);font-size:9px;font-weight:650; }.admin-overview-head i { padding:5px 9px;border-radius:999px;color:#264aab;background:#dce7ff;font-size:9px;font-style:normal;font-weight:850;white-space:nowrap; }.admin-overview-stats { display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid rgba(49,87,239,.14);border-radius:15px;background:rgba(255,255,255,.72); }.admin-overview-stats span { display:grid;gap:3px;padding:12px 10px;text-align:center; }.admin-overview-stats span+span { border-left:1px solid rgba(49,87,239,.12); }.admin-overview-stats strong { color:var(--blue);font-size:20px;line-height:1; }.admin-overview-stats small { color:var(--muted);font-size:8px;font-weight:750; }.account-session .admin-overview > p { margin:0;color:#5d6474;font-size:9px;line-height:1.6; }
.profile-form { display:grid;gap:13px;padding:18px;border:1px solid var(--line);border-radius:20px;background:#f8f5ee; }.profile-section-title { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px; }.profile-section-title b { font-size:14px; }.profile-section-title span { color:var(--muted);font-size:9px; }.profile-grid { display:grid;grid-template-columns:1fr 1fr;gap:11px; }.profile-form label,.security-panel label { display:grid;gap:5px;font-size:9px;font-weight:800; }.profile-form textarea { min-height:80px; }.profile-check { display:flex!important;grid-column:1/-1;align-items:center;gap:8px!important;color:var(--muted); }.profile-check input { width:auto;min-height:0; }.profile-form .button { justify-self:start;min-height:40px; }
.security-panel { border:1px solid var(--line);border-radius:17px;background:#fffdf8; }.security-panel summary { padding:14px 16px;font-size:11px;font-weight:850;cursor:pointer; }.security-panel form { display:grid;gap:11px;padding:0 16px 16px; }.security-panel .button { justify-self:start;border-color:var(--line);background:white; }
.account-session-actions { display:flex;align-items:center;gap:18px; }.account-session-actions .button { flex:1; }.account-session-actions .account-logout { flex:none; }

@media (max-width:900px) {
  .mobile-account-link { display:block; }
  .value-grid { grid-template-columns:1fr;gap:9px; }
  .alphapix-app-demo { height:620px; }.demo-scene { grid-template-columns:1fr; }.demo-library,.demo-inspector,.demo-adjustments { display:none; }.demo-map-panel { grid-column:1; }.demo-workflow-bar > span { display:none; }.demo-workflow-bar > div { position:static;margin:auto;transform:none; }
  .account-main { grid-template-columns:1fr;max-width:680px;padding-top:36px; }.account-promises { margin-inline:auto;text-align:left; }
}
@media (max-width:620px) {
  .nav-actions { min-width:0; }.nav-actions .account-link,.nav-actions .register-link { display:none; }
  .photo-playground.is-sorted .photo-card { width:45%;height:42%; }.sort-result { right:50%;bottom:11%;white-space:nowrap;transform:translate(50%,8px); }.photo-playground.is-sorted .sort-result { transform:translate(50%,0); }
  .value-strip { padding:18px 0; }.value-grid article { padding:12px; }
  .alphapix-app-demo { height:500px; }.demo-workflow-bar button { min-width:62px;padding-inline:7px; }.demo-scene { grid-template-columns:1fr; }.demo-grid { grid-template-columns:repeat(2,1fr)!important;grid-template-rows:repeat(3,minmax(0,1fr))!important; }.demo-grid figure:nth-child(n+7) { display:none; }.demo-filmstrip { height:58px; }.demo-filmstrip img { width:44px;height:44px; }
  .site-footer { margin:0;border-radius:0; }.footer-grid { padding-block:44px; }
  .account-main { padding-top:25px; }.profile-grid { grid-template-columns:1fr; }.account-session-actions { align-items:stretch;flex-direction:column; }.account-card { padding-top:184px; }
}