.home-page { --color-brand: #1265db; --color-brand-hover: #0a51bc; --color-text: #101827; }
.home-page .site-header { border-bottom-color: #eef2f8; }
.home-page .header-inner { min-height: 84px; }
.home-page .brand { gap: .8rem; }
.home-page .brand img { width: 44px; height: 44px; border-radius: 12px; }
.home-page .brand strong { font-size: 1.5rem; font-weight: 760; letter-spacing: -.04em; }
.home-page .nav { gap: clamp(1.5rem, 3vw, 3rem); }
.home-page .nav a { font-size: .96rem; color: #27344b; }
.home-page .nav .nav-contact { padding: .7rem 1.25rem; border: 0; border-radius: 12px; color: #fff; background: var(--color-brand); }
.home-page .nav .nav-contact:hover { color: #fff; background: var(--color-brand-hover); }
.home-page .hero { position: relative; overflow: hidden; background: radial-gradient(circle at 80% 47%, #d8ebff 0, #f1f8ff 31%, #fff 67%); }
.home-page .hero::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 72px; height: 140px; background: linear-gradient(170deg, transparent 10%, rgb(193 223 255 / 44%) 48%, transparent 86%); transform: rotate(-3deg); pointer-events: none; }
.home-page .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 3rem; min-height: 630px; padding-block: 5rem 2rem; }
.home-page .hero h1 { max-width: none; margin: 0; font-size: clamp(3.6rem, 6.2vw, 6.3rem); font-weight: 780; line-height: 1.12; letter-spacing: -.07em; white-space: nowrap; }
.home-page:lang(en) .hero h1 { max-width: 11ch; font-size: clamp(3.3rem, 5.4vw, 5.6rem); letter-spacing: -.06em; white-space: normal; }
.home-page .hero-lead { max-width: 35rem; margin: 1.65rem 0 0; color: #526178; font-size: clamp(1.1rem, 1.6vw, 1.38rem); line-height: 1.8; }
.home-page .hero-actions { gap: 1rem; margin-top: 2.35rem; }
.home-page .button { min-height: 56px; gap: 1.2rem; padding: .9rem 1.35rem; border-radius: 13px; font-size: .98rem; }
.home-page .button-primary { box-shadow: 0 12px 24px rgb(18 101 219 / 16%); }
.home-page .button-secondary { border-color: #d6e3f4; color: #173e75; background: rgb(255 255 255 / 82%); }
.home-page .hero-note { margin-top: 1.25rem; color: #677790; }
.hero-art { position: relative; display: grid; place-items: center; min-height: 560px; margin-right: -5rem; }
.hero-art img { display: block; width: min(57vw, 760px); max-width: none; filter: drop-shadow(0 28px 42px rgb(19 100 203 / 12%)); }
.platform-ribbon { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 2.5rem; border: 1px solid #e2ecf9; border-radius: 20px; background: rgb(255 255 255 / 88%); box-shadow: 0 20px 55px rgb(48 100 167 / 9%); backdrop-filter: blur(10px); }
.platform-ribbon .platform-item { display: flex; align-items: center; justify-content: flex-start; gap: .85rem; min-width: 0; padding: 1.3rem 1.15rem; }
.platform-ribbon .platform-item + .platform-item { border-left: 1px solid #e3eaf4; }
.platform-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 13px; color: #1265db; background: #eaf4ff; }
.platform-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.platform-ribbon .platform-copy { display: grid; min-width: 0; gap: .15rem; }
.platform-ribbon strong { font-size: 1.05rem; }
.platform-ribbon .platform-copy > span { color: #60718b; font-size: .85rem; }
.home-page .section { padding-block: clamp(5rem, 8vw, 8rem); }
.home-page .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-bottom: 3rem; }
.home-page .section h2 { max-width: 19ch; margin: 0; font-size: clamp(2.35rem, 4.1vw, 4.4rem); font-weight: 750; line-height: 1.2; letter-spacing: -.055em; }
.home-page .section-heading p { max-width: 26rem; margin: 0 0 .3rem; color: #66758a; font-size: 1.02rem; }
.home-page .products { padding-bottom: 2rem; }
.product-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); min-height: 550px; margin-bottom: 1.4rem; padding: clamp(2rem, 4vw, 4rem); border: 1px solid #e3edf9; border-radius: 30px; background: linear-gradient(120deg, #f1f7ff, #f9fcff 72%); overflow: hidden; }
.operations-panel { direction: rtl; background: linear-gradient(120deg, #fafcff, #eef6ff); }
.operations-panel > * { direction: ltr; }
.product-index { color: #245ea9; font-size: .84rem; font-weight: 700; letter-spacing: .07em; }
.product-copy h3 { margin: .8rem 0 1rem; font-size: clamp(2rem, 3.5vw, 3.6rem); line-height: 1.15; letter-spacing: -.05em; }
.home-page:lang(en) .product-copy h3 { font-size: clamp(1.8rem, 3vw, 3rem); overflow-wrap: normal; }
.product-copy p { max-width: 36rem; margin: .75rem 0; color: #617188; font-size: .98rem; line-height: 1.8; }
.product-copy .product-lead { color: #263854; font-size: 1.27rem; font-weight: 600; }
.feature-tags { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.7rem 0 1.6rem; padding: 0; list-style: none; }
.feature-tags li { padding: .55rem .8rem; border: 1px solid #dce9f9; border-radius: 9px; color: #245084; background: #fff; font-size: .83rem; font-weight: 650; }
.home-page .text-link { color: var(--color-brand); font-weight: 750; text-decoration: none; }
.home-page .text-link:hover { color: var(--color-brand-hover); text-decoration: underline; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.product-visual { position: relative; min-width: 0; margin: -2rem -3rem -2rem -1rem; }
.product-image { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgb(28 93 175 / 10%)); }
.mock-caption { position: absolute; right: 8%; bottom: 7%; padding: .35rem .6rem; border: 1px solid #d8e7f8; border-radius: 6px; color: #547096; background: rgb(255 255 255 / 85%); font-size: .67rem; font-weight: 650; }
.home-page .download { color: #fff; background: radial-gradient(circle at 85% 0%, #3b95ff 0, transparent 38%), linear-gradient(125deg, var(--color-brand), #2679ed 60%, #105bc7); }
.home-page .download .section-heading p { color: #e0edff; }
.capability-section { background: #f7faff; }
.capability-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 7vw, 7rem); }
.capability-grid > div > p { max-width: 30rem; color: #617188; }
.capability-list { border-top: 1px solid #dce6f4; }
.capability-list div { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; padding: 1.45rem 0; border-bottom: 1px solid #dce6f4; }
.capability-list strong { color: #16365c; }
.capability-list span { color: #617188; }
.home-page .download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1rem; }
.home-page .download-platform { min-width: 0; border: 1px solid rgb(202 226 255 / 22%); border-radius: 18px; background: #0a2b5a; box-shadow: 0 20px 35px rgb(2 41 105 / 20%); overflow: hidden; }
.download-badge { display: flex; align-items: center; gap: 1rem; min-height: 145px; padding: 1.2rem; cursor: pointer; list-style: none; }
.download-badge::-webkit-details-marker { display: none; }
.download-badge::marker { content: ""; }
.download-badge:hover { background: rgb(255 255 255 / 6%); }
.download-badge:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.download-icon { display: grid; place-items: center; flex: none; width: 74px; height: 74px; border: 1px solid rgb(255 255 255 / 17%); border-radius: 15px; background: rgb(255 255 255 / 9%); }
.download-icon svg { width: 58px; height: 58px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.download-label { min-width: 0; }
.download-label > span { display: block; color: #afd0fa; font-size: .78rem; font-weight: 650; }
.download-label strong { display: block; margin-top: .15rem; color: #fff; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.2; letter-spacing: -.035em; }
.download-chevron { display: grid; place-items: center; flex: none; width: 25px; height: 25px; margin-left: auto; color: #c7e0ff; transition: transform var(--duration-normal) var(--ease-standard); }
.download-chevron svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.download-platform[open] .download-chevron { transform: rotate(180deg); }
.download-detail, .desktop-options { padding: 1rem 1.2rem 1.2rem; border-top: 1px solid rgb(255 255 255 / 15%); color: #d2e5ff; }
.download-detail strong, .desktop-option strong { color: #fff; font-size: .96rem; }
.download-detail p, .desktop-option p { margin: .35rem 0 0; color: #c6ddfb; font-size: .82rem; line-height: 1.55; }
.desktop-options { display: grid; gap: .85rem; }
.desktop-option { display: flex; gap: .8rem; align-items: flex-start; }
.desktop-option + .desktop-option { padding-top: .85rem; border-top: 1px solid rgb(255 255 255 / 13%); }
.desktop-option .download-icon { width: 42px; height: 42px; border-radius: 9px; }
.desktop-option .download-icon svg { width: 28px; height: 28px; }
.duck-features { background: #fff; }
.duck-features-heading { max-width: 40rem; margin-inline: auto; text-align: center; }
.home-page .duck-features-heading h2 { max-width: none; margin: .65rem 0 1rem; }
.duck-features-heading p { margin: 0; color: #60718b; }
.duck-features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); margin-top: 3rem; }
.duck-feature { min-width: 0; padding: .5rem 1.2rem 1.5rem; text-align: center; }
.duck-feature img { display: block; width: min(100%, 250px); height: auto; margin: 0 auto 1.2rem; filter: drop-shadow(0 12px 16px rgb(22 90 165 / 13%)); }
.duck-feature h3 { margin: 0 0 .55rem; color: #1265db; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.25; }
.duck-feature p { max-width: 19rem; margin: 0 auto; color: #526178; line-height: 1.7; }
.duck-motion--walk { animation: duck-walk 3.5s ease-in-out infinite; }
.duck-motion--wave { animation: duck-wave 4.2s ease-in-out infinite; }
.duck-motion--float { animation: duck-float 3.8s ease-in-out infinite; }
@keyframes duck-walk { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes duck-wave { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(4deg); } }
@keyframes duck-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
.home-page .site-footer { padding-block: 3.5rem; background: #eef6ff; }
.help-inner { display: grid; grid-template-columns: 1fr 1.5fr; align-items: center; gap: 3rem; }
.help-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.help-links a { padding: 1rem; border: 1px solid #dce8f8; border-radius: 10px; color: #235aa0; background: #fff; font-size: .9rem; font-weight: 650; text-decoration: none; }
.help-links a:hover { border-color: #9ec2f1; color: var(--color-brand-hover); }
.home-page .site-footer p { max-width: 40rem; margin: .9rem 0 0; color: #60718b; font-size: .84rem; line-height: 1.7; }
.home-page section[id], .home-page article[id] { scroll-margin-top: 1rem; }
@media (max-width: 1050px) {
  .home-page .hero-grid { min-height: 560px; gap: 1rem; }
  .home-page .hero h1 { font-size: clamp(3rem, 6vw, 5rem); }
  .hero-art { min-height: 420px; }
  .hero-art { margin-right: -3rem; }
  .hero-art img { width: min(53vw, 650px); }
  .home-page .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .download-platform:last-child { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .home-page .hero-grid, .product-panel, .capability-grid, .help-inner { grid-template-columns: minmax(0, 1fr); }
  .duck-features-grid { gap: 1.5rem; }
  .duck-feature { padding-inline: 0; }
  .home-page .hero-grid { padding-block: 4rem 1rem; }
  .home-page .hero h1 { white-space: normal; }
  .hero-art { min-height: 350px; }
  .hero-art { min-height: 390px; margin: -2rem 0 0; }
  .hero-art img { width: min(95vw, 610px); }
  .platform-ribbon { grid-template-columns: repeat(2, 1fr); }
  .platform-ribbon .platform-item + .platform-item { border-top: 0; }
  .platform-ribbon .platform-item:nth-child(3) { border-left: 0; border-top: 1px solid #e3eaf4; }
  .platform-ribbon .platform-item:nth-child(4) { border-top: 1px solid #e3eaf4; }
  .home-page .section-heading { display: block; }
  .home-page .section-heading p { margin-top: 1.2rem; }
  .product-panel { min-height: 0; }
  .operations-panel { direction: ltr; }
}
@media (max-width: 700px) {
  .home-page .header-inner { min-height: 68px; }
  .home-page .brand strong { font-size: 1.22rem; }
  .home-page .nav { gap: 0; }
  .home-page .nav a { color: #27344b; }
  .home-page .nav .nav-contact { margin-top: .4rem; text-align: center; }
  .home-page .hero-grid { padding-top: 3.3rem; }
  .home-page .hero h1 { font-size: clamp(3rem, 11vw, 4.5rem); }
  .home-page .hero-lead { margin-top: 1.1rem; font-size: 1.08rem; }
  .home-page .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-copy { min-width: 0; }
  .home-page .hero-actions .button { width: 100%; min-width: 0; justify-content: space-between; gap: .5rem; padding-inline: 1rem; font-size: .9rem; white-space: normal; }
  .hero-art { min-height: 285px; }
  .hero-art { min-height: 290px; margin-top: -1.5rem; }
  .hero-art img { width: min(105vw, 440px); }
  .platform-ribbon .platform-item { gap: .6rem; padding: .9rem .7rem; }
  .platform-icon { width: 40px; height: 40px; border-radius: 10px; }
  .platform-icon svg { width: 29px; height: 29px; }
  .platform-ribbon strong { font-size: .92rem; }
  .platform-ribbon .platform-copy > span { font-size: .75rem; }
  .home-page .section { padding-block: 4.5rem; }
  .home-page .section h2 { font-size: clamp(2.3rem, 9vw, 3.4rem); }
  .product-panel { padding: 1.6rem; border-radius: 20px; }
  .product-copy h3 { overflow-wrap: anywhere; }
  .product-visual { margin: 0 -2rem -1.5rem; }
  .mock-caption { right: 8%; bottom: 5%; }
  .capability-list div { grid-template-columns: 1fr; gap: .35rem; }
  .home-page .download-grid { grid-template-columns: 1fr; }
  .help-links { grid-template-columns: 1fr; }
  .home-page .download-platform:last-child { grid-column: auto; }
  .download-badge { min-height: 125px; }
  .download-icon { width: 64px; height: 64px; }
  .download-icon svg { width: 50px; height: 50px; }
  .duck-features-grid { grid-template-columns: 1fr; margin-top: 2rem; }
  .duck-feature { padding-bottom: 1rem; }
  .duck-feature img { width: min(100%, 200px); margin-bottom: .35rem; }
}
@media (prefers-reduced-motion: reduce) { .duck-motion { animation: none; } }
@media (max-width: 390px) {
  .product-panel { padding: 1.2rem; }
}