/* Manrope and Noto are licensed under the SIL Open Font License 1.1 and embedded locally. */
      @font-face { font-family: "MGA Manrope"; src: url("assets/fonts/manrope-variable.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }
      @font-face { font-family: "MGA Sans"; src: url("assets/fonts/noto-sans-400.ttf") format("truetype"); font-weight: 400; font-style: normal; unicode-range: U+0000-052F, U+1E00-2BFF; }
      @font-face { font-family: "MGA Sans"; src: url("assets/fonts/noto-sans-700.ttf") format("truetype"); font-weight: 700; font-style: normal; unicode-range: U+0000-052F, U+1E00-2BFF; }
      @font-face { font-family: "MGA Sans"; src: url("assets/fonts/noto-sans-800.ttf") format("truetype"); font-weight: 800; font-style: normal; unicode-range: U+0000-052F, U+1E00-2BFF; }
      @font-face { font-family: "MGA Sans"; src: url("assets/fonts/noto-sans-armenian-400.ttf") format("truetype"); font-weight: 400; font-style: normal; unicode-range: U+0530-058F; }
      @font-face { font-family: "MGA Sans"; src: url("assets/fonts/noto-sans-armenian-700.ttf") format("truetype"); font-weight: 700; font-style: normal; unicode-range: U+0530-058F; }
      @font-face { font-family: "MGA Sans"; src: url("assets/fonts/noto-sans-armenian-800.ttf") format("truetype"); font-weight: 800; font-style: normal; unicode-range: U+0530-058F; }
      :root {
        --ink: #211f31;
        --muted: #6e6b7d;
        --cream: #fffdf7;
        --paper: #f7f4eb;
        --violet: #6d52dd;
        --lime: #d9f764;
        --peach: #ffb9a4;
        --line: rgba(33, 31, 49, .12);
        --sans: "MGA Sans";
      }
      html[lang="en"] { --sans: "MGA Manrope", "MGA Sans"; }
      html[lang="en"] h1, html[lang="en"] h2 { font-weight: 600; letter-spacing: -.055em; line-height: 1.03; }
      html[lang="en"] h1 { font-size: clamp(48px, 6.2vw, 88px); text-wrap: balance; }
      * { box-sizing: border-box; font-synthesis: none; }
      html { scroll-behavior: smooth; }
      body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); }
      a { color: inherit; text-decoration: none; }
      .wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
      .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
      .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); box-shadow: 14px 0 0 var(--lime); }
      nav { display: flex; align-items: center; justify-content: space-between; height: 88px; }
      .logo { display: flex; flex-shrink: 0; gap: 9px; align-items: center; font-size: 18px; font-weight: 800; letter-spacing: -.06em; }
      .logo-mark { width: 30px; height: 30px; background: var(--violet); border-radius: 9px 9px 9px 2px; position: relative; transform: rotate(-7deg); }
      .logo-mark::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); top: 7px; left: 11px; }
      .nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 650; }
      .nav-links a { opacity: .74; transition: opacity .2s; }
      .nav-links a:hover { opacity: 1; }
      .nav-actions { display: flex; align-items: center; gap: 14px; }
      .locale { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.75); }
      .locale button { appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 800 10px/1 var(--sans); letter-spacing: .07em; padding: 8px 7px; border-radius: 999px; transition: color .2s, background .2s; }
      .locale button[aria-pressed="true"] { background: var(--ink); color: white; }
      .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 19px; border-radius: 100px; background: var(--ink); color: white; font-size: 14px; font-weight: 800; transition: transform .2s, background .2s; }
      .btn:hover { background: var(--violet); transform: translateY(-2px); }
      .btn-arrow { width: 18px; height: 18px; border: 1.5px solid currentColor; display: inline-grid; place-items: center; border-radius: 50%; font-size: 13px; line-height: 1; }
      .hero { min-height: 700px; padding: 76px 0 82px; position: relative; overflow: hidden; isolation: isolate; background: var(--cream); }
      .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("assets/hero-sunrise-landscape.png") 68% center/cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.28) 7%, #000 23%, #000 65%, rgba(0,0,0,.62) 81%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.28) 7%, #000 23%, #000 65%, rgba(0,0,0,.62) 81%, transparent 100%); }
      .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,253,247,.96) 0%, rgba(255,253,247,.88) 30%, rgba(255,253,247,.56) 51%, rgba(255,253,247,.06) 76%); }
      .hero-grid { position: relative; }
      .hero-grid > div:first-child { width: min(100%, 650px); }
      h1 { font-family: var(--sans); font-size: clamp(54px, 7.5vw, 104px); line-height: .93; letter-spacing: -.07em; font-weight: 400; margin: 21px 0 25px; max-width: 720px; }
      h1 em { color: var(--violet); font-style: normal; }
      html[lang="hy"] h1 { font-size: clamp(48px, 6.2vw, 88px); line-height: .96; letter-spacing: -.055em; }
      .hero-copy { max-width: 450px; color: var(--muted); font-size: 18px; line-height: 1.55; margin-bottom: 31px; }
      .hero-meta { display: flex; gap: 26px; margin-top: 44px; border-top: 1px solid var(--line); padding-top: 19px; max-width: 510px; }
      .hero-meta span { display: block; font-size: 12px; color: var(--muted); }
      .hero-meta b { display: block; font-size: 15px; margin-bottom: 4px; }
      .scene { display: none; }
      .orb, .controller, .pixel { display: none; }
      .ticker { background: var(--cream); overflow: hidden; white-space: nowrap; }
      .ticker-clip { overflow: hidden; padding: 22px 0 28px; }
      .ticker-inner { display: block; font-size: 14px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
      .ticker i { width: 7px; height: 7px; display: inline-block; background: var(--peach); border-radius: 50%; }
      section { padding: 120px 0; }
      .section-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 46px; }
      h2 { font-family: var(--sans); font-weight: 400; letter-spacing: -.055em; line-height: .98; margin: 15px 0 0; font-size: clamp(38px, 4.7vw, 68px); }
      .section-note { max-width: 280px; color: var(--muted); font-size: 15px; line-height: 1.5; }
      .games { background: linear-gradient(to bottom, var(--cream), var(--paper) 140px); }
      .project-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 20px; }
      .project { min-height: 435px; padding: 29px; border-radius: 25px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; }
      .project h3 { font-size: 27px; letter-spacing: -.055em; margin: 0; position: relative; z-index: 2; }.project p { font-size: 14px; max-width: 220px; line-height: 1.45; margin: 10px 0 0; position: relative; z-index: 2; }
      .project .tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; position: relative; z-index: 2; }
      .project .tag:last-child { display: inline-flex; align-self: flex-start; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.84); backdrop-filter: blur(6px); }
      .p1 { background: url("assets/forest-night.png") center/cover; }.p2 { background: url("assets/studio-desk.png") center/cover; }.p3 { background: url("assets/hero-sunrise-landscape.png") center/cover; }
      .project-stack { display: grid; gap: 20px; }.project-stack .project { min-height: 207px; }
      .principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
      .principle { padding: 30px 30px 0 0; margin-right: 30px; }.principle + .principle { border-left: 1px solid var(--line); padding-left: 30px; }.principle span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: var(--lime); font-size: 18px; margin-bottom: 37px; }.principle h3 { font-size: 20px; letter-spacing: -.04em; margin: 0 0 10px; }.principle p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; max-width: 275px; }
      .cta { padding: 0 0 100px; }.cta-card { position: relative; overflow: hidden; background: var(--ink); color: white; padding: clamp(36px, 6vw, 76px); border-radius: 26px; }.cta-card h2 { max-width: 660px; font-size: clamp(44px, 6vw, 82px); }.cta-card h2 em { color: var(--lime); }.cta-card p { color: #c5c3d1; max-width: 400px; line-height: 1.55; margin: 23px 0 18px; }.cta-card .contact-line { color: white; font-weight: 750; margin: 0 0 28px; }.contact-line a:hover { color: var(--lime); }.cta-card .btn { background: var(--lime); color: var(--ink); }.cta-card .btn:hover { background: var(--peach); }.ring { position: absolute; width: 280px; height: 280px; border: 30px solid var(--violet); border-radius: 50%; right: -85px; top: -75px; opacity: .95; }
      footer { border-top: 1px solid var(--line); padding: 30px 0 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 13px; }.footer-links { display: flex; flex-wrap: wrap; gap: 12px 19px; }
      .footer-legal { flex-basis:100%; display:flex; flex-wrap:wrap; gap:12px 24px; line-height:1.7; }
      .footer-legal a:hover { color:var(--violet); text-decoration:underline; text-underline-offset:4px; }
      @media (max-width:760px) { .footer-legal { margin-top:22px; } }
      @media (max-width: 980px) { .nav-links { gap: 16px; } .nav-actions { gap: 10px; } }
      @media (max-width: 760px) { .ticker { white-space: normal; } .ticker-inner { font-size: 12px; line-height: 1.8; } }
      @media (max-width: 420px) { .nav-actions > .btn { display: none; } }
      @media (max-width: 760px) { .hero::before { background-position: 62% center; } .hero::after { background: linear-gradient(90deg, rgba(255,253,247,.93), rgba(255,253,247,.76)); } }
      @media (max-width: 760px) { .wrap { width: min(100% - 34px, 1160px); } nav { height: 70px; }.nav-links { display:none; }.nav-actions { gap: 8px; }.locale button { padding-inline: 6px; }.btn { padding: 12px 14px; font-size: 12px; }.hero { padding: 58px 0 50px; min-height: auto; }.hero-grid { grid-template-columns: 1fr; gap: 22px; }.scene { min-height: 330px; }.project-grid, .principles { grid-template-columns: 1fr; }.project { min-height: 350px; }.project-stack { grid-template-columns: 1fr; }.project-stack .project { min-height: 220px; }.section-head { display: block; }.section-note { margin-top: 20px; }.principle, .principle + .principle { border-left: 0; border-top: 1px solid var(--line); margin: 0; padding: 28px 0; }.principle:first-child { border-top: 0; }.principle span { margin-bottom: 20px; } section { padding: 76px 0; } footer { display: block; }.footer-links { margin-top: 16px; }.hero-meta { gap: 15px; } }