/* Critical CSS - PhysioStarter Theme - Above the fold styles */

/* ============ RESET & VARIABLES ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--teal-50:#f0fdfa;--teal-100:#ccfbf1;--teal-200:#99f6e4;--teal-300:#5eead4;--teal-400:#2dd4bf;--teal-500:#14b8a6;--teal-600:#0d9488;--teal-700:#0f766e;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827}

/* ============ FONT ============ */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============ BASE ============ */
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:linear-gradient(180deg,#f0fdfa 0%,#fff 50%,#f9fafb 100%);color:var(--gray-900);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.menu-open{overflow:hidden}
.skip-link{position:absolute;left:-9999px;z-index:999;padding:1em;background:#000;color:#fff}
.skip-link:focus{left:50%;transform:translateX(-50%)}

/* ============ NAVIGATION ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.04);transition:transform .3s ease,box-shadow .3s ease}
.nav--scrolled{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.nav--hidden{transform:translateY(-100%)}
.nav__container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav__logo{display:flex;align-items:center;gap:.625rem;text-decoration:none}
.nav__logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--teal-500),var(--teal-600));border-radius:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(13,148,136,.25)}
.nav__logo-icon svg{width:22px;height:22px;color:#fff}
.nav__logo-text{font-size:1.125rem;font-weight:700;color:var(--gray-900);letter-spacing:-.02em}
.nav__links{display:flex;align-items:center;gap:2rem}
.nav__links a{color:var(--gray-500);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .2s;padding:.5rem 0}
.nav__links a:hover,.nav__links a.active{color:var(--teal-600)}
.nav__right{display:flex;align-items:center;gap:1rem}
.nav__cta{padding:.625rem 1.25rem;background:var(--gray-900);color:#fff;border-radius:9px;font-size:.8rem;font-weight:600;text-decoration:none;transition:all .2s}
.nav__cta:hover{background:var(--gray-800);transform:translateY(-1px)}
.nav__gift-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:linear-gradient(135deg,#a855f7,#d946ef);color:#fff;border-radius:8px;font-size:.75rem;font-weight:600;text-decoration:none;transition:all .3s;box-shadow:0 2px 10px rgba(168,85,247,.25)}
.nav__gift-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(168,85,247,.35)}
.nav__gift-btn svg{flex-shrink:0}
.nav__toggle{display:none;background:0 0;border:0;cursor:pointer;padding:.5rem;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border-radius:10px;transition:background .2s}
.nav__toggle:hover{background:var(--gray-100)}
.nav__toggle-line{width:22px;height:2px;background:var(--gray-700);border-radius:2px;transition:all .3s ease;margin:0 auto}
.nav__toggle--active .nav__toggle-line:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav__toggle--active .nav__toggle-line:nth-child(2){opacity:0}
.nav__toggle--active .nav__toggle-line:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.nav__overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:98;opacity:0;visibility:hidden;transition:all .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.nav__overlay--visible{opacity:1;visibility:visible}
.nav__mobile-extras{display:none}

/* ============ LANGUAGE SWITCHER ============ */
.lang-switcher{display:flex;align-items:center;gap:.375rem;font-size:.8rem}
.lang-switcher__btn{color:var(--gray-400);text-decoration:none;font-weight:500;padding:.25rem .5rem;border-radius:6px;transition:all .2s}
.lang-switcher__btn:hover{color:var(--gray-700);background:var(--gray-100)}
.lang-switcher__btn--active{color:var(--teal-600);font-weight:600}
.lang-switcher__divider{color:var(--gray-300)}

/* ============ HERO ============ */
.hero{padding:7rem 2rem 3rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(20,184,166,.15),transparent),radial-gradient(ellipse 60% 40% at 100% 0%,rgba(6,182,212,.1),transparent);pointer-events:none}
.hero__container{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative}
.hero__content{max-width:460px}
.hero__badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#fff;border:1px solid var(--teal-200);border-radius:50px;color:var(--teal-700);font-size:.8rem;font-weight:600;margin-bottom:1.25rem;box-shadow:0 2px 8px rgba(13,148,136,.08)}
.hero__badge svg{width:14px;height:14px;color:var(--teal-500)}
.hero__title{font-size:2.5rem;font-weight:800;color:var(--gray-900);line-height:1.12;letter-spacing:-.03em;margin-bottom:1rem}
.hero__title span{color:var(--teal-600)}
.hero__subtitle{font-size:.95rem;color:var(--gray-500);line-height:1.7;margin-bottom:1.75rem}
.hero__buttons{display:flex;gap:.75rem;flex-wrap:wrap}
.btn-hero{padding:.8rem 1.5rem;border-radius:11px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-hero--primary{background:var(--teal-600);color:#fff;box-shadow:0 4px 14px rgba(13,148,136,.35)}
.btn-hero--primary:hover{background:var(--teal-500);transform:translateY(-2px);box-shadow:0 6px 20px rgba(13,148,136,.4)}
.btn-hero--secondary{background:#fff;color:var(--gray-700);border:1px solid var(--gray-200);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.btn-hero--secondary:hover{border-color:var(--gray-300);background:var(--gray-50)}

/* ============ TABLET ============ */
@media(max-width:1024px){
.hero__container{grid-template-columns:1fr;text-align:center}
.hero__content{max-width:520px;margin:0 auto}
.hero__buttons{justify-content:center}
.hero-testimonials{display:none}
.hero__title{font-size:2.25rem}
.nav__links{gap:1.5rem}
.nav__links a{font-size:.8rem}
}

/* ============ MOBILE ============ */
@media(max-width:768px){
/* Navigation */
.nav{padding:.75rem 1rem}
.nav__container{position:relative}
.nav__logo-icon{width:36px;height:36px;border-radius:10px}
.nav__logo-icon svg{width:20px;height:20px}
.nav__logo-text{font-size:1rem}
.nav__right{display:none}
.nav__toggle{display:flex}
.nav__links{
    position:fixed;
    top:0;
    right:0;
    width:280px;
    height:100vh;
    height:100dvh;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:5rem 1.5rem 2rem;
    gap:0;
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:99;
    box-shadow:-10px 0 40px rgba(0,0,0,.15);
    overflow-y:auto
}
.nav__links--open{transform:translateX(0)}
.nav__links a{
    font-size:1rem;
    font-weight:500;
    color:var(--gray-700);
    padding:1rem 0;
    border-bottom:1px solid var(--gray-100);
    display:block
}
.nav__links a:last-of-type{border-bottom:none}
.nav__links a:hover,.nav__links a.active{color:var(--teal-600);background:transparent}
.nav__mobile-extras{
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-top:auto;
    padding-top:1.5rem;
    border-top:1px solid var(--gray-100)
}
.nav__gift-btn--mobile{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:.875rem 1rem;
    background:linear-gradient(135deg,#a855f7,#d946ef);
    color:#fff;
    border-radius:12px;
    font-size:.9rem;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 4px 15px rgba(168,85,247,.3)
}
.lang-switcher--mobile{
    display:flex;
    gap:.5rem;
    justify-content:center
}
.lang-switcher--mobile .lang-switcher__btn{
    flex:1;
    text-align:center;
    padding:.75rem;
    border:1px solid var(--gray-200);
    border-radius:10px;
    font-size:.875rem
}
.lang-switcher--mobile .lang-switcher__btn--active{
    background:var(--teal-50);
    border-color:var(--teal-300);
    color:var(--teal-700)
}
.nav__mobile-cta{
    display:block;
    padding:1rem;
    background:var(--teal-600);
    color:#fff;
    text-align:center;
    border-radius:12px;
    font-weight:600;
    font-size:.95rem;
    text-decoration:none
}

/* Hero */
.hero{padding:5.5rem 1.25rem 2.5rem}
.hero__content{max-width:100%}
.hero__badge{font-size:.75rem;padding:.4rem .875rem;margin-bottom:1rem}
.hero__badge svg{width:12px;height:12px}
.hero__title{font-size:1.75rem;margin-bottom:.875rem;line-height:1.2}
.hero__subtitle{font-size:.9rem;margin-bottom:1.5rem;line-height:1.65}
.hero__buttons{flex-direction:column;gap:.625rem}
.btn-hero{width:100%;padding:.875rem 1.5rem;font-size:.9rem;border-radius:12px}
}

/* ============ SMALL MOBILE ============ */
@media(max-width:380px){
.hero__title{font-size:1.5rem}
.hero__subtitle{font-size:.85rem}
.nav__logo-text{font-size:.9rem}
}