/* =========================================================
   ABOUT SCCORIA V1 ULTRA PREMIUM
   PART 1
   GLOBAL + HERO + JOURNEY TIMELINE
========================================================= */

:root{

--dark:#09111f;
--dark-soft:#121d31;
--gold:#c5a25d;
--gold-light:#e8d2a4;
--text:#596273;
--light:#f7f8fa;
--white:#ffffff;
--border:#e8ebef;

}

/* =========================================================
GLOBAL
========================================================= */

.about-sccoria-page{

background:#ffffff;
overflow:hidden;
font-family:'Plus Jakarta Sans',sans-serif;

}

.about-container{

max-width:1480px;
margin:auto;
padding:0 25px;

}

.about-sccoria-page *{

box-sizing:border-box;

}

.about-sccoria-page img{

max-width:100%;
height:auto;
display:block;

}

.about-sccoria-page a{

text-decoration:none;

}

/* =========================================================
SECTION HEADER
========================================================= */

.section-header{

max-width:900px;
margin:0 auto 60px;
text-align:center;

}

.section-header span{

display:inline-block;

padding:10px 18px;

border-radius:100px;

background:#f6f7f9;

font-size:11px;
font-weight:800;
letter-spacing:2px;

color:var(--gold);

margin-bottom:18px;

}

.section-header h2{

font-size:clamp(38px,5vw,82px);

line-height:.95;

font-weight:900;

letter-spacing:-2px;

color:var(--dark);

margin:0;

}

/* =========================================================
HERO
========================================================= */

.about-hero{

position:relative;

padding:90px 0 100px;

overflow:hidden;

background:
linear-gradient(
180deg,
#ffffff 0%,
#fafbfd 100%
);

}

.about-hero:before{

content:'';

position:absolute;

top:-200px;
right:-200px;

width:600px;
height:600px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(197,162,93,.08),
transparent 70%
);

pointer-events:none;

}

.about-hero:after{

content:'';

position:absolute;

bottom:-300px;
left:-250px;

width:700px;
height:700px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(9,17,31,.04),
transparent 70%
);

pointer-events:none;

}

.about-hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:40px;

align-items:center;

position:relative;
z-index:2;

}

.hero-kicker{

display:inline-flex;

padding:12px 20px;

border-radius:100px;

background:#f5f6f8;

border:1px solid var(--border);

font-size:11px;
font-weight:800;
letter-spacing:2px;

color:var(--gold);

margin-bottom:24px;

}

.about-hero-content h1{

font-size:clamp(58px,8vw,120px);

line-height:.88;

letter-spacing:-4px;

font-weight:900;

color:var(--dark);

margin:0 0 25px;

max-width:850px;

}

.about-hero-content p{

font-size:20px;

line-height:1.9;

color:var(--text);

max-width:780px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.hero-buttons a{

padding:18px 28px;

border-radius:100px;

font-size:14px;

font-weight:800;

transition:.35s;

}

.hero-buttons a:first-child{

background:var(--dark);

color:#fff;

}

.hero-buttons a:last-child{

background:#fff;

border:1px solid var(--border);

color:var(--dark);

}

.hero-buttons a:hover{

transform:translateY(-4px);

}

/* =====================================
HERO HIGHLIGHT
===================================== */

.about-hero-highlight{

display:flex;
justify-content:center;

}

.highlight-card{

width:100%;

max-width:520px;

background:#fff;

border:1px solid var(--border);

border-radius:40px;

padding:45px;

position:relative;

overflow:hidden;

}

.highlight-card:before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold-light)
);

}

.highlight-card span{

display:block;

font-size:11px;

font-weight:800;

letter-spacing:2px;

color:var(--gold);

margin-bottom:18px;

}

.highlight-card h3{

font-size:42px;

line-height:1.05;

font-weight:900;

color:var(--dark);

margin-bottom:25px;

}

.highlight-card ul{

padding:0;
margin:0;

list-style:none;

}

.highlight-card li{

padding:14px 0;

border-bottom:1px solid #f1f3f6;

font-size:16px;

font-weight:600;

color:var(--text);

}

.highlight-card li:last-child{

border-bottom:none;

}

/* =========================================================
TIMELINE
========================================================= */

.journey-timeline{

padding:110px 0;

background:#ffffff;

}

.timeline-layout{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

position:relative;

}

.timeline-layout:before{

content:'';

position:absolute;

top:35px;
left:0;
right:0;

height:2px;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold-light)
);

z-index:1;

}

.timeline-item{

position:relative;

z-index:2;

padding-top:70px;

}

.timeline-item:before{

content:'';

position:absolute;

top:20px;
left:0;

width:30px;
height:30px;

border-radius:50%;

background:var(--dark);

border:6px solid #fff;

box-shadow:
0 0 0 3px var(--gold);

}

.timeline-year{

display:inline-block;

padding:8px 14px;

background:#f5f6f8;

border-radius:100px;

font-size:11px;

font-weight:800;

letter-spacing:2px;

color:var(--gold);

margin-bottom:18px;

}

.timeline-item h3{

font-size:30px;

font-weight:900;

line-height:1.1;

color:var(--dark);

margin-bottom:15px;

}

.timeline-item p{

font-size:16px;

line-height:1.9;

color:var(--text);

margin:0;

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:1200px){

.about-hero-grid{

grid-template-columns:1fr;

}

.timeline-layout{

grid-template-columns:repeat(2,1fr);

}

.timeline-layout:before{

display:none;

}

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:768px){

.about-container{

padding:0 15px;

}

.about-hero{

padding:70px 0;

}

.about-hero-content h1{

font-size:48px;

letter-spacing:-2px;

}

.about-hero-content p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;
text-align:center;

}

.highlight-card{

padding:25px;

}

.highlight-card h3{

font-size:28px;

}

.timeline-layout{

grid-template-columns:1fr;

gap:20px;

}

.timeline-item{

padding-top:50px;

}

.section-header h2{

font-size:38px;

}

}

@media(max-width:480px){

.about-hero-content h1{

font-size:38px;

}

.highlight-card h3{

font-size:24px;

}

}

/* =========================================================
   ABOUT SCCORIA V1 ULTRA PREMIUM
   PART 2
   FOUNDERS + CORE VALUES + GLOBAL NETWORK
========================================================= */

/* =========================================================
FOUNDERS SHOWCASE
========================================================= */

.founders-showcase{

padding:120px 0;

background:
linear-gradient(
180deg,
#fafbfd 0%,
#ffffff 100%
);

}

.founders-layout{

display:flex;
flex-direction:column;
gap:35px;

}

.founder-feature{

display:grid;

grid-template-columns:360px 1fr;

gap:40px;

align-items:center;

background:#fff;

border:1px solid var(--border);

border-radius:40px;

padding:35px;

transition:.4s;

}

.founder-feature:hover{

transform:translateY(-8px);

box-shadow:
0 25px 60px rgba(0,0,0,.06);

}

.founder-image{

height:380px;

background:#f7f8fa;

border-radius:30px;

overflow:hidden;

display:flex;
align-items:center;
justify-content:center;

}

.founder-image img{

width:100%;
height:100%;

object-fit:contain;
object-position:center;

}

.founder-info span{

display:inline-flex;

padding:10px 16px;

border-radius:100px;

background:#f5f6f8;

font-size:11px;
font-weight:800;
letter-spacing:2px;

color:var(--gold);

margin-bottom:18px;

}

.founder-info h3{

font-size:52px;

line-height:1;

font-weight:900;

color:var(--dark);

margin-bottom:20px;

}

.founder-info p{

font-size:18px;

line-height:2;

color:var(--text);

max-width:750px;

margin:0;

}

/* =========================================================
ALTERNATE FOUNDER LAYOUT
========================================================= */

.founder-feature:nth-child(even){

grid-template-columns:1fr 360px;

}

.founder-feature:nth-child(even) .founder-image{

order:2;

}

.founder-feature:nth-child(even) .founder-info{

order:1;

}

/* =========================================================
CORE VALUES
========================================================= */

.core-values{

padding:120px 0;

background:#ffffff;

position:relative;

}

.values-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}

.value-card{

padding:40px 30px;

border-radius:35px;

background:#fff;

border:1px solid var(--border);

transition:.35s;

position:relative;

overflow:hidden;

}

.value-card:before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold-light)
);

}

.value-card:hover{

transform:translateY(-10px);

box-shadow:
0 25px 60px rgba(0,0,0,.06);

}

.value-card h3{

font-size:34px;

line-height:1;

font-weight:900;

color:var(--dark);

margin-bottom:15px;

}

.value-card p{

font-size:16px;

line-height:1.9;

color:var(--text);

margin:0;

}

/* =========================================================
GLOBAL NETWORK
========================================================= */

.global-network{

padding:120px 0;

background:
linear-gradient(
180deg,
#ffffff 0%,
#fafbfd 100%
);

}

.network-grid{

display:grid;

grid-template-columns:450px 1fr;

gap:50px;

align-items:center;

}

.network-left span{

display:inline-flex;

padding:10px 18px;

border-radius:100px;

background:#f5f6f8;

font-size:11px;
font-weight:800;
letter-spacing:2px;

color:var(--gold);

margin-bottom:18px;

}

.network-left h2{

font-size:72px;

line-height:.95;

font-weight:900;

letter-spacing:-3px;

color:var(--dark);

margin:0;

}

.network-right{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.network-box{

padding:45px 30px;

background:#fff;

border:1px solid var(--border);

border-radius:35px;

transition:.35s;

position:relative;

overflow:hidden;

}

.network-box:hover{

transform:translateY(-8px);

}

.network-box:before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold-light)
);

}

.network-box strong{

display:block;

font-size:42px;

font-weight:900;

line-height:1;

color:var(--dark);

}

/* =========================================================
ANIMATION PREP
========================================================= */

.founder-feature,
.value-card,
.network-box{

opacity:1;
transform:none;

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:1200px){

.founder-feature,
.founder-feature:nth-child(even){

grid-template-columns:1fr;

}

.founder-feature:nth-child(even) .founder-image,
.founder-feature:nth-child(even) .founder-info{

order:initial;

}

.values-grid{

grid-template-columns:repeat(2,1fr);

}

.network-grid{

grid-template-columns:1fr;

}

.network-left h2{

font-size:56px;

}

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:768px){

.founders-showcase,
.core-values,
.global-network{

padding:70px 0;

}

.founder-feature{

padding:20px;

gap:20px;

}

.founder-image{

height:280px;

}

.founder-info h3{

font-size:32px;

}

.founder-info p{

font-size:16px;

line-height:1.8;

}

.values-grid{

grid-template-columns:1fr;

}

.value-card{

padding:25px;

}

.value-card h3{

font-size:28px;

}

.network-left h2{

font-size:38px;

letter-spacing:-1px;

}

.network-right{

grid-template-columns:1fr;

}

.network-box{

padding:28px 20px;

}

.network-box strong{

font-size:30px;

}

}

@media(max-width:480px){

.founder-image{

height:240px;

}

.founder-info h3{

font-size:28px;

}

.network-left h2{

font-size:32px;

}

}




/* =========================================================
   ABOUT SCCORIA V1 ULTRA PREMIUM
   PART 3
   LEARNING DIVISIONS + CLOSING SECTION
   PREMIUM RESPONSIVE + MICRO ANIMATIONS
========================================================= */

/* =========================================================
LEARNING DIVISIONS
========================================================= */

.learning-divisions{

padding:120px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}

.learning-divisions:before{

content:'';

position:absolute;

top:-250px;
right:-250px;

width:600px;
height:600px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(197,162,93,.08),
transparent 70%
);

pointer-events:none;

}

.division-layout{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

position:relative;
z-index:2;

}

.division-panel{

background:#fff;

border:1px solid var(--border);

border-radius:35px;

padding:40px 30px;

position:relative;

overflow:hidden;

transition:.4s;

min-height:260px;

display:flex;

flex-direction:column;

justify-content:flex-end;

}

.division-panel:hover{

transform:translateY(-10px);

box-shadow:
0 30px 70px rgba(0,0,0,.06);

}

.division-panel:before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold-light)
);

}

.division-panel h3{

font-size:34px;

line-height:1;

font-weight:900;

color:var(--dark);

margin-bottom:15px;

}

.division-panel p{

font-size:15px;

line-height:1.8;

color:var(--text);

margin-bottom:25px;

}

.division-panel span{

display:inline-flex;

padding:8px 14px;

border-radius:100px;

background:#f6f7f9;

font-size:11px;

font-weight:800;

letter-spacing:1px;

color:var(--gold);

width:max-content;

}

/* =====================================
INDIVIDUAL DIVISION ACCENTS
===================================== */

.division-panel:nth-child(1){

background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 100%
);

}

.division-panel:nth-child(2){

background:
linear-gradient(
180deg,
#ffffff 0%,
#fffaf3 100%
);

}

.division-panel:nth-child(3){

background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fafc 100%
);

}

.division-panel:nth-child(4){

background:
linear-gradient(
180deg,
#ffffff 0%,
#faf9ff 100%
);

}

/* =========================================================
CLOSING SECTION
========================================================= */

.about-closing{

padding:120px 0 140px;

background:
linear-gradient(
180deg,
#fafbfd 0%,
#ffffff 100%
);

position:relative;

overflow:hidden;

}

.about-closing:before{

content:'';

position:absolute;

top:-300px;
left:-300px;

width:700px;
height:700px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(9,17,31,.04),
transparent 70%
);

}

.about-closing:after{

content:'';

position:absolute;

bottom:-250px;
right:-250px;

width:600px;
height:600px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(197,162,93,.08),
transparent 70%
);

}

.closing-content{

max-width:1000px;

margin:auto;

text-align:center;

position:relative;
z-index:2;

}

.closing-content span{

display:inline-flex;

padding:10px 20px;

border-radius:100px;

background:#f5f6f8;

font-size:11px;

font-weight:800;

letter-spacing:2px;

color:var(--gold);

margin-bottom:25px;

}

.closing-content h2{

font-size:clamp(48px,6vw,95px);

line-height:.95;

font-weight:900;

letter-spacing:-3px;

color:var(--dark);

margin-bottom:25px;

}

.closing-content p{

font-size:20px;

line-height:2;

color:var(--text);

max-width:850px;

margin:0 auto 35px;

}

.closing-content a{

display:inline-flex;

align-items:center;
justify-content:center;

padding:20px 35px;

border-radius:100px;

background:var(--dark);

color:#fff;

font-size:14px;

font-weight:800;

transition:.35s;

}

.closing-content a:hover{

transform:translateY(-5px);

}

/* =========================================================
PREMIUM MICRO ANIMATIONS
========================================================= */

.about-hero-content,
.highlight-card,
.timeline-item,
.founder-feature,
.value-card,
.network-box,
.division-panel,
.closing-content{

animation:sccoriaFadeUp .8s ease both;

}

.timeline-item:nth-child(2),
.value-card:nth-child(2),
.network-box:nth-child(2),
.division-panel:nth-child(2){

animation-delay:.15s;

}

.timeline-item:nth-child(3),
.value-card:nth-child(3),
.network-box:nth-child(3),
.division-panel:nth-child(3){

animation-delay:.3s;

}

.timeline-item:nth-child(4),
.value-card:nth-child(4),
.network-box:nth-child(4),
.division-panel:nth-child(4){

animation-delay:.45s;

}

@keyframes sccoriaFadeUp{

0%{

opacity:0;
transform:translateY(30px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

/* =====================================
SMOOTH HOVER
===================================== */

.founder-feature,
.value-card,
.network-box,
.division-panel,
.hero-buttons a,
.closing-content a{

will-change:transform;

}

/* =========================================================
PREMIUM RESPONSIVE
========================================================= */

@media(max-width:1200px){

.division-layout{

grid-template-columns:repeat(2,1fr);

}

.division-panel{

min-height:220px;

}

}

@media(max-width:768px){

.learning-divisions,
.about-closing{

padding:70px 0;

}

.division-layout{

grid-template-columns:1fr;

gap:15px;

}

.division-panel{

padding:25px;

min-height:auto;

}

.division-panel h3{

font-size:28px;

}

.closing-content h2{

font-size:42px;

letter-spacing:-1px;

}

.closing-content p{

font-size:16px;

line-height:1.8;

}

.closing-content a{

width:100%;

}

}

@media(max-width:480px){

.division-panel h3{

font-size:24px;

}

.closing-content h2{

font-size:34px;

}

.closing-content span{

font-size:10px;

letter-spacing:1px;

}

}

/* =========================================================
NO IMAGE CROP / NO STRETCH
========================================================= */

.founder-image img,
.leader-photo img{

width:100% !important;

height:100% !important;

object-fit:contain !important;

object-position:center !important;

}

/* =========================================================
SAFETY
========================================================= */

html,
body{

overflow-x:hidden;

}

.about-sccoria-page{

width:100%;

max-width:100%;

}