*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --lime: #C8FF00; --black: #000; --white: #fff; --dark-bg: #1A1A1A;
    --card-dark: #2A2A2A; --beige: #F0EBDF; --muted: #999; --peach: #FDDCB5;
    --green-badge: #4ADE80; --pink-badge: #F472B6; --teal-badge: #2DD4BF; --orange-badge: #FB923C;
}
a:hover {color: #000; text-decoration: none; outline: none;}
body { font-family: "Overused-medium"; background: var(--black); color: #fff; overflow-x: hidden; }
p {font-family: "Overused-regular"; font-size: 18px; font-weight: 400; color: #fff;}
.section-title{text-align: center; font-family: "Radwave"; font-size: 52px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;}
section .header {margin-bottom: 60px;}
.btn-trial { display: inline-block; background: var(--lime); color: var(--black); padding: 10px 24px; border-radius: 50px; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: transform 0.2s; }
.btn-trial:hover { transform: translateY(-1px);}

.hero { position: relative; top: -90px; height: 800px; overflow: hidden; border-radius: 15px; margin: 0 15px;}
.hero-bg { position: absolute; inset: 0; background: url('images/hero.webp'); background-size: cover; background-position: top; background-repeat: no-repeat;}
.hero-overlay {position: absolute; inset: 0;
    background: 
        linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 60%),
        linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, transparent 40%); 
}
.hero-content { position: absolute; z-index: 10; max-width: 800px; padding: 0px 70px 150px; bottom: 0px; }
.hero-content h1 { font-size: 68px; font-weight: 500; line-height: 64px; letter-spacing: -0.02em; color: #fff; margin-bottom: 25px;}
.hero-content p { max-width: 400px; margin-bottom: 30px; color: #fff;}


.inventory-visibility-section {
    background: linear-gradient(to bottom, #F9F7ED 0%, #ffffff 100%);
    padding: 85px 0px 100px;
    color: #000000;
    border-radius: 40px;
    margin-top: -75px;
}
.inventory-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
}
.inventory-header h2 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}
.inventory-header p {
    font-size: 20px;
    line-height: 1.1;
    color: #000;
}
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.inv-card {
    background-color: #F9F7ED; 
    border: 1px solid rgba(0, 0, 0, 0.65);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.inv-card-image-wrap {
    width: 100%;
    height: 260px; 
    overflow: hidden;
}
.inv-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}
.inv-card-label {
    padding: 24px 20px;
    text-align: center;
    background-color: #F9F7ED;
}
.inv-card-label h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}


.warehouse-visibility-section {
    background: linear-gradient(to right, #555C49 0%, #000 100%);
    padding: 100px 75px;
    color: #ffffff;
    overflow: hidden;
}
.stock-transfer-section {
    background: linear-gradient(to right, #000 0%, #606060 100%);
    padding: 100px 75px;
    color: #ffffff;
    overflow: hidden;
}
.data-buy-section {
    background: linear-gradient(to right, #323A41 0%, #000 100%);
    padding: 100px 75px;
    color: #ffffff;
    overflow: hidden;
}
.split-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}
.text-block {
    flex: 1;
    max-width: 540px;
}
.text-block h2 {
    font-family: 'Radwave';
    font-size: 42px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #ffffff;
}
.text-block p {
    font-size: 16px;
    line-height: 1.2;
    color: #E5E5E5;
    margin-bottom: 20px;
}
.text-block p:last-of-type {
    margin-bottom: 35px;
}
.image-block {
    flex: 0.5;
    display: flex;
    justify-content: center;
}
.image-frame {
    width: 100%;
    border-radius: 16px; 
    overflow: hidden;
}
.image-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}



.architecture-section {
    background-color: #000000; 
    padding: 100px 0;
    color: #ffffff;
}
.architecture-matrix {
    max-width: 1000px;
    margin: 0 auto;
}
.architecture-header {
    text-align: center;
    margin-bottom: 70px;
}
.architecture-header h2 {
    font-family: 'Radwave';
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -5px;
}
.architecture-header p {
    font-size: 18px;
    color: #D1D1D1; 
    font-weight: 400;
}
.architecture-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
    margin-top: 200px;
}
.matrix-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
}
.arch-card {
    border-radius: 16px;
    padding: 50px 30px;
    text-align: center;
    background: linear-gradient(to bottom, #152828 0%, #000000 100%);
    position: relative;
}
.arch-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 16px;
    background: linear-gradient(180deg, #D8F95F, #000000);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.arch-card h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
}
.sub-direction {
    font-family: 'Overused-regular';
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    color: #D8F95F; 
    margin-bottom: 20px;
}
.arch-card p {
    font-size: 14px;
    line-height: 1.2;
    color: #fff;
}
.stacked-column {
    margin-top: -250px;
}




@media (max-width: 768px) {
    .btn-trial {padding: 12px 24px;}
    .section-title {font-size: 26px; margin-bottom: 30px;}
    .hero {top: 0px; height: 100vh; position: relative;}
    .hero-bg { background: url('images/hero-mb.webp'); background-size: cover; background-position: center; background-repeat: no-repeat;}
    .hero-content { position: absolute; padding: 0px 20px; bottom: 150px; }
    .hero-content h1 { font-size: 36px; margin-top: 0px; margin-bottom: 20px; line-height: 34px;}
    .hero-content p { font-size: 12px; }
    .inventory-visibility-section { padding: 50px 15px; margin-top: 0px; background: linear-gradient(to bottom, #FBFFEA 0%, #ffffff 100%);}
    .inventory-header h2 {font-size: 26px; line-height: 26px; letter-spacing: 0;}
    .inventory-header p {font-size: 14px; line-height: 16px; max-width: 350px; margin: 0 auto;}
    .inventory-grid {grid-template-columns: 1fr; }
    .inv-card-image-wrap {height: 220px; }
    .inventory-header {margin-bottom: 40px; }
    .split-wrapper {display: flex; flex-direction: column; gap: 40px;}
    .image-block {order: 1;}
    .text-block {order: 2;}
    .warehouse-visibility-section {padding: 50px 15px; }
    .stock-transfer-section {padding: 50px 15px; }
    .data-buy-section {padding: 50px 15px; }
    .text-block h2 {font-size: 26px; line-height: 28px; margin-bottom: 20px; max-width: 350px;}
    .text-block p {font-size: 14px; line-height: 16px; margin-bottom: 15px;}
    .text-block p:last-of-type {margin-bottom: 20px;}
    .architecture-section {padding: 50px 15px;}
    .architecture-matrix {grid-template-columns: 1fr; gap: 0px; max-width: 350px; margin: 0 auto; }
    .architecture-header {margin-bottom: 40px; }
    .architecture-header h2 {font-size: 26px; line-height:26px; max-width: 250px; margin: 0 auto; letter-spacing: -2px; margin-bottom: 20px;}
    .stacked-column {margin-top: 0px;}
    .matrix-column {gap: 0px; }
    .arch-card, .arch-card::before {border-radius: 40px;}
}