/* Device frames. iPhone reused verbatim (bezel/glass-sweep) from
   coexa-website/site/index.html .mock-frame family — only screen contents
   differ. iPad is new (no precedent existed). Desktop adapts .browser-frame
   from coexa-cinematic/style.css. */

/* ---------------------------------------------------------------- iPhone */
.iphone-wrap { position: relative; display: flex; justify-content: center; perspective: 1400px; }
.iphone-glow {
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E4D9FF, var(--grad-a) 42%, var(--grad-b) 75%, transparent 100%);
  filter: blur(60px); opacity: 0.3; animation: orbPulse 8s ease-in-out infinite; z-index: 0;
}
@keyframes orbPulse { 0%,100%{transform:scale(1) translateY(0);opacity:.26} 50%{transform:scale(1.1) translateY(-12px);opacity:.38} }

.iphone-frame {
  position: relative; z-index: 1; width: 300px; height: 608px; border-radius: 54px; padding: 4px;
  background: linear-gradient(155deg, #5a5d6b 0%, #2b2d36 18%, #1a1b21 45%, #3a3d49 70%, #6b6e7c 100%);
  box-shadow: 0 50px 100px rgba(20,20,50,0.16), 0 0 70px var(--grad-glow), 0 1px 0 rgba(255,255,255,0.25) inset;
  transform: rotateY(-6deg) rotateX(2deg); transition: transform .4s ease;
}
.iphone-frame:hover { transform: rotateY(-2deg) rotateX(1deg); }
.iphone-buttons::before, .iphone-buttons .btn-vol-up, .iphone-buttons .btn-vol-down {
  content:""; position:absolute; background:linear-gradient(90deg,#4a4d58,#1c1d23); border-radius:2px;
}
.iphone-buttons::before { right:-3px; top:150px; width:3px; height:64px; }
.iphone-buttons .btn-vol-up { left:-3px; top:130px; width:3px; height:36px; background:linear-gradient(90deg,#1c1d23,#4a4d58); }
.iphone-buttons .btn-vol-down { left:-3px; top:174px; width:3px; height:36px; background:linear-gradient(90deg,#1c1d23,#4a4d58); }

.iphone-screen {
  position:relative; width:100%; height:100%; border-radius:50px; overflow:hidden;
  background: linear-gradient(165deg, #FFFFFF, var(--bg-soft) 60%, #FFFFFF);
  display:flex; flex-direction:column; box-shadow:0 0 0 1px rgba(0,0,0,0.05) inset;
}
.iphone-screen::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(118deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 16%, transparent 32%, transparent 68%, rgba(139,92,246,0.06) 84%, rgba(255,111,168,0.10) 100%);
  mix-blend-mode:overlay; pointer-events:none; z-index:5;
}
.iphone-island { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:96px; height:26px; background:#000; border-radius:16px; z-index:6; }
.iphone-statusbar { position:relative; z-index:4; padding:16px 22px 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; color:var(--ink); }
.iphone-statusbar .icons { display:flex; align-items:center; gap:4px; }
.iphone-homebar { position:relative; z-index:4; width:110px; height:4px; border-radius:999px; background:rgba(0,0,0,0.14); margin:8px auto 10px; }

@media (max-width: 900px) {
  .iphone-frame { width: 240px; height: 486px; transform: none; }
  .iphone-glow { width: 320px; height: 320px; }
}

/* ------------------------------------------------------------------ iPad */
.ipad-wrap { position: relative; display: flex; justify-content: center; }
.ipad-glow {
  position: absolute; width: 560px; height: 420px; border-radius: 40%;
  background: radial-gradient(ellipse at 40% 35%, #FFE9C9, var(--memory-b) 45%, var(--memory-c) 80%, transparent 100%);
  filter: blur(70px); opacity: 0.22; z-index: 0;
}
.ipad-frame {
  position: relative; z-index: 1; width: 640px; height: 470px; border-radius: 34px; padding: 14px;
  background: linear-gradient(160deg, #6b6e7c 0%, #3a3d49 30%, #1a1b21 60%, #2b2d36 100%);
  box-shadow: 0 40px 90px rgba(20,20,50,0.14), 0 1px 0 rgba(255,255,255,0.2) inset;
}
.ipad-camera {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #0a0a0d;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.06); z-index: 6;
}
/* Dashboard content (the app itself, not the chat threads) now carries the
   same dark atmosphere as the marketing canvas — real color and grain for
   the glass tiles inside to actually refract, per the reference photo Joe
   supplied. The chat screens (.iphone-screen) deliberately stay untouched
   and white, matching real Instagram. */
.ipad-screen {
  position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
    radial-gradient(500px 400px at 8% 4%, var(--mesh-violet), transparent 55%),
    radial-gradient(460px 380px at 96% 100%, var(--mesh-pink), transparent 55%),
    radial-gradient(360px 300px at 90% 8%, var(--mesh-amber), transparent 60%),
    var(--canvas-bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset;
}
/* Content inside is sized for the full 640x470 desktop frame. Rather than
   reflow the layout at every shrink, scale it as one unit so the frame and
   its contents always stay in sync, on any viewport. */
.ipad-screen-inner { width: 640px; height: 470px; transform-origin: top left; }
.ipad-screen::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(122deg, rgba(255,255,255,0.4) 0%, transparent 26%, transparent 74%, rgba(255,184,107,0.08) 100%);
  mix-blend-mode:overlay; pointer-events:none; z-index:5;
}
@media (max-width: 900px) {
  .ipad-frame { width: 320px; height: 236px; padding: 8px; border-radius: 20px; }
  .ipad-glow { width: 340px; height: 260px; }
}

/* --------------------------------------------------------------- Desktop */
.desktop-wrap { position: relative; width: 100%; max-width: 900px; margin: 0 auto; }
.desktop-glow {
  position: absolute; inset: -60px; border-radius: 40px;
  background: radial-gradient(ellipse at 30% 20%, rgba(91,141,239,0.10), transparent 60%);
  z-index: 0; pointer-events: none;
}
.browser-frame {
  position: relative; z-index: 1; width: 100%; min-width: 0;
  max-width: 900px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  /* overflow:hidden above clips the frame's own CONTENT, not its box-shadow —
     the glow layer below still renders past the rounded corners. Kept to a
     single tight layer — a wide double-glow read as too much. */
  box-shadow:
    var(--shadow-card-lift), 0 0 0 1px rgba(20,20,40,0.06),
    0 0 0 1px rgba(139,92,246,0.22) inset,
    0 0 22px -8px var(--grad-glow);
  background: #fff;
}
.browser-content, .dash-main { min-width: 0; }
.browser-bar { background: #F3F3F7; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 11px; height: 11px; border-radius: 50%; }
.browser-dots span:nth-child(1) { background: #FF5F56; }
.browser-dots span:nth-child(2) { background: #FFBD2E; }
.browser-dots span:nth-child(3) { background: #27C93F; }
.browser-url { flex: 1; background: #E9EEF7; border-radius: 6px; padding: 5px 14px; font-size: 12px; color: #8A8FA3; text-align: center; }
.browser-content {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
    radial-gradient(700px 500px at 6% 0%, var(--mesh-violet), transparent 55%),
    radial-gradient(650px 480px at 100% 100%, var(--mesh-pink), transparent 55%),
    radial-gradient(500px 380px at 92% 6%, var(--mesh-amber), transparent 60%),
    var(--canvas-bg);
}

/* Re-scope the shared text/card tokens inside these two now-dark screens —
   every stat tile, table row, and label downstream reads var(--ink) etc.,
   so redefining the tokens here (not touching each rule individually) flips
   the whole dashboard's text and card fills to their dark-appropriate
   values in one place. */
.browser-content, .ipad-screen {
  --ink: var(--canvas-ink);
  --ink-dim: var(--canvas-ink-dim);
  --ink-faint: var(--canvas-ink-faint);
  --border: var(--canvas-border);
  --border-strong: rgba(255,255,255,0.22);
  --bg-card-solid: rgba(255,255,255,0.07);
  --bg-soft: rgba(255,255,255,0.05);
}

/* ---------------------------------------------------------- Closing trio */
.trio-wrap { display: flex; align-items: flex-end; justify-content: center; gap: 40px; flex-wrap: wrap; }
.trio-wrap .iphone-frame { width: 200px; height: 406px; transform: none; }
.trio-wrap .ipad-frame { width: 360px; height: 264px; }
.trio-wrap .browser-frame { max-width: 460px; }