:root{
      --bg:#f7f6f2;
      --paper:#ffffff;
      --ink:#1c1c1c;
      --muted:#77736b;
      --line:#ded9cf;
      --soft:#eeeae2;
      --dark:#161616;
      --accent:#d9c8a9;
      --blue:#d9e1ef;
      --green:#dfe7d7;
      --rose:#eadedb;
      --shadow:0 18px 50px rgba(0,0,0,.07);
      --radius:28px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background:var(--bg);
      color:var(--ink);
      letter-spacing:.01em;
    }

    a{color:inherit;text-decoration:none}
    button{font:inherit}

    .hero{
      min-height:650px;
      position:relative;
      overflow:hidden;
      display:grid;
      place-items:center;
      text-align:center;
      border-bottom:1px solid rgba(0,0,0,.06);
    }

    .hero-grid{
      position:absolute;
      inset:0;
      background:
        linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
        linear-gradient(120deg, rgba(211,219,236,.85), rgba(245,239,228,.82));
      background-size:42px 42px,42px 42px,cover;
    }

    .floating-assets{
      position:absolute;
      inset:-60px;
      opacity:.75;
      pointer-events:none;
    }

    .asset-box{
      position:absolute;
      width:210px;
      height:130px;
      border:2px solid rgba(0,0,0,.15);
      background:rgba(255,255,255,.26);
      transform:rotate(-30deg) skewX(28deg);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:18px 18px 0 rgba(0,0,0,.04);
    }

    .asset-box::before,
    .asset-box::after{
      content:"";
      position:absolute;
      background:rgba(0,0,0,.16);
    }
    .asset-box::before{width:62%;height:2px;top:38%;left:18%}
    .asset-box::after{width:40%;height:2px;top:58%;left:28%}

    .asset-box:nth-child(1){left:6%;top:18%}
    .asset-box:nth-child(2){left:24%;top:8%;width:180px;opacity:.45}
    .asset-box:nth-child(3){right:10%;top:18%}
    .asset-box:nth-child(4){left:14%;bottom:12%;width:240px}
    .asset-box:nth-child(5){right:24%;bottom:16%;width:190px;opacity:.5}
    .asset-box:nth-child(6){right:-2%;bottom:34%;width:230px}
    .asset-box:nth-child(7){left:-4%;bottom:38%;width:230px;opacity:.42}

    .hero-content{
      position:relative;
      z-index:2;
      max-width:900px;
      padding:80px 24px;
    }

    .eyebrow{
      text-transform:uppercase;
      letter-spacing:.28em;
      font-size:13px;
      color:#333;
      margin-bottom:18px;
      font-weight:600;
    }

    .hero h1,
    .hero h2{
      margin:0;
      font-size:clamp(44px,7vw,92px);
      line-height:.95;
      letter-spacing:.035em;
      font-weight:760;
    }

    .hero p{
      margin:26px auto 0;
      max-width:680px;
      font-size:20px;
      line-height:1.7;
      color:#403e39;
    }

    .hero-actions{
      margin-top:34px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      flex-wrap:wrap;
    }

    .hero-actions .primary-btn,
    .hero-actions .secondary-btn,
    .detail-actions .primary-btn,
    .detail-actions .secondary-btn{
      min-width:220px;
      min-height:52px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-align:center;
    }

    .primary-btn,.secondary-btn{
      border-radius:0;
      padding:14px 28px;
      min-width:164px;
      cursor:pointer;
      transition:.25s ease;
      border:1px solid #111;
    }

    .primary-btn{
      background:#111;
      color:#fff;
    }

    .primary-btn:hover,.secondary-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 28px rgba(0,0,0,.13);
    }

    .secondary-btn{
      background:rgba(255,255,255,.45);
      color:#111;
    }

    .section{
      padding:86px 48px;
      max-width:1500px;
      margin:0 auto;
    }

    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:30px;
    }

    .section-title{
      margin:0;
      font-size:clamp(30px,4vw,54px);
      line-height:1.05;
      letter-spacing:.02em;
    }

    .section-desc{
      max-width:560px;
      margin:12px 0 0;
      color:var(--muted);
      line-height:1.7;
      font-size:16px;
    }

    .category-strip{
      display:flex;
      gap:18px;
      overflow:visible;
      padding:10px 0 22px;
    }

    .cat-card{
      flex:1 1 0;
      min-width:0;
      height:210px;
      border:1px solid var(--line);
      background:var(--paper);
      border-radius:26px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      cursor:pointer;
      transition:
        transform .46s cubic-bezier(.22, 1, .36, 1),
        box-shadow .46s cubic-bezier(.22, 1, .36, 1),
        border-color .46s ease;
      position:relative;
      overflow:hidden;
      transform-origin:center center;
      will-change:transform;
      backface-visibility:hidden;
      -webkit-font-smoothing:antialiased;
    }

    .cat-card:hover{
      transform:translate3d(0,-10px,0) scale(1.028);
      box-shadow:0 22px 52px rgba(0,0,0,.12);
      border-color:#bbb2a4;
      z-index:2;
    }

    .cat-card .mini-pattern{
      height:76px;
      border-radius:18px;
      background:
        linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px);
      background-size:14px 14px;
      position:relative;
      overflow:hidden;
    }

    .cat-card .mini-pattern::before{
      content:"";
      position:absolute;
      width:82px;
      height:56px;
      border:1px solid rgba(0,0,0,.24);
      left:28px;
      top:18px;
      transform:rotate(-28deg) skewX(28deg);
      background:rgba(255,255,255,.3);
    }

    .cat-card .mini-pattern.has-image{
      background:#eeeae2;
    }

    .cat-card .mini-pattern.has-image::before{
      display:none;
    }

    .cat-card .mini-pattern.has-image img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      transition:transform .46s cubic-bezier(.22, 1, .36, 1);
    }

    .cat-card:hover .mini-pattern.has-image img{
      transform:scale(1.035);
    }

    .cat-card h3{
      margin:0;
      font-size:21px;
      letter-spacing:.01em;
    }

    .cat-card p{
      margin:6px 0 0;
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }

    .category-showcase{
      display:flex;
      flex-direction:column;
      gap:28px;
      padding:10px 0 8px;
    }

    .category-feature{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:34px;
      align-items:center;
    }

    .category-feature:nth-child(even){
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }

    .category-feature:nth-child(even) .category-feature-media{
      order:2;
    }

    .category-feature:nth-child(even) .category-feature-copy{
      order:1;
    }

    .category-feature-media{
      display:block;
      position:relative;
      overflow:hidden;
      border-radius:0;
      border:1px solid var(--line);
      background:var(--paper);
      box-shadow:var(--shadow);
      aspect-ratio:16/9;
    }

    .category-feature-media img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      transition:transform .5s cubic-bezier(.22,1,.36,1);
    }

    .category-feature:hover .category-feature-media img{
      transform:scale(1.028);
    }

    .category-feature-copy{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:10px;
      padding:4px 10px;
    }

    .category-feature-index{
      font-size:12px;
      letter-spacing:.26em;
      text-transform:uppercase;
      color:var(--muted);
    }

    .category-feature-copy h3{
      margin:0;
      font-size:clamp(34px,4vw,52px);
      line-height:1;
      letter-spacing:-.03em;
    }

    .category-feature-copy .category-feature-sub{
      margin:0;
      font-size:15px;
      color:#6f6a62;
      letter-spacing:.02em;
    }

    .category-feature-copy .category-feature-desc{
      margin:4px 0 0;
      font-size:16px;
      line-height:1.75;
      color:var(--muted);
      max-width:46ch;
    }


    .category-feature-audience{
      margin:0;
      font-size:13px;
      line-height:1.65;
      color:#837c72;
      max-width:48ch;
    }

    .category-feature-audience strong{
      color:#2b2925;
      font-weight:650;
    }

    .category-feature-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:2px;
    }

    .category-feature-tags span{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:6px 11px;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(255,255,255,.72);
      color:#5d574f;
      font-size:12px;
      line-height:1;
      letter-spacing:.02em;
    }

    .category-feature-link{
      margin-top:12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-width:176px;
      padding:18px 34px;
      border-radius:0;
      border:1px solid #111;
      background:#111;
      color:#fff;
      font-size:15px;
      font-weight:500;
      letter-spacing:.02em;
      text-transform:none;
      text-decoration:none;
      transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }

    .category-feature-link:hover{
      transform:translateY(-2px);
      background:#2a2a2a;
      border-color:#2a2a2a;
      color:#fff;
    }

    .category-feature-link span{
      font-size:16px;
      line-height:1;
    }

    .featured-wrap{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      border:1px solid var(--line);
      background:var(--paper);
      box-shadow:var(--shadow);
    }

    .featured-track{
      display:flex;
      transition:transform .5s cubic-bezier(.2,.8,.2,1);
    }

    .featured-slide{
      flex:0 0 100%;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      min-height:470px;
    }

    .slide-visual{
      min-height:470px;
      padding:30px;
      display:grid;
      place-items:center;
      background:var(--soft);
    }

    .product-mock{
      width:min(620px,100%);
      aspect-ratio:1.45/1;
      background:#ececea;
      border:1px solid rgba(0,0,0,.08);
      position:relative;
      overflow:hidden;
    }

    .product-mock.plan{
      background:
        radial-gradient(circle at 20% 30%, rgba(0,0,0,.16) 0 2px, transparent 3px),
        linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px),
        #f1f1ef;
      background-size:70px 70px,22px 22px,22px 22px,cover;
    }

    .product-mock.plan::before{
      content:"";
      position:absolute;
      inset:48px 66px;
      border:3px double rgba(0,0,0,.28);
      box-shadow:inset 0 0 0 22px rgba(255,255,255,.35);
    }

    .product-mock.resume{
      display:flex;
      gap:18px;
      padding:38px;
      background:#f7f4ef;
    }

    .resume-page{
      width:32%;
      background:#fff;
      border:1px solid #ddd5c8;
      box-shadow:0 8px 20px rgba(0,0,0,.08);
      padding:12px;
    }

    .fake-line{height:5px;background:#222;margin:8px 0;border-radius:99px}
    .fake-line.thin{height:3px;background:#b8b1a6}
    .fake-circle{width:34px;height:34px;border-radius:50%;background:#ded8ce;margin:0 auto 14px}

    .product-mock.prompt{
      background:#171717;
      color:#fff;
      padding:34px;
      font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:14px;
      line-height:1.8;
    }

    .prompt-chip{
      display:inline-block;
      border:1px solid rgba(255,255,255,.28);
      padding:6px 10px;
      border-radius:999px;
      margin:5px;
      color:#e9e4db;
    }

    .slide-copy{
      padding:52px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .slide-copy .type{
      text-transform:uppercase;
      letter-spacing:.22em;
      font-size:12px;
      color:var(--muted);
      margin-bottom:14px;
      font-weight:700;
    }

    .slide-copy h3{
      margin:0;
      font-size:clamp(30px,4vw,56px);
      line-height:1.08;
      letter-spacing:.02em;
    }

    .slide-copy p{
      margin:22px 0;
      color:#55514b;
      font-size:17px;
      line-height:1.75;
    }

    .meta{
      color:#77736b;
      line-height:1.8;
      margin-bottom:24px;
    }

    .featured-controls{
      position:absolute;
      left:24px;
      right:24px;
      top:50%;
      transform:translateY(-50%);
      display:flex;
      justify-content:space-between;
      pointer-events:none;
    }

    .icon-btn{
      width:46px;
      height:46px;
      border-radius:50%;
      border:1px solid rgba(0,0,0,.2);
      background:rgba(255,255,255,.72);
      cursor:pointer;
      pointer-events:auto;
      transition:.25s ease;
      font-size:22px;
    }

    .icon-btn:hover{
      background:#111;
      color:#fff;
      transform:scale(1.05);
    }

    .product-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:26px;
    }

    .product-card{
      background:transparent;
      cursor:pointer;
      transition:.25s ease;
    }

    .product-card:hover{
      transform:translateY(-5px);
    }

    .thumb{
      aspect-ratio:1.32/1;
      background:#eee;
      border:1px solid var(--line);
      overflow:hidden;
      position:relative;
      display:grid;
      place-items:center;
      transition:.25s ease;
    }

    .product-card:hover .thumb{
      box-shadow:0 18px 40px rgba(0,0,0,.12);
    }

    .thumb-grid{
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
      background-size:18px 18px;
    }

    .thumb-title{
      position:relative;
      z-index:2;
      max-width:78%;
      text-align:center;
      font-size:19px;
      font-weight:720;
      letter-spacing:.02em;
      line-height:1.2;
    }

    .thumb .drawing{
      position:absolute;
      width:70%;
      height:58%;
      border:2px solid rgba(0,0,0,.22);
      transform:rotate(-24deg) skewX(25deg);
      background:rgba(255,255,255,.32);
    }

    .thumb .drawing::before,
    .thumb .drawing::after{
      content:"";
      position:absolute;
      left:18%;
      height:2px;
      background:rgba(0,0,0,.2);
    }
    .thumb .drawing::before{top:34%;width:62%}
    .thumb .drawing::after{top:56%;width:44%}

    .product-info{
      padding:18px 4px 0;
      text-align:center;
    }

    .product-info h3{
      margin:0 auto 8px;
      font-size:21px;
      line-height:1.35;
      max-width:360px;
      font-weight:560;
    }

    .price{
      color:#333;
      font-size:16px;
    }

    .tags{
      margin-top:10px;
      display:flex;
      justify-content:center;
      gap:6px;
      flex-wrap:wrap;
    }

    .tag{
      border:1px solid var(--line);
      color:var(--muted);
      font-size:12px;
      padding:4px 8px;
      border-radius:999px;
    }

    .detail-panel{
      position:fixed;
      inset:0;
      z-index:60;
      background:rgba(18,18,18,.42);
      opacity:0;
      pointer-events:none;
      transition:.25s ease;
      display:flex;
      justify-content:flex-end;
    }

    .detail-panel.open{
      opacity:1;
      pointer-events:auto;
    }

    .detail-card{
      width:min(860px,92vw);
      background:var(--paper);
      height:100%;
      overflow-y:auto;
      transform:translateX(30px);
      transition:.28s ease;
      padding:46px;
    }

    .detail-panel.open .detail-card{
      transform:translateX(0);
    }

    .detail-close{
      float:right;
      width:40px;
      height:40px;
      border-radius:50%;
      border:1px solid var(--line);
      background:#fff;
      cursor:pointer;
    }

    .detail-visual{
      margin:36px 0;
      aspect-ratio:1.4/1;
      background:#eee;
      border:1px solid var(--line);
      display:grid;
      place-items:center;
      position:relative;
      overflow:hidden;
    }

    .detail-card h2{
      font-size:44px;
      line-height:1.1;
      margin:30px 0 12px;
    }

    .detail-card .detail-price{
      font-size:22px;
      margin:0 0 20px;
    }

    .detail-list{
      line-height:1.9;
      color:#44413c;
      font-size:16px;
    }

    .detail-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:28px;
    }

    .tool-band{
      background:#151515;
      color:#fff;
      border-radius:34px;
      padding:56px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:30px;
      align-items:center;
    }

    .tool-band h2{
      margin:0;
      font-size:48px;
      line-height:1.08;
    }

    .tool-band p{
      color:#d6d1c8;
      line-height:1.75;
      font-size:17px;
    }

    .tool-cards{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }

    .tool-card{
      background:#242424;
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      padding:24px;
      min-height:150px;
      transition:.25s ease;
    }

    .tool-card:hover{
      background:#303030;
      transform:translateY(-4px);
    }

    .tool-card h3{margin:0 0 10px;font-size:22px}
    .tool-card p{font-size:14px;margin:0;color:#bbb}

    .footer{
      padding:60px 48px;
      border-top:1px solid rgba(0,0,0,.08);
      display:flex;
      justify-content:space-between;
      gap:30px;
      color:var(--muted);
      max-width:1500px;
      margin:0 auto;
    }

    .floating-gift{
      position:fixed;
      right:32px;
      bottom:32px;
      z-index:30;
      width:58px;
      height:58px;
      border-radius:50%;
      background:#111;
      color:#fff;
      display:grid;
      place-items:center;
      font-size:24px;
      box-shadow:0 14px 34px rgba(0,0,0,.2);
      cursor:pointer;
      transition:.25s ease;
    }

    .floating-gift:hover{
      transform:translateY(-5px) scale(1.04);
    }

    @media (max-width:1100px){
      .nav{display:none}
      .featured-slide{grid-template-columns:1fr}
      .product-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
      .tool-band{grid-template-columns:1fr}
    }

    @media (max-width:680px){
      .site-header{height:auto;padding:18px 20px}
      .brand-text{font-size:13px}
      .header-actions{display:none}
      .hero{min-height:560px}
      .section{padding:58px 20px}
      .section-head{display:block}
      .product-grid{grid-template-columns:1fr}
      .slide-copy{padding:34px 24px}
      .tool-band{padding:34px 24px}
      .tool-cards{grid-template-columns:1fr}
      .footer{display:block;padding:44px 20px}
    }
  
    .product-hero{
      min-height:680px;
      display:block;
      text-align:left;
    }

    .hero-product-track{
      position:relative;
      z-index:2;
      height:680px;
      display:flex;
      transition:transform .55s cubic-bezier(.2,.8,.2,1);
    }

    .hero-product-slide{
      flex:0 0 100%;
      display:grid;
      grid-template-columns:1.08fr .92fr;
      align-items:center;
      padding:110px 64px 70px;
      gap:42px;
    }

    .hero-product-visual{
      display:grid;
      place-items:center;
    }

    .hero-product-copy{
      max-width:660px;
      padding:20px 0;
    }

    .hero-product-copy h1{
      margin:0;
      font-size:clamp(48px,7vw,88px);
      line-height:.96;
      letter-spacing:.025em;
      font-weight:760;
    }

    .hero-product-copy p{
      margin:24px 0 0;
      max-width:560px;
      font-size:19px;
      line-height:1.75;
      color:#403e39;
    }

    .hero-product-controls{
      position:absolute;
      z-index:5;
      left:48px;
      right:48px;
      top:50%;
      transform:translateY(-50%);
      display:flex;
      justify-content:space-between;
      pointer-events:none;
    }

    .hero-product-controls .icon-btn{
      pointer-events:auto;
    }

    .hero-dots{
      position:absolute;
      z-index:6;
      left:50%;
      bottom:34px;
      transform:translateX(-50%);
      display:flex;
      gap:10px;
    }

    .hero-dots button{
      width:9px;
      height:9px;
      border-radius:50%;
      border:1px solid rgba(0,0,0,.35);
      background:transparent;
      cursor:pointer;
      transition:.25s ease;
      padding:0;
    }

    .hero-dots button.active{
      width:34px;
      border-radius:999px;
      background:#111;
      border-color:#111;
    }

    .news-wrap{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      border:1px solid var(--line);
      background:var(--paper);
      box-shadow:var(--shadow);
    }

    .news-track{
      display:flex;
      transition:transform .5s cubic-bezier(.2,.8,.2,1);
    }

    .news-slide{
      flex:0 0 100%;
      min-height:390px;
      display:grid;
      grid-template-columns:.95fr 1.05fr;
    }

    .news-visual{
      padding:34px;
      background:#f0ede5;
      display:grid;
      place-items:center;
    }

    .news-card-large{
      width:min(520px,100%);
      min-height:280px;
      background:#1b1b1b;
      color:#fff;
      padding:34px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:18px 18px 0 rgba(0,0,0,.08);
    }

    .news-card-large.soft-green{
      background:#dfe7d7;
      color:#1c1c1c;
    }

    .news-card-large.soft-blue{
      background:#d9e1ef;
      color:#1c1c1c;
    }

    .news-label{
      text-transform:uppercase;
      letter-spacing:.22em;
      font-size:12px;
      opacity:.72;
      font-weight:700;
    }

    .news-card-large h3{
      margin:22px 0;
      font-size:34px;
      line-height:1.08;
    }

    .news-card-large p{
      margin:0;
      line-height:1.65;
      opacity:.82;
    }

    .news-copy{
      padding:52px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .news-copy .type{
      text-transform:uppercase;
      letter-spacing:.22em;
      font-size:12px;
      color:var(--muted);
      margin-bottom:14px;
      font-weight:700;
    }

    .news-copy h3{
      margin:0;
      font-size:clamp(30px,4vw,50px);
      line-height:1.12;
    }

    .news-copy p{
      color:#55514b;
      font-size:17px;
      line-height:1.75;
      margin:22px 0;
    }

    @media (max-width:1100px){
      .hero-product-slide{grid-template-columns:1fr;padding:104px 32px 70px}
      .hero-product-track{height:auto}
      .product-hero{min-height:auto}
      .news-slide{grid-template-columns:1fr}
    }

    @media (max-width:680px){
      .hero-product-slide{padding:80px 20px 70px}
      .hero-product-controls{left:18px;right:18px}
      .news-copy{padding:34px 24px}
    }

  
    .nav-dropdown{
      position:relative;
      display:inline-block;
    }
    .nav-dropdown .dropdown-content{
      display:none;
      position:absolute;
      background:#fff;
      min-width:160px;
      box-shadow:0 8px 16px rgba(0,0,0,.2);
      border-radius:12px;
      padding:12px 0;
      z-index:10;
      top:40px;
      left:0;
    }
    .nav-dropdown:hover .dropdown-content{
      display:block;
    }
    .nav-dropdown .dropdown-content a{
      display:block;
      padding:8px 16px;
      color:#111;
      font-size:14px;
    }
    .nav-dropdown .dropdown-content a:hover{
      background:#f2f2f2;
    }

    /* Dropdown stability fix: keep hover active while moving from nav text to menu */
    .nav-dropdown::after{
      content:"";
      position:absolute;
      left:-12px;
      right:-12px;
      top:100%;
      height:48px;
      z-index:9;
    }
    .nav-dropdown .dropdown-content{
      z-index:30;
    }

  
    .reference-hero-mock{
      width:min(620px,100%);
      height:390px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      grid-auto-rows:78px;
      gap:14px;
      transform:rotate(-2deg);
    }

    .pin-card{
      background:#f2f0ea;
      border:1px solid rgba(0,0,0,.12);
      box-shadow:0 10px 24px rgba(0,0,0,.08);
      position:relative;
      overflow:hidden;
    }

    .pin-card::before{
      content:"";
      position:absolute;
      inset:16px;
      border:1px solid rgba(0,0,0,.16);
      background:
        linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
      background-size:12px 12px;
    }

    .pin-card.tall{grid-row:span 3;background:#e4e2dc}
    .pin-card.small{grid-row:span 2;background:#eee9df}
    .pin-card.wide{grid-column:span 2;grid-row:span 2;background:#dfe6ee}
    .pin-card.muted{background:#e6e0d6}
    .pin-card.dark{background:#222}
    .pin-card.dark::before{border-color:rgba(255,255,255,.2);background:none}

    @media (max-width:680px){
      .reference-hero-mock{height:300px;grid-auto-rows:58px}
    }

  
    .prompt-hero-mock{
      width:min(620px,100%);
      aspect-ratio:1.45/1;
      background:#171717;
      display:grid;
      place-items:center;
      padding:36px;
      box-shadow:18px 18px 0 rgba(0,0,0,.08);
    }

    .prompt-window{
      width:100%;
      height:100%;
      background:#f7f3ea;
      border:1px solid rgba(255,255,255,.2);
      box-shadow:0 24px 50px rgba(0,0,0,.24);
      overflow:hidden;
    }

    .prompt-toolbar{
      height:42px;
      background:#222;
      display:flex;
      align-items:center;
      gap:8px;
      padding:0 16px;
    }

    .prompt-toolbar span{
      width:10px;
      height:10px;
      border-radius:50%;
      background:#d9c8a9;
      opacity:.85;
    }

    .prompt-lines{
      padding:28px;
    }

    .prompt-line{
      height:14px;
      background:#1d1d1d;
      margin-bottom:16px;
      border-radius:999px;
    }

    .prompt-line.w1{width:72%}
    .prompt-line.w2{width:54%;background:#9a958d}
    .prompt-line.w3{width:86%;background:#c7bba9}

    .prompt-chip-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin:24px 0;
    }

    .prompt-chip-row span{
      border:1px solid #d3c8b5;
      padding:8px 12px;
      border-radius:999px;
      font-size:13px;
      color:#55514b;
      background:#fff;
    }

    .prompt-output{
      background:#111;
      color:#eee8dc;
      padding:18px;
      line-height:1.65;
      font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:13px;
    }

    /* Real product image display */
    .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:.35s ease;
    }
    .product-card:hover .thumb img{transform:scale(1.035);}
    .thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0) 56%);
      pointer-events:none;
      opacity:.55;
    }
    .product-meta-line{
      margin-top:8px;
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .detail-visual{
      display:block;
      aspect-ratio:auto;
      background:transparent !important;
      border:0;
      overflow:visible;
    }
    .detail-main-image{
      width:100%;
      max-height:560px;
      object-fit:contain;
      display:block;
      background:#f4f1ec;
      border:1px solid var(--line);
    }
    .detail-thumbs{
      display:grid;
      grid-template-columns:repeat(5, minmax(0,1fr));
      gap:10px;
      margin-top:12px;
    }
    .detail-thumb{
      aspect-ratio:1.25/1;
      border:1px solid var(--line);
      background:#f4f1ec;
      padding:0;
      cursor:pointer;
      overflow:hidden;
      opacity:.72;
      transition:.2s ease;
    }
    .detail-thumb.active,
    .detail-thumb:hover{
      opacity:1;
      border-color:#111;
      transform:translateY(-1px);
    }
    .detail-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    @media (max-width:760px){
      .detail-card{padding:32px 20px;}
      .detail-card h2{font-size:32px;}
      .detail-thumbs{grid-template-columns:repeat(3, minmax(0,1fr));}
    }


    /* Cross-browser layout stability patch
       Keep homepage carousel and product cards consistent in Chrome / Safari / Edge / Firefox. */
    html{
      -webkit-text-size-adjust:100%;
      text-size-adjust:100%;
    }
    body{
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      text-rendering:geometricPrecision;
    }
    img{
      max-width:100%;
      height:auto;
    }
    .product-hero{
      width:100%;
      contain:layout paint;
    }
    .hero-product-track{
      width:100%;
      max-width:100%;
      overflow:visible;
      will-change:transform;
      transform:translate3d(0,0,0);
      backface-visibility:hidden;
    }
    .hero-product-slide{
      width:100%;
      min-width:100%;
      max-width:100%;
      flex:0 0 100%;
      overflow:hidden;
      transform:translate3d(0,0,0);
    }
    .hero-product-visual,
    .hero-product-copy{
      min-width:0;
    }
    .product-mock,
    .reference-hero-mock,
    .prompt-hero-mock{
      flex:none;
      max-width:620px;
    }
    .section{
      width:100%;
    }
    .product-grid{
      width:100%;
      align-items:start;
    }
    .product-card{
      min-width:0;
      width:100%;
    }
    .thumb{
      width:100%;
      height:auto;
      min-height:0;
      aspect-ratio:1.32 / 1;
      line-height:0;
    }
    @supports not (aspect-ratio: 1 / 1){
      .thumb::before{
        content:"";
        display:block;
        padding-top:75.7576%;
      }
      .thumb > img,
      .thumb > .thumb-grid,
      .thumb > .drawing,
      .thumb > .thumb-title{
        position:absolute;
      }
    }
    .thumb img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center center;
    }
    .product-info h3{
      min-height:2.7em;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .hero-product-copy h1,
    .section-title,
    .product-info h3{
      overflow-wrap:normal;
    }
    .hero-product-copy h1,
    .section-title,
    .notes-section h2,
    .note-content h3,
    .tool-copy h2,
    .product-info h3{
      text-wrap:balance;
    }
    @media (min-width:1201px){
      .product-grid{
        grid-template-columns:repeat(4, minmax(0,1fr));
      }
    }

  
    /* Hero banner image fill */
    .hero-banner-img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .hero-banner-card{
      background:#f3f1eb;
      border:1px solid rgba(0,0,0,.08);
      overflow:hidden;
      box-shadow:var(--shadow);
    }

    .hero-banner-card.product-mock.plan::before{
      display:none;
    }

    .product-mock.resume.banner-resume{
      width:min(760px,100%);
      min-height:430px;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:34px 44px;
      overflow:visible;
    }

    .product-mock.resume.banner-resume .resume-page{
      position:absolute;
      padding:0;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      aspect-ratio:210 / 297;
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 14px 28px rgba(0,0,0,.08);
      transition:transform .25s ease;
    }

    .product-mock.resume.banner-resume .resume-page img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      background:#fff;
    }

    .product-mock.resume.banner-resume .resume-page.main{
      position:relative;
      z-index:3;
      width:min(250px, 36%);
      min-width:220px;
      transform:translateY(0);
    }

    .product-mock.resume.banner-resume .resume-page.left,
    .product-mock.resume.banner-resume .resume-page.right{
      width:min(180px, 28%);
      min-width:150px;
      z-index:2;
      opacity:.98;
    }

    .product-mock.resume.banner-resume .resume-page.left{
      left:62px;
      transform:translateY(10px) rotate(-2deg);
    }

    .product-mock.resume.banner-resume .resume-page.right{
      right:62px;
      transform:translateY(10px) rotate(2deg);
    }

    @media (max-width:680px){
      .product-mock.resume.banner-resume{
        min-height:350px;
        padding:24px 18px;
      }

      .product-mock.resume.banner-resume .resume-page.main{
        width:min(210px, 48%);
        min-width:170px;
      }

      .product-mock.resume.banner-resume .resume-page.left,
      .product-mock.resume.banner-resume .resume-page.right{
        width:min(130px, 28%);
        min-width:96px;
      }

      .product-mock.resume.banner-resume .resume-page.left{
        left:12px;
      }

      .product-mock.resume.banner-resume .resume-page.right{
        right:12px;
      }
    }

    .reference-hero-mock.banner-reference .pin-card::before{
      display:none;
    }

    .reference-hero-mock.banner-reference .pin-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* Reference hero: enlarge left-side image group only */
    .reference-hero-mock.banner-reference{
      width:min(720px,100%);
      height:455px;
      grid-template-columns:1.75fr 1fr 1fr 1fr;
      grid-auto-rows:86px;
      gap:16px;
    }

    .reference-hero-mock.banner-reference .pin-card:first-child{
      grid-row:span 4;
    }

    @media (max-width:680px){
      .reference-hero-mock.banner-reference{
        width:min(100%,620px);
        height:340px;
        grid-template-columns:1.45fr 1fr 1fr 1fr;
        grid-auto-rows:68px;
        gap:12px;
      }
    }

    .prompt-hero-mock.banner-prompt{
      padding:0;
      overflow:hidden;
      box-shadow:18px 18px 0 rgba(0,0,0,.08);
    }

  

    /* Mobile refinement: keep desktop unchanged, improve small-screen readability */
    @media (max-width:900px){
      body{
        overflow-x:hidden;
      }

      .site-header{
        height:auto !important;
        min-height:70px;
        padding:14px 16px !important;
        gap:12px;
        align-items:flex-start;
        flex-wrap:wrap;
      }

      .brand{
        min-width:0 !important;
        gap:10px;
      }

      .brand-logo-img{
        width:38px;
        height:auto;
      }

      .brand-text{
        font-size:13px !important;
        letter-spacing:.22em !important;
        white-space:nowrap;
      }

      .nav{
        display:flex !important;
        width:100%;
        gap:18px;
        overflow-x:auto;
        overflow-y:visible;
        padding:4px 0 8px;
      }

      .nav::-webkit-scrollbar{
        display:none;
      }

      .nav a{
        font-size:14px;
        white-space:nowrap;
      }

      .nav-dropdown{
        flex:0 0 auto;
      }

      .dropdown-content{
        top:34px;
        left:0;
      }

      .header-actions{
        display:none !important;
      }

      .hero{
        min-height:auto !important;
        padding:48px 18px;
      }

      .section{
        padding:54px 18px !important;
      }

      .section-head{
        display:block !important;
      }

      .section-title{
        font-size:clamp(34px,11vw,54px) !important;
        line-height:1.02;
      }

      .section-desc{
        font-size:15px;
        line-height:1.75;
      }

      .tabs{
        display:flex;
        gap:10px;
        overflow-x:auto;
        flex-wrap:nowrap !important;
        justify-content:flex-start !important;
        padding-bottom:6px;
        -webkit-overflow-scrolling:touch;
      }

      .tabs::-webkit-scrollbar{
        display:none;
      }

      .tab{
        flex:0 0 auto;
        white-space:nowrap;
      }

      .masonry{
        grid-template-columns:1fr !important;
      }

      .pin{
        border-radius:24px !important;
      }

      .footer{
        display:block !important;
        padding:36px 18px !important;
        font-size:13px;
        line-height:1.7;
      }
    }



    /* Homepage mobile layout */
    @media (max-width:900px){
      .product-hero{
        min-height:760px !important;
      }

      .hero-product-track{
        height:auto !important;
      }

      .hero-product-slide{
        grid-template-columns:1fr !important;
        align-content:start;
        padding:80px 20px 60px !important;
        gap:20px !important;
      }

      .hero-product-visual{
        order:1;
        width:100%;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:center;
      }

      .hero-product-copy{
        order:2;
        max-width:100%;
        padding:0 !important;
      }

      .hero-product-copy h1{
        font-size:clamp(42px,13vw,72px) !important;
        line-height:1 !important;
      }

      .hero-product-copy p{
        font-size:16px !important;
        line-height:1.7 !important;
        margin-top:18px !important;
      }

      .hero-actions{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
      }

      .hero-actions .primary-btn,
      .hero-actions .secondary-btn{
        flex:1 1 150px;
        min-height:46px;
        padding-left:14px;
        padding-right:14px;
      }

      .product-mock,
      .hero-banner-card,
      .prompt-hero-mock.banner-prompt,
      .reference-hero-mock.banner-reference{
        width:100% !important;
        max-width:560px;
      }

      .product-mock.plan,
      .hero-banner-card,
      .prompt-hero-mock.banner-prompt{
        aspect-ratio:1.55 / 1;
        height:auto !important;
      }

      .reference-hero-mock.banner-reference{
        height:330px !important;
        grid-template-columns:1.3fr 1fr 1fr !important;
        grid-auto-rows:64px !important;
        gap:10px !important;
      }

      .product-mock.resume.banner-resume{
        width:100% !important;
        min-height:330px !important;
        padding:22px 18px !important;
      }

      .product-mock.resume.banner-resume .resume-page.main{
        width:min(180px,48%) !important;
        min-width:150px !important;
      }

      .product-mock.resume.banner-resume .resume-page.left,
      .product-mock.resume.banner-resume .resume-page.right{
        width:min(118px,29%) !important;
        min-width:86px !important;
      }

      .product-mock.resume.banner-resume .resume-page.left{
        left:14px !important;
      }

      .product-mock.resume.banner-resume .resume-page.right{
        right:14px !important;
      }

      .hero-product-controls{
        left:14px !important;
        right:14px !important;
      }

      .hero-product-controls .icon-btn{
        width:42px;
        height:42px;
      }

      .hero-dots{
        bottom:28px !important;
      }

      .product-grid{
        grid-template-columns:1fr !important;
      }

      .product-card{
        border-radius:24px !important;
      }

      .detail-panel{
        justify-content:center !important;
      }

      .detail-card{
        width:100vw !important;
        padding:26px 20px !important;
      }

      .detail-card h2{
        font-size:32px !important;
      }

      .detail-visual{
        margin:24px 0 !important;
      }

      .news-slide{
        grid-template-columns:1fr !important;
        min-height:auto !important;
      }

      .news-visual{
        padding:20px !important;
      }

      .news-copy{
        padding:28px 22px !important;
      }

      .news-copy h3{
        font-size:clamp(28px,9vw,42px) !important;
        line-height:1.12 !important;
      }

      .news-copy p{
        font-size:15px !important;
        line-height:1.75 !important;
      }

      .news-card-large{
        width:100% !important;
        min-height:220px !important;
        padding:26px !important;
      }

      .news-card-large h3{
        font-size:clamp(28px,8vw,38px) !important;
      }

      .tool-band{
        grid-template-columns:1fr !important;
        padding:34px 22px !important;
        border-radius:26px !important;
      }

      .tool-band h2{
        font-size:clamp(32px,10vw,46px) !important;
      }

      .tool-cards{
        grid-template-columns:1fr !important;
      }

      .floating-gift{
        width:48px !important;
        height:48px !important;
        right:18px !important;
        bottom:18px !important;
      }
    }



    /* Desktop homepage hero height fix: keep carousel content vertically centered */
    @media (min-width:901px){
      .product-hero{
        min-height:640px;
      }

      .hero-product-track{
        height:640px;
      }

      .hero-product-slide{
        padding-top:82px;
        padding-bottom:58px;
        align-items:center;
      }

      .hero-product-visual{
        max-height:500px;
        overflow:visible;
      }

      .hero-product-copy{
        transform:translateY(-8px);
      }
    }



    /* Desktop hero visual fit fix: keep first and Inspiration Board slides inside the viewport */
    @media (min-width:901px){
      .product-hero{
        min-height:600px !important;
      }

      .hero-product-track{
        height:600px !important;
      }

      .hero-product-slide{
        padding:64px 64px 56px !important;
        align-items:center !important;
      }

      .hero-product-copy{
        transform:none !important;
      }

      .hero-product-copy h1{
        font-size:clamp(48px,6.2vw,78px) !important;
      }

      .hero-product-copy p{
        margin-top:18px !important;
        font-size:17px !important;
        line-height:1.65 !important;
      }

      .hero-product-visual{
        max-height:430px !important;
        overflow:hidden !important;
        align-self:center !important;
      }

      .product-mock.plan.hero-banner-card{
        width:min(560px,100%) !important;
        height:380px !important;
        aspect-ratio:auto !important;
      }

      .product-mock.plan.hero-banner-card .hero-banner-img{
        object-fit:cover !important;
        object-position:center center !important;
        transform:scale(1.08);
        transform-origin:center center;
        background:#fff;
      }

      .reference-hero-mock.banner-reference{
        width:min(600px,100%) !important;
        height:380px !important;
        grid-auto-rows:70px !important;
        gap:12px !important;
      }

      .hero-actions{
        margin-top:24px !important;
      }

      .hero-dots{
        bottom:18px !important;
      }

      .hero-product-controls{
        top:50% !important;
      }
    }



    /* Mobile horizontal scroll fix: only nav can scroll sideways, page content stays vertical */
    @media (max-width:900px){
      html,
      body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
      }

      body > *{
        max-width:100vw;
      }

      .site-header{
        max-width:100vw;
        overflow-x:hidden !important;
      }

      .nav{
        display:flex !important;
        width:100%;
        max-width:100%;
        min-width:0;
        overflow-x:auto !important;
        overflow-y:visible !important;
        flex-wrap:nowrap !important;
        justify-content:flex-start !important;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }

      .nav::-webkit-scrollbar{
        display:none;
      }

      main,
      .hero,
      .product-hero,
      .section,
      .masonry-wrap,
      .tool-band,
      .footer{
        max-width:100vw !important;
        overflow-x:hidden !important;
      }

      .hero-product-slide,
      .news-slide,
      .product-grid,
      .masonry,
      .tool-cards{
        max-width:100% !important;
      }

      img,
      video,
      canvas,
      svg{
        max-width:100%;
      }
    }




    /* Equal-width action buttons */
    @media (max-width:680px){
      .hero-actions .primary-btn,
      .hero-actions .secondary-btn,
      .detail-actions .primary-btn,
      .detail-actions .secondary-btn{
        width:100%;
        max-width:360px;
        min-width:0;
      }
    }

    /* Mobile dropdown menu: desktop navigation remains unchanged */
    .mobile-menu-toggle,
    .mobile-menu-panel{
      display:none;
    }

    @media (max-width:900px){
      .site-header{
        position:sticky;
        top:0;
        display:flex;
        align-items:center !important;
        justify-content:space-between;
        flex-wrap:nowrap !important;
        overflow:visible !important;
      }

      .brand{
        flex:1 1 auto;
        min-width:0 !important;
      }

      .brand-text{
        max-width:calc(100vw - 120px);
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .nav,
      .header-actions{
        display:none !important;
      }

      .mobile-menu-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
        border:1px solid var(--line);
        border-radius:999px;
        background:rgba(255,255,255,.76);
        padding:9px 14px;
        font-size:13px;
        color:#1c1c1c;
        cursor:pointer;
        letter-spacing:.04em;
      }

      .mobile-menu-panel{
        display:none;
        position:absolute;
        top:calc(100% + 8px);
        right:14px;
        left:14px;
        z-index:80;
        max-height:72vh;
        overflow-y:auto;
        background:rgba(255,255,255,.96);
        border:1px solid var(--line);
        border-radius:22px;
        box-shadow:0 20px 48px rgba(0,0,0,.14);
        padding:12px;
        backdrop-filter:blur(18px);
      }

      .mobile-menu-panel.open{
        display:block;
      }

      .mobile-menu-panel a{
        display:block;
        padding:12px 14px;
        border-radius:14px;
        color:#1c1c1c;
        font-size:15px;
        line-height:1.25;
      }

      .mobile-menu-panel a:hover{
        background:#f3f0e8;
      }

      .mobile-menu-group{
        margin:10px 8px 4px;
        color:var(--muted);
        font-size:11px;
        line-height:1;
        letter-spacing:.18em;
        text-transform:uppercase;
        font-weight:700;
      }

      html,
      body{
        overflow-x:hidden !important;
      }
    }



    /* Homepage product preview / Assets page refinements */
    .view-more-row{
      display:flex;
      justify-content:center;
      margin-top:36px;
    }
    .view-more-row .primary-btn{
      min-width:220px;
      text-align:center;
    }
    .asset-filter-tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .asset-filter-tabs .tab{
      border:1px solid var(--line);
      border-radius:999px;
      padding:10px 16px;
      background:#fff;
      cursor:pointer;
      transition:.25s ease;
      font-size:13px;
    }
    .asset-filter-tabs .tab:hover,
    .asset-filter-tabs .tab.active{
      background:#111;
      color:#fff;
      border-color:#111;
    }
    @media (max-width:900px){
      .asset-filter-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none;}
      .asset-filter-tabs::-webkit-scrollbar{display:none;}
      .asset-filter-tabs .tab{flex:0 0 auto;}
      .view-more-row .primary-btn{width:min(100%,320px);}
    }


    /* Mobile Category cards: product-style entrance cards only. Desktop remains unchanged. */
    @media (max-width:900px){
      .category-strip{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:24px !important;
        overflow:visible !important;
        padding:8px 0 12px !important;
      }

      .cat-card{
        width:100% !important;
        min-width:0 !important;
        height:auto !important;
        min-height:0 !important;
        padding:0 !important;
        border-radius:0 !important;
        display:block !important;
        background:transparent !important;
        border:0 !important;
        overflow:visible !important;
        transform:none !important;
        box-shadow:none !important;
      }

      .cat-card:hover{
        transform:translate3d(0,-4px,0) !important;
        box-shadow:none !important;
        border-color:transparent !important;
      }

      .cat-card .mini-pattern{
        width:100% !important;
        height:auto !important;
        aspect-ratio:1.32 / 1 !important;
        margin:0 !important;
        border-radius:0 !important;
        border:1px solid var(--line);
        background:
          linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px),
          linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
          #f2f0ea !important;
        background-size:18px 18px,18px 18px,cover !important;
        position:relative;
        overflow:hidden;
        box-shadow:none;
        transition:.25s ease;
      }

      .cat-card:hover .mini-pattern{
        box-shadow:0 18px 40px rgba(0,0,0,.12);
      }

      .cat-card .mini-pattern::before{
        width:68% !important;
        height:54% !important;
        left:16% !important;
        top:22% !important;
        border:2px solid rgba(0,0,0,.18) !important;
        transform:rotate(-24deg) skewX(25deg) !important;
        background:rgba(255,255,255,.32) !important;
      }

      .cat-card .mini-pattern::after{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(to top, rgba(0,0,0,.08), rgba(0,0,0,0) 58%);
        pointer-events:none;
        opacity:.45;
      }

      .cat-card > div:last-child{
        padding:18px 4px 0;
        text-align:center;
      }

      .cat-card h3{
        margin:0 auto 8px !important;
        font-size:24px !important;
        line-height:1.25 !important;
        font-weight:720 !important;
        letter-spacing:.01em !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
        white-space:normal !important;
      }

      .cat-card p{
        margin:0 !important;
        color:var(--muted) !important;
        font-size:14px !important;
        line-height:1.55 !important;
        word-break:normal !important;
        white-space:normal !important;
      }
    }

    @media (max-width:420px){
      .category-strip{
        gap:22px !important;
      }

      .cat-card h3{
        font-size:22px !important;
      }

      .cat-card p{
        font-size:13px !important;
      }
    }


    /* Mobile Category layout refinement: desktop remains unchanged */
    @media (max-width:900px){
      #all .section-head{
        margin-bottom:28px;
      }

      #all .category-showcase{
        gap:46px;
        padding-top:2px;
      }

      #all .category-feature,
      #all .category-feature:nth-child(even){
        display:flex;
        flex-direction:column;
        gap:18px;
        align-items:stretch;
      }

      #all .category-feature:nth-child(even) .category-feature-media,
      #all .category-feature:nth-child(even) .category-feature-copy{
        order:initial;
      }

      #all .category-feature-media{
        width:100%;
        aspect-ratio:4/3;
        box-shadow:none;
      }

      #all .category-feature-copy{
        width:100%;
        padding:0;
        gap:9px;
      }

      #all .category-feature-index{
        font-size:11px;
        letter-spacing:.22em;
      }

      #all .category-feature-copy h3{
        font-size:clamp(34px,10vw,48px);
        line-height:1.02;
      }

      #all .category-feature-copy .category-feature-sub{
        font-size:16px;
        line-height:1.55;
      }

      #all .category-feature-copy .category-feature-desc{
        max-width:none;
        font-size:15px;
        line-height:1.85;
      }


      #all .category-feature-audience{
        max-width:none;
        font-size:13px;
        line-height:1.75;
      }

      #all .category-feature-tags{
        gap:7px;
      }

      #all .category-feature-tags span{
        font-size:11px;
        min-height:27px;
        padding:6px 10px;
      }

      #all .category-feature-link{
        width:100%;
        min-width:0;
        margin-top:12px;
        padding:16px 22px;
      }
    }

    @media (max-width:420px){
      #all .category-showcase{
        gap:42px;
      }

      #all .category-feature-copy h3{
        font-size:36px;
      }
    }


/* v98 Studio Notes & Trends */
.notes-section{
  padding:84px 48px 96px;
  background:#f7f6f2;
}
.notes-header{
  max-width:1520px;
  margin:0 auto 34px;
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
}
.notes-header h2{
  margin:0;
  font-size:clamp(30px,4vw,54px);
  line-height:1.05;
  letter-spacing:.02em;
}
.notes-header p{
  margin:18px 0 0;
  max-width:680px;
  color:#77736b;
  font-size:17px;
  line-height:1.8;
}
.notes-header .section-kicker{
  margin:0 0 12px;
  font-size:13px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:700;
  color:#8b867d;
}
.notes-slider{
  max-width:1520px;
  margin:0 auto;
  position:relative;
}
.notes-track{
  position:relative;
  min-height:420px;
}
.note-card{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  border:1px solid #ded9cf;
  border-radius:34px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 22px 48px rgba(0,0,0,.06);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .28s ease, transform .28s ease;
  position:absolute;
  inset:0;
}
.note-card.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
  position:relative;
}
.note-visual{
  min-height:420px;
  padding:58px 62px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:28px;
  border-right:1px solid #ebe6dc;
}
.note-visual span,
.note-type{
  margin:0;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:13px;
  font-weight:700;
  color:#8b867d;
}
.note-visual h3{
  margin:0;
  font-size:clamp(28px,3.2vw,46px);
  line-height:1.15;
  letter-spacing:.03em;
}
.note-visual p{
  margin:0;
  font-size:16px;
  line-height:1.8;
  color:#77736b;
}
.note-visual-dark{
  background:#171717;
  color:#fff;
}
.note-visual-dark span,
.note-visual-dark p{
  color:rgba(255,255,255,.68);
}
.note-visual-light{
  background:
    radial-gradient(circle at 20% 28%, rgba(0,0,0,.06) 0 1px, transparent 2px),
    linear-gradient(135deg,#f6f3ec,#ffffff);
  background-size:18px 18px,auto;
}
.note-visual-grid{
  background:
    linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),
    #f3f0e8;
  background-size:28px 28px;
}
.note-content{
  padding:58px 64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.note-content h3{
  margin:18px 0 22px;
  font-size:clamp(32px,4.8vw,58px);
  line-height:1.12;
  letter-spacing:.01em;
}
.note-content p:not(.note-type){
  margin:0;
  color:#66615a;
  font-size:18px;
  line-height:1.9;
  max-width:720px;
}
.note-link{
  margin-top:34px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:58px;
  border:1px solid #1d1d1d;
  color:#1d1d1d;
  font-size:17px;
  transition:.22s ease;
}
.note-link:hover{
  background:#1d1d1d;
  color:#fff;
}
.notes-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid #d8d2c8;
  background:rgba(255,255,255,.86);
  color:#1d1d1d;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.notes-prev{left:26px}
.notes-next{right:26px}
@media (max-width:900px){
  .notes-section{padding:58px 20px 72px}
  .notes-header{display:block;margin-bottom:24px}
  .notes-header h2{font-size:clamp(34px,11vw,54px);line-height:1.02}
  .notes-track{min-height:auto}
  .note-card{
    grid-template-columns:1fr;
    border-radius:26px;
  }
  .note-visual{
    min-height:260px;
    padding:34px 30px;
    border-right:0;
    border-bottom:1px solid #ebe6dc;
  }
  .note-content{
    padding:34px 30px 38px;
  }
  .note-content h3{font-size:32px}
  .note-content p:not(.note-type){font-size:15px}
  .notes-arrow{
    width:44px;
    height:44px;
    font-size:28px;
  }
  .notes-prev{left:10px}
  .notes-next{right:10px}
}


/* v100 Studio Notes: fixed card size + fade-only transition */
.notes-track{
  height:420px;
  min-height:420px;
}
.note-card{
  position:absolute;
  inset:0;
  min-height:420px;
  transform:none !important;
  transition:opacity .42s ease !important;
}
.note-card.is-active{
  position:absolute;
  opacity:1;
  pointer-events:auto;
  transform:none !important;
}
.note-visual{
  min-height:420px;
}
@media (max-width:900px){
  .notes-track{
    height:720px;
    min-height:720px;
  }
  .note-card,
  .note-card.is-active{
    position:absolute;
    min-height:720px;
  }
  .note-visual{
    min-height:260px;
  }
}
@media (max-width:520px){
  .notes-track{
    height:760px;
    min-height:760px;
  }
  .note-card,
  .note-card.is-active{
    min-height:760px;
  }
}


/* v101 Studio Notes: lighter note-card layout */
.notes-section{
  padding-top:76px;
  padding-bottom:86px;
}
.notes-header{
  margin-bottom:26px;
}
.notes-track{
  height:360px;
  min-height:360px;
}
.note-card,
.note-card.is-active{
  grid-template-columns:.38fr .62fr;
  min-height:360px;
  position:absolute;
  inset:0;
  transform:none !important;
  transition:opacity .42s ease !important;
}
.note-card{
  opacity:0;
  pointer-events:none;
}
.note-card.is-active{
  opacity:1;
  pointer-events:auto;
}
.note-visual{
  min-height:360px;
  padding:44px 48px;
  gap:18px;
  align-items:flex-start;
}
.note-visual h3{
  font-size:clamp(26px,2.7vw,40px);
  line-height:1.08;
  letter-spacing:.02em;
  max-width:420px;
}
.note-visual p{
  font-size:15px;
  line-height:1.65;
  color:#8a857d;
}
.note-visual-dark p,
.note-visual-dark span{
  color:rgba(255,255,255,.62);
}
.note-content{
  padding:46px 60px;
}
.note-content h3{
  font-size:clamp(30px,4vw,48px);
  line-height:1.12;
  margin:14px 0 18px;
}
.note-content p:not(.note-type){
  font-size:16px;
  line-height:1.85;
}
.note-link{
  margin-top:28px;
  min-height:52px;
}
@media (max-width:900px){
  .notes-section{
    padding-top:58px;
    padding-bottom:72px;
  }
  .notes-track{
    height:610px;
    min-height:610px;
  }
  .note-card,
  .note-card.is-active{
    grid-template-columns:1fr;
    min-height:610px;
  }
  .note-visual{
    min-height:210px;
    padding:30px 28px;
    gap:14px;
  }
  .note-visual h3{
    font-size:32px;
  }
  .note-content{
    padding:30px 28px 34px;
  }
  .note-content h3{
    font-size:30px;
  }
}
@media (max-width:520px){
  .notes-track{
    height:650px;
    min-height:650px;
  }
  .note-card,
  .note-card.is-active{
    min-height:650px;
  }
}


/* v107 nav fixed fallback: desktop + mobile header stays visible */
.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:3000 !important;
  background:rgba(247,246,242,.96) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body{
  padding-top:86px !important;
}
@media (max-width:900px){
  body{
    padding-top:72px !important;
  }
}


/* v108 mid-desktop hero fix: prevent hero visual overlapping copy */
@media (min-width:901px) and (max-width:1280px){
  .product-hero{
    min-height:auto !important;
  }

  .hero-product-track{
    height:auto !important;
  }

  .hero-product-slide{
    grid-template-columns:1fr !important;
    padding:72px 48px 64px !important;
    gap:28px !important;
    align-content:start !important;
    overflow:hidden !important;
  }

  .hero-product-visual{
    width:100% !important;
    max-height:none !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .hero-product-copy{
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:left !important;
    transform:none !important;
  }

  .hero-product-copy h1{
    font-size:clamp(44px,8vw,72px) !important;
    line-height:.98 !important;
  }

  .product-mock.plan.hero-banner-card,
  .prompt-hero-mock.banner-prompt{
    width:min(680px,100%) !important;
    height:360px !important;
    aspect-ratio:auto !important;
  }

  .product-mock.resume.banner-resume{
    width:min(720px,100%) !important;
    min-height:380px !important;
  }

  .reference-hero-mock.banner-reference{
    width:min(680px,100%) !important;
    height:390px !important;
  }

  .hero-actions{
    justify-content:flex-start !important;
  }
}



    /* v121: product detail modal below sticky header, prevents title being covered */
    :root{
      --product-detail-header-offset:104px;
    }

    .detail-panel{
      top:var(--product-detail-header-offset) !important;
      right:0 !important;
      bottom:0 !important;
      left:0 !important;
      height:auto !important;
      z-index:90 !important;
    }

    .detail-card{
      height:calc(100vh - var(--product-detail-header-offset)) !important;
      max-height:calc(100vh - var(--product-detail-header-offset)) !important;
    }

    @media (max-width:900px){
      :root{
        --product-detail-header-offset:74px;
      }

      .detail-panel{
        top:var(--product-detail-header-offset) !important;
      }

      .detail-card{
        height:calc(100vh - var(--product-detail-header-offset)) !important;
        max-height:calc(100vh - var(--product-detail-header-offset)) !important;
        padding-top:22px !important;
      }
    }


    /* v183: Home hero stable title fix
       Keep the original left-right carousel structure, but prevent language switching from creating oversized single-line Chinese titles. */
    .product-hero .hero-product-copy h1,
    .product-hero .hero-product-copy h2{
      font-size:clamp(46px,5.6vw,76px) !important;
      line-height:1.03 !important;
      letter-spacing:.02em !important;
      font-weight:760 !important;
      white-space:normal !important;
      word-break:normal !important;
      overflow-wrap:normal !important;
    }

    @media (min-width:901px) and (max-width:1280px){
      .product-hero .hero-product-copy h1,
      .product-hero .hero-product-copy h2{
        font-size:clamp(42px,7vw,68px) !important;
      }
    }

    @media (max-width:900px){
      .product-hero .hero-product-copy h1,
      .product-hero .hero-product-copy h2{
        font-size:clamp(38px,12vw,58px) !important;
        line-height:1.05 !important;
      }
    }