:root{
  --bg:#080808;
  --panel:#0b0b0b;
  --yellow:#f2c200;
  --white:#ffffff;
  --footer-h:72px;
  --muted:rgba(255,255,255,0.75);
  --max:1100px;
}
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;font-family:Poppins,system-ui,Segoe UI,Arial; background:var(--bg); color:var(--white); -webkit-font-smoothing:antialiased;
}
/* Entry overlay (QR zoom + fade) */
.entry-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2200;background-color:#000;pointer-events:none}
.entry-overlay img{display:block;max-width:none;width:auto;height:auto;max-height:36vh}
.entry-overlay img.animate{animation:qr-zoom-fade 1000ms cubic-bezier(.2,.9,.25,1) forwards}
.entry-overlay.exiting{pointer-events:auto}
.entry-overlay img.animate-exit{animation:qr-zoom-exit 700ms cubic-bezier(.2,.9,.25,1) forwards}
@keyframes qr-zoom-exit{
  0%{transform:scale(.6);opacity:0;filter:blur(3px)}
  20%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{transform:scale(2);opacity:1;filter:blur(6px)}
}
@keyframes qr-zoom-fade{
  0%{transform:scale(.6);opacity:1;filter:blur(3px)}
  65%{transform:scale(1.05);opacity:1;filter:blur(0)}
  100%{transform:scale(1);opacity:0}
}

/* while entry overlay active, dim page then reveal */
body.entry-active .main-content,
body.entry-active .side-inner,
body.entry-active .site-footer{filter:brightness(.28);transition:filter 420ms ease}
.container{max-width:var(--max);margin:40px auto;padding:0 20px}

/* Hide mobile topbar by default; show only on small screens via media query */
.mobile-topbar{display:none}
.container.narrow{max-width:780px}
.logo{font-weight:800;color:var(--yellow);text-decoration:none;font-size:18px}

/* Layout with left sidebar */
.layout{display:flex;min-height:100vh}
.side-nav{width:220px;flex-shrink:0;position:fixed;left:18px;top:18px;bottom:18px}
.side-inner{background:var(--yellow);height:100%;border-radius:8px;display:flex;flex-direction:column;align-items:center;padding:18px 12px;box-shadow:none}
.avatar-box{width:100%;display:flex;justify-content:center;padding:6px 0}
.avatar{width:88px;height:88px;border-radius:6px;background:#111;color:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.side-menu{display:flex;flex-direction:column;gap:22px;margin-top:36px;width:100%;align-items:center;padding-left:0}
.side-menu a{color:#111;text-decoration:none;padding:12px 14px;font-weight:800;position:relative;width:100%;text-transform:uppercase;letter-spacing:1px;text-align:center}
.side-menu a span{display:inline-block}
/* remove decorative pseudo-elements (we use white background for active state) */
.side-menu a::before{display:none}
.side-menu a::after{display:none}

/* floating / modern polish */
.side-inner{background:linear-gradient(180deg,var(--yellow) 0%, #f1b900 100%);backdrop-filter:blur(4px);}
.side-inner{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* hide previous floating highlight; we'll mark active item with a white background */
.side-highlight{display:none}
.side-inner{position:relative}

.side-menu a{padding-left:12px}
.side-menu a.active{color:#111;background:#fff;border-radius:10px;padding-left:28px;padding-right:12px}
.side-menu a:hover{color:#000;filter:brightness(.95)}

/* make the avatar slightly elevated */
.avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;color:#111;border:4px solid #111;font-weight:800}
.avatar-box{padding:10px}

/* Right fixed pill */
.right-pill{position:fixed;right:18px;top:50%;/* animate translateY around center using keyframes, keep translateX via var */
  --pill-tx: 0px;
  transform: translateX(var(--pill-tx)) translateY(-50%);
  background:var(--yellow);padding:12px;border-radius:34px;display:flex;flex-direction:column;gap:8px;align-items:center;box-shadow:none;z-index:1200;max-height:none;overflow:visible}
.right-pill .right-pill-item{display:flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;margin:0}

/* black rounded bars (default) */
.right-pill .right-pill-item.pill-bar{width:18px;height:44px;border-radius:999px;background:#111;display:flex;align-items:center;justify-content:center}
.right-pill .right-pill-item.pill-small{width:28px;height:28px;border-radius:8px;background:#111;display:flex;align-items:center;justify-content:center}

/* svg icons inside pills: make icon color yellow on black backgrounds */
.right-pill .right-pill-item svg *{fill:var(--yellow) !important;stroke:var(--yellow) !important}

/* active state: white rounded background and black icon */
/* Active state: highlight icon only (white). Keep pill background transparent to avoid offset box */
.right-pill .right-pill-item.active{background:transparent;border-radius:18px;box-shadow:none;transform:none}
.right-pill .right-pill-item.active svg *{fill:var(--white) !important;stroke:var(--white) !important}

/* hide the legacy dots element if present */
.right-pill .right-pill-dots{display:none}
.right-pill .right-pill-indicator{position:absolute;left:-8px;top:0;width:36px;height:36px;border-radius:8px;background:transparent;transform:translateY(0);transition:transform .28s cubic-bezier(.2,.9,.2,1)}

/* animate entire pill on hover */
.right-pill:hover{transform:translateY(-50%) translateX(-10px)}

.main-content{height:calc(100vh - var(--footer-h));overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;padding:0;scroll-padding-bottom:var(--footer-h);-webkit-overflow-scrolling:touch}
.hero{height:calc(100vh - var(--footer-h));min-height:unset;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;position:relative}
.page{height:calc(100vh - var(--footer-h));min-height:unset;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;padding:0;position:relative}
.white-card{margin:0;max-height:calc(100vh - var(--footer-h));overflow:hidden}

.main-content{margin-left:280px;flex:1;padding:60px 40px 0;height:calc(100vh - var(--footer-h));overscroll-behavior-y:contain;touch-action:pan-y}

/* language button base (shape) */
.lang-btn{padding:8px 10px;border-radius:8px;font-weight:800;cursor:pointer;border:0;transition:background .18s ease,color .12s ease,transform .12s ease}

/* Desktop: language button inside side-inner at bottom-left */
.side-inner .lang-btn{position:absolute;left:12px;bottom:88px;background:#0b0b0b;color:var(--yellow);padding:8px 12px}
.side-inner .lang-btn:hover{background:#111;color:#ffd84d;transform:translateY(-4px)}

/* since-timer in side nav */
.since-timer{position:absolute;left:50%;transform:translateX(-50%);bottom:132px;color:#111;background:transparent;text-align:center;width:auto;padding:2px 6px}
.since-timer .since-label{font-size:11px;color:#111;opacity:0.9;font-weight:700;text-transform:uppercase}
.since-timer .since-value{font-weight:800;color:#111;margin-top:6px;font-size:13px;min-width:200px;display:inline-block;font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;letter-spacing:0.5px;white-space:nowrap;font-variant-numeric:tabular-nums;backface-visibility:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.since-timer .since-value{will-change:transform,opacity;transition:none}
.since-timer .since-value{will-change:transform,opacity}

/* Footer language button hidden by default on desktop */
.site-footer .lang-btn{display:none}

/* hide scrollbar but keep scrolling usable */
.main-content::-webkit-scrollbar{width:0;height:0}
.main-content{-ms-overflow-style:none;scrollbar-width:none}

.white-card{display:grid;grid-template-columns:1fr min(520px,40%);gap:0;background:var(--white);color:#111;border-radius:6px;max-width:calc(100% - 40px);width:100%;margin:28px auto;padding:0;box-shadow:none;position:relative;scroll-snap-align:start;overflow:hidden;box-sizing:border-box}
.card-left{padding:56px 64px;min-width:0}
.card-right{min-width:0}
.eyebrow{font-weight:800;color:#111;letter-spacing:1px}
.card-title{font-size:44px;margin:10px 0;line-height:1}
.highlight{color:var(--yellow)}
.card-title{font-weight:800;text-transform:uppercase;letter-spacing:1px}
.subtitle{color:#222;font-weight:700;margin-bottom:18px}
.card-copy{color:#444;max-width:520px}
.card-cta{margin-top:28px}
.card-right{background:#efefef;padding:28px;display:flex;align-items:center;justify-content:center;border-top-right-radius:6px;border-bottom-right-radius:6px;border-left:1px solid #e6e6e6}
.photo-frame{width:100%;height:420px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:4px}

.page{height:calc(100vh - var(--footer-h));display:flex;align-items:center;scroll-snap-align:start;padding:40px 0}
.page .page-inner{padding:40px 20px}
.page h2{color:var(--yellow);margin-top:0}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.photo-fallback{position:absolute;color:#999;font-weight:700}

/* icon pill placed overlapping the card (right edge) */
.icon-pill{position:absolute;right:-46px;top:50%;transform:translateY(-50%);background:var(--yellow);padding:12px;border-radius:28px;display:flex;flex-direction:column;gap:12px}
.icon-pill .pill-item{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:transparent;border:0}
.icon-pill .pill-item svg{display:block}
.icon-pill .pill-item:hover{transform:translateX(-6px)}
.icon-pill .pill-dots{width:6px;height:24px;margin:0 auto;background:linear-gradient(to bottom, #111 0%, #111 25%, transparent 25%, transparent 50%, #111 50%, #111 75%, transparent 75%, transparent 100%);background-size:6px 8px;border-radius:3px}

.right-pill .right-pill-item.pill-bar,
.right-pill .right-pill-item.pill-small{width:42px;height:42px;border-radius:14px;background:#111;display:flex;align-items:center;justify-content:center}
.right-pill .right-pill-item svg{width:18px;height:18px;display:block}
.right-pill .right-pill-item:hover{background:rgba(255,255,255,0.08)}

.btn{background:var(--white);color:#111;padding:12px 26px;text-decoration:none;border:none;border-radius:4px;font-weight:700;cursor:pointer;transition:transform .18s cubic-bezier(.2,.9,.2,1)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.995)}
.hero .btn{background:var(--yellow);color:#111;border-radius:6px}
.hero .btn:hover{transform:translateY(-3px)}
.btn.ghost{background:transparent;border:2px solid var(--white);color:var(--white)}
.btn-outline{border:2px solid var(--white);padding:8px 12px;color:var(--white);text-decoration:none;border-radius:4px}

.about-preview,.projects-preview,.contact-preview{margin:40px 0;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:6px}
.about-preview h2,.projects-preview h2,.contact-preview h2{color:var(--yellow)}
.cards{display:flex;gap:18px;flex-wrap:wrap}
.card{background:#0f0f0f;padding:20px;border-radius:6px;flex:1;min-width:240px}
.cards a.card{display:block;text-decoration:none;color:inherit;cursor:pointer}
.cards a.card:hover{opacity:.95}
.link{display:inline-block;margin-top:12px;color:var(--yellow);text-decoration:none}

.field{display:block;margin:12px 0}
.field span{display:block;margin-bottom:6px;color:var(--muted)}
.field input,.field textarea{width:100%;padding:12px;border:0;border-bottom:2px solid rgba(255,255,255,0.08);background:transparent;color:var(--white);outline:none}
.field input:focus,.field textarea:focus{border-bottom-color:var(--yellow)}

.site-footer{position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);border-top:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg,rgba(11,11,11,0.9),rgba(11,11,11,0.95));padding:14px 0;z-index:1200}
.site-footer.small{padding:8px 0}
.footer-inner{max-width:var(--max);margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;height:100%}
.muted{color:var(--muted)}
.contact-list{text-align:right}

.skills{display:flex;gap:10px;flex-wrap:wrap}
.skills span{background:rgba(255,255,255,0.04);padding:6px 10px;border-radius:4px}

/* Animations and reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.2,1)}
.reveal.inview{opacity:1;transform:translateY(0)}

.side-menu a{display:block;text-transform:uppercase;letter-spacing:1px}
.side-menu a::after{content:'';display:block;width:6px;height:6px;background:#111;border-radius:50%;margin:8px auto 0;opacity:0}
.side-menu a.active::after{opacity:0}

.social-bar{position:fixed;right:20px;top:40%;background:var(--yellow);padding:8px;border-radius:6px;display:flex;flex-direction:column;gap:8px}
.social-bar a{display:block;padding:8px;color:#111;text-decoration:none;font-size:18px}

/* Floating vertical navigation on the right side */
.floating-nav{
  position:fixed;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  background:var(--yellow);
  padding:12px;
  border-radius:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:none;
  z-index:1000;
  transition:transform .2s ease, opacity .2s ease;
  /* Prevent blocking scroll when hovering */
  pointer-events:auto;
}
.floating-nav:hover{
  transform:translateY(-50%) translateX(-4px);
}
.floating-nav-list{list-style:none;margin:0;padding:0}
.floating-nav-link{
  display:block;
  width:42px;
  height:42px;
  border-radius:6px;
  background:#ffd84d;
  color:#111;
  text-decoration:none;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.floating-nav-link:hover{transform:translateX(-6px)}
.floating-nav-link.active{background:#fff;color:#111}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* hover on white card image */
.photo-frame img{transition:transform .8s cubic-bezier(.2,.9,.2,1)}
.photo-frame:hover img{transform:scale(1.03)}

/* Floating nav active state transition */
.floating-nav-link{transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease}

/* accent drop shadow and inner border like reference */
.white-card::before{content:'';position:absolute;left:0;right:0;top:0;height:0}

/* Decorative section separator (visual only) */
.right-pill .pill-sep{width:20px;height:42px;display:flex;align-items:center;justify-content:center;pointer-events:none;flex:0 0 auto}
.right-pill .pill-sep .sep-inner{position:relative;display:block;width:20px;height:42px;background:var(--yellow);border-radius:6px;overflow:visible}
.right-pill .pill-sep .sep-inner .sep-top{position:absolute;left:50%;transform:translateX(-50%);top:0;width:10px;height:10px;border-radius:50%;background:#111;display:block}
.right-pill .pill-sep .sep-inner .sep-bar{position:absolute;left:50%;transform:translateX(-50%);top:8px;width:6px;height:16px;border-radius:8px;background:#111;display:block}
.right-pill .pill-sep .sep-inner .sep-bottom{position:absolute;left:2.79%;transform:translateX(-50%);bottom:0;width:10px;height:10px;border-radius:50%;background:#111;display:block;margin:9.9px}

/* ensure separators sit behind icons and don't hide them */
.right-pill .right-pill-item{position:relative;z-index:2}
.right-pill .pill-sep{z-index:1}

/* inner wrapper for right-pill so the whole group can float */
.right-pill-inner{display:flex;flex-direction:column;gap:8px;align-items:center}

/* float the entire right-pill (translateY around center) while keeping translateX controllable via CSS var */
@keyframes floaty-pill{0%{transform:translateX(var(--pill-tx)) translateY(calc(-50% - 8px))}50%{transform:translateX(var(--pill-tx)) translateY(calc(-50% + 8px))}100%{transform:translateX(var(--pill-tx)) translateY(calc(-50% - 8px))}}
.right-pill{animation:floaty-pill 6s ease-in-out infinite}
.right-pill:hover{--pill-tx:-10px}

@media (max-width:720px){
  .right-pill .pill-sep{width:16px;height:34px}
  .right-pill .pill-sep .sep-inner{width:16px;height:34px;border-radius:6px}
  .right-pill .pill-sep .sep-inner .sep-top,.right-pill .pill-sep .sep-inner .sep-bottom{width:8px;height:8px}
  .right-pill .pill-sep .sep-inner .sep-bar{width:5px;height:14px}
}

/* subtle textured overlay to emulate material in reference */
body::before{content:'';position:fixed;left:0;right:0;top:0;bottom:0;background:radial-gradient(circle at 30% 10%, rgba(255,255,255,0.02), transparent 10%), repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 40px);pointer-events:none;mix-blend-mode:overlay}


.stat{background:#0f0f0f;padding:18px;border-radius:6px;text-align:center}
.stat .number{font-size:28px;color:var(--yellow);font-weight:800}

@media (max-width:1000px){
  .main-content{margin-left:80px;padding:24px}
  .side-nav{position:fixed;left:10px;top:10px;width:64px;padding-top:14px}
  .side-menu a{padding:8px 8px;font-size:12px}
  .avatar{width:56px;height:56px}
  .photo-placeholder{height:240px}
  .split-hero{grid-template-columns:1fr}
  .hero-right{order:-1}
  /* ensure white-card stacks on narrower screens */
  .white-card{grid-template-columns:1fr 320px}
}

@media (max-width:720px){
  .hero-title{font-size:28px}
  .cards{flex-direction:column}
  .footer-inner{flex-direction:column;gap:12px;text-align:center}
  .contact-list{text-align:center}
  /* Mobile: hide side navigation and floating controls, use full width content */
  .side-nav{display:none}
  .main-content{margin-left:0;padding:20px 16px 90px}
  .right-pill,.floating-nav,.social-bar{display:none}
  .white-card{grid-template-columns:1fr;box-shadow:none;border-radius:6px}
  .card-left{padding:28px}
  .card-right{display:none}
  /* Make hero CTA more prominent on mobile */
  .hero .btn{padding:14px 20px;font-size:16px}

  /* Mobile topbar (visible on small screens) */
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;position:fixed;left:0;right:0;top:0;height:64px;padding:8px 12px;background:linear-gradient(180deg,rgba(11,11,11,0.98),rgba(11,11,11,0.96));z-index:1400}
  .mobile-logo{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;background:var(--yellow);color:#111;font-weight:800;text-decoration:none}
  .mobile-menu{display:flex;gap:6px;align-items:center;margin-left:12px;flex:1;justify-content:flex-end;flex-wrap:wrap}
  .mobile-menu a{color:var(--white);text-decoration:none;padding:6px 10px;font-weight:700;font-size:14px;border-radius:8px;transition:background .2s ease,color .2s ease}
  .mobile-menu a:hover{background:rgba(255,255,255,0.08)}
  .mobile-menu a.active{color:var(--yellow);background:rgba(255,255,255,0.1);}

  /* Mobile: hide desktop side lang button and place language button in footer */
  .side-inner .lang-btn{display:none}
  .site-footer .lang-btn{display:block;position:absolute;left:12px;bottom:12px;background:var(--yellow);color:#111;border:0;padding:8px 10px;border-radius:8px}
  .site-footer .lang-btn:hover{background:#e0b000}

  /* ensure main content is offset under fixed topbar */
  .main-content{padding-top:84px}
}

/* Mobile override: show footer language button and ensure visibility */
@media (max-width:720px){
  .side-inner .lang-btn{display:none !important}
  .site-footer .lang-btn{display:block;position:absolute;left:12px;bottom:12px;background:var(--yellow);color:#111;border:0;padding:8px 10px;border-radius:8px;z-index:1300}
  .site-footer .lang-btn:hover{background:#e0b000}
}

/* Standalone pages (no side navigation) */
.layout.standalone{display:block}
.layout.standalone .main-content{position:fixed;top:20px;left:0;right:0;bottom:var(--footer-h);margin:0 auto;max-width:var(--max);overflow-y:auto;overscroll-behavior-y:contain;scroll-behavior:smooth;padding:20px 20px 20px;box-sizing:border-box}
.layout.standalone.no-scroll .main-content{overflow-y:hidden}
.layout.standalone .main-content.container{padding:20px 20px 20px}
.subpage-header{position:fixed;left:0;right:0;top:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:linear-gradient(180deg,rgba(11,11,11,0.98),rgba(11,11,11,0.96));z-index:1400}
.subpage-header .home-btn{background:var(--yellow);color:#111;padding:10px 14px;border-radius:8px;font-weight:800;text-decoration:none}
.subpage-header .home-btn:hover{opacity:0.95}
.subpage-header .lang-btn{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px}

@media (max-width:720px){
  .layout.standalone .main-content{padding-top:110px}
  .subpage-header .home-btn{padding:8px 10px}
}

/* Compact services layout to reduce vertical space and fit more content */
.layout.standalone .main-content.services-compact{
  max-width:var(--max);
  margin:0 auto;
  padding:84px 16px 20px;
  box-sizing:border-box;
  height:calc(100vh - var(--footer-h) - 64px);
  overflow:hidden;
}
body.no-scroll{overflow:hidden;}
body.no-scroll .layout.standalone .main-content.services-compact{overflow:hidden;}
.services-compact h1{font-size:22px;margin-bottom:8px}
.services-compact .muted{font-size:13px;margin-bottom:10px}
.services-compact .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.services-compact .card{padding:10px;border-radius:6px;background:#0f0f0f;font-size:13px;line-height:1.5}
.services-compact .card h3{font-size:15px;margin:0 0 6px;color:var(--yellow)}
.services-compact .card p{margin:0;color:#ddd}
.services-compact .link{font-size:13px;margin-top:6px;display:inline-block}

@media (max-width:1200px){
  .services-compact .cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:980px){
  .services-compact .cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .services-compact .cards{grid-template-columns:1fr;}
}

@media (max-width:1000px){
  .services-compact .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .services-compact .cards{grid-template-columns:1fr}
  .services-compact .card{padding:12px;font-size:15px}
  .layout.standalone .main-content.services-compact{padding-top:120px}
}

/* Projects grid tweaks for mobile */
.projects-grid .card{min-height:auto}
@media (max-width:720px){
  .projects-grid .card{padding:14px}
}

/* Ensure main content has safe spacing on mobile to avoid cutting under fixed footer/header */
@media (max-width:720px){
  .layout .main-content, .layout.standalone .main-content{padding-bottom:120px}
}

/* Mobile fixes: allow pages (except hero) to grow and avoid centering that clips content */
@media (max-width:720px){
  .page:not(.hero){
    height: auto;
    min-height: calc(100vh - var(--footer-h));
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: calc(var(--footer-h) + 32px);
  }

  .page .page-inner{
    padding-bottom: calc(var(--footer-h) + 24px);
  }

  .white-card{
    max-height: none;
    overflow: visible;
  }

  .layout .main-content, .layout.standalone .main-content{
    padding-bottom: calc(var(--footer-h) + 64px);
  }
  
  /* Disable scroll snapping on small screens for natural scrolling */
  .main-content{
    scroll-snap-type:none !important;
    -webkit-scroll-snap-type:none !important;
    touch-action:pan-y !important;
    -ms-touch-action:pan-y !important;
  }

  /* Also remove snap alignment from children to be extra safe */
  .page, .hero, .white-card, .white-card *{
    scroll-snap-align: none !important;
    -webkit-scroll-snap-align: none !important;
  }

  /* Allow standalone services pages to scroll on small screens */
  .layout.standalone .main-content.services-compact{
    height: auto;
    overflow: auto;
    padding-bottom: calc(var(--footer-h) + 64px);
  }
}

/* Mobile footer tweaks: slightly reduce footer height and tighten language button */
@media (max-width:720px){
  :root{--footer-h:56px}
  .site-footer{padding:8px 0}
  .site-footer.small{padding:6px 0}
  .footer-inner{padding:0 12px}
  .site-footer .lang-btn{
    padding:4px 8px; /* ~3-5px vertical spacing */
    font-size:13px;
    border-radius:6px;
    left:10px;
    bottom:8px;
  }
}