@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700;800&display=swap');

:root{
    --bg:#e7e8ea;
    --panel:#ffffff;
    --panel2:#f4f5f6;
    --line:#d4d6d9;
    --text:#202124;
    --muted:#686b70;
    --blue:#168cff;
    --blue2:#00b7ff;
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Pretendard,Arial,sans-serif;
    line-height:1.5;
}

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

.section{
    max-width:1340px;
    margin:auto;
    padding:100px 34px;
}

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

.header{
    height:72px;
    border-bottom:1px solid rgba(0,0,0,.10);
    display:flex;
    align-items:center;
    padding:0 max(34px,calc((100vw - 1340px)/2));
    gap:35px;
    position:sticky;
    top:0;
    background:rgba(231,232,234,.88);
    backdrop-filter:blur(18px);
    z-index:10;
}

.brand{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

.brand b{
    font-size:20px
}

.brand b span{
    color:var(--blue)
}

.brand small{
    font-size:12px;
    color:#68707a;
    margin-left:12px;
    border-left:1px solid #c7cbd0;
    padding-left:14px;
}

.brand-mark{
    width:25px;
    height:25px;
    border:5px solid var(--blue);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:transparent;
    position:relative;
}

.brand-mark:after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    background:var(--bg);
    border-radius:50%;
}

.header nav{
    display:flex;
    gap:35px;
    margin:auto;
    font-size:13px;
    color:#555960;
}

.header nav a:hover{
    color:#111
}

.header-right{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12px;
}

.header-right i{
    font-style:normal;
    color:#a0a3a7
}

.lang{
    color:#888b90
}

.lang.active{
    color:#202124;
    font-weight:600
}

.outline-btn,
.primary-btn{
    border:1px solid var(--blue);
    border-radius:30px;
    padding:11px 20px;
    display:inline-flex;
    gap:12px;
    align-items:center;
}

.outline-btn{
    color:#222;
}

.outline-btn:hover{
    background:rgba(22,140,255,.08)
}

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

.hero{
    min-height:610px;
    padding-top:75px;
    padding-bottom:65px;
    display:grid;
    grid-template-columns:48% 52%;
    align-items:center;
    overflow:hidden;
}

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

.eyebrow{
    color:#087fd9;
    font-size:12px;
    letter-spacing:.08em;
    font-weight:700;
    margin:0 0 14px;
}

.hero h1{
    font-size:62px;
    line-height:1.02;
    letter-spacing:-.045em;
    margin:0 0 18px;
    font-weight:800;
}

.hero h1 span,
.hero h2 span,
.section-intro h2 span,
.about h2 span,
.cta h2 span{
    color:var(--blue)
}

.hero h2{
    font-size:27px;
    margin:0 0 18px;
    letter-spacing:-.03em;
}

.hero-desc{
    color:#62666b;
    font-size:15px;
    line-height:1.9;
}

.actions{
    display:flex;
    gap:24px;
    margin-top:28px;
}

.primary-btn{
    background:linear-gradient(100deg,#158bff,#09b7ff);
    border:0;
    color:#fff;
    font-weight:700;
    box-shadow:0 12px 35px rgba(0,145,255,.18);
}

.text-btn{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13px;
    color:#555960;
}

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

.hero-visual{
    height:480px;
    position:relative;
}

.glow{
    position:absolute;
    width:600px;
    height:600px;
    left:20px;
    top:-90px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(0,112,255,.16),
        transparent 65%
    );
}

.orb{
    position:absolute;
    border:1px solid rgba(18,139,255,.30);
    border-radius:50%;
    transform:rotate(-25deg);
}

.orb1{
    width:570px;
    height:190px;
    left:20px;
    top:135px;
}

.orb2{
    width:570px;
    height:300px;
    left:60px;
    top:65px;
}

.phone{
    position:absolute;
    border:1px solid #414347;
    background:#161616;
    border-radius:30px;
    padding:9px;
    box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.phone-main{
    width:220px;
    height:420px;
    left:265px;
    top:15px;
    transform:rotate(7deg);
    z-index:2;
}

.phone-back{
    width:190px;
    height:360px;
    left:145px;
    top:80px;
    transform:rotate(-10deg);
    opacity:.72;
}

.phone-screen{
    height:100%;
    border-radius:22px;
    background:linear-gradient(160deg,#242424,#141414);
    padding:28px 15px;
    overflow:hidden;
}

.led-screen{
    background:radial-gradient(
        circle at 50% 35%,
        #2e2e2e,
        #111111 68%
    );
}

.notch{
    position:absolute;
    z-index:3;
    top:8px;
    left:75px;
    width:70px;
    height:20px;
    background:#101010;
    border-radius:0 0 14px 14px;
}

.mini-nav{
    font-size:7px;
    color:#9a9a9a;
    text-align:center;
}

.led-logo{
    font-size:40px;
    font-weight:900;
    letter-spacing:4px;
    margin-top:85px;
    text-align:center;
    background:linear-gradient(
        90deg,
        #ff3939,
        #ffe22d,
        #35df6c,
        #278fff,
        #a64cff
    );
    color:transparent;
    background-clip:text;
}

.led-caption{
    text-align:center;
    font-size:13px;
    margin-top:5px;
}

.led-dots{
    text-align:center;
    color:#24a4ff;
    font-size:7px;
    margin-top:55px;
}

.led-mini{
    padding-top:90px;
    text-align:center;
}

.led-mini strong{
    font-size:40px;
    color:#1ca0ff;
    display:block;
}

.led-mini em{
    font-style:normal;
    font-size:10px;
}

.floating-card{
    position:absolute;
    background:rgba(255,255,255,.92);
    border:1px solid #d4d6d9;
    border-radius:14px;
    padding:13px 16px;
    z-index:4;
    box-shadow:0 15px 45px rgba(0,0,0,.12);
    backdrop-filter:blur(12px);
}

.floating-card small,
.floating-card span{
    display:block;
    color:#69727d;
    font-size:9px;
}

.floating-card strong{
    display:block;
    font-size:25px;
    margin:2px 0;
    color:#222;
}

.timer-card{
    left:120px;
    top:30px;
}

.bp-card{
    right:20px;
    bottom:55px;
}

.vertical-copy{
    position:absolute;
    right:0;
    top:145px;
    color:#92969b;
    font-size:18px;
    line-height:1.35;
    letter-spacing:.04em;
}

/* =========================
   BUILD
========================= */

.build{
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:260px 1fr;
    gap:45px;
    padding-top:75px;
    padding-bottom:75px;
}

.section-intro h2,
.products h2,
.about h2{
    font-size:31px;
    line-height:1.25;
    margin:0 0 16px;
    letter-spacing:-.035em;
}

.section-intro>p:not(.eyebrow){
    color:#666a70;
    font-size:13px;
    line-height:1.8;
}

.blue-line{
    display:block;
    width:24px;
    height:2px;
    background:var(--blue);
    margin-top:24px;
}

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

.info-card{
    border:1px solid var(--line);
    background:linear-gradient(
        145deg,
        #ffffff,
        #f5f6f7
    );
    border-radius:10px;
    padding:25px;
    min-height:190px;
    position:relative;
    transition:.25s;
    box-shadow:0 8px 25px rgba(0,0,0,.035);
}

.info-card:hover,
.product-card:hover{
    border-color:#8abff0;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.icon{
    width:40px;
    height:40px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#168cff;
    background:#e7f3ff;
    font-size:20px;
}

.info-card h3{
    font-size:17px;
    margin:15px 0 7px;
}

.info-card p{
    font-size:12px;
    color:#6c7075;
    line-height:1.65;
    margin:0;
}

.info-card small{
    display:block;
    color:#8a8d91;
    font-size:9px;
    margin-top:18px;
}

.info-card>b{
    position:absolute;
    right:22px;
    bottom:20px;
    color:#777;
}

/* =========================
   PRODUCTS
========================= */

.products{
    border-top:1px solid var(--line);
    padding-top:75px;
}

.products-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:25px;
}

.products-head>a{
    color:#087fd9;
    font-size:11px;
}

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

.product-card{
    height:190px;
    border:1px solid var(--line);
    border-radius:10px;
    background:linear-gradient(
        145deg,
        #ffffff,
        #f5f6f7
    );
    padding:20px;
    display:flex;
    gap:15px;
    position:relative;
    overflow:hidden;
    transition:.25s;
    box-shadow:0 8px 25px rgba(0,0,0,.035);
}

.app-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    display:grid;
    place-items:center;
    flex:none;
    font-weight:900;
}

.led-icon{
    background:#1e1e1e;
    color:#ff2d40;
    border:1px solid #3a3a3a;
}

.set-icon{
    background:#e58b22;
    color:#15110b;
}

.bp-icon{
    background:#0bb9a6;
    color:white;
}

.product-info{
    padding-right:55px;
}

.product-info h3{
    font-size:16px;
    margin:1px 0 7px;
}

.product-info p{
    font-size:10px;
    color:#686c72;
    line-height:1.6;
    margin:0;
}

.tags{
    display:flex;
    gap:5px;
    margin-top:12px;
    flex-wrap:wrap;
}

.tags span{
    font-size:8px;
    border:1px solid #d1d4d7;
    color:#70747a;
    background:#fafafa;
    border-radius:10px;
    padding:3px 7px;
}

.product-phone{
    position:absolute;
    right:-25px;
    bottom:-45px;
    width:105px;
    height:145px;
    border:1px solid #414347;
    border-radius:17px;
    background:#1c1c1c;
    transform:rotate(7deg);
    padding:10px;
}

.screen-text{
    margin-top:35px;
    font-size:25px;
    font-weight:900;
    color:#20a0ff;
}

.set-phone{
    background:#1c1c1c;
}

.timer-ring{
    border:3px solid #14b8a6;
    border-radius:50%;
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    font-size:10px;
    margin:auto;
    margin-top:15px;
    color:#fff;
}

.bp-phone{
    background:#1c1c1c;
}

.bp-number{
    font-size:11px;
    margin-top:20px;
    color:#55dfd0;
}

.chart{
    height:30px;
    border-bottom:1px solid #23bcb0;
    transform:skewY(-12deg);
    margin-top:15px;
}

.card-arrow{
    position:absolute;
    right:17px;
    bottom:17px;
    width:30px;
    height:30px;
    border:1px solid #d0d3d6;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    color:#555;
}

/* =========================
   ABOUT
========================= */

.about{
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:270px 1fr;
    gap:40px;
    position:relative;
}

.about-copy{
    padding-left:20px;
    border-left:1px solid #d0d3d6;
    color:#686c72;
    font-size:12px;
    line-height:1.9;
}

.values{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    padding-top:30px;
    margin-top:10px;
    gap:40px;
}

.values div{
    position:relative;
    padding-left:40px;
}

.values span{
    position:absolute;
    left:0;
    top:0;
    color:#159bff;
    font-size:23px;
}

.values h3{
    font-size:13px;
    margin:0 0 4px;
}

.values p{
    font-size:10px;
    color:#73777c;
    margin:0;
}

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

.cta{
    text-align:center;
    border-top:1px solid var(--line);
    padding-top:100px;
    padding-bottom:110px;
}

.cta h2{
    font-size:48px;
    line-height:1.05;
    margin:0 0 28px;
    letter-spacing:-.04em;
}

/* =========================
   FOOTER
========================= */

footer{
    border-top:1px solid var(--line);
    max-width:1340px;
    margin:auto;
    padding:28px 34px;
    display:flex;
    align-items:flex-start;
    gap:35px;
    color:#70747a;
    font-size:10px;
    flex-wrap:wrap;
}

.footer-nav{
    display:flex;
    gap:25px;
    margin:auto;
}

.company-info{
    width:100%;
    display:flex;
    gap:8px 18px;
    flex-wrap:wrap;
    color:#70747a;
    font-size:10px;
    padding-top:10px;
    border-top:1px solid rgba(0,0,0,.07);
}

.company-info span{
    white-space:nowrap
}

.company-info a{
    color:#60656b
}

.company-info a:hover{
    color:#159bff
}

.footer-copy{
    white-space:nowrap;
    margin-left:auto;
}

/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .company-info{
        gap:7px 14px;
        line-height:1.5
    }

    .footer-copy{
        margin-left:0
    }

    .header nav{
        display:none
    }

    .header{
        padding:0 20px
    }

    .header-right{
        margin-left:auto
    }

    .brand small{
        display:none
    }

    .section{
        padding:70px 22px
    }

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

    .hero h1{
        font-size:48px
    }

    .hero-visual{
        margin-top:35px;
        height:430px;
        transform:scale(.88);
        transform-origin:left top
    }

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

    .build-grid,
    .product-grid{
        grid-template-columns:1fr
    }

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

    .about-copy{
        padding-left:0;
        border-left:0
    }

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

    .footer-nav{
        display:none
    }

    footer{
        padding:25px 20px
    }

    .footer-copy{
        margin-left:auto
    }
}

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

@media(max-width:520px){

    .header-right .outline-btn{
        display:none
    }

    .hero h1{
        font-size:39px
    }

    .hero h2{
        font-size:21px
    }

    .hero-visual{
        transform:scale(.68);
        width:650px
    }

    .products-head{
        align-items:start
    }

    .cta h2{
        font-size:38px
    }
}