body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background: #fff;
    color: #111;
    -webkit-font-smoothing: antialiased;
}

.hero-apple {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 4rem 1rem 2rem 1rem;
    background: #fff;
    text-align: center;
}
.hero-content {
    margin-bottom: 2.5rem;
}
.apple-title {
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0 0 1.2rem 0;
    color: #111;
}
.apple-subtitle {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 2.2rem;
    line-height: 1.3;
}
.appstore-btn img {
    width: 180px;
    transition: transform 0.2s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border-radius: 0.7rem;
}
.appstore-btn img:hover {
    transform: scale(1.06);
}
.hero-mockup {
    display: flex;
    justify-content: center;
}
.mockup-apple {
    width: 340px;
    max-width: 90vw;
    border-radius: 2rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.13);
}

.apple-features {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin: 0 auto 3rem auto;
    max-width: 1100px;
    padding: 2.5rem 1rem 0 1rem;
}
.feature {
    background: #fafbfc;
    border-radius: 1.2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    padding: 2.2rem 1.5rem 1.5rem 1.5rem;
    text-align: center;
    width: 220px;
    margin-bottom: 2rem;
    transition: box-shadow 0.2s;
}
.feature:hover {
    box-shadow: 0 6px 24px rgba(30,136,229,0.10);
}
.feature-icon {
    width: 48px;
    margin-bottom: 1.1rem;
}
.feature h3 {
    font-size: 1.25rem;
    margin: 0.5rem 0 0.7rem 0;
    color: #222;
    font-weight: 500;
}
.feature p {
    color: #555;
    font-size: 1.05rem;
    margin: 0;
}

.apple-footer {
    text-align: center;
    padding: 2rem 0 1.5rem 0;
    background: #fff;
    color: #aaa;
    font-size: 1rem;
    border-top: 1px solid #eee;
    margin-top: 2rem;
}

@media (max-width: 900px) {
    .apple-features {
        gap: 1.5rem;
    }
    .feature {
        width: 45vw;
        min-width: 180px;
    }
}
@media (max-width: 700px) {
    .hero-apple {
        padding: 2.5rem 0.5rem 1.5rem 0.5rem;
    }
    .mockup-apple {
        width: 90vw;
    }
    .apple-features {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .feature {
        width: 90vw;
        min-width: 0;
    }
}

/* New full styles for GasEta landing (mobile-first) */
:root{
    /* Brand palette extracted from assets/iconGaseta512.png */
    --brand-start: #FF7D37; /* gradient start */
    --brand-end:   #D14900; /* gradient end */
    --brand-gradient: linear-gradient(90deg, var(--brand-start), var(--brand-end));
    --brand-text: #0F172A; /* primary text color in logo */

    /* legacy-friendly aliases */
    --color-primary: var(--brand-start);
    --color-primary-2: var(--brand-end);
    --color-900: var(--brand-text);
    --color-700: #334155;
    --bg: #F8FAFC;
    --success: #22C55E;
}

*{box-sizing:border-box}

.container{max-width:1200px;margin:0 auto;padding:0 16px}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.user-is-tabbing .skip-link{position:static;width:auto;height:auto;margin:8px}

.site-header{position:sticky;top:0;z-index:120;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(15,23,42,0.05)}
.site-header::after{content:"";display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg, rgba(255,125,55,0), rgba(255,125,55,0.45) 16%, rgba(209,73,0,0.3) 84%, rgba(209,73,0,0));pointer-events:none}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px}
.brand-logo{border-radius:10px;width:40px;max-width:100%;max-height:40px;height:auto;display:block;object-fit:contain}
.brand-accent{color:var(--brand-start)}
.brand-name{font-weight:700;color:var(--brand-text);font-family:Inter, system-ui, -apple-system}

/* Modern header layout */
/* header layout touchstone: keeps brand + action row aligned */
.header-modern{display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-left{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand-inline{display:flex;align-items:center;gap:10px;text-decoration:none}
.header-right{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
/* allow the right-side CTAs to wrap on narrow viewports */
.header-links{display:flex;gap:12px;align-items:center;font-size:0.92rem;color:#64748b}
.link-muted{color:inherit;text-decoration:none;padding:4px 6px;border-radius:8px;transition:color 160ms ease,background 160ms ease}
.link-muted:hover{color:var(--brand-text);background:rgba(15,23,42,0.05)}
.link-support{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:600;text-decoration:none;background:rgba(255,125,55,0.15);color:var(--brand-text);border:1px solid rgba(255,125,55,0.35);transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease,background 160ms ease}
.link-support:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(255,125,55,0.22);background:rgba(255,125,55,0.22);border-color:rgba(255,125,55,0.48)}
.link-support:focus-visible{outline:3px solid rgba(255,125,55,0.4);outline-offset:3px}
.support-dot{width:6px;height:6px;border-radius:50%;background:var(--brand-gradient);display:block;box-shadow:0 0 0 2px rgba(255,125,55,0.25)}
.header-ctas{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.header-lang{display:flex;align-items:center}
.header-lang select{min-width:44px}
.btn-store img{display:block}
.header-lang select{border-radius:8px;padding:6px;background:#fff;border:1px solid #e6eef8}

/* make store badges responsive and avoid overflowing the header */
.store-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.store-badges img{height:auto;max-width:140px;width:clamp(88px,13vw,140px)}


/* Support page */
.support-page{background:linear-gradient(180deg, rgba(255,125,55,0.06), rgba(209,73,0,0));padding:72px 0 120px}
.support-section{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.support-section-header{text-align:center;display:flex;flex-direction:column;gap:12px}
.support-section-header h1{margin:0;font-size:2.8rem;color:var(--brand-text);letter-spacing:-0.02em}
.support-lead{font-size:1.12rem;line-height:1.6;color:var(--color-700);margin:0 auto;max-width:640px}
.support-lead a{color:var(--brand-text);font-weight:600}
.support-lead a:hover{text-decoration:underline}
.support-form{background:#fff;padding:32px 36px;border-radius:28px;box-shadow:0 24px 70px rgba(15,23,42,0.14);display:flex;flex-direction:column;gap:24px;border:1px solid rgba(15,23,42,0.06)}
.support-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.support-field{display:flex;flex-direction:column;gap:10px}
.support-field label{font-weight:600;color:var(--color-700);font-size:0.95rem}
.support-field input,.support-field select,.support-field textarea{border-radius:14px;border:1px solid rgba(15,23,42,0.1);padding:14px;font-size:1rem;font-family:inherit;background:rgba(248,250,252,0.7);transition:border-color 160ms ease,box-shadow 160ms ease}
.support-field input:focus,.support-field select:focus,.support-field textarea:focus{outline:none;border-color:rgba(255,125,55,0.55);box-shadow:0 0 0 4px rgba(255,125,55,0.2)}
.support-field textarea{min-height:220px;resize:vertical}
.support-field-full{grid-column:1 / -1}
.support-checkbox{display:flex;align-items:center;gap:8px;font-size:0.95rem;color:var(--color-700)}
.support-checkbox a{color:var(--brand-text);font-weight:600}
.support-form-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.support-form-hint{margin:0;color:#64748b;font-size:0.9rem}
.support-form .btn-primary{padding:12px 28px;font-size:1rem;border-radius:999px;box-shadow:0 10px 28px rgba(255,125,55,0.3)}

@media(max-width:820px){
    .support-section-header h1{font-size:2.3rem}
    .support-form{padding:28px}
    .support-form-grid{grid-template-columns:1fr}
}

@media(max-width:520px){
    .support-page{padding:56px 0 90px}
    .support-form{padding:24px 20px;border-radius:22px}
    .support-form-footer{flex-direction:column;align-items:flex-start}
    .support-form .btn-primary{width:100%;justify-content:center}
}

.hero{padding:36px 0 28px;background:linear-gradient(180deg, rgba(255,125,55,0.04), rgba(255,125,55,0.01));}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.hero-copy{max-width:640px}
.title{font-family:Inter, system-ui, -apple-system;font-size:2.4rem;margin:0;color:var(--brand-text);letter-spacing:-0.02em}
.tagline{color:var(--color-primary);font-weight:600;margin:8px 0}
.lead{color:var(--color-700);font-size:1.06rem;margin:12px 0 18px}
.hero-ctas{display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.btn-primary{background:var(--brand-gradient);color:#fff}
.btn-outline{background:transparent;border:1px solid #e6e9ef;color:var(--color-900);padding:10px 14px;border-radius:10px}
.btn-disabled{background:#eef2f6;color:#9aa3b2;border-radius:10px;padding:10px 14px;border:0}

.hero-media{display:flex;align-items:center;justify-content:center;position:relative}
.hero-pattern{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.6}
.mockup{position:relative;border-radius:32px;box-shadow:0 28px 80px rgba(16,24,40,0.16);max-width:420px;width:clamp(240px,70vw,420px);background:#fff;display:block;max-height:90vh;height:auto;object-fit:contain;border:12px solid rgba(255,255,255,0.95)}

/* layout adjustments for hero copy when mockup is large */
.hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero-copy{flex:1;max-width:640px;padding-right:24px}

.app-preview{padding:38px 0;background:linear-gradient(180deg, rgba(15,23,42,0.02), rgba(255,125,55,0.02));position:relative;overflow:hidden}
.app-preview::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top left, rgba(255,125,55,0.18), transparent 55%),radial-gradient(circle at bottom right, rgba(15,23,42,0.12), transparent 60%);opacity:0.7}
.section-header{position:relative;z-index:1;max-width:720px;margin:0 auto 32px;text-align:center;display:flex;flex-direction:column;gap:12px}
.section-eyebrow{display:inline-flex;align-self:center;padding:6px 14px;border-radius:999px;font-size:0.78rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--brand-start);background:rgba(255,125,55,0.14);border:1px solid rgba(255,125,55,0.25)}
.section-lead{margin:0;font-size:1.02rem;color:var(--color-700);line-height:1.55}
.preview-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:22px}
.preview-card{background:#fff;border-radius:28px;padding:26px 20px 24px;box-shadow:0 28px 70px rgba(15,23,42,0.08);display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;overflow:hidden}
.preview-card::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,125,55,0.05));z-index:0}
.preview-card>*{position:relative;z-index:1}
.device-frame{position:relative;border-radius:32px;padding:16px;background:linear-gradient(150deg, rgba(255,125,55,0.65), rgba(15,23,42,0.18));display:flex;align-items:center;justify-content:center;box-shadow:0 22px 48px rgba(15,23,42,0.18);max-width:320px;width:100%}
.device-frame::after{content:"";position:absolute;inset:8px;border-radius:26px;border:1px solid rgba(255,255,255,0.45);pointer-events:none;mix-blend-mode:screen;opacity:0.7}
.device-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:72px;height:12px;border-radius:12px;background:rgba(10,12,20,0.78);box-shadow:0 3px 8px rgba(0,0,0,0.25);pointer-events:none}
.device-screen{display:block;width:100%;border-radius:24px;box-shadow:0 12px 28px rgba(15,23,42,0.24);background:#000}
.preview-card figcaption{margin:0;text-align:center;color:var(--color-700);font-size:0.98rem;line-height:1.45}

@media(min-width:560px){
    .preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:760px){
    .hero-inner{flex-direction:row;align-items:center}
    .title{font-size:3.6rem}
    .lead{font-size:1.1rem}
    .mockup{max-width:420px;width:auto}
}

.kpi{padding:22px 0;background:var(--bg)}
.kpi-led{margin:0;text-align:center;color:var(--color-700)}
.kpi-stats{display:flex;gap:18px;justify-content:center;margin-top:12px}
.kpi-item{text-align:center}
.kpi-item strong{display:block;font-size:1.2rem;color:var(--color-900)}
.kpi-note{text-align:center;color:#9aa3b2;margin-top:8px;font-size:0.9rem}

.promo-highlight{position:relative;padding:56px 0;background:linear-gradient(135deg,#06121e 0%,#0f172a 52%,rgba(255,125,55,0.85) 100%);overflow:hidden;color:#f8fafc}
.promo-highlight::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,0.16),transparent 52%),radial-gradient(circle at 80% 40%,rgba(255,125,55,0.25),transparent 60%);opacity:0.8;pointer-events:none}
.promo-highlight-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:32px;align-items:center;text-align:center}
.promo-copy{display:flex;flex-direction:column;gap:14px;max-width:520px}
.promo-copy h2{margin:0;color:#fff;font-size:2.2rem;letter-spacing:-0.02em}
.promo-body{margin:0;font-size:1.05rem;line-height:1.6;color:#e2e8f0}
.promo-note{margin:0;font-size:0.92rem;color:rgba(226,232,240,0.85)}
.promo-art{width:100%;max-width:640px;display:flex;justify-content:center}
.promo-frame{position:relative;border-radius:34px;padding:18px;background:rgba(255,255,255,0.16);box-shadow:0 32px 90px rgba(6,16,31,0.55);backdrop-filter:blur(6px)}
.promo-frame::before{content:"";position:absolute;inset:12px;border-radius:26px;border:1px solid rgba(255,255,255,0.45);opacity:0.7;pointer-events:none}
.promo-frame img{display:block;width:100%;border-radius:24px;object-fit:cover;box-shadow:0 16px 60px rgba(10,20,32,0.45)}

.features{padding:26px 0}
.features-inner{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
.card{background:#fff;border-radius:12px;padding:18px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 6px 24px rgba(16,24,40,0.04)}
.card-icon{width:48px;height:48px}
.card h3{margin:0;color:var(--color-900);font-size:1.05rem}
.card p{margin:6px 0 0;color:var(--color-700)}

.how{padding:26px 0;background:linear-gradient(180deg, rgba(255,125,55,0.02), rgba(255,125,55,0.01))}
.how h2{margin-top:0;text-align:center;color:var(--color-900)}
.steps{display:flex;flex-direction:column;gap:18px;margin-top:12px}
.step{background:#fff;padding:16px;border-radius:12px;text-align:center;box-shadow:0 6px 20px rgba(16,24,40,0.04)}
.step img{max-width:220px;max-height:220px;width:auto;height:auto;margin:0 auto 10px;object-fit:contain}

/* Prevent the mockup from collapsing too small inside flex layout */
.hero-media .mockup{flex:0 0 auto;min-width:220px}
.step h4{margin:6px 0;color:var(--color-900)}
.step p{margin:0;color:var(--color-700)}

.usp{padding:28px 0}
.usp-inner{display:flex;flex-direction:column;gap:12px;align-items:center}
.usp-list{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(1,auto);gap:10px}
.usp-list li{display:flex;gap:10px;align-items:center;color:var(--color-700)}

.testimonials{padding:26px 0}
.testimonials h2{text-align:center;color:var(--color-900)}
.testimonials-track{margin-top:16px;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch;position:relative}
.testimonials-track::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(15,23,42,0.06)}
.testimonials-grid{display:flex;gap:16px;min-width:100%}
.testimonials-grid>.testimonial{flex:0 0 85vw;max-width:360px}
.testimonial{background:#fff;padding:16px;border-radius:12px;text-align:left;box-shadow:0 6px 20px rgba(16,24,40,0.04)}
.avatar{width:56px;height:56px;border-radius:999px;object-fit:cover}
.testimonial blockquote{margin:8px 0;color:var(--color-700)}
.testimonial figcaption{font-size:0.9rem;color:#9aa3b2}

/* rating stars inside testimonials */
.rating-stars{display:block;margin:8px 0 4px 0;width:120px;height:auto}
.testimonial .testimonial-title{display:block;margin-top:6px;margin-bottom:6px;font-weight:700}

.faq{padding:24px 0}
.accordion{display:flex;flex-direction:column;gap:8px}
.faq-item{background:#fff;border-radius:10px;overflow:hidden}
.faq-q{width:100%;text-align:left;padding:12px 16px;border:0;background:transparent;font-weight:600;cursor:pointer}
.faq-a{padding:12px 16px;color:var(--color-700);box-sizing:border-box;max-height:0;overflow:hidden;transition:max-height 280ms ease}

.cta-final{padding:32px 0;background:linear-gradient(180deg, rgba(255,125,55,0.03), rgba(255,125,55,0.01));text-align:center}
.cta-row{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:12px}

.site-footer{padding:22px 0;background:#111827;color:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footer-links a{color:#cbd5e1;margin-right:12px;text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.social a{color:#cbd5e1;margin-left:8px}
.copyright{color:#94a3b8;margin-top:10px;text-align:center;width:100%}

/* Desktop */
@media(min-width:760px){
    .hero-inner{flex-direction:row;align-items:center;justify-content:space-between}
    .title{font-size:3.4rem}
    .features-inner{grid-template-columns:repeat(2,1fr)}
    .steps{flex-direction:row}
    .usp-list{grid-template-columns:repeat(2,auto)}
    .testimonials-track{overflow:visible;padding-bottom:0}
    .testimonials-track::after{display:none}
    .testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
    .testimonials-grid>.testimonial{flex:auto;max-width:none}
    .preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .promo-highlight-inner{flex-direction:row;align-items:center;text-align:left}
    .promo-copy{align-items:flex-start}
    .promo-art{max-width:540px}
}

@media(min-width:1100px){
    .features-inner{grid-template-columns:repeat(4,1fr)}
    .hero-inner{gap:48px}
}

/* Small screen header behavior: stack brand and action row neatly */
@media (max-width: 640px) {
    .header-inner{flex-direction:column;align-items:stretch;gap:12px}
    .header-left{width:100%;display:flex;align-items:center;justify-content:space-between}
    .brand-inline{gap:8px}
    .header-right{width:100%;flex-direction:column;align-items:flex-start;gap:12px;padding:0;border-radius:0;background:transparent;box-shadow:none}
    .header-links{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px;margin:0}
    .header-links a{flex:0 0 auto;text-align:center;padding:6px 12px;border-radius:999px;border:1px solid rgba(15,23,42,0.12);background:rgba(255,255,255,0.9);white-space:nowrap}
    .header-ctas{width:100%;justify-content:space-between;gap:10px}
    .header-ctas .store-badges{display:none}
    .header-lang{justify-content:flex-end;width:100%}
    .header-lang select{width:100%;max-width:160px}
}

@media (max-width: 480px) {
    .store-badges{flex-direction:column;align-items:center;width:100%;gap:12px}
    .store-badges img{width:clamp(140px,60vw,200px);max-width:200px}
    .header-ctas{gap:12px}
}

/* make language select more compact on very small devices */
@media (max-width: 360px){
    .header-lang select{padding:4px 6px;font-size:0.9rem;min-width:40px}
}