/*
Theme Name: AGenie Test Platform
Author: Govardhana
Version: 1.0
Description: Custom WordPress theme based on AGenieTestPlatform.htm
*/

@page { size:A4; margin:0; }
* { margin:0; padding:0; box-sizing:border-box; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
html,body { font-family:'Segoe UI',Roboto,-apple-system,'Helvetica Neue',Arial,sans-serif; color:#fff; background:#0f0a2a; }
.page { width:210mm; height:297mm; position:relative; overflow:hidden; page-break-after:always; background:#140d33; }
.page:last-child { page-break-after:auto; }

.aurora { position:absolute; inset:0;
  background:
   radial-gradient(60% 48% at 14% 10%, rgba(139,92,246,.60), transparent 62%),
   radial-gradient(52% 42% at 88% 16%, rgba(236,72,153,.48), transparent 60%),
   radial-gradient(72% 60% at 80% 96%, rgba(14,165,233,.52), transparent 62%),
   radial-gradient(60% 54% at 8% 92%, rgba(20,184,166,.46), transparent 62%),
   linear-gradient(160deg,#1b1147 0%,#2a1a63 42%,#3a1c72 66%,#0f2447 120%);
}

.grain { position:absolute; inset:0; opacity:.06;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px, transparent .6px);
  background-size:3px 3px;
}

.orb { position:absolute; border-radius:50%; }
.o1 { width:120mm; height:120mm; left:-30mm; top:-30mm;
  background:radial-gradient(circle at 40% 40%, rgba(167,139,250,.55), transparent 68%);
}
.o2 { width:100mm; height:100mm; right:-24mm; top:-18mm;
  background:radial-gradient(circle at 50% 50%, rgba(244,114,182,.5), transparent 66%);
}
.o3 { width:140mm; height:140mm; right:-34mm; bottom:-40mm;
  background:radial-gradient(circle at 50% 50%, rgba(56,189,248,.5), transparent 66%);
}
.o4 { width:90mm; height:90mm; left:-22mm; bottom:-20mm;
  background:radial-gradient(circle at 50% 50%, rgba(45,212,191,.5), transparent 66%);
}

.spark { position:absolute; border-radius:50%; background:#fff;
  box-shadow:0 0 10px 2px rgba(255,255,255,.8);
}

.glass { background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.4);
  border-radius:22px;
}

.float { position:relative; }
.frame { position:relative; z-index:1; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 40px 90px -28px rgba(0,0,0,.8),
             0 0 74px -6px rgba(124,58,237,.5),
             0 0 120px 0 rgba(14,165,233,.22),
             inset 0 1px 0 rgba(255,255,255,.4);
  background:#0b0b16;
}
.frame img { display:block; width:102%; margin:-2.6% 0 -.4% -1%; }

.gt { background:linear-gradient(92deg,#ffffff 0%,#d9c6ff 40%,#9be7ff 75%,#a6fff0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.bubble { position:absolute; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.7), inset 0 2px 10px rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.4);
}
.bubble .be { font-size:34px; line-height:1;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.bubble .bt { font-weight:800; font-size:17px; margin-top:6px; letter-spacing:.3px;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.bubble .bd { font-size:10.5px; margin-top:3px; opacity:.95; padding:0 8mm; line-height:1.35;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
}

.bnum { position:absolute; top:6px; right:10px; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.9); color:#3a1c72; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}

.b-violet { background:radial-gradient(circle at 34% 28%, #c4b5fd, #7c3aed 70%); }
.b-pink   { background:radial-gradient(circle at 34% 28%, #fbcfe8, #db2777 72%); }
.b-cyan   { background:radial-gradient(circle at 34% 28%, #bae6fd, #0284c7 72%); }
.b-teal   { background:radial-gradient(circle at 34% 28%, #99f6e4, #0d9488 72%); }
.b-amber  { background:radial-gradient(circle at 34% 28%, #fde68a, #d97706 72%); }

.pill { display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  padding:9px 16px; border-radius:999px; font-size:12.5px; font-weight:600;
}

.tagbubble { display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:800; letter-spacing:1px; font-size:11px;
  padding:8px 16px; color:#fff;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.7);
}

.eyebrow { font-size:12px; letter-spacing:5px; text-transform:uppercase;
  opacity:.8; font-weight:700;
}

.wrap { position:relative; z-index:3; height:100%; }

.center-abs { position:absolute; left:0; right:0; }

.ic-bubble { width:20mm; height:20mm; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:26px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7),
             inset 0 2px 8px rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.4);
}

.pillar { flex:1; padding:16px 15px 17px; position:relative; }
.pillar .pt { font-weight:800; font-size:16.5px; margin-top:11px; }
.pillar .pd { font-size:11.5px; opacity:.92; margin-top:6px; line-height:1.5; }

.strike { text-decoration:line-through;
  text-decoration-color:rgba(255,120,120,.8); opacity:.75;
}

/* Centering rules */
body {
  display: flex;
  justify-content: center;    /* centers horizontally */
  align-items: flex-start;    /* align content at the top */
  min-height: 100vh;
  margin: 0;
}

.page {
  margin: auto;
  position: relative;
}

.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;        /* center horizontally */
  justify-content: flex-start;/* keep content at the top */
  min-height: 100%;
  padding-top: 0;             /* remove extra padding */
  margin-top: -40px;          /* move the title further up */
}