.social-kit-wrap > header{position:sticky; top:0; z-index:60; backdrop-filter:saturate(120%) blur(8px); background:#0b0b0ccc; border-bottom:1px solid #ffffff12}
.admin-bar .social-kit-wrap > header{top:32px}
/* style.css — Pedaline World Landing Hub */

:root{ --bg:#0b0b0c; --card:#111113; --muted:#9aa0a6; --text:#e6e6e6; --accent:#ffd166; --ring:#ffffff22; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; color:var(--text); background:radial-gradient(1200px 800px at 80% -10%, #202022 0%, #0b0b0c 60%), radial-gradient(900px 600px at -20% 110%, #1b1b1f 0%, #0b0b0c 70%), var(--bg);} 
a{color:inherit; text-decoration:none}
.wrap{display:flex; flex-direction:column; min-height:100%}

/* Announcement Bar */
.announcement-bar{background:#0a0a0c; color:#ffd166; padding:12px 20px; text-align:center; font-size:14px; font-weight:600; border-bottom:1px solid #ffffff12; border-top:1px solid #ffffff12}
.announcement-bar a{color:#ffd166; text-decoration:underline;}
.announcement-bar a:hover{opacity:0.9; text-decoration-color:#ffdc7a;}

/* Kickstarter Banner */
.kickstarter-banner{background:linear-gradient(90deg, #1a1a1e, #0f0f11); color:#f2f2f2; padding:16px 20px; text-align:center; border-bottom:1px solid #ffffff12}
.kickstarter-banner h3{margin:0 0 4px; font-size:16px; color:#ffd166; font-weight:600}
.kickstarter-banner p{margin:0; font-size:13px; color:#c8cbd2}
.kickstarter-banner a{color:#ffd166; text-decoration:underline;}
.kickstarter-banner a:hover{opacity:0.9;}

/* Header */
header{position:relative; z-index:50; background:#0b0b0c; border-bottom:1px solid #ffffff12; height:86px; display:flex; align-items:center;}
.nav{max-width:1100px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; width:100%;}
.brand{display:flex; align-items:center; gap:12px}
.mark{display:inline-block}
.logo-img{height:58px; width:auto; filter:drop-shadow(0 2px 8px #00000066)}
.brand h1{font-size:14px; letter-spacing:0.18em; text-transform:uppercase; margin:0; font-weight:700; color:#f5f5f5}
.lang-switcher{display:flex; gap:8px; align-items:center}
.lang-switcher .flag{font-size:20px; display:inline-block; padding:6px; border-radius:8px; background:transparent; border:1px solid transparent}
.lang-switcher .flag:hover{border-color:#ffffff20}
.lang-switcher .flag.active{border-color:#ffd166; color:#ffd166}
.cta{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; background:linear-gradient(180deg, #ffe08a, #ffcc5c); color:#1d1d1f; font-weight:700; box-shadow:0 8px 22px #00000070; border:1px solid #00000015}
.cta:hover{transform:translateY(-1px); filter:saturate(105%); box-shadow:0 12px 26px #0000008a}

/* Hero */
.hero{max-width:1100px; margin:0 auto; padding:100px 20px 56px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:center; scroll-margin-top:86px;}
.kicker{letter-spacing:.24em; text-transform:uppercase; color:#c3c7cd; font-weight:600; font-size:12px; opacity:.85}
h1.hero-title{font-size:clamp(34px, 6vw, 60px); line-height:1.05; margin:10px 0 16px; letter-spacing:-.02em}
.hero-sub{font-size:18px; color:#c8cbd2; max-width:54ch}
.hero-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:14px; background:#161618; border:1px solid #ffffff1a; color:#f5f5f7; font-weight:600}
.btn:hover{background:#1b1b1f}
.btn.highlighted{background:#ffd166; color:#000000; border-color:#ffd166}
.btn.highlighted:hover{background:#ffdc7a; border-color:#ffdc7a}
.device{position:relative; aspect-ratio:16/11; border-radius:22px; background:linear-gradient(145deg, #1a1a1e, #0c0c0f); box-shadow:inset 0 0 0 1px #ffffff12, 0 30px 80px #000000aa; overflow:hidden}
.device video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:22px}
.device-badge{position:absolute; right:16px; top:16px; padding:8px 12px; border-radius:999px; background:#00000080; border:1px solid #ffffff18; font-size:12px; color:#eaeaea}

/* Social grid */
.social{max-width:1100px; margin:18px auto 0; padding:0 20px 40px; scroll-margin-top:120px}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.card{background:linear-gradient(180deg, #121214, #0a0a0c); border:1px solid #ffffff10; border-radius:18px; padding:18px; text-align:center; box-shadow:0 12px 30px #00000080}
.card:hover{transform:translateY(-2px)}
.card .title{font-weight:700; margin-bottom:6px}
.card .sub{color:#b7bbc3; font-size:13px}

/* Gallery */
.gallery{max-width:1100px; margin:0 auto; padding:42px 20px}
.gallery h2, .gallery h3{margin:0 0 14px}
.gallery-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px}
.ph{aspect-ratio:4/3; border-radius:16px; background:linear-gradient(145deg, #1a1a1e, #0c0c0f); border:1px solid #ffffff10; width:100%; height:100%; object-fit:cover; cursor:zoom-in}

/* Production section */
.production{max-width:1100px; margin:24px auto 0; padding:24px 20px}
.production .muted{color:var(--muted)}
.production-grid video{border-radius:12px}
.production-grid video{width:100%; height:auto}
.production .gallery-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}

@media (max-width:960px){
  .production-grid{grid-template-columns:1fr}
  .production .gallery-row{grid-template-columns:repeat(2,1fr)}
}

/* Parallax background layer */
.parallax-bg{position:fixed; inset:0; z-index:0; background-image:url('images/parallax.jpeg'); background-size:cover; background-position:center center; background-attachment:fixed; pointer-events:none; opacity:0.14}
.wrap{position:relative; z-index:1}

@media (max-width:960px){
  .parallax-bg{background-attachment:scroll; opacity:0.08}
}

#pedaline-app .container {
  max-width: none !important;
  width: 100%;
}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1000}
.lightbox.open{opacity:1; pointer-events:auto}
.lightbox img{max-width:92vw; max-height:86vh; border-radius:14px; box-shadow:0 20px 80px #000000cc; border:1px solid #ffffff24}
.lb-close{position:absolute; top:16px; right:16px; background:#111; color:#f5f5f5; border:1px solid #ffffff22; border-radius:10px; padding:8px 10px; font-weight:700; cursor:pointer}
.lb-prev, .lb-next{position:absolute; top:50%; transform:translateY(-50%); background:#111; color:#f5f5f5; border:1px solid #ffffff22; border-radius:999px; padding:10px 14px; font-weight:700; cursor:pointer}
.lb-prev{left:18px}
.lb-next{right:18px}

/* Shop section */
.shop{max-width:1100px; margin:0 auto; padding:28px 20px 70px; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.shop .panel{background:linear-gradient(180deg, #141416, #0a0a0c); border:1px solid #ffffff12; border-radius:20px; padding:22px; box-shadow:0 16px 44px #000000aa}

/* Sizes grid */
.sizes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.size-card{position:relative; overflow:hidden; border-radius:16px; min-height:300px; color:var(--text); box-shadow:0 12px 36px rgba(0,0,0,.6); border:1px solid #ffffff10}
.size-figure{width:100%; height:160px; overflow:hidden; background:#222; display:flex; align-items:center; justify-content:center}
.size-figure img{width:100%; height:100%; object-fit:cover; display:block}
.size-card .size-body{position:relative; z-index:2; padding:18px 22px 28px; background:transparent;} 
.size-card h3{margin-top:0; letter-spacing:.08em}
.size-card .specs{margin:10px 0 0; padding-left:18px}
.size-card .size-opts{margin-top:12px; color:var(--muted); font-size:14px}
.size-card:hover{transform:translateY(-6px)}

@media (max-width:960px){
  .sizes-grid{grid-template-columns:1fr;}
  .size-card{min-height:220px}
}

/* Footer */
footer{border-top:1px solid #ffffff10; background:#0a0a0b;}
.foot{max-width:1100px; margin:0 auto; padding:20px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; color:#b9bec6; font-size:13px}
.foot .links{display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end}

/* Responsive */
@media (max-width:960px){
  .hero{grid-template-columns:1fr; padding-top:54px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .gallery-row{grid-template-columns:repeat(2,1fr)}
  .shop{grid-template-columns:1fr}
}

/* Mobile: stack hero action buttons and make them full width */
@media (max-width:960px){
  .hero-actions{flex-direction:column; gap:12px}
  .hero-actions .cta,
  .hero-actions .btn{
    width:100%;
    display:inline-flex;
    justify-content:center;
    padding-left:0.75rem;
    padding-right:0.75rem;
  }
}

/* Desktop: hide the optional hero CTA and align the remaining buttons on one row */
@media (min-width:961px){
  .hero-actions .cta{display:none}
  .hero-actions{flex-direction:row;}
  .hero-actions .btn{width:auto;}
}

/* Mobile: hide header CTA in compact view */
@media (max-width:960px){
  .nav .cta{display:none !important}
}

/* Footer: split into two rows on mobile - links first, copyright second */
@media (max-width:960px){
  .foot{display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:14px}
  /* hide links in mobile per user request */
  .foot > .links{display:none !important}
  .foot > div:first-child{order:2}
  .foot{grid-template-columns:1fr;}
}

/* hide specific footer text on mobile */
@media (max-width:960px){
  .no-mobile{display:none !important}
}

/* Kickstarter Campaign Section */
.kickstarter-section{max-width:1100px; margin:0 auto; padding:60px 20px; text-align:center; background:linear-gradient(180deg, #0f0f11, #090909); border:1px solid #ffffff0f; border-radius:20px; margin-bottom:40px}
.ks-content h2{font-size:clamp(28px, 5vw, 44px); margin:0 0 12px; color:#ffd166}
.ks-subtitle{font-size:16px; color:var(--muted); max-width:70ch; margin:12px auto 24px}
.ks-highlight{background:linear-gradient(180deg, #161618, #0a0a0c); border:1px solid #ffffff14; border-radius:16px; padding:20px; margin:24px auto; max-width:70ch}
.ks-highlight p{margin:0; color:#f2f2f2}
.ks-cta{display:flex; gap:12px; justify-content:center; margin:24px 0; flex-wrap:wrap}
.ks-note{font-size:14px; color:var(--muted); margin-top:18px}

/* Modal */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:2000; visibility:hidden}
.modal.open{opacity:1 !important; pointer-events:auto !important; visibility:visible !important; display:flex !important; transition:none}
.modal-overlay{position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px)}
.modal-content{position:relative; z-index:1; background:linear-gradient(180deg, #0f0f11, #090909); border:1px solid #ffffff14; border-radius:20px; padding:32px; max-width:600px; width:90vw; max-height:90vh; overflow-y:auto; box-shadow:0 40px 100px rgba(0,0,0,.8)}
.modal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; border-bottom:1px solid #ffffff0f; padding-bottom:16px}
.modal-header h3{margin:0; font-size:22px; color:#ffd166}
.modal-close{background:none; border:none; color:#9aa0a6; font-size:24px; cursor:pointer; padding:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center}
.modal-close:hover{color:#f2f2f2}

/* Kickstarter Campaign Section */
.kickstarter-section{display:block; max-width:1100px; margin:0 auto; padding:60px 20px; text-align:center; background:linear-gradient(180deg, #0f0f11, #090909); border:1px solid #ffffff0f; border-radius:20px; margin-bottom:40px}

/* Form Styles */
.tester-form{display:flex; flex-direction:column; gap:24px}
.form-section{text-align:left}
.form-section h4{margin:0 0 12px; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:#9aa0a6}
.form-hint{font-size:12px; color:var(--muted); margin:0 0 12px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-group{display:flex; flex-direction:column}
.form-group label{font-size:13px; font-weight:600; color:#e6e6e6; margin-bottom:6px}
.form-group input, .form-group select, .form-group textarea{background:#0a0a0c; border:1px solid #ffffff18; border-radius:8px; padding:10px 12px; color:#e6e6e6; font-family:inherit; font-size:13px}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none; border-color:#ffd166; box-shadow:0 0 0 2px #ffd16622}
.form-group textarea{resize:vertical; min-height:80px}
.form-notice{background:#ffffff05; border:1px solid #ffffff0f; border-radius:10px; padding:14px; font-size:13px; color:var(--muted)}
.form-notice p{margin:0}

/* Social Media Kit Page */
.social-kit{max-width:1200px; margin:0 auto; padding:100px 20px 120px; position:relative; z-index:1}
.social-kit-layout{display:grid; grid-template-columns:280px minmax(0,1fr); gap:32px; align-items:start}
.social-kit-left{display:flex; flex-direction:column; gap:24px; position:sticky; top:120px}
.admin-bar .social-kit-left{top:152px}
.social-kit-sidebar{background:linear-gradient(180deg, #151516, #0b0b0c); border:1px solid #ffffff12; border-radius:22px; padding:28px; box-shadow:0 18px 50px rgba(0,0,0,0.78)}
.social-kit-user{display:flex; flex-direction:column; gap:12px; margin-bottom:22px}
.social-kit-welcome{margin:0; color:#c8cbd2; font-size:15px; font-weight:600}
.social-kit-hint{margin:0; color:#9aa0a6; font-size:13px}
.social-kit-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.social-kit-nav a{display:flex; align-items:center; padding:10px 14px; border-radius:12px; border:1px solid #ffffff12; background:#101012; color:#f5f5f5; font-size:14px; font-weight:500; transition:all .2s ease}
.social-kit-nav a:hover{border-color:#ffd166; color:#ffd166; box-shadow:0 0 0 1px #ffd16622}
.social-kit-logout{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:14px; background:#161618; border:1px solid #ffffff1a; font-weight:600; font-size:13px; color:#f5f5f7; text-decoration:none}
.social-kit-logout:hover{background:#1b1b1f}
.social-kit-content{display:flex; flex-direction:column; gap:24px}
.social-kit-hero{background:linear-gradient(145deg, rgba(255,209,102,0.1), rgba(15,15,17,0.9)); border:1px solid #ffffff12; border-radius:22px; padding:32px; box-shadow:0 20px 60px rgba(0,0,0,0.75)}
.social-kit-hero h1{margin:0 0 10px; font-size:clamp(32px, 5vw, 48px)}
.social-kit-hero p{margin:0; color:#ffd166; letter-spacing:.08em; text-transform:uppercase; font-size:13px}
.social-kit-logout-card{background:linear-gradient(180deg, #141416, #0a0a0c); border:1px solid #ffffff12; border-radius:20px; padding:24px; box-shadow:0 18px 40px rgba(0,0,0,0.7); display:flex; flex-direction:column; gap:14px; font-size:14px; color:#c8cbd2}
.social-kit-left .social-kit-logout{width:100%}
.social-kit-section{background:linear-gradient(180deg, #141416, #0a0a0c); border:1px solid #ffffff10; border-radius:22px; padding:32px; box-shadow:0 18px 50px rgba(0,0,0,0.72); line-height:1.55; font-size:16px; scroll-margin-top:150px}
.social-kit-section h2{margin-top:0; margin-bottom:16px; font-size:24px}
.social-kit-section h3{margin-top:24px; margin-bottom:12px; font-size:18px}
.social-kit-section h4{margin-top:20px; margin-bottom:10px; font-size:16px; text-transform:none}
.social-kit-section ul{margin:12px 0 0; padding-left:20px; color:var(--muted)}
.social-kit-divider{display:none}

.social-kit-login{min-height:60vh; display:flex; align-items:center; justify-content:center; padding:120px 20px}
.social-kit-card{width:100%; max-width:480px; background:linear-gradient(180deg, #121214, #0a0a0c); border:1px solid #ffffff12; border-radius:22px; padding:36px 32px; box-shadow:0 20px 70px rgba(0,0,0,0.75); text-align:center; display:flex; flex-direction:column; gap:18px}
.social-kit-card h1{margin:0; font-size:clamp(28px, 5vw, 36px)}
.social-kit-card p{margin:0; font-size:14px; color:#c8cbd2}
.social-kit-card a{color:#ffd166; text-decoration:underline}
.social-kit-card a:hover{opacity:.85}
.social-kit-form{margin-top:6px}
#social-kit-login-form{display:flex; flex-direction:column; gap:14px}
#social-kit-login-form label{font-size:13px; font-weight:600; text-align:left}
#social-kit-login-form input[type="text"],
#social-kit-login-form input[type="password"]{width:100%; background:#0a0a0c; border:1px solid #ffffff18; border-radius:10px; padding:12px; color:#f5f5f5; font-size:14px}
#social-kit-login-form input[type="text"]:focus,
#social-kit-login-form input[type="password"]:focus{outline:none; border-color:#ffd166; box-shadow:0 0 0 2px #ffd16622}
#social-kit-login-form input[type="submit"]{margin-top:10px; background:#ffd166; color:#121214; border:none; border-radius:12px; padding:12px; font-weight:700; cursor:pointer; transition:background .2s ease}
#social-kit-login-form input[type="submit"]:hover{background:#ffdc7a}
#social-kit-login-form .forgetmenot{display:flex; align-items:center; gap:6px; font-size:12px; color:#c8cbd2}

.social-kit-register{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; background:#161618; border:1px solid #ffffff1a; font-weight:600; text-decoration:none}
.social-kit-register:hover{background:#1b1b1f; text-decoration:none}

@media (max-width:1100px){
  .social-kit-layout{grid-template-columns:250px minmax(0,1fr)}
}

@media (max-width:960px){
  .social-kit{padding:80px 16px 100px}
  .social-kit-layout{grid-template-columns:1fr; gap:24px}
  .social-kit-left{position:static}
  .social-kit-content{order:2}
  .social-kit-login{padding:80px 16px}
  .social-kit-card{padding:30px 24px; box-shadow:0 14px 40px rgba(0,0,0,0.7)}
}

@media (max-width:620px){
  .social-kit-sidebar{padding:24px}
  .social-kit-nav a{font-size:13px}
  .social-kit-card h1{font-size:28px}
}
.form-notice strong{color:#f2f2f2}
.form-actions{display:flex; gap:12px; justify-content:flex-end}
.btn-submit{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 24px; border-radius:12px; background:linear-gradient(180deg, #ffe08a, #ffcc5c); color:#1d1d1f; font-weight:700; border:none; cursor:pointer; font-size:14px; transition:all .2s ease}
.btn-submit:hover{transform:translateY(-1px); box-shadow:0 8px 20px #00000080}
.btn-cancel{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 20px; border-radius:12px; background:#161618; color:#f2f2f2; font-weight:600; border:1px solid #ffffff1a; cursor:pointer; font-size:14px}
.btn-cancel:hover{background:#1b1b1f}

@media (max-width:960px){
  .form-grid{grid-template-columns:1fr}
  .modal-content{padding:24px}
  .form-actions{flex-direction:column-reverse}
  .btn-submit, .btn-cancel{width:100%}
  .ks-cta{flex-direction:column}
  .ks-cta .cta, .ks-cta .btn{width:100%; justify-content:center}
}

/* Header adjustments for mobile */
/* Header adjustments for mobile (removed per user request)
  The rules that hid the header CTA and forced the brand title to a single line
  were intentionally removed to restore the previous behavior. */