/* =========================================================
   i2165062 — WHAT IS PAGE
   ========================================================= */

:root {
  --ink: #2b2f35;
  --muted: #666;
  --accent: #00a896;
  --bg0: #f7f8f9;
  --bg1: #eef0f2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Poppins","Segoe UI",sans-serif;
  background: radial-gradient(1200px 700px at 50% 0%, var(--bg1), var(--bg0));
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* ---------- CARD ---------- */
.card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  max-width: 900px;
  padding: 60px;
  animation: fadeUp 1s ease-out;
}

.title {
  text-align: center;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  margin-bottom: 10px;
}

.subtitle {
  text-align: center;
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 40px;
  line-height: 1.6;
}

/* ---------- SECTIONS ---------- */
.section {
  margin-bottom: 60px;
}

.section h2 {
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section p {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 15px;
  text-align: justify;
}

/* ---------- GRID FOR PRINCIPLES ---------- */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.principle {
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,0.65);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform .3s ease, box-shadow .3s ease;
}

.principle:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.icon {
  font-size: 34px;
  margin-bottom: 10px;
}

.principle h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--ink);
}

/* ---------- BUTTONS ---------- */
.buttons {
  text-align: center;
  margin-top: 40px;
}

.btn {
  display: inline-block;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 24px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin: 0 8px;
}

.btn.primary {
  background: var(--accent);
  color: white;
}

.btn.primary:hover {
  background: #029482;
}

.btn.secondary {
  border: 1px solid var(--accent);
  color: var(--accent);
}

.btn.secondary:hover {
  background: var(--accent);
  color: white;
}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 700px) {
  .card {
    padding: 32px 24px;
  }
  .principle-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Signature Hero Visual ---------- */
.hero-visual{
  margin: 26px auto 42px;
  max-width: 900px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
  box-shadow: 0 10px 30px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
}
.hero-visual svg{ display:block; width:100%; height:auto }

/* gentle breathing for nodes + core */
.node{ animation: nodePulse 3.2s ease-in-out infinite; opacity:.9 }
.node.n2{ animation-delay:.4s }
.node.n3{ animation-delay:.8s }
.node.n4{ animation-delay:1.2s }
.core{
  animation: corePulse 2.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(0,168,150,.35);
}

@keyframes nodePulse{
  0%{ transform: scale(1);   opacity:.85 }
  50%{ transform: scale(1.25); opacity:1 }
  100%{ transform: scale(1); opacity:.85 }
}

@keyframes corePulse{
  0%{
    transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(0,168,150,.35));
  }
  50%{
    transform: scale(1.12);
    filter: drop-shadow(0 0 22px rgba(0,168,150,.55));
  }
  100%{
    transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(0,168,150,.35));
  }
}

/* small screens */
@media (max-width:700px){
  .hero-visual{ margin:20px auto 30px }
}
/* ===== Signature Orbit Hero (SVG) ===== */
.hero-visual,
.hero-orbit{
  margin: 24px auto 40px;
  max-width: 900px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
  box-shadow: 0 10px 28px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.55);
}

.orbit-svg{ display:block; width:100%; height:auto }

/* gentle spins for rings */
.ring{ transform-origin: 450px 160px }
.ring-1{ animation: spin 42s linear infinite }
.ring-2{ animation: spin 60s linear infinite reverse }
.ring-3{ animation: spin 90s linear infinite }

/* particles rotate around center */
.belt .dot{ transform-origin: 0 0 }
.belt-a{ animation: beltA 16s linear infinite }
.belt-b{ animation: beltB 22s linear infinite reverse }

@keyframes spin   { to { transform: rotate(360deg) } }
@keyframes beltA  { 
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}
@keyframes beltB  { 
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}

/* breathing core + logo glow */
.logo-core{
  filter: drop-shadow(0 3px 8px rgba(0,168,150,.35));
  animation: corePulse 3.2s ease-in-out infinite;
}
.core{
  animation: corePulse 2.4s ease-in-out infinite;
  opacity: .9;
}

@keyframes corePulse{
  0%   { transform: scale(1);   filter: drop-shadow(0 0 10px rgba(0,168,150,.45)) }
  50%  { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(0,168,150,.65)) }
  100% { transform: scale(1);   filter: drop-shadow(0 0 10px rgba(0,168,150,.45)) }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .ring, .belt-a, .belt-b, .logo-core, .core { animation: none }
}

@media (max-width:700px){
  .hero-orbit{ margin: 18px auto 28px }
}