/* ----------------------------------------------------------------
    [ Homepage ]
-----------------------------------------------------------------*/
/* .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 24px;
    border-radius: 14px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: .84rem;
    letter-spacing: .04em;
    transition: opacity 0.3s ease;
    cursor: pointer;
}
.btn:hover {
    opacity: .8;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    color: white;
    box-shadow: 0 12px 28px rgba(36, 104, 223, .25)
}

.btn-outline {
    border: 1px solid #88A7D8;
    color: #174EA6;
    background: #fff
} */


/* ----------------------------------------------------------------
    [ Hero ]
-----------------------------------------------------------------*/
.hero {
    background: linear-gradient(120deg, #fff 0%, #f7faff 46%, #dceaff 100%);
    overflow: hidden;
    position: relative;
    padding:  0;
}

.hero:after {
    content: "";
    position: absolute;
    width: 610px;
    height: 610px;
    border: 82px solid rgba(35, 101, 205, .15);
    border-left-color: rgba(35, 101, 205, .38);
    border-radius: 50%;
    right: -210px;
    top: 70px;
    transform: rotate(-18deg)
}

.hero-grid {
    min-height: 790px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: 34px;
    position: relative;
    z-index: 2
}

.hero h1 {
    font-size: clamp(3.6rem, 6.1vw, 6.3rem);
    line-height: .91;
    letter-spacing: -.068em;
    margin: 18px 0 18px;
    max-width: 700px
}

.hero h1 span {
    color: var(--primary);
    font-family: var(--font-serif);
}
.hero-sub {
    max-width: 610px;
    color: #52617B;
    font-size: 1.08rem;
    line-height: 1.68;
    margin-bottom: 24px
}
.hero-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 26px 0 26px;
    max-width: 730px
}
.hero-card {
    padding: 16px 15px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(139, 165, 205, .46);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 28px rgba(7, 27, 73, .08);
    min-height: 128px
}
.hero-card .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 7px
}
.hero-card .dot.n {
    background: #0C2D67
}

.hero-card .dot.w {
    background: white;
    border: 1px solid #AAB6C7
}

.hero-card .dot.b {
    background: #090B10
}
.hero-card strong {
    display: block;
    font-size: .88rem;
    margin: 7px 0 5px;
    color: var(--heading);
}
.hero-card b {
    display: block;
    font-size: .76rem;
    letter-spacing: .06em;
    margin-bottom: 4px
}
.hero-card span {
    font-size: .74rem;
    color: #68758C;
    line-height: 1.35;
    display: block
}
.hero-card img{
    display: none;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.hero-visual {
    height: 680px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center
}
.podium {
    position: absolute;
    bottom: 43px;
    left: 5%;
    right: -8%;
    height: 104px;
    background: linear-gradient(145deg, #fff, #e9f0fa);
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 24%);
    box-shadow: 0 25px 50px rgba(7, 27, 73, .16)
}
.pens {
    /* width: 450px; */
    /* height: 525px; */
    position: relative;
    z-index: 3;
}
.pens img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    transform: scale(1.3) translateX(15%) translateY(-8%);   
}

@media screen and (max-width: 992px) {
    .hero-grid{
        grid-template-columns: 1fr;
        padding-top: 52px;
    }
    .hero-visual {
        height: initial;
    }
    .hero-grid > div:first-child{
        position: relative;
        z-index: 4;
    }
    .hero-card {
        position: relative;
    }
    .pens img{
        transform: none;
    }
}


@media screen and (max-width: 620px) {
    .hero h1 {
        font-size: 3.55rem
    }
    .hero-products {
        grid-template-columns: 1fr
    }

    .hero-actions .btn {
        width: 100%
    }

    .hero-visual {
        height: 470px
    }
    .hero-card span{
        max-width: 200px;
    }
    .hero-card img{
        display: inline-block;
        width: 64px;
        height: 64px;
        object-fit: contain;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: scale(1) translateX(0) translateY(-50%);
        border-radius: 12px;
        border: 1px solid #E9F0FA;
    }
    .hero-products{
        max-width: none;
    }
}

@media screen and (max-width: 480px) {
    .hero-card img {
        left: 16px;
        top: 16px;
        transform: none;
    }
    .hero-card .dot{
        display: none;
    }
    .hero-card strong{
        margin-top: 82px;
    }
    .hero-card span{
        max-width: 100%;
    }
}

/* ----------------------------------------------------------------
    [ Trust ]
-----------------------------------------------------------------*/
.trust {
    padding-top: 0;
    padding-bottom: 0;
    border-block: 1px solid var(--border);
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.trust-item {
    padding: 28px 18px;
    text-align: center;
    border-right: 1px solid var(--border);
}
.trust-item:last-child {
    border-right: 0;
}
.trust-item strong {
    display: block;
    font-size: .82rem;
    text-transform: uppercase;
    margin-top: 8px;
    color: var(--heading);
}
.trust-item span {
    display: block;
    color: var(--body);
    font-size: .8rem;
    margin-top: 6px;
}

@media screen and (max-width: 992px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .trust-item:nth-child(2) {
        border-right: 0
    }
}

@media screen and (max-width: 480px) {
    .trust-grid{
        grid-template-columns: 1fr;
    }
    .trust-item {
        padding: 24px 10px
        border: none;
    }
}

/* ----------------------------------------------------------------
    [ Products ]
-----------------------------------------------------------------*/
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.product-card {
    border-radius: 26px;
    padding: 22px;
    border: 1px solid #DDE6F2;
    min-height: 465px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 42px rgba(7, 27, 73, .08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 58px rgba(7, 27, 73, .16);
}
.product-card.dark {
    background: linear-gradient(155deg, #071B49, #124C9F);
    color: white;
    border: 0
}

.product-card.black {
    background: linear-gradient(155deg, #090B10, #252A31);
    color: white;
    border: 0
}
.product-card .badge {
    align-self: flex-start;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    position: absolute;
    top: 16px;
    right: 16px;
    background: #060E2A;
    color: rgba(255, 255, 255, 0.7);
    z-index: 2;
    max-width: 160px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.product-pen {
    height: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 22px;
    position: relative;
}
.product-pen img{
    border-radius: 12px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    /* transform: scale(1.3); */
}
.product-card h3 {
    margin-bottom: 8px;
}
.product-card .code {
    font-size: 12px;
    line-height: 1.55;
    color: var(--body);
    margin-bottom: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;

}
.product-card p {
    font-size: 15.5px;
    margin: 0 0 20px;
}

.product-link {
    margin-top: auto;
    border-top: 1px solid rgba(120, 140, 170, .28);
    padding-top: 18px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-grid .product-card:nth-child(1),
    .product-grid .product-card:nth-child(2) {
        grid-column: span 2;
    }

    .product-grid .product-card:nth-child(3){
        grid-column: 2 / span 2;
    }
}
@media screen and (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .product-grid .product-card:nth-child(1),
    .product-grid .product-card:nth-child(2) {
        grid-column: span 3;
    }

    .product-grid .product-card:nth-child(3){
        grid-column: 1 / span 3;
    }
}

/* ----------------------------------------------------------------
    [ Included ]
-----------------------------------------------------------------*/
.included {
    background: linear-gradient(180deg, #F5F8FC 0%, #EEF4FB 100%)
}
.included-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 40px;
    align-items: center
}
.included-visual {
    /* min-height: 620px; */
    /* border-radius: 30px; */
    /* background: radial-gradient(circle at 45% 28%, #fff, #dce8f6); */
    position: relative;
    /* overflow: hidden; */
    /* box-shadow: var(--shadow); */
}

.case-stage {
    position: relative;
    border-radius: 30px;
    background: radial-gradient(circle at 45% 28%, #fff, #dce8f6);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.case-stage img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    /* transform: scale(1.1); */
}
.included h2 {
    margin: 10px 0 18px;
}

.included-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 26px 0
}

.included-card {
    padding: 18px;
    border-radius: 16px;
    background: white;
    border: 1px solid #DDE6F2;
    min-height: 150px
}

.included-card strong {
    display: block;
    margin: 12px 0 7px
}

.included-card span {
    color: #60708A;
    font-size: .9rem;
    line-height: 1.5
}

.note {
    font-size: .88rem;
    padding: 15px;
    border-radius: 14px;
    background: #E8F1FF;
    color: #174EA6;
    line-height: 1.5
}

@media screen and (max-width: 992px) {
    .included-grid {
        grid-template-columns: 1fr
    }
    .included-visual .case-stage img{
        width: 100%;
    }
}

@media screen and (max-width: 620px) {
    .included-cards {
        grid-template-columns: 1fr
    }

    .included-visual {
        min-height: 500px
    }
}

/* ----------------------------------------------------------------
    [ Why ]
-----------------------------------------------------------------*/
.why {
    background: #fff
}

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

.why-card {
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--card-bg);
    min-height: 230px;
    box-shadow: var(--shadow);
}

.why-card .icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #EAF2FF;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    margin-bottom: 18px
}

.why-card h3 {
    margin: 0 0 10px;
    font-size: 1.08rem
}

.why-card p {
    margin: 0;
    color: #60708A;
    line-height: 1.65;
    font-size: .92rem
}

@media screen and (max-width: 992px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media screen and (max-width: 620px) {
    .why-grid{
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------
    [ Verification ]
-----------------------------------------------------------------*/
.verify {
    background: linear-gradient(135deg, #071B49 0%, #0B3274 60%, #164E9E 100%);
    color: white;
    /* overflow must stay visible — overflow:hidden breaks position:sticky */
    position: relative;
    overflow-x: hidden;
}

.verify:after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 70px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    right: -120px;
    top: -70px;
    pointer-events: none;
    z-index: 0
}

.verify-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 44px;
    align-items: start;
    position: relative;
    z-index: 2
}

.verify-copy {
    position: sticky;
    top: 96px; /* sticky header (~76px) + breathing room */
    align-self: start
}

@media (max-width: 950px) {
    .verify-copy {
        position: static;
        top: auto
    }
}

.verify h2 {
    color: #fff;
    margin: 10px 0 18px
}

.verify p {
    color: #D8E5FA;
    line-height: 1.7
}

.verify-panel {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
    border-radius: 26px;
    padding: 22px
}

.verify-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.verify-item {
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12)
}

.verify-item strong {
    display: block;
    margin-bottom: 6px
}

.verify-item span {
    font-size: .85rem;
    color: #DCE8FA;
    line-height: 1.45
}

.verification-dashboard {
    display: grid;
    grid-template-columns: repeat(1fr);
    gap: 16px;
    margin-top: 18px
}

.verification-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 20px;
    background: white;
    color: #12213B;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .15);
    border: 1px solid rgba(255, 255, 255, .22)
}

.verification-card:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px
}

.verification-card.evolution:before {
    background: #123B7C
}

.verification-card.core:before {
    background: #D9DEE7
}

.verification-card.perform:before {
    background: #0B0D12
}

.verification-card .card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start
}

.verification-card .product-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: .8rem;
    letter-spacing: .04em
}

.verification-card.evolution .product-mark {
    background: #E7EFFC;
    color: #123B7C
}

.verification-card.core .product-mark {
    background: #F3F5F8;
    color: #596274;
    border: 1px solid #D9DEE7
}

.verification-card.perform .product-mark {
    background: #12161D;
    color: white
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #E8F7EF;
    color: #18754A;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em
}
.verified-badge.report-coming-soon{
    background: #FFF4E5;
    border: 1px solid #F0D4A8;
    color: #8A5A12;
}

.verification-card h3 {
    margin: 18px 0 5px;
    font-size: 1.1rem
}

.verification-card .product-code {
    color: #66748B;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase
}

.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0
}

.metric-box {
    padding: 13px;
    border-radius: 14px;
    background: #F4F7FB;
    border: 1px solid #E4EAF2
}

.metric-box span {
    display: block;
    color: #748198;
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 850;
    letter-spacing: .06em;
    margin-bottom: 5px
}

.metric-box strong {
    font-size: 1rem
}

.view-report {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid #E7ECF3;
    font-weight: 700;
    color: #174EA6
}

.view-report span:last-child {
    font-size: 1.15rem
}

@media screen and (max-width:992px) {
    .verify-grid {
        grid-template-columns: 1fr;
    }
    .verify-copy {
        position: static;
        top: auto
    }
    .verify-panel {
        margin-top: 24px;
    }
}

@media screen and (max-width:620px) {
    .verify-list{
        grid-template-columns: 1fr;
    }
    .metric-grid{
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------
    [ Assistant ]
-----------------------------------------------------------------*/
.assistant {
    background: #F6F9FD;
    overflow-x: hidden;
}

.assistant-wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 36px;
    align-items: center
}

.assistant-copy h2 {
    margin: 10px 0 18px
}
.assistant-copy h3 {
    margin-bottom: 12px;
}

.assistant-copy p + p{
    margin-top: 10px;
}
.assistant-copy p strong {
    color: var(--heading);
}

.chat-card {
    border: 1px solid var(--line);
    background: white;
    border-radius: 26px;
    padding: 20px;
    box-shadow: var(--shadow)
}

.chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.chat-head strong{
    color: var(--heading);
}

.chat-status {
    font-size: .75rem;
    font-weight: 800;
    color: #1D7A4A;
    background: #E7F7EF;
    padding: 7px 10px;
    border-radius: 999px
}

.bubble {
    max-width: 85%;
    padding: 13px 15px;
    border-radius: 16px;
    margin-top: 14px;
    line-height: 1.5;
    font-size: .92rem
}

.bubble.user {
    margin-left: auto;
    background: #0E58B7;
    color: white;
    border-bottom-right-radius: 5px
}

.bubble.bot {
    background: #EEF3F9;
    color: #20324F;
    border-bottom-left-radius: 5px
}

@media screen and (max-width: 992px) {
    .assistant-wrap{
        grid-template-columns: 1fr;
    }
    .assistant-copy{
        order: 2;
    }
    .chat-card{
        order: 1;
    }
}

/* ----------------------------------------------------------------
    [ Shipping ]
-----------------------------------------------------------------*/
.shipping {
    background: #fff;
}

.shipping-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden
}

.shipping-item {
    padding: 28px;
    text-align: center;
    border-right: 1px solid var(--border);
}

.shipping-item:last-child {
    border-right: 0
}

.shipping-item .icon {
    font-size: 1.5rem;
    margin-bottom: 10px
}

.shipping-item strong {
    display: block;
    margin-bottom: 6px;
    color: var(--heading);
}

.shipping-item span {
    color: var(--color-nonary-5);
    font-size: .88rem;
    line-height: 1.45
}

.shipping-note {
    text-align: center;
    margin-top: 30px;
    font-size: 14.5px;
    font-style: italic;
    color: var(--body);
    margin-top: 16px;
}

@media screen and (max-width: 620px) {
    .shipping-row{
        grid-template-columns: 1fr;
    }
    .shipping-item:not(:last-child){
        border-bottom: 1px solid var(--color-quaternary-10);
    }
}

/* ----------------------------------------------------------------
    [ FAQ ]
-----------------------------------------------------------------*/
section.alt.faq {
    background-color: #F7F9FC;
}
.faq-item {
    background: var(--card-bg);
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.faq-q {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 22px 26px;
    font-weight: 700;
    color: var(--heading);
    font-size: 16.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 100%;
}
.faq-q span {
    color: var(--color-secondary);
}
.faq-q .faq-q__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--color-undenary);
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.faq-q .faq-q__icon-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    stroke-width: 2px;
}
.faq-q .faq-q__icon-svg.plus {
    opacity: 1;
    visibility: visible;
}
.faq-q .faq-q__icon-svg.minus {
    opacity: 0;
    visibility: hidden;
}

.faq-item.open .faq-q__icon-svg.plus {
    opacity: 0;
    visibility: hidden;
}
.faq-item.open .faq-q__icon-svg.minus {
    opacity: 1;
    visibility: visible;
}

/* Collapse / uncollapse driven by JS (Geekfolio slide) — do not force display via .open */
.faq-a {
    display: none;
    padding: 0 26px 24px;
    color: var(--body);
    font-size: 15.5px;
    line-height: 1.65;
}