/* Glix visual refresh — local concept preview */
:root{
  --brand:#7c2cf3;
  --brand-2:#a866ff;
  --brand-ink:#5013a8;
  --ink:#181126;
  --ink-2:#564d65;
  --ink-3:#766d84;
  --bg-2:#faf8ff;
  --bg-3:#f1eaff;
  --line:#e8ddf8;
  --coral:#ff6b45;
  --cyan:#16b9e8;
  --sun:#ffcb45;
  --mint:#30c889;
  --shadow-sm:0 5px 18px rgba(54,25,95,.06);
  --shadow-md:0 18px 44px rgba(74,30,136,.12);
  --shadow-lg:0 32px 90px rgba(76,25,151,.18);
  --radius:22px;
  --max:1240px;
}

body{
  background:
    radial-gradient(circle at 8% 18%,rgba(255,203,69,.11),transparent 24rem),
    radial-gradient(circle at 94% 44%,rgba(22,185,232,.09),transparent 27rem),
    #fff;
}

.wrap{width:min(var(--max),calc(100% - 56px))}

.announcement{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:6px 20px;
  background:#33105f;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.announcement span{color:var(--sun)}

.header{
  height:110px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(124,44,243,.09);
  backdrop-filter:blur(20px);
}

.header.scrolled{box-shadow:0 10px 35px rgba(46,17,86,.09)}
.header .nav-wrap{height:80px;gap:34px}
body .header .logo img{width:110px;filter:none!important}
body .header .logo{display:flex;align-items:center;padding-right:28px;border-right:1px solid var(--line)}
body .header nav{margin-left:0;gap:25px;color:var(--ink-2);font-weight:700}
body .header .text-link{color:var(--ink-2);font-weight:700}
body .header .nav-actions{margin-left:auto}
.header nav a{position:relative}
.header nav a:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--coral));
  transition:right .2s ease;
}
.header nav a:hover:after{right:0}

.btn{
  border-radius:14px;
  border:0;
  background:linear-gradient(135deg,var(--brand),#9b45fb);
  box-shadow:0 12px 28px rgba(124,44,243,.25);
}
.btn:hover{background:linear-gradient(135deg,#6520d5,var(--brand));box-shadow:0 16px 34px rgba(124,44,243,.3)}
.header .nav-actions .btn.btn-sm{background:linear-gradient(135deg,var(--coral),#ff8c55);border:0}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 20px rgba(48,22,83,.06)}

.hero{
  position:relative;
  overflow:hidden;
  padding:92px 0 48px;
  background:
    radial-gradient(circle at 78% 18%,rgba(168,102,255,.24),transparent 31rem),
    radial-gradient(circle at 8% 7%,rgba(255,203,69,.23),transparent 20rem),
    linear-gradient(180deg,#fdfbff 0%,#fff 88%);
}

.hero:before,.hero:after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hero:before{width:150px;height:150px;left:-55px;top:150px;background:rgba(22,185,232,.12)}
.hero:after{width:100px;height:100px;right:3%;bottom:110px;border:24px solid rgba(255,107,69,.1)}

.hero-grid{grid-template-columns:.94fr 1.06fr;gap:34px;align-items:center}
.hero-copy{position:relative;z-index:2}
.badge{padding:9px 14px;border-color:rgba(124,44,243,.14);box-shadow:0 10px 24px rgba(73,28,126,.07)}
.badge b{background:var(--coral)}
.hero h1{max-width:700px;font-size:clamp(43px,4.7vw,60px);line-height:1.095;letter-spacing:-.05em;margin:26px 0 22px;overflow:visible}
.hero h1 em{
  background:linear-gradient(100deg,var(--brand),#bd4ff2 54%,var(--coral));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-right:.08em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero .lead{font-size:18px;line-height:1.72;max-width:59ch}
.hero-actions{margin:32px 0 20px}
.support-line{font-weight:600}
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:34px;
  padding-top:0;
  border:0;
}
.stats div{
  min-width:0;
  padding:15px 13px;
  border:1px solid rgba(124,44,243,.1);
  border-radius:16px;
  background:rgba(255,255,255,.76);
  box-shadow:var(--shadow-sm);
}
.stats div:nth-child(1){border-top:4px solid var(--brand)}
.stats div:nth-child(2){border-top:4px solid var(--cyan)}
.stats div:nth-child(3){border-top:4px solid var(--sun)}
.stats div:nth-child(4){border-top:4px solid var(--mint)}
.stats b{font-size:21px}
.stats span{font-size:10px;line-height:1.35;margin-top:3px}

.mock-wrap{min-height:535px;display:grid;place-items:start center;position:relative}
.mock-wrap>.mock,.mock-wrap>.float-card,.mock-wrap>.chan-orbit{display:none}
.hero-art{
  position:relative;
  width:calc(100% + 155px);
  margin-top:-52px;
  margin-right:-120px;
  filter:drop-shadow(0 28px 48px rgba(88,42,145,.18));
}
.hero-art:before{
  content:"";
  position:absolute;
  inset:12% 8% 6% 10%;
  z-index:-1;
  border-radius:45% 55% 44% 56%/55% 44% 56% 45%;
  background:linear-gradient(145deg,rgba(124,44,243,.16),rgba(22,185,232,.12));
  transform:rotate(-4deg);
}
.hero-art img{width:100%;height:auto;object-fit:contain}
.channel-cloud{
  position:absolute;
  z-index:4;
  left:9%;
  right:6%;
  bottom:1%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 13px;
  border:1px solid rgba(124,44,243,.13);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 40px rgba(68,28,113,.15);
  backdrop-filter:blur(12px);
}
.channel-cloud span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #eee6fa;border-radius:11px;background:#fff}
.channel-cloud img{width:20px;height:20px;object-fit:contain}
.channel-cloud small{margin-left:3px;font-size:10px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.art-sticker{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 16px;
  border:1px solid rgba(124,44,243,.14);
  border-radius:16px;
  background:rgba(255,255,255,.91);
  box-shadow:0 16px 36px rgba(68,28,113,.15);
  backdrop-filter:blur(10px);
  animation:refresh-float 5s ease-in-out infinite;
}
.art-sticker b{font-size:20px;color:var(--brand)}
.art-sticker span{font-size:11px;font-weight:800;color:var(--ink-2)}
.art-sticker-top{top:15%;right:4%;transform:rotate(3deg)}
.art-sticker-bottom{bottom:12%;left:3%;animation-delay:-2.2s}
.art-sticker-bottom b{color:var(--mint)}
@keyframes refresh-float{50%{translate:0 -9px}}

.integrations-strip{
  margin-top:42px;
  padding:24px 0 4px;
  border:0;
  border-radius:24px;
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 50px rgba(57,25,95,.07);
}
.logo-pill{border-radius:14px;background:#fff}

.section{position:relative;padding:112px 0}
.section-head{margin-bottom:52px}
.section-head .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--brand);
}
.section-head .eyebrow:before{content:"";width:22px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--coral),var(--sun))}
.section h2,.contact h2{font-size:clamp(32px,4vw,50px);line-height:1.06;letter-spacing:-.045em}
.section-head .lead{font-size:17px;line-height:1.7}

.motion-section.glix-map{overflow:hidden;background:linear-gradient(180deg,#fff 0%,#faf7ff 100%)}
.motion-section.glix-map:before{
  content:"";
  position:absolute;
  width:340px;height:340px;
  top:100px;left:-180px;
  border-radius:50%;
  background:rgba(255,203,69,.13);
}
.map-card{border-radius:20px!important;box-shadow:0 18px 40px rgba(57,24,94,.09)!important}
.map-card:nth-of-type(3n+1){transform:rotate(-1.5deg)}
.map-card:nth-of-type(3n+2){transform:rotate(1.5deg)}
.map-hub{
  overflow:visible!important;
  width:300px!important;
  height:300px!important;
  padding:0!important;
  border:0!important;
  background-color:transparent!important;
  background-image:url('ecosystem-joy-v2.png')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  box-shadow:none!important;
  filter:drop-shadow(0 22px 30px rgba(90,37,153,.24));
  animation:refresh-float 5.8s ease-in-out infinite;
}
.map-hub>*{display:none!important}

.features,.faq{background:linear-gradient(180deg,#faf8ff,#fff);border-color:rgba(124,44,243,.09)}
.feature-grid{grid-template-columns:repeat(12,1fr);gap:18px}
.feature-card{grid-column:span 4;border-radius:24px;padding:26px;border-color:rgba(124,44,243,.1);box-shadow:0 8px 24px rgba(63,25,104,.04)}
.feature-card:nth-child(1),.feature-card:nth-child(2){grid-column:span 6}
.feature-card:nth-child(6n+1) .line-icon{background:#efe3ff;color:var(--brand)}
.feature-card:nth-child(6n+2) .line-icon{background:#ddf7ff;color:#078bb4}
.feature-card:nth-child(6n+3) .line-icon{background:#fff0e8;color:var(--coral)}
.feature-card:nth-child(6n+4) .line-icon{background:#fff6d6;color:#b27d00}
.feature-card:nth-child(6n+5) .line-icon{background:#dcf8eb;color:#15945f}
.feature-card:nth-child(6n) .line-icon{background:#f0e8ff;color:#6d33d1}
.line-icon{width:48px;height:48px;border-radius:15px;font-size:20px}
.feature-card h3{font-size:18px;margin-top:20px}
.feature-card p{font-size:14px;line-height:1.62}
.feature-card:hover{transform:translateY(-6px) rotate(.25deg);box-shadow:0 22px 48px rgba(75,31,131,.12)}

.integrations{background:#fff}
.filters{gap:9px;padding:8px;border:1px solid var(--line);border-radius:18px;background:var(--bg-2);width:max-content;max-width:100%}
.filter{border:0;background:transparent;padding:10px 14px}
.filter.active{box-shadow:0 9px 20px rgba(124,44,243,.22)}
.integration-grid{gap:12px}
.integration-card{min-height:112px;border-radius:20px;border-color:rgba(124,44,243,.1);box-shadow:0 7px 20px rgba(63,25,104,.035)}
.integration-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px rgba(74,29,128,.11)}
.api-box{border:1px solid rgba(124,44,243,.1);border-radius:18px;background:linear-gradient(110deg,#f1e8ff,#f8f4ff 55%,#eafaff)}

.channels{
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 18%,rgba(22,185,232,.28),transparent 22rem),
    radial-gradient(circle at 12% 86%,rgba(255,107,69,.22),transparent 25rem),
    linear-gradient(145deg,#1d0d35,#4b158b 55%,#6b20c1);
}
.channels:after{
  content:"";
  position:absolute;
  right:-90px;bottom:-130px;
  width:330px;height:330px;
  border:45px solid rgba(255,255,255,.05);
  border-radius:50%;
}
.channel-grid{gap:18px}
.channel-brand-row{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:10px;
  margin:-8px 0 30px;
}
.channel-brand-row span{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:92px;
  padding:12px 8px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 30px rgba(12,4,25,.12);
}
.channel-brand-row img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.channel-brand-row b{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:11px;white-space:nowrap;color:var(--ink)}
.channel-card{position:relative;overflow:hidden;border-radius:24px;padding:28px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.channel-card:nth-child(4n+1){border-top:3px solid #57e292}
.channel-card:nth-child(4n+2){border-top:3px solid #6dd7ff}
.channel-card:nth-child(4n+3){border-top:3px solid #ffc84e}
.channel-card:nth-child(4n){border-top:3px solid #ff8062}

.platform-additions{background:linear-gradient(180deg,#fff,#fff9f4)}
.platform-additions .feature-card{background:rgba(255,255,255,.92)}
.additions-grid .feature-card{grid-column:span 4}

.segments{background:#fff}
.segment-grid{grid-template-columns:repeat(4,1fr);gap:14px}
.segment{min-height:68px;border-radius:18px;padding:15px;border-color:rgba(124,44,243,.1);box-shadow:0 7px 20px rgba(63,25,104,.035);transition:.2s}
.segment:nth-child(4n+1) i{background:#efe3ff;color:var(--brand)}
.segment:nth-child(4n+2) i{background:#ddf7ff;color:#078bb4}
.segment:nth-child(4n+3) i{background:#fff0e8;color:var(--coral)}
.segment:nth-child(4n) i{background:#dcf8eb;color:#15945f}
.segment:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

.faq-list{max-width:900px}
.faq-list details{border-radius:18px;margin-bottom:12px;box-shadow:0 7px 20px rgba(63,25,104,.035)}
.faq-list details[open]{box-shadow:0 16px 35px rgba(74,29,128,.09)}

.contact{padding:110px 0;background:linear-gradient(180deg,#fff,#faf7ff)}
.contact-card{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  background:
    radial-gradient(circle at 88% 18%,rgba(255,203,69,.28),transparent 16rem),
    radial-gradient(circle at 12% 82%,rgba(22,185,232,.25),transparent 18rem),
    linear-gradient(135deg,#8c38f5,#631bc4 60%,#441085);
}
.contact-card:before,.contact-card:after{content:"";position:absolute;border-radius:50%;border:22px solid rgba(255,255,255,.08)}
.contact-card:before{width:130px;height:130px;left:-58px;top:-52px}
.contact-card:after{width:95px;height:95px;right:5%;bottom:-55px}

footer{background:linear-gradient(145deg,#160827,#220d3c)}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-copy{max-width:830px}
  .mock-wrap{min-height:0;max-width:900px}
  .hero-art{width:100%;margin-right:0}
  .hero-art{margin-top:-20px}
  .feature-card{grid-column:span 6}
  .additions-grid .feature-card{grid-column:span 4}
}

@media(max-width:760px){
  .wrap{width:min(var(--max),calc(100% - 32px))}
  .announcement{font-size:9px;letter-spacing:.05em}
  .header{height:99px}
  .header .nav-wrap{height:69px}
  .header nav{top:99px}
  .hero{padding-top:62px}
  .hero h1{font-size:43px}
  .hero .lead{font-size:17px}
  .stats{grid-template-columns:1fr 1fr}
  .hero-art{width:112%;margin-left:-6%}
  .hero-art{margin-top:-8px;margin-right:0}
  .channel-cloud{left:4%;right:4%;overflow:hidden;justify-content:flex-start}
  .channel-cloud span:nth-of-type(n+6){display:none}
  .channel-cloud small{font-size:9px}
  .art-sticker{padding:9px 12px}
  .art-sticker b{font-size:17px}
  .integrations-strip{border-radius:18px;margin-top:24px}
  .section{padding:82px 0}
  .section h2,.contact h2{font-size:36px}
  .feature-grid{display:grid;grid-template-columns:1fr}
  .feature-card,.feature-card:nth-child(1),.feature-card:nth-child(2),.additions-grid .feature-card{grid-column:auto}
  .filters{width:100%;flex-wrap:nowrap;overflow-x:auto}
  .filter{white-space:nowrap}
  .segment-grid{grid-template-columns:1fr}
  .channel-brand-row{grid-template-columns:repeat(3,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .art-sticker{animation:none}
}