/* Hero/banner, resources, search/contact, future/roadmap, and adjacent content sections. */

/* ===== Hero banner / Resources / Future ===== */
    .about{
      width:min(1280px, 100%);
      margin-inline:auto;
      min-height: clamp(640px, 43.5vw, 760px);
      zoom: var(--hero-scale, 1);
      transform: translateY(var(--hero-block-y, 0px));
      isolation:isolate;
      overflow:visible;
      border-radius: var(--hero-card-radius);
      border:1px solid rgba(255,255,255,.44);
      background: var(--hero-bg-color);
      box-shadow: var(--hero-card-shadow);
      color:var(--hero-text-color);
    }
    /* The hero block is also a .glass-card (overflow:hidden in cards.css, which
       loads last). Bump specificity so the character PNG can overflow the card
       on the top/right again (clipped only at the bottom via hero-stage). */
    .glass-card.about{
      overflow:visible;
    }
    .about::before,
    .about::after{ display:none; }
    /* FOUC guard: hide only the CONTENT (.nav + .page) until the first full
       render is done. Background layers (body::before/::after, .noise) are
       body-level pseudo-elements, NOT inside .page, so they stay visible.
       CSS failsafe: even if init JS throws and never adds .page-ready,
       content still reveals itself after 1.5s so it can never stay blank. */
    @keyframes pageRevealFailsafe{ to{ opacity:1; } }
    .nav, .page{ opacity:0; animation:pageRevealFailsafe 0s linear 1.5s forwards; }
    html.page-ready .nav, html.page-ready .page{ opacity:1; animation:none; transition:opacity .28s ease; }
    .hero-stage{
      position:relative;
      min-height:inherit;
      overflow:visible;
      border-radius:inherit;
      background: var(--hero-bg-color);
    }
    .about.hero-clip-character-bottom .hero-stage{
      clip-path: inset(-100vw -100vw 0 -100vw);
    }
    .hero-stage::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background-image: var(--hero-gradient), var(--hero-bg-image);
      background-position: center, var(--hero-bg-position);
      background-size: cover, var(--hero-bg-size);
      background-repeat:no-repeat;
      z-index:0;
      pointer-events:none;
    }
    .hero-stage::after{
      content:"";
      display:var(--hero-vignette-display);
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:
        radial-gradient(880px 420px at 72% 52%, rgba(var(--hero-vignette-color), var(--hero-vignette-soft)), transparent 56%),
        linear-gradient(90deg, rgba(var(--hero-vignette-color), var(--hero-vignette-edge)), transparent 28%, transparent 72%, rgba(var(--hero-vignette-color), var(--hero-vignette-edge)));
      z-index:1;
      pointer-events:none;
    }
    .hero-red-stripe{
      display:var(--hero-stripe-display);
      position:absolute;
      left:var(--hero-stripe-x);
      top:var(--hero-stripe-y);
      width:var(--hero-stripe-width);
      height:var(--hero-stripe-height);
      background:linear-gradient(90deg, var(--hero-stripe-color), color-mix(in srgb, var(--hero-stripe-color) 92%, #ff4c55 8%));
      z-index:2;
      pointer-events:none;
      /* fade in + reveal left-to-right on page load */
      animation: heroStripeReveal 1.8s cubic-bezier(.33,.1,.2,1) .25s both;
    }
    @keyframes heroStripeReveal{
      from{ opacity:0; clip-path: inset(0 100% 0 0); }
      40%{ opacity:1; }
      to{ opacity:1; clip-path: inset(0 0 0 0); }
    }
    .about.hero-stripe-contained .hero-red-stripe{
      left:-1px;
      width:calc(100% + 2px);
      box-shadow:-1px 0 0 var(--hero-stripe-color), 1px 0 0 var(--hero-stripe-color);
    }
    .hero-content{
      position:relative;
      z-index:3;
      min-height:inherit;
      width:min(var(--hero-text-max), 58%);
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      align-items:flex-start;
      text-align:var(--hero-text-align);
      padding: clamp(54px, 5.2vw, 76px) clamp(34px, 3.2vw, 52px) clamp(138px, 8.5vw, 156px);
      gap:20px;
      text-shadow:var(--hero-text-shadow);
    }
    .hero-kicker{
      color:var(--hero-muted-color);
      display:flex;
      align-items:center;
      gap:10px;
      font-size:14px;
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.14em;
      transform:translateY(var(--hero-subtitle-y));
    }
    .hero-kicker::before{
      content:"";
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--hero-accent);
      box-shadow:0 0 0 7px color-mix(in srgb, var(--hero-accent) 18%, transparent);
    }
    .hero-title{
      display:flex;
      flex-direction:column;
      align-items:inherit;
      width:max-content;
      max-width:100%;
      font-family:"Arial Black", "Besan", Impact, ui-sans-serif, system-ui, sans-serif;
      font-size: clamp(46px, 4.9vw, var(--hero-title-size));
      line-height:var(--hero-title-line);
      letter-spacing:var(--hero-title-letter);
      font-weight:950;
      text-transform:uppercase;
      color:var(--hero-text-color);
      transform:translateY(var(--hero-title-y));
    }
    .hero-title-line{
      display:block;
      white-space:nowrap;
      max-width:100%;
    }
    .hero-title-line.accent{
      color:#fff;
      position:relative;
      z-index:3;
    }
    .hero-copy{
      color:var(--hero-muted-color);
      font-size: clamp(15px, 1.05vw, 18px);
      max-width:min(620px, 100%);
      line-height:1.48;
      font-weight:650;
      transform:translateY(var(--hero-description-y));
    }
    .hero-carousel-placeholder{
      position:relative;
      width:min(590px, 100%);
      min-height:var(--hero-placeholder-height);
      margin-top:var(--hero-placeholder-grow-margin);
      transform:translateY(var(--hero-placeholder-y));
      border-radius:var(--hero-placeholder-radius);
      background:var(--hero-placeholder-bg);
      border:1px solid rgba(80,72,64,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
      overflow-x: clip;
      overflow-y: visible;
    }
    .hero-carousel-placeholder.has-carousel{
      border-color: transparent;
      box-shadow: none;
    }
    .hero-carousel-track{
      position:absolute;
      inset:0;
      pointer-events:none;
    }
    .hero-carousel-card{
      position:absolute;
      top:50%;
      left:0;
      width:var(--hero-carousel-card-size, 180px);
      height:var(--hero-carousel-card-size, 180px);
      transform-origin:center bottom;
      will-change:transform;
      pointer-events:none;
      display:flex;
      align-items:flex-end;
      justify-content:center;
    }
    .hero-carousel-card img{
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:center bottom;
      display:block;
      user-select:none;
      -webkit-user-drag:none;
      filter: var(--hero-carousel-shadow, drop-shadow(0 14px 24px rgba(0,0,0,.25)));
    }
    .hero-buttons{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      max-width:100%;
    }
    .hero-btn{
      min-height:52px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:var(--hero-button-py) var(--hero-button-px);
      border-radius:var(--hero-button-radius);
      border:1px solid rgba(0,0,0,.14);
      background:#101010;
      color:#fff;
      opacity:var(--hero-button-opacity);
      font-weight:950;
      text-transform:uppercase;
      font-size:16px;
      letter-spacing:0;
      box-shadow:0 7px 16px rgba(0,0,0,.18);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    }
    .hero-btn.primary{
      background:var(--hero-accent);
      border-color:color-mix(in srgb, var(--hero-accent) 84%, #000 16%);
    }
    .hero-btn.outline{
      background:rgba(255,255,255,.10);
      color:var(--hero-text-color);
      border-color:rgba(0,0,0,.28);
      box-shadow:none;
    }
    .hero-btn.flat{ box-shadow:none !important; }
    .about:not(.hero-hover-off) .hero-btn:hover{
      transform:translateY(-2px) scale(1.01);
      box-shadow:0 10px 22px rgba(0,0,0,.20), 0 0 22px color-mix(in srgb, var(--hero-accent) 24%, transparent);
    }
    .about.hero-glow-off .hero-btn:hover{
      box-shadow:0 10px 22px rgba(0,0,0,.18);
    }
    .hero-btn-icon{ font-size:1.05em; line-height:1; }
    img.hero-btn-icon{ width:18px; height:18px; object-fit:contain; }
    .hero-character{
      position:absolute;
      left:var(--hero-char-x);
      top:var(--hero-char-y);
      width:min(48vw, 590px);
      z-index:var(--hero-char-z);
      opacity:var(--hero-char-opacity);
      mix-blend-mode:var(--hero-char-blend);
      transform:
        translate3d(calc(-50% + var(--hero-mouse-x)), calc(-50% + var(--hero-mouse-y) + var(--hero-parallax-y)), 0)
        rotate(var(--hero-char-rotate))
        scale(var(--hero-char-live-scale));
      transform-origin:center center;
      filter:
        brightness(var(--hero-char-brightness))
        saturate(var(--hero-char-sat))
        contrast(var(--hero-char-contrast))
        blur(var(--hero-char-blur))
        hue-rotate(var(--hero-char-hue))
        drop-shadow(var(--hero-char-shadow));
      will-change:transform, opacity;
      pointer-events:none;
    }
    .about:not(.hero-char-hover-off) .hero-stage:hover .hero-character{
      --hero-char-live-scale: var(--hero-char-hover-scale);
    }
    .hero-character-entry,
    .hero-character-motion{
      display:block;
      width:100%;
      height:auto;
    }
    .hero-character.motion-on .hero-character-motion{
      animation:heroFloat var(--hero-anim-duration) var(--hero-anim-easing) var(--hero-anim-delay) var(--hero-anim-loop) alternate;
    }
    .hero-character.slow-on{
      animation:heroCharacterDrift calc(var(--hero-anim-duration) * 1.65) var(--hero-anim-easing) var(--hero-anim-delay) var(--hero-anim-loop) alternate;
    }
    .hero-character.breathe-on .hero-character-media{
      animation:heroBreathe var(--hero-breathe-duration) var(--hero-anim-easing) var(--hero-anim-delay) var(--hero-anim-loop) alternate;
    }
    .hero-character.entry-on .hero-character-entry{
      animation:heroFadeIn .9s cubic-bezier(.2,.8,.2,1) var(--hero-anim-delay) both;
    }
    .hero-character.entry-on.slide-on .hero-character-entry{
      animation:heroSlideIn .9s cubic-bezier(.2,.8,.2,1) var(--hero-anim-delay) both;
    }
    .hero-character picture,
    .hero-character img{
      display:block;
      width:100%;
      height:auto;
      object-fit:contain;
    }
    .hero-feature-bar{
      position:absolute;
      left:clamp(22px, 2vw, 34px);
      right:clamp(22px, 2vw, 34px);
      bottom:clamp(18px, 1.5vw, 26px);
      z-index:8;
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      align-items:stretch;
      min-height:96px;
      padding:var(--hero-glass-padding);
      border-radius:var(--hero-glass-radius);
      border:1px solid rgba(255,255,255,.18);
      background:rgba(38,32,29,var(--hero-glass-opacity));
      backdrop-filter:blur(var(--hero-glass-blur));
      -webkit-backdrop-filter:blur(var(--hero-glass-blur));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 16px 38px rgba(0,0,0,.18);
      color:#fff;
      overflow:visible;
    }
    .hero-feature{
      display:grid;
      grid-template-columns:auto 1fr;
      align-items:center;
      gap:16px;
      min-width:0;
      padding:0 20px;
      position:relative;
    }
    .hero-feature.has-divider::after{
      content:"";
      position:absolute;
      right:0;
      top:8%;
      bottom:8%;
      width:1px;
      background:rgba(255,255,255,.20);
    }
    .hero-feature-icon{
      width:58px;
      height:58px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:42px;
      font-weight:900;
      line-height:1;
    }
    .hero-feature-icon img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      filter:brightness(0) invert(1);
    }
    .hero-feature-icon.multi{
      gap:8px;
      width:auto;
      min-width:72px;
    }
    .hero-feature-icon.multi img{
      width:34px;
      height:34px;
    }
    .hero-feature-title{
      font-size:28px;
      font-weight:950;
      line-height:1;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .hero-feature-subtitle{
      margin-top:8px;
      font-size:15px;
      font-weight:850;
      line-height:1.25;
      text-transform:uppercase;
      color:rgba(255,255,255,.92);
    }
    .hero-feature.compact .hero-feature-title{ font-size:18px; white-space:normal; }
    .hero-feature.compact .hero-feature-subtitle{ font-size:18px; margin-top:2px; }
    @keyframes heroFloat{
      from{ transform:translate3d(0, calc(var(--hero-anim-intensity) * -.28), 0); }
      to{ transform:translate3d(calc(var(--hero-anim-intensity) * .22), calc(var(--hero-anim-intensity) * .34), 0); }
    }
    @keyframes heroBreathe{
      from{ transform:scale(1); }
      to{ transform:scale(var(--hero-breathe-scale)); }
    }
    @keyframes heroCharacterDrift{
      from{ transform:
        translate3d(calc(-50% + var(--hero-mouse-x) - var(--hero-drift-x)), calc(-50% + var(--hero-mouse-y) + var(--hero-parallax-y) - var(--hero-drift-y)), 0)
        rotate(var(--hero-char-rotate))
        scale(var(--hero-char-live-scale)); }
      to{ transform:
        translate3d(calc(-50% + var(--hero-mouse-x) + var(--hero-drift-x)), calc(-50% + var(--hero-mouse-y) + var(--hero-parallax-y) + var(--hero-drift-y)), 0)
        rotate(var(--hero-char-rotate))
        scale(var(--hero-char-live-scale)); }
    }
    @keyframes heroSlideIn{
      from{
        opacity:0;
        transform:translate3d(34px, 12px, 0) scale(.985);
      }
      to{
        opacity:var(--hero-char-opacity);
        transform:translate3d(0, 0, 0) scale(1);
      }
    }
    @keyframes heroFadeIn{
      from{ opacity:0; }
      to{ opacity:var(--hero-char-opacity); }
    }
    @media (prefers-reduced-motion: reduce){
      .about:not(.hero-ignore-reduced-motion) .hero-character,
      .about:not(.hero-ignore-reduced-motion) .hero-character *{
        animation:none !important;
        transition:none !important;
      }
    }
    #lines{
      margin-top: clamp(220px, 26vh, 360px);
    }

    .resources-header{ padding: 26px 26px 10px; }
    .resources-header h2{ font-size: 40px; letter-spacing: -0.4px; }
    .resources-header p{ color: var(--muted); font-size: 14px; }
    .socials{ display:flex; flex-direction:column; gap: 12px; padding: 16px 16px 22px; }
    .social-item{
      display:flex;
      align-items:center;
      gap:12px;
      padding: 14px 14px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
    }
    .social-item:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.16); background: rgba(0,0,0,.22); }
    .icon{
      width:42px;height:42px;border-radius:14px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      display:flex;align-items:center;justify-content:center;
      font-weight: 800;
      color: rgba(244,246,248,.90);
      overflow:hidden;
      flex: 0 0 42px;
    }
    .icon img{width:100%;height:100%;object-fit:cover;display:block}
    .social-text{display:flex;flex-direction:column;line-height:1.15}
    .social-text b{font-size:14px}
    .social-text span{color: var(--muted); font-size: 13px}

    footer{margin-top:auto;padding: 24px 0;color: var(--muted);text-align:center;font-size: 13px}

    .search-page,
    .faq-section,
    .contact-section{
      padding: 24px;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:18px;
    }
    .section-head h2{
      font-size: clamp(30px, 4vw, 54px);
      line-height:.95;
      text-transform:uppercase;
      letter-spacing:0;
    }
    .section-head p{
      color:var(--muted);
      font-size:14px;
      max-width:620px;
    }
    .search-panel{
      display:flex;
      gap:10px;
      align-items:center;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.18);
      border-radius:18px;
      padding:10px;
      margin-bottom:16px;
    }
    .search-panel input{
      flex:1;
      min-width:0;
      height:48px;
      border:0;
      outline:0;
      border-radius:12px;
      background:rgba(255,255,255,.06);
      color:#fff;
      padding:0 16px;
      font-size:16px;
      font-weight:800;
    }
    .search-filters{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:16px;
    }
    .search-filters-label{
      color:var(--muted);
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-right:4px;
    }
    .search-filter{
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.05);
      color:var(--muted);
      border-radius:999px;
      padding:7px 16px;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      transition:border-color .14s ease, background .14s ease, color .14s ease, opacity .14s ease;
    }
    .search-filter:hover{
      border-color:rgba(var(--accent-rgb),.5);
      color:#fff;
    }
    .search-filter.active{
      border-color:rgba(var(--accent-rgb),.65);
      background:rgba(var(--accent-rgb),.18);
      color:#fff;
    }
    .search-filter:not(.active){
      opacity:.6;
    }
    .search-results{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
      gap:14px;
    }
    .search-card{
      display:grid;
      grid-template-columns:104px minmax(0, 1fr);
      gap:14px;
      text-decoration:none;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.18));
      border-radius:18px;
      padding:12px;
      color:#fff;
      text-align:left;
      cursor:pointer;
      transition:transform .14s ease, border-color .14s ease, background .14s ease;
      min-height:128px;
      align-items:center;
    }
    .search-card:hover{
      transform:translateY(-1px);
      border-color:rgba(var(--accent-rgb),.35);
      background:linear-gradient(180deg, rgba(var(--accent-rgb),.13), rgba(0,0,0,.18));
    }
    .search-thumb{
      width:104px;
      aspect-ratio:1/1;
      border-radius:12px;
      overflow:hidden;
      background:rgba(255,255,255,.05);
    }
    .search-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .search-meta{ display:flex; flex-direction:column; gap:6px; min-width:0; align-self:stretch; justify-content:center; }
    .search-type{
      color:rgba(var(--accent-rgb),.96);
      font-size:10px;
      font-weight:900;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .search-title{
      font-size:16px;
      font-weight:900;
      line-height:1.05;
      text-transform:uppercase;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    .search-line{
      color:var(--muted);
      font-size:12px;
      line-height:1.25;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .search-price-row{
      display:flex;
      align-items:center;
      gap:8px;
      min-height:26px;
      margin-top:2px;
    }
    .search-price{
      min-width:72px;
      font-size:15px;
      font-weight:950;
      color:#fff;
      line-height:1;
      white-space:nowrap;
    }
    .search-discount{
      min-width:48px;
      height:24px;
      padding:0 8px;
      border-radius:8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#ffdf2e;
      color:#171200;
      font-size:12px;
      font-weight:950;
      line-height:1;
    }
    .search-discount.empty{
      visibility:hidden;
    }
    .search-empty{
      grid-column:1/-1;
      padding:22px;
      border:1px dashed rgba(255,255,255,.16);
      border-radius:18px;
      color:var(--muted);
      text-align:center;
      background:rgba(0,0,0,.14);
    }
    .faq-section{
      overflow:hidden;
    }
    .contact-section{
      overflow:visible;
    }
    .faq-shell{
      min-height:390px;
      display:grid;
      grid-template-columns:300px minmax(0,1fr);
      gap:36px;
      padding:28px 30px 28px;
      position:relative;
    }
    .faq-side{
      position:relative;
      min-height:360px;
      padding:0 30px 0 0;
      border-right:1px solid rgba(255,255,255,.16);
      overflow:visible;
    }
    .faq-side h2,
    .contact-side h2{
      font-size:clamp(52px, 5vw, 76px);
      line-height:.84;
      letter-spacing:0;
      text-transform:uppercase;
      color:#fff;
    }
    .section-mini-rule{
      width:48px;
      height:2px;
      margin:12px 0 14px;
      background:rgba(244,246,248,.78);
    }
    .faq-side p,
    .contact-side p{
      color:rgba(244,246,248,.86);
      font-size:14px;
      line-height:1.45;
      max-width:210px;
      position:relative;
      z-index:2;
    }
    .faq-art{
      position:absolute;
      left:-6px;
      right:16px;
      top:126px;
      bottom:0;
      overflow:visible;
      pointer-events:none;
    }
    .faq-art img{
      position:absolute;
      left:-10%;
      top:0;
      width:120%;
      height:auto;
      max-height:none;
      object-fit:contain;
      filter:grayscale(1) brightness(.72) contrast(1.08) drop-shadow(0 28px 42px rgba(0,0,0,.52));
      opacity:.92;
      transform:translate(var(--art-x,0px), var(--art-y,0px)) scale(var(--art-scale,1));
      transform-origin:calc(50% - 30px) 33%;
      animation:artBreathe 4.6s ease-in-out infinite alternate;
    }
    .faq-list{
      display:grid;
      align-content:start;
      gap:9px;
    }
    .faq-item{
      border:1px solid rgba(255,255,255,.10);
      border-radius:8px;
      background:rgba(0,0,0,.18);
      overflow:hidden;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    }
    .faq-question{
      width:100%;
      border:0;
      background:transparent;
      color:#fff;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      padding:17px 18px;
      cursor:pointer;
      text-align:left;
      font-size:13px;
      font-weight:900;
      letter-spacing:.09em;
      text-transform:uppercase;
    }
    .faq-question::after{
      content:"+";
      width:25px;
      height:25px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.28);
      color:rgba(244,246,248,.92);
      font-size:20px;
      line-height:21px;
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:transform .18s ease;
    }
    .faq-item.open .faq-question::after{
      content:"★";
      transform:none;
      font-size:18px;
      line-height:20px;
    }
    .faq-answer{
      max-height:0;
      overflow:hidden;
      transition:max-height .24s ease;
    }
    .faq-answer-inner{
      margin:0 52px 17px 20px;
      padding:0 0 0 14px;
      border-left:2px solid rgba(244,246,248,.72);
      color:rgba(244,246,248,.82);
      font-size:14px;
      line-height:1.45;
      white-space:pre-wrap;
    }
    /* let the contact art (bird wing) overflow the glass-card frame */
    #contact{
      overflow:visible;
    }
    .contact-shell{
      display:grid;
      grid-template-columns:minmax(0, 1fr) 300px;
      gap:36px;
      min-height:350px;
      padding:28px 30px 28px;
      position:relative;
    }
    .contact-main{
      min-width:0;
      padding:0 30px 0 0;
      border-right:1px solid rgba(255,255,255,.15);
    }
    .contact-group-title{
      display:flex;
      align-items:center;
      gap:16px;
      color:rgba(244,246,248,.78);
      font-size:14px;
      font-weight:900;
      letter-spacing:.34em;
      text-transform:uppercase;
      margin-bottom:22px;
    }
    .contact-group-title::after{
      content:"";
      height:1px;
      flex:1 1 auto;
      background:rgba(255,255,255,.18);
    }
    .contact-direct{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:14px;
      margin-bottom:28px;
    }
    .contact-direct-link{
      display:flex;
      align-items:center;
      gap:14px;
      min-height:104px;
      padding:18px 20px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.18);
      color:#fff;
      transition:transform .14s ease, border-color .14s ease, background .14s ease;
    }
    .contact-direct-link:hover{
      transform:translateY(-1px);
      border-color:rgba(var(--accent-rgb),.32);
      background:rgba(var(--accent-rgb),.10);
    }
    .contact-direct-icon{
      width:50px;
      height:50px;
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 50px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.10);
      font-size:12px;
      font-weight:950;
      letter-spacing:.04em;
      position:relative;
      overflow:hidden;
    }
    .contact-mail-icon::before{
      content:"";
      width:26px;
      height:18px;
      border:3px solid #fff;
      border-radius:2px;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
    }
    .contact-mail-icon::after{
      content:"";
      position:absolute;
      width:19px;
      height:19px;
      border-left:3px solid #fff;
      border-bottom:3px solid #fff;
      transform:rotate(-45deg) translate(2px,-1px);
    }
    .contact-discord-icon::before{
      content:"";
      width:30px;
      height:22px;
      border-radius:12px 12px 9px 9px;
      background:#fff;
      clip-path:polygon(8% 24%, 30% 10%, 42% 20%, 58% 20%, 70% 10%, 92% 24%, 82% 86%, 62% 74%, 38% 74%, 18% 86%);
    }
    .contact-discord-icon img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:contain;
      padding:7px;
      display:none;
    }
    .contact-discord-icon.has-img::before{ display:none; }
    .contact-discord-icon.has-img img{ display:block; }
    .contact-owner-icon img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:grayscale(1) contrast(1.05);
    }
    .contact-direct-text{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:3px;
      line-height:1.12;
    }
    .contact-direct-text b{
      font-size:15px;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .contact-direct-text span{
      color:var(--muted);
      font-size:13px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .marketplaces-title{
      margin-top:2px;
      margin-bottom:18px;
    }
    .contact-market-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:14px;
      align-items:start;
    }
    .market-stores{
      grid-column:1 / 3;
      display:flex;
      gap:10px;
      justify-content:center;
    }
    .market-profiles{
      grid-column:3 / 4;
      display:flex;
      gap:10px;
      justify-content:center;
    }
    .contact-market-item{
      flex:0 1 110px;
      min-width:0;
      min-height:116px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.18);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;
      padding:16px 9px;
      color:#fff;
      transition:transform .14s ease, border-color .14s ease, background .14s ease;
    }
    .contact-market-item:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.22);
      background:rgba(255,255,255,.07);
    }
    .contact-market-icon{
      width:54px;
      height:54px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .contact-market-icon img{
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      filter:brightness(0) invert(1);
    }
    .contact-market-icon.text{
      border-radius:50%;
      background:#fff;
      color:#111;
      font-size:15px;
      font-weight:950;
      letter-spacing:.02em;
    }
    .contact-market-name{
      width:100%;
      font-size:12px;
      font-weight:900;
      line-height:1.05;
      text-align:center;
      letter-spacing:.02em;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .contact-side{
      position:relative;
      min-height:300px;
      padding-left:0;
      overflow:visible;
    }
    .contact-side h2{
      position:relative;
      z-index:2;
      font-size:clamp(42px, 4vw, 62px);
      margin-bottom:8px;
    }
    .contact-side p{
      position:relative;
      z-index:2;
      max-width:185px;
    }
    .contact-art-wrap{
      position:absolute;
      right:-58px;
      bottom:-28px;
      width:300px;
      pointer-events:none;
    }
    .contact-art{
      display:block;
      animation:artBreathe 5.2s ease-in-out infinite alternate;
      width:100%;
      max-width:none;
      pointer-events:none;
      filter:grayscale(1) brightness(.78) contrast(1.08) drop-shadow(0 26px 38px rgba(0,0,0,.62));
      opacity:.9;
      transform:translate(var(--art-x,0px), var(--art-y,0px)) rotate(-4deg) scale(var(--art-scale,1));
      transform-origin:bottom right;
    }
    @keyframes artBreathe{
      from{ scale:1; }
      to{ scale:1.045; }
    }
    .custom-order-intro{
      color:rgba(244,246,248,.72);
      font-size:13px;
      line-height:1.45;
      margin:-4px 0 12px;
    }
    .custom-order-hint{
      color:rgba(244,246,248,.45);
      font-size:12px;
      line-height:1.4;
      margin-top:8px;
    }
    .custom-order-files{
      color:rgba(244,246,248,.58);
      font-size:12px;
      line-height:1.35;
      margin-top:6px;
    }

    /* ===== Future / RoadMAP (upcoming projects) ===== */
    .future{ display:flex; flex-direction:column; gap: 30px; min-height:100vh; justify-content:center; }
    .future-header{ padding: 26px 26px 20px; display:flex; flex-direction:column; gap:6px; }
    .future-header h2{ font-size: 40px; letter-spacing: -0.4px; }
    .future-header p{ color: var(--muted); font-size: 14px; max-width: 980px; }
    .future-list{ display:flex; flex-direction:column; gap: 22px; }
    .future-item{
      display:flex;
      gap: 22px;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .future-img{ flex: 0 0 320px; aspect-ratio: 16/9 !important; border-right: 1px solid rgba(255,255,255,.10); overflow:hidden; }
    .future-img img{ width:100%; height:100%; object-fit: cover; display:block; }
    .future-content{ padding: 22px 26px; display:flex; flex-direction:column; gap: 8px; flex:1; }
    .future-title{ font-size: 26px; font-weight: 700; letter-spacing: -0.2px; }
    .future-date{ font-size: 13px; color: rgba(244,246,248,.70); }
    .future-desc{ font-size: 14px; color: rgba(244,246,248,.86); white-space: pre-wrap; }
    .future-tools{ position:absolute; top: 14px; right: 14px; display:none; gap: 6px; }
    .admin-active .future-item:hover .future-tools{ display:flex; }