:root{
    --ink:#111111; --body:#374151; --muted:#6B7280; --faint:#6B7280;
    --line:#E5E7EB; --line-soft:#F3F4F6; --surface:#FFFFFF; --subtle:#F9FAFB;
    --violet:#8A33D6; --violet-soft:#F9EDFD;
    --success:#2BAC60; --warn:#E89B26;
    --navy-1:#14306A; --navy-2:#0A1733;
    --radius:12px; --radius-sm:8px; --radius-lg:16px;
    --maxw:1180px;
    --shadow-md:0 4px 6px -1px rgba(0,0,0,0.08),0 2px 4px -2px rgba(0,0,0,0.06);
    --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.10),0 4px 6px -4px rgba(0,0,0,0.08);
    --shadow-xl:0 24px 50px -16px rgba(10,23,51,0.30);
  }
  *{box-sizing:border-box;}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
  body{
    margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--ink); background:var(--surface);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-family:'Space Mono','SFMono-Regular',ui-monospace,Menlo,monospace;
    font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--violet);
    display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:""; width:24px; height:2px; border-radius:2px;
    background:currentColor; opacity:0.55; flex-shrink:0;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:600;
    font-size:15px; border-radius:8px; padding:12px 22px; cursor:pointer; border:1px solid transparent;
    transition:background 150ms, color 150ms, border-color 150ms, transform 150ms;
  }
  .btn-primary{background:var(--ink); color:#fff;}
  .btn-primary:hover{background:#000; transform:translateY(-1px);}
  .btn-outline{background:#fff; color:var(--ink); border-color:var(--line);}
  .btn-outline:hover{background:var(--subtle);}
  .btn-light{background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.22);}
  .btn-light:hover{background:rgba(255,255,255,0.2);}
  .btn-white{background:#fff; color:var(--navy-2);}
  .btn-white:hover{transform:translateY(-1px);}
  .btn-violet{background:var(--violet); color:#fff;}
  .btn-violet:hover{background:#8636c9; transform:translateY(-1px);}

  /* ---------------- Header ---------------- */
  header{
    position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.85);
    backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; height:68px;}
  .brand{display:flex; align-items:center; gap:11px;}
  .brand-mark{
    border-radius:9px; background:var(--ink);
    display:flex; align-items:center; justify-content:center; padding:9px 12px;
  }
  .brand-mark img{height:16px; width:auto; display:block;}
  .brand-text{display:flex; flex-direction:column; line-height:1.1;}
  .brand-text b{font-size:15px; font-weight:700; letter-spacing:-0.01em;}
  .brand-text span{font-size:12px; font-weight:500; color:var(--muted);}
  .nav-links{display:flex; align-items:center; gap:32px;}
  .nav-links a{font-size:14.5px; font-weight:500; color:var(--body);}
  .nav-links a:hover{color:var(--ink);}
  .nav-actions{display:flex; align-items:center; gap:12px;}
  .nav-toggle{display:none;}

  /* ---------------- Hero ---------------- */
  .hero{position:relative; padding:84px 0 0; overflow:hidden;}
  .hero::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(circle at 15% 0%, rgba(151,65,225,0.07), transparent 42%),
      radial-gradient(circle at 90% 12%, rgba(17,17,17,0.05), transparent 45%);
  }
  .hero-badge{
    display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
    color:var(--violet); background:var(--violet-soft); border-radius:999px; padding:6px 14px;
    margin-bottom:22px;
  }
  .hero h1{
    font-size:clamp(40px,5.4vw,62px); line-height:1.05; font-weight:800; letter-spacing:-0.035em;
    margin:0 auto; max-width:880px; text-wrap:balance; text-align:center;
  }
  .hero h1 .grad, .grad{
    background:linear-gradient(100deg,var(--violet),#5b3fd6);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero p.sub{
    font-size:19px; line-height:1.6; color:var(--muted); max-width:620px; margin:22px auto 0;
    text-align:center; text-wrap:pretty;
  }
  .hero-cta{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap;}
  .hero-note{
    display:flex; gap:18px; justify-content:center; margin-top:20px; flex-wrap:wrap;
    font-size:13.5px; color:var(--faint);
  }
  .hero-note span{display:inline-flex; align-items:center; gap:7px;}
  .dot-ok{width:7px; height:7px; border-radius:999px; background:var(--success);}

  /* ---------------- Video placeholder ---------------- */
  .video-stage{padding:54px 0 8px;}
  .video-frame{
    position:relative; max-width:1000px; margin:0 auto; aspect-ratio:16/9;
    border-radius:18px; overflow:hidden; border:1px solid var(--line);
    background:linear-gradient(155deg,#1b2a4d,#0a1733);
    box-shadow:var(--shadow-xl);
  }
  .video-frame::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle at 22% 18%, rgba(151,65,225,0.35), transparent 45%),
      radial-gradient(circle at 80% 85%, rgba(52,102,230,0.30), transparent 48%);
  }
  .video-inner{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:18px; color:#fff; text-align:center;
  }
  .play-btn{
    width:84px; height:84px; border-radius:999px; background:rgba(255,255,255,0.95);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 12px 30px -8px rgba(0,0,0,0.5); transition:transform 180ms;
  }
  .play-btn:hover{transform:scale(1.06);}
  .play-btn svg{margin-left:5px;}
  .video-label{font-size:14px; font-weight:600; letter-spacing:0.04em; color:rgba(255,255,255,0.85);}
  .video-sub{font-size:13px; color:rgba(255,255,255,0.55);}
  .video-tag{
    position:absolute; top:16px; left:16px; font-size:11px; font-weight:600; letter-spacing:0.06em;
    text-transform:uppercase; color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:5px 11px;
  }

  /* ---------------- Logos / trust ---------------- */
  .trust{padding:46px 0 10px; text-align:center;}
  .trust p{font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--faint); margin:0 0 22px;}
  .trust-row{display:flex; gap:44px; justify-content:center; align-items:center; flex-wrap:wrap; opacity:0.6;}
  .trust-row b{font-size:20px; font-weight:700; letter-spacing:-0.02em; color:var(--muted);}
  .counters{
    display:flex; justify-content:center; gap:80px; flex-wrap:wrap;
    margin-top:52px; padding-top:44px; border-top:1px solid var(--line-soft);
  }
  .counter{text-align:center;}
  .counter b{
    display:block; font-size:clamp(38px,4.6vw,56px); font-weight:800; letter-spacing:-0.03em; line-height:1;
    background:linear-gradient(120deg,var(--violet),#5b3fd6);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .counter span{display:block; margin-top:12px; font-size:15px; color:var(--muted);}

  /* ---------------- Section heading ---------------- */
  .section{padding:88px 0;}
  .section-head{max-width:680px; margin:0 auto 56px; text-align:center;}
  .section-head .eyebrow::after{
    content:""; width:24px; height:2px; border-radius:2px;
    background:currentColor; opacity:0.55; flex-shrink:0;
  }
  .section-head h2{
    font-size:clamp(30px,3.6vw,42px); line-height:1.1; font-weight:800; letter-spacing:-0.03em;
    margin:14px 0 0;
  }
  .section-head p{font-size:18px; line-height:1.6; color:var(--muted); margin:16px 0 0; text-wrap:pretty;}

  /* ---------------- Value cards ---------------- */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .vcard{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px;
    transition:box-shadow 200ms, transform 200ms, border-color 200ms;
  }
  .vcard:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--line-soft);}
  .vicon{
    width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:var(--violet-soft); color:var(--violet); margin-bottom:20px;
  }
  .vcard h3{font-size:19px; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px;}
  .vcard p{font-size:15px; line-height:1.6; color:var(--muted); margin:0;}

  /* ---------------- Feature split ---------------- */
  .feature{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .feature + .feature{margin-top:96px;}
  .feature.reverse .feature-media{order:-1;}
  .feature-copy .eyebrow{margin-bottom:16px;}
  .feature-copy h3{font-size:30px; line-height:1.12; font-weight:800; letter-spacing:-0.025em; margin:0 0 16px;}
  .feature-copy p{font-size:17px; line-height:1.6; color:var(--muted); margin:0 0 22px;}
  .feature-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px;}
  .feature-list li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--body);}
  .check{
    width:22px; height:22px; border-radius:999px; background:#E0F3E7; color:var(--success);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  }

  /* mock surfaces in feature media */
  .mock{
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;
    box-shadow:var(--shadow-lg);
  }
  .mock-head{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
  .mock-ava{
    width:44px; height:44px; border-radius:999px; flex-shrink:0; color:#fff; font-weight:700; font-size:15px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#111,#3b3b3b);
  }
  .mock-ava.v{background:linear-gradient(135deg,var(--violet),#5b3fd6);}
  .mock-name{font-size:15px; font-weight:700;}
  .mock-role{font-size:13px; color:var(--muted);}
  .pill{
    font-size:11px; font-weight:700; border-radius:999px; padding:4px 10px; margin-left:auto;
    background:var(--warn); color:#fff;
  }
  .pill.ok{background:#E0F3E7; color:var(--success);}
  .mock-row{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line-soft); font-size:14px;}
  .mock-row:first-of-type{border-top:none;}
  .mock-row .lab{color:var(--muted);}
  .stars{display:inline-flex; gap:2px; color:var(--warn);}
  .mbtns{display:flex; gap:8px; margin-top:18px;}
  .mbtn{flex:1; text-align:center; padding:9px 0; border-radius:8px; font-size:13px; font-weight:600;}
  .mbtn.dark{background:var(--ink); color:#fff;}
  .mbtn.soft{background:var(--subtle); color:var(--ink);}

  .comment{display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line-soft);}
  .comment:first-child{border-top:none;}
  .c-ava{width:32px; height:32px; border-radius:999px; flex-shrink:0; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;}
  .c-body b{font-size:13.5px;}
  .c-body p{font-size:13.5px; color:var(--body); margin:3px 0 0; line-height:1.5;}

  /* ---------------- Realistic portal primitives (match Portal.html) ---------------- */
  /* Amber SVG stars - mirror StarsInline in SharePieces.jsx */
  .rstars{display:inline-flex; gap:3px; align-items:center;}
  .rstars i{width:15px; height:15px; display:block; background-size:contain; background-repeat:no-repeat; background-position:center;}
  .rstars.sm i{width:11px; height:11px;}
  .rstars i.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5B335'%3E%3Cpath d='M12 3.2l2.7 5.5 6.1.9-4.4 4.3 1 6L12 17.05 6.6 19.9l1-6L3.2 9.6l6.1-.9z'/%3E%3C/svg%3E");}
  .rstars i.off{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B335' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.5 6.1.9-4.4 4.3 1 6L12 17.05 6.6 19.9l1-6L3.2 9.6l6.1-.9z'/%3E%3C/svg%3E");}

  /* Status pills - dot + subtle bg, weight 500 (mirror StatusPill) */
  .rpill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:999px; font-size:12px; font-weight:500; line-height:1.4; white-space:nowrap;}
  .rpill .d{width:6px; height:6px; border-radius:999px; flex-shrink:0;}
  .rpill.todo{background:#FBF0DB; color:#9E661A;} .rpill.todo .d{background:#E89B26;}
  .rpill.done{background:#E0F3E7; color:#1F7A44;} .rpill.done .d{background:#2BAC60;}
  .rpill.open{background:#F5F5F5; color:#111111;} .rpill.open .d{background:#111111;}
  .rpill.newp{background:#F3F4F6; color:#6B7280;} .rpill.newp .d{background:#9CA3AF;}
  /* Stage chip - violet (mirror stage pill) */
  .rchip{padding:2px 8px; border-radius:999px; background:#F9EDFD; color:#8A33D6; font-size:11.5px; font-weight:500; white-space:nowrap;}

  /* ShareRow - one row in the shared-profiles list */
  .sp-mock{display:flex; flex-direction:column; gap:12px;}
  .sprow{
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px;
    display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:16px;
    box-shadow:0 1px 2px 0 rgba(18,41,88,0.04);
  }
  .sprow.hl{box-shadow:var(--shadow-lg);}
  .sprow-ava{
    width:44px; height:44px; border-radius:999px; background:#111111; color:#fff;
    font-size:14px; font-weight:600; letter-spacing:0.5px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .sprow-name{font-size:16px; font-weight:600; color:#111111; letter-spacing:-0.1px;}
  .sprow-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-top:7px;}
  .sprow-meta .role{color:#111111; font-weight:500;}
  .sprow-meta .sep{color:#D1D5DB;}
  .sprow-sub{font-size:12.5px; color:var(--faint); margin-top:7px;}
  .sprow-eval{display:flex; flex-direction:column; align-items:flex-end; gap:5px;}
  .sprow-eval .lab{font-size:10.5px; color:var(--muted); font-weight:500; letter-spacing:0.3px; text-transform:uppercase;}

  /* Comment thread - mirror candidate/panel-comments.jsx */
  .rcmt{display:flex; gap:12px; align-items:flex-start;}
  .rcmt-ava{width:34px; height:34px; border-radius:999px; flex-shrink:0; color:#fff; font-size:12.5px; font-weight:600; display:flex; align-items:center; justify-content:center;}
  .rcmt-ava.sm{width:28px; height:28px; font-size:11px;}
  .rcmt-body{flex:1; min-width:0;}
  .rcmt-head{display:flex; align-items:baseline; gap:8px;}
  .rcmt-who{font-size:13.5px; font-weight:600;}
  .rcmt-role{font-size:12px; color:var(--faint);}
  .rcmt-when{margin-left:auto; font-size:11.5px; color:var(--faint);}
  .rcmt-txt{font-size:13.5px; color:var(--body); line-height:1.55; margin:4px 0 0;}
  .rcmt-replies{border-left:2px solid var(--line-soft); margin:12px 0 0 16px; padding-left:14px;}
  .rcmt-status{display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--muted);}

  /* Comment item - mirror ATS comment row (edit badge + role pill + actions + body box) */
  .tcmt{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;}
  .tcmt + .tcmt{margin-top:18px;}
  .tcmt-badge{width:34px; height:34px; border-radius:10px; background:var(--violet-soft); color:var(--violet); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .tcmt-main{min-width:0;}
  .tcmt-head{display:flex; align-items:center; gap:10px;}
  .tcmt-ava{width:30px; height:30px; border-radius:999px; background:#111111; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.3px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .tcmt-name{font-size:15px; font-weight:700; color:#111111; letter-spacing:-0.01em;}
  .tcmt-pill{font-size:11px; font-weight:600; border-radius:999px; padding:3px 9px; letter-spacing:0.02em;}
  .tcmt-pill.hm{background:#E0F3E7; color:#1F7A44;}
  .tcmt-pill.rec{background:#F3F4F6; color:#4B5563;}
  .tcmt-when{margin-left:auto; font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:#646C7C; white-space:nowrap;}
  .tcmt-actions{display:flex; align-items:center; gap:12px; color:#9CA3AF; margin-left:14px;}
  .tcmt-body{margin-top:10px; background:#F5F5F5; border-radius:12px; padding:14px 16px; font-size:14.5px; color:#111111; line-height:1.55;}

  /* Full shared-profiles app view (mirror SharedProfilesList.jsx) */
  .sp-app{background:#F9FAFB; border:1px solid var(--line); border-radius:18px; padding:22px 20px; box-shadow:var(--shadow-lg);}
  .sp-app-title{font-size:22px; font-weight:800; letter-spacing:-0.02em; color:#111111; line-height:1.1;}
  .sp-app-sub{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.5;}
  .sp-app-search{display:flex; align-items:center; gap:10px; margin-top:16px; padding:11px 14px; background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--faint); font-size:13.5px;}
  .sp-app-search svg{color:#9CA3AF; flex-shrink:0;}
  .sp-app-tabs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px;}
  .sp-tab{display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; border:1px solid var(--line); background:#fff; color:var(--body);}
  .sp-tab b{font-weight:600; color:var(--faint);}
  .sp-tab.active{background:#111111; color:#fff; border-color:#111111;}
  .sp-tab.active b{color:rgba(255,255,255,0.55);}
  .sp-group{display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:13px; color:var(--body);}
  .sp-group b{font-weight:600; color:#111111;}
  .sp-group svg{color:#9CA3AF;}
  .sp-group-head{display:flex; align-items:center; gap:10px; margin:20px 0 12px; font-size:17px; font-weight:700; color:#111111;}
  .sp-group-head .cnt{font-size:12px; font-weight:600; color:var(--muted); background:#EEF0F2; border-radius:999px; padding:2px 9px;}
  .sp-group-head svg{color:#9CA3AF;}

  /* 2FA code card (mirror LoginPage StateCode) */
  .login-mock{background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; box-shadow:var(--shadow-lg);}
  .lm-title{font-size:26px; line-height:32px; font-weight:700; letter-spacing:-0.01em; color:#111111; margin:0 0 24px;}
  .lm-code{display:flex; gap:10px; margin-bottom:22px;}
  .lm-code i{flex:1; height:56px; border:1px solid var(--line); border-radius:8px; background:#fff; display:block;}
  .lm-btn{width:100%; height:48px; border:none; border-radius:8px; background:#111111; color:#fff; font-size:15px; font-weight:600; font-family:inherit; margin-bottom:18px;}
  .lm-foot{display:flex; flex-direction:column; gap:10px;}
  .lm-resend{font-size:13px; color:var(--muted);}
  .lm-resend strong{color:#111111; font-weight:600;}
  .lm-valid{font-size:13px; color:var(--faint);}

  /* ---------------- GDPR / RODO seal ---------------- */
  .sec-media{position:relative;}
  .gdpr-seal{
    position:absolute; left:-30px; bottom:-26px; z-index:3;
    display:flex; align-items:center; gap:14px;
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:14px 20px 14px 14px; box-shadow:var(--shadow-lg);
  }
  .eu-seal{
    position:relative; width:54px; height:54px; border-radius:999px; flex-shrink:0;
    background:radial-gradient(circle at 50% 40%, #12379E, #0A2470);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.10);
  }
  .eu-seal i{position:absolute; top:50%; left:50%; color:#F5C518; font-size:8px; line-height:1;}
  .eu-seal .core{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    color:#fff; display:flex; align-items:center; justify-content:center;
  }
  .gdpr-seal .txt b{display:block; font-size:15px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); line-height:1.2;}
  .gdpr-seal .txt span{font-size:12.5px; color:var(--muted);}
  @media (max-width:820px){
    .gdpr-seal{left:0; bottom:-20px; padding:12px 16px 12px 12px;}
  }

  /* ---------------- How it works (timeline) ---------------- */
  .timeline{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:12px;}
  .timeline::before{
    content:""; position:absolute; top:33px; left:17%; right:17%; height:3px; border-radius:2px; z-index:0;
    background:linear-gradient(90deg, var(--violet), #5b3fd6); opacity:0.35;
  }
  .tl-item{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px;}
  .tl-node{
    position:relative; width:68px; height:68px; border-radius:999px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--violet), #5b3fd6); color:#fff;
    box-shadow:0 12px 24px -8px rgba(151,65,225,0.55);
  }
  .tl-item h3{font-size:18px; font-weight:700; margin:24px 0 8px; letter-spacing:-0.01em;}
  .tl-item p{font-size:15px; line-height:1.6; color:var(--muted); margin:0; max-width:300px;}

  /* ---------------- Stats ---------------- */
  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center;}
  .stat b{display:block; font-size:46px; font-weight:800; letter-spacing:-0.03em; background:linear-gradient(120deg,var(--violet),#5b3fd6); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .stat span{font-size:15px; color:var(--muted);}

  /* ---------------- Phone mock (mirror real mobile shared-profiles) ---------------- */
  .phone{width:264px; margin:0 auto; background:#111; border-radius:38px; padding:9px; box-shadow:var(--shadow-xl);}
  .phone-screen{position:relative; background:#F9FAFB; border-radius:30px; overflow:hidden; height:474px; display:flex; flex-direction:column;}
  .phone-notch{position:absolute; top:0; left:50%; transform:translateX(-50%); width:104px; height:20px; background:#111; border-radius:0 0 12px 12px; z-index:2;}
  .phone-bar{display:flex; align-items:center; gap:9px; padding:18px 14px 12px; background:#fff; border-bottom:1px solid var(--line);}
  .pb-mark{background:#111111; border-radius:7px; padding:5px 7px; display:flex; align-items:center; flex-shrink:0;}
  .pb-mark img{height:9px; width:auto; display:block;}
  .pb-brand{display:flex; flex-direction:column; line-height:1.05;}
  .pb-brand b{font-size:11px; font-weight:700; letter-spacing:-0.01em;}
  .pb-brand span{font-size:9px; font-weight:500; color:var(--muted);}
  .pb-user{margin-left:auto; display:flex; align-items:center; gap:3px;}
  .pb-ava{width:24px; height:24px; border-radius:999px; background:#111111; color:#fff; font-size:8.5px; font-weight:600; display:flex; align-items:center; justify-content:center;}
  .pb-user svg{color:#9CA3AF;}
  .phone-body{padding:12px 12px 0; display:flex; flex-direction:column; overflow:hidden;}
  .mgroup{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#111111; margin:4px 2px 9px;}
  .mgroup .cnt{font-size:9.5px; font-weight:600; color:var(--muted); background:#EEF0F2; border-radius:999px; padding:1px 6px;}
  .mgroup svg{color:#9CA3AF;}
  .mcard{background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 14px; box-shadow:0 1px 2px 0 rgba(18,41,88,0.04);}
  .mcard + .mcard{margin-top:10px;}
  .mcard-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .mcard-name{font-size:14px; font-weight:700; color:#111111; letter-spacing:-0.2px;}
  .mcard-meta{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11.5px; color:#374151; margin-top:7px;}
  .mcard-meta .sep{color:#D1D5DB;}
  .mcard-sub{display:flex; align-items:center; gap:5px; font-size:11px; color:#9CA3AF; margin-top:6px; line-height:1.5;}
  .mcard-eval{margin-top:11px; padding-top:11px; border-top:1px solid var(--line-soft);}
  .mcard-eval .lab{font-size:9.5px; color:var(--muted); font-weight:600; letter-spacing:0.4px; text-transform:uppercase; display:block; margin-bottom:6px;}
  .mcard .rpill{font-size:10px; padding:2px 8px 2px 6px;} .mcard .rpill .d{width:5px; height:5px;}
  .mcard .rchip{font-size:10px; padding:1px 7px;}

  /* ---------------- Plan / access cards ---------------- */
  .plan-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;}
  .plan{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; display:flex; flex-direction:column;}
  .plan.hl{border:2px solid var(--violet); box-shadow:var(--shadow-lg); overflow:hidden;}
  .plan-tag{display:inline-flex; align-self:flex-start; font-size:13px; font-weight:600; color:var(--violet); background:var(--violet-soft); border-radius:999px; padding:7px 16px; margin-bottom:22px;}
  .plan h3{font-size:26px; font-weight:800; letter-spacing:-0.025em; margin:0 0 14px; line-height:1.14;}
  .plan p{font-size:16px; line-height:1.6; color:var(--muted); margin:0 0 24px; text-wrap:pretty;}
  .plan-price{margin-top:auto;}
  .plan-price .lead{display:block; font-size:14px; color:var(--faint); margin-bottom:6px;}
  .plan-price .row{display:flex; align-items:baseline; gap:8px;}
  .plan-price .amt{font-size:46px; font-weight:800; letter-spacing:-0.03em; color:var(--ink); line-height:1;}
  .plan-price .amt.free{background:linear-gradient(120deg,var(--violet),#5b3fd6); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .plan-price .cur{font-size:20px; font-weight:700; color:var(--muted);}
  .plan-price .per{font-size:16px; font-weight:600; color:var(--faint);}
  .plan-note{font-size:14px; color:var(--faint); margin:12px 0 0; line-height:1.5;}
  .plan .btn{margin-top:24px; justify-content:center;}
  .plan-ribbon{position:absolute; top:22px; right:-46px; transform:rotate(45deg); background:var(--violet); color:#fff; font-size:12px; font-weight:700; letter-spacing:0.07em; padding:7px 54px;}

  /* ---------------- CTA band ---------------- */
  .cta-band{position:relative; overflow:hidden; border-radius:24px; padding:64px 56px; color:#fff; text-align:center;
    background:linear-gradient(150deg,var(--navy-1),var(--navy-2));}
  .cta-band::before{content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 18% 10%, rgba(151,65,225,0.4),transparent 42%),radial-gradient(circle at 85% 95%, rgba(52,102,230,0.3),transparent 45%);}
  .cta-band > *{position:relative;}
  .cta-band h2{font-size:clamp(30px,4vw,44px); line-height:1.1; font-weight:800; letter-spacing:-0.03em; margin:0 auto; max-width:640px; text-wrap:balance;}
  .cta-band p{font-size:18px; color:rgba(255,255,255,0.78); margin:18px auto 0; max-width:520px;}
  .cta-band .hero-cta{margin-top:32px;}

  /* ---------------- FAQ ---------------- */
  .faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
  .faq-item{border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease;}
  .faq-item[open]{border-color:#E3D2F6; box-shadow:var(--shadow-lg);}
  .faq-item summary{list-style:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; gap:16px; font-size:17px; font-weight:700; letter-spacing:-0.01em; color:var(--ink);}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-q{flex:1; text-wrap:balance;}
  .faq-ico{width:26px; height:26px; flex-shrink:0; border-radius:8px; background:var(--violet-soft); color:var(--violet); display:flex; align-items:center; justify-content:center; transition:transform .25s ease;}
  .faq-item[open] .faq-ico{transform:rotate(45deg);}
  .faq-a{padding:0 24px 22px 24px; margin:0; font-size:15.5px; line-height:1.65; color:var(--muted); text-wrap:pretty;}
  @media (max-width:820px){
    .faq-a{padding-left:24px;}
  }

  /* ---------------- Footer ---------------- */
  footer{border-top:1px solid var(--line); padding:56px 0 36px; margin-top:0;}
  .foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px;}
  .foot-grid p{font-size:14px; color:var(--muted); line-height:1.6; margin:16px 0 0; max-width:280px;}
  .socials{display:flex; gap:10px; margin-top:24px;}
  .socials a{
    width:42px; height:42px; border-radius:10px; background:var(--subtle); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--ink);
    transition:background 150ms, transform 150ms, border-color 150ms;
  }
  .socials a:hover{background:var(--line-soft); transform:translateY(-1px);}
  .foot-col h3{font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--faint); margin:0 0 16px;}
  .foot-col a{display:block; font-size:14.5px; color:var(--body); margin-bottom:11px;}
  .foot-col a:hover{color:var(--ink);}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--faint); flex-wrap:wrap; gap:12px;}
  .foot-legal{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .foot-legal .sep{color:var(--line);}
  .foot-legal a{color:var(--body); font-weight:500;}
  .foot-legal a:hover{color:var(--ink);}
  .powered{color:var(--faint);}
  .powered b{color:var(--ink); font-weight:700;}

  /* ---------------- Responsive ---------------- */
  @media (max-width:900px){
    .grid-3,.timeline,.stats,.plan-grid{grid-template-columns:1fr;}
    .timeline{gap:36px;}
    .timeline::before{display:none;}
    .feature{grid-template-columns:1fr; gap:36px;}
    .feature.reverse .feature-media{order:0;}
    .foot-grid{grid-template-columns:1fr 1fr; gap:32px;}
    .nav-links{display:none;}
  }
  @media (max-width:560px){
    .wrap{padding:0 20px;}
    .section{padding:60px 0;}
    .cta-band{padding:44px 26px;}
    .foot-grid{grid-template-columns:1fr;}
  }

/* ---------------- Overrides ---------------- */
:root{
    /* palette */
    --ink:#0E1526; --body:#3B4453; --muted:#5B6474; --faint:#646C7C;
    --line:#E7E9EE; --line-soft:#F1F3F6; --surface:#FFFFFF; --subtle:#F4F5F7;
    --violet:#1F57E6;            /* primary accent remapped to Traffit blue */
    --violet-soft:#EAF0FF;
    --blue:#2563EB; --purple:#6A3BEE; --yellow:#F6C21B; --green:#12B981; --coral:#F0503A;
    --success:#12B981; --warn:#E89B26;
    --navy-1:#16204A; --navy-2:#0B1020;
    /* rounder + softer */
    --radius:16px; --radius-sm:12px; --radius-lg:24px;
    --shadow-md:0 8px 20px rgba(14,21,38,.06);
    --shadow-lg:0 14px 34px rgba(14,21,38,.10);
    --shadow-xl:0 26px 60px -18px rgba(11,16,32,.34);
    /* type roles */
    --font-display:"Archivo","Inter",system-ui,sans-serif;
    --font-serif:"Newsreader",Georgia,serif;
    --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--surface);}

  /* ---- Display headings (heavy grotesk) ---- */
  .hero h1,.section-head h2,.feature-copy h3,.vcard h3,.plan h3,.cta-band h2,
  .tl-item h3,.sp-app-title,.lm-title{
    font-family:var(--font-display); letter-spacing:-0.02em; color:var(--ink);
  }
  .hero h1{font-size:clamp(42px,6vw,76px); line-height:0.98; font-weight:900; letter-spacing:-0.03em; max-width:960px;}
  .section-head h2{font-size:clamp(32px,4.4vw,54px); line-height:1.03; font-weight:800;}
  .feature-copy h3{font-size:clamp(26px,3vw,38px); line-height:1.06; font-weight:800;}
  .vcard h3,.plan h3{font-weight:800;}

  /* ---- Serif-italic accent words ---- */
  .grad{
    font-family:var(--font-serif) !important; font-style:italic; font-weight:500; letter-spacing:0;
    background:linear-gradient(100deg,var(--blue),var(--purple));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* ---- Monospace eyebrow with slash ---- */
  .eyebrow{font-family:var(--font-mono); color:var(--faint); font-weight:700; letter-spacing:0.14em;}
  .eyebrow::before{content:"/"; width:auto; height:auto; background:none; border-radius:0; opacity:1; margin-right:4px; color:var(--faint);}
  .section-head .eyebrow::after{display:none;}
  .trust p{font-family:var(--font-mono); letter-spacing:0.14em;}
  .trust p::before{content:"/ "; color:var(--faint);}

  /* ---- Buttons → pills ---- */
  .btn{border-radius:999px; padding:15px 26px; font-weight:600;}
  .btn-primary{background:var(--ink); color:#fff;}
  .btn-primary:hover{background:#000;}
  .btn-violet{background:var(--blue); color:#fff;}
  .btn-violet:hover{background:#1f57e6;}
  .btn-white{background:#fff; color:var(--ink);}
  /* arrow rendered as a circular badge */
  .hero .btn-primary svg{background:#fff; color:var(--blue); border-radius:999px; padding:5px; width:28px; height:28px; box-sizing:border-box; margin-left:2px;}

  /* ---- Cards, icons, sections ---- */
  .section{padding:clamp(64px,9vw,120px) 0;}
  .vcard,.plan{border-radius:var(--radius-lg);}
  .vcard:hover{box-shadow:var(--shadow-lg);}
  .vicon{background:var(--violet-soft); color:var(--blue); border-radius:14px;}
  .hero-badge{background:var(--violet-soft); color:var(--blue);}

  /* ---- Colored feature blocks (blue → dark → yellow → purple) ---- */
  .feature[class*="feat-"]{
    border-radius:28px; padding:clamp(28px,4vw,52px); gap:clamp(32px,4vw,56px);
    box-shadow:var(--shadow-lg);
  }
  .feature + .feature[class*="feat-"]{margin-top:40px;}
  .feature.feat-blue{background:var(--blue); color:#fff;}
  .feature.feat-dark{background:var(--ink); color:#fff;}
  .feature.feat-purple{background:var(--purple); color:#fff;}
  .feature.feat-yellow{background:var(--yellow); color:var(--ink);}
  .feature[class*="feat-"] .feature-copy h3{color:inherit;}
  .feature.feat-blue .feature-copy p,
  .feature.feat-dark .feature-copy p,
  .feature.feat-purple .feature-copy p{color:rgba(255,255,255,0.92);}
  .feature.feat-yellow .feature-copy p{color:#4A3D08;}
  .feature.feat-blue .feature-list li,
  .feature.feat-dark .feature-list li,
  .feature.feat-purple .feature-list li{color:#fff;}
  .feature.feat-yellow .feature-list li{color:var(--ink);}
  .feature[class*="feat-"] .check{background:rgba(255,255,255,0.92); color:var(--blue);}
  .feature.feat-yellow .check{background:var(--ink); color:var(--yellow);}
  .feature.feat-dark .check{color:var(--ink);}

  /* ---- Results / stats — enclosed colored frames (Traffit block style) ---- */
  .stats{text-align:left; gap:clamp(16px,2vw,24px);}
  @media (min-width:901px){.stats{grid-template-columns:repeat(3,1fr);}}
  .stat{
    padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,30px);
    border-radius:24px; border:none; box-shadow:var(--shadow-lg);
    display:flex; flex-direction:column; gap:12px; color:#fff;
    position:relative; overflow:hidden;
  }
  .stat:nth-child(1){background:var(--blue); color:#fff;}
  .stat:nth-child(2){background:var(--ink); color:#fff;}
  .stat:nth-child(3){background:var(--yellow); color:var(--ink);}
  .stat b{font-family:var(--font-display); font-weight:900; font-size:clamp(46px,5.2vw,62px);
    line-height:0.92; letter-spacing:-0.03em; color:inherit; -webkit-text-fill-color:currentColor; background:none;}
  .stat span{font-size:clamp(14px,1.05vw,16px); color:inherit; opacity:0.95; font-weight:500; line-height:1.4;}
  .counter b{font-family:var(--font-display); font-weight:900;}

  /* ---- Menu logo: white CDN mark on a black chip (same asset as SPA TopBar) ---- */
  /* Chip geometry matches the old baked-in PNG chip: 56x28 with a ~10px wordmark.
     #111111 literal, not var(--ink): the theme override remaps --ink to navy.
     color:#fff only helps browsers that paint alt text — Chrome draws a broken-image
     icon inside the chip instead, so a CDN outage degrades to a bare chip either way. */
  .nav .brand-mark{background:#111111; color:#fff; padding:4px 8px; border-radius:8px;}
  .nav .brand-mark img{height:20px; width:auto; display:block;}

  /* ---- Timeline, plan, faq accents on brand blue ---- */
  .tl-node{box-shadow:0 12px 24px -8px rgba(47,107,255,0.5);}
  .plan.hl{border-color:var(--blue);}
  .plan-ribbon{background:var(--blue);}
  .plan-tag{background:var(--violet-soft); color:var(--blue);}
  .faq-item[open]{border-color:#CFE0FF;}
  .faq-ico{background:var(--violet-soft); color:var(--blue);}

  /* ---- Header brand + rounded frames ---- */
  .brand-mark{border-radius:10px;}
  .video-frame{border-radius:var(--radius-lg);}
  .cta-band{border-radius:28px;}

  @media (max-width:900px){
    .stats{text-align:left;}
  }

  /* ---- Keep the black (non-accent) part of centered headings on one line ---- */
  .hero h1,.section-head h2{max-width:none; text-wrap:normal;}
  .section-head{max-width:1140px !important;}
  .hero h1{font-size:clamp(34px,5vw,58px);}
  .section-head h2{font-size:clamp(26px,4vw,46px);}
  .oneline{white-space:normal;}
  @media (min-width:900px){ .oneline{white-space:nowrap;} }

  /* ---- Real Traffit logo (remove the old dark chip) ---- */
  .brand-mark{background:transparent; padding:0; border-radius:0;}
  .brand-mark img{height:26px; width:auto;}
  /* Footer: same white CDN mark as the nav, so the black chip comes back */
  footer .brand-mark{background:#111111; color:#fff; padding:3px 7px; border-radius:7px;}
  footer .brand-mark img{height:17px; display:block;}
  .pb-mark{background:transparent; padding:0;}
  .pb-mark img{height:15px; width:auto;}

  /* ---- Client logos in the trust row (optically balanced) ---- */
  .trust-row{opacity:1; gap:clamp(30px,4.5vw,64px); align-items:center;}
  .trust-row img{
    width:auto; object-fit:contain; display:block;
    filter:grayscale(1); opacity:0.62; transition:filter .2s ease, opacity .2s ease;
  }
  .trust-row img:hover{filter:grayscale(0); opacity:1;}
  /* per-logo heights so each reads at a similar visual weight */
  .trust-row img:nth-child(1){height:58px; max-width:140px;}  /* Kuchnia Vikinga — detailed badge, needs more height */
  .trust-row img:nth-child(2){height:38px; max-width:170px;}  /* Kubota — bold wordmark + icon */
  .trust-row img:nth-child(3){height:60px; max-width:200px;}  /* x-kom — lots of padding in the file, needs extra size */
  .trust-row img:nth-child(4){height:44px; max-width:100px;}  /* YES — tall serif */
  .trust-row img:nth-child(5){height:36px; max-width:140px;}  /* zen */
  @media (max-width:560px){
    .trust-row img:nth-child(1){height:46px;}
    .trust-row img:nth-child(2){height:30px;}
    .trust-row img:nth-child(3){height:48px;}
    .trust-row img:nth-child(4){height:36px;}
    .trust-row img:nth-child(5){height:29px;}
  }

  /* ---- Floating hero fragments (reused UI bits around the headline) ---- */
  .hero > .wrap{position:relative; padding-top:clamp(12px,5vh,52px); padding-bottom:clamp(24px,7vh,72px);}
  .hero > .wrap > h1,
  .hero > .wrap > .sub,
  .hero > .wrap > .hero-cta,
  .hero > .wrap > .hero-note{position:relative; z-index:3;}
  .hero-floaters{position:absolute; inset:0; z-index:1; pointer-events:none;}
  .hero-float{position:absolute; pointer-events:none; opacity:0.88;}
  .hero-float .ff{animation:hero-bob 6s ease-in-out infinite; will-change:transform;}
  @keyframes hero-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
  .hero-float .sprow{width:270px; background:#fff;}
  .hero-float .gdpr-seal{position:static; box-shadow:var(--shadow-lg);}
  .hero-chip{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow-lg);}
  .hero-chip-lab{font-size:12px; font-weight:600; color:var(--muted);}
  .hero-pill{display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 12px; box-shadow:var(--shadow-lg);}
  .hero-float.hf-1{top:210px; left:-14px; transform:rotate(-4deg) scale(.88);}
  .hero-float.hf-2{top:132px; right:-10px; transform:rotate(3deg) scale(.9);}
  .hero-float.hf-3{bottom:0; left:0; transform:rotate(3deg) scale(.9);}
  .hero-float.hf-4{bottom:22px; right:2%; transform:rotate(-3deg) scale(.96);}
  .hero-float.hf-2 .ff{animation-duration:5.2s; animation-delay:.35s;}
  .hero-float.hf-3 .ff{animation-duration:6.8s; animation-delay:.8s;}
  .hero-float.hf-4 .ff{animation-duration:5.6s; animation-delay:.2s;}
  @media (max-width:1024px){ .hero-floaters{display:none;} }
  @media (prefers-reduced-motion:reduce){ .hero-float .ff{animation:none;} }

  /* ---- Sticky stacking cards (the 3 colored feature splits) ---- */
  @media (min-width:900px){
    .feature-stack{position:relative;}
    .feature-stack .feature[class*="feat-"]{
      position:sticky;
      will-change:transform;
      transition:transform .15s linear, opacity .15s linear;
    }
    .feature-stack .feature:nth-of-type(1){top:92px;}
    .feature-stack .feature:nth-of-type(2){top:116px;}
    .feature-stack .feature:nth-of-type(3){top:140px;}
    .feature-stack .feature + .feature[class*="feat-"]{margin-top:56px;}
    /* breathing room so the last card can settle before the section ends */
    .feature-stack::after{content:""; display:block; height:24px;}
  }
  @media (prefers-reduced-motion:reduce){
    .feature-stack .feature[class*="feat-"]{position:static; transform:none !important; opacity:1 !important;}
  }

/* ---------------- Arcade demo facade (landing-real-content) ---------------- */
/* Proporcje wrappera = proporcje TEGO nagrania Arcade (2048x1070 ->
   aspectRatio 0.52265625 z share page). BEZ +41px ze snippetu Arcade — ich embed
   centruje content w iframe i zostawia nadmiar PRZEZROCZYSTY (zmierzone
   pikselowo), wiec kazdy zapas wysokosci = widoczne paski tla .video-frame.
   Przy re-nagraniu demo zaktualizuj wartosc. */
/* % padding liczy sie od szerokosci RODZICA — zawezamy .wrap sekcji demo do
   1000px contentu (1064 = 1000 + 2x32 padding), zeby baza % = szerokosc frame */
.video-stage .wrap{max-width:1064px;}
.video-frame{aspect-ratio:auto; height:0; padding-bottom:52.265625%; isolation:isolate;}
/* Po zaladowaniu arcade zdejmujemy dekoracje wrappera (landing.js dodaje .live) —
   demo renderuje sie bez ramki, wiec nie ma czego przycinac (Safari clipping). */
.video-frame.live{border:0; border-radius:0; box-shadow:none; background:none;}
.video-frame.live::before{display:none;}
/* Mobile: demo full-bleed (padding .wrap zjadal 40px z 375) i wyzszy wrapper —
   arcade w trybie mobile renderuje pionowa karuzele krokow (~66% wys/szer,
   zmierzone), nie desktopowe 52%. Nadmiar wysokosci po .live jest przezroczysty. */
@media (max-width:560px){
  .video-stage .wrap{padding:0; max-width:none;}
  .video-frame{border-radius:0; border-left:0; border-right:0; padding-bottom:72%;}
}
.video-facade{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; color:#fff; text-align:center;
  text-decoration:none; cursor:pointer;}
.video-facade:hover .play-btn{transform:scale(1.06);}
.video-facade:focus-visible{outline:3px solid #fff; outline-offset:-4px; border-radius:18px;}
.video-facade .video-label{display:block; font-size:15px;}
.video-facade .video-sub{display:block; margin-top:6px;}

/* ---------------- Mobile fixes (defekty odziedziczone z eksportu designu) ---------------- */
/* Ikony akcji (dekoracyjne, mock) chowamy, nagłówek może się zawijać — bez tego
   .tcmt-actions wystaje ~80px poza viewport i strona dostaje horizontal scroll. */
@media (max-width:560px){
  .tcmt-head{flex-wrap:wrap;}
  .tcmt-actions{display:none;}
}
/* Mock "Sarah": widget oceny wciska się w wiersz roli ("Senior / iOS ★★★ / Engineer").
   Poniżej 560px ocena schodzi do własnego wiersza pod treścią. */
@media (max-width:560px){
  .sprow{grid-template-columns:44px 1fr;}
  .sprow-eval{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between;}
}
/* Tap targets ≥44px (fe-conventions mobile-first): linki footera miały ~22px,
   switcher języka i ikony social ~42px. */
@media (max-width:900px){
  .foot-col a{padding:11px 0; margin-bottom:0;}
  .foot-lang a{min-height:44px; display:inline-flex; align-items:center;}
  .socials a{width:44px; height:44px;}
}

/* ---------------- Skip link + language switcher (landing-real-content) ---------------- */
.skip-link{position:absolute; left:-9999px; top:0; z-index:10000; background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:0 0 10px 0; font-weight:600; font-size:14px;}
.skip-link:focus{left:0;}
.foot-lang{display:flex; gap:4px; align-items:center;}
.foot-lang a{color:var(--body); font-weight:500; padding:11px 14px; border-radius:8px;}
.foot-lang a:hover{color:var(--ink);}
.foot-lang a[aria-current]{color:var(--ink); font-weight:700; background:var(--subtle); border:1px solid var(--line);}