:root {
    --it-red:#ed1c24;
    --it-red2:#ff252e;
    --it-cyan:#42e4da;
    --it-ink:#040505;
    --it-panel:#07090a;
    --it-line:#263034;
    --it-copy:#bac3c5;
    --it-max:1480px
}
* {
    box-sizing:border-box
}

.it-page {
    background:#030404;
    color:#f5f5f2;
    overflow-x:hidden
}

.it-page .site-header {
    z-index:100
}

.it-page .main-nav a.active {
    color:#fff
}

.it-page .main-nav a.active:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:11px;
    height:2px;
    background:var(--it-red);
    box-shadow:0 0 10px rgba(237,28,36,.55)
}
.it-main {
    position:relative;
    isolation:isolate;
    background:radial-gradient(circle at 65% 12%,rgba(237,28,36,.045),transparent 24%),#030404
}

.it-main:before {
    content:"";
    position:fixed;
    inset:70px 0 0;
    pointer-events:none;
    z-index:-1;
    opacity:.22;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,#000,transparent 85%)
}
.it-progress {
    position:fixed;
    z-index:120;
    left:0;
    top:0;
    width:100%;
    height:3px;
    pointer-events:none
}

.it-progress i {
    display:block;
    height:100%;
    width:0;
    background:var(--it-red);
    box-shadow:0 0 14px var(--it-red)
}

.pointer-glow {
    position:fixed;
    z-index:2;
    left:0;
    top:0;
    width:460px;
    height:460px;
    border-radius:50%;
    pointer-events:none;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(237,28,36,.08),transparent 66%);
    mix-blend-mode:screen
}
.it-section {
    position:relative;
    border-bottom:1px solid #252c2e;
    overflow:hidden
}

.it-shell {
    width:min(var(--it-max),94vw);
    margin:auto;
    padding:38px 0
}

.it-page h1,.it-page h2,.it-page h3,.it-page p {
    margin-top:0
}

.it-page h1,.it-page h2,.it-page h3 {
    font-family:"Press Start 2P",monospace;
    text-transform:uppercase
}

.it-page h1 {
    font-size:clamp(40px,5.1vw,78px);
    line-height:1.08;
    letter-spacing:-2px;
    margin:11px 0 20px
}

.it-page h2 {
    font-size:clamp(27px,3.25vw,51px);
    line-height:1.14;
    letter-spacing:-1px;
    margin:9px 0 18px
}

.it-page h3 {
    font-size:clamp(16px,1.55vw,24px);
    line-height:1.24
}

.it-page h1 span,.it-page h2 span {
    color:var(--it-red)
}

.it-page p {
    color:var(--it-copy);
    font-size:18px;
    line-height:1.55
}

.it-kicker {
    font:700 10px/1.4 "Press Start 2P",monospace;
    color:var(--it-red);
    text-transform:uppercase;
    letter-spacing:.03em
}

.it-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 22px;
    background:var(--it-red);
    border:1px solid var(--it-red);
    font-weight:800;
    transition:.22s
}

.it-btn:hover {
    background:var(--it-red2);
    box-shadow:0 0 28px rgba(237,28,36,.34);
    transform:translateY(-2px)
}

.anchor {
    position:relative;
    top:-80px;
    visibility:hidden
}
.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)
}

.reveal.is-visible {
    opacity:1;
    transform:none
}
/* HERO */
.it-hero {
    min-height:530px;
    background:radial-gradient(circle at 70% 48%,rgba(237,28,36,.16),transparent 31%),linear-gradient(180deg,#020303,#050606)
}

.ambient-grid {
    position:absolute;
    inset:0;
    opacity:.3;
    background-image:linear-gradient(rgba(237,28,36,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(237,28,36,.05) 1px,transparent 1px);
    background-size:42px 42px;
    animation:gridDrift 18s linear infinite
}

.hero-layout {
    min-height:530px;
    display:grid;
    grid-template-columns:.39fr .61fr;
    align-items:center;
    gap:20px
}

.hero-copy {
    position:relative;
    z-index:8
}

.hero-copy p {
    max-width:520px
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:26px
}

.back-home {
    font:700 9px "Press Start 2P",monospace;
    color:#cdd4d5
}

.back-home:hover {
    color:#fff
}

.hero-scene {
    position:relative;
    height:470px;
    min-width:0
}

.systems-box {
    position:absolute;
    z-index:8;
    left:6%;
    top:34px;
    width:205px;
    padding:16px 18px;
    border:1px solid #5f686a;
    background:rgba(5,7,8,.94);
    box-shadow:0 0 30px rgba(237,28,36,.1),inset 0 0 25px rgba(255,255,255,.015);
    font:700 12px/1.6 "Press Start 2P",monospace
}

.systems-box strong {
    display:block;
    margin-bottom:5px;
    color:#fff
}

.systems-box span {
    display:flex;
    justify-content:space-between
}

.systems-box i {
    font-style:normal;
    color:var(--it-cyan);
    text-shadow:0 0 9px rgba(66,228,218,.55)
}

.hero-coder {
    position:absolute;
    z-index:5;
    left:24%;
    bottom:-8px;
    width:min(50%,540px);
    filter:drop-shadow(0 20px 35px #000) drop-shadow(0 0 18px rgba(237,28,36,.2));
    animation:floatMascot 5s ease-in-out infinite
}

.hero-coder img {
    width:100%;
    image-rendering:auto
}

.css-laptop {
    position:absolute;
    z-index:7;
    left:31%;
    bottom:14px;
    width:320px;
    height:156px;
    transform:skew(-5deg);
    border:2px solid #171d20;
    border-radius:5px;
    background:linear-gradient(145deg,#171b1e,#090b0c 70%);
    box-shadow:0 16px 30px #000,0 0 28px rgba(237,28,36,.13);
    display:grid;
    place-items:center
}

.css-laptop span {
    color:var(--it-red);
    font:700 14px "Press Start 2P",monospace;
    transform:skew(5deg)
}

.css-laptop i {
    position:absolute;
    left:14%;
    right:4%;
    bottom:-15px;
    height:16px;
    background:#14181a;
    clip-path:polygon(4% 0,100% 0,94% 100%,0 100%)
}

.city-bars {
    position:absolute;
    right:8%;
    bottom:0;
    width:230px;
    height:300px;
    display:flex;
    gap:7px;
    align-items:flex-end;
    opacity:.7
}

.city-bars i {
    flex:1;
    height:var(--h,40%);
    background:repeating-linear-gradient(180deg,#941015 0 7px,#230507 7px 14px);
    box-shadow:0 0 22px rgba(237,28,36,.22);
    animation:cityPulse 3.8s ease-in-out infinite
}

.city-bars i:nth-child(1) {
    --h:38%
}

.city-bars i:nth-child(2) {
    --h:55%;
    animation-delay:-.4s
}

.city-bars i:nth-child(3) {
    --h:76%;
    animation-delay:-.9s
}

.city-bars i:nth-child(4) {
    --h:92%;
    animation-delay:-1.4s
}

.city-bars i:nth-child(5) {
    --h:67%;
    animation-delay:-1.9s
}

.city-bars i:nth-child(6) {
    --h:48%;
    animation-delay:-2.2s
}

.city-bars i:nth-child(7) {
    --h:82%;
    animation-delay:-2.8s
}

.city-bars i:nth-child(8) {
    --h:60%;
    animation-delay:-3.2s
}

.hero-mantra {
    position:absolute;
    right:0;
    top:44px;
    color:#dce2df;
    font:700 12px/1.75 "Chakra Petch",sans-serif;
    font-style:italic;
    transform:rotate(-3deg);
    z-index:7
}

.code-stream {
    position:absolute;
    inset:0;
    pointer-events:none
}

.code-stream span {
    position:absolute;
    color:rgba(237,28,36,.45);
    font:700 10px "Press Start 2P",monospace;
    animation:codeFall 7s linear infinite
}

.code-stream span:nth-child(1) {
    left:18%;
    animation-delay:-1s
}

.code-stream span:nth-child(2) {
    left:55%;
    animation-delay:-4s
}

.code-stream span:nth-child(3) {
    left:75%;
    animation-delay:-2s
}

.code-stream span:nth-child(4) {
    left:88%;
    animation-delay:-6s
}

.code-stream span:nth-child(5) {
    left:42%;
    animation-delay:-3s
}
/* HEAD + CARDS */
.section-head {
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:70px;
    align-items:end;
    margin-bottom:24px
}

.section-intro {
    display:grid;
    grid-template-columns:.42fr .58fr;
    gap:25px;
    align-items:start
}

.section-intro strong {
    color:var(--it-red);
    font:700 12px/1.55 "Press Start 2P",monospace
}

.section-intro p {
    font-size:15px
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.service-card {
    position:relative;
    min-height:330px;
    padding:28px 26px 84px;
    border:1px solid #323a3c;
    background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(237,28,36,.018));
    overflow:hidden;
    transform-style:preserve-3d
}

.service-card:after {
    content:"";
    position:absolute;
    inset:-1px;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.06) 48%,transparent 61%);
    transform:translateX(-130%);
    transition:transform .8s ease;
    pointer-events:none
}

.service-card:hover {
    border-color:#754044;
    box-shadow:0 0 26px rgba(237,28,36,.09)
}

.service-card:hover:after {
    transform:translateX(130%)
}

.card-icon {
    color:var(--it-red);
    font:700 31px/1 monospace;
    margin-bottom:26px
}

.service-card small {
    display:block;
    color:#b9c6ca;
    font:700 9px "Press Start 2P",monospace;
    margin-bottom:23px
}

.service-card h3 {
    font-size:clamp(14px,1.45vw,21px)
}

.service-card p {
    font-size:15px;
    line-height:1.52
}

.service-card>a {
    position:absolute;
    left:26px;
    bottom:25px;
    display:inline-flex;
    align-items:center;
    min-height:46px;
    padding:0 16px;
    background:var(--it-red);
    font-weight:800;
    font-size:14px
}

.service-card>a:hover {
    box-shadow:0 0 22px rgba(237,28,36,.28)
}
/* ECOMMERCE */
.commerce-layout {
    display:grid;
    grid-template-columns:.32fr .68fr;
    gap:34px;
    align-items:center
}

.commerce-layout>div:first-child p {
    max-width:430px
}

.browser-panel {
    border:1px solid #577277;
    border-radius:4px;
    padding:20px 18px 14px;
    background:rgba(3,8,9,.75);
    box-shadow:inset 0 0 35px rgba(0,255,240,.02)
}

.browser-top {
    height:20px;
    display:flex;
    gap:7px
}

.browser-top i {
    width:8px;
    height:8px;
    border:1px solid var(--it-red);
    border-radius:50%
}

.platforms {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px
}

.platforms>div {
    min-height:138px;
    border:1px solid #37545a;
    display:grid;
    place-items:center;
    align-content:center;
    gap:18px;
    text-align:center;
    background:#050708;
    transition:.25s
}

.platforms>div:hover {
    transform:translateY(-5px);
    border-color:var(--it-cyan);
    box-shadow:0 0 20px rgba(66,228,218,.07)
}

.platforms b {
    font:700 24px "Chakra Petch",sans-serif
}

.platforms span {
    color:var(--it-cyan);
    font:700 8px/1.5 "Press Start 2P",monospace
}

.feature-row {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:16px;
    color:#b9cdcf;
    font:700 8px "Press Start 2P",monospace
}

.feature-row span::first-letter {
    color:var(--it-cyan)
}
/* ERP */
.erp-layout {
    display:grid;
    grid-template-columns:.29fr .42fr .29fr;
    gap:26px;
    align-items:center
}

.erp-layout p {
    font-size:15px
}

.system-map {
    position:relative;
    min-height:360px;
    border:1px solid #364143;
    background:radial-gradient(circle,rgba(237,28,36,.06),transparent 60%),#040606
}

.system-map svg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}

.system-map path {
    fill:none;
    stroke:rgba(237,28,36,.72);
    stroke-width:2
}

.system-map path.pulse {
    stroke:#ff3138;
    stroke-width:3;
    stroke-dasharray:10 18;
    animation:dash 2s linear infinite;
    filter:drop-shadow(0 0 5px #ed1c24)
}

.node {
    position:absolute;
    min-width:132px;
    padding:11px 13px;
    border:1px solid #587278;
    background:#050809;
    text-align:center;
    font:700 9px "Press Start 2P",monospace;
    box-shadow:0 0 15px rgba(0,0,0,.5)
}

.n-top {
    left:50%;
    top:8%;
    transform:translateX(-50%)
}

.n-left {
    left:4%;
    top:27%
}

.n-right {
    right:4%;
    top:27%
}

.n-core {
    left:50%;
    top:43%;
    transform:translateX(-50%);
    border-color:var(--it-red);
    box-shadow:0 0 15px rgba(237,28,36,.23)
}

.n-bl {
    left:8%;
    bottom:22%
}

.n-br {
    right:8%;
    bottom:22%
}

.n-bottom {
    left:50%;
    bottom:5%;
    transform:translateX(-50%)
}

.erp-partners h3 {
    font-size:18px
}

.partner-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:20px 0
}

.partner-grid span {
    min-height:50px;
    border:1px solid #384548;
    background:#050708;
    display:grid;
    place-items:center;
    text-align:center;
    padding:5px;
    font-weight:800
}

.erp-partners strong {
    display:block;
    color:var(--it-red);
    font-size:14px
}

.erp-partners p {
    font-size:13px;
    margin-top:8px
}
/* AI */
.ai-section {
    background:linear-gradient(180deg,rgba(237,28,36,.055),rgba(0,0,0,0) 35%),#030404
}

.ai-layout {
    display:grid;
    grid-template-columns:.34fr .66fr;
    gap:20px;
    align-items:center
}

.agent-scene {
    position:relative;
    min-height:440px
}

.agent-scene img {
    position:absolute;
    z-index:3;
    left:50%;
    bottom:2%;
    width:min(43%,390px);
    transform:translateX(-50%);
    filter:drop-shadow(0 16px 28px #000) drop-shadow(0 0 20px rgba(237,28,36,.24));
    animation:floatMascot 4.4s ease-in-out infinite
}

.agent-core {
    position:absolute;
    z-index:5;
    left:50%;
    top:47%;
    transform:translate(-50%,-50%);
    width:140px;
    height:122px;
    border:2px solid var(--it-red);
    background:rgba(58,4,7,.92);
    box-shadow:0 0 35px rgba(237,28,36,.55),inset 0 0 24px rgba(237,28,36,.25);
    display:grid;
    place-items:center;
    text-align:center;
    font:700 20px/1.15 "Press Start 2P",monospace;
    animation:corePulse 2.2s ease-in-out infinite
}

.core-orbit {
    position:absolute;
    z-index:2;
    left:50%;
    top:47%;
    width:280px;
    height:280px;
    border:1px dashed rgba(237,28,36,.35);
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:spin 16s linear infinite
}

.flow {
    position:absolute;
    z-index:6;
    min-width:112px;
    padding:10px;
    border:1px solid #61787d;
    background:#050708;
    text-align:center;
    font:700 9px "Press Start 2P",monospace
}

.f1 {
    left:3%;
    top:10%
}

.f2 {
    left:0;
    top:32%
}

.f3 {
    left:4%;
    top:54%
}

.f4 {
    right:3%;
    top:10%
}

.f5 {
    right:0;
    top:32%
}

.f6 {
    right:4%;
    top:54%
}

.f7 {
    right:10%;
    top:76%
}

.flow-lines {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1
}

.flow-lines path {
    fill:none;
    stroke:#ed1c24;
    stroke-width:2;
    stroke-dasharray:8 12;
    animation:dash 2s linear infinite
}

.ai-cards {
    margin-top:8px
}

.ai-cards .service-card {
    min-height:285px
}

.automation {
    margin-top:28px;
    padding-top:18px
}

.automation-meter {
    display:flex;
    align-items:center;
    gap:14px;
    font:700 9px "Press Start 2P",monospace
}

.automation-meter i {
    display:block;
    width:230px;
    height:12px;
    border:1px solid #69777a;
    padding:2px
}

.automation-meter i b {
    display:block;
    height:100%;
    width:0;
    background:linear-gradient(90deg,var(--it-red),#ff4a50);
    box-shadow:0 0 10px rgba(237,28,36,.4)
}

.automation-meter em {
    font-style:normal;
    color:#d8e0e1
}

.automation-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin:18px 0 22px
}

.automation-head h3 {
    font-size:22px;
    margin:0
}

.automation-head strong {
    font:700 11px/1.45 "Press Start 2P",monospace
}

.automation-steps {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px
}

.automation-steps article {
    position:relative;
    padding-top:15px;
    border-top:1px solid rgba(237,28,36,.48)
}

.automation-steps article:not(:last-child):after {
    content:"›";
    position:absolute;
    right:-15px;
    top:-18px;
    color:var(--it-red);
    font-size:30px
}

.automation-steps b {
    color:var(--it-red);
    font:700 12px "Press Start 2P",monospace
}

.automation-steps h4 {
    font-size:15px;
    margin:13px 0 6px
}

.automation-steps p {
    font-size:13px;
    line-height:1.35
}
/* AI commerce */
.compact .it-shell {
    padding-top:24px;
    padding-bottom:24px
}

.ai-commerce-layout {
    display:grid;
    grid-template-columns:.25fr .75fr;
    gap:25px;
    align-items:center
}

.ai-commerce-layout h2 {
    font-size:31px
}

.ai-commerce-layout p {
    font-size:14px
}

.mini-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px
}

.mini-grid article {
    min-height:130px;
    border:1px solid #323d40;
    padding:16px;
    background:#050708;
    transition:.25s
}

.mini-grid article:hover {
    transform:translateY(-4px);
    border-color:#804044
}

.mini-grid b {
    display:block;
    color:#fff;
    font:700 9px/1.45 "Press Start 2P",monospace;
    margin-bottom:12px
}

.mini-grid span {
    font-size:13px;
    color:var(--it-copy);
    line-height:1.35
}
/* CUSTOM */
.custom-layout {
    display:grid;
    grid-template-columns:.36fr .64fr;
    gap:20px;
    align-items:center
}

.builder-scene {
    position:relative;
    min-height:300px;
    display:flex;
    align-items:center
}

.builder-scene img {
    position:absolute;
    z-index:3;
    left:0;
    bottom:-8px;
    width:260px;
    filter:drop-shadow(0 14px 25px #000) drop-shadow(0 0 16px rgba(237,28,36,.2));
    animation:builderBob 4.2s ease-in-out infinite
}

.formula {
    position:relative;
    z-index:4;
    margin-left:235px;
    width:calc(100% - 235px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}

.formula span,.formula strong {
    min-width:120px;
    min-height:78px;
    border:1px solid #667174;
    background:#050708;
    display:grid;
    place-items:center;
    text-align:center;
    padding:10px;
    font:700 9px/1.5 "Press Start 2P",monospace
}

.formula strong {
    border-color:var(--it-red);
    font-size:13px;
    box-shadow:0 0 25px rgba(237,28,36,.25)
}

.formula b {
    color:#ffc43a;
    font-size:26px
}
/* APPS + PYTHON */
.dual-layout {
    display:grid;
    grid-template-columns:1fr 1fr
}

.app-box,.python-box {
    position:relative;
    min-height:390px;
    padding:5px 34px 5px 0
}

.python-box {
    border-left:1px solid #273034;
    padding-left:36px
}

.app-box p,.python-box p {
    max-width:410px;
    font-size:15px
}

.phone-mock {
    position:absolute;
    right:24%;
    bottom:20px;
    width:150px;
    height:280px;
    border:8px solid #1f2426;
    border-radius:30px;
    background:linear-gradient(145deg,#121617,#050607);
    transform:rotate(-7deg);
    box-shadow:0 18px 30px #000,0 0 23px rgba(237,28,36,.15);
    animation:phoneFloat 4s ease-in-out infinite
}

.phone-mock:before {
    content:"";
    position:absolute;
    right:-64px;
    top:25px;
    width:130px;
    height:250px;
    border:7px solid #351015;
    border-radius:28px;
    background:#08090a;
    z-index:-1
}

.phone-mock div {
    padding:42px 16px;
    color:var(--it-red);
    font:700 11px "Press Start 2P",monospace
}

.phone-mock div span,.phone-mock div b {
    display:block;
    margin-bottom:15px
}

.phone-mock i {
    display:block;
    height:8px;
    background:#292e30;
    margin:10px 0
}

.app-box ul {
    position:absolute;
    right:0;
    bottom:52px;
    list-style:none;
    margin:0;
    padding:0;
    font:700 8px/1.8 "Press Start 2P",monospace
}

.app-box li:before {
    content:"✓ ";
    color:var(--it-red)
}

.terminal {
    margin-top:18px;
    border:1px solid #4c7174;
    background:#020708;
    box-shadow:inset 0 0 30px rgba(66,228,218,.025)
}

.terminal-bar {
    padding:10px 14px;
    border-bottom:1px solid #31484b;
    font:600 14px monospace
}

.terminal pre {
    margin:0;
    padding:18px;
    font:600 14px/1.65 monospace;
    color:#bcdadd;
    white-space:pre-wrap
}

.terminal b {
    color:#22e3a0
}

.terminal strong {
    display:block;
    margin-top:8px;
    color:#22e3a0;
    font-size:18px
}
/* MARKETING */
.marketing-section {
    background:radial-gradient(circle at 55% 52%,rgba(237,28,36,.11),transparent 30%),#030404
}

.marketing-layout {
    display:grid;
    grid-template-columns:.38fr .34fr .28fr;
    gap:28px;
    align-items:center
}

.marketing-copy p {
    max-width:520px
}

.marketing-scene {
    position:relative;
    min-height:360px
}

.marketing-scene img {
    position:absolute;
    z-index:4;
    left:5%;
    bottom:0;
    width:min(55%,300px);
    filter:drop-shadow(0 14px 26px #000) drop-shadow(0 0 18px rgba(237,28,36,.2));
    animation:marketingFloat 4s ease-in-out infinite
}

.growth-chart {
    position:absolute;
    right:0;
    bottom:40px;
    width:58%;
    height:220px;
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:0 8px 8px;
    border-left:1px solid rgba(237,28,36,.45);
    border-bottom:1px solid rgba(237,28,36,.45)
}

.growth-chart i {
    flex:1;
    height:var(--h);
    background:linear-gradient(#ff343c,#75080c);
    box-shadow:0 0 15px rgba(237,28,36,.28);
    transform-origin:bottom;
    animation:barBreath 2.8s ease-in-out infinite
}

.growth-chart i:nth-child(2) {
    animation-delay:-.4s
}

.growth-chart i:nth-child(3) {
    animation-delay:-.8s
}

.growth-chart i:nth-child(4) {
    animation-delay:-1.2s
}

.growth-chart i:nth-child(5) {
    animation-delay:-1.6s
}

.growth-chart i:nth-child(6) {
    animation-delay:-2s
}

.growth-chart b {
    position:absolute;
    right:-4px;
    top:-45px;
    color:var(--it-red);
    font-size:70px;
    text-shadow:0 0 16px rgba(237,28,36,.45);
    animation:arrowPulse 1.8s ease-in-out infinite
}

.orbit {
    position:absolute;
    z-index:5;
    min-width:58px;
    padding:9px;
    border:1px solid #5f3336;
    background:#090606;
    color:#fff;
    text-align:center;
    font:700 8px "Press Start 2P",monospace;
    box-shadow:0 0 18px rgba(237,28,36,.14);
    animation:orbitFloat 3s ease-in-out infinite
}

.o1 {
    left:8%;
    top:10%
}

.o2 {
    right:0;
    top:14%;
    animation-delay:-.8s
}

.o3 {
    right:5%;
    top:42%;
    animation-delay:-1.5s
}

.o4 {
    left:18%;
    top:38%;
    animation-delay:-2.1s
}

.marketing-list {
    border-left:1px solid #384043;
    padding-left:28px
}

.marketing-list ul {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:13px
}

.marketing-list li {
    position:relative;
    padding-left:24px;
    font-weight:700
}

.marketing-list li:before {
    content:"✓";
    position:absolute;
    left:0;
    color:var(--it-red)
}

.marketing-list p {
    margin:26px 0 0;
    padding:16px;
    border:1px solid #4a2a2d;
    background:rgba(237,28,36,.03);
    font-size:14px
}

.marketing-list strong {
    color:#fff
}

.growth-flow {
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:7px
}

.growth-flow span {
    min-width:120px;
    padding:13px;
    border:1px solid #4c5a5d;
    background:#050708;
    text-align:center;
    font:700 8px "Press Start 2P",monospace
}

.growth-flow b {
    color:var(--it-red);
    font-size:24px
}
/* PROCESS */
.process-head {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:flex-end
}

.process-head strong {
    font:700 8px "Press Start 2P",monospace;
    color:#bcc9ca
}

.process-line {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:24px;
    margin-top:16px
}

.process-line article {
    position:relative;
    padding-top:20px;
    border-top:2px solid var(--it-red)
}

.process-line article:not(:last-child):after {
    content:"›";
    position:absolute;
    right:-20px;
    top:-18px;
    color:var(--it-red);
    font-size:30px
}

.process-line b {
    color:var(--it-red);
    font:700 12px "Press Start 2P",monospace
}

.process-line h3 {
    font-size:15px;
    margin:15px 0 6px
}

.process-line p {
    font-size:13px;
    line-height:1.35
}
/* FINAL */
.final-section {
    background:radial-gradient(circle at 62% 70%,rgba(237,28,36,.13),transparent 28%),#030404
}

.final-layout {
    display:grid;
    grid-template-columns:.43fr .57fr;
    gap:30px;
    align-items:center;
    min-height:330px
}

.final-layout p {
    max-width:620px
}

.good-code {
    margin-top:18px;
    color:#b7c4c6;
    font:700 8px "Press Start 2P",monospace
}

.final-scene {
    position:relative;
    min-height:300px
}

.final-scene img {
    position:absolute;
    left:18%;
    bottom:-20px;
    width:min(48%,330px);
    filter:drop-shadow(0 15px 28px #000) drop-shadow(0 0 18px rgba(237,28,36,.23));
    animation:finalBob 4.4s ease-in-out infinite
}

.mission {
    position:absolute;
    left:4%;
    top:18%;
    padding:12px;
    border:1px solid #667579;
    background:#050708;
    font:700 8px/1.45 "Press Start 2P",monospace
}

.final-checks {
    position:absolute;
    right:18%;
    top:20%;
    display:grid;
    gap:8px;
    font:700 9px "Press Start 2P",monospace
}

.final-checks span:first-letter {
    color:var(--it-cyan)
}

.chalk {
    position:absolute;
    right:0;
    bottom:9%;
    font:700 20px/1.2 "Chakra Petch",sans-serif;
    font-style:italic;
    transform:rotate(-8deg);
    color:#d8d4d0
}
/* MOTION */
@keyframes gridDrift {
    to {
        background-position:42px 42px
    }

}

@keyframes floatMascot {
    50% {
        transform:translateY(-7px)
    }

}

@keyframes cityPulse {
    50% {
        filter:brightness(1.35);
        transform:scaleY(1.03)
    }

}

@keyframes codeFall {
    0% {
        top:-20px;
        opacity:0
    }

    15% {
        opacity:.4
    }

    100% {
        top:105%;
        opacity:0
    }

}

@keyframes dash {
    to {
        stroke-dashoffset:-56
    }

}

@keyframes corePulse {
    50% {
        box-shadow:0 0 55px rgba(237,28,36,.75),inset 0 0 30px rgba(237,28,36,.35);
        transform:translate(-50%,-50%) scale(1.035)
    }

}

@keyframes spin {
    to {
        transform:translate(-50%,-50%) rotate(360deg)
    }

}

@keyframes builderBob {
    50% {
        transform:translateY(-7px) rotate(-1deg)
    }

}

@keyframes phoneFloat {
    50% {
        transform:translateY(-8px) rotate(-5deg)
    }

}

@keyframes marketingFloat {
    50% {
        transform:translateY(-8px) rotate(.8deg)
    }

}

@keyframes orbitFloat {
    50% {
        transform:translateY(-7px)
    }

}

@keyframes barBreath {
    50% {
        filter:brightness(1.35);
        transform:scaleY(.96)
    }

}

@keyframes arrowPulse {
    50% {
        transform:translate(5px,-5px)
    }

}

@keyframes finalBob {
    50% {
        transform:translateY(-7px) rotate(.5deg)
    }

}
/* RESPONSIVE */
@media(max-width:1180px) {
    .it-page h1 {
        font-size:clamp(38px,5vw,64px)
    }

    .hero-layout {
        grid-template-columns:.44fr .56fr
    }

    .systems-box {
        left:0
    }

    .hero-coder {
        left:20%;
        width:58%
    }

    .css-laptop {
        left:27%;
        width:285px
    }

    .hero-mantra {
        display:none
    }

    .section-head {
        grid-template-columns:1fr
    }

    .section-intro {
        max-width:850px
    }

    .erp-layout {
        grid-template-columns:1fr 1.25fr
    }

    .erp-partners {
        grid-column:1/-1
    }

    .partner-grid {
        grid-template-columns:repeat(5,1fr)
    }

    .marketing-layout {
        grid-template-columns:1fr 1fr
    }

    .marketing-list {
        border-left:0;
        padding-left:0
    }

    .marketing-list ul {
        grid-template-columns:repeat(2,1fr)
    }

    .growth-flow {
        grid-column:1/-1
    }

    .mini-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .automation-steps {
        grid-template-columns:repeat(3,1fr);
        row-gap:32px
    }

    .service-grid {
        grid-template-columns:repeat(2,1fr)
    }

}
@media(max-width:820px) {
    .pointer-glow {
        display:none
    }

    .it-shell {
        width:91vw;
        padding:31px 0
    }

    .it-page h1 {
        font-size:clamp(34px,10vw,48px);
        letter-spacing:-1px
    }

    .it-page h2 {
        font-size:clamp(24px,7vw,36px)
    }

    .it-page p {
        font-size:16px
    }

    .hero-layout {
        grid-template-columns:1fr;
        min-height:auto
    }

    .it-hero {
        min-height:auto
    }

    .hero-copy {
        padding-top:16px
    }

    .hero-scene {
        height:420px
    }

    .systems-box {
        left:0;
        top:25px;
        width:175px;
        font-size:9px
    }

    .hero-coder {
        left:48%;
        width:55%;
        bottom:0
    }

    .css-laptop {
        left:38%;
        width:230px;
        height:125px
    }

    .city-bars {
        right:0;
        width:170px;
        height:260px
    }

    .hero-actions {
        flex-wrap:wrap
    }

    .section-intro {
        grid-template-columns:1fr
    }

    .commerce-layout,.custom-layout,.ai-layout,.ai-commerce-layout,.final-layout,.marketing-layout {
        grid-template-columns:1fr
    }

    .browser-panel {
        margin-top:8px
    }

    .platforms {
        grid-template-columns:repeat(2,1fr)
    }

    .feature-row {
        grid-template-columns:repeat(2,1fr)
    }

    .erp-layout {
        grid-template-columns:1fr
    }

    .erp-partners {
        grid-column:auto
    }

    .partner-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .agent-scene {
        min-height:390px
    }

    .agent-scene img {
        width:43%
    }

    .ai-cards {
        grid-template-columns:1fr 1fr
    }

    .automation-head {
        align-items:flex-start;
        flex-direction:column
    }

    .automation-steps {
        grid-template-columns:1fr 1fr
    }

    .mini-grid {
        grid-template-columns:1fr 1fr
    }

    .builder-scene {
        min-height:430px;
        display:block
    }

    .builder-scene img {
        left:50%;
        transform:translateX(-50%);
        bottom:5px
    }

    .formula {
        margin-left:0;
        width:100%;
        flex-wrap:wrap;
        justify-content:center;
        padding-bottom:230px
    }

    .formula span,.formula strong {
        min-width:105px
    }

    .dual-layout {
        grid-template-columns:1fr
    }

    .python-box {
        border-left:0;
        border-top:1px solid #273034;
        padding:32px 0 0;
        margin-top:22px
    }

    .app-box {
        padding-right:0
    }

    .marketing-scene {
        min-height:330px
    }

    .marketing-list ul {
        grid-template-columns:1fr 1fr
    }

    .growth-flow {
        overflow-x:auto;
        justify-content:flex-start;
        padding-bottom:8px
    }

    .process-head {
        align-items:flex-start;
        flex-direction:column
    }

    .process-line {
        grid-template-columns:1fr 1fr 1fr;
        row-gap:34px
    }

    .final-scene {
        min-height:280px
    }

    .final-scene img {
        left:35%;
        width:42%
    }

    .chalk {
        right:4%
    }

}
@media(max-width:560px) {
    .it-shell {
        width:90vw
    }

    .service-grid,.ai-cards {
        grid-template-columns:1fr
    }

    .service-card {
        min-height:290px
    }

    .hero-scene {
        height:355px
    }

    .systems-box {
        width:150px;
        padding:12px;
        font-size:8px
    }

    .hero-coder {
        left:51%;
        width:64%
    }

    .css-laptop {
        left:37%;
        width:190px;
        height:105px
    }

    .city-bars {
        width:130px;
        height:220px
    }

    .platforms,.partner-grid,.mini-grid,.automation-steps,.marketing-list ul,.process-line {
        grid-template-columns:1fr
    }

    .feature-row {
        grid-template-columns:1fr 1fr
    }

    .system-map {
        min-height:315px;
        transform:scale(.92);
        margin:-10px -3vw
    }

    .node {
        min-width:104px;
        font-size:7px
    }

    .agent-scene {
        min-height:330px
    }

    .agent-scene img {
        width:50%
    }

    .agent-core {
        width:105px;
        height:92px;
        font-size:14px
    }

    .core-orbit {
        width:210px;
        height:210px
    }

    .flow {
        min-width:80px;
        font-size:7px;
        padding:8px
    }

    .f7 {
        top:79%
    }

    .automation-meter i {
        width:120px
    }

    .builder-scene img {
        width:210px
    }

    .formula {
        padding-bottom:205px
    }

    .formula span,.formula strong {
        min-width:86px;
        min-height:66px;
        font-size:7px
    }

    .formula b {
        font-size:20px
    }

    .phone-mock {
        right:32%;
        transform:rotate(-5deg) scale(.88)
    }

    .app-box ul {
        right:2%;
        font-size:7px
    }

    .marketing-list {
        padding-top:8px
    }

    .growth-flow span {
        min-width:105px
    }

    .final-scene img {
        left:28%;
        width:55%
    }

    .final-checks {
        right:1%;
        font-size:7px
    }

    .chalk {
        display:none
    }

    .mission {
        left:0
    }

}
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }

    .reveal {
        opacity:1;
        transform:none
    }

    .pointer-glow {
        display:none
    }

}
/* 2026-08 final polish: corrected mascot rendering, diagrams and motion */
.hero-coder {
    left:34%;
    bottom:-145px;
    width:min(38%,420px);
    height:570px;
    overflow:hidden;
    filter:drop-shadow(0 20px 35px #000) drop-shadow(0 0 20px rgba(237,28,36,.24))
}
.hero-coder img {
    width:100%;
    height:auto;
    transform:none;
    filter:saturate(.92) contrast(1.05)
}
.css-laptop {
    left:34%;
    bottom:10px;
    width:360px;
    z-index:9
}
.systems-box {
    z-index:10
}

.hero-mantra {
    z-index:10
}

.city-bars {
    z-index:2
}
/* ERP: true hub-and-spoke composition */
.system-map {
    min-height:380px;
    background:radial-gradient(circle at 50% 48%,rgba(237,28,36,.11),transparent 37%),#040606
}
.system-map:before,.system-map:after {
    content:"";
    position:absolute;
    left:50%;
    top:16%;
    bottom:16%;
    width:2px;
    background:linear-gradient(transparent,#ed1c24 18%,#ed1c24 82%,transparent);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(237,28,36,.45)
}
.system-map:after {
    left:14%;
    right:14%;
    top:50%;
    bottom:auto;
    width:auto;
    height:2px;
    transform:none;
    background:linear-gradient(90deg,transparent,#ed1c24 18%,#ed1c24 82%,transparent)
}
.system-map .node {
    z-index:3
}

.system-map .n-left {
    left:4%;
    top:32%
}

.system-map .n-right {
    right:4%;
    top:32%
}

.system-map .n-core {
    top:48%
}

.system-map .n-bl {
    left:8%;
    bottom:19%
}

.system-map .n-br {
    right:8%;
    bottom:19%
}
.system-map svg {
    z-index:2
}

.system-map path {
    stroke:#ed1c24;
    stroke-width:2.4;
    filter:drop-shadow(0 0 4px rgba(237,28,36,.6))
}
/* AI mascot: full, red/black, hidden naturally behind the agent core */
.agent-scene {
    min-height:470px
}

.agent-scene img {
    left:50%;
    bottom:-118px;
    width:min(38%,300px);
    height:auto;
    transform:translateX(-50%);
    filter:saturate(.9) contrast(1.08) drop-shadow(0 18px 30px #000) drop-shadow(0 0 20px rgba(237,28,36,.25));
    z-index:3
}

.agent-core {
    z-index:7
}

.flow {
    z-index:8
}

.flow-lines {
    z-index:6
}
/* Level 5 icons */
.mini-grid article {
    position:relative;
    padding-top:54px
}

.mini-icon {
    position:absolute;
    left:18px;
    top:17px;
    color:var(--it-red);
    font:700 27px/1 monospace;
    font-style:normal;
    text-shadow:0 0 14px rgba(237,28,36,.45);
    animation:iconBreath 2.8s ease-in-out infinite
}

.mini-grid article:nth-child(even) .mini-icon {
    animation-delay:-1.1s
}
/* Builder: full mascot, formula covers food hand; no database icon */
.builder-scene {
    min-height:340px
}

.builder-scene img {
    left:18px;
    bottom:-145px;
    width:245px;
    filter:saturate(.9) contrast(1.08) drop-shadow(0 14px 25px #000) drop-shadow(0 0 16px rgba(237,28,36,.2))
}

.formula {
    margin-left:230px;
    width:calc(100% - 230px)
}
/* App section: richer HTML/CSS device composition */
.phone-mock {
    display:none!important
}

.phone-stage {
    position:absolute;
    right:15%;
    bottom:12px;
    width:285px;
    height:315px;
    perspective:900px
}

.phone {
    position:absolute;
    border:7px solid #252a2c;
    border-radius:28px;
    background:linear-gradient(145deg,#15191a,#050607 70%);
    box-shadow:0 20px 38px #000,0 0 26px rgba(237,28,36,.18);
    overflow:hidden
}

.phone-main {
    right:28px;
    bottom:4px;
    width:145px;
    height:278px;
    transform:rotate(-5deg);
    border-color:#541117;
    animation:phoneFloat 4s ease-in-out infinite
}

.phone-back {
    left:5px;
    bottom:30px;
    width:140px;
    height:265px;
    transform:rotate(7deg);
    opacity:.92;
    animation:phoneFloat 4.8s ease-in-out -1.5s infinite
}

.phone-side {
    right:0;
    top:18px;
    width:82px;
    height:165px;
    transform:rotate(7deg);
    border-color:#22292b
}

.phone-ui {
    padding:40px 15px;
    color:var(--it-red);
    font:700 10px "Press Start 2P",monospace
}

.phone-ui span,.phone-ui b,.phone-ui em {
    display:block;
    margin-bottom:14px;
    font-style:normal
}

.phone-ui i {
    display:block;
    height:7px;
    background:#303638;
    margin:9px 0
}

.phone-ui em {
    margin-top:18px;
    color:#20e1a0;
    font-size:7px
}

.phone-code {
    padding:48px 14px;
    color:#9ba9ab;
    font:700 8px/2 "Press Start 2P",monospace
}

.phone-mark {
    display:grid;
    place-items:center;
    height:100%;
    color:var(--it-red);
    font:700 18px "Press Start 2P",monospace
}

.app-box ul {
    right:0;
    z-index:5
}
/* Marketing asset corrected to red and fully visible */
.marketing-scene img {
    left:2%;
    bottom:0;
    width:min(60%,330px);
    filter:saturate(.9) contrast(1.08) drop-shadow(0 14px 26px #000) drop-shadow(0 0 18px rgba(237,28,36,.25))
}
/* Final: complete mascot, cropped only behind layout rather than broken transparent fragments */
.final-scene {
    overflow:hidden
}

.final-scene img {
    left:18%;
    bottom:-210px;
    width:min(42%,300px);
    filter:saturate(.9) contrast(1.08) drop-shadow(0 15px 28px #000) drop-shadow(0 0 18px rgba(237,28,36,.23));
    z-index:2
}

.mission,.final-checks,.chalk {
    z-index:5
}
/* More breathing without disturbing layout */
.service-card,.mini-grid article,.partner-grid span,.platforms>div,.formula span,.formula strong {
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease
}

.mini-grid article:hover,.partner-grid span:hover,.formula span:hover,.formula strong:hover {
    transform:translateY(-4px);
    border-color:#744044;
    box-shadow:0 0 22px rgba(237,28,36,.12)
}
.it-section:after {
    content:"";
    position:absolute;
    pointer-events:none;
    left:-20%;
    top:0;
    width:35%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--it-red),transparent);
    opacity:.35;
    animation:sectionScan 8s linear infinite
}
@keyframes iconBreath {
    50% {
        transform:scale(1.12);
        filter:brightness(1.35)
    }

}

@keyframes sectionScan {
    to {
        left:110%
    }

}
@media(max-width:820px) {
    .hero-coder {
        left:52%;
        bottom:-105px;
        width:43%;
        height:440px
    }

    .css-laptop {
        left:38%;
        width:250px
    }

    .agent-scene img {
        bottom:-105px;
        width:34%
    }

    .builder-scene img {
        left:50%;
        bottom:-105px;
        width:210px;
        transform:translateX(-50%)
    }

    .phone-stage {
        position:relative;
        right:auto;
        bottom:auto;
        margin:22px auto 0
    }

    .app-box ul {
        position:relative;
        right:auto;
        bottom:auto;
        margin:20px 0 0
    }

    .final-scene img {
        left:36%;
        bottom:-170px;
        width:38%
    }

}
@media(max-width:560px) {
    .hero-coder {
        left:55%;
        bottom:-70px;
        width:46%;
        height:350px
    }

    .css-laptop {
        left:34%;
        width:205px
    }

    .agent-scene img {
        bottom:-65px;
        width:42%
    }

    .builder-scene img {
        bottom:-70px;
        width:180px
    }

    .formula {
        padding-bottom:190px
    }

    .phone-stage {
        transform:scale(.88);
        transform-origin:center top;
        margin-bottom:-35px
    }

    .final-scene img {
        left:32%;
        bottom:-120px;
        width:48%
    }

}
/* 2026-08-21 correction pass: unique vector mascots + full-width ERP layout */
/* Keep every illustration crisp: SVG assets have transparent backgrounds and no color filters. */
.hero-coder {
    left:31%;
    bottom:-138px;
    width:min(46%,520px);
    height:620px;
    overflow:visible;
    filter:drop-shadow(0 20px 35px #000) drop-shadow(0 0 20px rgba(237,28,36,.22))
}
.hero-coder img {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    filter:none;
    display:block
}
/* Level 03 now occupies the complete content width like the screen design. */
.erp-layout.it-shell {
    width:min(1580px,96vw);
    display:grid;
    grid-template-columns:minmax(300px,.9fr) minmax(520px,1.55fr) minmax(290px,.82fr);
    gap:34px;
    align-items:stretch
}
.erp-layout>div:first-child,.erp-partners {
    display:flex;
    flex-direction:column;
    justify-content:center
}
.erp-layout>div:first-child p {
    max-width:440px
}
.system-map {
    min-height:430px;
    height:100%;
    align-self:stretch
}
.erp-partners {
    padding:8px 0
}

.partner-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
/* Unique section mascots: no global saturation/hue filter, no clipping. */
.agent-scene {
    min-height:485px;
    overflow:visible
}
.agent-scene img {
    left:50%;
    bottom:-88px;
    width:min(58%,460px);
    height:480px;
    object-fit:contain;
    object-position:center bottom;
    transform:translateX(-50%);
    filter:none;
    z-index:3
}
.builder-scene {
    min-height:360px;
    overflow:visible
}
.builder-scene img {
    left:-12px;
    bottom:-72px;
    width:330px;
    height:400px;
    object-fit:contain;
    object-position:left bottom;
    filter:none;
    z-index:2
}
.formula {
    position:relative;
    z-index:4;
    margin-left:300px;
    width:calc(100% - 300px)
}
.marketing-scene {
    overflow:visible
}
.marketing-scene img {
    left:-4%;
    bottom:-12px;
    width:min(65%,420px);
    height:405px;
    object-fit:contain;
    object-position:left bottom;
    filter:none;
    z-index:3
}
.final-scene {
    overflow:visible
}
.final-scene img {
    left:14%;
    bottom:-58px;
    width:min(52%,400px);
    height:410px;
    object-fit:contain;
    object-position:center bottom;
    filter:none;
    z-index:2
}
/* Desktop polish: let content breathe without changing the original section rhythm. */
#erp .it-shell {
    padding-top:46px;
    padding-bottom:46px
}
#erp .system-map {
    box-shadow:inset 0 0 55px rgba(237,28,36,.025)
}
#erp .erp-partners {
    min-width:0
}
@media(max-width:1260px) {
    .erp-layout.it-shell {
        grid-template-columns:minmax(270px,.85fr) minmax(440px,1.35fr) minmax(260px,.78fr);
        gap:24px
    }
    .system-map {
        min-height:410px
    }

    .node {
        min-width:118px;
        padding:10px 9px;
        font-size:8px
    }
}
@media(max-width:1080px) {
    .erp-layout.it-shell {
        grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
        width:min(1180px,92vw)
    }
    .erp-layout>div:first-child {
        grid-column:1/-1;
        display:block
    }
    .erp-layout>div:first-child p {
        max-width:760px
    }
    .system-map {
        min-height:400px
    }

    .erp-partners {
        grid-column:auto
    }
    .partner-grid {
        grid-template-columns:repeat(3,1fr)
    }
}
@media(max-width:820px) {
    .erp-layout.it-shell {
        display:grid;
        grid-template-columns:1fr;
        width:91vw;
        gap:24px
    }
    .erp-layout>div:first-child,.system-map,.erp-partners {
        grid-column:1
    }
    .system-map {
        min-height:370px;
        width:100%;
        margin:0;
        transform:none
    }
    .partner-grid {
        grid-template-columns:repeat(3,1fr)
    }
    .hero-coder {
        left:46%;
        bottom:-78px;
        width:56%;
        height:430px
    }
    .agent-scene {
        min-height:440px
    }

    .agent-scene img {
        bottom:-55px;
        width:58%;
        height:370px
    }
    .builder-scene {
        min-height:415px
    }

    .builder-scene img {
        left:50%;
        bottom:-42px;
        width:265px;
        height:300px;
        transform:translateX(-50%)
    }
    .formula {
        margin-left:0;
        width:100%;
        padding-bottom:205px
    }
    .marketing-scene img {
        left:0;
        bottom:-5px;
        width:60%;
        height:320px
    }
    .final-scene {
        min-height:320px
    }

    .final-scene img {
        left:27%;
        bottom:-40px;
        width:52%;
        height:315px
    }
}
@media(max-width:560px) {
    .erp-layout.it-shell {
        width:90vw;
        gap:20px
    }
    .system-map {
        min-height:350px;
        overflow:hidden
    }
    .system-map .node {
        min-width:92px;
        padding:9px 7px;
        font-size:6.5px;
        line-height:1.25
    }
    .system-map .n-top {
        top:7%
    }

    .system-map .n-left {
        left:3%;
        top:31%
    }

    .system-map .n-right {
        right:3%;
        top:31%
    }

    .system-map .n-core {
        top:47%
    }

    .system-map .n-bl {
        left:4%;
        bottom:19%
    }

    .system-map .n-br {
        right:4%;
        bottom:19%
    }

    .system-map .n-bottom {
        bottom:4%
    }
    .partner-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .hero-coder {
        left:47%;
        bottom:-48px;
        width:62%;
        height:335px
    }
    .agent-scene {
        min-height:375px
    }

    .agent-scene img {
        bottom:-34px;
        width:64%;
        height:290px
    }
    .builder-scene {
        min-height:375px
    }

    .builder-scene img {
        bottom:-30px;
        width:225px;
        height:255px
    }
    .formula {
        padding-bottom:175px
    }
    .marketing-scene {
        min-height:320px
    }

    .marketing-scene img {
        left:-5%;
        width:64%;
        height:270px
    }
    .final-scene {
        min-height:290px
    }

    .final-scene img {
        left:21%;
        bottom:-30px;
        width:60%;
        height:260px
    }
}
/* Preserve positional transforms while mascots breathe. */
.agent-scene img {
    animation:agentBreath 4.6s ease-in-out infinite
}
@keyframes agentBreath {
    0%,100% {
        transform:translateX(-50%) translateY(0)
    }

    50% {
        transform:translateX(-50%) translateY(-8px)
    }

}
@media(max-width:820px) {
    .builder-scene img {
        animation:builderBreathMobile 4.2s ease-in-out infinite
    }

}
@keyframes builderBreathMobile {
    0%,100% {
        transform:translateX(-50%) translateY(0)
    }

    50% {
        transform:translateX(-50%) translateY(-7px)
    }

}

/* =========================================================
   MASCOT SIZE OVERRIDE
   +20 % gegenüber der zuletzt angepassten Version.
   Hero-Coder zusätzlich höher positioniert, damit er nicht
   vom nachfolgenden Bereich überdeckt wird.
   ========================================================= */

/* HERO / mascot-coder-clean */
.hero-coder {
    left: 29%;
    bottom: -82px;
    width: min(55.2%, 624px);
    height: 744px;
    z-index: 6;
}

.hero-coder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    filter: none;
}


/* LEVEL 04 – KI & AUTOMATISIERUNG */
.agent-scene {
    min-height: 520px;
}

.agent-scene img {
    bottom: -96px;
    width: min(69.6%, 552px);
    height: 576px;
}


/* LEVEL 06 – INDIVIDUELLE SOFTWARE */
.builder-scene {
    min-height: 430px;
}

.builder-scene img {
    left: -18px;
    bottom: -82px;
    width: 396px;
    height: 480px;
}


/* LEVEL 09 – MARKETING */
.marketing-scene {
    min-height: 420px;
}

.marketing-scene img {
    left: -6%;
    bottom: -18px;
    width: min(78%, 504px);
    height: 486px;
}


/* FINAL LEVEL */
.final-scene {
    min-height: 400px;
}

.final-scene img {
    left: 10%;
    bottom: -68px;
    width: min(62.4%, 480px);
    height: 492px;
}


/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 820px) {

    .hero-coder {
        left: 44%;
        bottom: -42px;
        width: 67.2%;
        height: 516px;
        z-index: 6;
    }

    .agent-scene {
        min-height: 485px;
    }

    .agent-scene img {
        bottom: -60px;
        width: 69.6%;
        height: 444px;
    }

    .builder-scene {
        min-height: 450px;
    }

    .builder-scene img {
        left: 50%;
        bottom: -46px;
        width: 318px;
        height: 360px;
        transform: translateX(-50%);
    }

    .marketing-scene {
        min-height: 370px;
    }

    .marketing-scene img {
        left: -2%;
        bottom: -8px;
        width: 72%;
        height: 384px;
    }

    .final-scene {
        min-height: 355px;
    }

    .final-scene img {
        left: 23%;
        bottom: -44px;
        width: 62.4%;
        height: 378px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 560px) {

    .hero-coder {
        left: 45%;
        bottom: -22px;
        width: 74.4%;
        height: 402px;
        z-index: 6;
    }

    .agent-scene {
        min-height: 410px;
    }

    .agent-scene img {
        bottom: -38px;
        width: 76.8%;
        height: 348px;
    }

    .builder-scene {
        min-height: 410px;
    }

    .builder-scene img {
        bottom: -32px;
        width: 270px;
        height: 306px;
    }

    .marketing-scene {
        min-height: 350px;
    }

    .marketing-scene img {
        left: -7%;
        width: 76.8%;
        height: 324px;
    }

    .final-scene {
        min-height: 320px;
    }

    .final-scene img {
        left: 17%;
        bottom: -32px;
        width: 72%;
        height: 312px;
    }
}

/* =========================================================
   FINAL MASCOT ADJUSTMENT
   - Alle Maskottchen 10 % kleiner
   - Hero / mascot-coder-clean deutlich höher
   ========================================================= */

/* HERO / mascot-coder-clean */
.hero-coder {
    left: 30%;
    bottom: 160px;
    width: min(49.7%, 562px);
    height: 670px;
    z-index: 8;
}

.hero-coder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    filter: none;
}

/* LEVEL 04 – KI & AUTOMATISIERUNG */
.agent-scene img {
    width: min(62.6%, 497px);
    height: 518px;
}

/* LEVEL 06 – INDIVIDUELLE SOFTWARE */
.builder-scene img {
    width: 356px;
    height: 432px;
}

/* LEVEL 09 – MARKETING */
.marketing-scene img {
    width: min(70.2%, 454px);
    height: 437px;
}

/* FINAL LEVEL */
.final-scene img {
    width: min(56.2%, 432px);
    height: 443px;
}


/* TABLET */
@media (max-width: 820px) {

    .hero-coder {
        left: 45%;
        bottom: 30px;
        width: 60.5%;
        height: 464px;
        z-index: 8;
    }

    .agent-scene img {
        width: 62.6%;
        height: 400px;
    }

    .builder-scene img {
        width: 286px;
        height: 324px;
    }

    .marketing-scene img {
        width: 64.8%;
        height: 346px;
    }

    .final-scene img {
        width: 56.2%;
        height: 340px;
    }
}


/* MOBILE */
@media (max-width: 560px) {

    .hero-coder {
        left: 46%;
        bottom: 120px;
        width: 67%;
        height: 362px;
        z-index: 8;
    }

    .agent-scene img {
        width: 69.1%;
        height: 300px;
    }

    .builder-scene img {
        width: 243px;
        height: 275px;
    }

    .marketing-scene img {
        width: 69.1%;
        height: 292px;
    }

    .final-scene img {
        width: 64.8%;
        height: 281px;
    }
}