/* Frontend R3-4 — Academy Philosophy & Learning Ecosystem
   Frontend-only narrative expansion for About Dussie + Learning. */

#page-company,
#page-learning {
  --r34-bg:#050813;
  --r34-panel:#0a1020;
  --r34-line:rgba(129,164,225,.14);
  --r34-copy:rgba(202,214,235,.72);
  --r34-blue:#68a5ff;
  --r34-cyan:#34e3d1;
}

#page-company .r3-philosophy-manifesto,
#page-company .r3-philosophy-method,
#page-company .r3-philosophy-ecosystem,
#page-company .r3-philosophy-technology,
#page-learning .r3-learning-loop-section,
#page-learning .r3-learning-modes-section,
#page-learning .r3-learning-continuity-section {
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(126,158,215,.10);
}

#page-company .r3-philosophy-manifesto::before,
#page-company .r3-philosophy-method::before,
#page-company .r3-philosophy-ecosystem::before,
#page-company .r3-philosophy-technology::before,
#page-learning .r3-learning-loop-section::before,
#page-learning .r3-learning-modes-section::before,
#page-learning .r3-learning-continuity-section::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background-image:
    linear-gradient(rgba(103,146,218,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,146,218,.045) 1px,transparent 1px);
  background-size:110px 110px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}

#page-company .r3-philosophy-index,
#page-learning .r3-philosophy-index {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:rgba(88,218,210,.78);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

#page-company .r3-philosophy-index::before,
#page-learning .r3-philosophy-index::before {
  content:"";
  width:28px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--r34-cyan));
}

/* About — manifesto */
#page-company .r3-philosophy-manifesto {
  padding:clamp(108px,10vw,154px) 0;
  background:
    radial-gradient(circle at 12% 22%,rgba(58,124,226,.13),transparent 30%),
    radial-gradient(circle at 88% 76%,rgba(52,227,209,.07),transparent 26%),
    linear-gradient(180deg,#050813,#060a15 62%,#050812);
}

#page-company .r3-philosophy-manifesto-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);
  gap:clamp(54px,7vw,100px);
  align-items:start;
}

#page-company .r3-philosophy-manifesto h2,
#page-company .r3-philosophy-heading h2,
#page-company .r3-philosophy-technology h2,
#page-learning .r3-learning-loop-heading h2,
#page-learning .r3-learning-continuity-section h2 {
  margin:22px 0 0;
  color:#f4f7ff;
  font-size:clamp(42px,5vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
  text-wrap:balance;
}

#page-company .r3-philosophy-manifesto-copy {
  padding-top:42px;
}

#page-company .r3-philosophy-manifesto-copy p,
#page-company .r3-philosophy-heading p,
#page-company .r3-philosophy-technology p,
#page-learning .r3-learning-loop-heading p,
#page-learning .r3-learning-continuity-section p {
  margin:0 0 18px;
  color:var(--r34-copy);
  font-size:16px;
  line-height:1.85;
}

#page-company .r3-philosophy-statements {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(58px,7vw,92px);
  border-top:1px solid var(--r34-line);
  border-bottom:1px solid var(--r34-line);
}

#page-company .r3-philosophy-statements article {
  min-height:220px;
  padding:34px 30px;
  border-right:1px solid var(--r34-line);
  background:linear-gradient(180deg,rgba(9,15,29,.58),rgba(6,11,22,.28));
}

#page-company .r3-philosophy-statements article:last-child { border-right:0; }

#page-company .r3-philosophy-statements span,
#page-company .r3-philosophy-ecosystem-grid article > span,
#page-learning .r3-learning-modes-grid article > span {
  color:rgba(91,218,208,.70);
  font-size:10px;
  font-weight:820;
  letter-spacing:.15em;
}

#page-company .r3-philosophy-statements strong {
  display:block;
  margin:26px 0 13px;
  color:#edf3ff;
  font-size:24px;
  letter-spacing:-.025em;
}

#page-company .r3-philosophy-statements p,
#page-company .r3-philosophy-ecosystem-grid p,
#page-learning .r3-learning-modes-grid p {
  margin:0;
  color:rgba(196,210,234,.64);
  font-size:14px;
  line-height:1.75;
}

/* About — method */
#page-company .r3-philosophy-method {
  padding:clamp(104px,10vw,148px) 0;
  background:
    radial-gradient(circle at 78% 16%,rgba(69,109,255,.10),transparent 30%),
    linear-gradient(180deg,#050812,#050914);
}

#page-company .r3-philosophy-heading,
#page-learning .r3-learning-loop-heading {
  position:relative;
  z-index:1;
  max-width:900px;
  margin-bottom:clamp(50px,6vw,78px);
}

#page-company .r3-philosophy-heading p,
#page-learning .r3-learning-loop-heading p { max-width:760px;margin-top:24px; }

#page-company .r3-philosophy-flow {
  position:relative;
  z-index:1;
  max-width:1060px;
  margin-left:auto;
}

#page-company .r3-philosophy-flow::before {
  content:"";
  position:absolute;
  left:43px;
  top:44px;
  bottom:44px;
  width:1px;
  background:linear-gradient(180deg,rgba(104,165,255,.08),rgba(52,227,209,.52),rgba(104,165,255,.08));
  box-shadow:0 0 24px rgba(52,227,209,.10);
}

#page-company .r3-philosophy-flow article {
  position:relative;
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:26px;
  padding:26px 0;
  border-bottom:1px solid rgba(127,160,218,.10);
}

#page-company .r3-philosophy-flow article:last-child { border-bottom:0; }

#page-company .r3-flow-number {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  margin-left:20px;
  border-radius:50%;
  border:1px solid rgba(91,199,224,.28);
  background:#071020;
  color:var(--r34-cyan);
  font-size:11px;
  font-weight:820;
  box-shadow:0 0 0 7px rgba(5,9,20,.92),0 0 30px rgba(52,227,209,.08);
}

#page-company .r3-philosophy-flow h3 {
  margin:0 0 10px;
  color:#eff4ff;
  font-size:27px;
  letter-spacing:-.03em;
}

#page-company .r3-philosophy-flow p {
  max-width:720px;
  margin:0;
  color:rgba(197,210,233,.64);
  font-size:15px;
  line-height:1.76;
}

/* About — ecosystem */
#page-company .r3-philosophy-ecosystem {
  padding:clamp(104px,10vw,150px) 0;
  background:
    radial-gradient(circle at 50% 94%,rgba(30,157,154,.08),transparent 30%),
    linear-gradient(180deg,#050914,#060a15 58%,#050812);
}

#page-company .r3-philosophy-ecosystem-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

#page-company .r3-philosophy-ecosystem-grid article,
#page-learning .r3-learning-modes-grid article {
  position:relative;
  min-height:250px;
  padding:32px;
  overflow:hidden;
  border:1px solid rgba(126,162,225,.13);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 12%,rgba(73,130,240,.10),transparent 28%),
    linear-gradient(180deg,rgba(9,16,31,.82),rgba(6,11,22,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 24px 70px rgba(0,0,0,.18);
}

#page-company .r3-philosophy-ecosystem-grid article::after,
#page-learning .r3-learning-modes-grid article::after {
  content:"";
  position:absolute;
  left:32px;
  right:32px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(52,227,209,.34),transparent);
}

#page-company .r3-philosophy-ecosystem-grid h3,
#page-learning .r3-learning-modes-grid h3 {
  margin:44px 0 14px;
  color:#eff4ff;
  font-size:29px;
  letter-spacing:-.035em;
}

/* About — technology */
#page-company .r3-philosophy-technology {
  padding:clamp(104px,10vw,148px) 0;
  background:
    radial-gradient(circle at 18% 60%,rgba(59,119,227,.14),transparent 34%),
    radial-gradient(circle at 86% 42%,rgba(52,227,209,.07),transparent 28%),
    linear-gradient(180deg,#050812,#040711);
}

#page-company .r3-philosophy-technology-grid,
#page-learning .r3-learning-continuity-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);
  gap:clamp(52px,7vw,94px);
}

#page-company .r3-created-by-lockup {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:28px 0;
  padding:20px 22px;
  border:1px solid rgba(126,166,226,.16);
  border-radius:18px;
  background:rgba(8,15,29,.68);
}

#page-company .r3-created-by-lockup span {
  color:rgba(190,205,229,.60);
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
}

#page-company .r3-created-by-lockup strong {
  color:#eef4ff;
  font-size:24px;
  letter-spacing:.08em;
}

/* Learning — loop */
#page-learning .r3-learning-loop-section {
  padding:clamp(106px,10vw,150px) 0;
  background:
    radial-gradient(circle at 50% 54%,rgba(62,124,231,.11),transparent 34%),
    linear-gradient(180deg,#050813,#050914);
}

#page-learning .r3-learning-loop {
  position:relative;
  z-index:1;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:12px;
}

#page-learning .r3-learning-loop article {
  flex:1 1 0;
  min-width:0;
  min-height:210px;
  padding:26px 20px;
  border:1px solid rgba(125,164,226,.14);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(10,17,33,.82),rgba(6,11,22,.90));
}

#page-learning .r3-learning-loop article span {
  color:var(--r34-cyan);
  font-size:10px;
  font-weight:820;
}

#page-learning .r3-learning-loop article strong {
  display:block;
  margin:52px 0 8px;
  color:#f0f5ff;
  font-size:24px;
  letter-spacing:-.035em;
}

#page-learning .r3-learning-loop article p {
  margin:0;
  color:rgba(194,208,232,.60);
  font-size:13px;
  line-height:1.6;
}

#page-learning .r3-learning-loop > i {
  align-self:center;
  width:22px;
  height:1px;
  background:linear-gradient(90deg,rgba(104,165,255,.08),rgba(52,227,209,.54),rgba(104,165,255,.08));
  box-shadow:0 0 18px rgba(52,227,209,.11);
}

/* Learning — modes */
#page-learning .r3-learning-modes-section {
  padding:clamp(104px,10vw,148px) 0;
  background:
    radial-gradient(circle at 15% 20%,rgba(52,227,209,.06),transparent 28%),
    linear-gradient(180deg,#050914,#050812);
}

#page-learning .r3-learning-modes-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

/* Learning — continuity */
#page-learning .r3-learning-continuity-section {
  padding:clamp(104px,10vw,150px) 0;
  background:
    radial-gradient(circle at 84% 44%,rgba(67,126,240,.14),transparent 30%),
    linear-gradient(180deg,#050812,#040711);
}

#page-learning .r3-continuity-signal {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:30px 0 26px;
  color:rgba(193,209,235,.64);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}

#page-learning .r3-continuity-signal span:nth-child(1),
#page-learning .r3-continuity-signal span:nth-child(5) { color:rgba(104,165,255,.88); }
#page-learning .r3-continuity-signal span:nth-child(3),
#page-learning .r3-continuity-signal span:nth-child(7) { color:rgba(52,227,209,.82); }

#page-learning .r3-continuity-signal i {
  width:26px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(101,155,230,.32),transparent);
}

/* Motion polish */
@media (hover:hover) and (pointer:fine) {
  #page-company .r3-philosophy-ecosystem-grid article,
  #page-learning .r3-learning-modes-grid article,
  #page-learning .r3-learning-loop article {
    transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
  }
  #page-company .r3-philosophy-ecosystem-grid article:hover,
  #page-learning .r3-learning-modes-grid article:hover,
  #page-learning .r3-learning-loop article:hover {
    transform:translateY(-4px);
    border-color:rgba(99,183,235,.30);
    box-shadow:0 26px 78px rgba(0,0,0,.24),0 0 42px rgba(52,134,225,.06);
  }
}

@media (max-width:980px) {
  #page-company .r3-philosophy-manifesto-grid,
  #page-company .r3-philosophy-technology-grid,
  #page-learning .r3-learning-continuity-grid {
    grid-template-columns:1fr;
    gap:38px;
  }
  #page-company .r3-philosophy-manifesto-copy { padding-top:0; }
  #page-learning .r3-learning-loop { flex-wrap:wrap; }
  #page-learning .r3-learning-loop article { flex:1 1 calc(33.333% - 20px);min-width:210px; }
  #page-learning .r3-learning-loop > i { display:none; }
}

@media (max-width:700px) {
  #page-company .r3-philosophy-manifesto,
  #page-company .r3-philosophy-method,
  #page-company .r3-philosophy-ecosystem,
  #page-company .r3-philosophy-technology,
  #page-learning .r3-learning-loop-section,
  #page-learning .r3-learning-modes-section,
  #page-learning .r3-learning-continuity-section { padding:84px 0; }

  #page-company .r3-philosophy-manifesto h2,
  #page-company .r3-philosophy-heading h2,
  #page-company .r3-philosophy-technology h2,
  #page-learning .r3-learning-loop-heading h2,
  #page-learning .r3-learning-continuity-section h2 { font-size:clamp(36px,10vw,52px); }

  #page-company .r3-philosophy-statements,
  #page-company .r3-philosophy-ecosystem-grid,
  #page-learning .r3-learning-modes-grid { grid-template-columns:1fr; }
  #page-company .r3-philosophy-statements article { border-right:0;border-bottom:1px solid var(--r34-line); }
  #page-company .r3-philosophy-statements article:last-child { border-bottom:0; }
  #page-company .r3-philosophy-flow::before { left:22px; }
  #page-company .r3-philosophy-flow article { grid-template-columns:56px minmax(0,1fr);gap:16px; }
  #page-company .r3-flow-number { width:38px;height:38px;margin-left:3px; }
  #page-learning .r3-learning-loop article { flex-basis:100%;min-width:0; }
}

@media (prefers-reduced-motion:reduce) {
  #page-company .r3-philosophy-ecosystem-grid article,
  #page-learning .r3-learning-modes-grid article,
  #page-learning .r3-learning-loop article { transition:none!important;transform:none!important; }
}