/* Authentica AI, production styles (Brand Map V1.0) */
:root{
  --space:#0B0E16; --purple:#5B1376; --violet:#7B5CFF; --coral:#FF6B5B; --amber:#FFB03A; --blue:#218886; --cloud:#F6F7F8;
  --muted:rgba(246,247,248,.72); --faint:rgba(246,247,248,.62);
  --glass-bg:rgba(255,255,255,.10); --glass-border:1px solid rgba(255,255,255,.12); --radius:18px;
  --grad:linear-gradient(90deg,#7B5CFF 0%,#B54AB8 50%,#FF6B5B 100%);
  /* button gradient: same hues, deepened so white label text meets WCAG AA (min 4.8:1) */
  --grad-btn:linear-gradient(90deg,#6A4BE6 0%,#9E3FA6 50%,#C8443A 100%);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --focus:0 0 0 3px #0B0E16,0 0 0 5px #FFB03A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--space);scroll-padding-top:24px}
body{background:var(--space);color:var(--cloud);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:Poppins,system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.12}
p,h1,h2,h3{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}
.btn:focus-visible,.play:focus-visible,.burger:focus-visible{border-radius:999px}
.burger:focus-visible{border-radius:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--cloud);color:var(--space);padding:12px 18px;border-radius:12px;font-weight:600;font-size:15px;transition:top .2s}
.skip:focus{top:16px}

.wrap{max-width:1200px;margin:0 auto;padding:0 48px;position:relative;z-index:2}
.eyebrow{font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:20px}
.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:var(--glass-border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.18)}
section{position:relative;overflow-x:clip}
html,body{overflow-x:clip}
section > .wrap{width:100%}
.sec{display:flex;align-items:center;padding:144px 0}

/* buttons */
.btns{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;border-radius:999px;font-weight:600;font-size:16px;letter-spacing:.01em;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
.btn-grad{background:var(--grad-btn);color:#fff;box-shadow:0 10px 30px rgba(255,107,91,.20),0 6px 24px rgba(123,92,255,.25)}
.btn-grad:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(255,107,91,.28),0 8px 28px rgba(123,92,255,.32)}
.btn-glass{background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.28);color:var(--cloud)}
.btn-glass:hover{background:rgba(255,255,255,.12)}
.btn-glass svg{width:14px;height:14px}

/* header + nav */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:28px}
.brand{display:block;border-radius:10px}
.brand img{display:block;width:118px;height:auto}
.nav-list{display:flex;gap:40px;list-style:none;font-size:15px;font-weight:500}
.nav-list a{color:var(--muted);padding:6px 2px;transition:color .2s}
.nav-list a:hover{color:var(--cloud)}
.burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;position:relative;z-index:31}
.burger .bars,.burger .bars::before,.burger .bars::after{display:block;width:18px;height:1.5px;background:var(--cloud);border-radius:2px;position:relative;transition:transform .3s var(--ease),background-color .2s}
.burger .bars::before,.burger .bars::after{content:"";position:absolute;left:0}
.burger .bars::before{top:-6px}.burger .bars::after{top:6px}
.burger[aria-expanded="true"] .bars{background:transparent}
.burger[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

/* hero */
#hero{min-height:min(100vh,940px);min-height:min(100svh,940px);display:flex;align-items:center;padding:150px 0 170px}
#hero .horizon{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);background:radial-gradient(ellipse 55% 50% at 50% 80%, rgba(255,176,58,.26), transparent 60%),radial-gradient(ellipse 75% 65% at 50% 80%, rgba(255,107,91,.30), transparent 62%),radial-gradient(ellipse 100% 80% at 50% 80%, rgba(91,19,118,.50), transparent 70%)}
#hero .horizon::after{bottom:84px}
#hero .grid{display:grid;grid-template-columns:1.22fr .78fr;gap:32px;align-items:center}
#hero h1{font-size:62px;margin-bottom:28px;max-width:700px}
#hero h1 .soft{display:block;background:linear-gradient(90deg,#B9A9FF 0%,#FF9A8A 60%,#FFC878 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#hero .lede{font-size:20px;color:var(--muted);max-width:540px;margin-bottom:44px}
.orb-col{display:flex;justify-content:center}
br.m{display:none}
.horizon{position:absolute;left:0;right:0;bottom:0;height:420px;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 60% at 50% 100%, rgba(255,176,58,.30), transparent 60%),
    radial-gradient(ellipse 75% 75% at 50% 100%, rgba(255,107,91,.32), transparent 62%),
    radial-gradient(ellipse 100% 90% at 50% 100%, rgba(91,19,118,.55), transparent 70%);}
.horizon::after{content:"";position:absolute;left:8%;right:8%;bottom:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,190,150,.55),transparent);box-shadow:0 0 18px 2px rgba(255,120,90,.35)}
.sky{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 78% 35%, rgba(123,92,255,.14), transparent 70%),radial-gradient(ellipse 40% 35% at 10% 10%, rgba(91,19,118,.25), transparent 70%)}

  background:conic-gradient(from 200deg, #FF6B5B 0deg, #FFB03A 28deg, #FF6B5B 60deg, #C0409E 110deg, #7B5CFF 170deg, #6F8BFF 215deg, #7B5CFF 260deg, #B04BC0 310deg, #FF6B5B 360deg);
  -webkit-mask:radial-gradient(circle, transparent 63%, #000 68.5%, #000 69.6%, transparent 70.8%);mask:radial-gradient(circle, transparent 63%, #000 68.5%, #000 69.6%, transparent 70.8%);
  animation:shift 36s linear infinite}
  background:radial-gradient(circle at 38% 70%, rgba(255,107,91,.22), transparent 40%),radial-gradient(circle at 66% 30%, rgba(123,92,255,.30), transparent 45%),radial-gradient(circle at 50% 50%, rgba(20,14,40,.96) 45%, rgba(40,20,70,.6) 68%, transparent 71%)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes glow{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes shift{to{transform:rotate(360deg)}}

/* concept + trailer */
#concept .wrap{max-width:1296px}
#concept .grid{display:grid;grid-template-columns:410px 1fr;gap:56px;align-items:center}
#concept h2{font-size:40px;margin-bottom:28px}
#concept p:not(.eyebrow){color:var(--muted)}
#concept p strong{color:var(--cloud);font-weight:600}
.film{position:relative}
.player{padding:12px;position:relative}
.player .frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.player .frame img,.player .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.player .frame img{object-fit:cover}
.play{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:12px;background:radial-gradient(ellipse at center, rgba(11,14,22,.15), rgba(11,14,22,.55))}
.play .icon{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.35);box-shadow:0 0 0 10px rgba(255,255,255,.05),0 12px 40px rgba(0,0,0,.4);transition:transform .3s var(--ease),background-color .3s var(--ease)}
.play:hover .icon,.play:focus-visible .icon{transform:scale(1.06);background:rgba(255,255,255,.22)}
.play:focus-visible{box-shadow:inset 0 0 0 3px #FFB03A}
.play svg{width:30px;height:30px;margin-left:5px}
.caption{margin-top:16px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:10px}
.caption .dot{width:6px;height:6px;border-radius:50%;background:var(--coral)}
.player-glow{position:absolute;inset:10% -4% -8% -4%;background:radial-gradient(ellipse at center, rgba(123,92,255,.28), rgba(255,107,91,.10) 50%, transparent 70%);filter:blur(30px);z-index:-1}

/* what it is */
#what{text-align:center}
#what .wrap{width:100%}
#what h2{font-size:52px;margin-bottom:64px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:left;list-style:none}
.card{padding:40px 36px 44px;position:relative}
.card .bar{width:40px;height:3px;border-radius:3px;background:var(--grad);margin-bottom:28px}
.card:nth-child(2) .bar{background:linear-gradient(90deg,#FF6B5B,#FFB03A)}
.card:nth-child(3) .bar{background:linear-gradient(90deg,#218886,#7B5CFF)}
.card h3{font-size:24px;margin-bottom:14px}
.card p{color:var(--muted);font-size:17px}
.amb{position:absolute;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none}
.amb-1{width:520px;height:320px;left:-120px;top:260px;background:rgba(91,19,118,.45)}
.amb-2{width:460px;height:300px;right:-80px;top:420px;background:rgba(33,136,134,.28)}
.amb-3{width:380px;height:240px;left:40%;top:520px;background:rgba(255,107,91,.16)}
.amb-4{width:560px;height:560px;right:120px;top:170px;background:radial-gradient(circle, rgba(123,92,255,.35), rgba(255,107,91,.12) 60%, transparent 70%)}

/* coming soon */
#soon .wrap{width:100%}
#soon .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
#soon h2{font-size:52px;margin-bottom:24px}
#soon .line{font-family:Poppins,sans-serif;font-weight:500;font-size:22px;background:linear-gradient(90deg,#C9BCFF,#FF9A8A 70%,#FFC878);-webkit-background-clip:text;background-clip:text;color:transparent}
.phone-area{display:flex;justify-content:center;position:relative}
.phone{width:300px;height:620px;border-radius:48px;padding:12px;position:relative}
.phone .screen{position:relative;overflow:hidden;width:100%;height:100%;border-radius:38px;border:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:linear-gradient(180deg,rgba(11,14,22,.85),rgba(20,14,40,.85))}

/* company */
#company{padding:144px 0 40px;display:flex;align-items:center;overflow:visible}
#company .wrap{width:100%}
#company h2{font-size:52px;margin-bottom:24px}
.company-lead{font-size:20px;line-height:1.6;color:var(--muted);max-width:760px;margin-bottom:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none}
.tile{padding:30px 32px;display:flex;align-items:center}
.tile .v{font-family:Poppins,sans-serif;font-weight:500;font-size:21px;line-height:1.35}
.tile.team{grid-column:1 / -1}
.tile.team .v{font-size:20px}
.tile.team .sep{color:var(--faint);padding:0 12px}
.tile.team .role{color:var(--muted);font-family:Inter,sans-serif;font-weight:400;font-size:17px}
.tlabel{color:var(--faint);font-family:Inter,sans-serif;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-right:10px}

/* footer with closing horizon */
.site-footer{position:relative;padding:180px 0 36px;margin-top:-40px;overflow-x:clip}
.site-footer .horizon{height:520px}
.site-footer .horizon::after{bottom:140px}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.site-footer .foot-logo img{width:84px;display:block}
.site-footer a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(246,247,248,.35)}
.site-footer a:hover{color:var(--cloud)}
.site-footer .foot-logo{text-decoration:none}

/* reveal on scroll (only when JS is running) */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* privacy page */
.privacy-main{min-height:70vh;padding:200px 0 40px;position:relative}
.privacy-main .wrap{max-width:760px}
.privacy-main h1{font-size:52px;margin-bottom:32px}
.privacy-main p{color:var(--muted);margin-bottom:20px}
.privacy-main .panel{padding:28px 32px;margin-top:12px}
.privacy-main .panel p:last-child{margin-bottom:0}
.home-link{font-size:15px;font-weight:500;color:var(--muted);padding:6px 2px}
.home-link:hover{color:var(--cloud)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 24px}
  .sec{padding:88px 0}
  .site-header .wrap{padding-top:18px}
  .brand img{width:78px}
  .burger{display:flex}
  .burger{background:var(--glass-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:var(--glass-border)}
  .site-nav{position:fixed;inset:0;z-index:30;background:rgba(11,14,22,.97);display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s linear .3s}
  .site-nav.open{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
  .nav-list{flex-direction:column;align-items:center;gap:8px;font-family:Poppins,sans-serif;font-size:28px}
  .nav-list a{display:block;padding:14px 28px;color:var(--cloud)}
  .no-js .site-nav{position:static;visibility:visible;opacity:1;background:none}
  .no-js .nav-list{flex-direction:row;font-size:14px;gap:4px}
  .no-js .nav-list a{padding:8px}
  .no-js .burger{display:none}
  #hero{min-height:0;padding:128px 0 120px;align-items:flex-start}
  #hero .horizon::after{bottom:60px}
  #hero .grid{grid-template-columns:1fr;gap:36px}
  .orb-col{order:-1}
  #hero h1{font-size:40px;margin-bottom:18px}
  #hero .lede{font-size:17px;margin-bottom:32px}
  br.m{display:inline}
  .btns{flex-direction:column;gap:12px}
  .btn{width:100%}
  .horizon{height:300px}
  .horizon::after{bottom:44px}
  .eyebrow{font-size:12px;margin-bottom:14px}
  #concept .grid{grid-template-columns:1fr;gap:36px}
  #concept h2{font-size:32px;margin-bottom:18px}
  .player{padding:8px}
  .play .icon{width:68px;height:68px}
  .play svg{width:22px;height:22px}
  #what h2{font-size:38px;margin-bottom:36px}
  .cards{grid-template-columns:1fr;gap:16px}
  .card{padding:28px 26px 30px}
  .card .bar{margin-bottom:20px}
  .card h3{font-size:22px}
  #soon .grid{grid-template-columns:1fr;gap:44px}
  #soon h2{font-size:36px}
  #soon .line{font-size:19px}
  .amb-4{right:auto;left:-80px;top:360px}
  .phone{width:250px;height:516px;border-radius:42px}
  .phone .screen{border-radius:32px}
  #company{padding:88px 0 24px}
  #company h2{font-size:36px;margin-bottom:18px}
  .company-lead{font-size:17px;margin-bottom:0}
  .tiles{grid-template-columns:1fr;gap:14px}
  .tile{padding:22px 24px}
  .tile .v{font-size:19px}
  .tile.team .sep{display:none}
  .tile.team .person{display:block;margin-top:6px}
  .tile.team .tlabel{display:block;margin-bottom:6px}
  .site-footer{padding:150px 0 28px}
  .site-footer .wrap{flex-direction:column;gap:18px;align-items:flex-start}
  .site-footer .horizon{height:380px}
  .site-footer .horizon::after{bottom:150px}
  .privacy-main{padding:140px 0 24px}
  .privacy-main h1{font-size:40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* Stella orb (real art) */
.orb-art{position:relative;width:540px;height:540px;margin:-70px;animation:breathe 5s ease-in-out infinite}
.orb-art img{position:relative;display:block;width:100%;height:100%;animation:lightshift 12s ease-in-out infinite}
.orb-halo{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle, rgba(123,92,255,.28) 35%, rgba(255,107,91,.12) 55%, transparent 70%);filter:blur(24px);animation:glow 5s ease-in-out infinite}
@keyframes lightshift{0%,100%{filter:brightness(1) saturate(1) hue-rotate(0deg)}50%{filter:brightness(1.08) saturate(1.08) hue-rotate(-8deg)}}

/* phone with real app screen */
.phone{height:auto}
.phone .screen{height:auto;aspect-ratio:1080/2276;display:block;background:#080e1c;border:0}
.phone .screen picture,.phone .screen img{display:block;width:100%;height:100%}
.phone .screen img{object-fit:cover}
@media (max-width:760px){
  .orb-art{width:330px;height:330px;margin:-47px}
  .phone{height:auto}
}

/* team */
#team{padding-top:160px}
#team h2{font-size:52px;margin-bottom:56px;max-width:720px}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none}
.person-card{padding:40px 36px 44px}
.monogram{width:88px;height:88px;border-radius:50%;padding:2px;background:conic-gradient(from 210deg,#7B5CFF,#B54AB8,#FF6B5B,#FFB03A,#7B5CFF);margin-bottom:28px;box-shadow:0 0 28px rgba(123,92,255,.28),0 0 44px rgba(255,107,91,.12)}
.monogram span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1B1830,#0B0E16 70%);font-family:Poppins,sans-serif;font-weight:500;font-size:26px;letter-spacing:.04em;color:var(--cloud)}
.person-card:nth-child(2) .monogram{background:conic-gradient(from 210deg,#FF6B5B,#FFB03A,#B54AB8,#7B5CFF,#FF6B5B)}
.person-card:nth-child(3) .monogram{background:conic-gradient(from 210deg,#218886,#7B5CFF,#B54AB8,#218886)}
.person-card h3{font-size:24px;margin-bottom:6px}
.role-line{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.bio{color:var(--muted);font-size:17px}
.amb-5{width:520px;height:340px;left:30%;top:300px;background:rgba(91,19,118,.35)}

/* contact */
#contact{padding-bottom:120px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
#contact h2{font-size:52px;margin-bottom:24px}
.contact-line{color:var(--muted);font-size:19px;max-width:460px}
.contact-card{padding:40px 40px 36px}
.contact-email{display:inline-flex;align-items:center;gap:14px;font-family:Poppins,sans-serif;font-weight:500;font-size:26px;color:var(--cloud);border-radius:10px;padding:4px 2px}
.contact-email svg{width:28px;height:28px;color:#C9BCFF;flex:none}
.contact-email span{background:linear-gradient(90deg,#C9BCFF,#FF9A8A 70%,#FFC878);-webkit-background-clip:text;background-clip:text;color:transparent;border-bottom:1px solid rgba(255,154,138,.35);padding-bottom:2px}
.contact-email:hover span{border-bottom-color:rgba(255,154,138,.8)}
.contact-org{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);color:var(--muted);font-size:16px}

@media (max-width:760px){
  #team{padding-top:104px}
  #team h2{font-size:36px;margin-bottom:32px}
  .people{grid-template-columns:1fr;gap:16px}
  .person-card{padding:28px 26px 30px}
  .monogram{width:72px;height:72px;margin-bottom:20px}
  .monogram span{font-size:22px}
  .person-card h3{font-size:22px}
  .role-line{font-size:12px;margin-bottom:12px}
  .amb-5{left:-120px;top:420px}
  #contact{padding-bottom:88px}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  #contact h2{font-size:36px;margin-bottom:16px}
  .contact-line{font-size:17px}
  .contact-card{padding:28px 24px 26px}
  .contact-email{font-size:19px;gap:10px}
  .contact-email svg{width:22px;height:22px}
  .contact-org{font-size:15px;margin-top:18px;padding-top:18px}
}

/* Team headshots in the gradient ring */
.monogram.has-photo{width:112px;height:112px;padding:3px}
.monogram.has-photo picture,.monogram.has-photo img{display:block;width:100%;height:100%;border-radius:50%}
.monogram.has-photo img{object-fit:cover;background:#0B0E16;border:2px solid #0B0E16}
@media (max-width:760px){.monogram.has-photo{width:96px;height:96px}}

/* digital echo artwork (real art from the original authentica.ai site) */
#what .echo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);grid-template-areas:"head art" "cards art";column-gap:48px;align-items:center;text-align:left;max-width:1200px}
#what .echo-head{grid-area:head;align-self:end}
#what .echo-head h2{margin-bottom:44px}
#what .cards{grid-area:cards;grid-template-columns:1fr;gap:18px;align-self:start}
#what .card{padding:28px 32px 30px;display:grid;grid-template-columns:40px 1fr;column-gap:24px;align-items:start}
#what .card .bar{grid-row:1 / span 2;margin:14px 0 0}
#what .card h3{margin-bottom:6px}
.echo-art{grid-area:art;position:relative;margin:0;justify-self:end;width:100%}
.echo-frame{position:relative;animation:echoFloat 11s var(--ease) infinite alternate;--fade-x:linear-gradient(90deg,transparent 0%,#000 12%,#000 82%,transparent 100%);--fade-y:linear-gradient(180deg,transparent 0%,#000 12%,#000 70%,transparent 98%);-webkit-mask-image:var(--fade-x),var(--fade-y);-webkit-mask-composite:source-in;mask-image:var(--fade-x),var(--fade-y);mask-composite:intersect}
.echo-frame img{display:block;width:100%;height:auto;animation:echoLight 12s ease-in-out infinite}
.echo-glow{position:absolute;inset:8% 0 4% 6%;border-radius:50%;background:radial-gradient(ellipse at 40% 45%,rgba(123,92,255,.42),rgba(181,74,184,.20) 45%,rgba(255,107,91,.12) 62%,transparent 74%);filter:blur(40px);z-index:0;animation:glow 9s ease-in-out infinite}
.echo-art::after{content:"";position:absolute;left:14%;right:14%;bottom:6%;height:22%;background:radial-gradient(ellipse at center,rgba(255,176,58,.16),transparent 70%);filter:blur(28px);pointer-events:none}
@keyframes echoFloat{0%{transform:translateY(6px) scale(1)}100%{transform:translateY(-10px) scale(1.035)}}
@keyframes echoLight{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.1) saturate(1.12)}}
@media (max-width:980px) and (min-width:761px){
  #what .echo-grid{grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:40px}
}
@media (max-width:760px){
  #what .echo-grid{display:block}
  #what .echo-head h2{margin-bottom:8px}
  .echo-art{width:calc(100% + 48px);margin:0 -24px 8px;max-width:none}
  .echo-frame{--fade-x:linear-gradient(90deg,transparent 0%,#000 11%,#000 84%,transparent 100%);--fade-y:linear-gradient(180deg,transparent 0%,#000 14%,#000 70%,transparent 97%)}
  #what .card{padding:24px 24px 26px;grid-template-columns:1fr}
  #what .card .bar{grid-row:auto;margin:0 0 18px}
}