/* Base variables, reset, body background, and page-wide background layers. */

@font-face{
      font-family:"Besan";
      src:url("../Besan-font.otf") format("opentype");
      font-weight:400;
      font-style:normal;
      font-display:swap;
    }

    :root{
      --bg:#0b0d10;
      --fg:#f4f6f8;
      --muted:rgba(244,246,248,.65);
      --accent:#ed1c28;
      --accent-rgb:237,28,40;

      --shadow: 0 22px 80px rgba(0,0,0,.55);

      --radius-xl: 22px;
      --radius-lg: 18px;

      --gap: 36px;
      --asset-w: 378px;
      --line-scale: 0.88;
      --nav-shell-alpha: 1;
      --nav-left-shift: 0px;
      --nav-right-shift: 0px;
      --nav-links-fade: 1;
      --brand-shift-x: 0px;
      --brand-shift-y: 10px;
      --brand-scale: 1;
      --nav-hide-y: 0px;
      --nav-h: 92px;
      --brand-panel-w: 520px;
      --brand-panel-h: 92px;
      --brand-slice-w: 28px;
      --brand-slice-offset: 0px;
      --brand-logo-size: 68px;
      --brand-logo-x: 0px;
      --brand-logo-y: 0px;
      --brand-text-size: 31px;
      --brand-text-x: 0px;
      --brand-text-y: 0px;
      --brand-name-size: 42px;
      --brand-name-letter: 18px;
      --brand-name-x: 0px;
      --brand-name-y: 0px;
      --brand-studio-size: 18px;
      --brand-studio-letter: 18px;
      --brand-studio-x: 0px;
      --brand-studio-y: 0px;
      --brand-studio-line-w: 72px;
      --brand-studio-line-h: 4px;
      --brand-studio-line-gap: 20px;
      --brand-studio-line-color: #ed1c28;
      --brand-studio-line-anim-duration: 1.8s;
      --brand-panel-bg-alpha: 0;
      --brand-cut-top: 54px;
      --brand-cut-bottom: 92px;
      --brand-dock-alpha: 0;
      --brand-dock-y: 24px;

      --bg-image: none;
      --bg-image-opacity: .35;
      --bg-image-size: cover;
      --bg-image-brightness: 1;
      --bg-image-sat: 1.0;
      --bg-image-blur: 0px;
      --bg-image-repeat: no-repeat;
      --bg-tile-duration: 30s;
      --bg-tile-x: 0px;
      --bg-tile-y: 0px;
      --hero-bg-color: #ded9cf;
      --hero-bg-image: none;
      --hero-bg-position: 50% 50%;
      --hero-bg-size: cover;
      --hero-gradient: linear-gradient(135deg, rgba(255,255,255,.36), rgba(255,255,255,0));
      --hero-vignette-display: block;
      --hero-vignette-color: 0,0,0;
      --hero-vignette-opacity: .18;
      --hero-vignette-intensity: 1;
      --hero-vignette-soft: .075;
      --hero-vignette-edge: .054;
      --hero-text-color: #050505;
      --hero-muted-color: rgba(5,5,5,.62);
      --hero-accent: #ed121d;
      --hero-title-size: 64px;
      --hero-title-line: .92;
      --hero-title-letter: 0px;
      --hero-title-y: 0px;
      --hero-subtitle-y: 0px;
      --hero-description-y: 0px;
      --hero-text-max: 700px;
      --hero-text-align: left;
      --hero-text-shadow: none;
      --hero-stripe-display: block;
      --hero-stripe-width: 106%;
      --hero-stripe-height: 86px;
      --hero-stripe-x: -1.5%;
      --hero-stripe-y: 158px;
      --hero-stripe-color: #ed121d;
      --hero-card-radius: 26px;
      --hero-card-shadow: 0 22px 60px rgba(0,0,0,.20);
      --hero-char-x: 76%;
      --hero-char-y: 52%;
      --hero-char-scale: 1;
      --hero-char-hover-scale: 1.014;
      --hero-char-live-scale: var(--hero-char-scale);
      --hero-char-rotate: 0deg;
      --hero-char-opacity: 1;
      --hero-char-brightness: 1;
      --hero-char-sat: 1;
      --hero-char-contrast: 1;
      --hero-char-blur: 0px;
      --hero-char-hue: 0deg;
      --hero-char-shadow: 0 28px 52px rgba(0,0,0,.30);
      --hero-char-z: 4;
      --hero-char-blend: normal;
      --hero-mouse-x: 0px;
      --hero-mouse-y: 0px;
      --hero-parallax-y: 0px;
      --hero-anim-duration: 7s;
      --hero-breathe-duration: 9.45s;
      --hero-anim-delay: 0s;
      --hero-anim-easing: cubic-bezier(.45,0,.2,1);
      --hero-anim-intensity: 12px;
      --hero-drift-x: 2px;
      --hero-drift-y: 1px;
      --hero-breathe-scale: 1.018;
      --hero-anim-loop: infinite;
      --hero-hover-strength: .55;
      --hero-glass-blur: 16px;
      --hero-glass-opacity: .72;
      --hero-glass-radius: 18px;
      --hero-glass-padding: 18px;
      --hero-button-radius: 6px;
      --hero-button-py: 18px;
      --hero-button-px: 30px;
      --hero-button-opacity: 1;
      --hero-placeholder-bg: rgba(52,47,42,.24);
      --hero-placeholder-radius: 18px;
      --hero-placeholder-height: 188px;
      --hero-placeholder-y: 0px;
      --hero-placeholder-grow-margin: 0px;

      /* Cover (line main banner) */
      --cover-mode: auto;     /* auto | fixed */
      --cover-min-h: 0px;     /* for auto mode */
      --cover-fixed-h: 324px; /* for fixed mode */

      /* Asset cards (carousel) */
      --card-h: 240px;        /* computed final height */
      --showcase-frame-blur: 14px;
      --showcase-frame-brightness: 1;

      /* Drawer (asset preview modal) */
      --drawer-w: 1280px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth; scrollbar-gutter: stable;}
    body{
      background: var(--bg);
      color: var(--fg);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      overflow-x:hidden;
      line-height:1.45;
      position:relative;
      isolation:isolate;
    }
    a{color:inherit;text-decoration:none}

    body::before{
      content:"";
      position:fixed; inset:0;
      background:
        radial-gradient(900px 900px at 20% 10%, rgba(var(--accent-rgb),.12), transparent 55%),
        radial-gradient(1000px 1000px at 80% 20%, rgba(255,255,255,.06), transparent 60%),
        radial-gradient(900px 900px at 40% 90%, rgba(var(--accent-rgb),.08), transparent 60%);
      pointer-events:none;
      z-index:-3;
    }
    body::after{
      content:"";
      position:fixed; inset:0;
      background-image: var(--bg-image);
      background-size: var(--bg-image-size);
      background-position: center;
      background-repeat: var(--bg-image-repeat);
      opacity: var(--bg-image-opacity);
      filter: brightness(var(--bg-image-brightness)) saturate(var(--bg-image-sat)) blur(var(--bg-image-blur));
      mix-blend-mode: normal;
      pointer-events:none;
      z-index:-2;
      animation: bgTileDrift var(--bg-tile-duration) linear infinite;
    }
    body.bg-tile-paused::after{ animation:none; }
    @keyframes bgTileDrift{
      from{ background-position: 0 0; }
      to{ background-position: var(--bg-tile-x) var(--bg-tile-y); }
    }
    .noise{
      position:fixed; inset:0;
      background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity:.10;
      pointer-events:none;
      z-index:-1;
      filter: blur(.2px);
    }
    .analytics-consent{
      position:fixed;
      left:50%;
      bottom:18px;
      width:min(720px, calc(100vw - 28px));
      transform:translateX(-50%);
      z-index:9999;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:16px;
      color:#f7f7f7;
      background:rgba(14,14,14,.94);
      border:1px solid rgba(255,255,255,.16);
      border-radius:8px;
      box-shadow:0 18px 48px rgba(0,0,0,.42);
      backdrop-filter:blur(18px);
    }
    .analytics-consent-copy{
      display:grid;
      gap:3px;
      min-width:0;
      font-size:14px;
      line-height:1.35;
    }
    .analytics-consent-copy strong{
      font-size:15px;
      letter-spacing:0;
    }
    .analytics-consent-copy span{
      color:rgba(255,255,255,.76);
    }
    .analytics-consent-actions{
      display:flex;
      align-items:center;
      gap:8px;
      flex:0 0 auto;
    }
    .analytics-consent-btn{
      min-width:92px;
      min-height:40px;
      padding:0 14px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:6px;
      color:#fff;
      background:rgba(255,255,255,.08);
      font:700 13px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      cursor:pointer;
    }
    .analytics-consent-btn.primary{
      border-color:var(--accent);
      background:var(--accent);
    }
    .analytics-consent-btn:focus-visible{
      outline:2px solid #fff;
      outline-offset:2px;
    }
    @media (max-width:640px){
      .analytics-consent{
        align-items:stretch;
        flex-direction:column;
        bottom:12px;
      }
      .analytics-consent-actions{
        justify-content:flex-end;
      }
      .analytics-consent-btn{
        flex:1 1 0;
      }
    }