@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#06182c;
  --navy2:#0b2945;
  --orange:#ef5b22;
  --gold:#d9b45a;
  --cream:#f7f2e8;
  --paper:#fffdf8;
  --text:#071a30;
  --muted:#657386;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:Inter,Arial,sans-serif}

.pillars-premium{
  position:relative;
  min-height:100vh;
  padding:105px 34px 90px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.98),rgba(255,253,248,.93) 48%,rgba(239,232,213,.72)),
    var(--paper);
}

.pillar-bg-glow{
  position:absolute;
  width:480px;height:480px;border-radius:50%;
  filter:blur(5px);pointer-events:none;
}
.glow-left{
  left:-330px;top:18%;
  background:radial-gradient(circle,rgba(215,173,72,.16),transparent 68%);
}
.glow-right{
  right:-320px;bottom:-5%;
  background:radial-gradient(circle,rgba(11,63,101,.12),transparent 68%);
}

.pillar-heading{
  position:relative;
  z-index:3;
  max-width:850px;
  margin:0 auto 58px;
  text-align:center;
}
.eyebrow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;
  color:var(--orange);
  font-size:9px;
  font-weight:900;
  letter-spacing:3.2px;
}
.eyebrow span{
  width:27px;height:1px;background:var(--gold);
}
.pillar-heading h1{
  margin:15px 0 18px;
  font:600 clamp(58px,7vw,92px)/.82 "Cormorant Garamond",Georgia,serif;
  letter-spacing:-2px;
}
.pillar-heading h1 em{
  color:var(--orange);
  font-style:italic;
}
.pillar-heading p{
  max-width:720px;
  margin:auto;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
}

/* Main cards */
.pillar-stage{
  position:relative;
  z-index:5;
  width:min(1250px,100%);
  min-height:525px;
  margin:auto;
  display:flex;
  gap:9px;
}

.pillar-feature{
  --accent:#d5af50;
  --card:#fff;
  position:relative;
  flex:1;
  min-width:0;
  height:525px;
  overflow:hidden;
  padding:30px 30px 25px;
  color:var(--text);
  background:
    linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,244,234,.96));
  border:1px solid rgba(7,26,48,.12);
  cursor:pointer;
  transition:flex .65s cubic-bezier(.2,.8,.2,1),transform .4s,box-shadow .4s;
}
.pillar-feature:nth-child(2){
  --accent:#dcb64f;
  --card:#071b30;
  color:#fff;
  background:
    radial-gradient(circle at 75% 28%,rgba(51,136,187,.20),transparent 28%),
    linear-gradient(145deg,#06182b,#0b2946);
  border-color:#0c3555;
}
.pillar-feature:nth-child(3){
  --accent:#d5af50;
  background:linear-gradient(145deg,#fff,#f5f1e7);
}
.pillar-feature:nth-child(4){
  --accent:#d5af50;
  background:
    radial-gradient(circle at 75% 20%,rgba(239,91,34,.08),transparent 25%),
    linear-gradient(145deg,#f2e7c8,#e7d9b0);
}
.pillar-feature.active{
  flex:1.75;
  transform:translateY(-10px);
  box-shadow:0 28px 65px rgba(7,26,48,.15);
}
.pillar-feature:not(.active):hover{
  transform:translateY(-5px);
  box-shadow:0 18px 45px rgba(7,26,48,.09);
}

.pillar-feature:before{
  content:"";
  position:absolute;
  width:250px;height:250px;
  border-radius:50%;
  right:-105px;top:-100px;
  border:1px solid rgba(213,175,80,.25);
  box-shadow:0 0 0 35px rgba(213,175,80,.035),0 0 0 70px rgba(213,175,80,.02);
}
.pillar-feature:after{
  content:"";
  position:absolute;
  left:0;bottom:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  transform:scaleX(0);
  transform-origin:left;
  transition:.45s;
}
.pillar-feature.active:after{transform:scaleX(1)}

.pillar-number{
  position:relative;
  z-index:3;
  font-size:9px;
  font-weight:800;
  letter-spacing:2px;
  color:var(--accent);
}
.pillar-watermark{
  position:absolute;
  z-index:0;
  right:15px;bottom:-32px;
  font:700 190px/.8 "Cormorant Garamond",Georgia,serif;
  color:rgba(7,26,48,.045);
  pointer-events:none;
}
.pillar-feature:nth-child(2) .pillar-watermark{color:rgba(255,255,255,.035)}
.pillar-feature:nth-child(4) .pillar-watermark{color:rgba(126,87,15,.055)}

.pillar-symbol{
  position:relative;
  z-index:2;
  width:125px;height:145px;
  margin:48px 0 15px;
}

/* Heritage icon */
.heritage-symbol{
  border-bottom:2px solid #153d60;
  transform:scale(.86);
  transform-origin:left bottom;
}
.symbol-sun{
  position:absolute;
  left:39px;top:0;width:46px;height:46px;
  border:2px solid var(--gold);border-radius:50%;
}
.symbol-sun:after{
  content:"";
  position:absolute;left:17px;top:17px;width:8px;height:8px;
  border-radius:50%;background:var(--orange);
}
.symbol-arch{
  position:absolute;
  left:20px;bottom:0;width:82px;height:112px;
  border:3px solid #153d60;
  border-bottom:0;
  border-radius:45px 45px 0 0;
}
.symbol-pillar{
  position:absolute;
  bottom:0;width:10px;height:70px;background:#153d60;
}
.symbol-pillar.p1{left:27px}.symbol-pillar.p2{left:56px}.symbol-pillar.p3{left:85px}
.symbol-pillar:after{
  content:"";position:absolute;left:-5px;top:-5px;width:20px;height:5px;background:var(--gold);
}

/* AI icon */
.ai-symbol{margin-left:0}
.ai-core{
  position:absolute;left:27px;top:30px;width:75px;height:75px;
  display:grid;place-items:center;border:1px solid var(--gold);
  border-radius:50%;color:#e6c767;font-weight:800;font-size:18px;
  box-shadow:0 0 0 11px rgba(217,180,90,.04),0 0 0 20px rgba(217,180,90,.08);
}
.orbit{
  position:absolute;left:7px;top:10px;width:115px;height:115px;
  border:1px dashed rgba(217,180,90,.45);border-radius:50%;
  animation:orbit 10s linear infinite;
}
@keyframes orbit{to{transform:rotate(360deg)}}
.node{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:#6dc6fa;box-shadow:0 0 15px #58b9ed;
}
.n1{left:8px;top:52px}.n2{left:55px;top:0}.n3{right:4px;top:45px}
.n4{right:25px;bottom:18px}.n5{left:32px;bottom:5px}.n6{left:0;bottom:38px}

/* Education icon */
.education-symbol{margin-left:0}
.book{
  position:absolute;top:30px;width:57px;height:92px;
  border:2px solid #153d60;background:linear-gradient(145deg,#fff,#eef0eb);
}
.book-left{left:7px;border-radius:7px 0 0 7px;transform:skewY(-4deg)}
.book-right{right:7px;border-radius:0 7px 7px 0;transform:skewY(4deg)}
.book-line{
  position:absolute;left:61px;top:29px;width:3px;height:96px;background:var(--gold);
}
.book-orbit{
  position:absolute;left:18px;top:13px;width:90px;height:125px;
  border:1px dashed rgba(213,175,80,.5);
  border-radius:50%;transform:rotate(-25deg);
}

/* Generations icon */
.generation-symbol{margin-left:0}
.person{
  position:absolute;
  display:block;
  border:2px solid #153d60;
  border-radius:50%;
  width:40px;height:40px;
}
.person:after{
  content:"";position:absolute;
  left:-8px;top:32px;width:52px;height:65px;
  border:2px solid #153d60;border-radius:28px 28px 0 0;
  background:transparent;
}
.p-a{left:7px;top:35px;transform:scale(.75)}
.p-b{left:43px;top:8px}
.p-c{right:0;top:42px;transform:scale(.72)}
.generation-ring{
  position:absolute;border:1px solid var(--gold);border-radius:50%;
}
.r-a{left:20px;top:12px;width:92px;height:92px}
.r-b{left:2px;top:27px;width:125px;height:78px;transform:rotate(-20deg)}

.pillar-content{
  position:absolute;
  z-index:4;
  left:30px;right:28px;bottom:80px;
  max-width:380px;
}
.pillar-kicker{
  color:var(--orange);
  font-size:9px;
  font-weight:900;
  letter-spacing:2.4px;
  margin-bottom:8px;
}
.pillar-feature:nth-child(2) .pillar-kicker{color:#e2c262}
.pillar-content h2{
  margin:0;
  font:600 40px/.88 "Cormorant Garamond",Georgia,serif;
  letter-spacing:-.5px;
}
.pillar-content p{
  margin:16px 0 0;
  color:#6c7786;
  font-size:11px;
  line-height:1.65;
  max-width:355px;
}
.pillar-feature:nth-child(2) .pillar-content p{color:#aebdca}

.pillar-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:18px;
  opacity:0;
  transform:translateY(8px);
  transition:.35s .1s;
}
.pillar-feature.active .pillar-tags{opacity:1;transform:none}
.pillar-tags span{
  border:1px solid rgba(7,26,48,.18);
  padding:5px 7px;
  color:#536273;
  font-size:7px;
  font-weight:800;
  letter-spacing:1.2px;
}
.pillar-feature:nth-child(2) .pillar-tags span{
  color:#b9c8d4;border-color:#ffffff2b;
}

.pillar-bottom{
  position:absolute;
  z-index:5;
  left:30px;right:28px;bottom:27px;
  display:flex;align-items:center;justify-content:space-between;
  color:#9a6f24;
  font-size:8px;font-weight:800;letter-spacing:1.7px;
}
.pillar-feature:nth-child(2) .pillar-bottom{color:#d8b85e}
.pillar-bottom b{
  color:var(--orange);
  font-size:20px;
  font-weight:400;
  transition:.25s;
}
.pillar-feature:hover .pillar-bottom b{transform:translateX(5px)}

.pillar-navigation{
  position:relative;
  z-index:6;
  width:min(1250px,100%);
  margin:28px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(7,26,48,.12);
}
.pillar-nav{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 10px;
  border:0;
  border-right:1px solid rgba(7,26,48,.10);
  background:transparent;
  color:#6b7786;
  text-align:left;
  cursor:pointer;
}
.pillar-nav:last-child{border-right:0}
.pillar-nav:before{
  content:"";
  position:absolute;
  top:-1px;left:0;width:0;height:2px;background:var(--orange);
  transition:.35s;
}
.pillar-nav.active:before{width:100%}
.pillar-nav span{
  color:#b38c37;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}
.pillar-nav b{
  font-size:9px;
  letter-spacing:.5px;
  font-weight:700;
}
.pillar-nav.active{color:var(--text)}

@media(max-width:1000px){
  .pillar-stage{min-height:560px}
  .pillar-feature{height:560px;padding:25px 22px}
  .pillar-feature.active{flex:1.5}
  .pillar-content{left:22px;right:20px}
  .pillar-content h2{font-size:34px}
  .pillar-bottom{left:22px;right:20px}
  .pillar-navigation{grid-template-columns:repeat(2,1fr)}
  .pillar-nav:nth-child(2){border-right:0}
  .pillar-nav:nth-child(-n+2){border-bottom:1px solid rgba(7,26,48,.1)}
}

@media(max-width:700px){
  .pillars-premium{padding:80px 18px 60px}
  .pillar-heading{margin-bottom:40px}
  .pillar-heading h1{font-size:57px}
  .pillar-heading p{font-size:12px}
  .pillar-stage{
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .pillar-feature,
  .pillar-feature.active{
    height:430px;
    flex:none;
    transform:none;
  }
  .pillar-feature.active{box-shadow:0 20px 45px rgba(7,26,48,.13)}
  .pillar-feature:not(.active){height:100px}
  .pillar-feature:not(.active) .pillar-symbol,
  .pillar-feature:not(.active) .pillar-content p,
  .pillar-feature:not(.active) .pillar-tags,
  .pillar-feature:not(.active) .pillar-bottom{display:none}
  .pillar-feature:not(.active) .pillar-content{
    top:50%;bottom:auto;transform:translateY(-50%);
    left:65px;
  }
  .pillar-feature:not(.active) .pillar-content h2{
    font-size:25px;
  }
  .pillar-feature:not(.active) .pillar-kicker{margin:0 0 2px}
  .pillar-watermark{font-size:110px}
  .pillar-navigation{display:none}
}