@font-face { font-family: "PFFusion"; src: url("https://static.tildacdn.pro/tild6332-6434-4065-b436-346161326536/SFPRODISPLAYREGULAR.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PFFusion"; src: url("https://static.tildacdn.pro/tild3436-6136-4966-a335-626563383638/DrukCyr-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PFFusion"; src: url("https://static.tildacdn.pro/tild3232-3831-4232-b861-343563333664/SFPro_Display-SemiBo.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
:root { color-scheme: dark; font-family: Arial, sans-serif; background: #0a0a0a; color: #f7f7f7; }
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; min-width: 320px; background: #0a0a0a; }
.hero { position: relative; width: min(1680px, 100%); min-height: 750px; margin: 0 auto; overflow: hidden; background: radial-gradient(circle at 71% 43%, #82390f 0, #2a160b 15%, #111 39%, #080808 68%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; z-index: 5; background: linear-gradient(transparent, #080808); pointer-events: none; }
.glow { position: absolute; right: 7%; top: 14%; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(255,115,31,.33), transparent 65%); filter: blur(18px); }
.content { position: relative; z-index: 10; width: min(620px, calc(100% - 40px)); margin-left: clamp(30px, 15vw, 260px); padding: 58px 0 64px; }
.eyebrow { margin: 0; font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: clamp(84px, 8.3vw, 126px); font-weight: 900; line-height: .86; letter-spacing: -.065em; white-space: nowrap; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 168px 0 52px; }
.benefits span { position: relative; min-height: 60px; padding: 11px 10px 8px 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 9px; font-size: 16px; line-height: .92; }
.benefits span::before { content: ""; position: absolute; left: -8px; top: -8px; width: 22px; height: 22px; background: #fff; border-radius: 50%; }
.benefits span:nth-child(1)::after { content: "▤"; }
.benefits span:nth-child(2)::after { content: "▰"; }
.benefits span:nth-child(3)::after { content: "●"; }
.benefits span::after { position: absolute; left: -3px; top: -5px; color: #090909; font-size: 12px; font-weight: 900; }
.benefits b { font-style: italic; }
h1 { max-width: 610px; margin: 0 0 20px; font-size: clamp(20px, 2vw, 29px); line-height: 1.02; font-weight: 400; letter-spacing: -.035em; }
h1 b { font-weight: 800; }
h1 em { font-weight: 800; }
.cta { display: flex; min-height: 82px; align-items: center; justify-content: center; padding: 18px 28px; color: #fff; background: linear-gradient(105deg, #ff8114 0, #ff6707 80%, #ffb38b 100%); border-radius: 5px; box-shadow: 0 15px 45px rgba(255,86,0,.18), inset -15px 0 20px rgba(255,255,255,.25); font-size: clamp(19px, 2.1vw, 30px); font-weight: 900; text-align: center; text-decoration: underline; text-underline-offset: 4px; }
.cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hero-person { position: absolute; z-index: 4; right: 9%; bottom: -165px; width: min(48vw, 720px); height: auto; object-fit: contain; }
.figma, .photoshop { position: absolute; z-index: 3; width: clamp(130px, 15vw, 230px); height: auto; filter: drop-shadow(0 18px 35px #000); }
.figma { right: 25%; top: 30%; transform: rotate(-17deg); }
.photoshop { right: 8%; top: 32%; transform: rotate(19deg); }

@media (max-width: 900px) {
  .hero { min-height: 780px; }
  .content { margin-left: 24px; padding-top: 36px; }
  .eyebrow { font-size: clamp(70px, 15vw, 116px); }
  .benefits { margin-top: 290px; margin-bottom: 28px; }
  .hero-person { right: -3%; bottom: 95px; width: min(69vw, 560px); opacity: .96; }
  .figma { right: 30%; top: 27%; }
  .photoshop { right: 2%; top: 29%; }
}

@media (max-width: 620px) {
  .hero { width: 100%; height: 740px; min-height: 740px; padding: 0; overflow: hidden; background: #080808; }
  .hero::after { inset: auto -20% 0; z-index: 5; height: 285px; background: linear-gradient(transparent 0%, rgba(4,4,4,.76) 40%, #040404 90%); }
  .glow { z-index: 1; top: 90px; right: auto; left: 10%; width: 430px; height: 430px; background: radial-gradient(circle, rgba(164,66,16,.62), rgba(71,29,11,.35) 42%, transparent 68%); filter: blur(20px); }
  .content { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .eyebrow { position: absolute; z-index: 8; margin: 0; color: #e4e4e4; font-family: "PFFusion", "Arial Narrow", Arial, sans-serif; font-weight: 500; line-height: 1; letter-spacing: 0; text-align: left; white-space: nowrap; }
  .hero-person { z-index: 4; right: auto; bottom: auto; max-height: none; object-fit: contain; object-position: top left; transform: none; }
  .figma, .photoshop { z-index: 3; filter: drop-shadow(0 10px 18px #000); }
  .benefits { position: absolute; z-index: 7; display: grid; grid-template-columns: 1fr; width: auto; margin: 0; }
  .benefits span { display: block; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background-color: transparent; background-position: left top; background-repeat: no-repeat; background-size: contain; color: transparent; font-size: 0; line-height: 0; backdrop-filter: none; }
  .benefits span:nth-child(1) { background-image: url("https://static.tildacdn.pro/tild3462-6239-4239-a535-643863636235/Group_1321316916.png"); }
  .benefits span:nth-child(2) { background-image: url("https://static.tildacdn.pro/tild3161-3563-4863-a331-363563323164/Group_1321316915.png"); }
  .benefits span:nth-child(3) { background-image: url("https://static.tildacdn.pro/tild6665-3765-4331-a232-643732366137/Group_1321316917.png"); }
  .benefits span::before, .benefits span::after { display: none; }
  h1 { position: absolute; z-index: 7; max-width: none; margin: 0; padding: 0; color: #e4e4e4; background: none; border: 0; font-family: "PFFusion", Arial, sans-serif; font-weight: 400; letter-spacing: -.02em; backdrop-filter: none; }
  h1 b, h1 em { font-weight: 700; }
  .cta { position: absolute; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 0 8px; color: #fff; background: linear-gradient(115deg, #ff7d0d 0%, #ef4800 100%); border-radius: 5px; box-shadow: none; font-family: "PFFusion", Arial, sans-serif; font-weight: 700; line-height: 1; white-space: nowrap; touch-action: manipulation; }
}

@media (max-width: 399px) {
  .hero { height: 650px; min-height: 650px; }
  .glow { top: 94px; left: 15%; width: 325px; height: 360px; }
  .eyebrow { top: 48px; left: calc(50% - 160px + 15px); font-size: 98px; }
  .hero-person { top: 134px; left: calc(50% - 160px + 11px); width: 420px; height: 674px; }
  .figma { top: 257px; right: auto; left: calc(50% - 160px + 87px); width: 107px; transform: rotate(-17deg); }
  .photoshop { top: 265px; right: auto; left: calc(50% - 160px + 251px); width: 86px; transform: rotate(19deg); }
  .benefits { top: 177px; left: calc(50% - 160px + 9px); gap: 4px; }
  .benefits span:nth-child(1) { width: 140px; height: 48px; }
  .benefits span:nth-child(2) { width: 121px; height: 48px; margin-left: 13px; }
  .benefits span:nth-child(3) { width: 112px; height: 48px; }
  h1 { top: 444px; left: calc(50% - 160px + 20px); width: 280px; font-size: 22px; line-height: .9; }
  .cta { top: 522px; left: calc(50% - 160px + 10px); width: 299px; height: 55px; min-height: 55px; font-size: 16px; }
}

@media (min-width: 400px) and (max-width: 620px) {
  .glow { top: 155px; left: 20%; width: 370px; height: 430px; }
  .eyebrow { top: 89px; left: calc(50% - 200px + 24px); font-size: 120px; }
  .hero-person { top: 196px; left: calc(50% - 200px + 55px); width: 462px; height: 775px; }
  .figma { top: 344px; right: auto; left: calc(50% - 200px + 133px); width: 111px; transform: rotate(-17deg); }
  .photoshop { top: 346px; right: auto; left: calc(50% - 200px + 327px); width: 93px; transform: rotate(19deg); }
  .benefits { top: 245px; left: calc(50% - 200px + 28px); gap: 5px; }
  .benefits span:nth-child(1) { width: 165px; height: 57px; }
  .benefits span:nth-child(2) { width: 143px; height: 57px; margin-left: 15px; }
  .benefits span:nth-child(3) { width: 132px; height: 57px; }
  h1 { top: 504px; left: calc(50% - 200px + 39px); width: 330px; font-size: 25px; line-height: .9; }
  .cta { top: 592px; left: calc(50% - 200px + 26px); width: 347px; height: 64px; min-height: 64px; font-size: 19px; }
}