:root{--text-xs:clamp(0.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);--text-3xl:clamp(2.5rem,1rem + 4vw,5rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--color-bg:#f0f6ff;--color-surface:#f7faff;--color-surface-2:#ffffff;--color-surface-offset:#e4eefd;--color-surface-deep:#d2e5fb;--color-text:#1a2840;--color-text-muted:#4a6080;--color-text-faint:#8aaac8;--color-text-inverse:#ffffff;--color-primary:#4a90d9;--color-primary-light:#7fb3e8;--color-primary-deep:#2563b0;--color-accent:#a8d4f5;--color-accent-soft:#ddeefb;--color-sky-1:#c7e2f9;--color-sky-2:#b3d5f5;--color-sky-3:#e8f4fd;--color-divider:#cce0f5;--color-border:#b8d4ee;--grad-hero:linear-gradient(135deg,#e8f4fd 0%,#d2e8fb 40%,#c0d8f7 100%);--grad-card:linear-gradient(145deg,#ffffff 0%,#f0f8ff 100%);--grad-dark:linear-gradient(135deg,#1a3055 0%,#1e3a68 50%,#162d50 100%);--grad-accent:linear-gradient(135deg,#4a90d9 0%,#6baee8 50%,#4a90d9 100%);--grad-soft:linear-gradient(180deg,#d2e5fb 0%,#e8f4fd 100%);--radius-sm:.375rem;--radius-md:.625rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-2xl:2rem;--radius-full:9999px;--shadow-sm:0 2px 8px rgba(74,144,217,.08);--shadow-md:0 6px 24px rgba(74,144,217,.13);--shadow-lg:0 16px 48px rgba(74,144,217,.18);--shadow-xl:0 24px 64px rgba(74,144,217,.22);--transition:220ms cubic-bezier(.16,1,.3,1);--font-display:'Playfair Display','Georgia',serif;--font-body:'Inter','Helvetica Neue',sans-serif;--content-narrow:640px;--content-default:960px;--content-wide:1200px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;hanging-punctuation:first last}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.7;overflow-x:hidden}
img,picture,video{display:block;max-width:100%;height:auto}
p,li{text-wrap:pretty}h1,h2,h3,h4{text-wrap:balance;line-height:1.15}
a{color:var(--color-primary);transition:color var(--transition)}
a:hover{color:var(--color-primary-deep)}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
::selection{background:rgba(74,144,217,.2);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

#site-header{position:fixed;top:0;left:0;right:0;z-index:200;transition:background var(--transition),box-shadow var(--transition)}
#site-header.scrolled{background:rgba(247,250,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--color-divider),var(--shadow-sm)}
.nav-container{max-width:var(--content-wide);margin-inline:auto;padding:var(--space-4) var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.site-logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em;flex-shrink:0}
.logo-icon{width:36px;height:36px;background:var(--grad-accent);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);flex-shrink:0}
.primary-nav ul{display:flex;align-items:center;gap:var(--space-8);list-style:none}
.primary-nav a{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-decoration:none;letter-spacing:.02em;padding-block:var(--space-1);position:relative}
.primary-nav a::after{content:'';position:absolute;bottom:-2px;left:0;right:100%;height:1.5px;background:var(--color-primary);transition:right var(--transition)}
.primary-nav a:hover{color:var(--color-text)}
.primary-nav a:hover::after{right:0}
.nav-cta{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--grad-accent);color:var(--color-text-inverse)!important;text-decoration:none;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;letter-spacing:.03em;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition);white-space:nowrap}
.nav-cta:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);color:var(--color-text-inverse)!important}
.hamburger{display:none;flex-direction:column;gap:5px;padding:var(--space-2);border-radius:var(--radius-sm)}
.hamburger span{display:block;width:22px;height:2px;background:var(--color-text);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.section{padding:clamp(var(--space-16),8vw,var(--space-32)) clamp(var(--space-4),4vw,var(--space-12))}
.section-inner{max-width:var(--content-wide);margin-inline:auto}
.section-inner--narrow{max-width:var(--content-default);margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--color-primary);margin-bottom:var(--space-5)}
.eyebrow::before{content:'';width:28px;height:1.5px;background:var(--color-primary);display:block}
.section-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;color:var(--color-text);line-height:1.1;margin-bottom:var(--space-6)}
.section-title em{font-style:italic;color:var(--color-primary)}
.section-lead{font-size:var(--text-base);color:var(--color-text-muted);max-width:58ch;line-height:1.8}

.hero{min-height:100dvh;background:var(--grad-hero);position:relative;display:grid;place-items:center;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(74,144,217,.12) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 10% 80%,rgba(168,212,245,.18) 0%,transparent 60%);pointer-events:none}
.hero::after{content:'';position:absolute;width:600px;height:600px;border-radius:var(--radius-full);border:1px solid rgba(74,144,217,.12);top:-100px;right:-100px;pointer-events:none}
.hero-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bubble{position:absolute;border-radius:var(--radius-full);background:rgba(74,144,217,.06);border:1px solid rgba(74,144,217,.1)}
.hero-bubble:nth-child(1){width:400px;height:400px;top:5%;right:5%}
.hero-bubble:nth-child(2){width:250px;height:250px;top:40%;right:20%;background:rgba(168,212,245,.08)}
.hero-bubble:nth-child(3){width:180px;height:180px;bottom:10%;right:35%;background:rgba(200,225,248,.1)}
.hero-bubble:nth-child(4){width:120px;height:120px;top:20%;left:5%}
.hero-content{position:relative;z-index:1;max-width:var(--content-wide);margin-inline:auto;padding:clamp(var(--space-20),10vw,var(--space-32)) clamp(var(--space-4),5vw,var(--space-12));display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--space-16)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--color-primary);margin-bottom:var(--space-6);padding:var(--space-2) var(--space-4);background:rgba(74,144,217,.1);border-radius:var(--radius-full);border:1px solid rgba(74,144,217,.15)}
.hero-headline{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:400;color:var(--color-text);line-height:1.08;margin-bottom:var(--space-6);letter-spacing:-.015em}
.hero-headline em{font-style:italic;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:var(--text-lg);color:var(--color-text-muted);max-width:48ch;line-height:1.75;margin-bottom:var(--space-10)}
.hero-actions{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}
.btn-primary{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);background:var(--grad-accent);color:var(--color-text-inverse);text-decoration:none;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;letter-spacing:.04em;box-shadow:var(--shadow-md);transition:box-shadow var(--transition),transform var(--transition)}
.btn-primary:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);color:var(--color-text-inverse)}
.btn-outline{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);border:1.5px solid var(--color-border);color:var(--color-text-muted);text-decoration:none;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;transition:border-color var(--transition),color var(--transition),background var(--transition)}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary);background:rgba(74,144,217,.05)}
.hero-visual{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-end}
.hero-card{background:var(--grad-card);border:1px solid var(--color-divider);border-radius:var(--radius-2xl);padding:var(--space-8);box-shadow:var(--shadow-lg);width:100%;max-width:420px;position:relative;overflow:hidden}
.hero-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-accent);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0}
.hero-card-label{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);font-weight:600;margin-bottom:var(--space-3)}
.hero-card-stat{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--color-text);line-height:1;margin-bottom:var(--space-2)}
.hero-card-desc{font-size:var(--text-sm);color:var(--color-text-muted)}
.hero-card-sm{max-width:320px;padding:var(--space-6);background:rgba(74,144,217,.08);border:1px solid rgba(74,144,217,.15);border-radius:var(--radius-xl)}
.hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:rgba(74,144,217,.1);border:1px solid rgba(74,144,217,.2);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-primary);font-weight:500;letter-spacing:.05em}
.badge-dot{width:6px;height:6px;background:var(--color-primary);border-radius:var(--radius-full);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

.promise-strip{background:var(--grad-dark);padding:clamp(var(--space-16),6vw,var(--space-24)) clamp(var(--space-4),4vw,var(--space-12));position:relative;overflow:hidden}
.promise-strip::before{content:'';position:absolute;top:-60%;right:-10%;width:60vmax;height:60vmax;border-radius:var(--radius-full);border:1px solid rgba(74,144,217,.08);pointer-events:none}
.promise-inner{max-width:var(--content-default);margin-inline:auto;text-align:center;position:relative;z-index:1}
.promise-quote{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:300;font-style:italic;color:#fff;line-height:1.2;margin-bottom:var(--space-6);max-width:700px;margin-inline:auto}
.promise-quote span{background:linear-gradient(135deg,#c7e2f9,#7fb3e8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.promise-rule{width:60px;height:1.5px;background:var(--grad-accent);margin:var(--space-8) auto;border-radius:var(--radius-full)}
.promise-sub{font-size:var(--text-base);color:rgba(255,255,255,.6);max-width:52ch;margin-inline:auto;line-height:1.8}

.services-section{background:var(--color-bg)}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-12)}
.service-card{background:var(--grad-card);border:1px solid var(--color-divider);border-radius:var(--radius-2xl);padding:var(--space-10);position:relative;overflow:hidden;transition:box-shadow var(--transition),transform var(--transition)}
.service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.service-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--grad-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--transition)}
.service-card:hover::after{transform:scaleX(1)}
.service-icon-wrap{width:56px;height:56px;background:var(--color-accent-soft);border:1px solid var(--color-sky-2);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-6);color:var(--color-primary)}
.service-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;color:var(--color-text);margin-bottom:var(--space-3);line-height:1.2}
.service-desc{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.75}

.products-section{background:var(--grad-soft)}
.products-header{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:end;margin-bottom:var(--space-12)}
.products-intro{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.8}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.product-card{background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-8);transition:box-shadow var(--transition),transform var(--transition);position:relative;overflow:hidden}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.product-card::before{content:'';position:absolute;top:0;left:0;right:0;height:80px;background:var(--color-accent-soft);z-index:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.product-emoji{font-size:2.25rem;display:block;margin-bottom:var(--space-4);position:relative;z-index:1;line-height:1}
.product-cat{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);font-weight:600;margin-bottom:var(--space-2)}
.product-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2);line-height:1.25}
.product-items{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7}
.products-footer{margin-top:var(--space-8);text-align:center}
.products-footer-text{font-family:var(--font-display);font-size:var(--text-xl);font-style:italic;color:var(--color-text-muted)}

.events-section{background:var(--color-bg)}
.events-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;margin-top:var(--space-12)}
.events-visual{border-radius:var(--radius-2xl);overflow:hidden;position:relative;aspect-ratio:5/4;background:var(--color-surface-offset);box-shadow:var(--shadow-xl)}
.events-visual img{width:100%;height:100%;object-fit:cover}
.events-visual-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,40,64,.4) 0%,transparent 50%)}
.events-badge{position:absolute;bottom:var(--space-6);left:var(--space-6);background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);box-shadow:var(--shadow-md)}
.events-badge-label{font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--space-1)}
.events-badge-value{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-primary)}
.events-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-8)}
.events-list li{display:flex;align-items:flex-start;gap:var(--space-4);font-size:var(--text-base);color:var(--color-text-muted);padding:var(--space-4) var(--space-5);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);transition:background var(--transition),border-color var(--transition)}
.events-list li:hover{background:var(--color-accent-soft);border-color:var(--color-sky-2)}
.event-icon{width:36px;height:36px;flex-shrink:0;background:var(--color-accent-soft);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-primary);font-size:1rem;line-height:1}

.occasions-strip{background:var(--color-surface-offset);padding:clamp(var(--space-10),4vw,var(--space-16)) clamp(var(--space-4),4vw,var(--space-12))}
.occasions-inner{max-width:var(--content-wide);margin-inline:auto}
.occasions-label{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--color-text-faint);margin-bottom:var(--space-4);text-align:center}
.occasions-tags{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}
.tag{padding:var(--space-2) var(--space-5);background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500;transition:background var(--transition),border-color var(--transition),color var(--transition)}
.tag:hover{background:var(--color-accent-soft);border-color:var(--color-primary-light);color:var(--color-primary-deep)}

.cta-band{background:var(--grad-accent);padding:clamp(var(--space-16),6vw,var(--space-24)) clamp(var(--space-4),4vw,var(--space-12));text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 20% 50%,rgba(255,255,255,.1) 0%,transparent 60%);pointer-events:none}
.cta-inner{position:relative;z-index:1}
.cta-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;color:#fff;line-height:1.2;margin-bottom:var(--space-4)}
.cta-sub{font-family:var(--font-display);font-size:var(--text-xl);font-style:italic;color:rgba(255,255,255,.85);margin-bottom:var(--space-10)}
.btn-white{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-10);background:#fff;color:var(--color-primary-deep);text-decoration:none;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 8px 32px rgba(0,0,0,.15);transition:box-shadow var(--transition),transform var(--transition)}
.btn-white:hover{box-shadow:0 12px 40px rgba(0,0,0,.2);transform:translateY(-2px);color:var(--color-primary-deep)}

#site-footer{background:var(--color-text);color:rgba(255,255,255,.55);padding:clamp(var(--space-16),6vw,var(--space-24)) clamp(var(--space-4),4vw,var(--space-12))}
.footer-grid{max-width:var(--content-wide);margin-inline:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-12)}
.footer-brand-name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:#fff;margin-bottom:var(--space-4)}
.footer-tagline{font-size:var(--text-sm);line-height:1.7;max-width:34ch;margin-bottom:var(--space-6)}
.footer-contact a{display:block;font-size:var(--text-sm);color:rgba(255,255,255,.7);text-decoration:none;margin-bottom:var(--space-2);transition:color var(--transition)}
.footer-contact a:hover{color:var(--color-primary-light)}
.footer-col-title{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary-light);font-weight:600;margin-bottom:var(--space-5)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.footer-links a{font-size:var(--text-sm);color:rgba(255,255,255,.5);text-decoration:none;transition:color var(--transition)}
.footer-links a:hover{color:rgba(255,255,255,.9)}
.footer-bottom{max-width:var(--content-wide);margin-inline:auto;padding-top:var(--space-8);margin-top:var(--space-8);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-xs)}

.reveal{opacity:1}
@supports(animation-timeline:scroll()){
  .reveal{opacity:0;animation:anim-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
  .reveal-delay-1{animation-range:entry 5% entry 80%}
  .reveal-delay-2{animation-range:entry 10% entry 85%}
  .reveal-delay-3{animation-range:entry 15% entry 90%}
}
@keyframes anim-reveal{to{opacity:1}}

@media(max-width:900px){
  .hero-content{grid-template-columns:1fr;text-align:center}
  .hero-text{max-width:var(--content-narrow);margin-inline:auto}
  .hero-desc{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-visual{display:none}
  .services-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:1fr 1fr}
  .products-header{grid-template-columns:1fr}
  .events-layout{grid-template-columns:1fr}
  .events-visual{display:none}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:680px){
  .primary-nav{display:none}
  .primary-nav.open{display:block;position:fixed;top:64px;left:0;right:0;background:var(--color-surface-2);border-bottom:1px solid var(--color-divider);box-shadow:var(--shadow-lg);z-index:199;padding:var(--space-6)}
  .primary-nav.open ul{flex-direction:column;gap:var(--space-4)}
  .nav-cta{display:none}
  .hamburger{display:flex}
  .products-grid{grid-template-columns:1fr}
}


/* ================================================================
   PROMOSOLOLO v4.2 — restore butterflies + big logo, remove stat cards,
   static header (not fixed), full consistency pass
   ================================================================ */

:root {
    --icon-size-sm: 20px;
    --icon-size-md: 26px;
    --icon-stroke: 1.75;
    --radius-card: 18px;
    --radius-pill: 9999px;
    --shadow-soft: 0 8px 28px rgba(31, 67, 125, 0.10);
    --shadow-strong: 0 14px 40px rgba(31, 67, 125, 0.18);
}

/* ---------- Skip link: hidden until keyboard focus ---------- */
.sr-only.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: 999;
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top .2s ease;
}

.sr-only.skip-link:focus { top: var(--space-4); }

/* ---------- Header: static bar (not fixed), generous height, big readable logo ---------- */
#site-header {
    position: relative;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
    z-index: 200;
}

.nav-container {
    max-width: var(--content-wide);
    margin-inline: auto;
    padding: var(--space-5) var(--space-8);
    min-height: 116px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.site-logo--brand,
.site-logo--wp {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}

.site-logo-img,
.site-logo--wp .custom-logo-link img,
.site-logo--wp .custom-logo {
    height: 80px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: block;
}

.primary-nav { flex: 1; display: flex; justify-content: center; }

.primary-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-nav a {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    letter-spacing: .02em;
    padding-block: var(--space-1);
    position: relative;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.primary-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 100%;
    height: 1.5px;
    background: var(--color-primary);
    transition: right var(--transition);
}

.primary-nav a:hover { color: var(--color-text); }
.primary-nav a:hover::after { right: 0; }

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    min-height: 44px;
}

.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text);
}

@media (max-width: 1180px) {
    .nav-container { min-height: 100px; padding: var(--space-4) var(--space-6); }
    .site-logo-img,
    .site-logo--wp .custom-logo-link img,
    .site-logo--wp .custom-logo { height: 68px; max-width: 240px; }
    .primary-nav ul { gap: var(--space-8); }
}

@media (max-width: 900px) {
    .nav-container { min-height: 88px; padding: var(--space-4) var(--space-5); }
    .site-logo-img,
    .site-logo--wp .custom-logo-link img,
    .site-logo--wp .custom-logo { height: 64px; max-width: 230px; }
    .primary-nav { display: none; }
    .primary-nav.open {
        display: flex;
        position: fixed;
        top: 88px; left: 0; right: 0;
        background: var(--color-surface-2);
        border-bottom: 1px solid var(--color-divider);
        padding: var(--space-6);
        flex-direction: column;
        z-index: 199;
    }
    .primary-nav.open ul { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
    .nav-cta { display: none; }
    .hamburger { display: inline-flex; }
}

@media (max-width: 480px) {
    .nav-container { min-height: 76px; padding: var(--space-3) var(--space-4); }
    .site-logo-img,
    .site-logo--wp .custom-logo-link img,
    .site-logo--wp .custom-logo { height: 56px; max-width: 200px; }
    .hero-butterfly { top: 4%; right: -46% !important; width: min(760px, 168vw); }
}

/* ---------- Hero: large logo showcase + visible diagonal butterfly watermark ---------- */
.hero { isolation: isolate; overflow: hidden; }

.hero-content {
    grid-template-columns: minmax(0, 560px) minmax(420px, 1fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 5rem);
    position: relative;
    z-index: 2;
}

.hero-text { max-width: 540px; z-index: 3; position: relative; }
.hero-headline, .hero-desc, .hero-actions, .hero-eyebrow { position: relative; z-index: 3; }

.hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    z-index: 2;
    position: relative;
}

.hero-logo-img { display: flex; justify-content: center; width: 100%; }

.hero-logo-img .custom-logo-link img,
.hero-logo-img .custom-logo,
.hero-logo-brand {
    width: auto;
    height: auto;
    max-width: 480px;
    object-fit: contain;
    filter: drop-shadow(0 10px 32px rgba(74,144,217,.20));
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

.hero-butterfly {
    position: absolute;
    top: 50%;
    right: -16% !important;
    left: auto !important;
    width: min(1480px, 110vw);
    transform: translateY(-50%);
    transform-origin: center right;
    z-index: 0;
    pointer-events: none;
}

.butterfly-svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #4a90d9;
    opacity: 0.30;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(235,245,253,.99) 0%, rgba(235,245,253,.96) 30%, rgba(235,245,253,.74) 46%, rgba(235,245,253,.28) 62%, rgba(235,245,253,.02) 78%, rgba(235,245,253,0) 100%),
        radial-gradient(ellipse 64% 84% at 10% 50%, rgba(255,255,255,.62) 0%, transparent 62%);
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 1200px) {
    .hero-butterfly { right: -24% !important; width: min(1280px, 116vw); }
    .hero-logo-img .custom-logo-link img,
    .hero-logo-img .custom-logo,
    .hero-logo-brand { max-width: 400px; }
}

@media (max-width: 900px) {
    .hero-content { grid-template-columns: 1fr; text-align: center; }
    .hero-text { margin-inline: auto; }
    .hero-desc { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual { display: none !important; }
    .hero-butterfly {
        top: 6%;
        right: -38% !important;
        width: min(900px, 150vw);
        transform: translateY(0) rotate(4deg);
        opacity: .9;
    }
    .butterfly-svg { opacity: 0.22; }
}

/* ---------- "Nasza filozofia": two prominent butterflies angled inward toward the quote ---------- */
.promise-strip {
    position: relative;
    background: linear-gradient(135deg, #16356c 0%, #1d3e78 45%, #1b3868 100%);
    overflow: hidden;
    min-height: 460px;
}

.promise-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 70% at 0% 50%, rgba(255,255,255,.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 100% 50%, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.promise-butterfly {
    position: absolute;
    top: 50%;
    width: min(640px, 44vw);
    height: auto;
    pointer-events: none;
    z-index: 0;
    line-height: 0;
}

.promise-butterfly--left {
    left: -9%;
    transform: translateY(-46%) scaleX(-1) rotate(16deg);
    transform-origin: center;
}

.promise-butterfly--right {
    right: -7%;
    transform: translateY(-54%) rotate(-16deg);
    transform-origin: center;
}

.promise-butterfly-svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #ffffff;
    opacity: .14;
}

.promise-inner { position: relative; z-index: 2; }
.promise-quote { color: rgba(255,255,255,.96); }
.promise-sub { color: rgba(255,255,255,.80); }

@media (max-width: 1200px) {
    .promise-butterfly { width: min(520px, 46vw); }
}

@media (max-width: 900px) {
    .promise-butterfly { width: min(400px, 48vw); opacity: .85; }
    .promise-butterfly--left { left: -16%; transform: translateY(-46%) scaleX(-1) rotate(12deg); }
    .promise-butterfly--right { right: -14%; transform: translateY(-54%) rotate(-12deg); }
}

@media (max-width: 680px) {
    .promise-butterfly { display: none; }
}

/* ---------- Footer: real logo, sized prominently ---------- */
.footer-brand-name { display: flex; align-items: center; margin-bottom: var(--space-4); }

.footer-logo-img {
    height: 92px;
    width: auto;
    max-width: 300px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .96;
}

@media (max-width: 900px) {
    .footer-logo-img { height: 76px; max-width: 260px; }
}

.footer-contact { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-contact-person { font-size: var(--text-sm); color: rgba(255,255,255,0.72); }

/* ---------- CTA band: phone + contact person ---------- */
.cta-contact-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.cta-contact-details a { color: rgba(255,255,255,0.92); font-weight: 600; text-decoration: none; }
.cta-contact-details a:hover { text-decoration: underline; }
.cta-contact-person { font-size: var(--text-sm); color: rgba(255,255,255,0.72); }

/* ---------- Unified icon system + card consistency ---------- */
.service-icon-wrap,
.events-list .event-icon { display: inline-flex; align-items: center; justify-content: center; }

.service-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, rgba(74,144,217,.12), rgba(107,174,232,.18));
    color: var(--color-primary);
    margin-bottom: var(--space-5);
}

.service-icon-wrap svg { width: var(--icon-size-md); height: var(--icon-size-md); stroke-width: var(--icon-stroke); }
.event-icon { width: var(--icon-size-md); height: var(--icon-size-md); font-size: 1.1rem; flex-shrink: 0; }

.service-card,
.product-card {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    transition: transform .25s ease, box-shadow .25s ease;
}

.service-card:hover,
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }

.btn-primary,
.btn-outline,
.btn-white,
.nav-cta { border-radius: var(--radius-pill); font-weight: 600; letter-spacing: .01em; }

.btn-primary,
.btn-outline,
.btn-white { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Global usability/consistency pass ---------- */
a:focus-visible,
button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }

.eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.section-title { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.01em; }
.section { padding-block: clamp(4rem, 8vw, 7rem); }

.section-inner,
.promise-inner,
.cta-inner,
.occasions-inner {
    max-width: var(--content-wide);
    margin-inline: auto;
    padding-inline: var(--space-6);
}