/* MyAI | Q — cinematic home */
.q-home{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  color:#f7fbff;
  background:
    radial-gradient(circle at 50% 72%,rgba(0,255,190,.20),transparent 26%),
    radial-gradient(circle at 50% 105%,rgba(0,120,255,.30),transparent 38%),
    linear-gradient(180deg,#020914 0%,#031426 55%,#01050b 100%);
  isolation:isolate;
}

.q-world{
  position:absolute;
  z-index:-2;
  width:1100px;
  height:1100px;
  left:50%;
  top:42%;
  transform:translate(-50%,-5%);
  border-radius:50%;
  opacity:.82;
  background:
    radial-gradient(circle at 42% 25%,rgba(40,255,190,.24),transparent 9%),
    radial-gradient(circle at 62% 34%,rgba(0,165,255,.24),transparent 12%),
    radial-gradient(circle at 50% 45%,#092c43 0 34%,#041827 55%,#01060c 70%);
  box-shadow:
    0 -12px 55px rgba(56,225,255,.65),
    0 -4px 12px rgba(255,255,255,.55),
    inset 0 80px 120px rgba(0,210,255,.10);
  animation:qWorldDrift 24s ease-in-out infinite alternate;
}

.q-world::before{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius:50%;
  border-top:2px solid rgba(128,245,255,.75);
  filter:blur(2px);
  box-shadow:0 -18px 50px rgba(0,224,255,.45);
}

.q-world::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:12%;
  top:7%;
  border-radius:50%;
  background:rgba(255,214,120,.25);
  filter:blur(35px);
  box-shadow:0 0 100px rgba(255,198,74,.8);
}

.q-home-inner{
  width:100%;
  margin:auto;
  padding:38px 0 70px;
}

.q-brand{
  font-size:26px;
  font-weight:900;
  letter-spacing:-.03em;
  color:#fff;
}

.q-brand span{
  color:#4fffd0;
  text-shadow:0 0 20px rgba(79,255,208,.55);
}

.q-hero{
  max-width:900px;
  margin:12vh auto 0;
  text-align:center;
}

.q-kicker{
  color:#9deee2;
  font-size:12px;
  font-weight:800;
  letter-spacing:.28em;
}

.q-hero h1{
  margin:16px 0 10px;
  font-size:clamp(40px,6vw,76px);
  line-height:1;
  letter-spacing:-.055em;
  text-shadow:0 8px 35px rgba(0,0,0,.5);
}

.q-hero p{
  margin:0 auto 30px;
  max-width:700px;
  color:#c8d8e5;
  font-size:18px;
}

.q-search-shell{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid rgba(124,241,255,.75);
  border-radius:999px;
  background:rgba(2,14,27,.82);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 38px rgba(0,217,255,.22);
  backdrop-filter:blur(18px);
}

.q-search-shell input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  padding:15px 20px;
  background:transparent;
  color:#fff;
  font-size:17px;
}

.q-search-shell input::placeholder{color:#9eb2c2}

.q-search-btn,.q-sponsored-btn{
  border:0;
  cursor:pointer;
  color:#00120f;
  font-weight:900;
  background:linear-gradient(135deg,#32ffc7,#26cfff);
  box-shadow:0 0 24px rgba(45,241,220,.35);
}

.q-search-btn{
  min-width:120px;
  padding:15px 24px;
  border-radius:999px;
}

.q-feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:42px;
}

.q-feature{
  min-height:112px;
  padding:22px;
  border:1px solid rgba(91,224,255,.25);
  border-radius:18px;
  background:rgba(4,17,31,.72);
  backdrop-filter:blur(14px);
  box-shadow:0 15px 45px rgba(0,0,0,.22);
}

.q-feature strong{
  display:block;
  margin-bottom:9px;
  color:#69ffe0;
  letter-spacing:.09em;
}

.q-feature span{
  color:#c7d5df;
  line-height:1.45;
}

.q-sponsored{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:18px;
  padding:20px 24px;
  border:1px solid rgba(67,255,202,.55);
  border-radius:18px;
  background:linear-gradient(90deg,rgba(3,35,39,.88),rgba(5,23,42,.88));
  box-shadow:0 0 35px rgba(30,255,194,.12);
  backdrop-filter:blur(16px);
}

.q-sponsored small{
  display:block;
  margin-bottom:6px;
  color:#72e9d2;
}

.q-sponsored strong{
  display:block;
  font-size:18px;
}

.q-sponsored-btn{
  flex:0 0 auto;
  padding:14px 20px;
  border-radius:999px;
}

@keyframes qWorldDrift{
  from{transform:translate(-50%,-5%) rotate(-1deg) scale(1)}
  to{transform:translate(-50%,-7%) rotate(1deg) scale(1.025)}
}

@media(max-width:850px){
  .q-hero{margin-top:8vh}
  .q-feature-grid{grid-template-columns:repeat(2,1fr)}
  .q-sponsored{align-items:flex-start;flex-direction:column}
}

@media(max-width:520px){
  .q-home-inner{width:min(100% - 24px,1180px);padding-top:24px}
  .q-hero h1{font-size:42px}
  .q-hero p{font-size:16px}
  .q-search-shell{border-radius:22px}
  .q-search-btn{min-width:auto}
  .q-feature-grid{grid-template-columns:1fr}
  .q-world{width:760px;height:760px;top:52%}
}

@media(prefers-reduced-motion:reduce){
  .q-world{animation:none}
}

/* Sol companion panel */
.q-sol-panel{
  position:absolute;
  top:34px;
  right:28px;
  width:290px;
  padding:16px;
  border:1px solid rgba(95,220,255,.22);
  border-radius:22px;
  background:rgba(3,16,28,.82);
  backdrop-filter:blur(18px);
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    0 0 28px rgba(0,220,255,.08);
  z-index:5;
}

.q-sol-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.q-sol-head strong{
  display:block;
  font-size:20px;
}

.q-sol-head span{
  display:block;
  margin-top:2px;
  color:#9fb4c4;
  font-size:12px;
}

.q-sol-status{
  color:#54ffc4;
  font-size:12px;
  font-weight:800;
}

.q-sol-portrait{
  height:170px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 50% 25%,rgba(60,255,200,.10),transparent 35%),
    linear-gradient(135deg,#0b1b2a,#07111c);
  box-shadow:inset 0 0 35px rgba(0,190,255,.06);
}

.q-sol-message{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(14,35,52,.88);
}

.q-sol-message strong{
  color:#7affdc;
  font-size:12px;
}

.q-sol-message p{
  margin:4px 0 0;
  color:#e5edf3;
  font-size:13px;
  line-height:1.45;
}

.q-sol-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.q-sol-actions button,
.q-sol-input{
  border:1px solid rgba(104,220,255,.18);
  background:rgba(4,22,36,.78);
}

.q-sol-actions button{
  padding:9px 10px;
  border-radius:999px;
  color:#bdd0dd;
  font-size:11px;
}

.q-sol-input{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:7px;
  border-radius:999px;
}

.q-sol-input input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  padding:7px 10px;
  font-size:12px;
}

.q-sol-input button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  color:#00120f;
  font-weight:900;
  background:linear-gradient(135deg,#32ffc7,#26cfff);
}

.q-sol-panel > small{
  display:block;
  margin-top:8px;
  color:#7f95a5;
  font-size:10px;
  text-align:center;
}

@media(max-width:1100px){
  .q-sol-panel{
    position:relative;
    top:auto;
    right:auto;
    width:auto;
    max-width:420px;
    margin:26px auto 0;
  }
}

/* Keep the Q stage inside its lane beside Sol */
@media(min-width:1101px){
  .q-home-inner{
    box-sizing:border-box;
    padding-right:330px;
  }

  .q-hero h1{
    font-size:clamp(42px,5vw,68px);
  }
}

/* MyAI Q brand crest */
.q-brand{
  width:150px;
  height:auto;
}

.q-brand img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  filter:drop-shadow(0 0 14px rgba(0,220,255,.18));
}

/* Sol portrait — verified MyAI companion artwork */
.q-sol-portrait{
  background-image:url("assets/sol-portrait.png");
  background-size:cover;
}

/* TARGET #1 — hero artwork composition */
.q-cinematic{
  background-size:100% auto;
  background-position:center top;
}

/* MyAI Q Earth hero — visual layer only */
.q-home {
  background-image: url("assets/myai-home-approved.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Fit the extracted Earth artwork without cropping its width */
.q-home {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #05090e;
}


/* Keep the Earth below the headline and behind the working Home controls */
.q-home {
  background-position: center top;
}

/* Full-width MyAI Q Home — retain live controls */
body:has(.q-home) {
  background: #05090e;
}

body:has(.q-home) main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.q-home {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  min-height: 100vh;
}

.q-home-inner {
  width: 100%;
  max-width: none;
}

/* Fit the approved full Earth artwork without enlarging its lower curve */
.q-home {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Approved Home artwork — show the complete image without cropping */
.q-home {
  background-image: url("assets/myai-home-approved.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Restore Earth-only backdrop; never use the full-page mockup as a background */
.q-home {
  background-image: url("assets/myai-earth-hero.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}