/*
=====================================

LUNQHAL Web Design System V1.1

Official Support Center Style

=====================================
*/


/* =====================
   GLOBAL
===================== */


* {

box-sizing:border-box;

}


html {

scroll-behavior:smooth;

}


body {

margin:0;

background:#ffffff;

color:#222;

font-family:

-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
Helvetica,
sans-serif;

line-height:1.6;

}


a {

color:#111;

text-decoration:none;

}


img {

max-width:100%;

display:block;

}



/* =====================
   CONTAINER
===================== */


.lq-container {

max-width:1000px;

margin:auto;

padding:0 24px;

}



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


.lq-header {

border-bottom:1px solid #eeeeee;

background:#ffffff;

}


.lq-header .lq-container {

height:72px;

display:flex;

align-items:center;

justify-content:space-between;

}


.lq-logo {

font-size:24px;

font-weight:700;

letter-spacing:1.5px;

color:#111;

}


.lq-header-title {

font-size:15px;

color:#666;

}



/* =====================
   BACK LINK
===================== */


.lq-back {

margin-top:25px;

margin-bottom:15px;

}


.lq-back a {

font-size:14px;

color:#555;

}


.lq-back a:hover {

color:#111;

}



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


.lq-hero {

text-align:center;

padding:50px 0 35px;

}



.lq-hero h1 {

font-size:40px;

line-height:1.2;

margin:20px 0;

font-weight:700;

}


.lq-hero-image {

width:100%;

max-width:760px;

margin:0 auto 30px;

border-radius:18px;

}



.lq-subtitle {

font-size:22px;

font-weight:600;

margin-bottom:15px;

}



.lq-text {

font-size:16px;

color:#555;

line-height:1.7;

}



/* =====================
   HEADINGS
===================== */


.lq-heading {

font-size:28px;

margin:0 0 25px;

font-weight:700;

color:#111;

}



/* =====================
   COMMON CARD
===================== */


.lq-card {

background:#ffffff;

border-radius:18px;

padding:35px;

margin:35px 0;

border:1px solid #eeeeee;

}



/* =====================
   BASIC GRID
===================== */


.lq-grid {

display:grid;

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

gap:22px;

}



/* =====================
   FEATURE CARD
===================== */


.lq-feature {

display:block;

background:#fafafa;

border-radius:16px;

padding:25px;

text-align:center;

cursor:pointer;

transition:.25s ease;

}


.lq-feature:hover {

transform:translateY(-5px);

box-shadow:

0 10px 25px rgba(0,0,0,.08);

}



.lq-feature img {

width:55px;

height:55px;

margin:0 auto 15px;

}



.lq-feature h3 {

font-size:18px;

margin:10px 0;

}



.lq-feature p {

font-size:14px;

color:#666;

}



.lq-feature span {

font-weight:600;

font-size:14px;

}



/* =====================
   QUICK ACCESS CARD

   Homepage Main Navigation

===================== */


.lq-quick-access {

display:grid;

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

gap:24px;

margin-top:30px;

}



.lq-access-card {


display:block;


background:#ffffff;


border:1px solid #e8e8e8;


border-radius:18px;


padding:30px;


transition:.25s ease;


}


.lq-access-card:hover {


transform:translateY(-5px);


box-shadow:

0 12px 30px rgba(0,0,0,.08);


}



.lq-access-card img {


width:52px;

height:52px;

margin-bottom:18px;


}



.lq-access-card h3 {


font-size:20px;

margin:0 0 10px;


}



.lq-access-card p {


font-size:15px;

color:#555;


}



.lq-card-action {


display:inline-block;

margin-top:18px;

font-size:14px;

font-weight:600;


}



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

   Why Choose LUNQHAL Support

===================== */


.lq-support-nav {


display:grid;


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


gap:20px;


}



.lq-support-nav a {


display:block;


background:#fafafa;


border-radius:16px;


padding:25px;


transition:.25s;


}



.lq-support-nav a:hover {


transform:translateY(-4px);


background:#f5f5f5;


}



.lq-support-nav img {


width:48px;


height:48px;


margin-bottom:15px;


}



.lq-support-nav h3 {


font-size:18px;


margin:10px 0;


}



.lq-support-nav p {


font-size:14px;


color:#666;


}



/* =====================
   PRODUCT IMAGE
===================== */


.lq-content-image {


width:100%;


max-width:760px;


margin:25px auto;


border-radius:16px;


}

/* =====================
   QUICK START SYSTEM

   SL016 Installation Flow

===================== */


.lq-quick-grid {


display:grid;


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


gap:20px;


margin-top:30px;


}



.lq-quick-step {


background:#ffffff;


border:1px solid #eeeeee;


border-radius:18px;


padding:28px 20px;


text-align:center;


transition:.25s ease;


}



.lq-quick-step:hover {


transform:translateY(-5px);


box-shadow:

0 10px 25px rgba(0,0,0,.08);


}



.lq-quick-step img {


width:56px;


height:56px;


margin:0 auto 18px;


}



.lq-quick-step h3 {


font-size:18px;


margin:0 0 10px;


color:#111;


}



.lq-quick-step p {


font-size:14px;


line-height:1.6;


color:#555;


}



/* =====================
   PRODUCT FEATURE ICONS

   SL016 Highlights

===================== */


.lq-feature-grid {


display:grid;


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


gap:20px;


}



.lq-feature-box {


text-align:center;


background:#fafafa;


border-radius:16px;


padding:25px;


}



.lq-feature-box img {


width:50px;


height:50px;


margin:0 auto 15px;


}



.lq-feature-box h3 {


font-size:18px;


margin:10px 0;


}



.lq-feature-box p {


font-size:14px;


color:#666;


}




/* =====================
   LIGHTING MODE SYSTEM

   SL016 Three Modes

===================== */


.lq-mode-grid {


display:grid;


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


gap:22px;


}



.lq-mode-card {


background:#ffffff;


border:1px solid #eeeeee;


border-radius:18px;


padding:25px;


}



.lq-mode-card h3 {


font-size:18px;


margin-top:0;


}



.lq-mode-card strong {


color:#111;


}



.lq-mode-card p {


font-size:14px;


color:#555;


}



.lq-mode-number {


font-size:32px;


font-weight:700;


margin-bottom:15px;


color:#111;


}



/* =====================
   INSTALLATION STEP

===================== */


.lq-step {


background:#fafafa;


border-radius:14px;


padding:22px;


margin:18px 0;


}



.lq-step h3 {


margin-top:0;


font-size:19px;


}



.lq-step p {


font-size:15px;


color:#555;


}



/* =====================
   FAQ SYSTEM

===================== */


.lq-faq {


background:#ffffff;


border:1px solid #e8e8e8;


border-radius:16px;


padding:25px;


margin:18px 0;


transition:.2s;


}



.lq-faq:hover {


box-shadow:

0 5px 18px rgba(0,0,0,.06);


}



.lq-faq h3 {


margin-top:0;


font-size:18px;


color:#111;


}



.lq-faq p {


font-size:15px;


color:#555;


}



.lq-list {


padding-left:25px;


}



.lq-list li {


margin-bottom:10px;


}



/* =====================
   PDF DOWNLOAD BUTTON

===================== */


.lq-button {


display:inline-flex;


align-items:center;


justify-content:center;


gap:8px;


background:#111;


color:#ffffff;


padding:15px 32px;


border-radius:30px;


font-weight:600;


font-size:15px;


transition:.25s;


}



.lq-button:hover {


background:#333;


transform:translateY(-2px);


}



.lq-download-box {


text-align:center;


background:#fafafa;


border-radius:18px;


padding:35px;


}



.lq-download-box img {


width:50px;


margin:0 auto 15px;


}



/* =====================
   CONTACT SYSTEM

===================== */


.lq-contact-box {


background:#fafafa;


border-radius:18px;


padding:35px;


text-align:center;


}



.lq-contact-box h3 {


font-size:22px;


margin-top:0;


}



.lq-email {


font-size:18px;


font-weight:600;


color:#111;


}



/* =====================
   CENTER

===================== */


.lq-center {


text-align:center;


}



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

===================== */


.lq-footer {


margin-top:60px;


padding:35px 0;


border-top:1px solid #eeeeee;


text-align:center;


color:#666;


font-size:14px;


}



.lq-footer h3 {


color:#111;


margin-bottom:10px;


}



/* =====================
   TABLE / SPEC

===================== */


.lq-table {


width:100%;


border-collapse:collapse;


margin:20px 0;


}



.lq-table th {


text-align:left;


background:#fafafa;


padding:14px;


border-bottom:1px solid #eee;


}



.lq-table td {


padding:14px;


border-bottom:1px solid #eee;


font-size:15px;


}




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

===================== */


@media(max-width:900px){


.lq-grid {


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


}



.lq-quick-access {


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


}



.lq-support-nav {


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


}



.lq-quick-grid {


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


}



.lq-feature-grid {


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


}



.lq-mode-grid {


grid-template-columns:1fr;


}



}



@media(max-width:600px){


.lq-container {


padding:0 16px;


}



.lq-header .lq-container {


height:64px;


}



.lq-logo {


font-size:20px;


}



.lq-header-title {


font-size:13px;


}



.lq-hero {


padding-top:35px;


}



.lq-hero h1 {


font-size:30px;


}



.lq-subtitle {


font-size:18px;


}



.lq-heading {


font-size:23px;


}



.lq-card {


padding:22px 18px;


margin:25px 0;


}



.lq-grid {


grid-template-columns:1fr;


}



.lq-quick-access {


grid-template-columns:1fr;


}



.lq-support-nav {


grid-template-columns:1fr;


}



.lq-quick-grid {


grid-template-columns:1fr;


}



.lq-feature-grid {


grid-template-columns:1fr;


}



.lq-quick-step {


padding:22px 15px;


}



.lq-quick-step img {


width:48px;


height:48px;


}



.lq-button {


width:100%;


max-width:320px;


}



.lq-footer {


margin-top:40px;


}


}