/* Benzo Marketing — shared across index.html, kontakt.html and the case
   study pages. Everything here is used by more than one page: design tokens,
   base type, buttons, the capsule header with the Omega medallion, and the
   footer furniture. Page-specific rules stay in that page's own <style>.

   Loaded from the same position the inline <style> used to occupy, because
   Tailwind's Play CDN injects Preflight at runtime and cascade order matters. */

  :root{
    --ink:#0D0D0D; --black:#000; --navy:#000080; --blue:#04A7E7; --blue-hi:#28b8f5;
    --white:#fff; --muted:rgba(255,255,255,.62); --muted2:rgba(255,255,255,.4);
    --line:rgba(255,255,255,.11);
    --shadow-card:0 24px 60px -28px rgba(4,167,231,.4), 0 6px 18px -10px rgba(0,0,0,.6);
    --ease:cubic-bezier(.16,1,.3,1);
  }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--ink); color:var(--white);
    font-family:'Montserrat',system-ui,sans-serif; font-weight:400;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    /* clip, not hidden: `hidden` makes body a scroll container, and every
       position:sticky descendant then resolves against a box that never scrolls,
       so it silently never pins (the founder portrait and the FAQ column both
       sat in flow because of this). `clip` suppresses the same horizontal
       overflow without creating a scroll container. */
    overflow-x:clip;
  }
  ::selection{ background:var(--blue); color:#000; }

  /* Grain */
  body::before{
    content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
    opacity:.04; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Type */
  .display{ font-weight:900; letter-spacing:-.035em; line-height:.94; }
  .h-sec{ font-weight:800; letter-spacing:-.025em; line-height:1.02; }
  .label{ font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; }
  .body-m{ font-weight:400; line-height:1.7; color:var(--muted); }
  .wordmark{ font-weight:800; letter-spacing:-.02em; }

  /* Buttons */
  .btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:.8rem;
    text-transform:uppercase; letter-spacing:.1em; padding:.9rem 1.7rem; border-radius:9999px;
    cursor:pointer; transition:transform .4s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease); }
  .btn:active{ transform:translateY(1px); }
  .btn:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
  .btn-primary{ background:var(--blue); color:#001018; box-shadow:0 14px 30px -14px rgba(4,167,231,.7); }
  .btn-primary:hover{ background:var(--blue-hi); transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(4,167,231,.8); }
  .btn-outline{ background:transparent; color:var(--white); border:1px solid var(--line); }
  .btn-outline:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
  /* deliberately muted "walk-away" button — never rewards the bad choice with brand colour */
  .btn-ghost{ background:transparent; color:var(--muted); border:1px solid var(--line); }
  .btn-ghost:hover{ border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.72); transform:translateY(-2px); }
  /* ===== Language pill =====
     The switch between the Slovak site and its English twin under /en/. It always
     shows the language you would be going TO, never the one you are already on,
     and it navigates with ?lang= so the routing snippet in each <head> can record
     the choice before the next page paints — from then on the visitor's own pick
     outranks their browser language. Sized one step under .label so it can sit on
     the crown row without pushing the CTA into the medallion. */
  .lang-pill{
    display:inline-flex; align-items:center; gap:.4rem;
    font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.18em;
    padding:.42rem .8rem .42rem .68rem; border-radius:9999px;
    color:rgba(255,255,255,.62); border:1px solid var(--line); background:transparent;
    transition:transform .4s var(--ease), color .35s var(--ease),
               border-color .35s var(--ease), background-color .35s var(--ease);
  }
  .lang-pill svg{ width:13px; height:13px; flex:none; opacity:.72; transition:opacity .35s var(--ease); }
  .lang-pill:hover{ color:var(--blue); border-color:rgba(4,167,231,.55);
                    background:rgba(4,167,231,.07); transform:translateY(-2px); }
  .lang-pill:hover svg{ opacity:1; }
  .lang-pill:active{ transform:translateY(1px); }
  .lang-pill:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
  /* in the mobile drawer it is its own row, so it must not stretch to the full width */
  .lang-pill-mobile{ align-self:flex-start; }

  .btn-arrow{ transition:transform .35s var(--ease); }
  .btn:hover .btn-arrow{ transform:translateX(4px); }

  /* ===== CTA glow =====
     Carried by every button that leads to the enquiry form. The walk-away
     button in #kontakt deliberately never gets it — rewarding the exit with
     brand colour would undercut the choice being offered.
     Both layers animate transform/opacity only. The halo is a pseudo-element
     rather than an animated box-shadow so it composites instead of repainting,
     and the sweep is a soft ellipse rather than a hard bar so it needs no
     clipping — clipping the button would swallow the halo with it. */
  .cta-glow{ position:relative; isolation:isolate; }
  .cta-glow::before{
    content:""; position:absolute; inset:-9px; z-index:-1; border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(closest-side, rgba(4,167,231,.65), rgba(4,167,231,0) 78%);
    animation:cta-breathe 3.4s ease-in-out infinite;
  }
  /* The blob travels only between 4% and 134% so it is never partly outside the
     pill — it fades in and out instead of sliding off. Giving the button
     overflow:hidden would clip it properly but would take the halo with it. */
  .cta-glow::after{
    content:""; position:absolute; top:0; bottom:0; left:0; width:42%;
    pointer-events:none; opacity:0; transform:translateX(4%);
    background:radial-gradient(closest-side ellipse, rgba(255,255,255,.5), rgba(255,255,255,0) 72%);
  }
  .cta-glow:hover::after{ animation:cta-sweep 1s cubic-bezier(.4,0,.5,1); }
  .cta-glow:hover::before{ animation-duration:1.6s; }
  @keyframes cta-breathe{
    0%,100%{ opacity:.4;  transform:scale(.97); }
    50%    { opacity:.92; transform:scale(1.05); }
  }
  @keyframes cta-sweep{
    0%  { transform:translateX(4%);   opacity:0; }
    22% { opacity:1; }
    74% { opacity:1; }
    100%{ transform:translateX(134%); opacity:0; }
  }
  /* on the outline variant the halo would drown the thin border — keep it tighter */
  .btn-outline.cta-glow::before{ inset:-6px; background:radial-gradient(closest-side, rgba(4,167,231,.42), rgba(4,167,231,0) 78%); }
  @media (prefers-reduced-motion:reduce){
    .cta-glow::before{ animation:none; opacity:.6; transform:none; }
    .cta-glow:hover::after{ animation:none; }
  }

  /* Reveal */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s); }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* ===== Nav — a Versace-weight meander collar =====
     A fully rounded capsule carries the navigation; a bold Greek-key band runs
     along its base, interrupted at centre by a circular Omega medallion that
     rises clear of the bar and breaks the silhouette. Capsule geometry means
     plain border-radius does the clipping, so backdrop-filter and box-shadow
     both behave normally — none of the clip-path workarounds are needed. */
  .nav{
    --bar:66px;
    --key-h:13px;
    --medal:64px;
    --medal-rise:20px;   /* how far the medallion stands proud of the bar */
    --medal-gap:44px;    /* half-width of the break it cuts in the key band */
  }
  @media (min-width:768px){
    .nav{ --bar:80px; --key-h:16px; --medal:88px; --medal-rise:26px; --medal-gap:56px; }
  }

  .crown{ position:relative; transition:transform .5s var(--ease); }
  .nav.scrolled .crown{ transform:translateY(-4px); }

  /* 1px of padding draws the rim; the fill sits inside it */
  .crown-body{
    position:relative; padding:1px; border-radius:9999px;
    background:linear-gradient(180deg, rgba(4,167,231,.55), rgba(4,167,231,.14) 52%, rgba(4,167,231,.38));
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    box-shadow:0 22px 48px -26px rgba(4,167,231,.55), 0 6px 20px -12px rgba(0,0,0,.7);
    transition:background .5s var(--ease), box-shadow .5s var(--ease);
  }
  .nav.scrolled .crown-body{
    background:linear-gradient(180deg, rgba(4,167,231,.7), rgba(4,167,231,.2) 52%, rgba(4,167,231,.48));
    box-shadow:0 26px 56px -26px rgba(4,167,231,.7), 0 6px 22px -12px rgba(0,0,0,.8);
  }
  .crown-fill{
    position:relative; border-radius:inherit; overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.008) 46%, rgba(0,0,0,.3)),
               rgba(9,10,14,.72);
    transition:background-color .5s var(--ease);
  }
  .nav.scrolled .crown-fill{ background-color:rgba(9,9,11,.9); }

  /* the key band, at brand weight rather than hairline. The mask opens a gap at
     centre so the run stops cleanly either side of the medallion instead of
     disappearing under it. */
  .crown-key{
    position:absolute; left:0; right:0; bottom:6px; height:var(--key-h);
    pointer-events:none; opacity:.62; overflow:hidden;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 17.1H36M0 .9H36M28.4 17.1V6.2H9V11.8H19.4' fill='none' stroke='%2304A7E7' stroke-width='1.7'/%3E%3C/svg%3E");
    background-repeat:repeat-x; background-position:center bottom; background-size:auto 100%;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 7%,
      #000 calc(50% - var(--medal-gap) - 10px), transparent calc(50% - var(--medal-gap)),
      transparent calc(50% + var(--medal-gap)), #000 calc(50% + var(--medal-gap) + 10px),
      #000 93%, transparent);
            mask-image:linear-gradient(to right, transparent, #000 7%,
      #000 calc(50% - var(--medal-gap) - 10px), transparent calc(50% - var(--medal-gap)),
      transparent calc(50% + var(--medal-gap)), #000 calc(50% + var(--medal-gap) + 10px),
      #000 93%, transparent);
    transition:opacity .5s var(--ease);
  }
  .nav.scrolled .crown-key{ opacity:.85; }

  /* the medallion is the floor of the composition, so the nav centres in the
     space above the key band rather than on the bar's own midline */
  .crown-row{
    position:relative; height:var(--bar); display:grid; align-items:center;
    grid-template-columns:1fr auto 1fr; padding:0 22px calc(var(--key-h) + 4px);
  }
  @media (min-width:768px){ .crown-row{ padding:0 34px calc(var(--key-h) + 5px); } }

  /* the nav is display:none below lg, which drops it out of grid flow and would
     slide the centre column off-centre — so every cell is placed explicitly */
  .crown-nav{ grid-column:1; justify-self:start; }
  .crown-seat{ grid-column:2; justify-self:center; }
  .crown-actions{ grid-column:3; justify-self:end; }
  /* reserves the centre column so the medallion never collides with the nav */
  .crown-seat{ width:calc(var(--medal) + 26px); height:1px; }

  /* ---- the Omega medallion ---- */
  .crown-medal{
    position:absolute; left:50%; top:calc(var(--medal-rise) * -1);
    width:var(--medal); height:var(--medal); transform:translateX(-50%);
    display:grid; place-items:center; border-radius:50%; z-index:2;
    background:radial-gradient(circle at 50% 32%, rgba(20,30,42,.97), rgba(7,8,11,.99) 70%);
    box-shadow:0 0 0 1px rgba(4,167,231,.55), 0 14px 34px -14px rgba(4,167,231,.6),
               0 4px 14px -6px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09);
    transition:transform .55s var(--ease), box-shadow .55s var(--ease);
  }
  /* the circular meander, generated by mapping the linear key into polar coords */
  .crown-medal::before{
    content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2304A7E7' stroke-width='1.7' stroke-linecap='square'%3E%3Ccircle cx='50' cy='50' r='38'/%3E%3Ccircle cx='50' cy='50' r='30.00'/%3E%3Cpath d='M64.29 23.62L66.92 18.77A35.52 35.52 0 0 0 55.56 14.92L55.12 17.68A32.72 32.72 0 0 1 60.89 19.15M77.06 37.06L82.04 34.67A35.52 35.52 0 0 0 75.12 24.88L73.14 26.86A32.72 32.72 0 0 1 76.95 31.44M79.50 55.44L84.93 56.44A35.52 35.52 0 0 0 85.08 44.44L82.32 44.88A32.72 32.72 0 0 1 82.71 50.82M70.67 71.74L74.48 75.74A35.52 35.52 0 0 0 81.65 66.13L79.15 64.85A32.72 32.72 0 0 1 75.98 69.89M53.95 79.74L54.67 85.21A35.52 35.52 0 0 0 66.13 81.65L64.85 79.15A32.72 32.72 0 0 1 59.33 81.36M35.71 76.38L33.08 81.23A35.52 35.52 0 0 0 44.44 85.08L44.88 82.32A32.72 32.72 0 0 1 39.11 80.85M22.94 62.94L17.96 65.33A35.52 35.52 0 0 0 24.88 75.12L26.86 73.14A32.72 32.72 0 0 1 23.05 68.56M20.50 44.56L15.07 43.56A35.52 35.52 0 0 0 14.92 55.56L17.68 55.12A32.72 32.72 0 0 1 17.29 49.18M29.33 28.26L25.52 24.26A35.52 35.52 0 0 0 18.35 33.87L20.85 35.15A32.72 32.72 0 0 1 24.02 30.11M46.05 20.26L45.33 14.79A35.52 35.52 0 0 0 33.87 18.35L35.15 20.85A32.72 32.72 0 0 1 40.67 18.64'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
    opacity:.85; transition:opacity .55s var(--ease), transform .55s var(--ease);
  }
  /* the brand omega, alpha-cut from the black-square asset so it drops onto the
     medallion face cleanly; drop-shadow rather than text-shadow since it is art */
  .crown-medal-mark{
    /* the glyph's furthest ink (the feet) sits at 1.33x its half-width and the
       meander's inner ring is at r=.30D, so anything above ~.42 puts the feet
       through the band; .36 leaves a comfortable inset at both medallion sizes */
    width:calc(var(--medal) * .36); height:auto; display:block;
    filter:drop-shadow(0 0 14px rgba(4,167,231,.5));
    transition:filter .45s var(--ease), transform .45s var(--ease);
  }
  .crown-medal:hover{ transform:translateX(-50%) translateY(-2px); }
  .crown-medal:hover::before{ opacity:1; transform:rotate(18deg); }
  .crown-medal:hover .crown-medal-mark{ filter:drop-shadow(0 0 20px rgba(4,167,231,.9)); }
  .crown-medal:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }

  /* mobile panel — the capsule language carried down into the drawer */
  .crown-panel{ padding:1px; border-radius:26px;
    background:linear-gradient(180deg, rgba(4,167,231,.45), rgba(4,167,231,.12));
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
  .crown-panel-in{ border-radius:inherit; background:rgba(9,9,11,.96); }

  @media (prefers-reduced-motion:reduce){
    .crown{ transition:none; }
    .crown-medal:hover::before{ transform:none; }
  }

  /* Blue-duotone image treatment (brand photography) */
  .duo{ position:relative; overflow:hidden; }
  .duo img{ filter:grayscale(1) contrast(1.06) brightness(.95); transition:transform .8s var(--ease); }
  .duo::before{ content:""; position:absolute; inset:0; z-index:1; background:var(--blue); mix-blend-mode:color; opacity:.55; pointer-events:none; }
  .duo::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 62%, rgba(0,0,0,.18)); pointer-events:none; }
  .duo .duo-body{ z-index:3; }
  .work-card:hover .duo img, .duo-hover:hover img{ transform:scale(1.05); }

  .link-hover{ transition:color .3s var(--ease); }
  .link-hover:hover{ color:var(--blue); }

  /* Social icon — round mark that lifts off the footer plane on hover */
  .social-ico{ display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:9999px; color:rgba(255,255,255,.6);
    border:1px solid var(--line); background:rgba(255,255,255,.02);
    transition:color .3s var(--ease), border-color .3s var(--ease),
               transform .3s var(--ease), box-shadow .3s var(--ease); }
  .social-ico svg{ width:19px; height:19px; }
  .social-ico:hover{ color:var(--blue); border-color:rgba(4,167,231,.45);
    transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(4,167,231,.6); }
  .social-ico:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
  .social-ico:active{ transform:translateY(0); }
  /* Brand logo SVG is black artwork — invert to render white on dark */
  .brand-logo{ filter:invert(1); transition:opacity .3s var(--ease); }
  a:hover > .brand-logo{ opacity:.82; }
  /* white-on-transparent PNG wordmark — used as-is (no invert) */
  .logo-img{ transition:opacity .3s var(--ease); }
  a:hover > .logo-img{ opacity:.82; }
  .divider{ height:1px; background:var(--line); }
  .glow{ position:absolute; border-radius:9999px; filter:blur(100px); pointer-events:none; }

  /* Cursor follower — electric-blue dot + trailing ring (echoes the hero's animated glow) */
  .cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; z-index:9999; border-radius:9999px;
    pointer-events:none; opacity:0; transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
    transition:opacity .35s var(--ease); }
  .cursor-dot{ width:7px; height:7px; background:var(--blue); box-shadow:0 0 10px 1px rgba(4,167,231,.7); }
  .cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(4,167,231,.5);
    transition:width .32s var(--ease), height .32s var(--ease), border-color .32s var(--ease),
               background-color .32s var(--ease), opacity .35s var(--ease); }
  .cursor-ring.is-hover{ width:56px; height:56px; border-color:rgba(4,167,231,.9); background:rgba(4,167,231,.09); }
  .cursor-ring.is-down{ width:24px; height:24px; border-color:rgba(4,167,231,.95); }
  @media (hover:none), (pointer:coarse){ .cursor-dot, .cursor-ring{ display:none !important; } }

  /* ===== Mobile scroll smoothness (site-wide half) =====
     The nav capsule is position:fixed, so its backdrop-filter is recomposited
     on every scroll frame — the browser has to re-blur whatever slid underneath
     it, 60 times a second, for the whole length of the page. 16px is a heavy
     radius to pay that on for a phone GPU. Halved here rather than dropped: at
     390px the capsule is ~350px of glass over mostly-dark ink and 8px is not
     tellable apart from 16px, but it roughly halves the per-frame cost.
     Each page freezes its own big animated glows in its own sheet — those class
     names are declared after this file and would win the cascade tie. */
  @media (hover:none) and (pointer:coarse){
    .crown-body, .crown-panel{
      -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  }
