/* =========================================================
RECIPE WORLD — ABOUT PAGE
========================================================= */

/* =========================================================
PAGE
========================================================= */

.about-page {
width: 100%;
min-height: 100vh;


overflow: hidden;


}

/* =========================================================
CONTAINER
========================================================= */

.about-container {
width: min(
1180px,
calc(100% - 40px)
);


margin: 0 auto;


}

/* =========================================================
COMMON SECTION LABEL
========================================================= */

.section-label {
display: inline-flex;
align-items: center;
gap: 9px;

 
color: #ea580c;

font-size: 12px;
font-weight: 800;

letter-spacing: 0.16em;
line-height: 1;
 

}

.section-label::before {
content: "";

 
width: 28px;
height: 2px;

flex-shrink: 0;

border-radius: 999px;

background: #f97316;
 

}

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

.about-hero {
position: relative;

 
padding: 100px 0 110px;

background:
    radial-gradient(
        circle at 88% 15%,
        rgba(251, 191, 36, 0.16),
        transparent 28%
    ),
    radial-gradient(
        circle at 5% 90%,
        rgba(249, 115, 22, 0.08),
        transparent 30%
    );
 

}

.about-hero .about-container {
display: grid;

 
grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

align-items: center;

gap: 70px;
 

}

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

.about-hero-content {
position: relative;
z-index: 2;
}

.about-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;

 
color: #ea580c;

font-size: 12px;
font-weight: 800;

letter-spacing: 0.16em;
 

}

.about-eyebrow::before {
content: "";

 
width: 28px;
height: 2px;

border-radius: 999px;

background: #f97316;
 

}

.about-hero h1 {
max-width: 720px;

 
margin: 20px 0 24px;

font-size: clamp(
    46px,
    6vw,
    76px
);

line-height: 0.98;

letter-spacing: -0.055em;

font-weight: 800;
 

}

.about-hero h1 span {
display: block;

 
color: #f97316;
 

}

.about-hero p {
max-width: 620px;

 
margin: 0;

color: #64748b;

font-size: 18px;
line-height: 1.8;
 

}

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

.about-hero-actions {
display: flex;
align-items: center;
gap: 14px;

 
margin-top: 36px;
 

}

.about-btn {
display: inline-flex;

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

gap: 9px;

min-height: 50px;

padding: 0 22px;

border-radius: 13px;

font-size: 14px;
font-weight: 750;

text-decoration: none;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
 

}

.about-btn:hover {
transform: translateY(-3px);
}

.about-btn-primary {
color: #ffffff;

 
background: #f97316;

box-shadow:
    0 12px 28px rgba(249, 115, 22, 0.22);
 

}

.about-btn-primary:hover {
background: #ea580c;

 
box-shadow:
    0 16px 35px rgba(249, 115, 22, 0.28);
 

}

.about-btn-secondary {
color: #334155;

 
background: #ffffff;

border: 1px solid #e2e8f0;
 

}

.about-btn-secondary:hover {
border-color: #cbd5e1;

 
box-shadow:
    0 10px 25px rgba(15, 23, 42, 0.07);
 

}

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

.about-hero-visual {
position: relative;

 
min-height: 450px;

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

}

/* =========================================================
ORBITS
========================================================= */

.food-orbit {
position: absolute;

 
border: 1px dashed rgba(
    249,
    115,
    22,
    0.25
);

border-radius: 50%;
 

}

.orbit-one {
width: 370px;
height: 370px;
}

.orbit-two {
width: 285px;
height: 285px;
}

/* =========================================================
HERO FOOD CARD
========================================================= */

.about-food-card {
position: relative;
z-index: 3;

 
display: flex;
align-items: center;

gap: 18px;

width: 285px;

padding: 22px;

border: 1px solid rgba(
    255,
    255,
    255,
    0.8
);

border-radius: 24px;

background: rgba(
    255,
    255,
    255,
    0.90
);

box-shadow:
    0 25px 70px rgba(
        15,
        23,
        42,
        0.12
    );

backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
 

}

.food-card-icon {
width: 64px;
height: 64px;

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

flex-shrink: 0;

border-radius: 18px;

background: #fff7ed;

font-size: 32px;
 

}

.about-food-card strong {
display: block;

 
color: #1e293b;

font-size: 16px;
font-weight: 800;
 

}

.about-food-card span {
display: block;

 
margin-top: 5px;

color: #64748b;

font-size: 12px;
line-height: 1.5;
 

}

/* =========================================================
FLOATING FOOD
========================================================= */

.floating-food {
position: absolute;
z-index: 4;

 
width: 62px;
height: 62px;

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

border-radius: 50%;

background: #ffffff;

font-size: 27px;

box-shadow:
    0 15px 35px rgba(
        15,
        23,
        42,
        0.12
    );

animation:
    aboutFloat 5s ease-in-out infinite;
 

}

.food-one {
top: 50px;
right: 70px;
}

.food-two {
top: 145px;
left: 45px;

 
animation-delay: 0.8s;
 

}

.food-three {
right: 65px;
bottom: 55px;

 
animation-delay: 1.4s;
 

}

.food-four {
left: 75px;
bottom: 90px;

 
animation-delay: 2s;
 

}

@keyframes aboutFloat {

 
0%,
100% {
    transform:
        translateY(0)
        rotate(0deg);
}

50% {
    transform:
        translateY(-10px)
        rotate(4deg);
}
 

}

/* =========================================================
INTRODUCTION
========================================================= */

.about-introduction {
padding: 110px 0;

 
background: #ffffff;
 

}

.section-heading {
max-width: 760px;
}

.section-heading.centered {
margin: 0 auto;

 
text-align: center;
 

}

.section-heading.centered .section-label {
justify-content: center;
}

.section-heading h2 {
margin: 18px 0;

 
color: #172033;

font-size: clamp(
    34px,
    4vw,
    52px
);

line-height: 1.08;

letter-spacing: -0.04em;
 

}

.section-heading p {
margin: 0;

 
color: #64748b;

font-size: 16px;
line-height: 1.8;
 

}

/* =========================================================
STORY GRID
========================================================= */

.story-grid {
display: grid;

 
grid-template-columns:
    1.3fr
    1fr
    1fr;

gap: 18px;

margin-top: 55px;
 

}

.story-card {
position: relative;

 
min-height: 260px;

padding: 30px;

overflow: hidden;

border: 1px solid #f1f5f9;

border-radius: 22px;

background: #fafaf9;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
 

}

.story-card:hover {
transform: translateY(-5px);

 
box-shadow:
    0 20px 45px rgba(
        15,
        23,
        42,
        0.08
    );
 

}

.story-card-large {
background: #fff7ed;
}

.story-number {
display: block;

 
color: #f97316;

font-size: 13px;
font-weight: 800;
 

}

.story-card h3 {
margin: 55px 0 12px;

 
color: #172033;

font-size: 25px;

letter-spacing: -0.03em;
 

}

.story-card p {
max-width: 330px;

 
margin: 0;

color: #64748b;

font-size: 14px;
line-height: 1.75;
 

}

/* =========================================================
DISCOVER SECTION
========================================================= */

.discover-section {
padding: 110px 0;

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

}

.discover-grid {
display: grid;

 
grid-template-columns:
    0.85fr
    1.15fr;

align-items: center;

gap: 80px;
 

}

.discover-content h2 {
margin: 18px 0;

 
color: #172033;

font-size: clamp(
    34px,
    4vw,
    52px
);

line-height: 1.08;

letter-spacing: -0.04em;
 

}

.discover-content h2 span {
color: #f97316;
}

.discover-content > p {
max-width: 510px;

 
margin: 0;

color: #64748b;

font-size: 16px;
line-height: 1.8;
 

}

.text-link {
display: inline-flex;
align-items: center;

 
gap: 9px;

margin-top: 28px;

color: #ea580c;

font-size: 14px;
font-weight: 800;
 

}

.text-link span {
transition:
transform 0.2s ease;
}

.text-link:hover span {
transform: translateX(5px);
}

/* =========================================================
DISCOVER ITEMS
========================================================= */

.discover-items {
display: grid;

 
grid-template-columns:
    1fr
    1fr;

gap: 15px;
 

}

.discover-item {
display: flex;
align-items: flex-start;

 
gap: 16px;

padding: 24px;

border: 1px solid #eef2f7;

border-radius: 18px;

background: #ffffff;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
 

}

.discover-item:hover {
transform: translateY(-4px);

 
box-shadow:
    0 15px 35px rgba(
        15,
        23,
        42,
        0.07
    );
 

}

.discover-icon {
width: 48px;
height: 48px;

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

flex-shrink: 0;

border-radius: 14px;

background: #fff7ed;

font-size: 22px;
 

}

.discover-item h3 {
margin: 2px 0 7px;

 
color: #1e293b;

font-size: 16px;
 

}

.discover-item p {
margin: 0;

 
color: #64748b;

font-size: 13px;
line-height: 1.65;
 

}

/* =========================================================
STATS
========================================================= */

.about-stats {
padding: 65px 0;

 
background: #172033;
 

}

.stats-grid {
display: grid;

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

}

.stat-item {
padding: 10px 25px;

 
text-align: center;

border-right:
    1px solid rgba(
        255,
        255,
        255,
        0.10
    );
 

}

.stat-item:last-child {
border-right: none;
}

.stat-item strong {
display: block;

 
color: #ffffff;

font-size: 38px;
line-height: 1;

letter-spacing: -0.04em;
 

}

.stat-item span {
display: block;

 
margin-top: 9px;

color: #94a3b8;

font-size: 12px;
font-weight: 700;
 

}

/* =========================================================
MISSION
========================================================= */

.mission-section {
padding: 110px 0;

 
background: #ffffff;
 

}

.mission-card {
position: relative;

 
display: grid;

grid-template-columns:
    1fr
    250px;

align-items: center;

min-height: 390px;

padding: 65px;

overflow: hidden;

border-radius: 30px;

background: #fff7ed;
 

}

.mission-content {
position: relative;
z-index: 2;

 
max-width: 700px;
 

}

.mission-content h2 {
margin: 18px 0;

 
color: #172033;

font-size: clamp(
    34px,
    4vw,
    52px
);

line-height: 1.08;

letter-spacing: -0.04em;
 

}

.mission-content h2 span {
color: #f97316;
}

.mission-content p {
max-width: 650px;

 
margin: 0 0 15px;

color: #64748b;

font-size: 15px;
line-height: 1.8;
 

}

/* =========================================================
MISSION SYMBOL
========================================================= */

.mission-symbol {
position: relative;

 
width: 190px;
height: 190px;

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

margin-left: auto;

border-radius: 50%;

background: #ffffff;

box-shadow:
    0 25px 60px rgba(
        249,
        115,
        22,
        0.12
    );
 

}

.mission-symbol::before {
content: "";

 
position: absolute;

inset: -22px;

border:
    1px dashed rgba(
        249,
        115,
        22,
        0.28
    );

border-radius: 50%;
 

}

.mission-symbol span {
font-size: 75px;
}

/* =========================================================
CTA
========================================================= */

.about-cta {
padding: 0 0 100px;

 
background: #ffffff;
 

}

.cta-card {
position: relative;

 
padding: 75px 50px;

overflow: hidden;

border-radius: 30px;

text-align: center;

background: #f97316;

box-shadow:
    0 25px 65px rgba(
        249,
        115,
        22,
        0.20
    );
 

}

.cta-card::before,
.cta-card::after {
content: "";

 
position: absolute;

border:
    1px solid rgba(
        255,
        255,
        255,
        0.14
    );

border-radius: 50%;
 

}

.cta-card::before {
width: 320px;
height: 320px;

 
top: -220px;
left: -80px;
 

}

.cta-card::after {
width: 420px;
height: 420px;

 
right: -180px;
bottom: -300px;
 

}

.cta-label {
position: relative;
z-index: 2;

 
display: inline-flex;
align-items: center;
gap: 9px;

color: rgba(
    255,
    255,
    255,
    0.78
);

font-size: 12px;
font-weight: 800;

letter-spacing: 0.16em;
 

}

.cta-label::before {
content: "";

 
width: 28px;
height: 2px;

border-radius: 999px;

background: rgba(
    255,
    255,
    255,
    0.65
);
 

}

.cta-card h2 {
position: relative;
z-index: 2;

 
max-width: 760px;

margin: 18px auto;

color: #ffffff;

font-size: clamp(
    34px,
    5vw,
    55px
);

line-height: 1.05;

letter-spacing: -0.045em;
 

}

.cta-card p {
position: relative;
z-index: 2;

 
max-width: 560px;

margin: 0 auto 30px;

color: rgba(
    255,
    255,
    255,
    0.82
);

font-size: 15px;
line-height: 1.7;
 

}

.about-btn-light {
position: relative;
z-index: 2;

 
color: #ea580c;

background: #ffffff;
 

}

.about-btn-light:hover {
box-shadow:
0 15px 35px rgba(
0,
0,
0,
0.16
);
}

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

@media (max-width: 900px) {

 
.about-hero {
    padding: 75px 0 80px;
}

.about-hero .about-container {
    grid-template-columns: 1fr;

    gap: 45px;
}

.about-hero-content {
    text-align: center;
}

.about-eyebrow {
    justify-content: center;
}

.about-hero p {
    margin-left: auto;
    margin-right: auto;
}

.about-hero-actions {
    justify-content: center;
}

.about-hero-visual {
    min-height: 390px;
}

.story-grid {
    grid-template-columns: 1fr 1fr;
}

.story-card-large {
    grid-column: span 2;
}

.discover-grid {
    grid-template-columns: 1fr;

    gap: 50px;
}

.discover-content {
    text-align: center;
}

.discover-content .section-label {
    justify-content: center;
}

.discover-content > p {
    margin-left: auto;
    margin-right: auto;
}

.stats-grid {
    grid-template-columns: 1fr 1fr;

    row-gap: 35px;
}

.stat-item:nth-child(2) {
    border-right: none;
}

.mission-card {
    grid-template-columns: 1fr;

    gap: 40px;

    padding: 50px;
}

.mission-symbol {
    margin: 0 auto;
}
 

}

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

@media (max-width: 600px) {

 
.about-container {
    width: calc(100% - 28px);
}

.about-hero {
    padding: 55px 0 60px;
}

.about-hero h1 {
    font-size: 46px;
}

.about-hero p {
    font-size: 15px;

    line-height: 1.7;
}

.about-hero-actions {
    flex-direction: column;

    width: 100%;
}

.about-btn {
    width: 100%;
}

.about-hero-visual {
    min-height: 320px;
}

.orbit-one {
    width: 280px;
    height: 280px;
}

.orbit-two {
    width: 215px;
    height: 215px;
}

.about-food-card {
    width: 245px;

    padding: 17px;
}

.food-card-icon {
    width: 54px;
    height: 54px;

    font-size: 27px;
}

.food-one {
    top: 20px;
    right: 10px;
}

.food-two {
    top: 90px;
    left: 0;
}

.food-three {
    right: 10px;
    bottom: 20px;
}

.food-four {
    left: 15px;
    bottom: 35px;
}

.floating-food {
    width: 50px;
    height: 50px;

    font-size: 22px;
}

.about-introduction,
.discover-section,
.mission-section {
    padding: 75px 0;
}

.section-heading h2,
.discover-content h2,
.mission-content h2 {
    font-size: 35px;
}

.story-grid {
    grid-template-columns: 1fr;
}

.story-card-large {
    grid-column: auto;
}

.story-card {
    min-height: 225px;
}

.discover-items {
    grid-template-columns: 1fr;
}

.stats-grid {
    grid-template-columns: 1fr 1fr;
}

.stat-item {
    padding: 5px 10px;
}

.stat-item strong {
    font-size: 31px;
}

.mission-card {
    padding: 35px 25px;

    border-radius: 24px;
}

.mission-symbol {
    width: 145px;
    height: 145px;
}

.mission-symbol span {
    font-size: 58px;
}

.cta-card {
    padding: 55px 25px;

    border-radius: 24px;
}

.cta-card h2 {
    font-size: 36px;
}

.cta-card p {
    font-size: 14px;
}
 

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

 
.floating-food {
    animation: none;
}

.about-btn,
.story-card,
.discover-item,
.text-link span {
    transition: none;
}


}