/* =========================================================
   AKHIL MARKETING
   PREMIUM TEMPORARY LANDING EXPERIENCE
   Version: 2.0 — Luxury Editorial Refinement
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {
    --purple-deep: #5E4B8B;
    --purple: #7D6CC4;
    --purple-soft: #B9A7E0;
    --lavender: #E7D6F7;
    --cream: #F6F2FB;

    --white: #FFFFFF;
    --white-soft: rgba(255,255,255,.78);
    --white-muted: rgba(255,255,255,.56);

    --dark: #18131F;

    --ease-luxury: cubic-bezier(.22,.61,.36,1);
    --ease-smooth: cubic-bezier(.4,0,.2,1);

    --header-height: 90px;
}


/* =========================================================
   02. RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: var(--dark);
    color: var(--white);

    font-family: "Manrope", sans-serif;
    font-weight: 400;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button,
a {
    font: inherit;
}

button {
    border: 0;
    background: none;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   03. PAGE
========================================================= */

.page {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--dark);
}


/* =========================================================
   04. SLIDER
========================================================= */

.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   05. SLIDES
========================================================= */

.slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 1.1s var(--ease-smooth),
        visibility 1.1s;

    background: var(--purple-deep);
}

.slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   06. IMAGE
========================================================= */

.slide-image {
    position: absolute;
    inset: -3%;

    overflow: hidden;

    z-index: 0;
}

.slide-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(24,19,31,.82) 0%,
            rgba(24,19,31,.58) 30%,
            rgba(24,19,31,.22) 62%,
            rgba(24,19,31,.48) 100%
        );

    z-index: 2;
}

.slide-image img {
    display: block;

    width: 100%;
    height: 100%;

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

    transform: scale(1.10);

    filter:
        saturate(.88)
        contrast(1.03)
        brightness(.82);

    transition:
        transform 7.5s var(--ease-smooth),
        filter 1.5s ease;
}

.slide.active .slide-image img {
    transform: scale(1);
    filter:
        saturate(.96)
        contrast(1.03)
        brightness(.88);
}


/* =========================================================
   07. CINEMATIC ATMOSPHERE
========================================================= */

.slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(185,167,224,.24),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(94,75,139,.36),
            transparent 38%
        ),
        linear-gradient(
            115deg,
            rgba(94,75,139,.48),
            transparent 38%
        );
}

/* =========================================================
   08. TOPBAR
========================================================= */

.topbar {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

    padding: 0 5vw;

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

    z-index: 20;

    border-bottom: 1px solid rgba(255,255,255,.14);

    background:
        linear-gradient(
            180deg,
            rgba(24,19,31,.46),
            transparent
        );

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* =========================================================
   09. LOGO
========================================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 13px;

    user-select: none;
}

.logo-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.62);

    color: var(--white);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;

    position: relative;
}

.logo-mark::before {
    content: "";

    position: absolute;

    inset: 4px;

    border: 1px solid rgba(185,167,224,.48);
}

.logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.logo-text strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .22em;
}

.logo-text span {
    margin-top: 6px;

    font-size: 7px;
    letter-spacing: .32em;

    color: var(--purple-soft);
}


/* =========================================================
   10. TOPBAR RIGHT
========================================================= */

.topbar-right {
    font-size: 9px;
    font-weight: 600;

    letter-spacing: .25em;

    color: var(--white-muted);

    text-transform: uppercase;
}


/* =========================================================
   11. CONTENT
========================================================= */

.slide-content {
    position: absolute;

    left: 8vw;
    top: 50%;

    width: min(700px, 72vw);

    transform: translateY(-43%);

    z-index: 10;
}


/* =========================================================
   12. KICKER
========================================================= */

.slide-kicker {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 25px;

    color: var(--lavender);

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

    letter-spacing: .36em;

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

    transition:
        opacity .8s .15s var(--ease-luxury),
        transform .8s .15s var(--ease-luxury);
}

.slide-kicker span {
    display: block;

    width: 34px;
    height: 1px;

    background: var(--purple-soft);

    transform-origin: left center;

    transform: scaleX(0);

    transition:
        transform .9s .1s var(--ease-luxury);
}

.slide.active .slide-kicker {
    opacity: 1;
    transform: translateY(0);
}

.slide.active .slide-kicker span {
    transform: scaleX(1);
}


/* =========================================================
   13. HEADINGS
========================================================= */

.slide-content h1,
.slide-content h2 {
    margin: 0;

    max-width: 850px;

    color: var(--white);

    font-family: "Playfair Display", serif;

    font-weight: 400;

    font-size: clamp(48px, 6.2vw, 96px);

    line-height: .94;

    letter-spacing: -.045em;

    text-wrap: balance;

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

    transition:
        opacity 1s .25s var(--ease-luxury),
        transform 1s .25s var(--ease-luxury);
}

.slide.active .slide-content h1,
.slide.active .slide-content h2 {
    opacity: 1;
    transform: translateY(0);
}

.slide-content h1 em,
.slide-content h2 em {
    font-style: italic;

    color: var(--lavender);
}


/* =========================================================
   14. DESCRIPTION
========================================================= */

.slide-content p {
    width: min(520px, 100%);

    margin-top: 27px;

    color: var(--white-soft);

    font-size: 14px;

    line-height: 1.75;

    letter-spacing: .01em;

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

    transition:
        opacity .9s .45s var(--ease-luxury),
        transform .9s .45s var(--ease-luxury);
}

.slide.active .slide-content p {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   15. CTA
========================================================= */

.cta {
    position: relative;

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

    margin-top: 34px;

    padding-bottom: 10px;

    color: var(--white);

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

    letter-spacing: .22em;

    text-transform: uppercase;

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

    transition:
        opacity .9s .58s var(--ease-luxury),
        transform .9s .58s var(--ease-luxury);
}

.slide.active .cta {
    opacity: 1;
    transform: translateY(0);
}

.cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: rgba(255,255,255,.55);

    transform-origin: left center;

    transition:
        transform .5s var(--ease-luxury),
        background .5s ease;
}

.cta b {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.38);

    border-radius: 50%;

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

    transition:
        transform .45s var(--ease-luxury),
        background .45s ease,
        border-color .45s ease;
}

.cta:hover::after {
    background: var(--white);
    transform: scaleX(.72);
}

.cta:hover b {
    transform: translate(4px,-4px);
    border-color: var(--lavender);
    background: rgba(185,167,224,.18);
}


/* =========================================================
   16. CTA GROUP
========================================================= */

.cta-group {
    display: flex;
    align-items: center;
    gap: 28px;
}

.cta-group .cta {
    margin-top: 34px;
}

.cta-outline {
    color: var(--lavender);
}

.cta-outline::after {
    background: rgba(185,167,224,.45);
}


/* =========================================================
   17. VERTICAL LABEL
========================================================= */

.slide-label {
    position: absolute;

    right: 4.4vw;
    top: 50%;

    z-index: 12;

    transform:
        translateY(-50%)
        rotate(90deg);

    transform-origin: center;

    color: rgba(255,255,255,.52);

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

    letter-spacing: .42em;

    white-space: nowrap;
}


/* =========================================================
   18. DECORATIVE FRAME
========================================================= */

.slider::before,
.slider::after {
    content: "";

    position: absolute;

    z-index: 15;

    pointer-events: none;
}

.slider::before {
    inset: 18px;

    border: 1px solid rgba(255,255,255,.09);
}

.slider::after {
    left: 18px;
    right: 18px;
    bottom: 18px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185,167,224,.45),
            transparent
        );
}


/* =========================================================
   19. CENTER DECORATIVE LINE
========================================================= */

.slide-content::after {
    content: "";

    position: absolute;

    left: -3.2vw;
    top: 10px;

    width: 1px;
    height: 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(185,167,224,.75),
            transparent
        );

    opacity: 0;

    transition:
        height 1.1s .2s var(--ease-luxury),
        opacity 1s .2s ease;
}

.slide.active .slide-content::after {
    height: 150px;
    opacity: 1;
}


/* =========================================================
   20. CONTROLS
========================================================= */

.slider-controls {
    position: absolute;

    right: 7.5vw;
    bottom: 13vh;

    z-index: 20;

    display: flex;
    align-items: center;
    gap: 16px;
}

.arrow-btn {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: var(--white);

    border: 1px solid rgba(255,255,255,.28);

    border-radius: 50%;

    cursor: pointer;

    font-size: 17px;
    font-weight: 300;

    transition:
        transform .4s var(--ease-luxury),
        background .4s ease,
        border-color .4s ease;
}

.arrow-btn:hover {
    transform: translateY(-2px);

    background: rgba(255,255,255,.11);

    border-color: rgba(185,167,224,.75);
}

.counter {
    display: flex;
    align-items: center;
    gap: 11px;

    color: var(--white-muted);

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

    letter-spacing: .18em;
}

.counter span:first-child {
    color: var(--white);
}

.counter i {
    display: block;

    width: 28px;
    height: 1px;

    background: rgba(255,255,255,.38);
}


/* =========================================================
   21. PROGRESS
========================================================= */

.progress {
    position: absolute;

    left: 5vw;
    right: 5vw;
    bottom: 67px;

    height: 1px;

    z-index: 20;

    background: rgba(255,255,255,.17);
}

.progress span {
    display: block;

    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--purple-soft),
            var(--white)
        );

    box-shadow:
        0 0 12px rgba(185,167,224,.55);

    transition:
        width .4s var(--ease-smooth);
}


/* =========================================================
   22. BOTTOM BAR
========================================================= */

.bottom-bar {
    position: absolute;

    left: 5vw;
    right: 5vw;
    bottom: 27px;

    z-index: 20;

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

    color: var(--white-muted);

    font-size: 8px;
    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.location {
    display: flex;
    align-items: center;
    gap: 9px;

    max-width: 65%;
}

.dot {
    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: var(--purple-soft);

    box-shadow:
        0 0 0 4px rgba(185,167,224,.08),
        0 0 12px rgba(185,167,224,.42);
}

.copyright {
    white-space: nowrap;
}


/* =========================================================
   23. CONTACT SLIDE
========================================================= */

.contact-slide h2 {
    font-size: clamp(52px, 6vw, 92px);
}

.contact-slide p {
    max-width: 590px;
}


/* =========================================================
   24. MOBILE
========================================================= */

@media (max-width: 900px) {

    :root {
        --header-height: 76px;
    }

    .topbar {
        padding: 0 7vw;
    }

    .topbar-right {
        display: none;
    }

    .slide-image {
        inset: -2%;
    }

    .slide-image::after {
        background:
            linear-gradient(
                180deg,
                rgba(24,19,31,.55) 0%,
                rgba(24,19,31,.24) 34%,
                rgba(24,19,31,.76) 72%,
                rgba(24,19,31,.94) 100%
            );
    }

    .slide-overlay {
        background:
            radial-gradient(
                circle at 75% 30%,
                rgba(185,167,224,.20),
                transparent 32%
            ),
            linear-gradient(
                180deg,
                rgba(94,75,139,.22),
                transparent 55%
            );
    }

    .slide-content {
        left: 8vw;
        bottom: 18vh;
        top: auto;

        width: 78vw;

        transform: translateY(0);
    }

    .slide-content h1,
    .slide-content h2 {
        font-size: clamp(43px, 10.5vw, 72px);
        line-height: .94;
    }

    .slide-kicker {
        margin-bottom: 20px;
        font-size: 8px;
        letter-spacing: .30em;
    }

    .slide-kicker span {
        width: 25px;
    }

    .slide-content p {
        margin-top: 20px;

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

        max-width: 470px;
    }

    .cta {
        margin-top: 26px;
        gap: 20px;
        font-size: 8px;
    }

    .cta b {
        width: 27px;
        height: 27px;
        font-size: 12px;
    }

    .slide-label {
        display: none;
    }

    .slider-controls {
        right: 7vw;
        bottom: 13vh;
    }

    .arrow-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .progress {
        left: 7vw;
        right: 7vw;
        bottom: 60px;
    }

    .bottom-bar {
        left: 7vw;
        right: 7vw;
        bottom: 20px;

        font-size: 7px;
    }

    .location {
        max-width: 70%;
        line-height: 1.5;
    }

    .copyright {
        display: none;
    }

    .slider::before {
        inset: 12px;
    }

    .slider::after {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .slide-content::after {
        display: none;
    }

    .cta-group {
        gap: 18px;
        flex-wrap: wrap;
    }
}


/* =========================================================
   25. SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

    .logo-mark {
        width: 36px;
        height: 36px;

        font-size: 9px;
    }

    .logo-text strong {
        font-size: 12px;
    }

    .logo-text span {
        font-size: 6px;
    }

    .slide-content {
        bottom: 17vh;
        width: 82vw;
    }

    .slide-content h1,
    .slide-content h2 {
        font-size: clamp(39px, 11.8vw, 58px);
    }

    .slide-content p {
        font-size: 11px;
        max-width: 340px;
    }

    .slider-controls {
        bottom: 11.5vh;
    }

    .counter {
        font-size: 8px;
    }

    .location {
        font-size: 6.5px;
        letter-spacing: .10em;
        max-width: 80%;
    }

    .progress {
        bottom: 54px;
    }

    .cta-group {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}


/* =========================================================
   26. LANDSCAPE MOBILE
========================================================= */

@media (max-height: 600px) and (orientation: landscape) {

    .topbar {
        height: 62px;
    }

    .slide-content {
        top: 52%;
        bottom: auto;
        width: 68vw;
    }

    .slide-content h1,
    .slide-content h2 {
        font-size: clamp(34px, 6vw, 56px);
    }

    .slide-content p {
        margin-top: 12px;
        font-size: 10px;
        max-width: 480px;
    }

    .cta {
        margin-top: 16px;
    }

    .slider-controls {
        bottom: 12vh;
    }

    .bottom-bar {
        bottom: 14px;
    }

    .progress {
        bottom: 38px;
    }
}


/* =========================================================
   27. REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .slide-image img {
        transform: scale(1) !important;
    }
}