/* roulang page: index */
:root{
      --bg: #07111f;
      --bg-soft: #0b172a;
      --panel: rgba(15, 23, 42, .72);
      --panel-strong: rgba(15, 23, 42, .9);
      --line: rgba(148, 163, 184, .18);
      --line-strong: rgba(148, 163, 184, .28);
      --text: #e2e8f0;
      --muted: #94a3b8;
      --brand: #34d399;
      --brand-2: #38bdf8;
      --brand-3: #f59e0b;
      --shadow: 0 22px 60px rgba(2, 6, 23, .36);
      --radius-xl: 30px;
      --radius-lg: 22px;
      --radius-md: 16px;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      color: var(--text);
      background:
        radial-gradient(circle at 12% 20%, rgba(56, 189, 248, .15), transparent 24%),
        radial-gradient(circle at 88% 14%, rgba(52, 211, 153, .16), transparent 22%),
        radial-gradient(circle at 80% 78%, rgba(245, 158, 11, .10), transparent 18%),
        linear-gradient(180deg, #050b15 0%, #07111f 40%, #081324 100%);
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 95%);
      opacity: .8;
    }
    ::selection{
      background: rgba(52, 211, 153, .28);
      color: #fff;
    }
    a{
      color: inherit;
      text-decoration: none;
      transition: transform .22s ease, opacity .22s ease, color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    img{
      max-width: 100%;
      display: block;
    }
    button, input, textarea, select{
      font: inherit;
    }
    .site-shell{
      width: min(100%, 1200px);
      margin: 0 auto;
    }
    .floating-header{
      background: rgba(6, 11, 21, .72);
      border: 1px solid rgba(148, 163, 184, .18);
      box-shadow: 0 20px 40px rgba(2, 6, 23, .34);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .nav-link{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      min-height: 42px;
      padding: .65rem 1rem;
      border-radius: 999px;
      color: #cbd5e1;
      background: transparent;
      border: 1px solid transparent;
    }
    .nav-link:hover,
    .nav-link:focus-visible,
    .nav-link.active{
      color: #fff;
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.08);
      transform: translateY(-1px);
      outline: none;
    }
    .logo-mark{
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(52,211,153,.18), rgba(56,189,248,.22));
      border: 1px solid rgba(148, 163, 184, .2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
      color: #eafff5;
      font-weight: 800;
      letter-spacing: .04em;
    }
    .hero-wrap{
      position: relative;
      overflow: hidden;
      border-radius: 36px;
      background:
        linear-gradient(135deg, rgba(15,23,42,.88), rgba(10,18,34,.92));
      border: 1px solid rgba(148, 163, 184, .16);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .hero-wrap::before{
      content:"";
      position:absolute;
      inset: 0;
      background:
        radial-gradient(circle at 82% 12%, rgba(56,189,248,.18), transparent 24%),
        radial-gradient(circle at 76% 72%, rgba(52,211,153,.12), transparent 26%);
      pointer-events:none;
    }
    .hero-copy{
      position: relative;
      z-index: 1;
    }
    .hero-panel{
      position: relative;
      z-index: 1;
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(15, 23, 42, .78), rgba(8, 15, 29, .94));
      border: 1px solid rgba(148, 163, 184, .18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .section-block{
      position: relative;
      margin-top: 1.75rem;
    }
    .section-panel{
      border-radius: 30px;
      background: rgba(10, 16, 30, .74);
      border: 1px solid rgba(148, 163, 184, .15);
      box-shadow: 0 16px 40px rgba(2, 6, 23, .22);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .section-kicker{
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .4rem .8rem;
      border-radius: 999px;
      background: rgba(52, 211, 153, .12);
      color: #b9f6d6;
      border: 1px solid rgba(52, 211, 153, .18);
      font-size: .85rem;
      line-height: 1;
    }
    .section-title{
      font-size: clamp(1.55rem, 2.6vw, 2.45rem);
      line-height: 1.14;
      letter-spacing: -.03em;
      color: #f8fafc;
    }
    .section-subtitle{
      color: var(--muted);
      line-height: 1.9;
      max-width: 72ch;
    }
    .btn-primary,
    .btn-secondary,
    .btn-ghost{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      min-height: 48px;
      padding: .85rem 1.15rem;
      border-radius: 999px;
      font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
      outline: none;
      white-space: nowrap;
    }
    .btn-primary{
      color: #052e2b;
      background: linear-gradient(135deg, #34d399, #38bdf8);
      box-shadow: 0 12px 26px rgba(52, 211, 153, .18);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      transform: translateY(-1px);
      box-shadow: 0 18px 36px rgba(52, 211, 153, .22);
    }
    .btn-secondary{
      color: #e2e8f0;
      background: rgba(15, 23, 42, .68);
      border: 1px solid rgba(148, 163, 184, .18);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      transform: translateY(-1px);
      border-color: rgba(56, 189, 248, .28);
      background: rgba(255,255,255,.06);
    }
    .btn-ghost{
      color: #dbeafe;
      border: 1px solid rgba(148, 163, 184, .14);
      background: transparent;
    }
    .btn-ghost:hover,
    .btn-ghost:focus-visible{
      transform: translateY(-1px);
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.2);
    }
    .soft-chip{
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      border-radius: 999px;
      padding: .4rem .74rem;
      border: 1px solid rgba(148, 163, 184, .16);
      color: #dbeafe;
      background: rgba(255,255,255,.04);
      font-size: .84rem;
      line-height: 1;
    }
    .ticket-card{
      position: relative;
      overflow: hidden;
      padding: 1.15rem;
      border-radius: 26px;
      border: 1px dashed rgba(148, 163, 184, .24);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
      transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
    }
    .ticket-card::before,
    .ticket-card::after{
      content:"";
      position:absolute;
      top: 50%;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      transform: translateY(-50%);
      background: #07111f;
      border: 1px solid rgba(148, 163, 184, .18);
    }
    .ticket-card::before{ left: -11px; }
    .ticket-card::after{ right: -11px; }
    .ticket-card:hover{
      transform: translateY(-4px);
      border-color: rgba(52, 211, 153, .35);
      box-shadow: 0 14px 28px rgba(2, 6, 23, .2);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    }
    .ticket-accent{
      position: absolute;
      inset: auto -18px -18px auto;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(56,189,248,.16), rgba(56,189,248,0) 70%);
      pointer-events:none;
    }
    .rule-step{
      padding: 1.15rem;
      border-radius: 22px;
      border: 1px solid rgba(148, 163, 184, .14);
      background: rgba(255,255,255,.03);
      transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
    }
    .rule-step:hover{
      transform: translateY(-2px);
      border-color: rgba(56, 189, 248, .25);
      background: rgba(255,255,255,.05);
    }
    .rule-number{
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(52,211,153,.18), rgba(56,189,248,.18));
      color: #eafff5;
      border: 1px solid rgba(255,255,255,.07);
      font-weight: 800;
    }
    .hot-card{
      border-radius: 22px;
      border: 1px solid rgba(148, 163, 184, .16);
      background: rgba(255,255,255,.03);
      transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
    }
    .hot-card:hover{
      transform: translateX(3px);
      border-color: rgba(52, 211, 153, .28);
      background: rgba(255,255,255,.05);
    }
    .hot-number{
      width: 44px;
      flex: none;
      border-radius: 16px;
      background: rgba(52, 211, 153, .12);
      color: #b9f6d6;
      border: 1px solid rgba(52, 211, 153, .18);
      text-align: center;
      font-weight: 800;
    }
    .shield-card{
      border-radius: 24px;
      border: 1px solid rgba(148, 163, 184, .15);
      background: rgba(255,255,255,.03);
      transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
    }
    .shield-card:hover{
      transform: translateY(-3px);
      border-color: rgba(56, 189, 248, .22);
      background: rgba(255,255,255,.045);
    }
    .shield-icon{
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: rgba(56, 189, 248, .12);
      border: 1px solid rgba(56, 189, 248, .18);
      color: #dff5ff;
      flex: none;
    }
    .collection-card{
      border-radius: 24px;
      border: 1px solid rgba(148, 163, 184, .15);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
    }
    .collection-card:hover{
      transform: translateY(-4px);
      border-color: rgba(245, 158, 11, .24);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    }
    .news-link{
      display: block;
      padding: 1rem 1.05rem;
      border-radius: 18px;
      border: 1px solid rgba(148, 163, 184, .14);
      background: rgba(255,255,255,.03);
      transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
    }
    .news-link:hover,
    .news-link:focus-visible{
      transform: translateX(4px);
      border-color: rgba(52, 211, 153, .28);
      background: rgba(255,255,255,.06);
      outline: none;
    }
    .faq-item{
      border-radius: 22px;
      border: 1px solid rgba(148, 163, 184, .15);
      background: rgba(255,255,255,.03);
      transition: background-color .2s ease, border-color .2s ease;
    }
    .faq-item:hover{
      border-color: rgba(56, 189, 248, .22);
      background: rgba(255,255,255,.04);
    }
    .faq-item summary{
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      font-weight: 700;
      color: #f8fafc;
    }
    .faq-item summary::-webkit-details-marker{
      display: none;
    }
    .faq-item[open]{
      background: rgba(255,255,255,.06);
    }
    .cta-card{
      border-radius: 30px;
      background:
        radial-gradient(circle at 18% 20%, rgba(52,211,153,.14), transparent 26%),
        radial-gradient(circle at 84% 18%, rgba(56,189,248,.16), transparent 24%),
        linear-gradient(180deg, rgba(15,23,42,.9), rgba(8,15,29,.94));
      border: 1px solid rgba(148, 163, 184, .16);
      box-shadow: var(--shadow);
    }
    .field{
      width: 100%;
      min-height: 52px;
      border-radius: 16px;
      border: 1px solid rgba(148, 163, 184, .2);
      background: rgba(255,255,255,.04);
      color: #f8fafc;
      padding: .9rem 1rem;
      outline: none;
      transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    }
    .field:focus{
      border-color: rgba(52, 211, 153, .35);
      background: rgba(255,255,255,.06);
      box-shadow: 0 0 0 4px rgba(52, 211, 153, .12);
    }
    .footer-link{
      color: #cbd5e1;
    }
    .footer-link:hover,
    .footer-link:focus-visible{
      color: #fff;
      outline: none;
    }
    .count-ring{
      width: 172px;
      height: 172px;
      position: relative;
      display: grid;
      place-items: center;
    }
    .count-ring svg{
      transform: rotate(-90deg);
      width: 172px;
      height: 172px;
      filter: drop-shadow(0 10px 20px rgba(0,0,0,.24));
    }
    .count-ring .count-inner{
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      text-align: center;
    }
    .pulse-dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 0 0 rgba(52, 211, 153, .45);
      animation: pulse 1.8s infinite;
    }
    @keyframes pulse{
      0%{ box-shadow: 0 0 0 0 rgba(52, 211, 153, .42); }
      70%{ box-shadow: 0 0 0 12px rgba(52, 211, 153, 0); }
      100%{ box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
    }
    .slide-dot{
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(148, 163, 184, .35);
      transition: width .22s ease, background-color .22s ease, transform .22s ease;
    }
    .slide-dot.active{
      width: 30px;
      background: linear-gradient(135deg, #34d399, #38bdf8);
      transform: translateY(-1px);
    }
    .blur-lift{
      position: absolute;
      inset: auto auto -20px -20px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(56,189,248,.18), rgba(56,189,248,0) 70%);
      filter: blur(2px);
      pointer-events:none;
      opacity: .8;
    }
    @media (max-width: 1024px){
      .hero-wrap{
        border-radius: 28px;
      }
    }
    @media (max-width: 768px){
      .floating-header{
        border-radius: 24px;
      }
      .section-title{
        letter-spacing: -.02em;
      }
      .count-ring{
        width: 150px;
        height: 150px;
      }
      .count-ring svg{
        width: 150px;
        height: 150px;
      }
    }
    @media (max-width: 520px){
      .nav-link{
        min-height: 40px;
        padding: .55rem .9rem;
      }
      .btn-primary,
      .btn-secondary,
      .btn-ghost{
        width: 100%;
      }
      .count-ring{
        width: 136px;
        height: 136px;
      }
      .count-ring svg{
        width: 136px;
        height: 136px;
      }
    }