/* =====================================
   ABOUT HERO
   Layout consistent with Contact
===================================== */

.about-hero {

    display: grid;
    grid-template-columns: 44% 56%;

    min-height: 620px;

    padding: 0;

    background: linear-gradient(
        135deg,
        #f7f4fb 0%,
        #eee8f7 100%
    );

}


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

.about-hero-content {

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 80px 5vw 80px 8vw;

}


.about-hero .section-label {

    display: block;

    margin-bottom: 24px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;

    color: #7355A3;

}


.about-hero h1 {

    margin: 0 0 30px;

    font-size: clamp(56px, 5vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.045em;

    font-weight: 600;

    color: #27233A;

}


.about-hero p {

    max-width: 560px;

    margin: 0;

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

    color: #666;

}


/* =====================================
   HERO - IMAGE
===================================== */

.about-hero-image {

    position: relative;

    min-width: 0;
    min-height: 620px;

    overflow: hidden;

    background: #eee8f5;

}


.about-hero-image img {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 0;

    box-shadow: none;

    transition: transform 0.8s ease;

}


.about-hero-image:hover img {

    transform: scale(1.015);

}


/* =====================================
   ABOUT HERO - TABLET
===================================== */

@media(max-width:1024px) {

    .about-hero {

        grid-template-columns: 46% 54%;

        min-height: 560px;

    }

    .about-hero-content {

        padding: 70px 5vw;

    }

    .about-hero-image {

        min-height: 560px;

    }

    .about-hero h1 {

        font-size: clamp(48px, 5vw, 64px);

    }

}


/* =====================================
   ABOUT HERO - MOBILE
===================================== */

@media(max-width:767px) {

    .about-hero {

        grid-template-columns: 1fr;

        min-height: 0;

    }

    .about-hero-content {

        padding: 75px 24px 80px;

        text-align: left;

    }

    .about-hero h1 {

        font-size: 50px;

    }

    .about-hero p {

        font-size: 16px;

    }

    .about-hero-image {

        min-height: 420px;

    }

}


/* =====================================
   ABOUT HERO - SMALL MOBILE
===================================== */

@media(max-width:420px) {

    .about-hero-content {

        padding: 65px 18px 70px;

    }

    .about-hero h1 {

        font-size: 44px;

    }

    .about-hero-image {

        min-height: 350px;

    }

}

/* =====================================
   HISTORIA
===================================== */

.brand-story{

    padding:120px 8%;

    background:#ffffff;

}

.story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.story-image img{

    width:100%;

    display:block;

    border-radius:30px;

    box-shadow:0 30px 60px rgba(40,30,70,.08);

}

.story-content h2{

    font-size:52px;

    line-height:1.1;

    margin:20px 0 35px;

    color:#27233A;

}

.story-content p{

    font-size:18px;

    line-height:1.9;

    color:#666;

    margin-bottom:24px;

}

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

@media(max-width:1100px){

.about-hero-grid,
.story-grid{

grid-template-columns:1fr;

gap:60px;

}

.about-hero{

text-align:center;

}

.story-content{

text-align:center;

}

}

@media(max-width:768px){

.about-hero,
.brand-story{

padding:90px 25px;

}

.about-hero h1{

font-size:44px;

}

.story-content h2{

font-size:38px;

}

.about-hero p,
.story-content p{

font-size:17px;

line-height:1.8;

}

}

/* =====================================
   DLACZEGO KERANIQUE
===================================== */

.why-keranique{

    padding:120px 8%;

    background:#F8F9FC;

    text-align:center;

}

.why-keranique h2{

    font-size:52px;

    line-height:1.15;

    color:#27233A;

    margin:20px auto;

    max-width:700px;

}

.why-intro{

    max-width:760px;

    margin:0 auto 70px;

    font-size:19px;

    line-height:1.9;

    color:#666;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#fff;

    padding:45px 35px;

    border-radius:24px;

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

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(40,30,70,.12);

}

.why-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#F2ECFA;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

}

.why-card h3{

    font-size:26px;

    color:#27233A;

    margin-bottom:18px;

}

.why-card p{

    color:#666;

    line-height:1.8;

    font-size:17px;

}

@media(max-width:1100px){

.why-grid{

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

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

}

.why-keranique{

padding:90px 25px;

}

.why-keranique h2{

font-size:38px;

}

}

/* =====================================
   RYTUAŁ
===================================== */

.hair-ritual{

    padding:120px 8%;

    background:#fff;

    text-align:center;

}

.hair-ritual h2{

    font-size:52px;

    color:#27233A;

    margin:20px auto;

    max-width:700px;

}

.ritual-intro{

    max-width:760px;

    margin:0 auto 70px;

    font-size:19px;

    line-height:1.9;

    color:#666;

}

.ritual-steps{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:20px;

    flex-wrap:wrap;

}

.ritual-step{

    width:180px;

}

.step-number{

    width:70px;

    height:70px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#5A4586;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:bold;

}

.ritual-step h3{

    font-size:24px;

    color:#27233A;

    margin-bottom:15px;

}

.ritual-step p{

    color:#666;

    line-height:1.8;

    font-size:16px;

}

.step-arrow{

    font-size:42px;

    color:#CAB8E8;

    margin-top:15px;

}

@media(max-width:1100px){

.step-arrow{

display:none;

}

.ritual-step{

width:45%;

margin-bottom:40px;

}

}

@media(max-width:768px){

.ritual-step{

width:100%;

}

.hair-ritual{

padding:90px 25px;

}

.hair-ritual h2{

font-size:38px;

}

}

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

.about-cta{

    padding:140px 8%;

    text-align:center;

    background:linear-gradient(180deg,#F8F9FC 0%,#F5F0FB 100%);

}

.about-cta h2{

    font-size:58px;

    line-height:1.1;

    color:#27233A;

    margin:20px auto 30px;

    max-width:760px;

}

.about-cta p{

    max-width:760px;

    margin:0 auto 60px;

    font-size:20px;

    line-height:1.9;

    color:#666;

}

/* ===========================
   Przyciski
=========================== */

.about-cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;

}

.about-cta-buttons a{

    min-width:240px;

    padding:18px 36px;

    border-radius:14px;

    font-size:17px;

    font-weight:600;

    text-decoration:none;

    transition:all .3s ease;

}

/* Fioletowy */

.hero-btn{

    background:#5A4586;

    color:#fff;

    box-shadow:0 12px 28px rgba(90,69,134,.18);

}

.hero-btn:hover{

    background:#4B3974;

    transform:translateY(-3px);

    box-shadow:0 18px 36px rgba(90,69,134,.25);

}

/* Biały */

.hero-btn-outline{

    background:#fff;

    color:#5A4586;

    border:2px solid #D8CDEE;

    box-shadow:0 12px 28px rgba(0,0,0,.05);

}

.hero-btn-outline:hover{

    background:#F7F3FC;

    transform:translateY(-3px);

    box-shadow:0 18px 36px rgba(0,0,0,.08);

}

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

@media(max-width:768px){

.about-cta{

    padding:90px 25px;

}

.about-cta h2{

    font-size:40px;

}

.about-cta p{

    font-size:17px;

    margin-bottom:40px;

}

.about-cta-buttons{

    flex-direction:column;

    align-items:center;

}

.about-cta-buttons a{

    width:100%;

    max-width:340px;

}

}