:root{
    --bg:#000;
    --surface:#ffffff;
    --ink:#17161a;
    --border:#e4e0d4;
    --muted:#8c8878;
    --accent:#D02770;
    --accent-ink:#ffffff;
    --radius:14px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  /* Prevent unconstrained images (e.g. header logo) from overflowing
     or causing layout shift on smaller screens */
  img{ max-width:100%; height:auto; }

  body{
    margin:0;
    background:
      radial-gradient(circle at 1px 1px, rgba(23,22,26,0.05) 1px, transparent 0) 0 0/22px 22px,
      var(--bg);
    color:var(--ink);
    font-family:'Josefin Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }


  ::selection{ background:var(--accent); color:var(--accent-ink); }
  a{ color:inherit; text-decoration:none; }

  .wrap{ max-width:1180px; margin:0 auto; padding-left:32px; padding-right:32px; }
  
  

  
  /* Force all paths/children to white on hover — but NOT for flag
     cards, since flags must keep their real national colors */
.shape-card:not(.flag-card):hover .svg-container svg,
.shape-card:not(.flag-card):hover .svg-container svg * {
  fill: #ffffff !important;

}
  
  
  /* =====================================================================
   ANIMATED SVG PAGE (animated-svg.html) – new classes only
   ===================================================================== */

/* Header + full-width nav bar wrapper (sticky as one unit) */
.anim-topbar{ position:sticky; top:0; z-index:1030; background:#0f0f0f; }
.anim-topbar .sticky-header{ position:static; }
.anim-linkedin{ white-space:nowrap; }

/* Full-width navigation below the header */
.anim-subnav{
  width:100%;
  background:#000;
  border-top:1px solid #242424;
  border-bottom:1px solid #242424;
}
.anim-subnav ul{
  list-style:none;
  margin:0 auto;
  padding:0 32px;
  max-width:1180px;
  display:flex;
  justify-content:center;
  gap:8px;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.anim-subnav ul::-webkit-scrollbar{ display:none; }
.anim-subnav a{
  display:block;
  padding:14px 20px;
  color:#8e8e8e;
  font-size:17px;
  font-weight:500;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.anim-subnav a:hover{ color:#d02771; }
.anim-subnav a.active{ color:#ffffff; border-bottom-color:#ffffff; }
@media (max-width:640px){
  .anim-subnav ul{ justify-content:flex-start; padding:0 12px; gap:0; }
  .anim-subnav a{ padding:13px 14px; font-size:15.5px; }
}

/* Hero title */
h1.anim-hero-title{ font-size:clamp(38px, 6vw, 72px); }

/* Animated card (same look and hover behaviour as .shape-card,
   but keeps its original SVG colors on hover) */
.anim-card{
  height:250px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border-right:1px solid #242424;
  border-bottom:1px solid #242424;
  background-color:#0f0f0f;
  transition:background-color .2s ease, box-shadow .2s ease;
}
.anim-card:hover{ background-color:#000000; }
.anim-card:hover .svg-container svg{ transform:scale(1.1); }
.anim-card:hover .action-bar{ transform:translateY(0); }
.anim-card.copied .action-bar{ color:#198754; }


  /* ---------- Header ---------- */

  .text-white{
    color: #ffffff!important;
  }

  .text-center{
    text-align: center;
  }

  .opecity-60{
    opacity: 60%;
  }

  .image-center{
    margin: auto;
    display: block;
    width: 70%;
  }


  .hilight{
    color: #1EB132;
  }


  .m-top{
    margin-top: 40px;
  }

.linkedin{
  color: #ffffff;
}


.bg-overlay {

  background-image: url('images/card-bg.png');
  background-size: cover;       /* Scales image to cover 100% width/height without distortion */
  background-position: center;   /* Centers the image both horizontally and vertically */
  background-repeat: no-repeat;  /* Prevents image repeating */
  width: 100%;                  /* Ensures full width of parent container */

}


.shape-card {
    position: relative;
  }
  .column-label {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    font-weight: light;
    color: #777;
    pointer-events: none;
    z-index: 1;
  }



.sticky-header {
      position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #0f0f0f;
    transition: box-shadow 0.3s ease;
    z-index: 2;
    }

    /* Subtle LinkedIn Button Styling */
    .btn-linkedin {
      background-color: #ffffff;
      color: #000000;
      border: 1px solid #000000;
      transition: all 0.2s ease;
    }

    .btn-linkedin:hover {
      background-color: #000000;
      color: #ffffff;
    }

.font-size{
  font-size: 24px;
}








  .hero{
    padding:40px 32px 40px;

  }

  .hero-inner{ max-width:1180px; margin:0 auto; }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:26px;
  }

  .eyebrow::before{
    content:"";
    width:7px; height:7px;
    background:var(--accent);
    border-radius:50%;
    display:inline-block;
  }

  h1{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(70px, 6.4vw, 84px);
    line-height:.98;
    letter-spacing:-.01em;
    margin:0 0 28px;
    text-align: center;
  }

  h1 em{ font-style:italic; font-weight:500; color:var(--accent); }

  .lede{
    font-size:18px;
    line-height:1.65;
    color:#4b493f;
    margin:0;
    text-align: center;
  }

  .lede strong{ color:var(--ink); font-weight:600; }

  .pad-top{
    padding-top: 20px;
  }

  /* ---------- Stripe bar ---------- */

  .border-light{
    border: solid 1px #242424!important;
  }

  .stripe{

     background:rgba(15,15,15,100);
     margin-bottom: 60px;
  }

  .center-content{
    color: #ffffff;
    text-align: center;
    display: block;
    margin-top: 40px;
    margin-bottom: 20px;
    opacity: 0.7;
  }

 .center-content span{
  color: #D02770;
 }

 .control{
  width: 10%;
 }

.margin-top-small{
  margin-top: 1rem;
}


.custom-nav .nav-link {
      color: #8e8e8e;
      font-weight: 500;
      padding: 0.5rem 1.25rem;
      transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
      border-radius: 4px;
      font-size:18px;
    }

    .custom-nav li.nav-item{
      padding-right: 20px;
    }

    /* Hover State */
    .custom-nav .nav-link:hover {
    color: #d02771;
    background-color: #000000;
    border-radius: 40px;
    }

    /* Active State */
    .custom-nav .nav-link.active {
    color: #ffffff !important;
    /* background-color: #ffffff; */
    border-radius: 40px;
    /* border: solid 1px #d02771; */
    border-bottom: solid 2px #ffffff;
    border-radius: 0px;
    }


  .stripe-inner{
    max-width:1180px;
    margin:0 auto;
    padding:22px 32px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
  }

  .stripe-text{
    font-family:'JetBrains Mono', monospace;
    font-size:14px;
    letter-spacing:.03em;
    color:var(--muted);
    align-items:center;
    gap:8px;
    font-weight: bold;
  }

  .stripe-text .heart{ color:var(--accent); }

  .download-btn{
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    letter-spacing:.05em;
    text-transform:uppercase;
    padding:11px 22px;
    border-radius:100px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:#fff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    transition:background .18s ease, transform .15s ease;
  }

  .download-btn svg{ width:13px; height:13px; }
  .download-btn:hover{ background:var(--accent); }
  .download-btn:active{ transform:scale(.96); }

  /* ---------- Grid ---------- */

    .shape-card {
      height: 250px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border-right: 1px solid #242424;
      border-bottom: 1px solid #242424;
      background-color: #0f0f0f;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Subtle hover effect for the column container */
    .shape-card:hover {
      background-color: #000000;
    }

    /* SVG Centering inside column */
    .svg-container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 30px; /* Space reserved for sliding action text */
    }

    .svg-container svg {
      width: 200px;
      height: 200px;
      transition: transform 0.3s ease;
    }

    .shape-card:hover .svg-container svg {
      transform: scale(1.1);
    }

    /* Sliding Text Bar at the Bottom */
    .action-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 0.875rem;
      font-weight: 500;
      color: #ffffff;
      
      /* Smooth translation effect */
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Reveal sliding bar on hover */
    .shape-card:hover .action-bar {
      transform: translateY(0);
    }

    .action-bar .bi {
      font-size: 1rem;
    }

    /* Success state indicator */
    .shape-card.copied .action-bar {
      color: #198754; /* Bootstrap Success Green */
    }

@media (min-width: 992px){
  .stripe{
    position: sticky;
        top: var(--header-h, 80px);
        z-index: 1020;
        border-bottom: 1px solid #242424;
        border-top: 1px solid #242424;
        /* position: absolute; */
        z-index: 3;
        top: 0;
        background: none;
        width: 50%;
        margin:40px auto;
  }
}

  .toast.show{ opacity:1; transform:translate(-50%, 0); }
  .toast .dot{ width:6px; height:6px; border-radius:50%; background:#6ef2a1; flex:none; }

  @media (max-width:860px){
    .grid{ grid-template-columns:repeat(2, 1fr); }
  }
  
  

  /* ---------- Hamburger toggle (hidden on desktop) ---------- */
  .nav-toggle{
    display: none;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
  }
  .nav-toggle:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* On desktop the collapse wrapper doesn't affect layout at all —
     its children (nav, LinkedIn button) act as normal flex items of
     .header-inner, exactly like before. */
  .nav-collapse{
    display: contents;
  }

  @media (max-width:640px){
    .header-inner{ padding:16px 20px; }
    .hero{ padding:64px 20px 56px; }
    .stripe-inner{ padding:18px 20px; }
    main{ padding:40px 20px 40px; }
    .grid{ grid-template-columns:repeat(2, 1fr); }

    /* ---- Responsive header: logo + hamburger on row 1,
       collapsible menu (nav + full-width LinkedIn button) below ---- */
    .header-inner{
      flex-wrap: wrap;
      position: relative;
    }

    .header-inner > a:first-child{ order: 1; }

    .nav-toggle{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      order: 2;
    }

    /* Collapsed by default; becomes a real flex column once opened */
    .nav-collapse{
      display: none;
      order: 3;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      gap: 16px;
      margin-top: 18px;
    }

    .nav-collapse.open{
      display: flex;
    }

    ul.nav.custom-nav{
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      width: 100%;
    }

    .custom-nav li.nav-item{
      padding-right: 0;
      width: 100%;
    }

    .custom-nav .nav-link{
      display: block;
      padding: 0.6rem 1rem;
    }

    .custom-nav .nav-link.active{
      border-bottom: none;
      background-color: rgba(255,255,255,0.08);
      border-radius: 40px;
    }

    /* LinkedIn button takes the full width, in place of the old nav row */
    .linkedin-btn{
      width: 100%;
      justify-content: center;
    }
  }

@media (min-width: 1400px){
  .fr-subnav a:not(.btn){ padding: 8px 12px; font-size: 15px; }
}


@media (max-width: 1199px){
  .fr-header{ padding: 16px 0; }
  .fr-header .fr-linkedin-desktop{ display: none !important; }
  .fr-toggle{ display: inline-flex; align-items: center; justify-content: center; }

  .fr-subnav{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #0f0f0f;
    border-bottom: 1px solid #242424;
    max-height: calc(100vh - var(--header-h, 70px));
    overflow-y: auto;
    padding: 8px 20px 20px;
  }
  .fr-subnav.open{ display: block; }
  .fr-subnav ul{
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 0;
    gap: 0;
  }
  .fr-subnav li{ border-bottom: 1px solid #1c1c1c; }
  .fr-subnav a:not(.btn){
    text-align: center;
    padding: 14px 12px;
    font-size: 17px;
    border-bottom: none;
  }
  .fr-subnav a.active{
    background: rgba(255,255,255,0.08);
    border-radius: 40px;
  }
  .fr-subnav .fr-linkedin-mobile{
    display: flex !important;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
  }
}

  /* ---------- Flag search bar ---------- */

  .flag-search-wrap{
    max-width: 680px;
    margin: 28px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .flag-search-box{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 100px;
    padding: 12px 18px;
    transition: border-color .18s ease, box-shadow .18s ease;
  }

  .flag-search-box:focus-within{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(208,39,112,0.18);
  }

  .flag-search-icon{
    color: #ffffff;
    font-size: 16px;
    flex: none;
  }

  .flag-search-box:focus-within .flag-search-icon{
    color: var(--accent);
  }

  .flag-search-input{
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family:'Josefin Sans', sans-serif;
    font-size: 16px;
  }

  .flag-search-input::placeholder{
    color: #716d60;
  }

  /* Hide native browser search decorations so our own icon/clear button control the UI */
  .flag-search-input::-webkit-search-decoration,
  .flag-search-input::-webkit-search-cancel-button,
  .flag-search-input::-webkit-search-results-button,
  .flag-search-input::-webkit-search-results-decoration{
    -webkit-appearance: none;
    appearance: none;
  }

  .flag-search-clear{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: #242424;
    color: #b8b4a8;
    font-size: 11px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }

  .flag-search-clear:hover{
    background: var(--accent);
    color: #ffffff;
  }

  .flag-search-status{
    margin: 0;
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .04em;
    color: #716d60;
  }

  @media (max-width:640px){
    .flag-search-wrap{ margin-top: 22px; padding: 0 4px; }
  }

  .flag-no-results{
    width: 100%;
    text-align: center;
    padding: 48px 20px;
    margin: 0;
    color: #9a9686;
    font-family:'Josefin Sans', sans-serif;
    font-size: 16px;
  }

  /* ---------- FAQ section ---------- */

  .faq-section{
    padding: 20px 32px 70px;
    background: var(--bg);
  }

  .faq-section .wrap{
    max-width: 820px;
  }



  .faq-title{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size: clamp(30px, 4vw, 42px);
    line-height:1.05;
    letter-spacing:-.01em;
    color:#ffffff;
    margin: 0 0 34px;
  }

  .faq-title em{
    font-style: italic;
    font-weight: 500;
    color: var(--accent);
  }

  .faq-list{
    border-top: 1px solid #242424;
  }

  .faq-item{
    border-bottom: 1px solid #242424;
    padding: 22px 4px;
  }

  .faq-item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    cursor:pointer;
    list-style:none;
    font-family:'Josefin Sans', sans-serif;
    font-size:18px;
    font-weight:600;
    color:#ffffff;
  }

  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::marker{ content:""; }

  .faq-icon{
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:50%;
    border:1px solid #3a3a3a;
    color: var(--accent);
    font-family:'JetBrains Mono', monospace;
    font-size:16px;
    transition: transform .25s ease, background-color .2s ease;
  }

  .faq-item[open] .faq-icon{
    transform: rotate(45deg);
    background: var(--accent);
    color:#fff;
    border-color: var(--accent);
  }

  .faq-answer{
    padding-top: 14px;
    max-width: 700px;
    color:#9a9686;
    font-size: 15.5px;
    line-height: 1.7;
  }

  .faq-answer strong{ color:#ffffff; }

  @media (max-width:640px){
    .faq-section{ padding: 8px 20px 56px; }
    .faq-item summary{ font-size:16.5px; }
    .faq-answer{ font-size:15px; }
  }
  
  
  @media (min-width: 1400px){
  .fr-subnav a:not(.btn){ padding: 8px 12px; font-size: 15px; }
}


/* =====================================================================
   DECORATIVE BORDERS & FRAMES PAGE (decorative-borders-frames.html)
   New classes only – nothing above is modified.
   ===================================================================== */

/* ---------- Sticky top bar: header + centred navigation below ---------- */
.fr-topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #0f0f0f;
}
.fr-header{ position: relative; }

.fr-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fr-logo{ display: inline-flex; align-items: center; }
.fr-logo img{ display: block; }
.fr-linkedin{ white-space: nowrap; }
.fr-subnav .fr-linkedin-mobile{ display: none !important; }
.fr-header .fr-linkedin-desktop{ display: inline-flex !important; justify-content: center; gap: 8px; }

/* Hamburger (hidden on desktop) */
.fr-toggle{
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.fr-toggle:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Navigation bar below the header – centre aligned */
.fr-subnav{
  flex: 1 1 auto;
  min-width: 0;
}

.fr-subnav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
}


.fr-subnav a:not(.btn){
  display: block;
  padding: 8px 9px;
  color: #8e8e8e;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}


.fr-subnav a:not(.btn):hover{ color: #d02771; }
.fr-subnav a.active{ color: #ffffff; border-bottom-color: #ffffff; }

/* Tablet + mobile: hamburger menu */
@media (max-width: 1023px){
  .fr-header{ padding: 16px 0; }
  .fr-header .fr-linkedin-desktop{ display: none !important; }
  .fr-toggle{ display: inline-flex; align-items: center; justify-content: center; }

  .fr-subnav{
    display: none;
    max-height: calc(100vh - var(--header-h, 70px));
    overflow-y: auto;
    padding: 8px 20px 20px;
  }
  .fr-subnav.open{ display: block; }
  .fr-subnav ul{
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 0;
    gap: 0;
  }
  .fr-subnav li{ border-bottom: 1px solid #1c1c1c; }
  .fr-subnav a:not(.btn){
    text-align: center;
    padding: 14px 12px;
    font-size: 17px;
    border-bottom: none;
  }
  .fr-subnav a.active{
    background: rgba(255,255,255,0.08);
    border-radius: 40px;
  }
  .fr-subnav .fr-linkedin-mobile{
    display: flex !important;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
  }
}

/* ---------- Category chips ---------- */
.fr-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1040px;
  margin: 28px auto 0;
}
.fr-chip{
  display: inline-block;
  padding: 7px 16px;
  border-radius: 100px;
  background: #252525;
  color: #b8b4a8;
  font-size: 14.5px;
  font-weight: 500;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.fr-chip:hover{
  color: #ffffff;
  border-color: var(--accent);
  background: rgba(208,39,112,0.14);
}

/* ---------- Category sections ---------- */
.fr-main{ padding: 10px 0 20px; }
.fr-section{
  margin-bottom: 56px;
  scroll-margin-top: calc(var(--header-h, 130px) + 16px);
}
.fr-cat-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 0 2px;
}
.fr-cat-title{
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 30px);
  color: #ffffff;
}
.fr-cat-count{
  font-size: 14px;
  color: #716d60;
  white-space: nowrap;
}

/* ---------- Frame card (same look + behaviour as .shape-card) ---------- */
.frame-card{
  height: 250px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-right: 1px solid #242424;
  border-bottom: 1px solid #242424;
  background-color: #0f0f0f;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.frame-card:hover{ background-color: #000000; }
.frame-card .svg-container{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.frame-card .svg-container svg{
  width: 200px;
  height: 200px;
  transition: transform .3s ease;
}
.frame-card .svg-container svg.frame-wide{
  width: 250px;
  height: auto;
}
.frame-card:hover .svg-container svg{ transform: scale(1.1); }

/* Hover: every line and fill turns white. Frames are line-art, so only
   fills that exist and strokes that exist change – the empty centre stays empty. */
.frame-card svg path,
.frame-card svg path{ transition: fill .2s ease, stroke .2s ease; }
.frame-card:hover svg [fill]:not([fill="none"]){ fill: #ffffff; }
.frame-card:hover svg [stroke]:not([stroke="none"]){ stroke: #ffffff; }

.frame-card .action-bar{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.frame-card:hover .action-bar{ transform: translateY(0); }
.frame-card.copied .action-bar{ color: #198754; }

@media (max-width: 640px){
  .fr-cat-head{ flex-direction: column; align-items: flex-start; gap: 2px; }
  .fr-section{ margin-bottom: 40px; }
  .fr-chips{ gap: 8px; }
  .fr-chip{ font-size: 13.5px; padding: 6px 13px; }
}