#hero { min-height: 750px; align-content: center; padding: 120px 0 80px; background-color: var(--bg-body); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1212%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1213%26quot%3b)'%3e%3c/rect%3e%3cpath d='M1176.67 146.27 a106.05 106.05 0 1 0 212.1 0 a106.05 106.05 0 1 0 -212.1 0z' fill='rgba(255%2c 255%2c 255%2c 0.025)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1417.6903288899903 187.17563095570443L1410.7526200340499 87.96177202066664 1265.4006860594634 147.97526477209612z' fill='rgba(255%2c 255%2c 255%2c 0.02)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M508.3545742332851 119.63138593551187L400.3675226725633 216.86336389258517 497.5995006296366 324.85041545330694 605.5865521903584 227.61843749623367z' fill='rgba(255%2c 255%2c 255%2c 0.025)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M518.1793858409015 73.30926003839619L526.513485829519-21.9499387279445 431.2542870631783-30.284038716561966 422.9201870745609 64.97516004977872z' fill='rgba(255%2c 255%2c 255%2c 0.02)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1112.749%2c673.01C1170.031%2c675.122%2c1218.159%2c632.012%2c1244.123%2c580.908C1267.741%2c534.421%2c1260.548%2c479.922%2c1233.497%2c435.345C1207.541%2c392.573%2c1162.762%2c365.776%2c1112.749%2c364.419C1060.14%2c362.992%2c1005.719%2c382.503%2c980.095%2c428.471C954.987%2c473.514%2c972.556%2c526.474%2c997.145%2c571.802C1023.319%2c620.052%2c1057.894%2c670.988%2c1112.749%2c673.01' fill='rgba(255%2c 255%2c 255%2c 0.03)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M832.217%2c218.059C868.474%2c218.408%2c904.739%2c203.065%2c922.323%2c171.355C939.472%2c140.43%2c931.151%2c103.034%2c912.747%2c72.839C895.189%2c44.032%2c865.951%2c23.206%2c832.217%2c23.524C798.978%2c23.838%2c771.304%2c45.786%2c754.278%2c74.334C736.754%2c103.716%2c728.762%2c139.573%2c745.07%2c169.647C762.048%2c200.956%2c796.603%2c217.716%2c832.217%2c218.059' fill='rgba(255%2c 255%2c 255%2c 0.02)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1111.07 403.06 a175.85 175.85 0 1 0 351.7 0 a175.85 175.85 0 1 0 -351.7 0z' fill='rgba(255%2c 255%2c 255%2c 0.025)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M171.22 466.16 a142.04 142.04 0 1 0 284.08 0 a142.04 142.04 0 1 0 -284.08 0z' fill='rgba(255%2c 255%2c 255%2c 0.03)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M691.2735979406126 254.53497628311092L688.4017334942214 90.00597234061823 523.8727295517288 92.87783678700939 526.7445939981199 257.4068407295021z' fill='rgba(255%2c 255%2c 255%2c 0.02)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M61.00557886324614 227.10992704703773L-55.81238658763088 300.10589340969346 17.18357977502484 416.9238588605705 134.00154522590185 343.92789249791474z' fill='rgba(255%2c 255%2c 255%2c 0.025)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1328.9651353105319 409.7708323264915L1236.2855240371389 362.54821173344703 1211.7913987842687 525.1789389400586z' fill='rgba(255%2c 255%2c 255%2c 0.02)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M855.8833397176968 131.167350507388L853.9345957872649 19.52388550476779 744.2398747150766 133.1160944378199z' fill='rgba(255%2c 255%2c 255%2c 0.02)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M153.93570744112907 290.43315364775833L237.69385682150437 238.09525312731859 101.59780692068931 206.67500426738303z' fill='rgba(255%2c 255%2c 255%2c 0.015)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1002.7667243246775 452.3207115219804L1031.0516297131546 574.8360968185784 1153.5670150097526 546.5511914301014 1125.2821096212756 424.03580613350334z' fill='rgba(255%2c 255%2c 255%2c 0.025)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1212'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='50%25' y1='100%25' x2='50%25' y2='0%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1213'%3e%3cstop stop-color='%230b0d11' offset='0'%3e%3c/stop%3e%3cstop stop-color='%23151921' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e"); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; position: relative; z-index: 2; min-width: 0; }
.hero-grid > div { min-width: 0; }
.hero-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); background: rgba(167,41,67,.15); padding: 6px 16px; border-radius: 4px; margin-bottom: 24px; }
#hero h1 { font-size: 48px; font-weight: 900; font-style: italic; color: #fff; line-height: 1.1; margin-bottom: 16px; }
#hero .hero-desc { font-size: 16px; color: #c8c6c1; line-height: 1.7; margin-bottom: 28px; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat-num { font-size: 28px; font-weight: 900; font-style: italic; color: #fff; }
.hero-stat-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

.hero-code { background: #1a1e28; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 0; max-width: 100%; }
.hero-code-header { background: #151921; padding: 12px 20px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.hero-code-dot { width: 8px; height: 8px; border-radius: 50%; }
.hcd-r { background: #ff5f57; } .hcd-y { background: #febc2e; } .hcd-g { background: #28c840; }
.hero-code-fn { font-family: 'Source Code Pro', monospace; font-size: 12px; color: var(--text-muted); margin-left: 8px; }
.hero-code-body { padding: 20px; font-family: 'Source Code Pro', monospace; font-size: 13px; line-height: 1.8; color: #bfc7d5; overflow-x: auto; white-space: pre; max-width: 100%; -webkit-overflow-scrolling: touch; }
.kw { color: #c792ea; } .fn { color: #82aaff; } .str { color: #c3e88d; } .cm { color: #546e7a; font-style: italic; } .num { color: #f78c6c; }
@media (max-width: 991px) {
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #hero { padding: 100px 0 60px; text-align: center; }
  #hero h1 { font-size: 32px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-buttons { justify-content: center; }
  .hero-stats { justify-content: center; gap: 20px; }
  .hero-stat-num { font-size: 22px; }
  .hero-code { text-align: left; }
}