/* ============================================================
   NRN DIGITAL
   MAIN STYLE
   ============================================================ */

:root{

    --navy:#071a33;
    --navy-light:#0d2c52;
    --navy-soft:#123d6a;

    --orange:#f28c18;
    --gold:#f5ad32;

    --white:#ffffff;

    --bg:#f5f7fa;
    --bg-soft:#f8fafc;

    --text:#172033;
    --muted:#687386;

    --border:#e3e8ef;

    --shadow:
        0 18px 50px rgba(7,26,51,.10);

    --radius:18px;

    --container:1200px;
}


/* ============================================================
   RESET
   ============================================================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        "Noto Sans Thai",
        Arial,
        sans-serif;

    color:var(--text);
    background:#fff;
    line-height:1.7;

    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
textarea,
select{
    font:inherit;
}


/* ============================================================
   GENERAL
   ============================================================ */

.container{
    width:min(
        calc(100% - 40px),
        var(--container)
    );

    margin:auto;
}

.section{
    padding:100px 0;
}

.section-soft{
    background:var(--bg-soft);
}

.section-dark{
    background:var(--navy);
    color:white;
}

.section-heading{
    max-width:760px;
    margin-bottom:50px;
}

.section-heading.center{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;

    color:var(--orange);

    font-size:13px;
    font-weight:800;

    letter-spacing:1.6px;
    text-transform:uppercase;

    margin-bottom:15px;
}

.eyebrow::before{
    content:"";

    width:25px;
    height:3px;

    background:var(--orange);

    border-radius:20px;
}

.section-heading.center .eyebrow::before{
    display:none;
}

.section-heading h2{
    color:var(--navy);

    font-size:clamp(
        30px,
        4vw,
        46px
    );

    line-height:1.2;

    margin-bottom:18px;
}

.section-heading p{
    color:var(--muted);
    font-size:17px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
    min-height:50px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    padding:0 25px;

    border-radius:8px;

    font-size:14px;
    font-weight:700;

    transition:.25s ease;

    border:1px solid transparent;
}

.btn-primary{
    background:linear-gradient(
        135deg,
        var(--orange),
        var(--gold)
    );

    color:#fff;

    box-shadow:
        0 10px 28px rgba(242,140,24,.25);
}

.btn-primary:hover{
    transform:translateY(-2px);

    box-shadow:
        0 15px 35px rgba(242,140,24,.35);
}

.btn-outline{
    color:#fff;

    border-color:
        rgba(255,255,255,.35);

    background:
        rgba(255,255,255,.05);
}

.btn-outline:hover{
    background:#fff;
    color:var(--navy);
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header{
    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:1000;

    height:82px;

    background:
        rgba(7,26,51,.94);

    backdrop-filter:
        blur(14px);

    transition:.25s ease;
}

.site-header.scrolled{
    height:70px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.15);
}

.nav-container{
    width:min(
        calc(100% - 40px),
        1280px
    );

    height:100%;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand{
    display:flex;
    align-items:center;
    gap:12px;

    color:#fff;
}

.brand-mark{
    display:flex;
    align-items:center;

    font-size:27px;
    font-weight:800;

    letter-spacing:-3px;
}

.brand-n,
.brand-n2{
    color:#fff;
}

.brand-r{
    color:var(--orange);
}

.brand-text{
    display:flex;
    flex-direction:column;

    line-height:1.15;
}

.brand-text strong{
    font-size:16px;
    letter-spacing:1.2px;
}

.brand-text span{
    margin-top:4px;

    font-size:8px;

    letter-spacing:1.5px;

    color:
        rgba(255,255,255,.58);
}

.brand-logo-img{
    display:block;
    width:48px;
    height:auto;
}

.brand-text strong .brand-title-r{
    display:inline;
    color:var(--orange);
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
    letter-spacing:inherit;
}

.brand-text strong{
    font-size:18px;
    letter-spacing:1.45px;
    line-height:1;
    white-space:nowrap;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.main-nav{
    display:flex;
    align-items:center;
    gap:5px;
}

.main-nav > a{
    position:relative;

    padding:10px 11px;

    color:
        rgba(255,255,255,.80);

    font-size:13px;
    font-weight:600;

    transition:
        color .2s ease,
        transform .2s ease,
        background-color .2s ease;
}

.main-nav > a:not(.nav-contact):hover{
    color:#fff;
    transform:translateY(-1px);
}

.main-nav > a:hover,
.main-nav > a.active{
    color:#fff;
}

.main-nav > a:not(.nav-contact)::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:2px;

    width:0;
    height:2px;

    background:var(--orange);

    transform:translateX(-50%);

    transition:.25s;
}

.main-nav > a:hover::after,
.main-nav > a.active::after{
    width:22px;
}

.main-nav .nav-contact{
    margin-left:8px;

    padding:
        10px 18px;

    border-radius:7px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--gold)
        );
}

.main-nav .nav-contact{
    box-shadow:
        0 6px 18px rgba(242,140,24,.16);
}

.main-nav .nav-contact:hover{
    color:#fff;

    transform:translateY(-1px);

    box-shadow:
        0 9px 24px rgba(242,140,24,.28);
}

.main-nav .nav-contact.active{
    box-shadow:
        0 0 0 2px rgba(255,255,255,.18),
        0 9px 24px rgba(242,140,24,.28);
}

.main-nav > a:focus-visible,
.language-switch a:focus-visible,
.brand:focus-visible,
.mobile-menu-btn:focus-visible{
    outline:
        2px solid var(--orange);

    outline-offset:4px;
}

/* ============================================================
   LANGUAGE SWITCH
   ============================================================ */

.language-switch{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:5px;

    margin-left:8px;
    margin-right:5px;

    padding:
        5px 9px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:6px;

    font-size:10px;
    font-weight:700;

    color:
        rgba(255,255,255,.35);
}

.language-switch a{
    color:
        rgba(255,255,255,.48);

    transition:.2s;
}

.language-switch a:hover{
    color:#fff;
}

.language-switch a.active{
    color:var(--orange);
}

/* ============================================================
   MOBILE BUTTON
   ============================================================ */

.mobile-menu-btn{
    display:none;

    width:42px;
    height:42px;

    border:0;

    background:transparent;

    cursor:pointer;
}

.mobile-menu-btn span{
    display:block;

    width:25px;
    height:2px;

    margin:6px auto;

    background:#fff;

    transition:.25s;
}

.mobile-menu-btn.open span:nth-child(1){
    transform:
        translateY(8px)
        rotate(45deg);
}

.mobile-menu-btn.open span:nth-child(2){
    opacity:0;
}

.mobile-menu-btn.open span:nth-child(3){
    transform:
        translateY(-8px)
        rotate(-45deg);
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
    position:relative;

    min-height:760px;

display:flex;
align-items:flex-start;

    overflow:hidden;

background:
    radial-gradient(
        circle at 75% 40%,
        rgba(25,85,145,.45),
        transparent 34%
    ),
    radial-gradient(
        circle at 10% 90%,
        rgba(242,140,24,.16),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        rgba(5,19,38,.84) 0%,
        rgba(7,29,57,.78) 50%,
        rgba(11,49,88,.72) 100%
    );

color:#fff;

padding-top:82px;
}

/* ============================================================
   HERO BACKGROUND SLIDER
   ============================================================ */

.hero-bg-slider{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}

.hero-bg-slide{
    position:absolute;
    inset:0;

    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;

    opacity:0;

    transform:scale(1.02);

    transition:
        opacity 1.4s ease,
        transform 7s ease;
}

.hero-bg-slide.active{
    opacity:1;
    transform:scale(1.06);
}

.hero-bg-slider::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:2;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(24,85,145,.45),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(242,140,24,.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(5,19,38,.84) 0%,
            rgba(7,29,57,.78) 50%,
            rgba(11,49,88,.72) 100%
        );

    pointer-events:none;
}

.hero::before{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-180px;
    top:80px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:50%;
}

.hero::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-90px;
    top:170px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:50%;
}

.hero-grid{
    position:relative;
    z-index:5;

    display:grid;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(380px,.88fr);

    align-items:start;

    gap:70px;
}

.hero-content{
    padding-top:0;
}

.tech-visual{
    align-self:start;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:23px;

    padding:
        8px 14px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:100px;

background:
    rgba(255,255,255,.05);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);

font-size:12px;

    color:
        rgba(255,255,255,.82);
}

.hero-badge span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(242,140,24,.12);
}

.hero h1{
    max-width:850px;

    font-size:clamp(
        44px,
        6vw,
        74px
    );

    line-height:1.18;

    letter-spacing:-1.5px;

    margin-bottom:25px;

    /* สำคัญสำหรับภาษาไทย */
    overflow:visible;
}

.hero h1 .accent{
    display:block;

    line-height:1.25;

    padding-top:.08em;
    padding-bottom:.10em;

    background:
        linear-gradient(
            90deg,
            #f18a17,
            #ffc15d
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
    color:transparent;

    overflow:visible;
}

.hero-description{
    max-width:700px;

    color:
        rgba(255,255,255,.70);

    font-size:18px;

    margin-bottom:33px;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.hero-mini{
    margin-top:45px;

    display:flex;
    flex-wrap:wrap;

    gap:28px;
}

.hero-mini-item{
    display:flex;
    align-items:center;
    gap:10px;

    color:
        rgba(255,255,255,.67);

    font-size:12px;
}

.hero-mini-icon{
    width:29px;
    height:29px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:var(--orange);

    background:
        rgba(242,140,24,.10);

    font-weight:800;
}

/* ============================================================
   THAI TYPOGRAPHY
   ============================================================ */

html[lang="th"] .hero h1{
    line-height:1.22;
    letter-spacing:-1px;
}

html[lang="th"] .hero h1 .accent{
    line-height:1.30;
    padding-top:.08em;
    padding-bottom:.12em;
}


/* ============================================================
   ENGLISH TYPOGRAPHY
   ============================================================ */

html[lang="en"] .hero h1{
    line-height:1.05;
    letter-spacing:-2px;
}

html[lang="en"] .hero h1 .accent{
    line-height:1.10;
    padding-top:0;
    padding-bottom:.04em;
}

/* ============================================================
   HERO TECHNOLOGY CARD
   ============================================================ */

.tech-visual{
    position:relative;

    min-height:470px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.tech-orbit{
    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.10);
}

.tech-orbit.orbit-2{
    width:310px;
    height:310px;
}

.tech-core{
    position:relative;

    width:235px;
    height:235px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.15);

    background:
        radial-gradient(
            circle,
            rgba(25,83,137,.85),
            rgba(7,26,51,.90)
        );

box-shadow:
    0 0 80px rgba(29,108,179,.28),
    0 25px 70px rgba(0,0,0,.22),
    inset 0 0 35px rgba(255,255,255,.035);

text-align:center;

transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.tech-core::after{
    content:"";

    position:absolute;

    inset:15px;

    border-radius:50%;

    border:
        1px dashed
        rgba(255,255,255,.12);
}

.tech-core:hover{
    transform:scale(1.025);

    box-shadow:
        0 0 95px rgba(29,108,179,.34),
        0 28px 75px rgba(0,0,0,.25),
        inset 0 0 40px rgba(255,255,255,.045);
}

/* NRN LOGO INSIDE TECHNOLOGY CIRCLE */

/* ==========================================
   NRN DIGITAL - 3D ROTATING LOGO
   ========================================== */

.tech-core {
    perspective: 900px;
}

.tech-core-logo {
    position: relative;
    z-index: 3;

    display: block;
    width: 65%;
    height: 65%;
    object-fit: contain;
    flex-shrink: 0;

    transform-style: preserve-3d;
    backface-visibility: visible;

    animation: nrnRotate3D 12s linear infinite;
    animation-play-state: running;
}

/* หยุดหมุนเมื่อเมาส์อยู่บนวงกลม */
.tech-core:hover .tech-core-logo {
    animation-play-state: paused;
}

/* หมุน 3 มิติ รอบแกน Y */
@keyframes nrnRotate3D {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

/* รองรับผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
    .tech-core-logo {
        animation: none;
    }
}

.tech-core strong{
    position:relative;
    z-index:2;

    font-size:42px;

    letter-spacing:-3px;
}

.tech-core strong span{
    color:var(--orange);
}

.tech-core small{
    position:relative;
    z-index:2;

    color:
        rgba(255,255,255,.60);

    font-size:10px;

    letter-spacing:2px;
}

.floating-card{
    position:absolute;

    min-width:155px;

    padding:
        14px 17px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            rgba(15,48,84,.82),
            rgba(7,26,51,.72)
        );

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.floating-card:hover{
    transform:translateY(-4px);

    border-color:
        rgba(242,140,24,.35);

    box-shadow:
        0 20px 45px rgba(0,0,0,.25),
        0 0 24px rgba(242,140,24,.08),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.floating-card strong{
    display:block;

    color:#fff;

    font-size:14px;
}

.floating-card span{
    color:
        rgba(255,255,255,.50);

    font-size:11px;
}

.card-software{
    top:60px;
    left:0;
}

.card-cloud{
    right:0;
    top:120px;
}

.card-data{
    bottom:40px;
    left:20px;
}

.card-consult{
    bottom:25px;
    right:15px;
}


/* ============================================================
   SOLUTION CARDS
   ============================================================ */

.solutions-grid{
    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:15px;
}

.solution-card{
    position:relative;

    min-height:280px;

    padding:28px 23px 58px;

    overflow:hidden;

    border:
        1px solid var(--border);

    border-radius:var(--radius);

    background:#fff;

    transition:.3s ease;
}

.solution-card::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--gold)
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.3s;
}

.solution-card:hover{
    transform:translateY(-8px);

    border-color:
        rgba(242,140,24,.25);

    box-shadow:var(--shadow);
}

.solution-card:hover::after{
    transform:scaleX(1);
}

.solution-icon{
    width:55px;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:24px;

    border-radius:14px;

    background:#fff3e5;

    color:var(--orange);

    font-size:24px;
    font-weight:800;
}

.solution-card h3{
    color:var(--navy);

    font-size:18px;

    margin-bottom:10px;
}

.solution-card p{
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
}

.card-link{
    position:absolute;

    bottom:25px;
    left:23px;

    color:var(--orange);

    font-size:12px;
    font-weight:700;
}


/* ============================================================
   SOFTWARE
   ============================================================ */

.product-showcase{
    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:70px;

    align-items:center;
}

.software-screen{
    position:relative;

    min-height:420px;

    padding:22px;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            #071a33,
            #0d3965
        );

    box-shadow:
        0 30px 70px
        rgba(7,26,51,.22);
}

.screen-top{
    height:35px;

    display:flex;
    align-items:center;

    gap:6px;
}

.screen-top span{
    width:8px;
    height:8px;

    border-radius:50%;

    background:
        rgba(255,255,255,.30);
}

.screen-body{
    height:330px;

    padding:20px;

    border-radius:13px;

    background:#f7f9fc;
}

.screen-sidebar{
    float:left;

    width:22%;
    height:100%;

    border-radius:9px;

    background:#e9edf3;
}

.screen-content{
    margin-left:26%;
}

.fake-title{
    width:42%;
    height:17px;

    margin-bottom:22px;

    border-radius:20px;

    background:#d6dde7;
}

.fake-stat-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:10px;

    margin-bottom:18px;
}

.fake-stat{
    height:75px;

    border-radius:9px;

    background:#fff;

    border:
        1px solid #e4e9f0;
}

.fake-chart{
    height:160px;

    border-radius:9px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #edf3f8
        );

    border:
        1px solid #e4e9f0;
}

.product-content h2{
    color:var(--navy);

    font-size:clamp(
        31px,
        4vw,
        48px
    );

    line-height:1.2;

    margin-bottom:20px;
}

.product-content > p{
    color:var(--muted);

    font-size:16px;

    margin-bottom:27px;
}

.check-list{
    list-style:none;

    margin-bottom:30px;
}

.check-list li{
    position:relative;

    padding-left:30px;

    margin:10px 0;

    font-size:14px;
}

.check-list li::before{
    content:"✓";

    position:absolute;

    left:0;
    top:1px;

    width:20px;
    height:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff1df;

    color:var(--orange);

    font-size:11px;
    font-weight:800;
}


/* ============================================================
   WEBSITE PACKAGES PREVIEW
   ============================================================ */

.website-intro{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:60px;

    align-items:center;
}

.package-preview{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;
}

.package-mini{
    padding:24px 18px;

    border:
        1px solid var(--border);

    border-radius:14px;

    background:#fff;

    text-align:center;

    box-shadow:
        0 8px 30px rgba(7,26,51,.05);
}

.package-mini.featured{
    border-color:var(--orange);

    transform:translateY(-10px);
}

.package-mini small{
    color:var(--orange);

    font-weight:700;
}

.package-mini strong{
    display:block;

    margin:8px 0;

    color:var(--navy);

    font-size:18px;
}

.package-mini span{
    color:var(--muted);

    font-size:11px;
}


/* ============================================================
   HARDWARE
   ============================================================ */

.hardware-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.hardware-card{
    min-height:200px;

    padding:25px;

    border-radius:15px;

    background:#fff;

    border:
        1px solid var(--border);

    transition:.25s;
}

/* ============================================================
   HOME HARDWARE CARD IMAGES
   ============================================================ */

.hardware-card{
    display:flex;
    flex-direction:column;

    min-height:390px;

    overflow:hidden;
}

.hardware-card-image{
    width:100%;
    height:175px;

    margin:0 0 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.hardware-card-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    transition:
        transform .35s ease,
        filter .35s ease;
}

.hardware-card:hover .hardware-card-image img{
    transform:scale(1.045);
}

.hardware-card h3{
    margin-top:0;
}

.hardware-card p{
    margin-bottom:0;
}

.hardware-card:hover{
    transform:translateY(-5px);

    box-shadow:var(--shadow);
}

.hardware-number{
    color:var(--orange);

    font-size:12px;
    font-weight:800;

    margin-bottom:20px;
}

.hardware-card h3{
    color:var(--navy);

    margin-bottom:8px;

    font-size:17px;
}

.hardware-card p{
    color:var(--muted);

    font-size:13px;
}


/* ============================================================
   CONSULTING
   ============================================================ */

.consulting{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #06172d,
            #0b3158
        );

    color:#fff;
}

.consulting::after{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-150px;
    top:-170px;

    border-radius:50%;

    background:
        rgba(242,140,24,.07);
}

.consulting-grid{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:80px;

    align-items:center;
}

.consulting h2{
    font-size:clamp(
        32px,
        4vw,
        48px
    );

    line-height:1.2;

    margin-bottom:20px;
}

.consulting p{
    color:
        rgba(255,255,255,.67);

    margin-bottom:30px;
}

.consulting-services{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;
}

.consult-item{
    padding:18px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:11px;

    background:
        rgba(255,255,255,.04);
}

.consult-item strong{
    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:8px;

    font-size:15px;
    line-height:1.45;
}

.consult-icon{
    width:19px;
    height:19px;

    flex:0 0 19px;

    fill:none;
    stroke:var(--orange);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:
        transform .25s ease,
        filter .25s ease;
}

.consult-item:hover .consult-icon{
    transform:translateY(-1px) scale(1.08);

    filter:
        drop-shadow(0 0 5px rgba(242,140,24,.35));
}

.consult-item span{
    color:
        rgba(255,255,255,.62);

    font-size:13px;
    line-height:1.55;
}

/* NRN DIGITAL inline branding */

.nrn-brand-inline{
    color:#fff;
    font-weight:700;
    letter-spacing:.4px;
    white-space:nowrap;
}

.nrn-brand-inline .nrn-brand-r{
    color:var(--orange);
}

/* ============================================================
   VISION
   ============================================================ */

.vision-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:20px;
}

.vision-card{
    padding:35px;

    border-radius:18px;

    background:#fff;

    border:
        1px solid var(--border);

    transition:
        background .65s ease,
        border-color .65s ease,
        box-shadow .65s ease,
        transform .65s ease;
}


/* Card ที่กำลังทำงานอัตโนมัติ */

.vision-card.is-active{
    background:var(--navy);

    border-color:var(--navy);

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(5,25,49,.16);
}


/* Card ที่ผู้ใช้เอาเมาส์วาง */

.vision-card.is-hovered{
    background:#edf4fb;

    border-color:rgba(11,49,88,.20);

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(5,25,49,.10);
}

.vision-label{
    color:var(--orange);

    font-size:11px;
    font-weight:800;

    letter-spacing:1.4px;

    margin-bottom:17px;
}

.vision-card h3{
    font-size:23px;

    margin-bottom:13px;

    color:var(--navy);
}

.vision-card.is-active h3{
    color:#fff;
}

.vision-card p{
    color:var(--muted);

    font-size:14px;
}

.vision-card.is-active p{
    color:
        rgba(255,255,255,.72);
}

.vision-card.is-hovered h3{
    color:var(--navy);
}

.vision-card.is-hovered p{
    color:var(--muted);
}


/* ============================================================
   CTA
   ============================================================ */

.cta-section{
    padding:80px 0;

    background:#fff;
}

/* ============================================================
   CTA
   ============================================================ */

.cta-section{
    padding:70px 0;

    background:#fff;
}


.cta-box{
    position:relative;

    min-height:245px;

    overflow:hidden;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        390px
        auto;

    align-items:center;

    gap:20px;

    padding:
        42px
        48px;

    border-radius:22px;

    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(28,91,150,.32),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #071a33 0%,
            #092746 55%,
            #0c3965 100%
        );

    color:#fff;

    box-shadow:
        0 18px 45px rgba(5,25,49,.10);
}


/* วงกลมตกแต่งด้านขวา */

.cta-box::after{
    content:"";

    position:absolute;

    width:330px;
    height:330px;

    right:-120px;
    top:-120px;

    border-radius:50%;

    background:
        rgba(242,140,24,.09);

    pointer-events:none;
}


/* ============================================================
   CTA CONTENT
   ============================================================ */

.cta-content{
    position:relative;

    z-index:5;

    max-width:650px;
}

.cta-content h2{
    margin-bottom:10px;

    font-size:
        clamp(25px,2.2vw,32px);

    line-height:1.35;
}

.cta-content p{
    max-width:620px;

    margin:0;

    color:
        rgba(255,255,255,.68);

    font-size:14px;

    line-height:1.75;
}


/* ============================================================
   CTA SUPPORT STAFF
   ============================================================ */

.cta-support-visual{
    position:relative;

    align-self:stretch;

    min-height:200px;

    z-index:3;
}

.cta-support-visual::before{
    content:"";

    position:absolute;

    width:280px;
    height:280px;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(242,140,24,.14),
            rgba(30,100,170,.10) 48%,
            transparent 70%
        );
}

.cta-support-visual img{
    position:absolute;

    left:50%;
    bottom:-42px;

    width:330px;
    max-width:none;

    transform:
        translateX(-50%);

    display:block;

    z-index:2;
}


/* ============================================================
   CTA DECORATIVE ICONS
   ============================================================ */

.cta-support-icon{
    position:absolute;

    z-index:4;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px solid rgba(242,140,24,.65);

    color:#fff;

    background:
        rgba(7,26,51,.72);

    backdrop-filter:
        blur(5px);

    box-shadow:
        0 8px 22px rgba(0,0,0,.15);
}

.cta-support-phone{
    width:46px;
    height:46px;

    left:25px;
    top:25px;

    border-radius:50%;

    font-size:20px;
}

.cta-support-chat{
    width:52px;
    height:40px;

    left:4px;
    bottom:35px;

    border-radius:10px;

    color:
        rgba(255,255,255,.85);

    font-size:17px;

    letter-spacing:2px;
}


/* ============================================================
   CTA BUTTON
   ============================================================ */

.cta-action{
    position:relative;

    z-index:5;

    display:flex;

    justify-content:flex-end;
}

.cta-box .btn{
    position:relative;

    z-index:5;

    flex-shrink:0;

    white-space:nowrap;

    box-shadow:
        0 12px 30px rgba(242,140,24,.22);
}

/* ============================================================
   NRN DIGITAL
   WEBSITE SOLUTIONS
   ============================================================ */

.sub-hero{
    position:relative;
    overflow:hidden;

    padding:
        165px 0
        100px;

    color:#fff;

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(30,100,170,.35),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #051326,
            #071e3a 55%,
            #0b3158
        );
}

.sub-hero-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:70px;

    align-items:center;
}

.sub-hero-content{
    position:relative;
    z-index:5;
}

.sub-hero-content h1{
    max-width:750px;

    margin-bottom:25px;

    font-size:
        clamp(42px,5vw,65px);

    line-height:1.15;

    letter-spacing:-1.5px;
}

.sub-hero-content h1 span{
    display:block;

    padding-bottom:.08em;

    color:var(--orange);
}

html[lang="th"] .sub-hero-content h1{
    line-height:1.28;
    letter-spacing:-.8px;
}

.sub-hero-content p{
    max-width:700px;

    margin-bottom:30px;

    color:
        rgba(255,255,255,.68);

    font-size:16px;
}


/* ============================================================
   WEBSITE BROWSER VISUAL
   ============================================================ */

.browser-visual{
    position:relative;

    min-height:430px;

    display:flex;
    align-items:center;
}

.browser-window{
    width:100%;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:16px;

    background:#fff;

    box-shadow:
        0 35px 80px rgba(0,0,0,.28);

    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.browser-bar{
    height:45px;

    padding:0 15px;

    display:flex;
    align-items:center;

    gap:18px;

    background:#edf1f5;
}

.browser-dots{
    display:flex;
    gap:5px;
}

.browser-dots span{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#bbc4cf;
}

.browser-address{
    width:58%;

    padding:5px 12px;

    border-radius:5px;

    background:#fff;

    color:#9aa4b0;

    font-size:8px;
}

.browser-page{
    min-height:315px;

    padding:20px;

    background:#f8fafc;
}

.browser-nav{
    width:100%;
    height:24px;

    margin-bottom:35px;

    border-radius:5px;

    background:#e9eef4;
}

.browser-page-grid{
    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:30px;

    align-items:center;
}

.browser-line{
    height:6px;

    margin-bottom:13px;

    border-radius:10px;

    background:var(--orange);
}

.line-short{
    width:22%;
}

.browser-title-line{
    width:90%;
    height:20px;

    margin-bottom:9px;

    border-radius:5px;

    background:#102d4d;
}

.browser-title-line.small{
    width:65%;
}

.browser-text-line{
    width:95%;
    height:7px;

    margin-top:12px;

    border-radius:10px;

    background:#d8dfe7;
}

.browser-text-line.short{
    width:70%;
}

.browser-button{
    width:80px;
    height:25px;

    margin-top:23px;

    border-radius:5px;

    background:var(--orange);
}

.browser-image{
    height:190px;

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            #dce7f1,
            #9db7cf
        );
}

.website-float{
    position:absolute;

    padding:
        12px 15px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:10px;

    background:
        rgba(6,27,52,.88);

    box-shadow:
        0 15px 35px rgba(0,0,0,.20);

    backdrop-filter:blur(10px);
}

.website-float strong{
    display:block;

    font-size:11px;
}

.website-float span{
    color:
        rgba(255,255,255,.50);

    font-size:8px;
}

.float-responsive{
    left:-25px;
    bottom:45px;
}

.float-performance{
    right:-25px;
    top:40px;
}


/* ============================================================
   WEBSITE BENEFITS
   ============================================================ */

.web-benefit-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:16px;
}

.web-benefit-card{
    min-height:260px;

    padding:28px;

    border:
        1px solid var(--border);

    border-radius:16px;

    background:#fff;

    transition:.3s;
}

.web-benefit-card:hover{
    transform:
        translateY(-7px);

    box-shadow:var(--shadow);
}

.web-benefit-no{
    margin-bottom:35px;

    color:var(--orange);

    font-size:12px;
    font-weight:800;
}

.web-benefit-card h3{
    margin-bottom:12px;

    color:var(--navy);

    font-size:17px;
}

.web-benefit-card p{
    color:var(--muted);

    font-size:13px;
}


/* ============================================================
   WEBSITE PACKAGE PREVIEW
   ============================================================ */

.website-package-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.website-package-card{
    position:relative;

    min-height:315px;

    padding:30px;

    border:
        1px solid var(--border);

    border-radius:17px;

    background:#fff;

    transition:.3s;
}

.website-package-card:hover{
    transform:
        translateY(-6px);

    box-shadow:var(--shadow);
}

.website-package-card.featured{
    border:
        2px solid var(--orange);
}

.website-package-card.custom{
    color:#fff;

    border-color:transparent;

    background:
        linear-gradient(
            145deg,
            #071a33,
            #0d3b69
        );
}

.package-recommended{
    position:absolute;

    top:-12px;
    right:18px;

    padding:
        5px 12px;

    border-radius:20px;

    color:#fff;

    background:var(--orange);

    font-size:8px;
    font-weight:800;
}

.package-top{
    display:flex;

    justify-content:space-between;

    margin-bottom:30px;
}

.package-number{
    color:var(--orange);

    font-size:11px;
    font-weight:800;
}

.package-type{
    color:#9aa5b3;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;
}

.website-package-card h3{
    margin-bottom:7px;

    color:var(--navy);

    font-size:24px;
}

.website-package-card.custom h3{
    color:#fff;
}

.package-target{
    margin-bottom:20px !important;

    color:var(--orange) !important;

    font-size:11px !important;

    font-weight:700;
}

.website-package-card p{
    color:var(--muted);

    font-size:13px;
}

.website-package-card.custom p{
    color:
        rgba(255,255,255,.62);
}

.package-center-button{
    margin-top:40px;

    text-align:center;
}


/* ============================================================
   WEBSITE PROCESS
   ============================================================ */

.web-process{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        0 50px;
}

.web-process-item{
    padding:
        27px 0;

    display:grid;

    grid-template-columns:
        55px 1fr;

    gap:20px;

    border-bottom:
        1px solid var(--border);
}

.web-process-item > span{
    color:var(--orange);

    font-size:12px;
    font-weight:800;
}

.web-process-item h3{
    margin-bottom:6px;

    color:var(--navy);

    font-size:17px;
}

.web-process-item p{
    color:var(--muted);

    font-size:12px;
}


/* ============================================================
   PACKAGE PAGE
   ============================================================ */

.package-page-hero{
    padding:
        165px 0
        90px;

    color:#fff;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(242,140,24,.16),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #051326,
            #0a2d52
        );
}

.package-page-heading{
    max-width:900px;

    margin:auto;
}

.package-page-heading h1{
    margin:
        18px 0 20px;

    font-size:
        clamp(40px,5vw,64px);

    line-height:1.15;
}

html[lang="th"] .package-page-heading h1{
    line-height:1.28;
}

.package-page-heading p{
    max-width:700px;

    margin:auto;

    color:
        rgba(255,255,255,.65);

    font-size:16px;
}

.package-full-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:20px;
}

.package-full-card{
    position:relative;

    min-height:440px;

    padding:32px;

    border:
        1px solid var(--border);

    border-radius:18px;

    background:#fff;

    transition:.3s;
}

.package-full-card:hover{
    transform:
        translateY(-7px);

    box-shadow:var(--shadow);
}

.package-full-card.featured{
    border:
        2px solid var(--orange);

    box-shadow:
        0 20px 55px
        rgba(242,140,24,.12);
}

.package-full-badge{
    position:absolute;

    top:-13px;
    right:20px;

    padding:
        6px 13px;

    border-radius:20px;

    color:#fff;

    background:var(--orange);

    font-size:9px;
    font-weight:800;
}

.package-full-top{
    display:flex;

    justify-content:space-between;

    margin-bottom:35px;
}

.package-full-top span{
    color:var(--orange);

    font-size:12px;
    font-weight:800;
}

.package-full-top small{
    color:#9ca6b4;

    font-size:9px;

    letter-spacing:1px;
}

.package-full-card h2{
    margin-bottom:7px;

    color:var(--navy);

    font-size:27px;
}

.package-for{
    margin-bottom:22px;

    color:var(--orange);

    font-size:11px;
    font-weight:700;
}

.package-full-card > p{
    min-height:75px;

    color:var(--muted);

    font-size:13px;
}

.package-price-placeholder{
    margin-top:25px;

    padding:
        18px 0;

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);
}

.package-price-placeholder small{
    display:block;

    margin-bottom:3px;

    color:#9ca6b4;

    font-size:9px;
}

.package-price-placeholder strong{
    color:var(--navy);

    font-size:17px;
}

.package-action{
    display:inline-block;

    margin-top:22px;

    color:var(--orange);

    font-size:11px;
    font-weight:800;
}


/* ============================================================
   PACKAGE TABLE
   ============================================================ */

.package-table-wrap{
    overflow-x:auto;

    border:
        1px solid var(--border);

    border-radius:15px;

    background:#fff;
}

.package-table{
    width:100%;

    border-collapse:collapse;

    min-width:800px;
}

.package-table th,
.package-table td{
    padding:
        18px 20px;

    border-bottom:
        1px solid var(--border);

    text-align:left;

    font-size:12px;
}

.package-table th{
    color:#fff;

    background:var(--navy);

    font-size:10px;

    letter-spacing:.4px;
}

.package-table td:not(:first-child){
    color:var(--muted);
}

.package-table tr.highlight td{
    background:#fff8ef;
}

.package-table tr:last-child td{
    border-bottom:0;
}


/* ============================================================
   PACKAGE NOTE
   ============================================================ */

.package-note{
    padding:45px;

    display:grid;

    grid-template-columns:
        90px 1fr;

    gap:30px;

    align-items:center;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #071a33,
            #0c3864
        );

    color:#fff;
}

.package-note-icon{
    width:80px;
    height:80px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:var(--orange);

    border:
        1px solid rgba(255,255,255,.15);

    font-size:20px;
    font-weight:800;
}

.package-note h2{
    margin-bottom:8px;

    font-size:25px;
}

.package-note p{
    color:
        rgba(255,255,255,.62);

    font-size:13px;
}

/* ============================================================
   NRN DIGITAL
   SOFTWARE SOLUTIONS
   ============================================================ */

.software-hero{
    position:relative;
    overflow:hidden;

    min-height:720px;

    padding:
        155px 0
        90px;

    display:flex;
    align-items:center;

    color:#fff;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(27,101,169,.35),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(242,140,24,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #041225,
            #071e3a 55%,
            #0c355f
        );
}

.software-hero-grid{
    display:grid;

    grid-template-columns:
        1.08fr .92fr;

    gap:70px;

    align-items:center;
}

.software-hero-content{
    position:relative;
    z-index:5;
}

.software-hero-content h1{
    max-width:800px;

    margin-bottom:25px;

    font-size:
        clamp(43px,5.5vw,70px);

    line-height:1.08;

    letter-spacing:-2px;
}

.software-hero-content h1 span{
    display:block;

    padding-bottom:.08em;

    color:var(--orange);
}

html[lang="th"] .software-hero-content h1{
    line-height:1.28;
    letter-spacing:-1px;
}

.software-hero-content > p{
    max-width:700px;

    margin-bottom:32px;

    color:
        rgba(255,255,255,.68);

    font-size:16px;
}


/* ============================================================
   SOFTWARE NETWORK
   ============================================================ */

.software-network{
    position:relative;

    min-height:470px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.network-ring{
    position:absolute;

    width:410px;
    height:410px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius:50%;
}

.network-ring.ring-two{
    width:295px;
    height:295px;

    border-style:dashed;
}

.network-core{
    position:relative;
    z-index:3;

    width:205px;
    height:205px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.16);

    background:
        radial-gradient(
            circle,
            #124a7d,
            #071b35 70%
        );

    box-shadow:
        0 0 80px rgba(28,105,176,.30);
}

.network-core small{
    color:var(--orange);

    font-size:12px;
    font-weight:800;

    letter-spacing:3px;
}

.network-core strong{
    margin:3px 0;

    font-size:26px;

    letter-spacing:1px;
}

.network-core span{
    color:
        rgba(255,255,255,.43);

    font-size:7px;

    letter-spacing:1.5px;
}

.network-node{
    position:absolute;

    z-index:4;

    width:105px;
    height:72px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:11px;

    background:
        rgba(7,28,54,.85);

    backdrop-filter:blur(10px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.20);
}

.network-node strong{
    color:var(--orange);

    font-size:12px;
}

.network-node span{
    margin-top:2px;

    color:
        rgba(255,255,255,.48);

    font-size:8px;
}

.node-pos{
    top:20px;
    left:40px;
}

.node-data{
    top:80px;
    right:0;
}

.node-web{
    bottom:30px;
    left:0;
}

.node-api{
    right:35px;
    bottom:10px;
}


/* ============================================================
   SOFTWARE INTRO
   ============================================================ */

.software-intro-grid{
    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:80px;

    align-items:start;
}

.software-intro-grid .section-heading{
    margin-bottom:0;
}

.software-intro-text{
    padding-top:25px;
}

.software-intro-text p{
    margin-bottom:18px;

    color:var(--muted);

    font-size:16px;
}


/* ============================================================
   SOFTWARE PRODUCT CARDS
   ============================================================ */

.software-product-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.software-product-card{
    position:relative;

    min-height:410px;

    padding:30px;

    overflow:hidden;

    border:
        1px solid var(--border);

    border-radius:18px;

    background:#fff;

    transition:.3s ease;
}

.software-product-card:hover{
    transform:translateY(-7px);

    box-shadow:var(--shadow);
}

.software-product-card.featured{
    color:#fff;

    border-color:transparent;

    background:
        linear-gradient(
            145deg,
            #071a33,
            #0d3b69
        );
}

.software-featured-label{
    position:absolute;

    top:17px;
    right:-34px;

    width:140px;

    padding:5px 0;

    text-align:center;

    transform:rotate(38deg);

    color:#fff;

    background:var(--orange);

    font-size:7px;
    font-weight:800;

    letter-spacing:1px;
}

.software-card-top{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    margin-bottom:30px;
}

.software-product-icon{
    min-width:55px;
    height:55px;

    padding:0 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:13px;

    color:var(--orange);

    background:#fff2e3;

    font-size:12px;
    font-weight:800;
}

.software-product-card.featured
.software-product-icon{
    background:
        rgba(242,140,24,.12);
}

.software-product-code{
    color:#a1abb7;

    font-size:8px;

    letter-spacing:1px;
}

.software-category{
    margin-bottom:8px;

    color:var(--orange);

    font-size:8px;
    font-weight:800;

    letter-spacing:1.2px;
}

.software-product-card h3{
    margin-bottom:4px;

    color:var(--navy);

    font-size:24px;
}

.software-product-card.featured h3{
    color:#fff;
}

.software-product-card h4{
    margin-bottom:17px;

    color:#445166;

    font-size:12px;
    font-weight:600;
}

.software-product-card.featured h4{
    color:
        rgba(255,255,255,.65);
}

.software-product-card p{
    color:var(--muted);

    font-size:12px;
}

.software-product-card.featured p{
    color:
        rgba(255,255,255,.58);
}

.software-product-link{
    position:absolute;

    left:30px;
    bottom:28px;

    color:var(--orange);

    font-size:11px;
    font-weight:800;
}


/* ============================================================
   CUSTOM SOFTWARE ARCHITECTURE
   ============================================================ */

.custom-software-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:75px;

    align-items:center;
}

.custom-code-window{
    overflow:hidden;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #071a33,
            #0b3158
        );

    box-shadow:
        0 30px 70px rgba(7,26,51,.20);
}

.code-window-top{
    height:52px;

    padding:0 20px;

    display:flex;
    align-items:center;

    gap:7px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.code-window-top > span{
    width:8px;
    height:8px;

    border-radius:50%;

    background:
        rgba(255,255,255,.22);
}

.code-window-top small{
    margin-left:auto;

    color:
        rgba(255,255,255,.30);

    font-size:7px;

    letter-spacing:1.3px;
}

.architecture-stack{
    padding:25px;
}

.architecture-layer{
    padding:20px;

    display:grid;

    grid-template-columns:
        45px 1fr;

    gap:15px;

    align-items:center;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.architecture-layer:last-child{
    border-bottom:0;
}

.architecture-layer > span{
    color:var(--orange);

    font-size:10px;
    font-weight:800;
}

.architecture-layer strong{
    display:block;

    color:#fff;

    font-size:13px;
}

.architecture-layer small{
    display:block;

    margin-top:3px;

    color:
        rgba(255,255,255,.40);

    font-size:8px;
}

.custom-software-content h2{
    margin-bottom:20px;

    color:var(--navy);

    font-size:
        clamp(31px,4vw,46px);

    line-height:1.2;
}

html[lang="th"] .custom-software-content h2{
    line-height:1.35;
}

.custom-software-content > p{
    margin-bottom:25px;

    color:var(--muted);

    font-size:15px;
}


/* ============================================================
   INDUSTRIES
   ============================================================ */

.industry-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    border-top:
        1px solid var(--border);

    border-left:
        1px solid var(--border);
}

.industry-item{
    min-height:130px;

    padding:25px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    background:#fff;

    transition:.25s;
}

.industry-item:hover{
    background:var(--navy);
}

.industry-item span{
    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.industry-item strong{
    color:var(--navy);

    font-size:13px;
}

.industry-item:hover strong{
    color:#fff;
}


/* ============================================================
   SOFTWARE PROCESS
   ============================================================ */

.software-process{
    display:grid;

    grid-template-columns:
        repeat(7,1fr);

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);
}

.software-process-item{
    min-height:235px;

    padding:27px 20px;

    border-right:
        1px solid var(--border);
}

.software-process-item:last-child{
    border-right:0;
}

.software-process-item > span{
    display:block;

    margin-bottom:35px;

    color:var(--orange);

    font-size:10px;
    font-weight:800;
}

.software-process-item strong{
    display:block;

    margin-bottom:12px;

    color:var(--navy);

    font-size:13px;
}

.software-process-item p{
    color:var(--muted);

    font-size:10px;
}

/* ============================================================
   NRN DIGITAL
   SOFTWARE PRODUCT DETAIL
   ============================================================ */

.product-detail-hero{
    position:relative;
    overflow:hidden;

    padding:
        150px 0
        95px;

    color:#fff;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(31,108,180,.34),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 100%,
            rgba(242,140,24,.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #041225,
            #071f3c 58%,
            #0c355f
        );
}

.product-detail-hero-grid{
    display:grid;

    grid-template-columns:
        1.05fr .95fr;

    gap:75px;

    align-items:center;
}

.product-breadcrumb{
    margin-bottom:25px;

    color:
        rgba(255,255,255,.38);

    font-size:10px;
}

.product-breadcrumb a{
    color:
        rgba(255,255,255,.65);
}

.product-breadcrumb span{
    padding:0 9px;
}

.product-detail-content h1{
    margin:
        20px 0 24px;

    font-size:
        clamp(44px,5.5vw,70px);

    line-height:1.08;

    letter-spacing:-2px;
}

.product-detail-content h1 span{
    display:block;

    margin-top:8px;
    padding-bottom:.08em;

    color:var(--orange);

    font-size:.55em;

    line-height:1.25;

    letter-spacing:-.5px;
}

html[lang="th"] .product-detail-content h1{
    line-height:1.25;
}

html[lang="th"] .product-detail-content h1 span{
    line-height:1.4;
}

.product-detail-content > p{
    max-width:680px;

    margin-bottom:30px;

    color:
        rgba(255,255,255,.66);

    font-size:16px;
}


/* ============================================================
   SYSTEM WINDOW
   ============================================================ */

.product-system-window{
    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:18px;

    background:
        rgba(4,20,40,.68);

    box-shadow:
        0 35px 80px rgba(0,0,0,.28);

    backdrop-filter:blur(12px);
}

.system-window-head{
    height:52px;

    padding:0 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.system-dots{
    display:flex;
    gap:6px;
}

.system-dots span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:
        rgba(255,255,255,.23);
}

.system-window-head small{
    color:
        rgba(255,255,255,.35);

    font-size:8px;

    letter-spacing:1.2px;
}

.system-window-body{
    padding:35px;
}

.system-logo{
    margin-bottom:35px;
}

.system-logo small{
    display:block;

    margin-bottom:4px;

    color:var(--orange);

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
}

.system-logo strong{
    color:#fff;

    font-size:25px;
}

.system-module-grid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:10px;
}

.system-module{
    min-height:78px;

    padding:15px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:10px;

    background:
        rgba(255,255,255,.035);
}

.system-module span{
    color:
        rgba(255,255,255,.27);

    font-size:7px;
}

.system-module strong{
    color:
        rgba(255,255,255,.80);

    font-size:10px;
}


/* ============================================================
   PRODUCT OVERVIEW
   ============================================================ */

.product-overview-grid{
    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:80px;

    align-items:start;
}

.product-overview-grid
.section-heading{
    margin-bottom:0;
}

.product-overview-text > p{
    margin-bottom:35px;

    color:var(--muted);

    font-size:17px;

    line-height:1.85;
}

.product-principles{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid var(--border);
}

.product-principles > div{
    padding:
        22px 15px 5px 0;
}

.product-principles strong{
    display:block;

    margin-bottom:7px;

    color:var(--orange);

    font-size:10px;
}

.product-principles span{
    color:var(--navy);

    font-size:11px;
    font-weight:700;
}


/* ============================================================
   PRODUCT FEATURES
   ============================================================ */

.product-feature-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    border-top:
        1px solid var(--border);

    border-left:
        1px solid var(--border);
}

.product-feature-item{
    min-height:145px;

    padding:25px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    background:#fff;

    transition:.25s;
}

.product-feature-item:hover{
    background:var(--navy);
}

.product-feature-item span{
    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.product-feature-item strong{
    color:var(--navy);

    font-size:12px;
}

.product-feature-item:hover strong{
    color:#fff;
}


/* ============================================================
   PRODUCT DESIGNED FOR
   ============================================================ */

.product-for-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:80px;

    align-items:center;
}

.product-for-content h2{
    margin-bottom:20px;

    color:var(--navy);

    font-size:
        clamp(32px,4vw,48px);

    line-height:1.2;
}

html[lang="th"] .product-for-content h2{
    line-height:1.35;
}

.product-for-content p{
    color:var(--muted);

    font-size:15px;
}

.product-for-list{
    border-top:
        1px solid var(--border);
}

.product-for-list > div{
    padding:
        18px 5px;

    display:grid;

    grid-template-columns:
        55px 1fr;

    align-items:center;

    border-bottom:
        1px solid var(--border);
}

.product-for-list span{
    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.product-for-list strong{
    color:var(--navy);

    font-size:13px;
}


/* ============================================================
   PRODUCT ARCHITECTURE
   ============================================================ */

.product-architecture-section{
    padding:
        95px 0;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #051326,
            #0a2d52
        );
}

.product-architecture-heading{
    margin-bottom:55px;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:70px;

    align-items:end;
}

.product-architecture-heading h2{
    font-size:
        clamp(32px,4vw,48px);

    line-height:1.2;
}

html[lang="th"]
.product-architecture-heading h2{
    line-height:1.35;
}

.product-architecture-heading > p{
    color:
        rgba(255,255,255,.58);

    font-size:14px;
}

.architecture-flow{
    display:grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items:center;

    gap:15px;
}

.architecture-flow-item{
    min-height:145px;

    padding:22px;

    display:flex;
    flex-direction:column;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:13px;

    background:
        rgba(255,255,255,.035);
}

.architecture-flow-item span{
    margin-bottom:auto;

    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.architecture-flow-item strong{
    margin-bottom:4px;

    font-size:11px;
}

.architecture-flow-item small{
    color:
        rgba(255,255,255,.40);

    font-size:8px;
}

.architecture-arrow{
    color:var(--orange);

    font-size:20px;
}


/* ============================================================
   IMPLEMENTATION
   ============================================================ */

.implementation-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;
}

.implementation-card{
    min-height:245px;

    padding:28px;

    border:
        1px solid var(--border);

    border-radius:16px;

    background:#fff;
}

.implementation-card > span{
    display:block;

    margin-bottom:55px;

    color:var(--orange);

    font-size:10px;
    font-weight:800;
}

.implementation-card h3{
    margin-bottom:10px;

    color:var(--navy);

    font-size:19px;
}

.implementation-card p{
    color:var(--muted);

    font-size:12px;
}

.cta-product-name{
    margin-bottom:7px;

    color:var(--orange);

    font-size:9px;
    font-weight:800;

    letter-spacing:1.5px;
}


/* ============================================================
   PRODUCT 404
   ============================================================ */

.product-not-found{
    min-height:80vh;

    padding:
        170px 0 100px;

    display:flex;
    align-items:center;

    background:#f7f9fc;
}

.product-not-found-box{
    max-width:750px;
}

.product-not-found-box h1{
    margin:
        10px 0 15px;

    color:var(--navy);

    font-size:
        clamp(38px,5vw,60px);
}

.product-not-found-box p{
    margin-bottom:25px;

    color:var(--muted);
}

/* ============================================================
   NRN DIGITAL
   HARDWARE SOLUTIONS
   ============================================================ */

.hardware-hero,
.hardware-detail-hero{
    position:relative;
    overflow:hidden;

    padding:155px 0 95px;

    color:#fff;

    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(33,110,181,.34),
            transparent 31%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(242,140,24,.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #041225,
            #071f3c 58%,
            #0c355f
        );
}

.hardware-hero-grid,
.hardware-detail-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:75px;
    align-items:center;
}

.hardware-hero-content h1,
.hardware-detail-content h1{
    margin:20px 0 24px;

    font-size:clamp(43px,5.5vw,70px);
    line-height:1.08;
    letter-spacing:-2px;
}

.hardware-hero-content h1 span,
.hardware-detail-content h1 span{
    display:block;

    margin-top:7px;
    padding-bottom:.08em;

    color:var(--orange);
}

html[lang="th"] .hardware-hero-content h1,
html[lang="th"] .hardware-detail-content h1{
    line-height:1.28;
    letter-spacing:-1px;
}

.hardware-detail-content h1 span{
    font-size:.55em;
    line-height:1.3;
}

html[lang="th"]
.hardware-detail-content h1 span{
    line-height:1.45;
}

.hardware-hero-content > p,
.hardware-detail-content > p{
    max-width:680px;

    margin-bottom:30px;

    color:rgba(255,255,255,.67);
    font-size:16px;
}


/* HARDWARE VISUAL */

.hardware-visual{
    position:relative;

    min-height:430px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.hardware-monitor{
    position:relative;

    width:320px;
}

.hardware-screen{
    height:230px;

    padding:35px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(12,59,105,.92),
            rgba(4,19,38,.96)
        );

    box-shadow:
        0 35px 80px rgba(0,0,0,.30);
}

.hardware-screen small{
    color:var(--orange);
    font-size:10px;
    font-weight:800;
    letter-spacing:3px;
}

.hardware-screen strong{
    margin:3px 0;

    font-size:48px;
}

.hardware-screen > span{
    color:rgba(255,255,255,.40);

    font-size:7px;
    letter-spacing:1.5px;
}

.hardware-screen-stats{
    width:100%;

    margin-top:28px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.hardware-screen-stats i{
    height:28px;

    border-radius:5px;

    background:rgba(255,255,255,.07);
}

.monitor-stand{
    width:90px;
    height:60px;

    margin:auto;

    border-bottom:10px solid rgba(255,255,255,.12);
    border-left:20px solid transparent;
    border-right:20px solid transparent;
}

.hardware-device{
    position:absolute;

    width:105px;
    height:72px;

    padding:13px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;

    background:rgba(5,24,47,.90);

    box-shadow:
        0 15px 35px rgba(0,0,0,.22);
}

.hardware-device strong{
    color:var(--orange);
    font-size:10px;
}

.hardware-device span{
    color:rgba(255,255,255,.45);
    font-size:8px;
}

.device-scanner{
    left:0;
    top:50px;
}

.device-printer{
    right:0;
    top:105px;
}

.device-cash{
    left:35px;
    bottom:30px;
}


/* APPROACH */

.hardware-approach{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
}

.hardware-approach
.section-heading{
    margin-bottom:0;
}

.hardware-approach-text{
    padding-top:25px;
}

.hardware-approach-text p{
    color:var(--muted);

    font-size:16px;
    line-height:1.9;
}


/* HARDWARE PRODUCT GRID */

.hardware-product-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.hardware-product-card{
    position:relative;

    min-height:385px;

    padding:30px;

    border:1px solid var(--border);
    border-radius:18px;

    background:#fff;

    transition:.3s;
}

.hardware-product-card:hover{
    transform:translateY(-7px);

    box-shadow:var(--shadow);
}

.hardware-product-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    margin-bottom:30px;
}

.hardware-product-icon{
    min-width:58px;
    height:58px;

    padding:0 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:13px;

    color:var(--orange);
    background:#fff2e3;

    font-size:10px;
    font-weight:800;
}

.hardware-product-top > span{
    color:#a1abb7;

    font-size:7px;
    letter-spacing:1px;
}

.hardware-product-card h3{
    margin-bottom:5px;

    color:var(--navy);

    font-size:22px;
}

.hardware-product-card h4{
    margin-bottom:17px;

    color:#46536a;

    font-size:12px;
}

.hardware-product-card p{
    color:var(--muted);

    font-size:12px;
}

.hardware-product-link{
    position:absolute;

    left:30px;
    bottom:28px;

    color:var(--orange);

    font-size:11px;
    font-weight:800;
}


/* COMPLETE POS */

.pos-solution-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.pos-stack{
    padding:30px;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #071a33,
            #0d3b69
        );
}

.pos-stack-core{
    grid-column:1 / -1;

    min-height:155px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
}

.pos-stack-core small{
    color:var(--orange);

    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.pos-stack-core strong{
    color:#fff;
    font-size:38px;
}

.pos-stack-core span{
    color:rgba(255,255,255,.35);

    font-size:7px;
    letter-spacing:1px;
}

.pos-stack-item{
    min-height:90px;

    padding:16px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
}

.pos-stack-item span{
    color:var(--orange);
    font-size:8px;
}

.pos-stack-item strong{
    color:rgba(255,255,255,.75);
    font-size:10px;
}

.pos-solution-content h2{
    margin-bottom:20px;

    color:var(--navy);

    font-size:clamp(32px,4vw,48px);
    line-height:1.2;
}

html[lang="th"]
.pos-solution-content h2{
    line-height:1.35;
}

.pos-solution-content > p{
    margin-bottom:25px;

    color:var(--muted);

    font-size:15px;
}


/* HARDWARE PROCESS */

.hardware-process-section{
    padding:95px 0;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #051326,
            #0a2d52
        );
}

.hardware-process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    border-top:
        1px solid rgba(255,255,255,.10);
}

.hardware-process-item{
    min-height:220px;

    padding:28px;

    border-right:
        1px solid rgba(255,255,255,.10);
}

.hardware-process-item:last-child{
    border-right:0;
}

.hardware-process-item > span{
    display:block;

    margin-bottom:50px;

    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.hardware-process-item strong{
    display:block;

    margin-bottom:10px;

    font-size:14px;
}

.hardware-process-item p{
    color:rgba(255,255,255,.50);

    font-size:11px;
}


/* HARDWARE DETAIL */

.hardware-detail-visual{
    display:flex;
    justify-content:center;
}

.hardware-detail-device{
    position:relative;

    width:390px;
    min-height:390px;

    padding:40px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(14,65,112,.75),
            rgba(4,20,40,.92)
        );

    box-shadow:
        0 35px 80px rgba(0,0,0,.28);
}

.hardware-detail-code{
    position:absolute;

    top:20px;
    right:22px;

    color:rgba(255,255,255,.28);

    font-size:8px;
    letter-spacing:1px;
}

.hardware-detail-icon{
    width:115px;
    height:115px;

    margin-bottom:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:25px;

    color:var(--orange);

    border:
        1px solid rgba(255,255,255,.12);

    font-size:20px;
    font-weight:800;
}

.hardware-detail-device small{
    color:var(--orange);

    font-size:8px;
    font-weight:800;
    letter-spacing:1.5px;
}

.hardware-detail-device strong{
    margin:7px 0;

    text-align:center;

    font-size:22px;
}

.hardware-detail-device > span{
    color:rgba(255,255,255,.38);

    font-size:8px;
    letter-spacing:1px;
}


/* HARDWARE FEATURES */

.hardware-feature-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:1px solid var(--border);
    border-left:1px solid var(--border);
}

.hardware-feature-item{
    min-height:145px;

    padding:25px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);

    transition:.25s;
}

.hardware-feature-item:hover{
    background:var(--navy);
}

.hardware-feature-item span{
    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.hardware-feature-item strong{
    color:var(--navy);

    font-size:12px;
}

.hardware-feature-item:hover strong{
    color:#fff;
}


/* HARDWARE INTEGRATION */

.hardware-integration{
    padding:95px 0;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #051326,
            #0a2d52
        );
}

.hardware-integration-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:70px;
    align-items:center;
}

.hardware-integration h2{
    font-size:clamp(30px,4vw,45px);
    line-height:1.25;
}

html[lang="th"]
.hardware-integration h2{
    line-height:1.4;
}

.hardware-integration-flow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.hardware-integration-flow > div{
    min-width:105px;

    padding:20px 12px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
}

.hardware-integration-flow span{
    display:block;

    margin-bottom:20px;

    color:var(--orange);

    font-size:8px;
}

.hardware-integration-flow strong{
    font-size:9px;
}

.hardware-integration-flow b{
    color:var(--orange);
}


/* HARDWARE NOTE */

.hardware-note{
    padding:42px;

    display:grid;
    grid-template-columns:80px 1fr;
    gap:30px;
    align-items:center;

    border:1px solid var(--border);
    border-radius:18px;

    background:#fff;
}

.hardware-note-label{
    width:70px;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:var(--orange);
    background:#fff2e3;

    font-size:17px;
    font-weight:800;
}

.hardware-note h2{
    margin-bottom:7px;

    color:var(--navy);

    font-size:23px;
}

.hardware-note p{
    color:var(--muted);

    font-size:12px;
}

/* ============================================================
   NRN DIGITAL
   TECHNOLOGY CONSULTING
   ============================================================ */

.consulting-hero{
    position:relative;
    overflow:hidden;

    padding:155px 0 95px;

    color:#fff;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(30,108,181,.34),
            transparent 31%
        ),
        radial-gradient(
            circle at 7% 100%,
            rgba(242,140,24,.11),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #041225,
            #071f3c 58%,
            #0c355f
        );
}

.consulting-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:75px;
    align-items:center;
}

.consulting-hero-content h1{
    margin:20px 0 24px;

    font-size:clamp(43px,5.5vw,70px);
    line-height:1.08;
    letter-spacing:-2px;
}

.consulting-hero-content h1 span{
    display:block;

    margin-top:5px;
    padding-bottom:.08em;

    color:var(--orange);
}

html[lang="th"] .consulting-hero-content h1{
    line-height:1.28;
    letter-spacing:-1px;
}

.consulting-hero-content > p{
    max-width:690px;

    margin-bottom:30px;

    color:rgba(255,255,255,.67);

    font-size:16px;
}


/* ============================================================
   CONSULTING MAP
   ============================================================ */

.consulting-visual{
    min-height:470px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.consulting-map{
    position:relative;

    width:450px;
    height:450px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
}

.consulting-map::before{
    content:"";

    position:absolute;

    inset:65px;

    border:
        1px dashed rgba(255,255,255,.10);

    border-radius:50%;
}

.consulting-map-core{
    position:absolute;

    top:50%;
    left:50%;

    width:190px;
    height:190px;

    transform:translate(-50%,-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.15);

    background:
        radial-gradient(
            circle,
            #124c80,
            #071a33 72%
        );

    box-shadow:
        0 0 80px rgba(27,105,177,.30);
}

.consulting-map-core small{
    color:var(--orange);

    font-size:9px;
    font-weight:800;

    letter-spacing:3px;
}

.consulting-map-core strong{
    margin:4px 0;

    font-size:23px;
}

.consulting-map-core span{
    color:rgba(255,255,255,.40);

    font-size:7px;
    letter-spacing:1px;
}

.consulting-map-node{
    position:absolute;

    width:105px;
    height:70px;

    padding:12px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:11px;

    background:
        rgba(5,25,49,.91);

    box-shadow:
        0 15px 35px rgba(0,0,0,.20);
}

.consulting-map-node span{
    color:var(--orange);

    font-size:7px;
}

.consulting-map-node strong{
    color:rgba(255,255,255,.78);

    font-size:9px;
}

.node-business{
    top:5px;
    left:75px;
}

.node-process{
    top:60px;
    right:-10px;
}

.node-system{
    right:10px;
    bottom:65px;
}

.node-data{
    left:35px;
    bottom:15px;
}

.node-roadmap{
    top:160px;
    left:-35px;
}


/* ============================================================
   CONSULTING INTRO
   ============================================================ */

.consulting-intro-grid{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:80px;

    align-items:start;
}

.consulting-intro-grid
.section-heading{
    margin-bottom:0;
}

.consulting-intro-text{
    padding-top:25px;
}

.consulting-intro-text p{
    margin-bottom:18px;

    color:var(--muted);

    font-size:16px;

    line-height:1.9;
}


/* ============================================================
   CONSULTING SERVICES
   ============================================================ */

.consulting-service-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;
}

.consulting-service-card{
    min-height:285px;

    padding:28px;

    border:
        1px solid var(--border);

    border-radius:16px;

    background:#fff;

    transition:.3s;
}

.consulting-service-card:hover{
    transform:translateY(-6px);

    background:var(--navy);

    box-shadow:var(--shadow);
}

.consulting-service-card > span{
    display:block;

    margin-bottom:55px;

    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.consulting-service-card h3{
    margin-bottom:12px;

    color:var(--navy);

    font-size:16px;

    line-height:1.35;
}

.consulting-service-card p{
    color:var(--muted);

    font-size:11px;
}

.consulting-service-card:hover h3{
    color:#fff;
}

.consulting-service-card:hover p{
    color:rgba(255,255,255,.55);
}


/* ============================================================
   CONSULTING FLOW
   ============================================================ */

.consulting-flow-section{
    padding:95px 0;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #051326,
            #0a2d52
        );
}

.consulting-flow-heading{
    margin-bottom:55px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:end;
}

.consulting-flow-heading h2{
    font-size:clamp(32px,4vw,48px);

    line-height:1.2;
}

.consulting-flow-heading > p{
    color:rgba(255,255,255,.56);

    font-size:14px;
}

.consulting-flow{
    display:grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap:10px;

    align-items:center;
}

.consulting-flow-item{
    min-height:145px;

    padding:20px;

    display:flex;
    flex-direction:column;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:12px;

    background:
        rgba(255,255,255,.035);
}

.consulting-flow-item > span{
    margin-bottom:auto;

    color:var(--orange);

    font-size:8px;
    font-weight:800;
}

.consulting-flow-item strong{
    margin-bottom:4px;

    font-size:10px;
}

.consulting-flow-item small{
    color:rgba(255,255,255,.42);

    font-size:8px;
}

.consulting-flow > b{
    color:var(--orange);

    font-size:17px;
}


/* ============================================================
   ENGAGEMENT MODELS
   ============================================================ */

.consulting-engagement-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;
}

.consulting-engagement-card{
    position:relative;

    min-height:330px;

    padding:28px;

    border:
        1px solid var(--border);

    border-radius:17px;

    background:#fff;
}

.consulting-engagement-card.featured{
    color:#fff;

    border-color:transparent;

    background:
        linear-gradient(
            145deg,
            #071a33,
            #0d3b69
        );
}

.engagement-label{
    position:absolute;

    top:22px;
    right:22px;

    color:var(--orange);

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
}

.engagement-number{
    margin-bottom:65px;

    color:var(--orange);

    font-size:10px;
    font-weight:800;
}

.consulting-engagement-card h3{
    margin-bottom:5px;

    color:var(--navy);

    font-size:21px;
}

.consulting-engagement-card h4{
    margin-bottom:15px;

    color:#4c596d;

    font-size:11px;
}

.consulting-engagement-card p{
    color:var(--muted);

    font-size:11px;
}

.consulting-engagement-card.featured h3{
    color:#fff;
}

.consulting-engagement-card.featured h4{
    color:rgba(255,255,255,.65);
}

.consulting-engagement-card.featured p{
    color:rgba(255,255,255,.53);
}


/* ============================================================
   CLIENT TYPES
   ============================================================ */

.consulting-client-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}

.consulting-client-content h2{
    margin-bottom:20px;

    color:var(--navy);

    font-size:clamp(32px,4vw,48px);

    line-height:1.2;
}

html[lang="th"]
.consulting-client-content h2{
    line-height:1.4;
}

.consulting-client-content p{
    color:var(--muted);

    font-size:15px;
}

.consulting-client-list{
    border-top:
        1px solid var(--border);
}

.consulting-client-list > div{
    padding:18px 5px;

    display:grid;

    grid-template-columns:
        55px 1fr;

    border-bottom:
        1px solid var(--border);
}

.consulting-client-list span{
    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.consulting-client-list strong{
    color:var(--navy);

    font-size:12px;
}


/* ============================================================
   CONSULTING PRINCIPLES
   ============================================================ */

.consulting-principles{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    border-top:
        1px solid var(--border);

    border-left:
        1px solid var(--border);
}

.consulting-principle{
    min-height:220px;

    padding:28px;

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    transition:.25s;
}

.consulting-principle:hover{
    background:var(--navy);
}

.consulting-principle span{
    display:block;

    margin-bottom:55px;

    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.consulting-principle h3{
    margin-bottom:8px;

    color:var(--navy);

    font-size:18px;
}

.consulting-principle p{
    color:var(--muted);

    font-size:11px;
}

.consulting-principle:hover h3{
    color:#fff;
}

.consulting-principle:hover p{
    color:rgba(255,255,255,.55);
}

/* ============================================================
   NRN DIGITAL
   CUSTOMER SUPPORT CENTER
   ============================================================ */

.support-hero{
    position:relative;
    overflow:hidden;
    padding:155px 0 95px;
    color:#fff;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(31,108,180,.34),
            transparent 31%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(242,140,24,.11),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #041225,
            #071f3c 58%,
            #0c355f
        );
}

.support-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:75px;
    align-items:center;
}

.support-hero-content h1{
    margin:20px 0 24px;

    font-size:clamp(43px,5.5vw,70px);
    line-height:1.08;
    letter-spacing:-2px;
}

.support-hero-content h1 span{
    display:block;
    margin-top:5px;
    padding-bottom:.08em;
    color:var(--orange);
}

html[lang="th"] .support-hero-content h1{
    line-height:1.28;
    letter-spacing:-1px;
}

.support-hero-content > p{
    max-width:690px;
    margin-bottom:30px;
    color:rgba(255,255,255,.67);
    font-size:16px;
}


/* ============================================================
   SUPPORT CONSOLE
   ============================================================ */

.support-console-window{
    overflow:hidden;

    border:1px solid rgba(255,255,255,.13);
    border-radius:19px;

    background:rgba(4,20,40,.72);

    box-shadow:
        0 35px 80px rgba(0,0,0,.28);

    backdrop-filter:blur(12px);
}

.support-console-head{
    height:54px;
    padding:0 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.support-console-head > div{
    display:flex;
    gap:6px;
}

.support-console-head > div span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(255,255,255,.23);
}

.support-console-head small{
    color:rgba(255,255,255,.35);
    font-size:8px;
    letter-spacing:1.4px;
}

.support-console-body{
    padding:35px;
}

.support-console-status{
    margin-bottom:35px;

    display:flex;
    align-items:center;
    gap:15px;
}

.status-pulse{
    position:relative;

    width:45px;
    height:45px;

    border-radius:50%;

    background:
        rgba(242,140,24,.12);
}

.status-pulse::before{
    content:"";

    position:absolute;
    inset:15px;

    border-radius:50%;

    background:var(--orange);

    box-shadow:
        0 0 25px rgba(242,140,24,.65);
}

.support-console-status small{
    display:block;
    color:var(--orange);
    font-size:8px;
    font-weight:800;
    letter-spacing:1.5px;
}

.support-console-status strong{
    display:block;
    color:#fff;
    font-size:26px;
}

.support-console-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.support-console-grid > div{
    min-height:95px;
    padding:16px;

    display:flex;
    flex-direction:column;

    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;

    background:
        rgba(255,255,255,.035);
}

.support-console-grid span{
    margin-bottom:auto;
    color:var(--orange);
    font-size:7px;
}

.support-console-grid strong{
    color:rgba(255,255,255,.82);
    font-size:10px;
}

.support-console-grid small{
    margin-top:2px;
    color:rgba(255,255,255,.36);
    font-size:7px;
}


/* ============================================================
   SUPPORT INTRO
   ============================================================ */

.support-intro-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
    align-items:start;
}

.support-intro-grid .section-heading{
    margin-bottom:0;
}

.support-intro-text{
    padding-top:25px;
}

.support-intro-text p{
    margin-bottom:18px;

    color:var(--muted);

    font-size:16px;
    line-height:1.9;
}


/* ============================================================
   SUPPORT SERVICES
   ============================================================ */

.support-service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.support-service-card{
    min-height:285px;
    padding:28px;

    border:1px solid var(--border);
    border-radius:17px;

    background:#fff;

    transition:.3s;
}

.support-service-card:hover{
    transform:translateY(-6px);

    color:#fff;
    background:var(--navy);

    box-shadow:var(--shadow);
}

.support-service-top{
    margin-bottom:55px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.support-service-top span{
    color:var(--orange);
    font-size:9px;
    font-weight:800;
}

.support-service-top small{
    color:#a2acb9;
    font-size:7px;
    letter-spacing:1px;
}

.support-service-card h3{
    margin-bottom:12px;

    color:var(--navy);

    font-size:18px;
}

.support-service-card p{
    color:var(--muted);

    font-size:11px;
}

.support-service-card:hover h3{
    color:#fff;
}

.support-service-card:hover p{
    color:rgba(255,255,255,.55);
}


/* ============================================================
   SUPPORT PROCESS
   ============================================================ */

.support-process-section{
    padding:95px 0;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #051326,
            #0a2d52
        );
}

.support-process-heading{
    margin-bottom:55px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;

    align-items:end;
}

.support-process-heading h2{
    font-size:clamp(32px,4vw,48px);
    line-height:1.2;
}

html[lang="th"] .support-process-heading h2{
    line-height:1.4;
}

.support-process-heading > p{
    color:rgba(255,255,255,.56);
    font-size:14px;
}

.support-process-flow{
    display:grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap:10px;
    align-items:center;
}

.support-process-item{
    min-height:145px;
    padding:20px;

    display:flex;
    flex-direction:column;

    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;

    background:rgba(255,255,255,.035);
}

.support-process-item span{
    margin-bottom:auto;

    color:var(--orange);

    font-size:8px;
    font-weight:800;
}

.support-process-item strong{
    margin-bottom:4px;

    font-size:10px;
}

.support-process-item small{
    color:rgba(255,255,255,.42);
    font-size:8px;
}

.support-process-flow > b{
    color:var(--orange);
    font-size:17px;
}


/* ============================================================
   PREPARE SUPPORT REQUEST
   ============================================================ */

.support-prepare-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.support-prepare-content h2{
    margin-bottom:20px;

    color:var(--navy);

    font-size:clamp(32px,4vw,48px);
    line-height:1.2;
}

html[lang="th"] .support-prepare-content h2{
    line-height:1.4;
}

.support-prepare-content p{
    color:var(--muted);
    font-size:15px;
}

.support-prepare-list{
    border-top:1px solid var(--border);
}

.support-prepare-list > div{
    padding:18px 5px;

    display:grid;
    grid-template-columns:55px 1fr;

    border-bottom:1px solid var(--border);
}

.support-prepare-list span{
    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.support-prepare-list strong{
    color:var(--navy);
    font-size:12px;
}


/* ============================================================
   SUPPORT PORTAL
   ============================================================ */

.support-portal-box{
    padding:45px;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:65px;
    align-items:center;

    border-radius:20px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #071a33,
            #0d3b69
        );

    box-shadow:
        0 25px 65px rgba(7,26,51,.15);
}

.support-portal-visual{
    padding:25px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;

    background:rgba(255,255,255,.025);
}

.portal-ticket{
    min-height:100px;
    padding:18px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
}

.portal-ticket small{
    color:var(--orange);
    font-size:7px;
    letter-spacing:1px;
}

.portal-ticket strong{
    margin:4px 0;

    font-size:15px;
}

.portal-ticket span{
    color:rgba(255,255,255,.40);
    font-size:7px;
}

.portal-line{
    width:1px;
    height:25px;

    margin:auto;

    background:rgba(255,255,255,.15);
}

.support-portal-content h2{
    margin-bottom:18px;

    font-size:clamp(28px,4vw,43px);
    line-height:1.25;
}

html[lang="th"] .support-portal-content h2{
    line-height:1.4;
}

.support-portal-content p{
    color:rgba(255,255,255,.58);

    font-size:13px;
}


/* ============================================================
   SUPPORT FAQ
   ============================================================ */

.faq-container{
    max-width:950px;
}

.support-faq{
    border-top:1px solid var(--border);
}

.support-faq-item{
    border-bottom:1px solid var(--border);
}

.support-faq-item summary{
    padding:23px 5px;

    display:grid;
    grid-template-columns:55px 1fr 30px;
    gap:10px;
    align-items:center;

    cursor:pointer;

    list-style:none;
}

.support-faq-item summary::-webkit-details-marker{
    display:none;
}

.support-faq-item summary span{
    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.support-faq-item summary strong{
    color:var(--navy);

    font-size:13px;
}

.support-faq-item summary i{
    color:var(--orange);

    font-size:19px;
    font-style:normal;

    text-align:center;

    transition:.2s;
}

.support-faq-item[open] summary i{
    transform:rotate(45deg);
}

.support-faq-answer{
    padding:
        0 45px
        25px 60px;

    color:var(--muted);

    font-size:12px;
    line-height:1.8;
}

/* ============================================================
   NRN DIGITAL
   ABOUT / CORPORATE PROFILE
   ============================================================ */

.about-hero{
    position:relative;
    overflow:hidden;
    padding:155px 0 95px;
    color:#fff;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(31,108,180,.34),
            transparent 31%
        ),
        radial-gradient(
            circle at 7% 100%,
            rgba(242,140,24,.11),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #041225,
            #071f3c 58%,
            #0c355f
        );
}

.about-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:75px;
    align-items:center;
}

.about-hero-content h1{
    margin:20px 0 24px;
    font-size:clamp(43px,5.5vw,70px);
    line-height:1.08;
    letter-spacing:-2px;
}

.about-hero-content h1 span{
    display:block;
    margin-top:5px;
    padding-bottom:.08em;
    color:var(--orange);
}

html[lang="th"] .about-hero-content h1{
    line-height:1.28;
    letter-spacing:-1px;
}

.about-hero-content > p{
    max-width:690px;
    margin-bottom:30px;
    color:rgba(255,255,255,.67);
    font-size:16px;
}


/* ============================================================
   ABOUT IDENTITY VISUAL
   ============================================================ */

.about-identity{
    position:relative;
    width:450px;
    height:450px;
    margin:auto;
}

.about-identity-ring{
    position:absolute;
    border-radius:50%;
}

.ring-one{
    inset:0;
    border:1px solid rgba(255,255,255,.07);
}

.ring-two{
    inset:70px;
    border:1px dashed rgba(255,255,255,.11);
}

.about-identity-core{
    position:absolute;
    top:50%;
    left:50%;

    width:190px;
    height:190px;

    transform:translate(-50%,-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.14);

    background:
        radial-gradient(
            circle,
            #124c80,
            #071a33 72%
        );

    box-shadow:
        0 0 80px rgba(27,105,177,.30);
}

.about-identity-core small{
    color:var(--orange);
    font-size:10px;
    font-weight:800;
    letter-spacing:3px;
}

.about-identity-core strong{
    margin:3px 0;
    font-size:28px;
}

.about-identity-core span{
    color:rgba(255,255,255,.38);
    font-size:7px;
    letter-spacing:2px;
}

.about-identity-node{
    position:absolute;

    width:110px;
    height:72px;

    padding:13px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;

    background:rgba(5,25,49,.92);

    box-shadow:
        0 15px 35px rgba(0,0,0,.20);
}

.about-identity-node span{
    color:var(--orange);
    font-size:7px;
}

.about-identity-node strong{
    color:rgba(255,255,255,.80);
    font-size:9px;
}

.identity-software{
    top:5px;
    left:70px;
}

.identity-digital{
    top:65px;
    right:-10px;
}

.identity-business{
    right:15px;
    bottom:55px;
}

.identity-data{
    left:35px;
    bottom:10px;
}

.identity-support{
    top:165px;
    left:-40px;
}


/* ============================================================
   ABOUT STORY
   ============================================================ */

.about-story-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
    align-items:start;
}

.about-story-grid .section-heading{
    margin-bottom:0;
}

.about-story-content{
    padding-top:20px;
}

.about-story-content p{
    margin-bottom:18px;
    color:var(--muted);
    font-size:15px;
    line-height:1.9;
}

.about-story-content .about-lead{
    color:var(--navy);
    font-size:19px;
    font-weight:600;
}


/* ============================================================
   COMPANY IDENTITY
   ============================================================ */

.about-company-section{
    padding:80px 0;
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #051326,
            #0a2d52
        );
}

.about-company-grid{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:80px;
    align-items:center;
}

.about-company-name small{
    display:block;
    margin-bottom:20px;

    color:var(--orange);

    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
}

.about-company-name strong{
    display:block;

    font-size:75px;
    line-height:.9;
    letter-spacing:-4px;
}

.about-company-name span{
    display:block;

    margin-top:12px;

    color:rgba(255,255,255,.42);

    font-size:10px;
    letter-spacing:2px;
}

.about-company-content{
    border-top:1px solid rgba(255,255,255,.10);
}

.about-company-row{
    padding:19px 5px;

    display:grid;
    grid-template-columns:150px 1fr;
    gap:20px;

    border-bottom:1px solid rgba(255,255,255,.10);
}

.about-company-row span{
    color:rgba(255,255,255,.38);
    font-size:9px;
}

.about-company-row strong{
    color:rgba(255,255,255,.86);
    font-size:12px;
}


/* ============================================================
   CAPABILITIES
   ============================================================ */

.about-capability-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.about-capability-card{
    min-height:280px;
    padding:28px;

    border:1px solid var(--border);
    border-radius:17px;

    background:#fff;

    transition:.3s;
}

.about-capability-card:hover{
    transform:translateY(-6px);
    background:var(--navy);
    box-shadow:var(--shadow);
}

.about-capability-card > span{
    display:block;
    margin-bottom:55px;

    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.about-capability-card h3{
    margin-bottom:12px;

    color:var(--navy);

    font-size:17px;
}

.about-capability-card p{
    color:var(--muted);
    font-size:11px;
}

.about-capability-card:hover h3{
    color:#fff;
}

.about-capability-card:hover p{
    color:rgba(255,255,255,.55);
}


/* ============================================================
   VISION / MISSION
   ============================================================ */

.about-direction-header{
    max-width:850px;
    margin-bottom:45px;
}

.about-direction-header h2{
    color:var(--navy);

    font-size:clamp(35px,5vw,58px);
    line-height:1.18;
}

html[lang="th"] .about-direction-header h2{
    line-height:1.38;
}

.about-direction-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.about-direction-card{
    position:relative;

    min-height:390px;
    padding:35px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border-radius:20px;
}

.about-direction-card.vision{
    color:#fff;

    background:
        linear-gradient(
            145deg,
            #071a33,
            #0d3b69
        );
}

.about-direction-card.mission{
    border:1px solid var(--border);

    background:#f8fafc;
}

.about-direction-number{
    margin-bottom:auto;

    color:var(--orange);

    font-size:10px;
    font-weight:800;
}

.about-direction-label{
    margin-bottom:15px;

    color:var(--orange);

    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.about-direction-card h3{
    max-width:550px;

    font-size:24px;
    line-height:1.5;
}

.about-direction-card.mission h3{
    color:var(--navy);
}


/* ============================================================
   ABOUT APPROACH
   ============================================================ */

.about-approach-section{
    padding:95px 0;
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #051326,
            #0a2d52
        );
}

.about-approach-heading{
    margin-bottom:55px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:end;
}

.about-approach-heading h2{
    font-size:clamp(32px,4vw,48px);
    line-height:1.2;
}

.about-approach-heading > p{
    color:rgba(255,255,255,.56);
    font-size:14px;
}

.about-approach-flow{
    display:grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap:10px;
    align-items:center;
}

.about-approach-item{
    min-height:145px;
    padding:20px;

    display:flex;
    flex-direction:column;

    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;

    background:rgba(255,255,255,.035);
}

.about-approach-item span{
    margin-bottom:auto;

    color:var(--orange);

    font-size:8px;
    font-weight:800;
}

.about-approach-item strong{
    margin-bottom:4px;
    font-size:10px;
}

.about-approach-item small{
    color:rgba(255,255,255,.42);
    font-size:8px;
}

.about-approach-flow > b{
    color:var(--orange);
}


/* ============================================================
   VALUES
   ============================================================ */

.about-values-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);

    border-top:1px solid var(--border);
    border-left:1px solid var(--border);
}

.about-value-card{
    min-height:245px;
    padding:25px;

    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);

    transition:.25s;
}

.about-value-card:hover{
    background:var(--navy);
}

.about-value-card > span{
    display:block;
    margin-bottom:55px;

    color:var(--orange);

    font-size:9px;
    font-weight:800;
}

.about-value-card h3{
    margin-bottom:10px;

    color:var(--navy);

    font-size:17px;
}

.about-value-card p{
    color:var(--muted);
    font-size:10px;
}

.about-value-card:hover h3{
    color:#fff;
}

.about-value-card:hover p{
    color:rgba(255,255,255,.55);
}


/* ============================================================
   ECOSYSTEM
   ============================================================ */

.about-ecosystem-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-ecosystem-visual{
    padding:30px;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #071a33,
            #0d3b69
        );
}

.ecosystem-core{
    min-height:150px;
    margin-bottom:10px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
}

.ecosystem-core small{
    color:var(--orange);

    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.ecosystem-core strong{
    color:#fff;
    font-size:30px;
}

.ecosystem-layer{
    margin-top:7px;
    padding:14px 18px;

    color:rgba(255,255,255,.65);

    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;

    font-size:9px;
    letter-spacing:1px;
}

.about-ecosystem-content h2{
    margin-bottom:20px;

    color:var(--navy);

    font-size:clamp(32px,4vw,48px);
    line-height:1.2;
}

html[lang="th"] .about-ecosystem-content h2{
    line-height:1.4;
}

.about-ecosystem-content p{
    margin-bottom:25px;

    color:var(--muted);

    font-size:15px;
}

/* ============================================================
   NRN DIGITAL
   BUSINESS INQUIRY CENTER
   ============================================================ */

.contact-hero{
    position:relative;
    overflow:hidden;

    padding:155px 0 95px;

    color:#fff;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(31,108,180,.34),
            transparent 31%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(242,140,24,.11),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #041225,
            #071f3c 58%,
            #0c355f
        );
}

.contact-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:75px;
    align-items:center;
}

.contact-hero-content h1{
    margin:20px 0 24px;

    font-size:clamp(43px,5.5vw,70px);
    line-height:1.08;
    letter-spacing:-2px;
}

.contact-hero-content h1 span{
    display:block;

    margin-top:5px;
    padding-bottom:.08em;

    color:var(--orange);
}

html[lang="th"] .contact-hero-content h1{
    line-height:1.28;
    letter-spacing:-1px;
}

.contact-hero-content > p{
    max-width:690px;

    margin-bottom:35px;

    color:rgba(255,255,255,.67);

    font-size:16px;
}


/* HERO POINTS */

.contact-hero-points{
    display:flex;
    gap:8px;
}

.contact-hero-points > div{
    min-width:125px;

    padding:13px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius:8px;

    background:
        rgba(255,255,255,.025);
}

.contact-hero-points span{
    display:block;

    margin-bottom:7px;

    color:var(--orange);

    font-size:7px;
}

.contact-hero-points strong{
    font-size:9px;
}


/* ============================================================
   CONTACT VISUAL
   ============================================================ */

.contact-visual-card{
    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:19px;

    background:
        rgba(4,20,40,.72);

    box-shadow:
        0 35px 80px rgba(0,0,0,.28);

    backdrop-filter:blur(12px);
}

.contact-visual-head{
    height:65px;
    padding:0 25px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.contact-visual-head small{
    color:var(--orange);

    font-size:8px;
    font-weight:800;

    letter-spacing:2px;
}

.contact-visual-head span{
    color:rgba(255,255,255,.35);

    font-size:7px;
    letter-spacing:1px;
}

.contact-visual-body{
    padding:25px;
}

.contact-visual-line{
    padding:17px 5px;

    display:grid;
    grid-template-columns:50px 1fr;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.contact-visual-line:last-child{
    border-bottom:0;
}

.contact-visual-line span{
    color:var(--orange);
    font-size:8px;
}

.contact-visual-line strong{
    color:rgba(255,255,255,.75);

    font-size:10px;
    letter-spacing:.5px;
}

.contact-visual-footer{
    padding:18px 25px;

    display:flex;
    align-items:center;
    gap:9px;

    color:rgba(255,255,255,.32);

    border-top:
        1px solid rgba(255,255,255,.08);

    font-size:7px;
    letter-spacing:1px;
}

.contact-visual-footer span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--orange);

    box-shadow:
        0 0 12px rgba(242,140,24,.60);
}


/* ============================================================
   CONTACT MAIN
   ============================================================ */

.contact-main-grid{
    display:grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:75px;

    align-items:start;
}

.contact-information{
    position:sticky;
    top:110px;
}

.contact-information h2{
    margin-bottom:18px;

    color:var(--navy);

    font-size:clamp(30px,4vw,44px);
    line-height:1.25;
}

html[lang="th"] .contact-information h2{
    line-height:1.4;
}

.contact-information > p{
    margin-bottom:35px;

    color:var(--muted);

    font-size:13px;
    line-height:1.8;
}


/* CONTACT INFO */

.contact-info-list{
    border-top:
        1px solid var(--border);
}

.contact-info-item{
    padding:18px 3px;

    display:grid;
    grid-template-columns:45px 1fr;

    border-bottom:
        1px solid var(--border);
}

.contact-info-item > span{
    color:var(--orange);

    font-size:8px;
    font-weight:800;
}

.contact-info-item small{
    display:block;

    margin-bottom:4px;

    color:#9aa5b3;

    font-size:7px;
    letter-spacing:1px;
}

.contact-info-item strong{
    display:block;

    color:var(--navy);

    font-size:11px;
    line-height:1.5;
}


/* SECURITY NOTE */

.contact-security-note{
    margin-top:30px;
    padding:20px;

    border-left:
        3px solid var(--orange);

    background:#fff8ef;
}

.contact-security-note strong{
    display:block;

    margin-bottom:6px;

    color:var(--navy);

    font-size:11px;
}

.contact-security-note p{
    color:var(--muted);

    font-size:10px;
    line-height:1.7;
}


/* ============================================================
   FORM PANEL
   ============================================================ */

.contact-form-panel{
    padding:38px;

    border:
        1px solid var(--border);

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 22px 60px rgba(7,26,51,.07);
}

.contact-form-heading{
    margin-bottom:35px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;
}

.contact-form-heading h2{
    color:var(--navy);

    font-size:28px;
}

.contact-form-status{
    display:flex;
    align-items:center;
    gap:7px;

    color:#7b8797;

    font-size:7px;
    font-weight:800;
    letter-spacing:1px;
}

.contact-form-status span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#25a56a;

    box-shadow:
        0 0 10px rgba(37,165,106,.45);
}


/* FORM */

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 18px;
}

.form-group{
    min-width:0;
}

.form-group-full{
    grid-column:1 / -1;
}

.form-group label{
    display:block;

    margin-bottom:8px;

    color:var(--navy);

    font-size:10px;
    font-weight:700;
}

.form-group label em{
    color:var(--orange);
    font-style:normal;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;

    padding:13px 14px;

    color:var(--text);

    border:
        1px solid #dfe5ec;

    border-radius:8px;

    outline:none;

    background:#fbfcfd;

    font-family:inherit;
    font-size:12px;

    transition:.2s;
}

.form-group input,
.form-group select{
    min-height:48px;
}

.form-group textarea{
    min-height:165px;

    resize:vertical;

    line-height:1.7;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--orange);

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(242,140,24,.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#a7b0bb;
}

.form-helper{
    margin-top:7px;

    display:flex;
    justify-content:space-between;
    gap:15px;

    color:#9aa4b1;

    font-size:8px;
}


/* CONTACT METHOD */

.contact-methods{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.contact-method{
    position:relative;

    margin:0 !important;

    cursor:pointer;
}

.contact-method input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;
}

.contact-method span{
    min-width:100px;

    padding:10px 15px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid var(--border);

    border-radius:7px;

    color:#657083;

    background:#fff;

    font-size:9px;

    transition:.2s;
}

.contact-method input:checked + span{
    color:var(--orange);

    border-color:
        rgba(242,140,24,.45);

    background:#fff7ed;
}


/* CONSENT */

.contact-consent{
    display:flex !important;
    align-items:flex-start;
    gap:10px;

    cursor:pointer;
}

.contact-consent input{
    width:16px !important;
    height:16px !important;
    min-height:0 !important;

    margin-top:2px;

    flex:0 0 auto;

    accent-color:var(--orange);
}

.contact-consent span{
    color:var(--muted);

    font-size:9px;
    font-weight:400;
    line-height:1.7;
}


/* FORM ACTION */

.contact-form-action{
    margin-top:30px;
    padding-top:25px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    border-top:
        1px solid var(--border);
}

.contact-form-action strong{
    display:block;

    color:var(--navy);

    font-size:10px;
}

.contact-form-action small{
    display:block;

    margin-top:3px;

    color:#9aa5b3;

    font-size:8px;
}


/* ============================================================
   WHAT HAPPENS NEXT
   ============================================================ */

.contact-next-section{
    padding:95px 0;

    background:var(--bg-soft);
}

.contact-next-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.contact-next-card{
    min-height:215px;
    padding:25px;

    border:
        1px solid var(--border);

    border-radius:15px;

    background:#fff;
}

.contact-next-card span{
    display:block;

    margin-bottom:50px;

    color:var(--orange);

    font-size:8px;
    font-weight:800;
}

.contact-next-card h3{
    margin-bottom:8px;

    color:var(--navy);

    font-size:14px;
}

.contact-next-card p{
    color:var(--muted);

    font-size:10px;
}


/* ============================================================
   INQUIRY REVIEW MODAL
   ============================================================ */

.inquiry-modal{
    position:fixed;
    inset:0;

    z-index:9999;

    display:none;
    align-items:center;
    justify-content:center;

    padding:25px;
}

.inquiry-modal.active{
    display:flex;
}

.inquiry-modal-backdrop{
    position:absolute;
    inset:0;

    background:
        rgba(3,14,29,.78);

    backdrop-filter:blur(5px);
}

.inquiry-modal-dialog{
    position:relative;
    z-index:1;

    width:min(680px,100%);
    max-height:88vh;

    overflow:auto;

    padding:35px;

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 35px 90px rgba(0,0,0,.30);
}

.inquiry-modal-close{
    position:absolute;

    top:15px;
    right:18px;

    border:0;
    background:transparent;

    color:#8791a0;

    font-size:25px;

    cursor:pointer;
}

.inquiry-modal-dialog h2{
    margin-bottom:25px;

    color:var(--navy);

    font-size:27px;
}

.inquiry-review{
    border-top:
        1px solid var(--border);
}

.inquiry-review-row{
    padding:13px 0;

    display:grid;
    grid-template-columns:150px 1fr;
    gap:20px;

    border-bottom:
        1px solid var(--border);
}

.inquiry-review-row span{
    color:#98a2af;
    font-size:9px;
}

.inquiry-review-row strong{
    color:var(--navy);

    font-size:10px;
    font-weight:600;

    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.inquiry-modal-note{
    margin-top:20px;
    padding:15px;

    color:#79654b;

    border-radius:8px;

    background:#fff7ed;

    font-size:9px;
    line-height:1.7;
}

.inquiry-modal-actions{
    margin-top:25px;

    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.btn-outline-dark{
    color:var(--navy);

    border:
        1px solid var(--border);

    background:#fff;
}

.contact-form-notice{
    margin-top:25px;
    padding:16px 18px;

    border-radius:9px;

    font-size:10px;
    line-height:1.7;
}

.contact-form-notice-info{
    color:#745d3d;

    border:
        1px solid #f1d6ad;

    background:#fff8ed;
}

.contact-form-notice-success{
    color:#17653f;

    border:
        1px solid #b9dfca;

    background:#effaf4;
}

.contact-form-notice-success strong{
    color:#105735;
}

.contact-form-notice-success b{
    color:var(--navy);
}

.contact-form-notice-error{
    color:#9b3131;

    border:
        1px solid #edc1c1;

    background:#fff3f3;
}

/* ============================================================
   NRN SWEETALERT2
   ============================================================ */

.nrn-swal-popup{
    width:min(470px, calc(100% - 30px)) !important;

    padding:32px 30px 28px !important;

    border-radius:18px !important;

    font-family:
        "Noto Sans Thai",
        Arial,
        sans-serif !important;

    box-shadow:
        0 30px 90px rgba(7,26,51,.22) !important;
}

.nrn-swal-title{
    color:var(--navy) !important;

    font-family:
        "Noto Sans Thai",
        Arial,
        sans-serif !important;

    font-size:25px !important;
    font-weight:700 !important;
}

.nrn-swal-confirm{
    min-width:120px;

    padding:12px 25px;

    color:#fff;

    border:0;
    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--gold)
        );

    font-family:
        "Noto Sans Thai",
        Arial,
        sans-serif;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.2s;
}

.nrn-swal-confirm:hover{
    transform:translateY(-1px);

    box-shadow:
        0 8px 25px rgba(242,140,24,.25);
}

.nrn-swal-confirm-error{
    min-width:120px;

    padding:12px 25px;

    color:#fff;

    border:0;
    border-radius:8px;

    background:#c94444;

    font-family:
        "Noto Sans Thai",
        Arial,
        sans-serif;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.2s;
}

.nrn-swal-confirm-error:hover{
    transform:translateY(-1px);

    box-shadow:
        0 8px 25px rgba(201,68,68,.25);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
    padding:
        75px 0 25px;

    background:#041225;

    color:
        rgba(255,255,255,.68);
}

.footer-container{
    width:min(
        calc(100% - 40px),
        var(--container)
    );

    margin:auto;
}

.footer-grid{
    display:grid;

    grid-template-columns:
        1.6fr 1fr 1fr 1.2fr;

    gap:55px;

    padding-bottom:50px;
}

.footer-logo{
    color:#fff;

    font-size:23px;
    font-weight:800;

    letter-spacing:1px;

    margin-bottom:10px;
}

.footer-logo .footer-logo-r{
    color:var(--orange);
}

.footer-tagline{
    color:var(--orange) !important;

    font-size:12px !important;

    font-weight:700;

    margin-bottom:17px;
}

.footer-company p{
    max-width:360px;

    font-size:12px;
}

.footer-column h4{
    color:#fff;

    font-size:13px;

    margin-bottom:17px;
}

.footer-column a,
.footer-column p{
    display:block;

    margin:9px 0;

    color:
        rgba(255,255,255,.55);

    font-size:11px;

    transition:.2s;
}

.footer-column a:hover{
    color:var(--orange);
}

.footer-bottom{
    padding-top:23px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    border-top:
        1px solid rgba(255,255,255,.08);

    font-size:10px;

    color:
        rgba(255,255,255,.40);
}



/* ============================================================
   BACK TO TOP
   ============================================================ */

.back-to-top{
    position:fixed;

    right:28px;
    bottom:28px;

    z-index:900;

    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:50%;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--gold)
        );

    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        0 4px 16px rgba(242,140,24,.20);

    font-family:
        "Noto Sans Thai",
        Arial,
        sans-serif;

    font-size:22px;
    font-weight:700;
    line-height:1;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transform:
        translateY(14px);

    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.back-to-top.show{
    opacity:1;
    visibility:visible;

    transform:
        translateY(0);

    pointer-events:auto;
}


.back-to-top:hover{
    transform:
        translateY(-3px);

    box-shadow:
        0 14px 34px rgba(0,0,0,.22),
        0 6px 20px rgba(242,140,24,.28);
}


.back-to-top:active{
    transform:
        translateY(-1px);
}


.back-to-top:focus-visible{
    outline:
        3px solid rgba(242,140,24,.30);

    outline-offset:4px;
}


/* Mobile */

@media (max-width:700px){

    .back-to-top{
        right:18px;
        bottom:18px;

        width:42px;
        height:42px;

        font-size:20px;
    }

}

/* ============================================================
   ANIMATION
   ============================================================ */

.reveal{
    opacity:0;

    transform:
        translateY(24px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.show{
    opacity:1;

    transform:none;
}

/* ============================================================
   SOFTWARE IMAGE
   ============================================================ */

.software-image{
    position:relative;
    width:100%;
    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:
        0 30px 70px rgba(7,26,51,.18);
}

.software-image img{
    display:block;

    width:100%;
    height:auto;

    border-radius:22px;

    object-fit:cover;
}

/* NRN LOGO 3D ROTATION - TEST */

.tech-core .tech-core-logo {
    animation: nrnLogoSpin 8s linear infinite !important;
    transform-origin: center center;
    transform-style: preserve-3d;
}

.tech-core:hover .tech-core-logo {
    animation-play-state: paused !important;
}

@keyframes nrnLogoSpin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* MOVE LOGO */
.nrn-flagship-mark .nrn-flagship-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* THEBANK ONE LOGO BACKGROUND */
.nrn-flagship-card--thebank .nrn-flagship-mark {
    background: #F0F7FF !important;
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow: 0 6px 20px rgba(0, 25, 60, 0.18);
}

/* ============================================================
   NRN DIGITAL - SOLUTIONS CARD ANIMATION
   5 CARDS / 3 SECONDS EACH / 15 SECONDS TOTAL
   ============================================================ */

@keyframes nrnSolutionsGlow {

    0%, 19.99% {
        background-color: #e8f5ff;
        border-color: #91cef5;
        box-shadow: 0 8px 24px rgba(48, 145, 210, 0.12);
    }

    20%, 100% {
        background-color: #ffffff;
        border-color: #dce4ee;
        box-shadow: none;
    }
}

/* ทุกการ์ดใช้ Animation เดียวกัน */
.solutions-grid > .solution-card {
    animation: nrnSolutionsGlow 15s steps(1, end) infinite;
}

/* เริ่มไล่จากใบที่ 1 ไปใบที่ 5 */
.solutions-grid > .solution-card:nth-child(1) {
    animation-delay: 0s;
}

.solutions-grid > .solution-card:nth-child(2) {
    animation-delay: -12s;
}

.solutions-grid > .solution-card:nth-child(3) {
    animation-delay: -9s;
}

.solutions-grid > .solution-card:nth-child(4) {
    animation-delay: -6s;
}

.solutions-grid > .solution-card:nth-child(5) {
    animation-delay: -3s;
}

/* เมาส์อยู่บนการ์ดใดก็ได้ หยุดทั้งหมด */
.solutions-grid:has(> .solution-card:hover) > .solution-card {
    animation-play-state: paused;
}

/* ลดการเคลื่อนไหวตามการตั้งค่าของผู้ใช้ */
@media (prefers-reduced-motion: reduce) {
    .solutions-grid > .solution-card {
        animation: none;
    }
}

/* ============================================================
   NRN DIGITAL - SOLUTIONS ACTIVE CARD
   ============================================================ */

.solutions-grid > .solution-card {
    background-color: #ffffff;
    transition:
        background-color 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}

.solutions-grid > .solution-card.nrn-card-active {
    background-color: #e2f3ff !important;
    border-color: #79bff0 !important;
    box-shadow: 0 8px 25px rgba(35, 135, 205, 0.14) !important;
}

/* ============================================================
   NRN DIGITAL - SOFTWARE IMAGE FADE SLIDER
   ============================================================ */

.nrn-software-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 20px;
    background: #f3f7fb;
}

.nrn-software-slider .nrn-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.8s ease-in-out,
        visibility 0.8s ease-in-out;
}

.nrn-software-slider .nrn-slide.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   NRN DIGITAL - SOFTWARE SLIDER MODAL
   ============================================================ */

.nrn-software-slider {
    cursor: zoom-in;
}

.nrn-image-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 15, 30, 0.94);
    padding: 60px 75px;
}

.nrn-image-modal.open {
    display: flex;
}

.nrn-modal-lock {
    overflow: hidden;
}

.nrn-modal-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.nrn-modal-close,
.nrn-modal-prev,
.nrn-modal-next {
    position: absolute;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}

.nrn-modal-close:hover,
.nrn-modal-prev:hover,
.nrn-modal-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.nrn-modal-close {
    top: 20px;
    right: 25px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 32px;
}

.nrn-modal-prev,
.nrn-modal-next {
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 60px;
    border-radius: 12px;
    font-size: 28px;
}

.nrn-modal-prev {
    left: 15px;
}

.nrn-modal-next {
    right: 15px;
}

.nrn-modal-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 2px;
}

@media (max-width: 768px) {
    .nrn-image-modal {
        padding: 65px 45px;
    }

    .nrn-modal-prev,
    .nrn-modal-next {
        width: 36px;
        height: 48px;
        font-size: 22px;
    }

    .nrn-modal-prev {
        left: 4px;
    }

    .nrn-modal-next {
        right: 4px;
    }
}


/* ============================================================
   NRN DIGITAL - DOMAIN CHECKER
   ============================================================ */

.nrn-domain-section {
    padding: 25px 0 90px;
    background: #fff;
}

.domain-check-box {
    max-width: 950px;
    margin: 0 auto;
    padding: 48px 55px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0b2341, #16436b);
    box-shadow: 0 20px 55px rgba(10, 35, 65, .16);
    text-align: center;
}

.domain-check-label {
    margin-bottom: 12px;
    color: #ffad4b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.domain-check-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(25px, 3vw, 35px);
    line-height: 1.35;
}

.domain-check-desc {
    max-width: 680px;
    margin: 0 auto 28px;
    color: #d4e2ef;
    font-size: 15px;
    line-height: 1.8;
}

.domain-check-form {
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
}

.domain-check-form input {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    border: none;
    outline: none;
    background: transparent;
    color: #16324e;
    font-size: 16px;
}

.domain-tld {
    padding: 0 16px;
    color: #53677b;
    font-weight: 800;
    font-size: 17px;
}

.domain-check-btn {
    padding: 15px 24px;
    border: 0;
    border-radius: 9px;
    background: #f08e20;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s;
}

.domain-check-btn:hover {
    background: #d97706;
}

.domain-check-btn:disabled {
    opacity: .6;
    cursor: wait;
}

.domain-check-result {
    margin-top: 18px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

.domain-check-result.available { color: #a5f3c1; }
.domain-check-result.taken { color: #ffc2c2; }
.domain-check-result.error { color: #ffd08a; }
.domain-check-result.loading { color: #d8e7f6; }


/* ============================================================
   NRN DIGITAL - MULTI DOMAIN RESULTS
   ============================================================ */

.domain-results {
    max-width: 780px;
    margin: 25px auto 0;
    text-align: left;
}

.domain-results-heading {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 15px;
    text-align: center;
}

.domain-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 18px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.09);
}

.domain-result-name {
    color: #ffffff;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.domain-result-status {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.domain-result-status.registered {
    color: #ffc0c0;
}

.domain-result-status.available {
    color: #a5f3c1;
}

.domain-result-status.unknown {
    color: #ffd08a;
}

.domain-result-status.checking {
    color: #d4e2ef;
}