/* =========================================
   Amarcon Web Studio — Light/White Theme
   Premium, Clean, App-Like
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================
   Tokens — Light Theme
   ========================================= */
:root {
    --bg:       #ffffff;
    --bg-2:     #f7f8fa;
    --bg-3:     #eef0f4;
    --text:     #0a0a0a;
    --text-dim: rgba(10,10,10,0.5);
    --blue:     #4169ff;
    --blue-dim: rgba(65,105,255,0.07);
    --border:   rgba(0,0,0,0.08);
    --border-hv:rgba(0,0,0,0.2);
    --shadow-sm:0 2px 12px rgba(0,0,0,0.05);
    --shadow-md:0 8px 32px rgba(0,0,0,0.08);
    --shadow-lg:0 20px 60px rgba(0,0,0,0.1);
    --font:     'Inter', -apple-system, sans-serif;
    --ease:     cubic-bezier(0.16, 1, 0.3, 1);
    --radius:   16px;
}

/* =========================================
   Reset
   ========================================= */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; font-size:16px; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    cursor: none;
}
@media (pointer:coarse) { body { cursor:auto; } }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
input,textarea,button { font-family:var(--font); }

.container { width:100%; max-width:1280px; margin:0 auto; padding:0 48px; }

/* =========================================
   PROMO SECTION — Clean Rewrite
   ========================================= */

/* Section wrapper */
.promo-section {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: #04060e; /* fallback if image fails */
}

/* ── Background image ── */
.ps-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    animation: ps-pan 18s ease-in-out infinite alternate;
}
@keyframes ps-pan {
    from { background-position: 100% center; }
    to   { background-position: 70%  center; }
}

/* ── Dark gradient overlay ── */
.ps-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        #04060e 0%,
        rgba(4,6,14,0.92) 35%,
        rgba(4,6,14,0.55) 60%,
        rgba(4,6,14,0.15) 80%,
        transparent 100%
    );
    z-index: 1;
}

/* ── Decorations layer (3D rings, cube, orbs) ── */
.ps-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
#psCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Gyroscope rings — positioned right side */
.ps-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid transparent;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
}
.ps-ring-1 {
    width: 240px; height: 240px;
    border-color: rgba(65,105,255,0.7);
    box-shadow: 0 0 20px rgba(65,105,255,0.4);
    margin-top: -120px; margin-right: -120px;
    animation: ps-s1 10s linear infinite;
}
.ps-ring-2 {
    width: 170px; height: 170px;
    border-color: rgba(120,80,255,0.55);
    box-shadow: 0 0 12px rgba(120,80,255,0.35);
    margin-top: -85px; margin-right: -85px;
    animation: ps-s2 7s linear infinite;
}
.ps-ring-3 {
    width: 100px; height: 100px;
    border-color: rgba(160,210,255,0.5);
    margin-top: -50px; margin-right: -50px;
    animation: ps-s3 5s linear infinite;
}
.ps-ring-core {
    position: absolute;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #4169ff;
    top: 50%; right: 8%;
    transform: translateY(-50%) translateX(11px);
    box-shadow: 0 0 24px rgba(65,105,255,1), 0 0 48px rgba(65,105,255,0.5);
    animation: ps-core-p 3s ease-in-out infinite;
}
@keyframes ps-s1 { from{transform:translateY(-50%) rotateX(70deg) rotateZ(0deg);}   to{transform:translateY(-50%) rotateX(70deg) rotateZ(360deg);} }
@keyframes ps-s2 { from{transform:translateY(-50%) rotateY(55deg) rotateZ(0deg);}   to{transform:translateY(-50%) rotateY(55deg) rotateZ(-360deg);} }
@keyframes ps-s3 { from{transform:translateY(-50%) rotateX(20deg) rotateY(0deg);}   to{transform:translateY(-50%) rotateX(20deg) rotateY(360deg);} }
@keyframes ps-core-p { 0%,100%{transform:translateY(-50%) translateX(11px) scale(1);} 50%{transform:translateY(-50%) translateX(11px) scale(2);opacity:0.6;} }

/* Floating orbs */
.ps-orb-a, .ps-orb-b {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(55px);
}
.ps-orb-a {
    width: 320px; height: 320px;
    background: rgba(65,105,255,0.5);
    top: -60px; right: 0;
    opacity: 0.4;
    animation: ps-od 14s ease-in-out infinite;
}
.ps-orb-b {
    width: 200px; height: 200px;
    background: rgba(130,60,255,0.6);
    bottom: -30px; right: 22%;
    opacity: 0.3;
    animation: ps-od 10s ease-in-out infinite 4s;
}
@keyframes ps-od {
    0%,100% { transform: translate(0,0); }
    50%      { transform: translate(20px,-25px); }
}

/* Cube */
.ps-cube {
    position: absolute;
    right: 27%; top: 20%;
    width: 42px; height: 42px;
    transform-style: preserve-3d;
    animation: ps-cs 14s linear infinite, ps-cf 8s ease-in-out infinite 1s;
}
.psc-face {
    position: absolute;
    width: 42px; height: 42px;
    border: 1px solid rgba(65,105,255,0.4);
    background: rgba(65,105,255,0.03);
}
.psc-front  { transform: translateZ(21px); }
.psc-back   { transform: rotateY(180deg) translateZ(21px); }
.psc-left   { transform: rotateY(-90deg) translateZ(21px); }
.psc-right  { transform: rotateY(90deg)  translateZ(21px); }
.psc-top    { transform: rotateX(90deg)  translateZ(21px); }
.psc-bottom { transform: rotateX(-90deg) translateZ(21px); }
@keyframes ps-cs { from{transform:rotateX(0) rotateY(0);}         to{transform:rotateX(360deg) rotateY(360deg);} }
@keyframes ps-cf { 0%,100%{transform:translateY(0);}              50%{transform:translateY(-14px);} }

/* ── CONTENT (guaranteed on top) ── */
.ps-body {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 48px;
}

/* Left text */
.ps-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 520px;
    flex: 1;
}

.ps-badge {
    display: inline-flex;
    align-items: center; gap: 8px;
    background: rgba(65,105,255,0.18);
    border: 1px solid rgba(65,105,255,0.45);
    border-radius: 100px;
    padding: 5px 16px;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: #a0b8ff;
    width: fit-content;
}
.ps-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4cde80;
    animation: blink 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

.ps-head {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
}
.ps-accent {
    display: block;
    background: linear-gradient(135deg, #4169ff, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ps-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.65;
    margin: 0;
}

/* ── Price card ── */
.ps-card {
    position: relative;
    flex-shrink: 0;
    width: 300px;
    background: #0c1240;              /* solid — always visible */
    border: 1.5px solid rgba(65,105,255,0.5);
    border-radius: 24px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow:
        0 0 0 1px rgba(65,105,255,0.15),
        0 24px 60px rgba(0,0,0,0.6),
        0 0 40px rgba(65,105,255,0.1);
    animation: ps-float 6s ease-in-out infinite;
}
.ps-card-glow {
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(65,105,255,0.9), transparent);
    border-radius: 2px 2px 0 0;
}
@keyframes ps-float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.ps-card-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

.ps-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1;
}
.ps-rupee {
    font-size: 1.6rem;
    font-weight: 900;
    color: #4cde80;
    vertical-align: top;
    margin-top: 6px;
    text-shadow: 0 0 16px rgba(76,222,128,0.8);
}
.ps-amount {
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    color: #4cde80;
    text-shadow: 0 0 24px rgba(76,222,128,0.9), 0 0 48px rgba(76,222,128,0.4);
    animation: ps-pg 2.5s ease-in-out infinite;
}
.ps-dash {
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(76,222,128,0.5);
    align-self: flex-end;
    padding-bottom: 4px;
}
@keyframes ps-pg {
    0%,100% { text-shadow: 0 0 24px rgba(76,222,128,0.9), 0 0 48px rgba(76,222,128,0.4); }
    50%      { text-shadow: 0 0 36px rgba(76,222,128,1),   0 0 70px rgba(76,222,128,0.65); }
}

.ps-features {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.6;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 14px;
    margin: 0;
}

.ps-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #4169ff 0%, #7c3aed 100%);
    color: #fff;
    padding: 14px 20px;
    border-radius: 100px;
    font-size: 0.92rem;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 6px 22px rgba(65,105,255,0.45);
    transition: all 0.3s var(--ease);
    text-decoration: none;
}
.ps-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(65,105,255,0.65);
}

.ps-btn-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(37,211,102,0.12);
    border: 1px solid rgba(37,211,102,0.4);
    color: #4cde80;
    padding: 12px 20px;
    border-radius: 100px;
    font-size: 0.88rem;
    font-weight: 700;
    transition: all 0.3s var(--ease);
    text-decoration: none;
}
.ps-btn-wa:hover {
    background: rgba(37,211,102,0.22);
    border-color: rgba(37,211,102,0.7);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,211,102,0.3);
}

/* Mobile */
@media (max-width: 768px) {
    .ps-body {
        flex-direction: column;
        padding: 56px 20px;
        gap: 36px;
    }
    .ps-card { width: 100%; }
    .ps-head { font-size: 1.9rem; }
    .ps-ring-1 { width: 150px; height: 150px; margin-top: -75px; margin-right: -75px; }
    .ps-ring-2 { width: 106px; height: 106px; margin-top: -53px; margin-right: -53px; }
    .ps-ring-3 { width: 62px;  height: 62px;  margin-top: -31px; margin-right: -31px; }
    .ps-cube, .ps-orb-b { display: none; }
    .ps-orb-a { width: 200px; height: 200px; opacity: 0.25; }
}


/* =========================================
   Grain Overlay
   ========================================= */
.grain {
    position:fixed; inset:0; z-index:9999;
    pointer-events:none; opacity:0.03;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:200px 200px;
    animation:grain-shift 8s steps(10) infinite;
}
@keyframes grain-shift {
    0%,100%{ transform:translate(0,0); }
    10%{ transform:translate(-5%,-10%); }
    20%{ transform:translate(-15%,5%); }
    30%{ transform:translate(7%,-15%); }
    40%{ transform:translate(-5%,20%); }
    50%{ transform:translate(-15%,10%); }
    60%{ transform:translate(15%,0); }
    70%{ transform:translate(0,10%); }
    80%{ transform:translate(3%,20%); }
    90%{ transform:translate(-10%,10%); }
}

/* =========================================
   Custom Cursor
   ========================================= */
.cursor {
    position:fixed; top:0; left:0;
    width:10px; height:10px;
    background:var(--text);
    border-radius:50%;
    pointer-events:none; z-index:99998;
    transform:translate(-50%,-50%);
    transition:width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s ease;
}
.cursor.hover {
    width:48px; height:48px;
    background:transparent;
    border:1.5px solid var(--text);
}
.cursor-follower {
    position:fixed; top:0; left:0;
    width:36px; height:36px;
    border:1px solid rgba(0,0,0,0.2);
    border-radius:50%;
    pointer-events:none; z-index:99997;
    transform:translate(-50%,-50%);
    transition:transform 0.4s var(--ease);
}

/* =========================================
   Header
   ========================================= */
.header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 64px);
    max-width: 1280px;
    z-index: 9000;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 100px;
    transition: all 0.4s var(--ease);
}
.header.scrolled {
    box-shadow:0 8px 40px rgba(0,0,0,0.1);
    background:rgba(255,255,255,0.95);
}
.header-inner {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 32px;
}
.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.logo-img {
    height: 48px;
    width: auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    transition: opacity 0.3s ease;
}
.header-logo:hover .logo-img { opacity: 0.85; }

.header-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-left: 14px;
    border-left: 1px solid var(--border);
    padding-left: 14px;
}
.header-brand-name {
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.1;
    white-space: nowrap;
}
.header-brand-by {
    font-size: 0.65rem;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .header-brand-by { display: none; }
    .header-brand-text { border-left: none; padding-left: 0; margin-left: 8px; }
    .header-brand-name { font-size: 0.85rem; }
}

.header-nav { display:flex; gap:36px; }
.nav-link {
    font-size:0.875rem; font-weight:600;
    color:var(--text-dim);
    transition:color 0.3s ease;
    position:relative;
}
.nav-link::after {
    content:''; position:absolute; bottom:-2px; left:0;
    width:0; height:1.5px;
    background:var(--text);
    transition:width 0.3s var(--ease);
}
.nav-link:hover { color:var(--text); }
.nav-link:hover::after { width:100%; }

.btn-cta {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--text); color:#fff;
    padding:10px 22px; border-radius:100px;
    font-size:0.875rem; font-weight:700;
    transition:all 0.3s var(--ease);
}
.btn-cta:hover { background:var(--blue); transform:scale(1.05); }

.menu-btn {
    display:none; flex-direction:column; gap:5px;
    background:none; border:none; cursor:none; padding:8px;
}
.menu-btn span {
    display:block; width:24px; height:1.5px;
    background:var(--text);
    transition:all 0.3s ease;
}

/* =========================================
   Mobile Menu
   ========================================= */
.mobile-menu {
    position:fixed; inset:0;
    background:var(--bg);
    z-index:8999;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:48px;
    transform:translateY(-100%);
    transition:transform 0.6s var(--ease);
}
.mobile-menu.open { transform:translateY(0); }
.mobile-nav { display:flex; flex-direction:column; align-items:center; gap:24px; }
.mobile-nav-link {
    font-size:clamp(2.5rem,10vw,4rem);
    font-weight:900; letter-spacing:-0.03em;
    color:var(--text);
    transition:color 0.3s ease;
}
.mobile-nav-link:hover { color:var(--blue); }
.mobile-contact { color:var(--text-dim); font-size:1rem; }

/* =========================================
   Hero
   ========================================= */
.hero {
    min-height: 100vh;
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding-top: 160px;
    padding-bottom: 48px;
    position: relative; overflow: hidden;
    background: var(--bg);
}
.hero-dots-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
}
.hero-grain-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.hgb-gradient {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: hgb-drift 15s ease-in-out infinite alternate;
}
.hgb-1 {
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(65,105,255,0.15) 0%, transparent 70%);
    top: -20%; left: -10%;
    animation-duration: 20s;
}
.hgb-2 {
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(160,180,255,0.15) 0%, transparent 70%);
    bottom: -10%; right: -10%;
    animation-duration: 25s;
    animation-delay: -5s;
}
@keyframes hgb-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(10%, 15%) scale(1.1); }
}

.hgb-noise {
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: hgb-noise-anim 8s steps(10) infinite;
    mix-blend-mode: multiply;
}
@keyframes hgb-noise-anim {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-2%, -4%); }
    20% { transform: translate(-6%, 2%); }
    30% { transform: translate(3%, -6%); }
    40% { transform: translate(-2%, 8%); }
    50% { transform: translate(-6%, 4%); }
    60% { transform: translate(6%, 0); }
    70% { transform: translate(0, 4%); }
    80% { transform: translate(1%, 8%); }
    90% { transform: translate(-4%, 4%); }
}

.hero-content { padding:0 48px; position:relative; z-index:1; max-width: 60%; }

/* =========================================
   Hero Video Stack
   ========================================= */
.hero-video-stack {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 25vw;
    max-width: 400px;
    min-width: 280px;
    aspect-ratio: 9 / 16;
    z-index: 2;
    perspective: 1200px;
}

.video-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border: 6px solid var(--bg);
    background: #000;
    transition: transform 0.6s var(--ease);
    will-change: transform;
}

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.95;
    transition: opacity 0.4s var(--ease);
}

.video-card:hover video {
    opacity: 1;
}

.video-card.card-1 {
    transform: rotate(-10deg) translate(-40px, 20px) scale(0.9);
    z-index: 1;
}
.video-card.card-2 {
    transform: rotate(8deg) translate(20px, -15px) scale(0.95);
    z-index: 2;
}
.video-card.card-3 {
    transform: rotate(-2deg) translate(10px, 10px);
    z-index: 3;
}

.hero-video-stack:hover .video-card.card-1 {
    transform: rotate(-15deg) translate(-80px, 30px) scale(0.9);
}
.hero-video-stack:hover .video-card.card-2 {
    transform: rotate(12deg) translate(60px, -20px) scale(0.95);
}
.hero-video-stack:hover .video-card.card-3 {
    transform: rotate(0deg) translate(0, -10px) scale(1.02);
}

@media (max-width: 1100px) {
    .hero {
        justify-content: center;
        padding-top: 130px;
        gap: 30px;
    }
    .hero-bottom {
        display: none !important;
    }
    .hero-video-stack { 
        position: relative;
        top: 0;
        right: auto;
        transform: none;
        margin: 0 auto 20px auto;
        display: block;
        width: 65vw;
        max-width: 260px;
        z-index: 10;
        flex-shrink: 0;
    }
    .hero-content { 
        max-width: 100%; 
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hero-sub p { margin: 0 auto; }
    .hero-actions { justify-content: center; }
}

@media (max-width: 768px) {
    .hero-video-stack {
        max-width: 200px;
        margin-bottom: 10px;
    }
    .hero-bottom {
        display: none !important;
    }
}

.hero-eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    color:var(--text-dim); font-size:0.85rem; font-weight:500;
    margin-bottom:40px;
    border:1px solid var(--border);
    border-radius:100px; padding:8px 18px;
}
.eyebrow-dot {
    width:8px; height:8px; border-radius:50%;
    background:#22c55e;
    animation:blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.hero-title {
    display:flex; flex-direction:column;
    font-size:clamp(4rem,9vw,9rem);
    font-weight:900; letter-spacing:-0.05em;
    line-height:0.92; margin-bottom:60px;
    overflow:hidden; color:var(--text);
}
.hero-line {
    display:block; opacity:0;
    transform:translateY(110%);
    animation:slide-up 1s var(--ease) forwards;
    animation-delay:0.1s;
}
.hero-line:nth-child(2) { animation-delay:0.2s; }
.hero-line:nth-child(3) { animation-delay:0.3s; }
.hero-line.accent { color:var(--blue); }

@keyframes slide-up {
    from { transform:translateY(110%); opacity:0; }
    to   { transform:translateY(0);    opacity:1; }
}

.hero-sub {
    display:flex; align-items:center; gap:60px;
    opacity:0;
    animation:fade-in 0.8s var(--ease) 0.6s forwards;
}
@keyframes fade-in {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
.hero-sub p {
    font-size:clamp(1rem,1.8vw,1.2rem);
    color:var(--text-dim); max-width:380px; line-height:1.65;
}
.hero-actions { display:flex; gap:16px; margin-top:32px; }

.hero-bottom {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 48px; border-top:1px solid var(--border); padding-top:24px;
}
.hero-stats { display:flex; gap:40px; align-items:center; }
.stat { display:flex; flex-direction:column; gap:2px; }
.stat strong { font-size:1.6rem; font-weight:900; line-height:1; color:var(--text); }
.stat span { font-size:0.78rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }
.stat-divider { width:1px; height:36px; background:var(--border); }
.scroll-hint { display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:0.8rem; }

/* =========================================
   Buttons
   ========================================= */
.btn-primary {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--text); color:#fff;
    padding:16px 32px; border-radius:100px;
    border:none; cursor:none;
    font-size:0.95rem; font-weight:700;
    transition:all 0.3s var(--ease); white-space:nowrap;
}
.btn-primary:hover {
    background:var(--blue); transform:scale(1.03);
    box-shadow:0 8px 32px rgba(65,105,255,0.3);
}
.btn-ghost {
    display:inline-flex; align-items:center; gap:10px;
    background:transparent; color:var(--text);
    padding:15px 32px; border-radius:100px;
    border:1.5px solid var(--border);
    font-size:0.95rem; font-weight:600; cursor:none;
    transition:all 0.3s var(--ease); white-space:nowrap;
}
.btn-ghost:hover {
    border-color:var(--text);
    background:rgba(0,0,0,0.04);
}
.full-width { width:100%; justify-content:center; }

/* =========================================
   Label & Section Title
   ========================================= */
.label {
    display:inline-block;
    font-size:0.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:2px;
    color:var(--blue); margin-bottom:20px;
}
.section-title {
    font-size:clamp(2rem,4.5vw,3.5rem);
    font-weight:900; letter-spacing:-0.04em;
    line-height:1.05; color:var(--text);
}

/* =========================================
   Marquee
   ========================================= */
.marquee-section {
    overflow:hidden;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:20px 0;
    background:var(--bg-2);
}
.marquee-track { white-space:nowrap; }
.marquee-inner {
    display:inline-flex; gap:40px; align-items:center;
    font-size:clamp(0.95rem,1.5vw,1.1rem);
    font-weight:600; letter-spacing:0.02em;
    color:var(--text-dim);
    animation:marquee-scroll 28s linear infinite;
}
.marquee-reverse .marquee-inner { animation-direction:reverse; }
.marquee-dot { color:var(--blue); font-size:0.8rem; }
@keyframes marquee-scroll {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }
}

/* =========================================
   Services
   ========================================= */
.services { padding:120px 0; background:var(--bg); }
.services-header { margin-bottom:80px; }
.services-list { border-top:1px solid var(--border); }

.service-item {
    display:grid;
    grid-template-columns:80px 1fr auto 48px;
    align-items:center; gap:40px;
    padding:40px 48px;
    border-bottom:1px solid var(--border);
    position:relative; overflow:hidden;
    transition:all 0.4s var(--ease); cursor:none;
    background:var(--bg);
}
.service-item::before {
    content:''; position:absolute; inset:0;
    background:var(--blue-dim);
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.5s var(--ease);
}
.service-item:hover::before { transform:scaleX(1); }
.service-item:hover { padding-left:64px; }

.service-number { font-size:0.78rem; font-weight:700; color:var(--blue); letter-spacing:1px; position:relative; z-index:1; }
.service-content { position:relative; z-index:1; }
.service-content h3 {
    font-size:clamp(1.2rem,2.5vw,1.6rem);
    font-weight:800; letter-spacing:-0.02em;
    margin-bottom:8px; color:var(--text);
}
.service-content p { font-size:0.9rem; color:var(--text-dim); line-height:1.6; max-width:520px; }
.service-icon { color:var(--text-dim); transition:all 0.3s ease; position:relative; z-index:1; }
.service-item:hover .service-icon { color:var(--blue); transform:scale(1.2); }
.service-arrow { color:var(--text-dim); transform:translateX(-10px); opacity:0; transition:all 0.3s var(--ease); position:relative; z-index:1; }
.service-item:hover .service-arrow { transform:translateX(0); opacity:1; }

/* =========================================
   Work / Portfolio
   ========================================= */
.work { padding:120px 0; background:var(--bg-2); }
.work-header { margin-bottom:80px; }
.work-list { border-top:1px solid var(--border); }

.work-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:36px 48px;
    border-bottom:1px solid var(--border);
    transition:all 0.4s var(--ease);
    position:relative; overflow:hidden; cursor:none;
    background:var(--bg-2);
}
.work-item::before {
    content:''; position:absolute; inset:0;
    background:rgba(65,105,255,0.04);
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.5s var(--ease);
}
.work-item:hover::before { transform:scaleX(1); }
.work-item:hover { padding-left:64px; }

.work-item-left { display:flex; align-items:center; gap:32px; }
.work-count { font-size:0.75rem; font-weight:700; color:var(--blue); letter-spacing:1px; width:24px; }
.work-item-info h3 {
    font-size:clamp(1.3rem,2.8vw,1.8rem);
    font-weight:800; letter-spacing:-0.03em; color:var(--text);
}
.work-item-info span { font-size:0.85rem; color:var(--text-dim); }
.work-item-right { display:flex; align-items:center; gap:24px; }
.work-tag {
    font-size:0.75rem; font-weight:700;
    color:var(--text-dim); text-transform:uppercase; letter-spacing:1px;
    border:1px solid var(--border);
    padding:6px 14px; border-radius:100px;
}
.work-year { font-size:0.85rem; color:var(--text-dim); }
.work-arrow { color:var(--text-dim); transform:translateX(-10px); opacity:0; transition:all 0.3s var(--ease); }
.work-item:hover .work-arrow { transform:translateX(0); opacity:1; }
.work-item:hover .work-tag { border-color:var(--blue); color:var(--blue); }

/* Work image follower */
.work-image-follower {
    position:fixed; top:0; left:0;
    pointer-events:none; z-index:5000;
    transform:translate(-50%,-50%); opacity:0;
    transition:opacity 0.3s ease;
}
.work-image-follower.active { opacity:1; }
.follower-img { width:320px; height:220px; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg); }
.follower-img img { width:100%; height:100%; object-fit:cover; }

.work-item-cta { cursor:default; background:var(--bg-2); }
.work-item-cta::before { display:none; }
.work-item-cta:hover { padding-left:48px; }

/* =========================================
   About
   ========================================= */
.about {
    padding:120px 0;
    border-top:1px solid var(--border);
    background:var(--bg);
}
.about-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-right { display:flex; flex-direction:column; gap:32px; }

.founder-quote {
    font-size:clamp(1.1rem,2vw,1.35rem);
    line-height:1.75; color:var(--text-dim);
    font-style:italic;
    border-left:3px solid var(--blue);
    padding-left:28px;
}
.founder-bio { display:flex; align-items:center; gap:16px; }
.founder-avatar {
    width:48px; height:48px;
    background:var(--blue); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:0.9rem; color:#fff;
}
.founder-bio strong { display:block; font-weight:800; font-size:1rem; color:var(--text); }
.founder-bio span { font-size:0.85rem; color:var(--text-dim); }

.about-tags { display:flex; flex-wrap:wrap; gap:10px; }
.tag {
    padding:8px 18px; border-radius:100px;
    border:1px solid var(--border);
    font-size:0.82rem; font-weight:600;
    color:var(--text-dim);
    transition:all 0.3s ease;
}
.tag:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-dim); }

/* =========================================
   Pricing
   ========================================= */
.pricing { padding:120px 0; background:var(--bg-2); }
.pricing-header { margin-bottom:80px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }

.pricing-card {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:24px; padding:40px;
    display:flex; flex-direction:column; gap:24px;
    position:relative;
    transition:all 0.4s var(--ease);
    box-shadow:var(--shadow-sm);
}
.pricing-card:hover { border-color:var(--border-hv); transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.pricing-card.popular {
    border-color:var(--blue);
    box-shadow:0 0 0 1px var(--blue), var(--shadow-md);
}
.popular-tag {
    position:absolute; top:-14px; left:50%;
    transform:translateX(-50%);
    background:var(--blue); color:#fff;
    padding:4px 20px; border-radius:100px;
    font-size:0.75rem; font-weight:700;
    white-space:nowrap; letter-spacing:0.5px;
}
.pricing-card-top h3 { font-size:1.3rem; font-weight:800; color:var(--text); margin-bottom:6px; }
.plan-ideal { font-size:0.85rem; color:var(--text-dim); }
.pricing-price { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:900; letter-spacing:-0.04em; line-height:1; color:var(--text); }
.currency { font-size:1.2rem; vertical-align:super; font-weight:700; }
.pricing-features { display:flex; flex-direction:column; gap:12px; flex:1; }
.pricing-features li { font-size:0.9rem; color:var(--text-dim); display:flex; gap:10px; align-items:center; }
.check { color:var(--blue); font-weight:700; }

/* =========================================
   Contact
   ========================================= */
.contact {
    padding:120px 0;
    border-top:1px solid var(--border);
    background:var(--bg);
}
.contact-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact-left { display:flex; flex-direction:column; gap:32px; }
.contact-details { display:flex; flex-direction:column; gap:16px; }
.contact-link {
    display:flex; align-items:center; gap:16px;
    font-size:1rem; color:var(--text-dim);
    transition:color 0.3s ease;
}
.contact-link:hover { color:var(--text); }
.contact-link-icon { color:var(--blue); font-size:1.1rem; }
.contact-form { display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

input, textarea {
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px 20px;
    color:var(--text);
    font-size:0.95rem; outline:none;
    transition:border-color 0.3s ease; width:100%;
}
input::placeholder, textarea::placeholder { color:var(--text-dim); }
input:focus, textarea:focus { border-color:var(--blue); background:var(--bg); box-shadow:0 0 0 4px rgba(65,105,255,0.06); }
textarea { resize:vertical; min-height:130px; }

/* =========================================
   Footer
   ========================================= */
footer,
.footer {
    border-top:1px solid var(--border);
    background:var(--text);
    color:#fff;
    padding:60px 0 32px;
}
.footer-inner {
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    text-decoration: none;
}
.footer-logo-img {
    height: 72px;
    width: auto;
    display: block;
    object-fit: contain;
    /* white bg logo on dark footer — make it white silhouette */
    filter: drop-shadow(0 0 6px rgba(65,105,255,0.4));
    transition: transform 0.3s ease, filter 0.3s ease;
    flex-shrink: 0;
}
.footer-logo:hover .footer-logo-img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(65,105,255,0.7));
}
.footer-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-brand-name {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
}
.footer-brand-by {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    font-weight: 400;
    letter-spacing: 0.3px;
}
.footer-left p { font-size:0.9rem; color:rgba(255,255,255,0.5); line-height:1.6; }
.footer-nav { display:flex; flex-direction:column; gap:12px; }
.footer-nav a { font-size:0.9rem; color:rgba(255,255,255,0.5); transition:color 0.3s ease; }
.footer-nav a:hover { color:#fff; }
.footer-wa {
    display:inline-flex; align-items:center; gap:10px;
    background:#25D366; color:#fff;
    padding:14px 24px; border-radius:100px;
    font-size:0.9rem; font-weight:700;
    transition:all 0.3s var(--ease);
}
.footer-wa:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(37,211,102,0.4); }
.footer-bottom {
    display:flex; justify-content:space-between; align-items:center;
    padding-top:24px; font-size:0.8rem; color:rgba(255,255,255,0.3);
}

/* =========================================
   Mobile Bottom Navigation
   ========================================= */
.mobile-bottom-nav {
    display:none;
    position:fixed; bottom:16px; left:16px; right:16px;
    height:64px;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(24px);
    border:1px solid var(--border);
    border-radius:32px;
    z-index:8000;
    justify-content:space-around; align-items:center;
    padding:0 12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.1);
}
.bn-item {
    display:flex; flex-direction:column; align-items:center;
    gap:3px; padding:8px 14px; border-radius:20px;
    color:rgba(0,0,0,0.35);
    transition:all 0.25s ease; text-decoration:none;
}
.bn-item svg { width:22px; height:22px; }
.bn-item span { font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; }
.bn-item.active { color:var(--blue); background:var(--blue-dim); }

/* =========================================
   3D Hero Canvas
   ========================================= */
.hero-canvas {
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none; z-index:0; opacity:0.7;
}
.hero-3d-scene {
    position:absolute; inset:0;
    pointer-events:none; z-index:1; overflow:hidden;
}
.hero-content { position:relative; z-index:2; }
.hero-bottom  { position:relative; z-index:2; }

/* =========================================
   GYROSCOPE SPHERE
   ========================================= */
.gyro-wrap {
    position:absolute;
    top:10%; right:5%;
    width:280px; height:280px;
    transform-style:preserve-3d;
    perspective:900px;
    animation:gyro-float 6s ease-in-out infinite;
}
@keyframes gyro-float {
    0%,100% { transform:translateY(0) rotateX(6deg); }
    50%      { transform:translateY(-28px) rotateX(-6deg); }
}
.gyro-ring {
    position:absolute; inset:0; margin:auto;
    border-radius:50%; transform-style:preserve-3d;
    border:1.5px solid transparent;
}
.ring-1 {
    width:280px; height:280px;
    border-color:rgba(65,105,255,0.55);
    box-shadow:0 0 24px rgba(65,105,255,0.2), inset 0 0 24px rgba(65,105,255,0.08);
    animation:spin-ring-1 9s linear infinite;
}
.ring-2 {
    width:200px; height:200px;
    border-color:rgba(65,105,255,0.38);
    box-shadow:0 0 14px rgba(65,105,255,0.15);
    animation:spin-ring-2 6s linear infinite;
}
.ring-3 {
    width:120px; height:120px;
    border-color:rgba(65,105,255,0.28);
    animation:spin-ring-3 4s linear infinite;
}
.gyro-core {
    position:absolute; inset:0; margin:auto;
    width:30px; height:30px; border-radius:50%;
    background:radial-gradient(circle, var(--blue) 0%, transparent 70%);
    box-shadow:0 0 28px rgba(65,105,255,0.8), 0 0 52px rgba(65,105,255,0.3);
    animation:core-pulse 3s ease-in-out infinite;
}
@keyframes spin-ring-1 { from{transform:rotateX(70deg) rotateZ(0deg);} to{transform:rotateX(70deg) rotateZ(360deg);} }
@keyframes spin-ring-2 { from{transform:rotateY(55deg) rotateZ(0deg);} to{transform:rotateY(55deg) rotateZ(-360deg);} }
@keyframes spin-ring-3 { from{transform:rotateX(15deg) rotateY(0deg);} to{transform:rotateX(15deg) rotateY(360deg);} }
@keyframes core-pulse { 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.7); opacity:0.6;} }

/* =========================================
   FLOATING CUBE
   ========================================= */
.shape-float { position:absolute; transform-style:preserve-3d; }
.shape-cube {
    bottom:20%; right:8%;
    width:56px; height:56px; perspective:400px;
    animation:cube-float 8s ease-in-out infinite, cube-spin 15s linear infinite;
}
.cube-face {
    position:absolute; width:56px; height:56px;
    border:1px solid rgba(65,105,255,0.35);
    background:rgba(65,105,255,0.03);
}
.cube-front  { transform:translateZ(28px); }
.cube-back   { transform:rotateY(180deg) translateZ(28px); }
.cube-left   { transform:rotateY(-90deg) translateZ(28px); }
.cube-right  { transform:rotateY(90deg)  translateZ(28px); }
.cube-top    { transform:rotateX(90deg)  translateZ(28px); }
.cube-bottom { transform:rotateX(-90deg) translateZ(28px); }
@keyframes cube-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-22px);} }
@keyframes cube-spin  { from{transform:rotateX(0) rotateY(0);} to{transform:rotateX(360deg) rotateY(360deg);} }

/* =========================================
   FLOATING PYRAMID
   ========================================= */
.shape-pyramid {
    top:58%; left:4%;
    width:60px; height:60px; perspective:400px;
    animation:pyramid-float 10s ease-in-out 2s infinite;
    transform-style:preserve-3d;
}
.py-face {
    position:absolute; width:0; height:0;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:52px solid rgba(65,105,255,0.12);
    filter:drop-shadow(0 0 6px rgba(65,105,255,0.35));
}
.py-face:nth-child(1) { transform:rotateY(0deg)   rotateX(-30deg) translateZ(20px); }
.py-face:nth-child(2) { transform:rotateY(90deg)  rotateX(-30deg) translateZ(20px); }
.py-face:nth-child(3) { transform:rotateY(180deg) rotateX(-30deg) translateZ(20px); }
.py-face:nth-child(4) { transform:rotateY(270deg) rotateX(-30deg) translateZ(20px); }
@keyframes pyramid-float {
    0%,100%{transform:translateY(0)    rotateY(0deg);}
    33%{    transform:translateY(-18px) rotateY(120deg);}
    66%{    transform:translateY(8px)   rotateY(240deg);}
}

/* =========================================
   FLOATING DIAMOND
   ========================================= */
.shape-diamond {
    top:22%; left:3%;
    width:40px; height:40px; perspective:300px;
    transform-style:preserve-3d;
    animation:diamond-float 7s ease-in-out 1s infinite;
}
.dm-face {
    position:absolute; width:20px; height:20px;
    background:rgba(65,105,255,0.08);
    border:1px solid rgba(65,105,255,0.3);
    transform-origin:center;
}
.dm-face:nth-child(1) { transform:rotateY(0deg)   translateZ(14px); }
.dm-face:nth-child(2) { transform:rotateY(45deg)  translateZ(14px); }
.dm-face:nth-child(3) { transform:rotateY(90deg)  translateZ(14px); }
.dm-face:nth-child(4) { transform:rotateY(135deg) translateZ(14px); }
.dm-face:nth-child(5) { transform:rotateX(90deg)  translateZ(14px); }
.dm-face:nth-child(6) { transform:rotateX(135deg) translateZ(14px); }
.dm-face:nth-child(7) { transform:rotateX(45deg)  translateZ(14px); }
.dm-face:nth-child(8) { transform:rotateX(-45deg) translateZ(14px); }
@keyframes diamond-float {
    0%,100%{transform:translateY(0)    rotateZ(0deg)   rotateY(0deg);}
    50%{    transform:translateY(-18px) rotateZ(180deg) rotateY(180deg);}
}

/* =========================================
   GLOWING ORBS — adjusted for white bg
   ========================================= */
.glow-orb {
    position:absolute; border-radius:50%;
    filter:blur(50px); opacity:0.18;
    animation:orb-drift 14s ease-in-out infinite;
}
.orb-1 {
    width:360px; height:360px;
    background:radial-gradient(circle, rgba(65,105,255,0.9), transparent 70%);
    top:-100px; right:-80px; animation-duration:16s;
}
.orb-2 {
    width:240px; height:240px;
    background:radial-gradient(circle, rgba(100,60,255,0.8), transparent 70%);
    bottom:5%; left:-60px; animation-delay:4s; animation-duration:11s;
}
.orb-3 {
    width:180px; height:180px;
    background:radial-gradient(circle, rgba(65,200,255,0.7), transparent 70%);
    top:40%; right:20%; animation-delay:8s; animation-duration:9s; opacity:0.12;
}
@keyframes orb-drift {
    0%,100%{transform:translate(0,0) scale(1);}
    25%{    transform:translate(20px,-30px) scale(1.08);}
    50%{    transform:translate(-15px,20px) scale(0.92);}
    75%{    transform:translate(30px,12px) scale(1.05);}
}

/* =========================================
   PRICING — New Plans
   ========================================= */
.pricing-sub {
    margin-top: 12px;
    font-size: 1rem;
    color: var(--text-dim);
    max-width: 500px;
}

/* ── Launch Card (full-width dark hero) ── */
.launch-card {
    position: relative;
    background: #04060e;
    border: 1.5px solid rgba(65,105,255,0.35);
    border-radius: 28px;
    overflow: hidden;
    margin-bottom: 40px;
    padding: 0;
}

/* animated ring decorations */
.lc-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
    top: 50%; right: -60px;
    pointer-events: none;
    animation: lc-spin 10s linear infinite;
}
.lc-ring-1 {
    width: 380px; height: 380px;
    border-color: rgba(65,105,255,0.25);
    margin-top: -190px; margin-right: -190px;
    animation-duration: 12s;
}
.lc-ring-2 {
    width: 240px; height: 240px;
    border-color: rgba(120,80,255,0.2);
    margin-top: -120px; margin-right: -120px;
    animation-duration: 8s;
    animation-direction: reverse;
}
@keyframes lc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.lc-orb {
    position: absolute;
    width: 280px; height: 280px; border-radius: 50%;
    background: rgba(65,105,255,0.4);
    filter: blur(70px);
    top: -80px; right: -40px;
    pointer-events: none;
    animation: lc-orb-pulse 5s ease-in-out infinite;
}
@keyframes lc-orb-pulse {
    0%,100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.15); }
}

/* badge */
.lc-badge {
    display: inline-flex;
    align-items: center; gap: 8px;
    background: rgba(65,105,255,0.15);
    border: 1px solid rgba(65,105,255,0.4);
    border-radius: 100px;
    padding: 6px 18px; margin: 28px 32px 0;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: #a0b8ff;
    width: fit-content;
}
.lc-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4cde80;
    animation: blink 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

/* body layout */
.lc-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    padding: 28px 32px 36px;
    position: relative;
    z-index: 2;
}
.lc-left { display: flex; flex-direction: column; gap: 20px; }

.lc-title {
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 900; letter-spacing: -0.04em; line-height: 1.1;
    color: #fff; margin: 0;
}
.lc-tagline {
    font-size: 0.95rem; font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em; margin: -12px 0 0;
}
.lc-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.65; margin: 0;
}

/* feature list */
.lc-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.lc-features li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.9rem; color: rgba(255,255,255,0.8);
    line-height: 1.4;
}
.lc-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; margin-top: 1px; }

/* maintenance box */
.lc-maintenance {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.lc-maint-title {
    font-size: 0.82rem; font-weight: 700;
    color: rgba(255,255,255,0.6); margin: 0;
    text-transform: uppercase; letter-spacing: 1px;
}
.lc-maint-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 8px;
}
.lc-maint-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.lc-maint-row span { color: rgba(255,255,255,0.5); }
.lc-maint-row strong { color: #fff; font-weight: 700; }
.lc-zero { color: #4cde80 !important; font-size: 1rem; }
.lc-maint-note {
    font-size: 0.75rem; color: rgba(255,255,255,0.35);
    line-height: 1.5; margin: 0;
}

/* right column */
.lc-right {
    display: flex; flex-direction: column; gap: 14px;
    justify-content: center;
}
.lc-price-block {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(65,105,255,0.25);
    border-radius: 18px;
    padding: 22px 24px;
    text-align: center;
}
.lc-price-label {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: rgba(255,255,255,0.45); margin: 0 0 8px;
}
.lc-price {
    display: flex; align-items: baseline;
    justify-content: center; gap: 2px; line-height: 1;
}
.lc-cur {
    font-size: 1.5rem; font-weight: 900; color: #4cde80;
    text-shadow: 0 0 16px rgba(76,222,128,0.8);
    margin-top: 4px;
}
.lc-amt {
    font-size: clamp(2.8rem, 5vw, 3.8rem);
    font-weight: 900; letter-spacing: -0.06em;
    color: #4cde80;
    text-shadow: 0 0 24px rgba(76,222,128,0.9), 0 0 48px rgba(76,222,128,0.4);
    animation: ps-pg 2.5s ease-in-out infinite;
}
.lc-slash {
    font-size: 1.3rem; font-weight: 700;
    color: rgba(76,222,128,0.45);
    align-self: flex-end; padding-bottom: 3px;
}
.lc-price-note {
    font-size: 0.73rem; color: rgba(255,255,255,0.35);
    margin: 8px 0 0; line-height: 1.5;
}
.lc-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, #4169ff 0%, #7c3aed 100%);
    color: #fff; padding: 14px 24px; border-radius: 100px;
    font-size: 0.92rem; font-weight: 700;
    box-shadow: 0 6px 22px rgba(65,105,255,0.45);
    transition: all 0.3s var(--ease);
    text-decoration: none;
}
.lc-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(65,105,255,0.65); }
.lc-btn-wa {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(37,211,102,0.12);
    border: 1px solid rgba(37,211,102,0.4);
    color: #4cde80; padding: 12px 20px; border-radius: 100px;
    font-size: 0.88rem; font-weight: 700;
    transition: all 0.3s var(--ease); text-decoration: none;
}
.lc-btn-wa:hover {
    background: rgba(37,211,102,0.22);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,211,102,0.3);
}
.lc-scarcity {
    font-size: 0.78rem; color: rgba(255,255,255,0.4);
    text-align: center; margin: 0;
}
.lc-scarcity strong { color: #ffd76e; }

/* ── Standard pricing cards tweaks ── */
.plan-number {
    font-size: 2rem; font-weight: 900;
    color: var(--blue-dim);
    letter-spacing: -0.06em;
    line-height: 1; margin-bottom: 6px;
    color: rgba(65,105,255,0.25);
}
.popular .plan-number,
.pricing-royal .plan-number { color: rgba(65,105,255,0.4); }

.plan-fees {
    display: flex; flex-direction: column; gap: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 4px;
}
.plan-fee-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    font-size: 0.82rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.plan-fee-row:last-child { border-bottom: none; }
.plan-fee-row span { color: var(--text-dim); }
.plan-fee-row strong { color: var(--text); font-weight: 700; font-size: 0.85rem; }
.plan-fee-row strong em { font-style: normal; font-size: 0.75rem; font-weight: 500; color: var(--text-dim); }
.fee-free { color: #15803d !important; }

/* Royal card — gold accent */
.pricing-royal {
    border-color: rgba(214,162,37,0.35) !important;
    background: linear-gradient(160deg, #fffdf5 0%, #fff 100%);
}
.royal-tag {
    position: absolute; top: -1px; right: 20px;
    background: linear-gradient(135deg, #d4a017, #f4c842);
    color: #5a3800;
    font-size: 0.65rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.5px;
    padding: 5px 14px; border-radius: 0 0 10px 10px;
}
.pricing-royal .plan-fee-row { background: #fffdf0; }
.pricing-royal .pricing-features li { color: var(--text); }

/* Section header spacing */
.pricing-header { margin-bottom: 36px; }

/* =========================================
   RESPONSIVE — Tablet 992px
   ========================================= */
@media (max-width:992px) {
    .about-wrapper { grid-template-columns:1fr; gap:48px; }
    .contact-wrapper { grid-template-columns:1fr; gap:48px; }
    .pricing-grid { grid-template-columns:1fr; gap:20px; }
    .hero-sub { flex-direction:column; align-items:center; text-align:center; gap:24px; }
    .lc-body { grid-template-columns: 1fr; gap: 32px; }
    .lc-ring, .lc-orb { display: none; }
}


/* =========================================
   RESPONSIVE — Mobile 768px
   ========================================= */
@media (max-width:768px) {
    body { padding-bottom:90px; cursor:auto; }
    .cursor,.cursor-follower { display:none; }
    .container { padding:0 20px; }

    /* Header */
    .header { top:12px; width:calc(100% - 24px); border-radius:20px; }
    .header-inner { padding:10px 18px; }
    .header-nav,.btn-cta { display:none; }
    .menu-btn { display:flex; cursor:pointer; }

    /* Hero */
    .hero { padding-top:120px; padding-bottom:32px; }
    .hero-content { padding:0 20px; }
    .hero-bottom { display: none !important; }
    .hero-title { font-size:clamp(3.2rem,15vw,6rem); text-align:center; }
    .hero-actions { flex-direction:column; width:100%; align-items:center; gap: 16px; margin-top:24px; }
    .hero-actions a { justify-content:center; width: 100%; }
    .hero-stats { gap:24px; }
    .scroll-hint { display:none; }

    /* Services */
    .services { padding:80px 0; }
    .services-header { padding:0 20px; }
    .service-item { grid-template-columns:1fr; gap:12px; padding:28px 20px; }
    .service-item:hover { padding-left:20px; }
    .service-icon,.service-arrow { display:none; }

    /* Work */
    .work { padding:80px 0; }
    .work-header { padding:0 20px; margin-bottom:48px; }
    .work-image-follower { display:none; }
    .work-item { flex-direction:column; align-items:flex-start; gap:16px; padding:24px 20px; }
    .work-item:hover { padding-left:20px; }
    .work-item-right { width:100%; }
    .work-year { display:none; }

    /* About */
    .about { padding:80px 0; }
    .founder-quote { font-size:1.1rem; }

    /* Pricing */
    .pricing { padding:80px 0; }
    .pricing-header { padding:0 20px; }
    .pricing-card { padding:32px 24px; }

    /* Contact */
    .contact { padding:80px 0; }
    .form-row { grid-template-columns:1fr; }

    /* Footer */
    .footer-inner { flex-direction:column; gap:32px; }
    .footer-bottom { flex-direction:column; gap:8px; text-align:center; }

    /* Mobile bottom nav */
    .mobile-bottom-nav { display:flex; }

    /* Typography */
    .label { font-size:0.7rem; }
    .section-title { font-size:2rem; }

    /* 3D — smaller for mobile */
    .gyro-wrap { width:170px; height:170px; top:6%; right:1%; }
    .ring-1 { width:170px; height:170px; }
    .ring-2 { width:118px; height:118px; }
    .ring-3 { width:70px;  height:70px; }
    .gyro-core { width:18px; height:18px; }

    .shape-cube { width:36px; height:36px; bottom:20%; right:4%; }
    .cube-face { width:36px; height:36px; }
    .cube-front  { transform:translateZ(18px); }
    .cube-back   { transform:rotateY(180deg)  translateZ(18px); }
    .cube-left   { transform:rotateY(-90deg)  translateZ(18px); }
    .cube-right  { transform:rotateY(90deg)   translateZ(18px); }
    .cube-top    { transform:rotateX(90deg)   translateZ(18px); }
    .cube-bottom { transform:rotateX(-90deg)  translateZ(18px); }

    .shape-pyramid { top:52%; left:1%; }
    .py-face { border-left-width:20px; border-right-width:20px; border-bottom-width:36px; }
    .py-face:nth-child(1) { transform:rotateY(0deg)   rotateX(-30deg) translateZ(12px); }
    .py-face:nth-child(2) { transform:rotateY(90deg)  rotateX(-30deg) translateZ(12px); }
    .py-face:nth-child(3) { transform:rotateY(180deg) rotateX(-30deg) translateZ(12px); }
    .py-face:nth-child(4) { transform:rotateY(270deg) rotateX(-30deg) translateZ(12px); }

    .shape-diamond { top:15%; left:1%; width:28px; height:28px; }

    .orb-1 { width:220px; height:220px; opacity:0.14; filter:blur(36px); }
    .orb-2 { width:150px; height:150px; opacity:0.12; filter:blur(28px); }
    .orb-3 { display:none; }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce) {
    .gyro-ring,.gyro-core,.shape-float,.glow-orb,.hero-canvas { animation:none !important; }
}

/* =========================================
   Floating Actions
   ========================================= */
.floating-actions {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9990;
}
.fab-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.fab-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.fab-wa {
    background: #25D366;
}
.fab-call {
    background: var(--blue);
}
@media (max-width: 768px) {
    .floating-actions {
        bottom: 96px; /* Above the mobile nav */
        right: 16px;
    }
    .fab-btn {
        width: 50px;
        height: 50px;
    }
    .fab-btn svg {
        width: 20px;
        height: 20px;
    }
}