/* Vriea AI page (/ai): product pictures, feature rows, privacy details, early-access form. Loaded only by ai.html. */

/* feature rows: text first on phones, side by side on desktop */
.ai-row { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
  .ai-row { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
  .ai-row-flip .ai-media { order: -1; }
}
.ai-checks { margin-top: 1.5rem; display: grid; gap: .75rem; }
.ai-checks li { display: flex; gap: .65rem; align-items: flex-start; color: #cbd5e1; }
.ai-checks svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: #2dd4bf; }

/* picture panels */
.ai-panel { position: relative; overflow: hidden; border-radius: 2rem; display: flex; align-items: center; justify-content: center; padding: 2.25rem 1.25rem; min-height: 20rem; border: 1px solid rgba(255,255,255,.08); }
@media (min-width: 640px) { .ai-panel { padding: 3rem 2.25rem; min-height: 24rem; } }
.ai-sky  { background: linear-gradient(180deg, #34558f 0%, #6f7cbf 50%, #e5a982 100%); }
.ai-day  { background: linear-gradient(165deg, #3f76c9 0%, #86b2ea 55%, #dbe8f8 100%); }
.ai-dusk { background: linear-gradient(160deg, #18233f 0%, #46387a 55%, #bb7397 100%); }
.ai-sea  { background: linear-gradient(160deg, #0f3d47 0%, #1d6a73 50%, #93d3c6 100%); }

/* Windows 11 desktop pictures */
.ai-shot { display: block; width: 100%; max-width: 56rem; height: auto; border-radius: .9rem; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 34px 80px -30px rgba(2,6,23,.8); }
.ai-strip { display: block; width: 100%; max-width: 36rem; height: auto; border-radius: 1.25rem; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 70px -30px rgba(2,6,23,.8); }

/* chips and status */
.ai-chip { display: inline-flex; align-items: center; gap: .45rem; border-radius: 9999px; padding: .45rem .85rem; font-size: .78rem; font-weight: 600; background: rgba(255,255,255,.94); color: #0f172a; box-shadow: 0 14px 30px -14px rgba(2,6,23,.6); }
.ai-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.ai-float-a { position: absolute; left: 5%; bottom: 7%; }
.ai-float-b { position: absolute; right: 5%; top: 7%; }

/* resource card over the desktop */
.ai-card { border-radius: 1.1rem; background: rgba(255,255,255,.95); color: #0f172a; padding: 1rem 1.1rem; box-shadow: 0 22px 50px -24px rgba(2,6,23,.7); font-size: .8rem; }
.ai-meter { height: .42rem; border-radius: 9999px; background: rgba(15,23,42,.1); overflow: hidden; margin-top: .3rem; }
.ai-meter span { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #3b82f6, #2dd4bf); }
.ai-w30 span { width: 30%; } .ai-w55 span { width: 55%; } .ai-w20 span { width: 20%; }
.ai-stack { position: relative; width: 100%; max-width: 32rem; }
.ai-stack .ai-card { position: absolute; right: -.25rem; bottom: -1.75rem; width: 58%; }
@media (min-width: 640px) { .ai-stack .ai-card { right: -1.5rem; width: 46%; } }

/* devices: tablet and phone, landscape */
.ai-devices { position: relative; width: 100%; max-width: 34rem; padding-bottom: 2.5rem; }
.ai-tablet { width: 86%; margin-left: auto; border-radius: 1.4rem; background: #0b0f19; padding: .6rem; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 30px 70px -28px rgba(2,6,23,.8); }
.ai-phone { position: absolute; left: 0; bottom: 0; width: 52%; border-radius: 1.3rem; background: #0b0f19; padding: .42rem .55rem; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 26px 60px -22px rgba(2,6,23,.85); }
.ai-screen { position: relative; border-radius: .9rem; overflow: hidden; }
.ai-screen img { display: block; width: 100%; height: auto; }
.ai-phone .ai-screen { border-radius: .85rem; }
.ai-tools { position: absolute; left: 50%; bottom: .45rem; transform: translateX(-50%); display: flex; gap: .3rem; padding: .25rem .4rem; border-radius: 9999px; background: rgba(2,6,23,.72); border: 1px solid rgba(255,255,255,.16); }
.ai-tool { width: 1.35rem; height: 1.35rem; border-radius: 9999px; display: grid; place-items: center; color: #e2e8f0; }
.ai-tool svg { width: .75rem; height: .75rem; }
.ai-tool-end { background: #ef4444; color: #fff; }
.ai-connect { position: absolute; z-index: 3; right: 4%; top: -1rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; padding: .6rem 1rem .6rem .6rem; font-size: .8rem; font-weight: 700; background: #fff; color: #0f172a; box-shadow: 0 18px 40px -16px rgba(2,6,23,.7); }
.ai-connect-ico { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: grid; place-items: center; background: linear-gradient(135deg, #2dd4bf, #3b82f6); color: #fff; }
.ai-connect-ico svg { width: .9rem; height: .9rem; }

/* consent picture */
.ai-allow { width: 100%; max-width: 21rem; border-radius: 1.4rem; background: rgba(255,255,255,.96); color: #0f172a; padding: 1.2rem; box-shadow: 0 26px 60px -26px rgba(2,6,23,.75); }
.ai-allow-head { display: flex; align-items: center; gap: .7rem; }
.ai-allow-ico { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: grid; place-items: center; background: #0f172a; color: #2dd4bf; flex: none; }
.ai-allow-ico svg { width: 1.2rem; height: 1.2rem; }
.ai-allow-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; }
.ai-deny, .ai-ok { border-radius: .8rem; padding: .6rem; text-align: center; font-size: .85rem; font-weight: 700; }
.ai-deny { background: #e2e8f0; color: #0f172a; }
.ai-ok { background: #0f172a; color: #fff; }
.ai-muted { color: #64748b; font-size: .78rem; }

/* small cards: tighter on phones */
@media (min-width: 640px) { .ai-pad { padding: 1.75rem; } }

/* steps */
.ai-step { width: 2.4rem; height: 2.4rem; border-radius: 9999px; display: grid; place-items: center; font-weight: 700; color: #2dd4bf; background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.35); }

/* privacy details button */
.ai-details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.16); padding: .8rem 1.5rem; font-weight: 600; color: #fff; transition: background-color .2s; }
.ai-details > summary::-webkit-details-marker { display: none; }
.ai-details > summary:hover { background: rgba(255,255,255,.06); }
.ai-details > summary:focus-visible { outline: 2px solid rgba(45,212,191,.8); outline-offset: 2px; }
.ai-chev { width: 1rem; height: 1rem; transition: transform .2s; }
.ai-details[open] .ai-chev { transform: rotate(180deg); }
.ai-details dl { display: grid; gap: 1.1rem; margin-top: 1.5rem; text-align: left; }
@media (min-width: 768px) { .ai-details dl { grid-template-columns: 1fr 1fr; } }
.ai-details dt { font-weight: 600; color: #fff; }
.ai-details dd { margin-top: .3rem; color: #94a3b8; font-size: .9rem; line-height: 1.6; }

/* gentle motion, off for reduced-motion users */
@keyframes ai-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ai-bob { animation: ai-bob 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ai-bob { animation: none; } .ai-chev, .ai-details > summary { transition: none; } }