Let/* ==========================================================
   Spain Cost Light Website
   Design System
   Version 2.0
   ========================================================== */


/* ==========================================================
   RESET
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
}

img{
    display:block;
    max-width:100%;
}

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

button{
    font:inherit;
}


/* ==========================================================
   COLOUR SYSTEM
   ========================================================== */

:root{

    --background:#F7F5EF;

    --surface:#FFFFFF;

    --surface-alt:#FBFBFB;

    --primary:#F5A623;

    --primary-dark:#DD8C00;

    --text:#1F2933;

    --muted:#6B7280;

    --border:#E7E7E7;

    --shadow:
        0 12px 30px rgba(0,0,0,.08);

    --radius-small:12px;

    --radius-medium:20px;

    --radius-large:28px;

}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

body{

    background:var(--background);

    color:var(--text);

    font-family:

        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size:18px;

    line-height:1.65;

    -webkit-font-smoothing:antialiased;

}

h1,
h2,
h3{

    line-height:1.15;

    letter-spacing:-0.02em;

}

h1{

    font-size:clamp(2.8rem,6vw,4.3rem);

    font-weight:700;

}

h2{

    font-size:clamp(2rem,4vw,3rem);

    font-weight:700;

}

h3{

    font-size:1.35rem;

    margin-bottom:12px;

}

p{

    color:var(--muted);

}

strong{

    color:var(--text);

}


/* ==========================================================
   SPACING
   ========================================================== */

.section{

    padding:96px 0;

}

.section-small{

    padding:64px 0;

}

.section-heading{

    text-align:center;

    margin-bottom:56px;

}

.section-heading h2{

    margin-bottom:18px;

}

.section-heading p{

    max-width:760px;

    margin:auto;

}


/* ==========================================================
   LAYOUT
   ========================================================== */

.site-container{

    width:min(1180px,92%);

    margin:auto;

}

.grid{

    display:grid;

    gap:32px;

}

.grid-2{

    grid-template-columns:repeat(2,1fr);

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}


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

.card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-large);

    box-shadow:var(--shadow);

    padding:36px;

}

.feature-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-medium);

    box-shadow:var(--shadow);

    padding:32px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.feature-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 18px 36px rgba(0,0,0,.12);

}

.feature-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF6E5;

    font-size:2rem;

    margin-bottom:22px;

}


/* ==========================================================
   BUTTONS
   ========================================================== */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    font-weight:600;

    transition:.25s;

    cursor:pointer;

}

```css
/* ==========================================================
   BUTTONS
========================================================== */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    min-height:56px;

    padding:16px 30px;

    border-radius:18px;

    font-weight:600;

    text-decoration:none;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background .25s ease,

        color .25s ease;

}

.button:hover{

    transform:translateY(-3px);

    box-shadow:

        0 16px 36px rgba(0,0,0,.18);

}

.button-primary{

    background:var(--primary);

    color:#fff;

}

.button-primary:hover{

    background:#0B63D9;

}

.button-secondary{

    background:#fff;

    color:var(--primary);

    border:1px solid rgba(0,0,0,.10);

}

.button-secondary:hover{

    background:#f7f9fc;


}

/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding:100px 0 90px;

    background:
        linear-gradient(180deg,#F7FAFF 0%,#EEF5FF 100%);

}

.hero-content{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    gap:56px;
    margin-bottom:40px;
}

.hero-copy{
    max-width:620px;
}

.hero-logo{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:26px;

}

.hero-logo img{

    width:72px;

    height:72px;

    border-radius:18px;

    box-shadow:

        0 12px 28px rgba(0,0,0,.15);

}

.app-name{

    font-size:1.6rem;

    font-weight:700;

    color:var(--primary);

}

.eyebrow{

    display:inline-block;

    padding:8px 16px;

    margin-bottom:22px;

    border-radius:999px;

    background:#E8F1FF;

    color:var(--primary);

    font-size:.92rem;

    font-weight:600;

    letter-spacing:.04em;

    text-transform:uppercase;

}

.hero h1{

    font-size:clamp(2.6rem,5vw,4.4rem);

    line-height:1.05;

    margin-bottom:26px;

    letter-spacing:-0.03em;

}

.hero h1 span{

    display:block;

    color:var(--primary);

}

.hero-lead{

    font-size:1.18rem;

    line-height:1.8;

    max-width:560px;

    margin-bottom:40px;

    color:#4B5563;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:42px;

}

.hero-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.highlight{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 18px;

    border-radius:14px;

    background:#FFFFFF;

    box-shadow:

        0 8px 24px rgba(0,0,0,.08);

    font-weight:600;

}

.hero-visual{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin:0 auto 28px;
    flex-wrap:wrap;
}
.hero-features{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}
.feature-pill{
    padding:10px 18px;
    border-radius:999px;
    background:#f5f7fb;
    border:1px solid #e4e8ef;
    font-size:.95rem;
    font-weight:600;
}

.hero-visual img{

    width:100%;

    max-width:560px;

    border-radius:24px;

    box-shadow:

        0 30px 70px rgba(0,0,0,.18);

}

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

@media(max-width:960px){

    .hero{

        padding:80px 0;

    }

    .hero-content{

        grid-template-columns:1fr;

        gap:55px;

        text-align:center;

    }

    .hero-copy{

        max-width:none;

        margin:auto;

    }

    .hero-logo{

        justify-content:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-highlights{

        justify-content:center;

    }

    .hero-lead{

        margin-left:auto;

        margin-right:auto;

    }

}

@media(max-width:640px){

    .hero{

        padding:70px 0;

    }

    .hero-logo img{

        width:60px;

        height:60px;

    }

    .app-name{

        font-size:1.35rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons .button{

        width:100%;

        max-width:320px;

    }

}



/* ==========================================================
   HERO IMAGE
   ========================================================== */

.hero-image{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:20px;

}

.hero-image img{

    width:min(900px,82vw);

    border-radius:28px;

    box-shadow:
        0 30px 60px rgba(0,0,0,.18);

}


/* ==========================================================
   TRUST BADGES
   ========================================================== */

.hero-highlights{

    margin-top:42px;

    display:grid;

    grid-template-columns:repeat(3,minmax(0,220px));

    justify-content:center;

    gap:18px;

}

.hero-highlights div{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:18px;

    padding:16px 14px;

    font-size:.95rem;

    font-weight:600;

    color:var(--text);

    box-shadow:
        0 8px 20px rgba(0,0,0,.05);

}


/* ==========================================================
   FEATURE GRID
   ========================================================== */

.feature-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.feature-card h3{

    margin-bottom:16px;

}

.feature-card p{

    margin:0;

}


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

@media (max-width:900px){

    .hero{

        padding:40px 0 64px;

    }

    .hero-logo img{

        width:88px;

        height:88px;

    }

    .hero-lead{

        font-size:1.12rem;

    }

    .hero-highlights{

        grid-template-columns:1fr;

        gap:14px;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:600px){

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .button{

        width:100%;

        max-width:320px;

    }

    .hero-image{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:48px;

}

}

/* ==========================================================
   SCREENSHOT SECTIONS
========================================================== */

.screenshot-section{
    align-items:center;
    gap:64px;
    margin:32px 0;
}

.screenshot-copy h2{

    margin-bottom:24px;

}

.screenshot-copy p{

    margin-bottom:20px;

}

/* ==========================================================
   PHONE MOCKUP
========================================================== */

.screenshot-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.screenshot-image img{
    width:100%;
    max-width:320px;
    height:auto;
    border-radius:32px;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
    transition:transform .35s ease, box-shadow .35s ease;
}

.screenshot-image img:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 56px rgba(0,0,0,.22);
}
.screenshot-image{

    position:relative;

}
.screenshot-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:40px;
    justify-items:center;
    align-items:start;
    margin-top:48px;
}

.screenshot-image::before{

    content:"";

    position:absolute;

    top:12px;

    left:50%;

    transform:translateX(-50%);

    width:88px;

    height:18px;

    background:#000;

    border-radius:18px;

    z-index:20;

}

.screenshot-image img:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.18),
        0 40px 100px rgba(0,0,0,.25);

}

.feature-list{

    list-style:none;

    margin-top:28px;

}

.feature-list li{

    margin-bottom:14px;

    color:var(--text);

    font-weight:500;

}

@media (max-width:900px){

    .screenshot-section{

        grid-template-columns:1fr;

        gap:40px;

    }

}

/* ==========================================================
   ALTERNATING SECTIONS
========================================================== */

.section-alt{

    background:#FCFCF8;

}

.reverse .screenshot-image{

    order:1;

}

.reverse .screenshot-copy{

    order:2;

}

@media (max-width:900px){

    .reverse .screenshot-image,

    .reverse .screenshot-copy{

        order:initial;

    }

}
/* ==========================================================
   FOUR CARD GRID - CHANGED BECAUSE IT MESSED UP THREE CARD GRID
========================================================== */

/* =========================================
   THREE FEATURE CARDS
========================================= */

.feature-grid-3{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,320px));

    justify-content:center;

    gap:30px;

}

/* =========================================
   FOUR FEATURE CARDS
========================================= */

.feature-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,260px));

    justify-content:center;

    gap:28px;

}

@media (max-width:1000px){

    .feature-grid,
    .feature-grid-3{

        grid-template-columns:repeat(2,minmax(0,320px));

        justify-content:center;

    }

}

@media (max-width:650px){

    .feature-grid,
    .feature-grid-3{

        grid-template-columns:1fr;

    }

}

@media (max-width:1000px){

    .feature-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:650px){

    .feature-grid{

        grid-template-columns:1fr;

    }

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

.site-footer{

    padding:72px 0;

    background:#F2F0EA;

    border-top:1px solid var(--border);

    text-align:center;

}

.footer-brand{

    margin-bottom:36px;

}

.footer-icon{

    width:72px;

    height:72px;

    margin:0 auto 18px;

    border-radius:18px;

}

.footer-brand h3{

    margin-bottom:10px;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:24px;

    margin-bottom:28px;

}

.footer-links a{

    color:var(--muted);

    transition:.2s;

}

.footer-links a:hover{

    color:var(--text);

}

.footer-language{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-bottom:20px;

    color:var(--muted);

}

.footer-language a:hover{

    color:var(--text);

}

.footer-version{

    margin-bottom:10px;

    color:var(--muted);

    font-size:.9rem;

}

.footer-copyright{

    font-size:.9rem;

    color:var(--muted);

}

@media (max-width:700px){

    .footer-links{

        flex-direction:column;

        gap:16px;

    }

}
/* ==========================================================
   SVG FEATURE ICONS
========================================================== */

.feature-icon{

    width:64px;
    height:64px;

    margin:0 auto 22px;

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

    background:#eef6ff;

    border-radius:18px;

    color:#0b6efd;

    box-shadow:
        0 10px 24px rgba(0,0,0,.08);

}

.feature-icon svg{

    width:34px;
    height:34px;

    stroke:currentColor;
    stroke-width:2;

    fill:none;

    stroke-linecap:round;
    stroke-linejoin:round;

}
@keyframes phoneFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

.screenshot-image img{

    animation:phoneFloat 6s ease-in-out infinite;

}
.eyebrow{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 16px;

    border-radius:999px;

    background:#eef6ff;

    color:#0b6efd;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.06em;

    text-transform:uppercase;

}

.hero h1{

    font-size:clamp(2.6rem,5vw,4.4rem);

    line-height:1.05;

    letter-spacing:-0.03em;

    margin-bottom:22px;

}
/* ==========================================================
   REVIEWS
========================================================== */

.review-card{

    text-align:center;

}

.review-stars{

    font-size:1.6rem;

    color:#FFC83D;

    letter-spacing:3px;

    margin-bottom:20px;

}

.review-card h3{

    margin-bottom:14px;

}
/* ==========================================================
   REVIEW PANEL
========================================================== */

.review-panel{

    max-width:760px;

    margin:50px auto 0;

    padding:50px;

    text-align:center;

    background:#ffffff;

    border-radius:28px;

    border:1px solid var(--border);

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

}

.review-stars{

    font-size:2rem;

    color:#FFC83D;

    letter-spacing:6px;

    margin-bottom:24px;

}

.review-panel h3{

    margin-bottom:18px;

}

.review-panel p{

    max-width:620px;

    margin:0 auto 18px;

}

@media (max-width:700px){

    .review-panel{

        padding:36px 28px;

    }
```css
/* ==========================================================
   GLOBAL WEBSITE POLISH
========================================================== */

/* Smooth scrolling */

html{

    scroll-behavior:smooth;

}

/* Slightly larger reading line-height */

body{

    line-height:1.75;

}

/* Better section spacing */

.section{

    padding:90px 0;

}

@media(max-width:768px){

    .section{

        padding:72px 0;

    }

}

/* Headings */

h1,
h2,
h3{

    letter-spacing:-0.02em;

}

.section-heading{

    max-width:760px;

    margin:0 auto 56px;

}

.section-heading h2{

    margin-bottom:18px;

}

.section-heading p{

    font-size:1.08rem;

}

/* Better horizontal rule */

.section-divider{

    margin:56px 0;

    border:0;

    border-top:1px solid rgba(0,0,0,.08);

}


/* ==========================================================
   FADE IN
========================================================== */

.fade-in{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-in.visible{

    opacity:1;

    transform:none;

}


}
/* ==========================================================
   SPLIT LAYOUTS
========================================================== */

.split-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.split-layout.reverse{

    direction:rtl;

}

.split-layout.reverse>*{

    direction:ltr;

}

.split-copy{

    max-width:560px;

}

.split-image{

    display:flex;

    justify-content:center;

}

.split-image img{

    width:100%;

    max-width:360px;

}

@media(max-width:900px){

    .split-layout{

        grid-template-columns:1fr;

        gap:50px;

    }

    .split-layout.reverse{

        direction:ltr;

    }

    .split-copy{

        max-width:none;

        text-align:center;

    }

}
/* ==========================================================
   FEATURE CARDS
========================================================== */

.feature-card{

    padding:34px;

    background:#fff;

    border-radius:22px;

    text-align:center;

    box-shadow:0 12px 28px rgba(0,0,0,.08);

    transition:.3s;

}

.feature-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(0,0,0,.14);

}

.feature-icon{

    font-size:2rem;

    margin-bottom:18px;

}
/* ==========================================================
   TARIFF CARDS
========================================================== */

.tariff-card{

    padding:34px;

    border-radius:22px;

    text-align:center;

    color:#fff;

}

.tariff-low{

    background:#1AAE63;

}

.tariff-medium{

    background:#F0A202;

}

.tariff-high{

    background:#D7263D;

}

.tariff-badge{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

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

    font-weight:700;

    letter-spacing:.05em;

}
/* ==========================================================
   FEATURE LIST
========================================================== */

.feature-list{

    list-style:none;

    padding:0;

    margin-top:28px;

}

.feature-list li{

    margin-bottom:16px;

    font-size:1.05rem;

}
/* ==========================================================
   MINI CARDS
========================================================== */

.mini-card{

    padding:24px;

    border-radius:18px;

    background:#fff;

    box-shadow:0 10px 24px rgba(0,0,0,.08);

}
/* ==========================================================
   PHONE GALLERY
========================================================== */

.phone-gallery{

    display:flex;

    justify-content:center;

    gap:36px;

    flex-wrap:wrap;

}

.phone{
    width:220px;
    padding:12px;
    border-radius:36px;
    background:#111;
    box-shadow:0 18px 42px rgba(0,0,0,.22);
    transition:transform .3s ease;
}

.phone:hover{
    transform:translateY(-6px);
}
.phone img{
    width:100%;
    display:block;
    border-radius:26px;
}

/* ==========================================================
   REVIEWS
========================================================== */

.review-card{

    padding:34px;

    background:#fff;

    border-radius:22px;

    box-shadow:0 10px 26px rgba(0,0,0,.08);

}

.review-stars{

    color:#F7B500;

    font-size:1.2rem;

    margin-bottom:18px;

}

/* ==========================================================
   DOWNLOAD
========================================================== */

.download-card{

    padding:70px;

    border-radius:28px;

    background:linear-gradient(180deg,#EEF5FF,#F8FBFF);

    text-align:center;

}

.download-icon{

    width:84px;

    margin-bottom:24px;

}

.download-features{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-top:36px;

    font-weight:600;

}
/* ==========================================================
   FAQ
========================================================== */

.faq-list{

    max-width:900px;

    margin:auto;

}

.faq-list details{

    margin-bottom:18px;

    padding:22px 26px;

    border-radius:18px;

    background:#fff;

    box-shadow:0 8px 22px rgba(0,0,0,.06);

}

.faq-list summary{

    cursor:pointer;

    font-weight:700;

}

.faq-list p{

    margin-top:16px;

}
/* ==========================================================
   UTILITIES
========================================================== */

.section-alt{

    background:#F8FAFC;

}

.card-grid.two-col{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.card-grid.three-col{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

@media(max-width:900px){

    .card-grid.two-col,
    .card-grid.three-col{

        grid-template-columns:1fr;

    }
.download-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-bottom:24px;
    text-align:left;
}

.download-icon{
    width:72px;
    height:72px;
    flex-shrink:0;
}

/* ==========================================================
   ANKAZ LANDING PAGE
========================================================== */

.ankaz-hero{
    min-height:100vh;
    display:flex;
    align-items:center;
}

.company-logo{
    display:flex;
    align-items:center;
    gap:1.25rem;
    margin-bottom:2rem;
}

.company-logo-box{
    width:110px;
    height:110px;
    border-radius:24px;
    background:#0D6EFD;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    box-shadow:0 16px 40px rgba(0,0,0,.15);
    flex-shrink:0;
}

.company-logo-word{
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.12em;
    line-height:1.15;
}

.company-name{
    font-size:2rem;
    font-weight:800;
    color:#1f2937;
    line-height:1.1;
}

.hero-subtitle{
    font-size:1.15rem;
    color:#64748b;
    max-width:42rem;
    margin-top:1rem;
}

@media (max-width:768px){

.company-logo{
    flex-direction:column;
    text-align:center;
}

.company-name{
    font-size:1.6rem;
}

.company-logo-box{
    width:96px;
    height:96px;
}

/* ==========================================================
   ANKAZ SOLUTIONS HOMEPAGE
========================================================== */

.ankaz-home-hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#ffffff;

}

.company-logo-centre{

    display:flex;

    justify-content:center;

    margin-bottom:2rem;

}

.hero-tag{

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.85rem;

    font-weight:700;

    color:#64748b;

    margin-bottom:1rem;

}

.hero-title{

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:1;

    font-weight:800;

    margin-bottom:2rem;

    color:#111827;

}

.hero-title span{

    display:block;

    color:#0D6EFD;

}

.hero-intro{

    max-width:760px;

    margin:0 auto;

    font-size:1.3rem;

    line-height:1.8;

    color:#475569;

}

.hero-divider{

    width:90px;

    height:2px;

    background:#d1d5db;

    margin:4rem auto;

}

.hero-next{

    font-size:.95rem;

    font-weight:600;

    color:#64748b;

    letter-spacing:.08em;

    text-transform:uppercase;

}

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

.footer-logo{

    width:70px;
    height:70px;
    margin:0 auto 1rem;

}

.footer-divider{

    height:1px;
    background:#e5e7eb;
    margin:2.5rem 0;

}

.footer-bottom{

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    color:#6b7280;
    font-size:.9rem;

}

@media (max-width:768px){

.footer-bottom{

    justify-content:center;
    text-align:center;

}

}

featured-product
product-grid
product-copy
product-visual
product-icon
product-badge
product-buttons
section
section-alt
site-container
section-heading
eyebrow
card-grid
three-col
feature-card
product-icon

/* ==========================================================
   ANKAZ SOLUTIONS WEBSITE
========================================================== */

.ankaz-home{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#ffffff;
}

.ankaz-logo{
    display:flex;
    justify-content:center;
    margin-bottom:2.5rem;
}

.ankaz-logo-box{
    width:140px;
    height:140px;
    background:#ffffff;
    border:2px solid #d1d5db;
    border-radius:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.ankaz-logo-line{
    font-size:1rem;
    font-weight:800;
    letter-spacing:.18em;
    color:#111827;
    line-height:1.2;
}

.hero-tag{
    margin-bottom:1rem;
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:.85rem;
    font-weight:700;
    color:#64748b;
}

.hero-en{
    font-size:clamp(3rem,6vw,5rem);
    line-height:1.05;
    font-weight:800;
    color:#111827;
    margin-bottom:1rem;
}

.hero-es{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.15;
    font-weight:600;
    color:#64748b;
    margin-bottom:2rem;
}

.intro-en{
    max-width:760px;
    margin:0 auto 1rem;
    font-size:1.25rem;
    line-height:1.8;
    color:#374151;
}

.intro-es{
    max-width:760px;
    margin:0 auto;
    font-size:1.1rem;
    line-height:1.8;
    color:#6b7280;
}

.hero-scroll{
    margin-top:5rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:.9rem;
    color:#94a3b8;
}


/* ==========================================================
   FEATURED APPLICATION
========================================================== */

.featured-product{
    background:#f8fafc;
}

.product-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:4rem;
    align-items:center;
}

.product-copy h2{
    margin-bottom:1rem;
}

.product-copy p{
    margin-bottom:1.5rem;
}

.product-icon-large{
    width:24px;
    height:24px;
    border-radius:6px;
    margin-bottom:.75rem;
    box-shadow:0 2px 6px rgba(0,0,0,.10);
}

.product-buttons{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:2rem;
}

.product-preview{
    display:flex;
    justify-content:center;
}

@media (max-width:900px){

.product-grid{
    grid-template-columns:1fr;
    gap:3rem;
}

.product-copy{
    text-align:center;
}

.product-buttons{
    justify-content:center;
}

/* ==========================================================
   WHY ANKAZ
========================================================== */

.company-values{
    background:#ffffff;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
    margin-top:3rem;
}

.value-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:2rem;
    transition:.25s ease;
}

.value-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.value-card h3{
    margin-bottom:1rem;
    color:#111827;
}

.value-card p{
    color:#64748b;
    line-height:1.8;
}

.company-story{
    margin-top:5rem;
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.company-story p{
    margin-bottom:1.5rem;
}

@media (max-width:900px){

.values-grid{
    grid-template-columns:1fr;
}

/* ==========================================================
   PRODUCTS
========================================================== */
/* ==========================================================
   PRODUCTS
========================================================== */

.products-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

    margin-top:3rem;

}

.product-card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:24px;

    padding:2rem;

    text-align:center;

    transition:.25s ease;

}

.product-card:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.product-card img{

    width:52px;

    height:52px;

    border-radius:14px;

    margin-bottom:1rem;

}

.product-status{

    display:inline-block;

    margin-top:1rem;

    padding:.35rem .9rem;

    border-radius:999px;

    background:#eef2ff;

    color:#0D6EFD;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.product-card.future{

    opacity:.75;

}

@media (max-width:900px){

.products-grid{

    grid-template-columns:1fr;

}



/* ==========================================================
   CONTACT + FOOTER
========================================================== */

.contact-panel{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}

.contact-panel p{

    margin-bottom:1.5rem;

}

.contact-email{

    display:inline-block;

    margin-top:2rem;

    font-size:1.15rem;

    font-weight:700;

    color:#0D6EFD;

    text-decoration:none;

}

.contact-email:hover{

    text-decoration:underline;

}

.site-footer{

    border-top:1px solid #e5e7eb;

    padding:3rem 0;

    background:#ffffff;

}

.footer-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

}

.footer-nav{

    display:flex;

    gap:2rem;

    flex-wrap:wrap;

}

.footer-nav a{

    color:#64748b;

    text-decoration:none;

}

.footer-nav a:hover{

    color:#0D6EFD;

}

.footer-copy{

    color:#94a3b8;

    font-size:.9rem;

}

@media (max-width:768px){

.footer-inner{

    flex-direction:column;

    text-align:center;

}

.footer-nav{

    justify-content:center;

}

/* ==========================================================
   LANGUAGE CARDS
========================================================== */

.language-cards{

    display:flex;

    justify-content:center;

    gap:2rem;

    margin-top:2.5rem;

    flex-wrap:wrap;

}

.language-card{

    width:260px;

    min-height:170px;

    background:#ffffff;

    border:1px solid #dbe4ee;

    border-radius:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    text-decoration:none;

    padding:2rem;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    transition:.25s ease;

}

.language-card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.language-flag{

    font-size:2rem;

    margin-bottom:.75rem;

}

.language-title{

    font-size:1.15rem;

    font-weight:700;

    color:#111827;

    margin-bottom:.35rem;

}

.language-subtitle{

    font-size:.95rem;

    color:#64748b;

}
/* ==========================================================
   FORCE LANGUAGE CARDS
========================================================== */

.language-cards{

    display:flex !important;

    justify-content:center !important;

    gap:2rem !important;

    flex-wrap:wrap !important;

    margin-top:2.5rem !important;

}

.language-card{

    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;

    align-items:center !important;

    width:260px !important;

    min-height:170px !important;

    padding:2rem !important;

    text-align:center !important;

    background:#ffffff !important;

    border:1px solid #dbe4ee !important;

    border-radius:20px !important;

    text-decoration:none !important;

    box-shadow:0 8px 24px rgba(0,0,0,.08) !important;

    transition:.25s ease;

}

.language-card:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 36px rgba(0,0,0,.12);

}

.language-flag{

    font-size:2rem !important;

    margin-bottom:.8rem !important;

}

.language-title{

    font-size:1.15rem !important;

    font-weight:700 !important;

    color:#111827 !important;

}

.language-subtitle{

    font-size:.95rem !important;

    color:#64748b !important;

}

@media (max-width:768px){

    .language-cards{

        flex-direction:column !important;

        align-items:center !important;

    }

    .language-card{

        width:100% !important;

        max-width:340px !important;

    }
.language-card{
    background:red !important;
}
/*==========================================================
LANGUAGE BUTTONS
==========================================================*/

.language-buttons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:wrap;

    margin-top:2.5rem;

}

.language-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:.9rem;

    min-width:280px;

    padding:1rem 1.8rem;

    border-radius:14px;

    background:#0D6EFD;

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    font-size:1.05rem;

    transition:.25s ease;

    box-shadow:0 10px 25px rgba(13,110,253,.25);

}

.language-button:hover{

    transform:translateY(-3px);

    background:#0b5ed7;

    box-shadow:0 16px 32px rgba(13,110,253,.35);

}

.language-button span{

    display:block;

}

.language-button .flag{

    font-size:1.6rem;

}

@media (max-width:768px){

    .language-buttons{

        flex-direction:column;

        align-items:center;

    }

    .language-button{

        width:100%;

        max-width:360px;

    }

}