/* Home page — neon mockup layout */
.home .site-header{background:rgba(5,8,22,.72);border-bottom:1px solid rgba(120,180,255,.12)}

.neon-hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 78px);padding:clamp(14px,3vh,34px) max(24px,calc((100vw - 1500px)/2)) clamp(20px,3.5vh,40px);background:#060818 url("assets/cosmic-horizon.webp") center 40%/cover no-repeat;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(16px,2.5vh,36px)}
.neon-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 28% 42%,rgba(4,6,20,.55),transparent 62%),linear-gradient(180deg,rgba(5,7,20,.25),rgba(5,7,20,0) 40%,rgba(5,7,20,.55) 100%)}
.neon-hero-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);align-items:center;gap:40px}

.neon-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:780px}
.neon-title{margin:0 0 4px;width:min(100%,clamp(380px,calc((100vh - 78px) * .7),640px));align-self:center;transform:translateX(-6%)}
.neon-title img{width:100%;height:auto}
.neon-tagline{margin:4px 0 28px;font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.35;color:#9ff3ff;font-weight:500;text-shadow:0 0 18px rgba(18,230,255,.35)}

.neon-pill{display:flex;align-items:stretch;width:min(100%,770px);border:1px solid rgba(190,205,255,.38);border-radius:22px;background:rgba(8,12,30,.62);backdrop-filter:blur(6px)}
.pill-info{flex:1;display:flex;align-items:center;gap:16px;padding:0 26px;color:#aeb8d8;font-size:clamp(.9rem,1.25vw,1.12rem);letter-spacing:.14em;text-transform:uppercase;min-height:66px}
.pill-info svg{color:#c7d0ee;flex:none}
.pill-info:hover{color:#fff}
.pill-button{display:flex;align-items:center;justify-content:center;padding:0 clamp(18px,3vw,40px);min-height:66px;border-radius:22px;border:2px solid #ff3fbf;background:rgba(40,10,40,.45);color:#fff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(.88rem,1.25vw,1.12rem);box-shadow:0 0 18px rgba(255,63,191,.55),inset 0 0 14px rgba(255,63,191,.25);white-space:nowrap;transition:box-shadow .2s,transform .2s}
.pill-button:hover{box-shadow:0 0 30px rgba(255,63,191,.85),inset 0 0 18px rgba(255,63,191,.35);transform:translateY(-1px)}


/* phone */
.neon-phone-wrap{display:flex;justify-content:center;perspective:1400px}
.neon-phone{--pw:clamp(270px,calc((100vh - 330px)/2.04),390px);position:relative;width:var(--pw);aspect-ratio:9/18.4;border-radius:calc(var(--pw)*.165);padding:calc(var(--pw)*.014);background:linear-gradient(135deg,#c9ced6 0%,#7d828c 12%,#3b3f47 30%,#5d626c 50%,#2e3138 70%,#8b909a 88%,#d6dbe2 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 0 0 2px rgba(0,0,0,.55),inset 0 0 4px 3px rgba(0,0,0,.35),0 0 30px rgba(18,230,255,.3),0 0 60px rgba(255,64,189,.28),0 34px 80px rgba(0,0,0,.6);transform:rotateY(-16deg) rotateZ(8deg) rotateX(4deg);transform-style:preserve-3d}
.ip-bezel{position:relative;height:100%;border-radius:calc(var(--pw)*.15);padding:calc(var(--pw)*.026);background:#050505;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ip-bezel:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 22%,transparent 38%,transparent 72%,rgba(255,255,255,.05) 100%);z-index:5}
.ip-btn{position:absolute;width:calc(var(--pw)*.017);border-radius:2px;background:linear-gradient(90deg,#2b2e34,#9ba0aa 50%,#3a3d44);box-shadow:0 0 1px rgba(0,0,0,.8)}
.ip-action{left:calc(var(--pw)*-.014);top:17%;height:5.5%}
.ip-vol-up{left:calc(var(--pw)*-.014);top:26%;height:9.5%}
.ip-vol-down{left:calc(var(--pw)*-.014);top:38%;height:9.5%}
.ip-power{right:calc(var(--pw)*-.014);top:28%;height:14%}
.np-screen{position:relative;font-size:calc(var(--pw) / 380 * 16px);height:100%;border-radius:calc(var(--pw)*.125);overflow:hidden;display:flex;flex-direction:column;padding:0 12px 6px;color:#e8ecff;background:url("assets/chat-bg-90s.svg") 0 0/150px 150px repeat,radial-gradient(ellipse at 20% 30%,rgba(120,60,200,.25),transparent 60%),radial-gradient(ellipse at 90% 80%,rgba(18,160,220,.18),transparent 60%),linear-gradient(180deg,#0b1230,#080c22 60%,#0b0e26)}
.np-status{position:relative;display:flex;align-items:center;justify-content:space-between;font-size:.8em;font-weight:700;padding:.85em 1em .55em 1.3em;margin:0 -12px;background:linear-gradient(180deg,#0a1128 70%,rgba(10,17,40,0))}
.np-time{letter-spacing:.01em}
.ip-island{position:absolute;left:50%;top:.6em;transform:translateX(-50%);width:32%;height:1.9em;border-radius:999px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.03)}
.ip-island i{position:absolute;right:.7em;top:50%;transform:translateY(-50%);width:.7em;height:.7em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4a7a,#0b0f1e 60%);box-shadow:0 0 0 1px #111}
.np-icons{display:flex;align-items:center;gap:.35em}
.np-icons svg{height:.82em;fill:currentColor;color:#fff}
.ic-batt{height:.9em!important}
.ip-home{display:block;width:36%;height:.3em;margin:.55em auto .1em;border-radius:999px;background:rgba(255,255,255,.85)}
.np-top{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 6px;margin:0 -12px;padding-left:18px;padding-right:18px;background:#0a1128;border-bottom:1px solid rgba(120,180,255,.1)}
.np-burger{display:grid;gap:4px}.np-burger i{display:block;width:16px;height:2px;background:#cfd6f5;border-radius:2px}.np-burger i:nth-child(2){width:11px}
.np-brand{display:flex;align-items:center;gap:7px;font-size:1.3em;font-weight:500;color:#8ff0ff;text-shadow:0 0 10px rgba(18,230,255,.5)}
.np-brand img{width:36px;height:auto}
.np-search{color:#cfd6f5}
.np-room{display:flex;align-items:center;gap:7px;margin:8px 0 6px;padding:6px 10px;border-radius:14px;border:1px solid rgba(18,230,255,.5);background:linear-gradient(90deg,rgba(18,230,255,.12),rgba(255,64,189,.08));box-shadow:0 0 14px rgba(18,230,255,.18)}
.np-room-icon{width:2.1em;height:2.1em;border-radius:10px;display:grid;place-items:center;background:rgba(108,242,122,.15);border:1px solid rgba(108,242,122,.5);font-size:1em}
.np-room-text{display:flex;flex-direction:column;line-height:1.2}
.np-room-name{white-space:nowrap;color:#9ff7ff;font-weight:800;font-size:.8em;letter-spacing:.02em;text-shadow:0 0 8px rgba(18,230,255,.55)}
.np-room-lang{color:#ffd166;font-size:.6em;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.np-stack{display:flex;margin-left:auto;padding-left:.4em}.np-stack img{width:1.3em;height:1.3em;border-radius:50%;border:2px solid #0a1128;margin-left:-.45em}
.np-live{width:8px;height:8px;border-radius:50%;background:#3dff9a;box-shadow:0 0 8px #3dff9a;flex:none}
.np-messages{list-style:none;margin:0;padding:2px 0;flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:4px;overflow:hidden}
.np-msg{display:flex;align-items:flex-end;gap:7px;max-width:88%}
.np-msg.r{flex-direction:row-reverse;align-self:flex-end}
.np-avatar{width:2.05em;height:2.05em;flex:none;border-radius:50%;box-shadow:0 0 0 2px rgba(18,230,255,.55),0 0 10px rgba(18,230,255,.35)}
.np-msg.r .np-avatar{box-shadow:0 0 0 2px rgba(255,64,189,.6),0 0 10px rgba(255,64,189,.35)}
.np-bubble{position:relative;min-width:9.5em;padding:.42em .7em .38em;border-radius:14px 14px 14px 4px;font-size:.72em;line-height:1.3;color:#f2f4ff;background:linear-gradient(160deg,rgba(64,34,108,.85),rgba(40,22,74,.85));border:1px solid rgba(190,120,255,.4)}
.np-msg.r .np-bubble{border-radius:14px 14px 4px 14px;background:linear-gradient(160deg,rgba(14,92,128,.85),rgba(18,52,104,.85));border-color:rgba(18,230,255,.45)}
.np-bubble b{display:flex;align-items:center;gap:4px;font-size:.78em;color:#ff8fe0;margin-bottom:1px}
.np-msg.r .np-bubble b{color:#7fefff}
.np-bubble small{display:flex;align-items:center;gap:4px;color:#b8c0e2;font-size:.82em;margin-top:2px}
.np-bubble .tr{font-size:.85em;color:#ffd166}
.np-bubble time{font-size:.82em;color:#8d96bb;font-weight:500;margin-left:auto;padding-left:8px}
.np-msg.r .np-bubble time{margin-left:0;padding-left:0;padding-right:8px;order:-1;margin-right:auto}
.flag{width:1.1em;height:.75em;border-radius:2px;flex:none;box-shadow:0 0 0 .5px rgba(255,255,255,.4)}
.planet{font-size:.95em}
.np-typing{display:flex;align-items:center;gap:7px;color:#8d96bb;font-size:.66em}
.np-avatar.sm{width:1.6em;height:1.6em}
.np-typing em{font-style:normal}
.dots{display:flex;gap:3px;padding:.5em .7em;border-radius:12px;background:rgba(64,34,108,.7);border:1px solid rgba(190,120,255,.35)}
.dots i{width:5px;height:5px;border-radius:50%;background:#ff8fe0;animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.np-composer{display:flex;align-items:center;gap:9px;margin-top:8px}
.np-plus{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:1.2em;color:#dfe5ff}
.np-input{flex:1;display:flex;justify-content:space-between;align-items:center;padding:9px 13px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#8d96bb;font-size:.72em}
.np-send{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#12d8f5;color:#04202a;box-shadow:0 0 14px rgba(18,230,255,.6)}

/* cards */
.neon-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.neon-card{display:flex;align-items:center;gap:22px;padding:clamp(18px,2.6vh,28px) 26px clamp(18px,2.6vh,28px) 30px;border-radius:16px;background:rgba(10,14,34,.78);border:1px solid rgba(150,170,255,.2);backdrop-filter:blur(8px);transition:border-color .2s,transform .2s,box-shadow .2s}
.neon-card:hover{border-color:rgba(18,230,255,.55);transform:translateY(-2px);box-shadow:0 0 26px rgba(18,230,255,.15)}
.nc-icon{flex:none;width:58px;height:58px;fill:none;stroke:#3fe6ff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(18,230,255,.6))}
.nc-text{display:flex;flex-direction:column;gap:6px}
.nc-text strong{font-size:1.2rem;font-weight:650;color:#fff}
.nc-text span{color:#b8c0de;font-size:.92rem;line-height:1.5}
.nc-arrow{margin-left:auto;font-size:1.9rem;color:#9fdcff;line-height:1}

@media (max-width:1080px){
  .neon-hero-inner{grid-template-columns:1fr;gap:28px}
  .neon-copy{align-items:center;text-align:center;margin:0 auto}
  .neon-title{transform:none}
  .neon-phone{--pw:min(330px,78vw);transform:rotateZ(4deg)}
  .neon-cards{grid-template-columns:1fr;max-width:640px;margin:0 auto;width:100%}
}
@media (max-width:640px){
  .neon-hero{padding:22px 16px 28px}
  .neon-pill{flex-direction:column;border-radius:20px}
  .pill-info{justify-content:center;min-height:54px;font-size:.85rem;padding:0 14px}
  .pill-button{min-height:56px;white-space:normal;text-align:center;font-size:.92rem}
  .neon-card{padding:20px;gap:16px}
  .nc-icon{width:46px;height:46px}
  .nc-text strong{font-size:1.08rem}
}

/* light neon effect on logo + Find your tribe */
.neon-title img{animation:neonBreath 4.5s ease-in-out infinite,neonFlicker 9s linear infinite;filter:drop-shadow(0 0 6px rgba(18,230,255,.55)) drop-shadow(0 0 18px rgba(255,64,189,.45))}
@keyframes neonBreath{0%,100%{filter:drop-shadow(0 0 5px rgba(18,230,255,.45)) drop-shadow(0 0 14px rgba(255,64,189,.35)) brightness(1)}50%{filter:drop-shadow(0 0 10px rgba(18,230,255,.8)) drop-shadow(0 0 28px rgba(255,64,189,.65)) brightness(1.12)}}
@keyframes neonFlicker{0%,91%,93%,95.5%,100%{opacity:1}92%{opacity:.82}94.5%{opacity:.9}}

.home .site-header{padding:0 max(24px,calc((100vw - 1500px)/2))}
@media (max-width:1080px){.neon-hero{min-height:auto}}

/* ===== iPhone lighting: frame thickness, coloured rim light, retina screen ===== */
.neon-phone{
  box-shadow:
    /* frame thickness (right side, seen at an angle), lit pink by the scene */
    1px 1px 0 #9a8aa8, 2px 2px 0 #b06aa6, 3px 3px 0 #c457b0, 4px 4px 0 #cf4ab4, 5px 5px 0 #c23fae, 6px 6px 0 #a8359d, 7px 7px 0 #8a2c88, 8px 8px 0 #6c2470, 9px 9px 0 #4e1b55, 10px 10px 0 #33133a,
    10px 10px 10px rgba(255,64,189,.8),
    /* rim glows */
    -16px -8px 46px rgba(18,230,255,.55), 22px 20px 70px rgba(255,64,189,.75), 0 0 110px rgba(140,70,255,.3),
    /* drop shadow */
    26px 46px 80px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 0 2px rgba(0,0,0,.55);
}
/* coloured reflections on the titanium frame */
.neon-phone:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:calc(var(--pw)*.014);pointer-events:none;z-index:2;
  background:linear-gradient(118deg,rgba(40,235,255,.95) 0%,rgba(40,235,255,.55) 14%,rgba(255,255,255,.35) 22%,rgba(255,255,255,0) 34%,rgba(150,80,255,0) 55%,rgba(170,80,255,.45) 72%,rgba(255,60,190,.95) 88%,rgba(255,120,220,1) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  mix-blend-mode:screen}
/* thin specular highlight running along the frame edge */
.neon-phone:after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 1px 1px 0 rgba(200,250,255,.9),inset -1px -1px 0 rgba(255,150,230,.8)}
.ip-btn{background:linear-gradient(90deg,#1f2a3a,#7fe9ff 45%,#ff7ad9 80%,#2b2030);box-shadow:0 0 6px rgba(18,230,255,.45)}
.ip-power{background:linear-gradient(90deg,#2b2030,#ff7ad9 40%,#ffb3ea 60%,#2b2030);box-shadow:0 0 8px rgba(255,64,189,.6)}
/* retina screen: more contrast, saturation and a glass glare */
.np-screen{filter:saturate(1.38) contrast(1.08) brightness(1.08)}
.np-screen:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:linear-gradient(125deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 18%,transparent 30%,transparent 78%,rgba(255,80,200,.08) 100%),
             radial-gradient(ellipse at 0% 50%,rgba(18,230,255,.1),transparent 40%)}
.np-bubble{box-shadow:0 0 10px rgba(190,120,255,.25)}
.np-msg.r .np-bubble{box-shadow:0 0 10px rgba(18,230,255,.3)}