/* =============================
   GLOBAL
============================= */

html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video, canvas{
    max-width: 100%;
    height: auto;
}

:root{
    --bg:#FFFFFF;
    --card:#FFFFFF;
    --text:#1A1A1A;
    --muted:rgba(26,26,26,.68);

    --blue:#3E66F0;
    --indigo:#2C2F80;

    --soft:rgba(62,102,240,.08);

    --radius:14px;
    --shadow:0 10px 24px rgba(26,26,26,.10);
    --shadow-hover:0 16px 34px rgba(26,26,26,.16);
    --transition:220ms ease;

    /* Seasonal toggle: set to 0 to disable all Easter logo accents */
    --easter-on: 1;
    --easter-accent-a: #ffe38a;
    --easter-accent-b: #f8b1cf;
    --easter-accent-c: #b9a7ff;
}

*{ box-sizing:border-box; }

body{
    margin:0;
    font-family:"Inter", sans-serif;
    background:var(--bg);
    color:var(--text);
}

.container{
    width:92%;
    max-width:1180px;
    margin:auto;
}

/* =============================
   SECTION DIVIDERS
============================= */

.section{
    padding:80px 0;
    border-top:1px solid rgba(26,26,26,.08);
    background:
            linear-gradient(
                    to bottom,
                    rgba(62,102,240,.02) 0%,
                    rgba(62,102,240,.04) 50%,
                    rgba(62,102,240,.02) 100%
            );
}

/* =============================
   HEADER CLEANER LAYOUT
============================= */

.site-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;

    background: rgba(15,18,38,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}

.header-inner{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    min-height: 78px;
}

main{
    padding-top: 78px;
}

/* logo */
.brand{
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.brand img{
    height: 100px;
    width: auto;
    display: block;
    object-fit: contain;
    filter:
            contrast(1.08)
            drop-shadow(0 0 calc(8px * var(--easter-on)) rgba(255,227,138,.38));
}

.brand::before{
    content:"";
}

.brand::after{
    content:"";
}

/* centered nav */
.nav{
    display: flex;
    justify-content: center;
}

.nav-list{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-list a{
    text-decoration: none;
    color: rgba(255,255,255,0.88);
    font-weight: 700;
    font-size: 16px;
    transition: color .2s ease, transform .2s ease;
    position: relative;
}

.nav-list a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--indigo));
    transition: width .2s ease;
}

.nav-list a:hover{
    color: #fff;
    transform: translateY(-1px);
}

.nav-list a:hover::after{
    width: 100%;
}

/* right side */
.header-right{
    display: flex;
    align-items: center;
    gap: 14px;
}

/* language pills */
.lang-switcher{
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-link{
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.72);
    font-weight: 800;
    text-decoration: none;
    transition: all .2s ease;
}

.lang-link:hover{
    background: rgba(255,255,255,.14);
    color: #fff;
}

.lang-link.active{
    background: linear-gradient(90deg, var(--blue), var(--indigo));
    color: #fff;
}

/* phone CTA */
.nav-contact{
    display: flex;
    align-items: center;
}

.nav-call{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 16px;
    border-radius: 999px;

    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    color: #fff;

    background: linear-gradient(90deg, var(--blue), var(--indigo));
    box-shadow: 0 8px 20px rgba(62,102,240,.20);

    transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}

.nav-call:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(62,102,240,.28);
}

.call-icon{
    font-size: 13px;
    line-height: 1;
}

.call-text{
    white-space: nowrap;
}

/* responsive */
@media (max-width: 1100px){
    .header-inner{
        grid-template-columns: auto 1fr auto;
        gap: 14px;
        min-height: 72px;
    }

    .header-right{
        justify-self: end;
    }

    .nav{
        min-width: 0;
        justify-content: center;
    }

    main{
        padding-top: 72px;
    }
}

@media (max-width: 768px){
    .brand::before{
        content:"";
    }

    .brand::after{
        right:-6px;
        bottom:3px;
        font-size:calc(16px * var(--easter-on));
    }

    .brand img{
        height: 58px;
        max-height: 58px;
        width: auto;
    }

    .nav-list{
        gap: 10px;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .nav-list::-webkit-scrollbar{
        display: none;
    }

    .header-right{
        gap: 8px;
    }

    .lang-link{
        padding: 7px 10px;
        font-size: 12px;
    }

    .nav-call{
        padding: 8px 12px;
        font-size: 13px;
    }

    .call-text{
        display: none;
    }

    .nav-call{
        border-radius: 999px;
    }

    main{
        padding-top: 72px;
    }
}

/* =============================
   HERO — APPLE-LIKE FULL BLEED
============================= */

.hero.hero--full{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    border-top:none;
    overflow:hidden;
    padding:110px 0 70px;
}

.hero-bg{
    position:absolute;
    inset:-2px;
    background:
            radial-gradient(900px 420px at 20% 25%, rgba(62,102,240,.22), transparent 55%),
            radial-gradient(900px 420px at 85% 35%, rgba(44,47,128,.20), transparent 55%),
            radial-gradient(700px 420px at 50% 105%, rgba(62,102,240,.10), transparent 60%),
            linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.90));
    filter:saturate(1.05);
}

.hero.hero--full::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.07;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
}

.hero-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap:44px;
    align-items:center;
}

.hero-copy h1{
    font-size:clamp(2.5rem, 3.4vw, 4.1rem);
    line-height:1.02;
    letter-spacing:-0.02em;
    font-weight:950;
    margin:0 0 14px;
    color:var(--indigo);
}

.hero-copy .lead{
    margin:0 0 26px;
    max-width:56ch;
    font-size:1.08rem;
    line-height:1.65;
    font-weight:650;
    color:rgba(26,26,26,.72);
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
    margin-bottom:18px;
}

.hero-micro{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    color:rgba(26,26,26,.62);
    font-weight:750;
}

.hero-visual{
    position:relative;
    display:flex;
    justify-content:center;
}

.device{
    width:min(520px, 100%);
    border-radius:22px;
    padding:14px;
    background:rgba(255,255,255,.62);
    border:1px solid rgba(26,26,26,.10);
    box-shadow:
            0 28px 70px rgba(26,26,26,.18),
            0 10px 24px rgba(26,26,26,.10);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transform:translateY(0);
    transition:transform var(--transition), box-shadow var(--transition);
}

.device:hover{
    transform:translateY(-6px);
    box-shadow:
            0 34px 90px rgba(26,26,26,.20),
            0 12px 30px rgba(26,26,26,.12);
}

.device-topbar{
    height:18px;
    border-radius:12px;
    margin-bottom:12px;
    background:linear-gradient(90deg, rgba(62,102,240,.16), rgba(44,47,128,.12));
    border:1px solid rgba(26,26,26,.08);
}

.device img{
    width:100%;
    height:auto;
    display:block;
    border-radius:16px;
}

.pill{
    position:absolute;
    padding:10px 14px;
    border-radius:999px;
    font-weight:900;
    color:var(--indigo);
    background:rgba(255,255,255,.75);
    border:1px solid rgba(26,26,26,.10);
    box-shadow:0 16px 34px rgba(26,26,26,.14);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    pointer-events:none;
}

.pill--a{ top:8%; left:6%; }
.pill--b{ bottom:10%; right:6%; }

.scroll-cue{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    width:30px;
    height:46px;
    border-radius:999px;
    border:1px solid rgba(26,26,26,.18);
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:10px;
    z-index:2;
}

.scroll-cue span{
    width:6px;
    height:6px;
    border-radius:999px;
    background:rgba(26,26,26,.45);
    animation:scrollDot 1.4s ease-in-out infinite;
}

@keyframes scrollDot{
    0%{ transform:translateY(0); opacity:.55; }
    60%{ transform:translateY(14px); opacity:1; }
    100%{ transform:translateY(0); opacity:.55; }
}

@media (max-width:980px){
    .hero-grid{
        grid-template-columns:1fr;
        gap:26px;
        text-align:center;
    }

    .hero-copy .lead{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-micro{
        justify-content:center;
    }

    .pill{
        display:none;
    }

    .hero.hero--full{
        padding:96px 0 64px;
    }
}

/* =============================
   TITLES
============================= */

.section-title{
    text-align:center;
    font-size:2rem;
    font-weight:900;
    margin:0 0 8px;
    color:var(--indigo);
}

.section-sub{
    text-align:center;
    margin:0 0 40px;
    color:var(--muted);
    font-weight:650;
    line-height:1.55;
}

.seo-link-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:12px;
    margin:0 auto 28px;
    max-width:980px;
}

.seo-link-grid a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    text-decoration:none;
    color:var(--indigo);
    font-weight:700;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(62,102,240,.2);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.seo-link-grid a:hover{
    transform:translateY(-2px);
    border-color:rgba(62,102,240,.45);
    box-shadow:0 10px 20px rgba(26,26,26,.08);
}

.seo-faq{
    max-width:980px;
    margin:0 auto;
    display:grid;
    gap:10px;
}

.seo-faq details{
    background:rgba(255,255,255,.8);
    border:1px solid rgba(62,102,240,.18);
    border-radius:12px;
    padding:12px 14px;
}

.seo-faq summary{
    cursor:pointer;
    font-weight:750;
    color:var(--indigo);
}

.seo-faq p{
    margin:8px 0 0;
    color:var(--muted);
    line-height:1.55;
    font-weight:600;
}

/* =============================
   SERVICES CARDS
============================= */

.services-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:24px;
}

.service-card{
    background:var(--card);
    border-radius:var(--radius);
    padding:24px;
    border:1px solid rgba(26,26,26,.08);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.service-card:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:var(--shadow-hover);
    border-color:rgba(62,102,240,.45);
    background:linear-gradient(180deg, rgba(62,102,240,.06), rgba(62,102,240,.02));
}

.service-card h3{
    margin:0 0 8px;
    color:var(--indigo);
    font-weight:900;
}

.service-card p{
    margin:0;
    color:var(--muted);
    font-weight:650;
    line-height:1.55;
}

/* =============================
   SERVICE PACKAGES
============================= */

.service-packages{
    position:relative;
    margin-top:46px;
    padding:78px 0 60px;
    isolation:isolate;
}

.service-packages::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-120px;
    height:460px;
    z-index:-1;
    pointer-events:none;
    background:
            radial-gradient(700px 260px at 20% 0%, rgba(62,102,240,.16), transparent 70%),
            radial-gradient(620px 300px at 85% 12%, rgba(44,47,128,.12), transparent 72%),
            radial-gradient(520px 260px at 50% 100%, rgba(62,102,240,.08), transparent 70%);
    filter:saturate(120%);
}

.packages-title{
    margin:0 0 8px;
    text-align:center;
    font-size:1.65rem;
    font-weight:950;
    color:var(--indigo);
    letter-spacing:-.2px;
}

.packages-sub{
    text-align:center;
    margin:0 0 22px;
    color:var(--muted);
    font-weight:650;
    line-height:1.55;
}

.packages-grid--simple{
    display:grid;
    grid-template-columns:repeat(3, 500px);
    gap:28px;
    margin-top:28px;
    justify-content:center;
    align-items:stretch;
}

.package-simple{
    max-width:420px;
    width:100%;
    justify-self:center;

    background:rgba(255,255,255,.74);
    border:1px solid rgba(62,102,240,.18);
    border-radius:20px;
    padding:18px 18px 16px;

    box-shadow:0 12px 30px rgba(26,26,26,.10);
    backdrop-filter:saturate(140%) blur(10px);

    display:flex;
    flex-direction:column;
    min-width:0;

    transition:
            transform 240ms cubic-bezier(.2,.8,.2,1),
            box-shadow 240ms cubic-bezier(.2,.8,.2,1),
            border-color 240ms cubic-bezier(.2,.8,.2,1),
            background 240ms cubic-bezier(.2,.8,.2,1);
}

.package-simple:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 18px 46px rgba(26,26,26,.16);
    border-color:rgba(62,102,240,.35);
    background:
            linear-gradient(180deg, rgba(62,102,240,.06), rgba(62,102,240,.02)),
            rgba(255,255,255,.86);
}

.package-simple__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:10px;
}

.package-simple__left{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
}

.package-kicker{
    width:34px;
    height:34px;
    border-radius:12px;
    background:rgba(62,102,240,.10);
    border:1px solid rgba(62,102,240,.18);
    display:grid;
    place-items:center;
    flex:0 0 34px;
    font-size:16px;
}

.package-title{
    margin:0;
    font-size:1.50rem;
    font-weight:950;
    color:var(--indigo);
    line-height:1.2;
    overflow-wrap:anywhere;
}

.package-price{
    display:inline;
    text-align:center;
    flex:0 0 auto;
    min-width:100px;
}

.price-from{
    display:inline;
    font-size:.78rem;
    color:var(--muted);
    font-weight:800;
    margin-right:4px;
}

.price-value{
    display:inline;
    font-size:1.10rem;
    font-weight:950;
    color:var(--text);
}

.package-simple__desc{
    margin:10px 0 0;
    color:rgba(26,26,26,.72);
    font-weight:850;
    line-height:1.55;
    max-width:40ch;
    overflow-wrap:anywhere;
}

.package-simple__actions{
    margin-top:auto;
    padding-top:14px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.package-simple__actions .btn{
    padding:10px 14px;
    border-radius:12px;
    font-weight:950;
    border:1px solid rgba(44,47,128,.14);
    background:rgba(44,47,128,.08);
    color:var(--indigo);
    transition:transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.package-simple__actions .btn:hover{
    background:rgba(62,102,240,.14);
    border-color:rgba(62,102,240,.35);
    transform:translateY(-2px);
}

.package-simple__actions .btn::after{
    content:"→";
    margin-left:10px;
    font-weight:950;
    opacity:.9;
    transform:translateY(-.5px);
}

.package-simple.fade-target{
    opacity:1;
    transform:none;
    filter:none;
    transition:
            opacity 720ms cubic-bezier(.2,.8,.2,1),
            transform 720ms cubic-bezier(.2,.8,.2,1),
            filter 720ms cubic-bezier(.2,.8,.2,1);
    will-change:opacity, transform, filter;
}

.package-simple.fade-target.fade-in{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
    filter:blur(0);
}

.package-simple.fade-delay-1{ transition-delay:.06s; }
.package-simple.fade-delay-2{ transition-delay:.14s; }
.package-simple.fade-delay-3{ transition-delay:.22s; }
.package-simple.fade-delay-4{ transition-delay:.30s; }

@media (prefers-reduced-motion: reduce){
    .package-simple,
    .package-simple.fade-target{
        transition:none !important;
        transform:none !important;
        filter:none !important;
    }
}

@media (max-width:1024px){
    .packages-grid--simple{
        grid-template-columns:repeat(2, minmax(300px, 1fr));
        gap:22px;
    }

    .package-simple{
        max-width:460px;
    }
}

@media (max-width:560px){
    .packages-grid--simple{
        grid-template-columns:1fr;
        gap:14px;
    }

    .package-simple{
        max-width:520px;
        padding:16px 16px 14px;
    }

    .package-simple__top{
        flex-wrap:wrap;
    }

    .package-price{
        text-align:left;
        min-width:auto;
    }
}

/* =============================
   PORTFOLIO
============================= */

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

.portfolio-item{
    height:200px;
    border-radius:var(--radius);
    border:1px solid rgba(26,26,26,.08);
    background:
            linear-gradient(135deg, rgba(62,102,240,.18), rgba(44,47,128,.12)),
            radial-gradient(350px 160px at 25% 25%, rgba(255,255,255,.75), transparent 55%);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.portfolio-item:hover{
    transform:translateY(-6px) scale(1.03);
    box-shadow:var(--shadow-hover);
}

/* =============================
   ABOUT
============================= */

.about-wrapper{
    max-width:820px;
    margin:auto;
}

#about .about-wrapper{
    max-width:1180px;
}

.about-list{
    list-style:none;
    padding:0;
    margin:14px 0 0;
}

.about-list li{
    margin-bottom:8px;
    font-weight:800;
    color:var(--indigo);
}

/* =============================
   WHY US
============================= */

#about .why-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;
    margin-top:36px;
}

#about .why-item{
    background:var(--card);
    border-radius:var(--radius);
    padding:24px;
    border:1px solid rgba(26,26,26,.08);
    box-shadow:var(--shadow);
    transition:var(--transition);

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;

    min-height:168px;
}

#about .why-item:hover{
    box-shadow:var(--shadow-hover);
    border-color:rgba(62,102,240,.45);
    background:linear-gradient(180deg, rgba(62,102,240,.06), rgba(62,102,240,.02));
}

#about .why-icon{
    width:32px;
    height:32px;
    min-width:32px;
    min-height:32px;

    display:grid;
    place-items:center;

    border-radius:10px;
    background:rgba(62,102,240,.10);
    border:1px solid rgba(62,102,240,.20);

    font-size:16px;
    margin:0 0 12px 0;
    line-height:1;
}

#about .why-item strong{
    display:block;
    margin:0 0 8px;
    color:var(--indigo);
    font-weight:900;
    font-size:1.05rem;
    line-height:1.25;
}

#about .why-item span:not(.why-icon){
    margin:0;
    color:var(--muted);
    font-weight:650;
    line-height:1.55;
    overflow-wrap:anywhere;
}

/* =============================
   CONTACT
============================= */

.contact-form{
    max-width:520px;
    margin:auto;
    display:grid;
    gap:16px;
}

.contact-form label{
    display:grid;
    gap:6px;
}

input, textarea{
    width:100%;
    border:1px solid rgba(26,26,26,.10);
    padding:12px 12px;
    border-radius:12px;
    background:#fff;
    font-size:1rem;
    color:var(--text);
    transition:var(--transition);
}

input:focus, textarea:focus{
    outline:none;
    border-color:rgba(62,102,240,.70);
    box-shadow:0 0 0 4px rgba(62,102,240,.12);
}

/* =============================
   FOOTER
============================= */

.site-footer{
    background:var(--card);
    border-top:1px solid rgba(26,26,26,.10);
    padding:16px 0;
}

.footer-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
}

.site-footer p{
    margin:0;
    font-size:.95rem;
    color:var(--muted);
    font-weight:650;
}

.site-footer a{
    color:var(--blue);
    text-decoration:none;
    font-weight:800;
    transition:var(--transition);
}

.site-footer a:hover{
    color:var(--indigo);
}

.footer-social{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:4px;
}

.footer-social-link{
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(26,26,26,.14);
    background:rgba(62,102,240,.04);
    color:rgba(26,26,26,.66);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.footer-social-link svg{
    width:16px;
    height:16px;
    display:block;
}

.footer-social-link:hover{
    transform:translateY(-1px);
    border-color:rgba(62,102,240,.34);
    background:rgba(62,102,240,.10);
    color:var(--blue);
}

/* =============================
   FADE ANIMATIONS
============================= */

.fade-target{
    opacity:0;
    transform:translate3d(0, -80px, 0);
    transition:opacity .75s ease, transform .75s ease;
}

.fade-in{
    opacity:1 !important;
    transform:translateY(0) !important;
}

.fade-delay-1{ transition-delay:.12s; }
.fade-delay-2{ transition-delay:.22s; }
.fade-delay-3{ transition-delay:.32s; }
.fade-delay-4{ transition-delay:.42s; }

/* Professional motion layer used by shared JS */
.motion-reveal{
    opacity:0;
    transform:translate3d(var(--motion-x, 0), -80px, 0) scale(var(--motion-scale, 1));
    filter:blur(var(--motion-blur, 0px));
    transition:
            opacity 680ms cubic-bezier(.2,.8,.2,1),
            transform 680ms cubic-bezier(.2,.8,.2,1),
            filter 680ms cubic-bezier(.2,.8,.2,1);
    transition-delay:var(--motion-stagger, 0ms);
    will-change:opacity, transform;
}

.motion-reveal.is-visible{
    opacity:1;
    transform:translate3d(0, 0, 0);
    filter:blur(0);
}

body.global-intro-pending .motion-reveal{
    opacity:0 !important;
    transform:translate3d(var(--motion-x, 0), -80px, 0) scale(var(--motion-scale, 1)) !important;
    filter:blur(var(--motion-blur, 2px)) !important;
}

.motion-intro{
    opacity:0;
    transform:translate3d(var(--intro-x, 0px), var(--intro-y, -160px), 0) rotate(var(--intro-rotate, 0deg)) scale(var(--intro-scale, 1));
    filter:blur(var(--intro-blur, 6px));
    will-change:opacity, transform, filter;
}

body.motion-ready .motion-intro{
    opacity:1;
    transform:translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter:blur(0);
    transition:
            opacity 520ms cubic-bezier(.18,.84,.22,1),
            transform 700ms cubic-bezier(.16,1,.3,1),
            filter 520ms cubic-bezier(.18,.84,.22,1);
    transition-delay:var(--intro-delay, 0ms);
}

body.global-intro-pending .motion-intro{
    opacity:0 !important;
    transform:translate3d(var(--intro-x, 0px), var(--intro-y, -160px), 0) rotate(var(--intro-rotate, 0deg)) scale(var(--intro-scale, 1)) !important;
    filter:blur(var(--intro-blur, 6px)) !important;
}

body:not(.motion-ready) .hero-copy h1,
body:not(.motion-ready) .hero-copy .lead,
body:not(.motion-ready) .hero-actions,
body:not(.motion-ready) .hero-visual,
body:not(.motion-ready) .pack-head .pack-title,
body:not(.motion-ready) .pack-head .pack-sub,
body:not(.motion-ready) .pack-actions,
body:not(.motion-ready) .pack-preview,
body:not(.motion-ready) .price-card{
    opacity:0;
    transform:translate3d(0, -120px, 0);
    filter:blur(6px);
}

/* Premium first-load intro for landing package pages */
.landing-intro{
    --landing-intro-x:0px;
    --landing-intro-y:0px;
    opacity:0;
    transform:translate3d(var(--landing-intro-x), var(--landing-intro-y), 0) scale(.985);
    filter:blur(6px);
    will-change:opacity, transform, filter;
}

.pack-head .pack-title.landing-intro,
.pack-head .pack-sub.landing-intro,
.pack-actions.landing-intro{
    --landing-intro-x:0px;
    --landing-intro-y:-420px;
}

.pack-preview.landing-intro{
    --landing-intro-x:1100vw;
    --landing-intro-y:-20px;
}

body.landing-intro-active .landing-intro{
    opacity:0 !important;
    transform:translate3d(var(--landing-intro-x), var(--landing-intro-y), 0) scale(.985) !important;
    filter:blur(6px) !important;
}

body.landing-intro-pending .landing-intro{
    opacity:0 !important;
    transform:translate3d(var(--landing-intro-x), var(--landing-intro-y), 0) scale(.985) !important;
    filter:blur(6px) !important;
}

body.landing-intro-active.motion-ready .landing-intro{
    opacity:1 !important;
    transform:translate3d(0, 0, 0) scale(1) !important;
    filter:blur(0) !important;
    transition:
            opacity 520ms cubic-bezier(.18,.84,.22,1),
            transform 700ms cubic-bezier(.16,.9,.24,1),
            filter 520ms cubic-bezier(.18,.84,.22,1);
    transition-delay:var(--intro-delay, 0ms);
}

.hero-bg,
.hero-visual .device{
    transition:transform 420ms ease-out;
}

.section-motion{
    transition:transform 560ms cubic-bezier(.2,.8,.2,1), box-shadow 560ms cubic-bezier(.2,.8,.2,1);
}

.section-motion.section-inview{
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(62,102,240,.14);
}

/* =============================
   CONTACT WIDGET
============================= */

.contact-widget{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:999;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
}

.contact-widget-button{
    width:60px;
    height:60px;
    border-radius:999px;
    border:1px solid rgba(44,47,128,.20);
    background:linear-gradient(135deg, var(--blue), var(--indigo));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:
            0 18px 40px rgba(26,26,26,.18),
            0 0 0 0 rgba(62,102,240,.35);
    transition:var(--transition);
    position:relative;
    isolation:isolate;
    animation:widgetPulse 1.4s ease-in-out infinite;
}

.contact-widget-button::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(62,102,240,.35), transparent 62%);
    filter:blur(2px);
    z-index:-1;
    opacity:.9;
    transition:var(--transition);
}

.contact-widget-button::after{
    content:"";
    position:absolute;
    top:10px;
    left:12px;
    width:26px;
    height:26px;
    border-radius:999px;
    background:rgba(255,255,255,.35);
    filter:blur(1px);
    opacity:.55;
    transform:rotate(10deg);
    pointer-events:none;
}

.contact-widget-button span{
    font-size:1.35rem;
    transform:translateY(1px);
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.15));
}

.contact-widget-button:hover{
    transform:translateY(-4px) scale(1.08);
    box-shadow:
            0 22px 52px rgba(26,26,26,.22),
            0 0 0 10px rgba(62,102,240,.10);
}

.contact-widget-button:hover::before{
    opacity:1;
    inset:-14px;
}

.contact-widget-button:active{
    transform:translateY(-1px) scale(1.04);
    box-shadow:
            0 16px 36px rgba(26,26,26,.18),
            0 0 0 8px rgba(62,102,240,.10);
}

.contact-widget.open .contact-widget-button{
    animation:none;
    box-shadow:
            0 22px 52px rgba(26,26,26,.22),
            0 0 0 12px rgba(62,102,240,.12);
}

@keyframes widgetPulse{
    0%   { box-shadow: 0 18px 40px rgba(26,26,26,.18), 0 0 0 0 rgba(62,102,240,.26); }
    55%  { box-shadow: 0 22px 52px rgba(26,26,26,.22), 0 0 0 14px rgba(62,102,240,.08); }
    100% { box-shadow: 0 18px 40px rgba(26,26,26,.18), 0 0 0 0 rgba(62,102,240,.26); }
}

.contact-widget-panel{
    width:260px;
    background:#fff;
    border:1px solid rgba(26,26,26,.10);
    border-radius:16px;
    box-shadow:0 22px 60px rgba(26,26,26,.20);
    padding:14px 14px;
    opacity:0;
    transform:translateY(10px) scale(.98);
    pointer-events:none;
    transition:var(--transition);
    position:relative;
}

.contact-widget-panel::before{
    content:"";
    position:absolute;
    right:18px;
    bottom:-7px;
    width:14px;
    height:14px;
    background:#fff;
    border-right:1px solid rgba(26,26,26,.10);
    border-bottom:1px solid rgba(26,26,26,.10);
    transform:rotate(45deg);
}

.contact-widget.open .contact-widget-panel{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.contact-widget-panel h4{
    margin:0 0 8px;
    color:var(--indigo);
    font-weight:900;
}

.contact-widget-panel p{
    margin:6px 0;
    color:var(--muted);
    font-weight:650;
}

.contact-widget-panel a{
    color:var(--blue);
    font-weight:850;
    text-decoration:none;
}

.contact-widget-panel a:hover{
    color:var(--indigo);
}

.widget-cta{
    display:block;
    margin-top:10px;
    text-align:center;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(44,47,128,.08);
    border:1px solid rgba(44,47,128,.12);
    color:var(--indigo);
    font-weight:900;
    text-decoration:none;
    transition:var(--transition);
}

.widget-cta:hover{
    background:rgba(62,102,240,.14);
    transform:translateY(-2px) scale(1.01);
}

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

@media (max-width:520px){
    .container{
        width:92%;
        max-width:100%;
    }

    .header-inner{
        grid-template-columns:auto 1fr auto;
        gap:8px;
        min-height:64px;
        padding:6px 0;
    }

    .brand{
        flex-shrink:0;
    }

    .brand::before{
        content:"";
    }

    .brand::after{
        right:-4px;
        bottom:2px;
        font-size:calc(14px * var(--easter-on));
    }

    .brand img{
        height:52px;
        max-height:52px;
        min-width:118px;
        object-fit:contain;
    }

    main{
        padding-top:64px;
    }

    .nav{
        width:auto;
        min-width:0;
    }

    .nav-list{
        justify-content:flex-start;
        gap:10px;
        padding:0;
        margin:0;
    }

    .lang-switcher{
        gap:4px;
    }

    .lang-link{
        padding:6px 9px;
        font-size:11px;
    }

    .packages-grid--clean{
        grid-template-columns:1fr;
        gap:14px;
    }

    .package-card{
        width:100%;
        max-width:100%;
    }

    .package-top{
        flex-wrap:wrap;
        align-items:flex-start;
    }

    .package-price{
        min-width:auto;
        text-align:left;
    }

    .tier-switch{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:6px;
        padding:6px;
    }

    .tier-btn{
        width:100%;
        padding:10px 8px;
        font-size:.92rem;
        white-space:nowrap;
    }

    .package-title,
    .tier-desc,
    .service-card,
    .section-title,
    .section-sub{
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .contact-widget{
        right:14px;
        bottom:14px;
        z-index:999999;
    }

    .contact-widget-button{
        width:60px;
        height:60px;
    }
}

@media (max-width:1024px){
    #about .why-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:560px){
    #about .why-grid{
        grid-template-columns:1fr;
    }
}

/* =============================
   FORCE BUTTON STYLES
============================= */

a.btn, button.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:12px 22px;
    border-radius:14px;

    font-weight:800;
    line-height:1;
    text-decoration:none;

    border:1px solid transparent;
    cursor:pointer;

    transition:
            transform 220ms ease,
            box-shadow 220ms ease,
            background 220ms ease,
            border-color 220ms ease,
            color 220ms ease;
    -webkit-tap-highlight-color:transparent;
}

a.btn{
    color:inherit;
}

a.btn:link, a.btn:visited{
    text-decoration:none;
}

button.btn{
    appearance:none;
    -webkit-appearance:none;
    background:none;
}

.btn.btn-primary{
    background:linear-gradient(90deg, var(--blue), var(--indigo));
    color:#fff;
    box-shadow:var(--shadow);
}

.btn.btn-primary:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:var(--shadow-hover);
}

.btn.btn-ghost{
    background:rgba(44,47,128,.08);
    color:var(--indigo);
    border-color:rgba(44,47,128,.12);
}

.btn.btn-ghost:hover{
    background:rgba(62,102,240,.14);
    transform:translateY(-2px) scale(1.02);
}

a.btn:focus-visible, button.btn:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(62,102,240,.18), var(--shadow);
}

/* =============================
   PACKAGE PAGE
============================= */

.pack-screen{
    padding-top:10px;
    padding-bottom:10px;
    background:radial-gradient(circle at 50% 20%, rgba(44,47,128,0.06), transparent 60%);
}

.pack-screen-inner{
    max-width:1100px;
    margin:auto;
}

.pack-head{
    text-align:center;
    max-width:760px;
    margin:auto;
}

.pack-kicker{
    font-weight:600;
    opacity:.6;
    margin-bottom:6px;
}

.pack-title{
    font-size:42px;
    margin-bottom:10px;
}

.pack-sub{
    line-height:1.65;
    opacity:.9;
}

.pack-actions{
    margin-top:20px;
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}

.pricing-cards{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.price-card{
    position:relative;
    border-radius:14px;
    border:1px solid rgba(0,0,0,0.08);
    padding:22px;
    background:white;
    box-shadow:0 12px 30px rgba(0,0,0,0.06);
}

.price-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.price{
    text-align:right;
}

.price span{
    display:block;
    font-size:12px;
    opacity:.6;
}

.price strong{
    font-size:22px;
}

.price-card ul{
    padding-left:18px;
    line-height:1.6;
}

.price-note{
    margin-top:12px;
    font-size:14px;
    opacity:.75;
}

.price-card.featured{
    border:2px solid #2C2F80;
    transform:translateY(-4px);
}

.badge{
    position:absolute;
    top:-10px;
    left:20px;
    background:#2C2F80;
    color:white;
    font-size:12px;
    padding:4px 10px;
    border-radius:20px;
}

.pack-foot{
    margin-top:14px;
    text-align:center;
    opacity:.85;
}

.pack-foot span{
    margin:0 8px;
    opacity:.5;
}

@media (max-width:900px){
    .pricing-cards{
        grid-template-columns:1fr;
    }

    .pack-title{
        font-size:34px;
    }
}

.nav-contact{
    margin-left:12px;
    display:flex;
    align-items:center;
}

.nav-call{
    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;
    border-radius:999px;

    font-size:14px;
    font-weight:800;
    text-decoration:none;

    color:#fff;

    background:linear-gradient(90deg, var(--blue), var(--indigo));
    box-shadow:0 8px 20px rgba(62,102,240,0.25);

    transition:all 0.25s ease;
}

/* icon */
.call-icon{
    font-size:14px;
    display:inline-block;
    transition:transform 0.25s ease;
}

/* hover = subtle lift */
.nav-call:hover{
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 12px 28px rgba(62,102,240,0.35);
}

/* icon wiggle */
.nav-call:hover .call-icon{
    transform:rotate(-10deg) scale(1.15);
}

/* soft pulse (very subtle attention grab) */
.nav-call{
    animation:callPulse 2.5s ease-in-out infinite;
}

@keyframes callPulse{
    0%{ box-shadow:0 8px 20px rgba(62,102,240,0.25); }
    50%{ box-shadow:0 10px 26px rgba(62,102,240,0.35); }
    100%{ box-shadow:0 8px 20px rgba(62,102,240,0.25); }
}

/* ===== Centered smaller cards + preview below ===== */

.pricing-cards--center{
    justify-items:center;
}

.pricing-cards--small{
    grid-template-columns:repeat(3, minmax(0, 280px));
    gap:18px;
    margin-top:28px;
    justify-content:center;
}

.pricing-cards--small .price-card{
    padding:18px;
    border-radius:14px;
}

.pricing-cards--small .price strong{
    font-size:20px;
}

.pricing-cards--small ul{
    line-height:1.55;
}

.pack-preview{
    margin:22px auto 0;
    max-width:420px;
    text-align:center;
}

.pack-preview .pack-visual{
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,0.08);
    background:#fff;
    box-shadow:0 14px 36px rgba(0,0,0,0.08);
}

.pack-preview .pack-visual__top{
    display:flex;
    gap:6px;
    padding:5px 7px;
    border-bottom:1px solid rgba(0,0,0,0.06);
    background:rgba(255,255,255,0.9);
}

.pack-preview .dot{
    width:9px;
    height:9px;
    border-radius:999px;
    background:rgba(0,0,0,0.18);
}

.pack-preview img{
    display:block;
    width:100%;
    height:auto;
}

.pack-preview .pack-visual__caption{
    margin-top:10px;
    font-size:14px;
    opacity:0.85;
    line-height:1.5;
}

.site-footer--micro{
    padding:10px 0 !important;
}

.site-footer--micro .footer-inner{
    gap:6px !important;
}

.site-footer--micro p{
    margin:0 !important;
    font-size:12.5px;
    line-height:1.3;
    opacity:.85;
}

@media (max-width:980px){
    .pricing-cards--small{
        grid-template-columns:1fr;
        justify-items:stretch;
    }

    .pack-preview{
        max-width:560px;
    }
}

/* =============================
   REVIZUIRE SITE LAYOUT
============================= */

.review-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-top:25px;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
    padding:50px;
}

.review-section h3{
    margin-bottom:8px;
}

.review-section ul{
    padding-left:18px;
    line-height:1.6;
    opacity:.9;
}

@media (max-width:900px){
    .review-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 768px){
    .nav-call{
        padding:8px 12px;
        border-radius:999px;
    }
}

@media (prefers-reduced-motion: reduce){
    .brand::before,
    .brand::after{
        animation:none !important;
    }

    .motion-reveal,
    .motion-intro,
    .hero-bg,
    .hero-visual .device,
    .section-motion{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
    }
}