/* GramGrid landing-only patch v5: fixed desktop cropping + mobile-fit demo */
html, body { max-width: 100%; overflow-x: hidden; }
body.gramgrid-premium-home {
  background:
    radial-gradient(circle at 9% 14%, rgba(214, 41, 118, .25), transparent 30%),
    radial-gradient(circle at 91% 8%, rgba(64, 93, 230, .22), transparent 32%),
    radial-gradient(circle at 54% 72%, rgba(250, 126, 30, .09), transparent 32%),
    #06070d !important;
}
.gramgrid-premium-home .site-header {
  background: rgba(7, 8, 15, .82) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(18px);
}
.gramgrid-premium-home .site-footer {
  background: rgba(7, 8, 15, .96);
  border-top: 1px solid rgba(255,255,255,.08);
}
.ggx-container { width: min(1440px, calc(100% - 40px)); }
.ggx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(46px, 6.2vw, 86px) 0 70px;
  background:
    linear-gradient(90deg, rgba(214,41,118,.16), transparent 34%),
    linear-gradient(270deg, rgba(64,93,230,.16), transparent 32%);
}
.ggx-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: .36;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.ggx-orb { position:absolute; z-index:-3; border-radius:999px; filter:blur(64px); opacity:.62; pointer-events:none; animation:ggxFloat 12s ease-in-out infinite; }
.ggx-orb-pink{width:360px;height:360px;left:-140px;top:10px;background:rgba(214,41,118,.42)}
.ggx-orb-blue{width:350px;height:350px;right:-120px;top:20px;background:rgba(64,93,230,.36);animation-delay:-3s}
.ggx-orb-gold{width:230px;height:230px;left:44%;bottom:-60px;background:rgba(250,126,30,.22);animation-delay:-6s}
@keyframes ggxFloat { 50% { transform: translate3d(0,-22px,0) scale(1.04); } }
.ggx-hero-grid {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(560px, 1.08fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}
.ggx-copy { min-width: 0; max-width: 690px; }
.ggx-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 13px;
  border-radius:999px;
  color:#f4f6ff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  font-size:.86rem;
  font-weight:900;
}
.ggx-kicker i { width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,#feda75,#d62976,#405de6); box-shadow:0 0 18px rgba(214,41,118,.9); }
.ggx-copy h1 {
  margin: 18px 0 22px;
  color:#fff;
  font-size: clamp(3.2rem, 5.4vw, 6.2rem);
  line-height: .91;
  letter-spacing: -.08em;
  font-weight: 1000;
}
.ggx-copy h1 span { display:block; }
.ggx-lead {
  color:#c8cfdf;
  font-size: clamp(1.03rem, 1.55vw, 1.26rem);
  line-height: 1.65;
  margin:0;
  max-width: 640px;
}
.ggx-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.ggx-primary { background:linear-gradient(135deg,#feda75 0%,#fa7e1e 18%,#d62976 52%,#962fbf 74%,#405de6 100%) !important; box-shadow:0 20px 48px rgba(214,41,118,.28) !important; border:0 !important; font-weight:950 !important; }
.ggx-secondary { background:rgba(255,255,255,.075) !important; border:1px solid rgba(255,255,255,.15) !important; color:#fff !important; font-weight:900 !important; }
.ggx-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:30px; }
.ggx-metrics div { padding:15px 16px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.09); }
.ggx-metrics strong { display:block; color:#fff; font-size:.94rem; }
.ggx-metrics span { display:block; color:#abb4c9; font-size:.83rem; line-height:1.35; margin-top:5px; }
.ggx-demo-wrap { min-width:0; width:100%; display:grid; place-items:center; position:relative; }
.ggx-desktop-demo { width:100%; min-width:0; display:grid; place-items:center; }
.ggx-window {
  position:relative;
  width: min(100%, 720px);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 110px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
}
.ggx-windowbar {
  height:48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 18px;
  color:#eef2ff;
  background:rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.ggx-windowbar > span { display:flex; gap:8px; }
.ggx-windowbar i { width:10px; height:10px; display:block; border-radius:50%; background:#ff5f57; }
.ggx-windowbar i:nth-child(2){background:#ffbd2e}.ggx-windowbar i:nth-child(3){background:#28c840}
.ggx-windowbar strong { font-size:.95rem; }
.ggx-windowbar em { justify-self:end; color:#8e98ad; font-style:normal; font-size:.78rem; font-weight:800; }
.ggx-studio-compact {
  display:grid;
  grid-template-columns: minmax(0, 270px) minmax(0, 330px);
  gap:18px;
  padding:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
}
.ggx-upload-panel, .ggx-phone-panel {
  min-width:0;
  border-radius:25px;
  background:rgba(7,9,18,.78);
  border:1px solid rgba(255,255,255,.085);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ggx-upload-panel { padding:16px; align-self:stretch; }
.ggx-phone-panel { padding:14px; }
.ggx-brand-row { display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.ggx-brand-row b { width:34px; height:34px; border-radius:12px; background:linear-gradient(135deg,#feda75,#d62976,#405de6); }
.ggx-brand-row strong { color:#fff; font-size:1rem; }
.ggx-brand-row span { margin-left:auto; color:#8e98ad; font-size:.73rem; font-weight:850; }
.ggx-panel-head { display:flex; justify-content:space-between; gap:14px; align-items:start; margin-bottom:14px; }
.ggx-panel-head strong { color:#fff; font-size:1rem; line-height:1.18; }
.ggx-panel-head span { color:#8e98ad; font-size:.76rem; font-weight:850; line-height:1.25; }
.ggx-dropzone {
  height:132px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:22px;
  border:1px dashed rgba(255,255,255,.2);
  background:radial-gradient(circle at 50% 0,rgba(214,41,118,.22),transparent 66%),rgba(255,255,255,.03);
  margin-bottom:14px;
}
.ggx-dropzone b { width:48px; height:48px; display:grid; place-items:center; border-radius:17px; margin:0 auto 8px; color:#fff; font-size:1.5rem; background:linear-gradient(135deg,#feda75,#d62976,#405de6); }
.ggx-dropzone strong, .ggx-dropzone span { display:block; }
.ggx-dropzone strong { color:#fff; font-size:.95rem; }
.ggx-dropzone span { color:#96a1b8; font-size:.78rem; margin-top:4px; }
.ggx-queue { display:grid; gap:10px; }
.ggx-queue-item {
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:9px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  opacity:0;
  transform:translateX(-14px);
  animation:ggxQueueIn .5s ease forwards;
  animation-delay:calc(.35s + var(--d) * .18s);
}
@keyframes ggxQueueIn { to { opacity:1; transform:translateX(0); } }
.ggx-queue-item img { width:46px; height:46px; border-radius:12px; object-fit:cover; }
.ggx-queue-item strong, .ggx-queue-item span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ggx-queue-item strong { color:#fff; font-size:.78rem; }
.ggx-queue-item span { color:#94e8b6; font-size:.72rem; }
.ggx-queue-item > b { padding:6px 8px; border-radius:999px; color:#8ff0ba; background:rgba(50,211,122,.14); font-size:.68rem; }
.ggx-phone { position:relative; width:100%; max-width:286px; margin:0 auto; border:8px solid #0b0c12; border-radius:32px; overflow:hidden; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.34); }
.ggx-speaker { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:72px; height:5px; border-radius:999px; background:#111; opacity:.78; z-index:2; }
.ggx-ig { color:#111; background:#fff; padding-top:16px; }
.ggx-ig-top { height:34px; display:flex; align-items:center; justify-content:space-between; padding:0 11px; border-bottom:1px solid #eee; font-size:.72rem; }
.ggx-ig-top strong { max-width:128px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ggx-ig-top em { font-style:normal; letter-spacing:2px; }
.ggx-profile-row { display:grid; grid-template-columns:61px repeat(3,1fr); gap:5px; align-items:center; padding:12px 10px 6px; }
.ggx-avatar { width:56px; height:56px; padding:3px; border-radius:50%; background:linear-gradient(135deg,#feda75,#d62976,#405de6); }
.ggx-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #fff; }
.ggx-profile-row div:not(.ggx-avatar) { text-align:center; }
.ggx-profile-row b { display:block; font-size:.78rem; }
.ggx-profile-row span { display:block; font-size:.58rem; color:#333; }
.ggx-bio { padding:0 12px 9px; font-size:.67rem; line-height:1.35; }
.ggx-bio b, .ggx-bio span, .ggx-bio a { display:block; }
.ggx-bio a { color:#1d5ce7; font-weight:900; }
.ggx-profile-buttons { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 12px 9px; }
.ggx-profile-buttons span { display:block; text-align:center; padding:7px 5px; border-radius:8px; background:#efefef; font-size:.63rem; font-weight:900; }
.ggx-highlights { display:flex; gap:10px; overflow:hidden; padding:0 12px 9px; }
.ggx-highlights span { display:grid; justify-items:center; gap:4px; min-width:43px; font-size:.55rem; }
.ggx-highlights i { width:40px; height:40px; border-radius:50%; display:block; overflow:hidden; background:#f7f7f7; }
.ggx-highlights img { width:100%; height:100%; object-fit:cover; }
.ggx-tabs { display:grid; grid-template-columns:repeat(3,1fr); height:28px; border-top:1px solid #eee; border-bottom:1px solid #ddd; text-align:center; align-items:center; }
.ggx-tabs b { font-size:.72rem; }
.ggx-tabs b:first-child { height:28px; display:grid; place-items:center; border-bottom:2px solid #111; }
.ggx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#fff; }
.ggx-grid span { display:block; aspect-ratio:1/1; overflow:hidden; opacity:0; transform:scale(.88); animation:ggxGridIn .45s ease forwards; animation-delay:calc(1.05s + var(--i)*.12s); }
.ggx-grid img { width:100%; height:100%; object-fit:cover; }
.ggx-grid span:nth-child(4) { animation-name:ggxGridPulse; }
@keyframes ggxGridIn { to { opacity:1; transform:scale(1); } }
@keyframes ggxGridPulse { 50% { opacity:1; transform:scale(1.06); box-shadow:0 0 0 3px #d62976 inset; } 100% { opacity:1; transform:scale(1); } }
.ggx-flying-card {
  position:absolute;
  width:104px;
  padding:9px;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  color:#10111a;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  z-index:5;
  text-align:center;
  pointer-events:none;
}
.ggx-flying-card img { width:62px; height:62px; border-radius:14px; object-fit:cover; margin:0 auto 6px; }
.ggx-flying-card span { font-weight:950; font-size:.67rem; }
.ggx-fly-one { left:38%; top:50%; animation:ggxFlyOne 5.2s ease-in-out infinite; }
.ggx-fly-two { left:36%; top:59%; animation:ggxFlyTwo 5.2s ease-in-out infinite; animation-delay:2.3s; opacity:0; }
@keyframes ggxFlyOne { 0%,15%{opacity:0;transform:translate(-42px,-18px) scale(.86)} 30%,55%{opacity:1;transform:translate(0,0) scale(1)} 78%,100%{opacity:0;transform:translate(205px,92px) scale(.72)} }
@keyframes ggxFlyTwo { 0%,18%{opacity:0;transform:translate(-55px,5px) scale(.86)} 36%,58%{opacity:1;transform:translate(0,0) scale(1)} 82%,100%{opacity:0;transform:translate(210px,45px) scale(.72)} }
.ggx-share-toast {
  position:absolute;
  right:18px;
  bottom:18px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(12,16,28,.92);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  animation:ggxToast 5.2s ease-in-out infinite;
  z-index:6;
}
.ggx-share-toast i { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#33d17a; color:#05120a; font-style:normal; font-weight:950; }
.ggx-share-toast strong { display:block; font-size:.77rem; color:#fff; }
.ggx-share-toast span { display:block; color:#9aa7bc; font-size:.68rem; }
@keyframes ggxToast { 0%,70%{opacity:0;transform:translateY(12px)} 80%,96%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(12px)} }
.ggx-mobile-demo { display:none; }
.ggx-section { padding:82px 0; background:#070811; }
.ggx-section-head { text-align:center; max-width:850px; margin:0 auto 34px; }
.ggx-section-head.left { text-align:left; margin-left:0; }
.ggx-section-head h2 { font-size:clamp(2.25rem,4.3vw,4.7rem); line-height:.96; letter-spacing:-.07em; margin:16px 0 12px; color:#fff; }
.ggx-section-head p { color:#bec6d8; line-height:1.7; font-size:1.04rem; margin:0; }
.ggx-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ggx-steps article { min-height:230px; padding:22px; border-radius:28px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.09); transition:.25s ease; }
.ggx-steps article.active { transform:translateY(-4px); border-color:rgba(214,41,118,.38); box-shadow:0 22px 70px rgba(214,41,118,.13); }
.ggx-steps span { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:rgba(255,255,255,.08); font-weight:950; margin-bottom:22px; }
.ggx-steps article.active span { background:linear-gradient(135deg,#feda75,#d62976,#405de6); }
.ggx-steps h3 { margin:0 0 10px; color:#fff; }
.ggx-steps p { margin:0; color:#aeb8ce; line-height:1.6; }
.ggx-benefits { background:radial-gradient(circle at 86% 24%,rgba(64,93,230,.14),transparent 35%),#070811; }
.ggx-benefit-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:start; }
.ggx-benefit-stack { display:grid; gap:14px; }
.ggx-benefit-stack > div { display:grid; grid-template-columns:62px 1fr; grid-template-areas:'num title' 'num text'; gap:4px 16px; padding:20px; border-radius:28px; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.09); }
.ggx-benefit-stack b { grid-area:num; width:52px; height:52px; border-radius:18px; background:rgba(255,255,255,.08); display:grid; place-items:center; }
.ggx-benefit-stack strong { grid-area:title; color:#fff; font-size:1.08rem; }
.ggx-benefit-stack p { grid-area:text; margin:0; color:#aeb8ce; line-height:1.55; }
.ggx-gallery { padding-top:62px; }
.ggx-marquee { overflow:hidden; padding:18px 0; border-radius:32px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); }
.ggx-marquee > div { display:flex; width:max-content; gap:16px; animation:ggxMarquee 34s linear infinite; }
.ggx-marquee figure { margin:0; width:184px; height:184px; border-radius:28px; overflow:hidden; background:#111827; border:1px solid rgba(255,255,255,.08); box-shadow:0 16px 44px rgba(0,0,0,.2); }
.ggx-marquee img { width:100%; height:100%; object-fit:cover; }
@keyframes ggxMarquee { to { transform:translateX(-50%); } }
.ggx-final { padding-top:42px; padding-bottom:90px; }
.ggx-final-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:40px; border-radius:36px; background:radial-gradient(circle at 18% 20%,rgba(214,41,118,.25),transparent 34%),radial-gradient(circle at 88% 0,rgba(64,93,230,.23),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 100px rgba(0,0,0,.28); }
.ggx-final-card h2 { font-size:clamp(2.25rem,4.4vw,4.6rem); line-height:.96; letter-spacing:-.07em; margin:16px 0 12px; max-width:820px; color:#fff; }
.ggx-final-card p { max-width:700px; color:#c1c8d9; line-height:1.65; margin:0; }
.ggx-final-card .btn { flex:0 0 auto; }
@media (max-width:1240px) {
  .ggx-hero-grid { grid-template-columns: minmax(360px,.88fr) minmax(520px,1.12fr); gap:28px; }
  .ggx-window { width:min(100%, 670px); transform:perspective(1400px) rotateY(-2deg) rotateX(1deg); }
  .ggx-studio-compact { grid-template-columns:245px minmax(0,310px); gap:14px; padding:14px; }
  .ggx-copy h1 { font-size:clamp(3rem,5.1vw,5.3rem); }
}
@media (max-width:1080px) {
  .ggx-hero-grid, .ggx-benefit-grid { grid-template-columns:1fr; }
  .ggx-copy { max-width:820px; }
  .ggx-window { margin:0 auto; transform:none; }
  .ggx-steps { grid-template-columns:repeat(2,1fr); }
  .ggx-demo-wrap { margin-top:10px; }
}
@media (max-width:820px) {
  .ggx-container { width:min(100% - 24px, 1440px); }
  .ggx-hero { padding:34px 0 54px; }
  .ggx-copy h1 { font-size:clamp(2.52rem,11.2vw,4.05rem); letter-spacing:-.065em; line-height:.94; }
  .ggx-lead { font-size:1rem; line-height:1.58; }
  .ggx-actions .btn { width:100%; }
  .ggx-metrics { grid-template-columns:1fr; gap:10px; margin-top:22px; }
  .ggx-metrics div { padding:13px 14px; }
  .ggx-desktop-demo { display:none; }
  .ggx-mobile-demo { display:block; width:100%; }
  .ggx-mobile-card { width:100%; max-width:420px; margin:0 auto; border-radius:28px; background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045)); border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 80px rgba(0,0,0,.32); padding:14px; overflow:hidden; }
  .ggx-mobile-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
  .ggx-mobile-head strong { color:#fff; font-size:1rem; }
  .ggx-mobile-head span { color:#9aa7bc; font-size:.73rem; font-weight:850; text-align:right; }
  .ggx-mobile-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px; }
  .ggx-mobile-flow span { min-width:0; padding:7px 3px; border-radius:999px; background:rgba(255,255,255,.07); text-align:center; font-size:.65rem; font-weight:850; color:#aeb8ce; }
  .ggx-mobile-flow span.active { background:linear-gradient(135deg,#feda75,#d62976,#405de6); color:#fff; }
  .ggx-mobile-body { display:grid; grid-template-columns:68px minmax(0,1fr); gap:10px; align-items:start; }
  .ggx-mini-queue { display:grid; gap:8px; min-width:0; }
  .ggx-mini-queue i { display:block; width:68px; height:68px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.12); animation:ggxMiniQueue 3.2s ease-in-out infinite; }
  .ggx-mini-queue i:nth-child(2){animation-delay:.3s}.ggx-mini-queue i:nth-child(3){animation-delay:.6s}
  .ggx-mini-queue img { width:100%; height:100%; object-fit:cover; }
  @keyframes ggxMiniQueue { 50% { transform:translateX(8px) scale(1.035); } }
  .ggx-mini-phone { min-width:0; background:#fff; border:7px solid #0a0b10; border-radius:26px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.26); }
  .ggx-mini-profile { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:8px; padding:9px; }
  .ggx-mini-profile b { width:34px; height:34px; border-radius:50%; padding:2px; background:linear-gradient(135deg,#feda75,#d62976,#405de6); overflow:hidden; }
  .ggx-mini-profile b img { width:100%; height:100%; object-fit:cover; border-radius:50%; border:2px solid #fff; }
  .ggx-mini-profile span { color:#111; font-weight:950; font-size:.74rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ggx-mini-profile em { color:#6b7280; font-size:.58rem; font-style:normal; font-weight:800; }
  .ggx-mini-highlights { display:flex; gap:7px; padding:0 9px 8px; overflow:hidden; }
  .ggx-mini-highlights span { width:28px; height:28px; border-radius:50%; background:#f5f5f5; overflow:hidden; flex:0 0 auto; }
  .ggx-mini-highlights img { width:100%; height:100%; object-fit:cover; }
  .ggx-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#fff; }
  .ggx-mini-grid span { aspect-ratio:1/1; overflow:hidden; opacity:0; transform:scale(.88); animation:ggxGridIn .35s ease forwards; }
  .ggx-mini-grid span:nth-child(1){animation-delay:.08s}.ggx-mini-grid span:nth-child(2){animation-delay:.16s}.ggx-mini-grid span:nth-child(3){animation-delay:.24s}.ggx-mini-grid span:nth-child(4){animation-delay:.32s}.ggx-mini-grid span:nth-child(5){animation-delay:.40s}.ggx-mini-grid span:nth-child(6){animation-delay:.48s}.ggx-mini-grid span:nth-child(7){animation-delay:.56s}.ggx-mini-grid span:nth-child(8){animation-delay:.64s}.ggx-mini-grid span:nth-child(9){animation-delay:.72s}
  .ggx-mini-grid img { width:100%; height:100%; object-fit:cover; }
  .ggx-mobile-note { margin-top:12px; padding:12px; border-radius:18px; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.08); }
  .ggx-mobile-note b, .ggx-mobile-note span { display:block; }
  .ggx-mobile-note b { color:#fff; }
  .ggx-mobile-note span { color:#aeb8ce; font-size:.8rem; margin-top:3px; }
  .ggx-steps { grid-template-columns:1fr; }
  .ggx-steps article { min-height:auto; }
  .ggx-benefit-stack > div { grid-template-columns:1fr; grid-template-areas:'num' 'title' 'text'; }
  .ggx-final-card { flex-direction:column; align-items:flex-start; padding:26px; }
  .ggx-final-card .btn { width:100%; }
  .ggx-marquee figure { width:146px; height:146px; border-radius:22px; }
}
@media (max-width:420px) {
  .ggx-container { width:min(100% - 18px, 1440px); }
  .ggx-kicker { font-size:.75rem; padding:7px 10px; }
  .ggx-mobile-card { padding:11px; border-radius:24px; }
  .ggx-mobile-body { grid-template-columns:58px minmax(0,1fr); gap:8px; }
  .ggx-mini-queue i { width:58px; height:58px; border-radius:15px; }
  .ggx-mini-profile { grid-template-columns:30px 1fr; }
  .ggx-mini-profile em { display:none; }
  .ggx-mini-profile b { width:30px; height:30px; }
  .ggx-section { padding:60px 0; }
  .ggx-section-head h2 { font-size:2.45rem; }
  .ggx-final-card h2 { font-size:2.42rem; }
}

/* ===== GramGrid landing patch v6: compact desktop, full mobile animation, creative logo ===== */
.gramgrid-premium-home .brand-mark{
  position:relative;
  overflow:hidden;
  border-radius:15px;
  background:
    radial-gradient(circle at 78% 18%, #fff 0 4px, transparent 4.5px),
    conic-gradient(from 225deg,#feda75 0deg,#fa7e1e 62deg,#d62976 145deg,#962fbf 225deg,#405de6 310deg,#feda75 360deg) !important;
  box-shadow:0 14px 34px rgba(214,41,118,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.gramgrid-premium-home .brand-mark span{display:none !important;}
.gramgrid-premium-home .brand-mark:before{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:9px;
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.86) 0 2px, transparent 2.5px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 22% 50%, rgba(255,255,255,.78) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 2.5px, transparent 3px),
    radial-gradient(circle at 78% 50%, rgba(255,255,255,.78) 0 2px, transparent 2.5px),
    radial-gradient(circle at 22% 78%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 78%, rgba(255,255,255,.86) 0 2px, transparent 2.5px),
    radial-gradient(circle at 78% 78%, rgba(255,255,255,.95) 0 2px, transparent 2.5px);
  border:2px solid rgba(255,255,255,.72);
  transform:rotate(-8deg);
  box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 10px 18px rgba(0,0,0,.16);
}
.gramgrid-premium-home .brand-mark:after{
  content:"";
  position:absolute;
  width:18px;
  height:7px;
  right:5px;
  bottom:9px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  transform:rotate(-32deg);
  filter:blur(.1px);
}

@media (min-width:1081px){
  .ggx-hero{padding:54px 0 48px; min-height:auto;}
  .ggx-hero-grid{grid-template-columns:minmax(420px,.92fr) minmax(0,1.08fr); gap:30px; align-items:center;}
  .ggx-copy h1{font-size:clamp(4rem,5.25vw,6.25rem); line-height:.90;}
  .ggx-lead{font-size:clamp(.98rem,1.26vw,1.12rem); line-height:1.58; max-width:610px;}
  .ggx-actions{margin-top:22px;}
  .ggx-metrics{margin-top:22px; gap:10px;}
  .ggx-metrics div{padding:13px 14px;}
  .ggx-window{width:min(100%, 650px); border-radius:26px; transform:perspective(1200px) rotateY(-2.2deg) rotateX(1.1deg);}
  .ggx-windowbar{height:40px; padding:0 14px;}
  .ggx-studio-compact{grid-template-columns:minmax(0,238px) minmax(0,292px); gap:12px; padding:12px;}
  .ggx-upload-panel{padding:12px; border-radius:21px;}
  .ggx-phone-panel{padding:11px; border-radius:21px;}
  .ggx-brand-row{padding-bottom:10px; margin-bottom:10px;}
  .ggx-brand-row b{width:28px; height:28px; border-radius:10px;}
  .ggx-panel-head{margin-bottom:10px;}
  .ggx-dropzone{height:104px; border-radius:18px; margin-bottom:10px;}
  .ggx-dropzone b{width:38px; height:38px; border-radius:14px; margin-bottom:5px;}
  .ggx-queue{gap:7px;}
  .ggx-queue-item{grid-template-columns:38px minmax(0,1fr) auto; gap:8px; padding:7px; border-radius:15px;}
  .ggx-queue-item img{width:38px; height:38px; border-radius:10px;}
  .ggx-queue-item > b{padding:5px 7px; font-size:.62rem;}
  .ggx-phone{max-width:245px; border-width:7px; border-radius:28px;}
  .ggx-ig{padding-top:13px;}
  .ggx-ig-top{height:29px;}
  .ggx-profile-row{grid-template-columns:52px repeat(3,1fr); padding:9px 9px 5px;}
  .ggx-avatar{width:48px; height:48px;}
  .ggx-bio{font-size:.61rem; padding:0 10px 7px;}
  .ggx-profile-buttons{padding:0 10px 7px;}
  .ggx-profile-buttons span{padding:6px 5px; font-size:.58rem;}
  .ggx-highlights{padding:0 10px 7px; gap:8px;}
  .ggx-highlights i{width:34px; height:34px;}
  .ggx-highlights span{min-width:37px; font-size:.5rem;}
  .ggx-tabs{height:24px;}
  .ggx-tabs b:first-child{height:24px;}
  .ggx-flying-card{width:88px; padding:7px; border-radius:16px;}
  .ggx-flying-card img{width:50px; height:50px; border-radius:12px;}
  .ggx-fly-one{left:39%; top:49%;}
  .ggx-fly-two{left:38%; top:56%;}
  @keyframes ggxFlyOne { 0%,15%{opacity:0;transform:translate(-34px,-15px) scale(.86)} 30%,55%{opacity:1;transform:translate(0,0) scale(1)} 78%,100%{opacity:0;transform:translate(172px,72px) scale(.72)} }
  @keyframes ggxFlyTwo { 0%,18%{opacity:0;transform:translate(-42px,4px) scale(.86)} 36%,58%{opacity:1;transform:translate(0,0) scale(1)} 82%,100%{opacity:0;transform:translate(176px,38px) scale(.72)} }
  .ggx-share-toast{right:12px; bottom:12px; padding:9px 11px; border-radius:15px;}
}

@media (max-width:820px){
  html, body{max-width:100%; overflow-x:hidden;}
  .ggx-hero{padding:28px 0 44px; overflow:hidden;}
  .ggx-demo-wrap{overflow:hidden; width:100%;}
  .ggx-desktop-demo{display:grid !important; width:100%; min-width:0; overflow:hidden; place-items:center;}
  .ggx-mobile-demo{display:none !important;}
  .ggx-window{
    width:100%;
    max-width:420px;
    border-radius:24px;
    transform:none !important;
    margin:0 auto;
    overflow:hidden;
  }
  .ggx-windowbar{height:34px; padding:0 10px; grid-template-columns:auto 1fr auto; gap:8px;}
  .ggx-windowbar > span{gap:5px;}
  .ggx-windowbar i{width:7px; height:7px;}
  .ggx-windowbar strong{font-size:.76rem; justify-self:center;}
  .ggx-windowbar em{font-size:.58rem;}
  .ggx-studio-compact{
    grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    gap:7px;
    padding:7px;
  }
  .ggx-upload-panel,.ggx-phone-panel{border-radius:18px; min-width:0; overflow:hidden;}
  .ggx-upload-panel{padding:7px;}
  .ggx-phone-panel{padding:6px;}
  .ggx-brand-row{gap:6px; padding-bottom:7px; margin-bottom:7px;}
  .ggx-brand-row b{width:21px; height:21px; border-radius:8px;}
  .ggx-brand-row strong{font-size:.68rem;}
  .ggx-brand-row span{display:none;}
  .ggx-panel-head{margin-bottom:7px; gap:6px;}
  .ggx-panel-head strong{font-size:.68rem; line-height:1.1;}
  .ggx-panel-head span{font-size:.54rem; line-height:1.05;}
  .ggx-dropzone{height:62px; margin-bottom:7px; border-radius:14px;}
  .ggx-dropzone b{width:26px; height:26px; border-radius:10px; font-size:1rem; margin-bottom:2px;}
  .ggx-dropzone strong{font-size:.58rem;}
  .ggx-dropzone span{display:none;}
  .ggx-queue{gap:5px;}
  .ggx-queue-item{grid-template-columns:28px minmax(0,1fr); gap:6px; padding:5px; border-radius:12px;}
  .ggx-queue-item img{width:28px; height:28px; border-radius:8px;}
  .ggx-queue-item strong{font-size:.55rem;}
  .ggx-queue-item span{font-size:.5rem;}
  .ggx-queue-item > b{display:none;}
  .ggx-phone{max-width:190px; width:100%; border-width:5px; border-radius:22px;}
  .ggx-speaker{top:5px; width:50px; height:4px;}
  .ggx-ig{padding-top:9px;}
  .ggx-ig-top{height:24px; padding:0 7px; font-size:.55rem;}
  .ggx-ig-top strong{max-width:78px;}
  .ggx-ig-top em{letter-spacing:1px;}
  .ggx-profile-row{grid-template-columns:40px repeat(3,1fr); gap:3px; padding:7px 6px 4px;}
  .ggx-avatar{width:36px; height:36px; padding:2px;}
  .ggx-profile-row b{font-size:.56rem;}
  .ggx-profile-row span{font-size:.43rem;}
  .ggx-bio{padding:0 7px 5px; font-size:.49rem; line-height:1.2;}
  .ggx-bio span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .ggx-profile-buttons{gap:4px; padding:0 7px 5px;}
  .ggx-profile-buttons span{padding:4px 2px; border-radius:6px; font-size:.47rem;}
  .ggx-highlights{gap:5px; padding:0 7px 5px;}
  .ggx-highlights span{min-width:25px; gap:2px; font-size:.4rem;}
  .ggx-highlights i{width:24px; height:24px;}
  .ggx-tabs{height:20px;}
  .ggx-tabs b{font-size:.55rem;}
  .ggx-tabs b:first-child{height:20px;}
  .ggx-grid{gap:1px;}
  .ggx-flying-card{width:58px; padding:5px; border-radius:13px;}
  .ggx-flying-card img{width:34px; height:34px; border-radius:9px; margin-bottom:3px;}
  .ggx-flying-card span{font-size:.48rem;}
  .ggx-fly-one{left:43%; top:48%;}
  .ggx-fly-two{left:42%; top:56%;}
  @keyframes ggxFlyOne { 0%,15%{opacity:0;transform:translate(-28px,-10px) scale(.82)} 30%,55%{opacity:1;transform:translate(0,0) scale(1)} 78%,100%{opacity:0;transform:translate(82px,45px) scale(.65)} }
  @keyframes ggxFlyTwo { 0%,18%{opacity:0;transform:translate(-34px,2px) scale(.82)} 36%,58%{opacity:1;transform:translate(0,0) scale(1)} 82%,100%{opacity:0;transform:translate(86px,28px) scale(.65)} }
  .ggx-share-toast{right:8px; bottom:8px; gap:6px; padding:7px 8px; border-radius:14px; max-width:185px;}
  .ggx-share-toast i{width:22px; height:22px; font-size:.7rem;}
  .ggx-share-toast strong{font-size:.55rem;}
  .ggx-share-toast span{font-size:.48rem;}
}

@media (max-width:420px){
  .ggx-window{max-width:100%;}
  .ggx-studio-compact{grid-template-columns:minmax(0,.40fr) minmax(0,.60fr); gap:6px; padding:6px;}
  .ggx-phone{max-width:176px;}
  .ggx-dropzone{height:56px;}
  .ggx-queue-item{grid-template-columns:25px minmax(0,1fr); padding:4px;}
  .ggx-queue-item img{width:25px; height:25px;}
  .ggx-panel-head span{display:none;}
  .ggx-share-toast{max-width:160px;}
}

@media (max-width:360px){
  .ggx-studio-compact{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);}
  .ggx-phone{max-width:164px;}
  .ggx-brand-row strong{font-size:.62rem;}
  .ggx-dropzone{height:50px;}
  .ggx-queue-item:nth-child(3){display:none;}
  .ggx-share-toast span{display:none;}
}