*,*::before,*::after{box-sizing:border-box}

        :root{
          --bg:#0a0708;
          --bg2:rgba(12,9,10,.72);
          --sf:rgba(255,240,245,.035);
          --sf2:rgba(255,240,245,.07);
          --bd:rgba(255,210,220,.10);
          --bd2:rgba(255,210,220,.22);
          --fg:#f8eef1;
          --dm:#c4a8b0;
          --mu:#7a6068;
          --kb:#ffb3c9;
          --ms:#ff5c8a;
          --f:'Yomogi','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
          --m:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
          color-scheme:dark;
        }

        html,body{height:100%;margin:0}

        body{
          background:var(--bg);
          color:var(--fg);
          font-family:var(--f);
          font-size:14.5px;
          line-height:1.5;
          -webkit-font-smoothing:antialiased;
          user-select:none;
          overflow:hidden;
        }

        body::before{
          content:'';
          position:fixed;
          inset:0;
          background:url('../images/background.jpeg') center/cover no-repeat;
          opacity:.7;
          z-index:0;
          pointer-events:none;
        }

        body::after{
          content:'';
          position:fixed;
          inset:0;
          z-index:0;
          pointer-events:none;
          background:linear-gradient(180deg, rgba(10,4,8,.72), rgba(10,4,8,.9));
        }

        ::-webkit-scrollbar{width:8px;height:8px}
        ::-webkit-scrollbar-track{background:transparent}
        ::-webkit-scrollbar-thumb{background:rgba(255,190,210,.12)}
        ::-webkit-scrollbar-thumb:hover{background:rgba(255,190,210,.22)}

        .ap{
          position:relative;
          z-index:1;
          display:grid;
          grid-template-rows:auto 1fr;
          height:100vh;
        }

        .tp{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:32px;
          padding:16px 32px;
          background:var(--bg2);
          backdrop-filter:blur(20px) saturate(1.4);
          -webkit-backdrop-filter:blur(20px) saturate(1.4);
          border-bottom:1px solid var(--bd);
          position:relative;
        }

        .br{
          display:flex;
          align-items:center;
          gap:14px;
          text-decoration:none;
          color:inherit;
        }

        .bl{
          width:42px;height:42px;
          object-fit:contain;
          padding:5px;
          border:1px solid var(--bd2);
          background:var(--sf);
          flex-shrink:0;
        }

        .bi h1{
          margin:0;
          font-size:24px;
          font-weight:400;
          letter-spacing:.04em;
          line-height:1;
          color:var(--fg);
        }

        .bi span{
          display:block;
          margin-top:4px;
          font-size:11px;
          letter-spacing:.28em;
          text-transform:uppercase;
          color:var(--mu);
          font-weight:400;
        }

        .tr{
          display:flex;
          align-items:center;
          gap:10px;
        }

        .icm{
          display:inline-flex;
          align-items:center;
          gap:8px;
          padding:8px 14px;
          border:1px solid var(--bd);
          background:var(--sf);
          color:var(--dm);
          text-decoration:none;
          font-size:13px;
          letter-spacing:.06em;
          transition:background .15s,border-color .15s,color .15s;
        }

        .icm img{
          width:16px;height:16px;object-fit:contain;
          filter:brightness(0) saturate(100%) invert(73%) sepia(11%) saturate(561%) hue-rotate(314deg) brightness(97%) contrast(86%);
        }

        .icm:hover{
          background:var(--sf2);
          border-color:var(--bd2);
          color:var(--fg);
        }

        .cta{
          display:inline-block;
          padding:9px 22px;
          background:var(--ms);
          color:#fff;
          text-decoration:none;
          font-size:13.5px;
          letter-spacing:.08em;
          border:1px solid var(--ms);
          transition:background .2s, border-color .2s, transform .15s;
          white-space:nowrap;
        }

        .cta:hover{
          background:#ff7aa2;
          border-color:#ff7aa2;
        }

        .stg{position:relative;overflow:hidden}

        .pn{
          position:absolute;inset:0;
          padding:40px 56px 40px;
          display:flex;flex-direction:column;
          overflow-y:auto;
          opacity:0;visibility:hidden;
          transform:translateY(8px);
          transition:opacity .3s,transform .3s,visibility 0s linear .3s;
        }

        .pn.on{
          opacity:1;visibility:visible;transform:translateY(0);
          transition:opacity .3s,transform .3s,visibility 0s;
        }

        .hm{
          width:100%;
          max-width:820px;
          margin:0 auto;
          display:flex;
          flex-direction:column;
          gap:28px;
        }

        .bgh{
          display:flex;
          flex-direction:column;
          gap:8px;
          padding-bottom:12px;
          border-bottom:1px solid var(--bd);
        }

        .sck{
          font-size:10px;
          letter-spacing:.28em;
          text-transform:uppercase;
          color:var(--dm);
          font-weight:400;
        }

        .bgt{
          margin:0;
          font-size:44px;
          font-weight:400;
          letter-spacing:.01em;
          line-height:1.1;
          color:var(--fg);
        }

        .bgs{
          margin:0;
          font-size:15px;
          line-height:1.7;
          color:var(--dm);
          letter-spacing:.02em;
          max-width:640px;
        }

        .pls{
          display:flex;
          flex-direction:column;
          gap:12px;
        }

        .pc{
          display:block;
          padding:26px 28px;
          background:var(--sf);
          border:1px solid var(--bd);
          text-decoration:none;
          color:var(--fg);
          transition:background .15s,border-color .15s,transform .2s;
        }

        .pc:hover{
          background:var(--sf2);
          border-color:var(--bd2);
          transform:translateY(-2px);
        }

        .pc:hover .prd{color:var(--kb)}

        .pm{
          display:flex;
          align-items:center;
          gap:12px;
          margin-bottom:12px;
          font-size:11px;
          letter-spacing:.06em;
          color:var(--mu);
        }

        .pml{
          margin-bottom:20px;
          font-size:12px;
        }

        .ptg{
          font-family:var(--m);
          font-size:10px;
          font-weight:600;
          letter-spacing:.14em;
          text-transform:uppercase;
          color:var(--kb);
          padding:4px 10px;
          background:rgba(255,179,201,.07);
          border:1px solid rgba(255,179,201,.22);
        }

        .pd{color:var(--mu)}

        .pdt{color:var(--bd2)}

        .prt{color:var(--mu)}

        .ptl{
          margin:0 0 10px;
          font-size:24px;
          font-weight:400;
          letter-spacing:.01em;
          line-height:1.25;
          color:var(--fg);
        }

        .pex{
          margin:0 0 16px;
          font-size:14px;
          line-height:1.75;
          color:var(--dm);
          letter-spacing:.02em;
        }

        .prd{
          font-family:var(--m);
          font-size:11.5px;
          font-weight:600;
          letter-spacing:.08em;
          color:var(--mu);
          transition:color .2s;
        }

        .post{
          max-width:760px;
          gap:0;
        }

        .bk{
          display:inline-block;
          margin-bottom:24px;
          font-family:var(--m);
          font-size:12px;
          letter-spacing:.08em;
          color:var(--mu);
          text-decoration:none;
          transition:color .15s;
        }

        .bk:hover{color:var(--kb)}

        .ph1{
          margin:0 0 24px;
          font-size:46px;
          font-weight:400;
          letter-spacing:.01em;
          line-height:1.12;
          color:var(--fg);
        }

        .pld{
          margin:0 0 40px;
          padding-bottom:32px;
          border-bottom:1px solid var(--bd);
          font-size:17px;
          line-height:1.75;
          color:var(--dm);
          letter-spacing:.02em;
        }

        .pb{
          display:flex;
          flex-direction:column;
          gap:20px;
        }

        .pb h2{
          margin:28px 0 0;
          font-size:24px;
          font-weight:400;
          letter-spacing:.01em;
          line-height:1.3;
          color:var(--fg);
        }

        .pb h2:first-child{margin-top:0}

        .pb p{
          margin:0;
          font-size:15px;
          line-height:1.85;
          color:var(--dm);
          letter-spacing:.02em;
        }

        .pcta{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:24px;
          margin-top:32px;
          padding:26px 28px;
          background:var(--sf);
          border:1px solid var(--bd);
          position:relative;
        }

        .pcta::before{
          content:'';
          position:absolute;
          left:0;top:0;bottom:0;
          width:3px;
          background:var(--ms);
        }

        .pctt h3{
          margin:0 0 4px;
          font-size:18px;
          font-weight:400;
          letter-spacing:.02em;
        }

        .pctt p{
          margin:0;
          font-size:13px;
          color:var(--dm);
          letter-spacing:.02em;
        }

        .an{
          display:grid;
          grid-template-columns:auto 1fr;
          gap:20px;
          align-items:start;
          padding:24px 26px;
          background:var(--sf);
          border:1px solid var(--bd);
          position:relative;
        }

        .an::before{
          content:'';
          position:absolute;
          left:0;top:0;bottom:0;
          width:3px;
          background:var(--dm);
        }

        .anm{
          display:grid;
          place-items:center;
          width:44px;height:44px;
          font-family:var(--m);
          font-size:12px;
          font-weight:600;
          letter-spacing:.1em;
          color:var(--kb);
          background:rgba(255,179,201,.07);
          border:1px solid rgba(255,179,201,.22);
          flex-shrink:0;
        }

        .anb{min-width:0}

        .anl{
          display:block;
          font-size:10px;
          letter-spacing:.28em;
          text-transform:uppercase;
          color:var(--mu);
          margin-bottom:6px;
        }

        .ant{
          margin:0 0 8px;
          font-size:17px;
          font-weight:400;
          letter-spacing:.02em;
          color:var(--fg);
        }

        .antx{
          margin:0;
          font-size:13.5px;
          line-height:1.75;
          color:var(--dm);
          letter-spacing:.02em;
          max-width:640px;
        }

        .ft{
          display:flex;
          align-items:center;
          gap:10px;
          margin-top:44px;
          padding-top:20px;
          border-top:1px solid var(--bd);
          font-size:12px;
          color:var(--mu);
          letter-spacing:.06em;
        }

        .ft a{
          color:var(--dm);
          text-decoration:none;
        }

        .ft a:hover{color:var(--fg)}

        .ftd{color:var(--bd2)}

        .fts{flex:1}

        .ftt{
          font-family:var(--m);
          font-size:11px;
          color:var(--mu);
        }

        @media(max-width:820px){
          .tp{
            flex-wrap:wrap;
            padding:14px 20px;
            gap:14px;
          }
          .pn{padding:24px 20px 32px}
          .bgt{font-size:32px}
          .ph1{font-size:32px}
          .pld{font-size:15px}
          .pb h2{font-size:20px}
          .pb p{font-size:14.5px}
          .pcta{flex-direction:column;align-items:flex-start;text-align:left}
          .ft{flex-wrap:wrap}
          .ftt{width:100%;margin-top:4px}
        }

        @media(max-width:520px){
          .icm span{display:none}
          .icm{padding:8px}
          .pc{padding:22px 20px}
          .ptl{font-size:20px}
          .pcta .cta{width:100%;text-align:center}
          .an{grid-template-columns:1fr;gap:14px;padding:22px 20px}
        }