/* ==========================================================================
   Homepage styles — ported 1:1 from the supplied design (colors, type
   scale, radii, shadows, phone mockup, steps, download panel, FAQs),
   with a responsive hamburger nav layered on top for small screens.
   Loaded on top of the Underscores style.css (see inc/theme-setup.php)
   ========================================================================== */

:root {
	--ei-red: #e60000;
	--ei-red-dark: #b90000;
	--ei-black: #111111;
	--ei-text: #252525;
	--ei-muted: #666666;
	--ei-line: #e8e8e8;
	--ei-soft: #fff5f2;
	--ei-soft-2: #faf7f4;
	--ei-white: #ffffff;
	--ei-radius-lg: 28px;
	--ei-radius-md: 18px;
	--ei-shadow: 0 22px 70px rgba(17, 17, 17, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, Arial, Helvetica, sans-serif; color: var(--ei-text); line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

/* ---------- Header / nav ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid var(--ei-line);
	backdrop-filter: blur(14px);
}

.nav {
	position: relative;
	min-height: 86px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 235px; color: var(--ei-black); font-weight: 800; }

.brand-mark {
	width: 50px; height: 50px;
	border-radius: 13px;
	background: var(--ei-red);
	display: grid; place-items: center;
	box-shadow: 0 12px 28px rgba(230, 0, 0, 0.22);
	flex: 0 0 auto;
	overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.brand-ei { font-size: 40px; line-height: 0.9; font-weight: 900; letter-spacing: -0.07em; color: var(--ei-black); }
.brand-name { font-size: 14px; line-height: 1.05; font-weight: 800; color: var(--ei-black); }

.nav-links { display: flex; align-items: center; justify-content: flex-end; }
.nav-links ul, .nav-links-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 30px;
	font-size: 15px; font-weight: 800;
}
.nav-links a { padding: 9px 0; position: relative; display: inline-block; }
.nav-links a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px;
	background: var(--ei-red); transform: scaleX(0); transform-origin: left; transition: 180ms ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

/* Hamburger — desktop hidden, matches the brand-red accent */
.menu-toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px; border: 1px solid var(--ei-line); border-radius: 10px;
	background: var(--ei-white); cursor: pointer;
}
.menu-toggle-bar { width: 20px; height: 2px; margin: 0 auto; background: var(--ei-black); transition: transform 180ms ease, opacity 180ms ease; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
	.menu-toggle { display: flex; padding: 5px; }

	.nav { padding: 18px 0; }
	.brand { justify-content: center; }

	.nav-links {
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--ei-white); border-bottom: 1px solid var(--ei-line);
		box-shadow: var(--ei-shadow); max-height: 0; overflow: hidden; transition: max-height 220ms ease;
	}
	.nav-links.is-open { max-height: 420px; }

	.nav-links ul, .nav-links-list {
		flex-direction: column; align-items: flex-start; gap: 4px;
		padding: 20px;
        width: 100%;
		/* padding: 12px min(1160px, calc(100% - 40px)) 20px; */
	}
	.nav-links a { display: block; width: 100%; padding: 12px 4px; }
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 86% 15%, rgba(230, 0, 0, 0.10), transparent 24%),
		linear-gradient(110deg, #ffffff 0%, #ffffff 43%, #fff1ed 100%);
}

.hero-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 44px; min-height: 690px; padding: 76px 0 70px; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
	padding: 8px 12px; border: 1px solid rgba(230, 0, 0, 0.18); border-radius: 999px;
	background: rgba(255, 255, 255, 0.74); color: var(--ei-red); font-size: 13px; font-weight: 900; letter-spacing: 0.02em;
}
.eyebrow span { width: 8px; height: 8px; border-radius: 999px; background: var(--ei-red); box-shadow: 0 0 0 6px rgba(230, 0, 0, 0.10); }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; color: var(--ei-black); font-size: clamp(48px, 6vw, 82px); line-height: 1.1; letter-spacing: -0.06em; font-weight: 900; }
h1 strong { display: block; color: var(--ei-red); font-weight: 900; }

.hero-copy { max-width: 560px; margin-bottom: 28px; color: #555; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 42px; }

.store-button {
	min-width: 188px; display: flex; align-items: center; gap: 12px;
	padding: 12px 18px; border-radius: 15px; background: var(--ei-black); color: var(--ei-white);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16); transition: transform 180ms ease, box-shadow 180ms ease;
}
.store-button svg {
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
}
.store-button:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.20); }
.store-button small { display: block; font-size: 11px; line-height: 1; opacity: 0.78; font-weight: 700; }
.store-button b { display: block; font-size: 17px; line-height: 1.15; font-weight: 900; }

.hero-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 650px; }
.hero-point { display: flex; gap: 12px; align-items: flex-start; }
.hero-point-icon {
	width: 34px; height: 34px; border-radius: 11px; background: rgba(230, 0, 0, 0.08);
	display: grid; place-items: center; color: var(--ei-red); flex: 0 0 auto; font-size: 16px;
}
.hero-point h3 { margin-bottom: 2px; font-size: 14px; color: var(--ei-black); font-weight: 900; }
.hero-point p { margin: 0; color: var(--ei-muted); font-size: 13px; line-height: 1.35; }

.hero-visual { position: relative; min-height: 565px; display: grid; place-items: center; }

.phone-card {
	position: relative; width: min(360px, 82vw); margin-left: 80px; padding: 13px;
	border-radius: 43px; background: #111; box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28); transform: rotate(2deg);
}
.phone-card::before {
	content: ""; position: absolute; inset: -6px; border-radius: 49px;
	background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(230,0,0,0.18)); z-index: -1;
}
.phone-screen { position: relative; overflow: hidden; border-radius: 32px; background: #fff; aspect-ratio: 9 / 18.5; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }

.floating-badge {
	position: absolute; top: 18px; left: -34px; width: 154px; padding: 14px 16px;
	border-radius: 18px; background: var(--ei-white); border: 1px solid rgba(230,0,0,0.12); box-shadow: var(--ei-shadow);
}
.floating-badge strong { display: block; color: var(--ei-black); font-size: 15px; font-weight: 900; }
.floating-badge span { display: block; margin-top: 2px; color: var(--ei-muted); font-size: 12px; line-height: 1.25; }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-soft { background: linear-gradient(180deg, #ffffff 0%, #fff8f4 100%); }

.section-heading { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-heading h2 { margin-bottom: 12px; color: var(--ei-black); font-size: clamp(34px, 4vw, 50px); line-height: 1; letter-spacing: -0.045em; font-weight: 900; }
.section-heading h2 span { color: var(--ei-red); }
.section-heading p { margin: 0; color: var(--ei-muted); font-size: 17px; }

/* About */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.intro-card { padding: 34px; border: 1px solid var(--ei-line); border-radius: var(--ei-radius-lg); background: var(--ei-white); box-shadow: 0 16px 42px rgba(0,0,0,0.05); }
.intro-card.highlight { background: var(--ei-black); color: var(--ei-white); border-color: var(--ei-black); }
.intro-card h3 { margin-bottom: 12px; font-size: 26px; line-height: 1.1; letter-spacing: -0.03em; color: inherit; }
.intro-card p { margin: 0; color: inherit; opacity: 0.82; font-size: 16px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step {
	position: relative; padding: 30px 24px; border: 1px solid var(--ei-line); border-radius: var(--ei-radius-lg);
	background: var(--ei-white); box-shadow: 0 14px 40px rgba(0,0,0,0.055); counter-increment: step;
}
.step::before {
	content: counter(step); position: absolute; top: 24px; right: 24px; width: 26px; height: 26px;
	border-radius: 999px; background: var(--ei-red); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900;
}
.step-icon { width: 62px; height: 62px; margin-bottom: 24px; border-radius: 19px; background: rgba(230,0,0,0.08); color: var(--ei-red); display: grid; place-items: center; padding: 10px;}
.step-icon img { width: 31px; height: 31px; }
.step h3 { margin-bottom: 8px; color: var(--ei-black); font-size: 19px; font-weight: 900; }
.step p { margin: 0; color: var(--ei-muted); font-size: 14px; }

/* Download */
.download-panel {
	position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center;
	padding: 48px; border-radius: 34px;
	background:
		radial-gradient(circle at 94% 10%, rgba(230,0,0,0.18), transparent 28%),
		linear-gradient(135deg, #111111 0%, #1b1b1b 62%, #340000 100%);
	color: var(--ei-white); box-shadow: var(--ei-shadow);
}
.download-panel h2 { margin-bottom: 14px; font-size: clamp(34px, 4vw, 54px); line-height: 1; letter-spacing: -0.045em; font-weight: 900; }
.download-panel p { max-width: 560px; color: rgba(255,255,255,0.76); font-size: 17px; }
.download-panel .store-button { background: var(--ei-white); color: var(--ei-black); box-shadow: none; }
.download-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.download-note { margin-top: 18px; color: rgba(255,255,255,0.62); font-size: 13px; }

.app-card { justify-self: end; width: min(300px, 100%); padding: 18px; border-radius: 34px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(10px); }
.app-preview, .app-card > img { overflow: hidden; border-radius: 26px; background: #fff; aspect-ratio: 9 / 16; }
.app-preview img, .app-card > img { width: 100%; height: 100%; object-fit: cover; }

/* FAQs */
.faq-wrap { max-width: 860px; margin: 0 auto; }
.faqs .faq-item, .faq-item {
	border: 1px solid var(--ei-line); border-radius: 18px; background: var(--ei-white);
	box-shadow: 0 10px 28px rgba(0,0,0,0.04); margin-bottom: 14px; overflow: hidden;
}
.faq-question {
	cursor: pointer; padding: 21px 24px; color: var(--ei-black); font-weight: 900; list-style: none;
	display: flex; justify-content: space-between; gap: 16px;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: "+"; color: var(--ei-red); font-size: 24px; line-height: 1; }
.faq-item.active .faq-question::after { content: "\2212"; }
.faq-answer { margin: 0; padding: 0 24px 22px; color: var(--ei-muted); font-size: 15px; }

/* Contact */
.contact-card { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 42px; border-radius: 34px; background: var(--ei-soft-2); border: 1px solid rgba(230,0,0,0.10); }
.contact-card h2 { margin-bottom: 14px; color: var(--ei-black); font-size: clamp(32px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.045em; font-weight: 900; }
.contact-card p { color: var(--ei-muted); font-size: 16px; }
.contact-list { display: grid; gap: 14px; align-content: center; }
.contact-item { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--ei-line); font-weight: 800; }

/* ---------- Footer ---------- */
.site-footer { padding: 44px 0 30px; background: var(--ei-black); color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 38px; align-items: start; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand .brand-ei, .footer-brand .brand-name { color: #fff; }
.footer-copy { margin: 0; max-width: 260px; color: rgba(255,255,255,0.68); font-size: 14px; }
.footer-col h3 { margin-bottom: 14px; font-size: 15px; color: #fff; }
.footer-links { display: grid; gap: 9px; color: rgba(255,255,255,0.68); font-size: 14px; }
.footer-links a:hover { color: #fff; }
.footer-bottom { margin-top: 24px; color: rgba(255,255,255,0.55); font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.hero-inner, .intro-grid, .download-panel, .contact-card { grid-template-columns: 1fr; }
	.hero-inner { min-height: auto; padding: 56px 0 64px; }
	.hero-visual { min-height: 480px; }
	.phone-card { margin-left: 0; }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.app-card { justify-self: start; }
	.footer-top { grid-template-columns: 1fr; }
	.floating-badge {
		left: 30px;
    	width: 165px;
	}
}

@media (max-width: 640px) {
	.container { width: min(100% - 28px, 1160px); }
	.nav-links ul, .nav-links-list { font-size: 13px; }
	h1 { font-size: 45px; line-height: 1; }
	.hero-points, .steps { grid-template-columns: 1fr; }
	/* .hero-actions, .download-actions { align-items: stretch; flex-direction: column; } */
	.store-button { width: auto; justify-content: center; min-width: 165px; gap: 10px; padding: 12px 15px; }
	.download-panel, .contact-card, .intro-card { padding: 28px; }
	.section { padding: 60px 0; }
	.phone-card {
        margin-top: 130px;
    }
	.floating-badge { 
		width: 175px;
        top: 0;
	}
	.nav-links ul li, .nav-links-list li {
		display: flex;
		width: 100%;
	}
	.hero-visual {
        max-width: 450px;
        width: 100%;
        margin: 0 auto;
        min-height: unset;
    }
}


.contact-item svg {
    width: 22px;
    height: 22px;
    color: var(--ei-red);
    flex: 0 0 auto;
}
.footer-brand .brand-ei, .footer-brand .brand-name {
    color: #fff;
}
.brand-ei {
    font-size: 40px;
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -0.07em;
    color: var(--ei-black);
}


.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature {
    padding: 30px;
    border: 1px solid var(--ei-line);
    border-radius: var(--ei-radius-lg);
    background: var(--ei-white);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.05);
}
.feature-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: rgba(230, 0, 0, 0.08);
    display: grid;
    place-items: center;
    color: var(--ei-red);
}
.feature h3 {
    margin-bottom: 8px;
    color: var(--ei-black);
    font-size: 20px;
    font-weight: 900;
}

.feature p {
    margin: 0;
    color: var(--ei-muted);
    font-size: 15px;
}
.contact-item span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
@media (max-width: 980px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }

}
@media (max-width: 640px) {
    .features {
        grid-template-columns: 1fr;
    }
	.step-icon, .feature-icon {
		width: 50px;
		height: 50px;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	.contact-card p {
		margin: 0;
	}
	.feature,
	.step,
	.intro-card.highlight {
		padding: 20px;
		border-radius: 15px;
	}
	section#faqs {
		padding-bottom: 0;
	}
	section#how-it-works,
	section#why-choose,
	section#contact {
		/* padding-top: 0; */
	}
}

@media (max-width: 980px) {
    .contact-card {
        flex-wrap: wrap;
        display: flex;
    }
	.contact-item {
		gap: 10px;
		padding: 10px;
		word-break: break-word;
		font-size: 13px;
		align-items: center;
        border-radius: 10px;
	}
}






/* Background glow */ 
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 9999;

    border-radius: 50%;

    background:
        radial-gradient(circle at 30% 30%, rgba(255, 0, 128, 0.6), transparent 35%),
        radial-gradient(circle at 70% 30%, rgba(0, 153, 255, 0.6), transparent 35%),
        radial-gradient(circle at 30% 70%, rgba(140, 0, 255, 0.6), transparent 35%),
        radial-gradient(circle at 70% 70%, rgba(0, 255, 170, 0.5), transparent 35%);

    filter: blur(100px);
    opacity: 0.7;

    transform: translate(-50%, -50%);
    will-change: transform;
}

body {
    position: relative;
    overflow-x: hidden;
}

main,
header,
footer,
section,
.container,
.wrapper {
    position: relative;
    z-index: 1;
}
/* 
.aurora-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
} */
/* 
.aurora-bg {
	position: fixed;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 9999;

    border-radius: 50%;
   

    /* background:
        radial-gradient(circle at 20% 50%,
            rgba(255, 255, 180, 0.45) 0%,
            transparent 20%),

        radial-gradient(circle at 40% 50%,
            rgba(180, 190, 255, 0.55) 0%,
            transparent 25%),

        radial-gradient(circle at 70% 50%,
            rgba(120, 240, 255, 0.7) 0%,
            transparent 25%),

        radial-gradient(circle at 90% 50%,
            rgba(230, 180, 255, 0.8) 0%,
            transparent 35%);

			background:
radial-gradient(circle at 12% 50%, rgba(255,248,180,.5), transparent 18%),
radial-gradient(circle at 35% 50%, rgba(185,190,255,.55), transparent 20%),
radial-gradient(circle at 75% 50%, rgba(120,235,255,.75), transparent 18%),
radial-gradient(circle at 92% 50%, rgba(240,190,255,.8), transparent 30%);

    filter: blur(10px);

    animation: floatAurora 12s ease-in-out infinite alternate;
}

.aurora-shape::before,
.aurora-shape::after {
    content: "";
    position: absolute;
    inset: 0;

    background: inherit;
    filter: blur(80px);

    opacity: .8;
}

.aurora-shape::before {
    animation: swirl1 14s ease-in-out infinite;
}

.aurora-shape::after {
    animation: swirl2 10s ease-in-out infinite;
}

@keyframes floatAurora {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-48%, -52%) scale(1.05);
    }
    100% {
        transform: translate(-52%, -48%) scale(.98);
    }
}

@keyframes swirl1 {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(4deg) scale(1.08);
    }
    100% {
        transform: rotate(-4deg) scale(.95);
    }
}

@keyframes swirl2 {
    0% {
        transform: rotate(0deg) scale(.95);
    }
    50% {
        transform: rotate(-6deg) scale(1.1);
    }
    100% {
        transform: rotate(6deg) scale(1);
    }
} */

/* 
.cursor-beam {
    position: fixed;
    left: 0;
    top: 0;
    width: 600px;
    height: 120px;
    pointer-events: none;
    z-index: 9999;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,180,0) 0%,
            rgba(200,200,255,.35) 20%,
            rgba(120,220,255,.7) 60%,
            rgba(255,180,255,.9) 100%
        );

    border-radius: 999px;
    filter: blur(40px);

    opacity: 0;
    transform-origin: right center;
    will-change: transform, opacity;
} */


.aurora-cursor {
    position: fixed;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 9999;

    border-radius: 50%;

    background:
		radial-gradient(circle at 12% 50%, rgba(152, 140, 25, 0.5), transparent 18%),
		radial-gradient(circle at 35% 50%, rgba(132, 137, 195, 0.55), transparent 20%),
		radial-gradient(circle at 75% 50%, rgba(112, 214, 232, 0.75), transparent 18%),
		radial-gradient(circle at 92% 50%, rgba(194, 72, 231, 0.8), transparent 30%);
        
    filter: blur(50px);


    animation:
        auroraPulse 6s ease-in-out infinite alternate,
        auroraMorph 12s linear infinite;
}

@keyframes auroraPulse {
    0% {
        border-radius: 58% 42% 63% 37% / 43% 48% 52% 57%;
    }

    50% {
        border-radius: 45% 55% 35% 65% / 65% 35% 65% 35%;
    }

    100% {
        border-radius: 60% 40% 55% 45% / 40% 60% 40% 60%;
    }
}

@keyframes auroraMorph {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.15) rotate(180deg);
    }

    100% {
        transform: scale(1) rotate(360deg);
    }
}

.aurora-cursor::before,
.aurora-cursor::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    filter: blur(80px);
    opacity: .7;
}

.aurora-cursor::before {
    animation: auroraMorph 18s linear infinite reverse;
}

.aurora-cursor::after {
    animation: auroraMorph 24s linear infinite;
}