/* Homepage refinement: preserve Javolin's media, colours and section structure. */
.tips-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; padding: 90px var(--jav-gutter); background: #f0f3f8; }
.tips-feature-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .13em; font-weight: 700; color: #0032a0; }
.tips-feature-eyebrow::before { content: ''; width: 7px; height: 7px; background: #6cc24a; }
.tips-feature-brand { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
.tips-feature-brand img { width: 42px; height: 42px; object-fit: contain; }
.tips-feature-brand > span > span { color: #378c22; }
.tips-feature h2 { margin-block: 22px; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -.045em; font-weight: 700; color: #000638; }
.tips-feature-copy > p { max-width: 480px; color: #2f3850; font-size: 18px; line-height: 1.8; }
.tips-feature-link { display: inline-flex; gap: 36px; align-items: center; margin-top: 28px; padding: 17px 24px; background: #0032a0; color: white; font-size: 16px; font-weight: 700; transition: background .2s; }
.tips-feature-link:hover { background: #002780; }
.tips-feature-availability { display: block; margin-top: 20px; font-size: 14px; color: #3f4a60; }
.tips-feature-visual { display: block; position: relative; width: 100%; aspect-ratio: .94; background: #e4eaf4; overflow: hidden; }
.tips-feature-preview-label { position: absolute; top: 24px; left: 26px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #0032a0; }
.tips-feature-screen-front { position: absolute; top: 55px; left: 8%; width: 48%; height: auto; border: 1px solid #c4ccdc; box-shadow: 0 18px 38px #00063826; }
.tips-feature-screen-back { position: absolute; top: 85px; right: 8%; width: 42%; height: auto; border: 1px solid #c4ccdc; box-shadow: 0 18px 38px #00063826; }
.tips-feature-preview-footer { position: absolute; bottom: 0; left: 0; right: 0; background: #000638; color: white; padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 700; }
.tips-feature-preview-footer > span { color: #6cc24a; }
@media (max-width: 1100px) { .tips-feature { gap: 40px; } .tips-feature-visual { aspect-ratio: .8; } }
@media (max-width: 760px) { .tips-feature { grid-template-columns: 1fr; padding-block: 55px; gap: 36px; } .tips-feature h2 { font-size: 44px; } .tips-feature-copy > p { font-size: 17px; } .tips-feature-visual { aspect-ratio: .8; max-width: 520px; } .tips-feature-preview-footer { padding-inline: 18px; font-size: 14px; } }
.javolin-home {
    --jav-blue: #0032a0;
    --jav-green: #6cc24a;
    --jav-ink: #000638;
    --jav-muted: #5d6679;
    --jav-gutter: clamp(24px, 6vw, 112px);
    color: var(--jav-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
.javolin-home ::selection { background: #dcedd5; color: var(--jav-ink); }
.javolin-home :is(a, button, [tabindex]):focus-visible {
    outline: 3px solid var(--jav-green);
    outline-offset: 5px;
}
.javolin-home section { scroll-margin-top: 92px; }
.javolin-home .site-header {
    height: 80px !important;
    padding-inline: var(--jav-gutter);
    border-bottom: 1px solid #d9dfe8;
    background: #fff !important;
    box-shadow: none !important;
    
}
.site-header > a { flex-shrink: 0; }
.site-header > a img { width: 150px; }
.site-header > .flex-grow { gap: 0; }
.site-header > .flex-grow > div { margin-left: 24px; }
.site-header > .flex-grow > div > div { gap: clamp(8px, 1.8vw, 28px); }
.site-header .navbar-item { max-width: none !important; }
.site-header .nav-link { margin: 0; padding: 12px 0; font-size: 18px; letter-spacing: -.2px; }
.site-header .nav-link a { transition: color .2s; }
.site-header .nav-link:hover a { color: var(--jav-blue); }
.site-header .client-login { margin-left: 24px; }
.site-header .client-login > button {
    display: flex;
    min-height: 46px;
    padding: 12px 22px;
    font-size: 18px;
    background: var(--jav-blue);
    box-shadow: none !important;
    transition: background .2s, box-shadow .2s;
}
.site-header .client-login > button:hover { background: #002780; box-shadow: none !important; }
.site-header .client-login > div { top: calc(100% + 12px); border: 1px solid #e5eaf2; padding: 16px; }
.site-header .client-login > div > div { border-radius: 0; padding: 10px; }
.site-header .client-login > div > div:hover { background: #f4f7fc; }
.mobile-menu-toggle { width: 44px; height: 44px; justify-content: center; border: 1px solid #e5eaf2; border-radius: 0; }
#heroSec { height: 100svh; min-height: 460px; padding-top: 80px; background: #000c26; }
#heroSec #heroVideo { top: 80px; height: calc(100% - 80px); }
#heroSec::after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, rgba(0, 12, 38, .5)); pointer-events: none; }
#controls {
    position: absolute;
    z-index: 2;
    right: var(--jav-gutter);
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    color: white;
    background: rgba(0, 12, 38, .3);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 0;
    backdrop-filter: blur(12px);
}
#controls button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0; cursor: pointer; transition: background .2s; }
#controls button:hover { background: rgba(255,255,255,.16); }
#controls i { font-size: 16px; width: auto; height: auto; }
.control-divider { height: 18px; width: 1px; background: rgba(255,255,255,.25); }
.hero-explore { position: absolute; z-index: 2; bottom: 34px; left: var(--jav-gutter); display: flex; align-items: center; gap: 12px; color: white; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.hero-explore-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.4); border-radius: 0; font-size: 21px; transition: background .2s; }
.hero-explore:hover .hero-explore-mark { background: var(--jav-blue); }
#products { height: auto !important; padding: 88px var(--jav-gutter) 44px; background: #fff !important; }
.section-intro {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: end;
    gap: 24px 64px;
    text-align: left;
    max-width: 1440px;
    margin-inline: auto;
    padding-bottom: 40px;
    border-bottom: 1px solid #ccd4e1;
}
.section-eyebrow, #javfinance h3, #solutions > div > div:first-child {
    color: var(--jav-green);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.section-eyebrow { grid-column: 1 / -1; color: var(--jav-blue); margin-bottom: 4px; }
.section-intro h1 { font-size: clamp(38px, 4.8vw, 70px); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; }
.section-intro h1 span { color: var(--jav-blue); }
.section-description { max-width: 480px; margin: 0; font-size: 18px; line-height: 1.75; color: var(--jav-muted); }
#products .product-carousel { width: 90% !important; height: 460px; margin-top: 32px !important; }
#products .product-slide > div { margin-top: 0 !important; border-radius: 0; box-shadow: none !important; border-color: #e0e6ef; }
#products .product-slide.active > div, #products .flip-card-back { background: var(--jav-blue); }
#products .flip-card-front img { border-radius: 0; }
#products .flip-card-front span { font-size: 19px; letter-spacing: -.4px; }
#products .flip-card-back > div { padding-inline: 16px; }
#products .flip-card-back > div > div { width: 100% !important; font-size: 16px !important; line-height: 1.6; }
#products .carousel-arrow { top: 50% !important; width: 44px; height: 44px; border-radius: 0; display: grid; place-items: center; background: white; border: 1px solid #dce3ed; box-shadow: none !important; }
#products .carousel-arrow-previous { left: -5% !important; transform: translate(-50%, -50%) !important; }
#products .carousel-arrow-next { right: -5% !important; transform: translate(50%, -50%) !important; }
#products .carousel-arrow svg { width: 44px; height: 44px; }
#products .carousel-arrow circle { fill: transparent; stroke: transparent; }
#products .carousel-arrow path { fill: var(--jav-blue); }
#products .carousel-arrow:hover { background: #edf3fc; }
#agrisection { min-height: 780px; padding: 100px var(--jav-gutter); }
#agrisection > div { position: relative; height: auto; }
#agrisection > div > div { width: 100%; max-width: 1080px; height: auto; margin: 0; padding: clamp(28px, 4.5vw, 64px); border: 1px solid rgba(255,255,255,.23); border-radius: 0; background: rgba(0, 6, 56, .9); box-shadow: none !important; }
#agrisection > div > div > div { padding-top: 0; }
#agrisection > div > div > div > div:first-child { position: static; background: transparent; padding: 0; margin-bottom: 14px; }
#agrisection > div > div > div > div:first-child > div { color: var(--jav-green); font-size: 14px; letter-spacing: .16em; }
#agrisection .text-justify { text-align: left; font-size: 19px; line-height: 1.8; color: #edf1f8; }
#solutions { padding: 96px var(--jav-gutter); }
#solutions > div { width: 100%; max-width: 1440px; align-items: flex-start; }
#solutions > div > div:nth-child(2) { width: 100%; max-width: 1000px; margin-top: 18px; text-align: left; font-size: clamp(32px, 4vw, 56px); line-height: 1.12; letter-spacing: -.035em; font-weight: 700; }
#solutions .grid { width: 100%; gap: 24px; margin-top: 48px; margin-bottom: 0; }
#solutions .card { width: 100%; height: 430px; border-radius: 0; box-shadow: none !important; }
#solutions .card > img, #solutions .card > div:first-child { width: 100% !important; height: 100% !important; object-fit: cover; }
#solutions .card-title { top: auto !important; bottom: 30px; left: 28px !important; width: calc(100% - 56px) !important; font-size: 30px; line-height: 1.15; letter-spacing: -.025em; }
#solutions .card-hover-content { width: 100% !important; height: auto !important; min-height: 78%; padding: 26px; border-top: 3px solid var(--jav-green); }
#solutions .card-hover-content > div { position: static !important; }
#solutions .card-hover-content > div > div { width: auto !important; height: auto !important; }
#solutions .card-hover-content > div > div:first-child { font-size: 24px; line-height: 1.2; }
#solutions .card-hover-content > div > div + div { font-size: 15px !important; line-height: 1.6; }
#solutions .card:focus .card-hover-content { transform: translateY(0); opacity: 1; }
#solutions .card:focus .card-title { opacity: 0; }
#javfinance { background: #0032a0 !important; }
#javfinance > div { max-width: 1536px; margin: auto; gap: 0; }
#javfinance > div > div:first-child { margin: 0; padding: 88px 0 88px var(--jav-gutter); }
#javfinance p.font-bold { width: 100% !important; max-width: 670px !important; margin-top: 22px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.2; letter-spacing: -.035em; }
#javfinance p:not(.font-bold) { font-size: 18px; line-height: 1.8; opacity: .8; margin-top: 26px; }
#javfinance br { display: none; }
.community-section { padding-block: 76px 24px; background: #fff !important; }
.community-section > div > div:first-child { padding-block: 0; }
.community-section > div > div:first-child > div { color: var(--jav-blue); font-size: 14px; letter-spacing: .15em; text-transform: uppercase; }
.community-section #quoteText { max-width: 1000px; padding: 24px var(--jav-gutter) !important; font-size: clamp(24px, 2.8vw, 38px) !important; line-height: 1.45; letter-spacing: -.025em; }
.community-section .community-image img { border-radius: 0; }
#news { padding: 96px var(--jav-gutter); background: #fff; border-top: 1px solid #d9dfe8; }
#closeNewsOverlay { position: sticky; float: right; top: 0; right: 0; transform: none; z-index: 1; }
.javolin-home footer { padding: 64px var(--jav-gutter) 32px; }
.javolin-home footer h2 { font-size: 15px; margin-bottom: 16px; }
.javolin-home footer a { font-size: 14px; line-height: 1.8; transition: color .2s; }
.javolin-home footer a:hover { color: var(--jav-green); }
.javolin-home footer > .grid { gap: 32px; }
@media (min-width: 1024px) and (max-width: 1279px) {
    .site-header { --jav-gutter: 32px; }
    .site-header > .flex-grow > div { margin-left: 12px; }
    .site-header .client-login { margin-left: 16px; }
}
@media (max-width: 1023px) {
    .javolin-home .site-header { height: 72px !important; }
    #heroSec { padding-top: 72px; }
    #heroSec #heroVideo { top: 72px; height: calc(100% - 72px); }
    .site-header .mobile-navigation { width: min(360px, calc(100vw - 32px)); right: 16px; padding: 16px; border: 1px solid #e2e7ef; border-radius: 0; box-shadow: none !important; }
    .mobile-navigation nav, .mobile-navigation nav > div > div { align-items: stretch; text-align: left; }
    .mobile-navigation .navbar-item { width: 100%; }
    .mobile-navigation .nav-link { width: 100%; padding: 8px 0; }
    #products { padding-top: 64px; }
    #solutions .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #javfinance > div > div:first-child { padding: 64px var(--jav-gutter) 24px; }
    #javfinance > div > div:last-child { max-width: 680px; margin: auto; }
}
@media (max-width: 767px) {
    #products, #platform, #solutions, #news { padding: 60px 24px; }
    #products { padding-bottom: 28px; }
    .section-intro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .section-description { font-size: 16px; line-height: 1.7; }
    #products .product-carousel { width: 100% !important; height: 460px; margin-top: 24px !important; }
    #products .product-slide > div { max-width: 280px; }
    #products .carousel-arrow { top: auto !important; bottom: -12px; }
    #products .carousel-arrow-previous { left: calc(50% - 30px) !important; }
    #products .carousel-arrow-next { right: calc(50% - 30px) !important; }
    #agrisection { padding: 64px 20px; min-height: 0; }
    #agrisection .text-justify { font-size: 16px; line-height: 1.75; }
    #solutions .grid { grid-template-columns: minmax(0, 1fr); }
    #solutions .card { max-width: 460px; }
    #javfinance p:not(.font-bold) { font-size: 16px; }
    .community-section { padding-top: 56px; }
    .community-section #quoteText { min-height: 280px !important; }
    .community-section #quoteText span[style*="100px"] { font-size: 48px !important; }
    .hero-explore { bottom: 28px; gap: 8px; font-size: 12px; }
    #controls { bottom: 24px; right: 20px; }
    .javolin-home footer > .grid { gap: 28px 20px; }
}
@media (hover: none) {
    #solutions .card { height: auto; background: var(--jav-ink); }
    #solutions .card > img { position: relative !important; height: 220px !important; }
    #solutions .card-title { display: none; }
    #solutions .card-hover-content { position: relative !important; transform: none; opacity: 1; }
    #solutions .card:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .javolin-home *, .javolin-home *::before, .javolin-home *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}
/* Hide outgoing copy immediately so rotating technology panels stay legible. */

/* A square, editorial treatment across the existing homepage components. */
.javolin-home :is(button, img, [class*="rounded"], [style*="border-radius"]) {
    border-radius: 0 !important;
}
.site-header .nav-link { font-weight: 700; }
.site-header .nav-link a { border-bottom: 1px solid transparent; padding-bottom: 5px; }
.site-header .nav-link:hover a { border-bottom-color: var(--jav-blue); }
.site-header .client-login > button { letter-spacing: .03em; }
.hero-explore { text-transform: uppercase; font-size: 11px; letter-spacing: .14em; }
.hero-explore-mark { border-width: 0 0 1px; }
#controls { border-width: 1px 0; padding-inline: 0; background: rgba(0, 12, 38, .6); }
.section-eyebrow::before,
#solutions > div > div:first-child::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 12px;
    vertical-align: middle;
    background: var(--jav-green);
}
#solutions > div > div:first-child { text-align: left; color: var(--jav-blue); }
#products .product-slide > div { border: 1px solid #d4dbe6; }
#agrisection > div > div { border: 0; border-left: 4px solid var(--jav-green); backdrop-filter: none; }
#agrisection > div > div > div { align-items: flex-start; }
#solutions .grid { gap: 32px; }
#solutions .card { height: auto; background: transparent; overflow: visible !important; border-top: 1px solid #cbd3e0; padding-top: 18px; }
#solutions .card > div:first-child { display: none; }
#solutions .card > img { position: relative !important; height: 280px !important; background: var(--jav-ink); }
#solutions .card-title { display: none; }
#solutions .card-hover-content {
    position: relative !important;
    min-height: 0;
    padding: 24px 0 0;
    border: 0;
    transform: none;
    opacity: 1;
    background: transparent !important;
}
#solutions .card:hover img { transform: none; }
#solutions .card-hover-content > div > div:first-child { color: var(--jav-ink); font-size: 26px; letter-spacing: -.02em; }
#solutions .card-hover-content > div > div + div { font-size: 16px !important; line-height: 1.75; }
.community-section { border-bottom: 1px solid #d9dfe8; }
.community-section > div > div:first-child > div { font-size: 16px; }
.community-section #quoteText { font-style: normal; }
.community-quote { position: relative; max-width: 1000px; }
.community-quote-mark { color: var(--jav-green); font-weight: 700; }
.javolin-home footer { border-top: 4px solid var(--jav-green); }
@media (max-width: 767px) {
    .section-intro h1 { font-size: clamp(36px, 9.5vw, 56px); }
    #solutions .grid { gap: 44px; }
    #solutions .card > img { height: 240px !important; }
    .hero-explore { font-size: 10px; letter-spacing: .08em; }
}

/* News: a featured interview alongside two compact announcement stories. */
.news-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid #cbd3e0;
}
.news-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--jav-blue); font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.news-eyebrow::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; background: var(--jav-green); }
#news-title { margin: 0; font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: clamp(34px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -.045em; color: var(--jav-ink); }
#news-title > span { color: var(--jav-green); }
.news-section-note { flex-shrink: 0; font-size: 16px; line-height: 1.7; color: var(--jav-muted); }
.news-editorial-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; max-width: 1440px; margin: auto; align-items: start; }
.news-lead { min-width: 0; background: var(--jav-ink); color: white; }
.news-lead-media { display: block; position: relative; width: 100%; text-align: left; cursor: pointer; overflow: hidden; background: #001440; }
.news-lead-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .35s ease; }
.news-lead-media:hover img { transform: scale(1.025); }
.news-video-label { position: absolute; bottom: 0; left: 0; display: flex; gap: 14px; align-items: center; padding: 16px 20px; background: var(--jav-blue); color: white; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.news-video-label > span { font-size: 13px; color: var(--jav-green); }
.news-lead-copy { padding: 32px 36px 36px; }
.news-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.5; letter-spacing: .1em; color: var(--jav-muted); }
.news-meta > span:first-child { color: var(--jav-blue); font-weight: 700; }
.news-meta-divider { display: block; width: 20px; height: 1px; background: #c4cdd9; }
.news-lead .news-meta { color: #c6cfde; }
.news-lead .news-meta > span:first-child { color: var(--jav-green); }
.news-lead h3 { margin-top: 18px; font-size: clamp(25px, 2.5vw, 36px); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.news-lead-copy > p { max-width: 570px; margin-top: 18px; color: #c9d2e3; font-size: 17px; line-height: 1.75; }
.news-text-link { display: inline-flex; gap: 24px; justify-content: space-between; align-items: center; margin-top: 24px; padding-block: 4px 8px; border-bottom: 1px solid #c5cfde; font-size: 14px; font-weight: 700; color: var(--jav-blue); cursor: pointer; transition: border-color .2s; }
.news-text-link > span { font-size: 20px; line-height: 1; transition: transform .2s; }
.news-text-link:hover { border-color: var(--jav-green); }
.news-text-link:hover > span { transform: translate(2px, -2px); }
.news-lead .news-text-link { color: white; border-bottom-color: #66718d; }
.news-secondary-stories { display: grid; gap: 28px; padding-left: 32px; border-left: 1px solid #dbe1e9; }
.news-story { min-width: 0; }
.news-story + .news-story { border-top: 1px solid #dbe1e9; padding-top: 28px; }
.news-story-media { display: block; width: 100%; overflow: hidden; cursor: pointer; background: #f2f5f8; }
.news-story-media img { display: block; width: 100%; aspect-ratio: 2.65 / 1; object-fit: cover; }
.news-story-copy { padding-top: 18px; }
.news-story h3 { margin-top: 12px; color: var(--jav-ink); font-size: clamp(19px, 1.75vw, 25px); line-height: 1.3; letter-spacing: -.02em; font-weight: 700; }
.news-story .news-text-link { margin-top: 12px; }
@media (max-width: 1023px) {
    .news-section-note { display: none; }
    .news-editorial-layout { gap: 28px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .news-secondary-stories { padding-left: 24px; }
    .news-lead-copy { padding: 28px; }
    .news-story-media img { aspect-ratio: 2 / 1; }
}
@media (max-width: 767px) {
    .news-section-header { margin-bottom: 28px; padding-bottom: 24px; }
    #news-title { max-width: 340px; }
    .news-editorial-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .news-lead-copy { padding: 28px 24px; }
    .news-lead h3 { font-size: 26px; }
    .news-lead-copy > p { font-size: 14px; }
    .news-secondary-stories { padding: 0; border: 0; gap: 28px; }
    .news-story-media img { aspect-ratio: 2.25 / 1; }
    .news-story h3 { font-size: 23px; }
    .news-meta { font-size: 10px; }
}

/* Technology explorer: a focused diagram for each capability. */
#platform { padding: 80px var(--jav-gutter) 0; background: #000638; color: #fff; }
.technology-shell { display: flex; flex-direction: column; max-width: 1440px; margin: auto; }
.technology-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid #303957; }
#technology-heading { display: flex; align-items: center; gap: 14px; color: var(--jav-green); font-size: 12px; letter-spacing: .15em; font-weight: 700; }
#technology-heading::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; background: currentColor; }
.technology-header > p { color: #a8b5cc; font-size: 13px; }
.technology-panels { order: 1; padding-block: 48px; }
.technology-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; }
.technology-panel[hidden] { display: none; }
.technology-copy { padding-block: 24px; }
.technology-category { display: flex; gap: 16px; align-items: center; color: #b1bed4; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.technology-category > span { color: var(--jav-green); font-variant-numeric: tabular-nums; }
.technology-copy h3 { margin-top: 28px; color: #fff; font-size: clamp(42px, 5vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.technology-description { max-width: 510px; min-height: 168px; margin-top: 28px; color: #becbe0; font-size: 18px; line-height: 1.8; }
.technology-visual { margin: 0; background: transparent; color: #fff; }
.technology-visual-header { display: flex; justify-content: space-between; align-items: center; margin-inline: 26px; padding-block: 18px; color: #a8b5cc; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.technology-visual-header > span:last-child { color: var(--jav-green); }
.technology-drawing { padding: 0; }
.technology-drawing img { display: block; width: 100%; height: auto; }
.diagram-line { stroke: #8ea8d0; stroke-width: 1.5; }
.technology-visual figcaption { display: flex; flex-direction: column; gap: 5px; padding: 16px 26px 24px; }
.technology-visual figcaption strong { font-size: 18px; letter-spacing: -.02em; }
.technology-visual figcaption > span { font-size: 12px; color: #a8b5cc; }
.technology-tabs { order: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #303957; }
.technology-tabs button { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 24px; border-top: 3px solid transparent; margin-top: -1px; color: #a8b5cc; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.technology-tabs button + button { border-left: 1px solid #303957; }
.technology-tabs button:hover { background: #0b1649; color: #fff; }
.technology-tabs button[aria-selected="true"] { border-top-color: var(--jav-green); color: #fff; background: #0032a0; }
.technology-tab-number { font-size: 10px; color: #9aaed0; font-weight: 400; }
.technology-tabs button[aria-selected="true"] .technology-tab-number { color: var(--jav-green); }
.technology-tab-arrow { margin-left: auto; font-size: 20px; color: var(--jav-green); }
.technology-tabs button:not([aria-selected="true"]) .technology-tab-arrow { opacity: 0; }
@media (max-width: 1023px) {
    .technology-panel { gap: 32px; }
    .technology-description { font-size: 16px; min-height: 202px; }
    .technology-tabs button { gap: 10px; padding: 22px 14px; font-size: 15px; }
    .technology-tab-arrow { display: none; }
    .technology-visual-header { margin-inline: 18px; }
    .technology-drawing { padding: 0; }
    .technology-visual figcaption { padding-inline: 18px; }
}
@media (max-width: 767px) {
    #platform { padding: 56px 24px 0; }
    .technology-header { align-items: flex-start; flex-direction: column; gap: 12px; padding-bottom: 20px; }
    .technology-header > p { font-size: 12px; }
    .technology-panels { order: 2; padding-block: 28px; }
    .technology-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .technology-copy { padding: 0; }
    .technology-copy h3 { margin-top: 20px; font-size: 44px; }
    .technology-description { min-height: 0; margin-top: 20px; font-size: 16px; line-height: 1.75; }
    .technology-visual figcaption strong { font-size: 17px; }
    .technology-tabs { order: 1; margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .technology-tabs button { min-height: 72px; padding: 18px 12px; }
    .technology-tabs button:nth-child(3) { border-left: 0; }
    .technology-tabs button:nth-child(n+3) { border-bottom: 1px solid #303957; }
}