/* ==========================================================
   RAHMATPAY - PREMIUM HOMEPAGE DESIGN
   Brand palette and original content preserved.
   ========================================================== */

:root {
    --rp-shadow-luxury: 0 28px 85px rgba(15,43,91,.13);
    --rp-shadow-soft: 0 16px 45px rgba(15,43,91,.075);
    --rp-gold-line: linear-gradient(90deg,transparent,#D4AF7C,transparent);
}

/* GLOBAL POLISH */

body {
    background: #F8FAFF;
    letter-spacing: -.012em;
}

::selection {
    background: #DCE8FF;
    color: #0F2B5B;
}

.container,
.container-wide {
    position: relative;
}

/* HEADER */

.site-header {
    background: rgba(255,255,255,.91);
    border-bottom: 1px solid rgba(199,206,221,.42);
    box-shadow: 0 5px 30px rgba(15,43,91,.035);
}

.header-inner {
    min-height: 94px;
}

.brand-logo {
    width: 235px;
    max-height: 76px;
    object-fit: contain;
}

.desktop-navigation a {
    position: relative;
    padding-block: 12px;
    color: #34445F;
    font-size: .84rem;
    letter-spacing: .015em;
}

.desktop-navigation a::after {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 2px;
    background: #D4AF7C;
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.desktop-navigation a:hover::after {
    transform: scaleX(1);
}

.header-cta {
    min-height: 48px;
    padding-inline: 23px;
}

/* BUTTONS */

.btn {
    letter-spacing: .005em;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        background .28s ease;
}

.btn-primary {
    background: linear-gradient(120deg,#0F2B5B,#214D91);
    box-shadow: 0 10px 26px rgba(15,43,91,.2);
}

.btn-primary:hover {
    background: linear-gradient(120deg,#173B75,#3266B3);
    box-shadow: 0 16px 35px rgba(15,43,91,.24);
    transform: translateY(-3px);
}

/* HERO */

.hero-section {
    min-height: 680px;
    padding-block: clamp(85px,9vw,135px);
    background:
        radial-gradient(ellipse at 82% 36%,rgba(58,123,255,.15),transparent 34%),
        radial-gradient(ellipse at 7% 92%,rgba(212,175,124,.17),transparent 34%),
        linear-gradient(125deg,#FFFFFF 0%,#F8FAFF 52%,#EAF1FF 100%);
}

.hero-background-pattern {
    opacity: .19;
    background-image:
        repeating-linear-gradient(45deg,transparent 0 37px,rgba(15,43,91,.12) 38px,transparent 39px 76px),
        repeating-linear-gradient(-45deg,transparent 0 37px,rgba(212,175,124,.13) 38px,transparent 39px 76px);
    background-size: 108px 108px;
    mask-image: linear-gradient(90deg,transparent 5%,black 100%);
}

.hero-grid {
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(45px,6vw,90px);
}

.hero-eyebrow {
    padding: 11px 17px;
    border: 1px solid rgba(212,175,124,.42);
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 5px 20px rgba(15,43,91,.04);
    font-size: .68rem;
    letter-spacing: .16em;
}

.hero-content h1 {
    max-width: 720px;
    font-size: clamp(3.5rem,6.1vw,6rem);
    line-height: 1.025;
    letter-spacing: -.065em;
}

.hero-content h1 span {
    margin-top: 14px;
    background: linear-gradient(100deg,#3A7BFF 0%,#0F2B5B 85%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    max-width: 530px;
    margin-top: 32px;
    font-size: 1.08rem;
    line-height: 1.9;
}

.hero-actions {
    margin-top: 38px;
    gap: 15px;
}

.hero-note {
    margin-top: 35px;
    font-size: .84rem;
}

.hero-note-icon {
    color: #C49B61;
}

/* HERO FEATURE VISUAL */

.hero-visual {
    min-height: 535px;
}

.hero-visual-card {
    width: min(100%,435px);
    padding: 39px;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 32px;
    background: linear-gradient(145deg,rgba(255,255,255,.97),rgba(244,248,255,.9));
    box-shadow:
        0 35px 100px rgba(15,43,91,.15),
        0 5px 20px rgba(58,123,255,.06),
        inset 0 1px 0 #FFFFFF;
}

.visual-label {
    font-size: .65rem;
    letter-spacing: .17em;
}

.visual-emblem {
    width: 150px;
    height: 150px;
    margin: 35px auto 29px;
    padding: 12px;
    border: 1px solid rgba(212,175,124,.48);
    border-radius: 36px;
    background: linear-gradient(145deg,#FFFFFF,#EDF3FF);
    box-shadow:
        0 15px 40px rgba(15,43,91,.1),
        0 0 0 9px rgba(232,241,255,.55);
}

.visual-emblem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-visual-card h2 {
    font-size: 2.35rem;
    letter-spacing: -.045em;
}

.visual-values {
    padding-top: 25px;
}

.visual-values > div > span:last-child {
    font-size: .73rem;
}

.hero-orbit {
    border-color: rgba(58,123,255,.19);
}

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

.orbit-two {
    width: 570px;
    height: 570px;
    border-color: rgba(212,175,124,.3);
}

.floating-decoration {
    border: 1px solid rgba(212,175,124,.32);
    box-shadow: var(--rp-shadow-soft);
}

/* INTRODUCTION */

.introduction-section {
    padding-block: 115px;
    background: #FFFFFF;
}

.introduction-heading .section-title,
.principles-content .section-title,
.contact-grid .section-title {
    font-size: clamp(2.5rem,4.2vw,3.8rem);
    line-height: 1.12;
}

.title-accent {
    color: #3A7BFF;
}

.introduction-copy p {
    font-size: 1.04rem;
}

/* VALUES */

.values-section {
    position: relative;
    padding-block: 115px;
    background:
        radial-gradient(ellipse at 50% 0%,rgba(58,123,255,.095),transparent 52%),
        linear-gradient(180deg,#F8FAFF,#F2F6FD);
}

.values-grid {
    gap: 25px;
}

.value-card {
    min-height: 285px;
    padding: 37px;
    border: 1px solid rgba(199,206,221,.52);
    border-radius: 25px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 14px 40px rgba(15,43,91,.055);
}

.value-card:hover {
    border-color: rgba(212,175,124,.68);
    box-shadow: var(--rp-shadow-luxury);
    transform: translateY(-9px);
}

.value-card-icon {
    width: 62px;
    height: 62px;
    border: 1px solid rgba(58,123,255,.13);
    border-radius: 20px;
    background: linear-gradient(145deg,#EDF3FF,#FFFFFF);
    font-size: 1.8rem;
}

.value-card-number {
    color: #B9A17E;
    letter-spacing: .16em;
}

.value-card h3 {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 400;
}

/* PROCESS */

.process-section {
    padding-block: 115px;
    background: #FFFFFF;
}

.process-grid {
    gap: 28px;
}

.process-card {
    padding: 25px 21px 20px;
    border-top: 1px solid #DCE5F3;
    transition: border-color .25s ease,transform .25s ease;
}

.process-card:hover {
    border-top-color: #D4AF7C;
    transform: translateY(-5px);
}

.process-number {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(212,175,124,.52);
    border-radius: 20px;
    background: linear-gradient(145deg,#FFFFFF,#EDF3FF);
    color: #0F2B5B;
    box-shadow: 0 8px 24px rgba(15,43,91,.07);
}

.process-card h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
}

.process-disclaimer {
    border-left-color: #D4AF7C;
    border-radius: 0 12px 12px 0;
    background: #F8FAFF;
}

/* PRINCIPLES */

.principles-section {
    padding-block: 120px;
    background:
        radial-gradient(ellipse at 90% 50%,rgba(58,123,255,.12),transparent 42%),
        linear-gradient(125deg,#EDF3FF,#F8FAFF);
}

.principles-panel {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 32px;
    background:
        radial-gradient(circle at 100% 0%,rgba(212,175,124,.16),transparent 40%),
        linear-gradient(145deg,#FFFFFF,#F2F6FD);
    box-shadow: var(--rp-shadow-luxury);
}

.principles-panel blockquote {
    font-size: clamp(2rem,3.2vw,2.8rem);
    letter-spacing: -.035em;
}

.principles-panel-mark {
    color: #C49B61;
}

/* APPLICATION CTA */

.application-section {
    padding-block: 100px;
}

.application-panel {
    padding: clamp(55px,8vw,100px);
    border: 1px solid rgba(212,175,124,.3);
    border-radius: 35px;
    background:
        radial-gradient(ellipse at 90% 10%,rgba(58,123,255,.42),transparent 40%),
        radial-gradient(ellipse at 10% 100%,rgba(212,175,124,.14),transparent 42%),
        linear-gradient(120deg,#0B2047,#153A70 65%,#1B4B91);
    box-shadow: 0 35px 95px rgba(15,43,91,.23);
}

.application-content h2 {
    max-width: 720px;
    font-size: clamp(2.5rem,4.7vw,4rem);
    letter-spacing: -.045em;
}

.application-button {
    min-height: 58px;
    padding-inline: 30px;
    border: 1px solid rgba(212,175,124,.6);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* CONTACT */

.contact-section {
    padding-block: 105px;
    background: linear-gradient(180deg,#F8FAFF,#EDF3FF);
}

.contact-action .btn {
    min-height: 58px;
}

/* FOOTER */

.site-footer {
    padding-top: 80px;
    background:
        radial-gradient(ellipse at 15% 0%,rgba(58,123,255,.16),transparent 40%),
        linear-gradient(135deg,#0A1D3D,#0F2B5B);
}

.footer-main {
    padding-bottom: 65px;
}

.footer-logo {
    width: 245px;
    max-height: 85px;
    object-fit: contain;
}

.footer-brand p {
    font-size: .88rem;
    letter-spacing: .015em;
}

.footer-column h3 {
    color: #E4C99F;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
}

.footer-column a {
    transition: color .2s ease,transform .2s ease;
}

.footer-column a:hover {
    color: #FFFFFF;
    transform: translateX(4px);
}

.footer-bottom {
    border-top-color: rgba(255,255,255,.17);
}

/* RESPONSIVE REFINEMENT */

@media (max-width:1024px) {
    .header-inner {
        min-height: 80px;
    }

    .brand-logo {
        width: 205px;
    }

    .hero-visual {
        min-height: 465px;
    }

    .visual-emblem {
        width: 125px;
        height: 125px;
    }
}

@media (max-width:768px) {
    .header-inner {
        min-height: 76px;
    }

    .brand-logo {
        width: 185px;
        max-height: 65px;
    }

    .hero-section {
        padding-block: 75px;
    }

    .hero-grid {
        gap: 45px;
    }

    .hero-content h1 {
        font-size: clamp(3rem,9vw,4.6rem);
    }

    .hero-visual {
        min-height: 450px;
    }

    .introduction-section,
    .values-section,
    .process-section,
    .principles-section,
    .contact-section {
        padding-block: 75px;
    }

    .values-grid {
        gap: 18px;
    }

    .value-card {
        min-height: auto;
    }

    .footer-logo {
        width: 220px;
    }
}

@media (max-width:480px) {
    .brand-logo {
        width: 175px;
        max-height: 58px;
    }

    .hero-section {
        padding-block: 60px;
    }

    .hero-content h1 {
        font-size: clamp(2.65rem,11vw,3.5rem);
    }

    .hero-description {
        font-size: .96rem;
        line-height: 1.8;
    }

    .hero-visual {
        min-height: 400px;
    }

    .hero-visual-card {
        padding: 27px 21px;
    }

    .visual-emblem {
        width: 115px;
        height: 115px;
    }

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

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

    .application-panel {
        padding: 40px 25px;
    }

    .application-content h2 {
        font-size: 2.45rem;
    }

    .footer-logo {
        width: 195px;
    }
}

@media (prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}