@charset "utf-8";

/* ====================================================================
   Shine Clinic - Chinese Landing Page
   Fully self-contained: no dependency on the main theme's css/common.css
   or css/default.css, so it can't collide with (or be broken by) theme
   CSS changes.

   Palette: deep blue + soft lavender (premium medical/aesthetic tone).
   All tokens (color / font / spacing / radius / shadow / motion) live
   on .landing-chn as CSS custom properties so the whole page can be
   restyled from one place.
   ==================================================================== */

.landing-chn{
	/* color - deep blue x lavender */
	--c-navy:#1B2340;        /* heading / dark surface base */
	--c-deep-blue:#1F3C88;   /* primary brand blue */
	--c-violet:#7B61FF;      /* accent / gradient end */
	--c-lavender:#C9B6FF;    /* soft accent, borders, icons */
	--c-lavender-light:#F4F0FF; /* light lavender bg tint */
	--c-blue-soft:#EAF1FF;   /* light blue bg tint */
	--c-text:#6B7280;        /* gray body text */
	--c-text-soft:#7A8294;
	--c-text-faint:#9AA3C0;  /* secondary text on dark navy */
	--c-border:#E3E8F5;      /* blue-tinted hairline border */
	--c-bg-soft:#F6F7FC;     /* section wash */
	--c-white:#fff;

	--gradient-brand:linear-gradient(135deg, var(--c-deep-blue) 0%, var(--c-violet) 100%);
	--gradient-soft:linear-gradient(135deg, var(--c-blue-soft) 0%, var(--c-lavender-light) 100%);
	--gradient-dark:linear-gradient(160deg, var(--c-navy) 0%, var(--c-deep-blue) 130%);

	/* typography - Chinese-friendly font stack */
	--font-base:'Pretendard Variable','Pretendard','PingFang SC','Microsoft YaHei','Hiragino Sans GB','Noto Sans SC','SUIT','Helvetica Neue',Arial,sans-serif;
	--fs-body:18px;
	--lh-body:1.8;

	/* spacing scale */
	--sp-1:8px;
	--sp-2:16px;
	--sp-3:24px;
	--sp-4:32px;
	--sp-5:48px;
	--sp-6:64px;
	--sp-7:96px;
	--sp-section:150px;
	--sp-section-sm:90px;

	/* radius */
	--radius-sm:10px;
	--radius-md:20px;
	--radius-lg:28px;
	--radius-pill:999px;

	/* shadow (blue/violet tinted, not flat black) */
	--shadow-sm:0 8px 24px rgba(31,60,136,.08);
	--shadow-md:0 24px 48px rgba(31,60,136,.14);
	--shadow-lg:0 34px 70px rgba(31,60,136,.20);
	--shadow-accent:0 28px 56px rgba(123,97,255,.24);

	/* motion */
	--ease:cubic-bezier(.22,.61,.36,1);
	--t-fast:.25s var(--ease);
	--t-base:.4s var(--ease);
	--t-slow:.9s var(--ease);
}

/* ---------------------------------- reset ---------------------------------- */
.landing-chn,
.landing-chn *{box-sizing:border-box;}
.landing-chn{
	margin:0;padding:0;
	font-family:var(--font-base);
	font-size:var(--fs-body);
	color:var(--c-text);
	line-height:var(--lh-body);
	background:var(--c-white);
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
}
.landing-chn h1,.landing-chn h2,.landing-chn h3,.landing-chn h4,.landing-chn p,.landing-chn ul{margin:0;padding:0;}
.landing-chn ul{list-style:none;}
.landing-chn h1,.landing-chn h2,.landing-chn h3,.landing-chn h4{color:var(--c-navy);font-weight:700;}
.landing-chn a{color:#fff;text-decoration:none;transition:color var(--t-fast);}
.landing-chn img{max-width:100%;display:block;border:0;}

.lc-container{width:90%;max-width:1240px;margin:0 auto;}
.lc-hidden-xs{display:inline;}
@media (max-width:600px){.lc-hidden-xs{display:none;}}

/* ---------------------------------- animation ---------------------------------- */
@keyframes lcFadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

.lc-fade{opacity:0;animation:lcFadeUp var(--t-slow) forwards;animation-delay:var(--d,0s);}

.lc-reveal{opacity:0;transform:translateY(36px);transition:opacity var(--t-slow),transform var(--t-slow);transition-delay:var(--d,0s);}
.lc-reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---------------------------------- buttons ---------------------------------- */
.lc-btn{
	display:inline-block;padding:18px 40px;border-radius:var(--radius-pill);
	font-weight:600;font-size:16px;letter-spacing:-.01em;border:1px solid transparent;
	min-height:56px;line-height:20px;transition:transform var(--t-base),box-shadow var(--t-base),background var(--t-base),color var(--t-base),filter var(--t-base);
}
.lc-btn-primary{background:#fff; color: #111 !important; box-shadow:var(--shadow-accent);}
.lc-btn-primary:hover{filter:brightness(1.08);transform:translateY(-3px);box-shadow:0 30px 60px rgba(123,97,255,.34);}
.lc-btn-dark{background:var(--c-navy);color:var(--c-white);padding:13px 28px;font-size:14px;min-height:46px;line-height:20px;}
.lc-btn-dark:hover{background:var(--c-deep-blue);transform:translateY(-2px);}
.lc-btn-outline{border-color:rgba(255,255,255,.7);color:var(--c-white);}
.lc-btn-outline:hover{background:var(--gradient-brand);border-color:transparent;color:var(--c-white);transform:translateY(-3px);}
.lc-btn-lg{padding:22px 52px;font-size:18px;min-height:62px;}

.lc-eyebrow{display:inline-block;color:var(--c-deep-blue);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:14px;margin-bottom:var(--sp-2);}

/* ---------------------------------- header ---------------------------------- */
.lc-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--c-border);}
.lc-header-in{display:flex;align-items:center;justify-content:space-between;padding:20px 0;}
.lc-logo img{height:56px;}
.lc-header-cta{display:flex;align-items:center;gap:var(--sp-3);}
.lc-lang{display:flex;align-items:center;gap:8px;}
.lc-lang a.lc-flag{display:block;width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid var(--c-border);box-shadow:0 1px 3px rgba(0,0,0,.14);transition:transform .15s,box-shadow .15s;}
.lc-lang a.lc-flag img{width:34px;height:34px;object-fit:cover;display:block;}
.lc-lang a.lc-flag:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.22);}
.lc-lang a.lc-flag.is-active{outline:2px solid var(--c-navy);outline-offset:2px;cursor:default;}
.lc-tel{color:var(--c-navy);font-weight:600;font-size:17px;letter-spacing:-.01em;}
.lc-tel:hover{color:var(--c-deep-blue);}
@media (max-width:480px){.lc-tel{display:none;}}
@media (max-width:600px){.lc-logo img{height:44px;}.lc-header-in{padding:14px 0;}.lc-header-cta{gap:10px;}.lc-lang{gap:6px;}.lc-lang a.lc-flag{width:28px;height:28px;}.lc-lang a.lc-flag img{width:28px;height:28px;}.lc-btn-dark{padding:10px 16px;font-size:12px;min-height:0;white-space:nowrap;}}
@media (max-width:374px){.lc-header-cta{gap:6px;}.lc-lang{gap:4px;}.lc-lang a.lc-flag{width:24px;height:24px;}.lc-lang a.lc-flag img{width:24px;height:24px;}.lc-btn-dark{padding:8px 11px;font-size:11px;}}

/* ---------------------------------- hero ---------------------------------- */
.lc-hero{position:relative;min-height:94vh;display:flex;align-items:center;background:var(--c-navy) url('./img/hero_main.png') top center/cover no-repeat;overflow:hidden;}
.lc-hero-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(20,26,52,.90) 0%,rgba(31,60,136,.66) 45%,rgba(123,97,255,.22) 100%);}
.lc-hero-in{position:relative;z-index:2;padding:var(--sp-7) 0;}
.lc-hero-text{max-width:660px;}
.lc-hero-text .lc-eyebrow{color:var(--c-lavender);}
.lc-hero-text h1{font-size:clamp(56px,7vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--c-white);margin-bottom:var(--sp-4);}
.lc-hero-copy{font-size:19px;line-height:1.8;color:#EDEFF7;margin-bottom:var(--sp-5);max-width:560px;}
.lc-hero-btns{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top: 50px;}
@media (max-width:900px){
	.lc-hero{min-height:86vh;background-position:top center;}
	.lc-hero-overlay{background:linear-gradient(180deg,rgba(20,26,52,.6) 0%,rgba(27,35,64,.85) 70%,rgba(27,35,64,.94) 100%);}
	.lc-hero-in{padding:var(--sp-6) 0;}
	.lc-hero-text{max-width:100%;text-align:center;margin:0 auto;}
	.lc-hero-text h1{font-size:clamp(40px,9vw,56px);}
	.lc-hero-btns{justify-content:center;}
}

/* ---------------------------------- about ---------------------------------- */
.lc-about{padding:var(--sp-section) 0;}
.lc-about-in{display:flex;align-items:center;gap:var(--sp-7);}
.lc-about-img{flex:0 0 440px;max-width:440px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.lc-about-img img{width:100%;height:480px;object-fit:cover;object-position:top center;}
.lc-about-text{flex:1;min-width:300px;}
.lc-about-text h2{font-size:clamp(36px,4vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:var(--sp-4);}
.lc-about-text p{color:var(--c-text);font-size:18px;line-height:1.85;margin-bottom:var(--sp-3);}
.lc-about-points{margin-top:var(--sp-4);border-top:1px solid var(--c-border);padding-top:var(--sp-4);}
.lc-about-points li{padding:var(--sp-2) 0;color:var(--c-text);font-size:16px;border-bottom:1px solid var(--c-border);}
.lc-about-points li:last-child{border-bottom:0;}
.lc-about-points strong{display:block;color:var(--c-navy);font-size:17px;font-weight:600;margin-bottom:4px;}
@media (max-width:900px){
	.lc-about{padding:var(--sp-section-sm) 0;}
	.lc-about-in{flex-direction:column;text-align:center;gap:var(--sp-5);}
	.lc-about-img{max-width:320px;}
	.lc-about-img img{height:340px;}
	.lc-about-points strong{display:block;}
}

/* ---------------------------------- section heads ---------------------------------- */
.lc-sec-head{text-align:center;max-width:680px;margin:0 auto var(--sp-7);}
.lc-sec-head h2{font-size:clamp(36px,4vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:var(--sp-3);}
.lc-sec-copy{color:var(--c-text);font-size:18px;line-height:1.8;}
.lc-sec-head-light .lc-eyebrow{color:var(--c-lavender);}
.lc-sec-head-light h2{color:var(--c-white);}
.lc-sec-head-light .lc-sec-copy{color:var(--c-text-faint);}

/* ---------------------------------- treatments ---------------------------------- */
.lc-treatments{padding:var(--sp-section) 0;background:var(--gradient-soft);}
.lc-tx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-4);}
.lc-tx-card{background:var(--c-white);border:1px solid transparent;border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-4);box-shadow:var(--shadow-sm);transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);}
.lc-tx-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-accent);border-color:var(--c-lavender);}
.lc-tx-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;font-size:26px;color:var(--c-white);margin-bottom:var(--sp-3);transition:transform var(--t-base);}
.lc-tx-card:hover .lc-tx-icon{transform:scale(1.12) rotate(-4deg);}
.lc-ic-a{background:var(--gradient-brand);}
.lc-ic-b{background:linear-gradient(135deg, var(--c-violet) 0%, var(--c-lavender) 100%);}
.lc-tx-card h3{font-size:clamp(22px,2.4vw,26px);font-weight:600;letter-spacing:-.01em;margin-bottom:var(--sp-2);}
.lc-tx-card p{font-size:17px;line-height:1.75;color:var(--c-text);}
@media (max-width:900px){.lc-tx-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-3);}.lc-treatments{padding:var(--sp-section-sm) 0;}}
@media (max-width:480px){.lc-tx-grid{grid-template-columns:1fr;}.lc-tx-card{padding:var(--sp-4) var(--sp-3);}}

/* ---------------------------------- features ---------------------------------- */
.lc-features{padding:var(--sp-section) 0;background:var(--gradient-dark);}
.lc-f-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);text-align:center;}
.lc-f-card{padding:var(--sp-2);transition:transform var(--t-base);}
.lc-f-card:hover{transform:translateY(-8px);}
.lc-f-icon{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;border:1px solid var(--c-lavender);color:var(--c-lavender);font-size:30px;margin-bottom:var(--sp-3);transition:background var(--t-base),color var(--t-base);}
.lc-f-card:hover .lc-f-icon{background:var(--gradient-brand);border-color:transparent;color:var(--c-white);}
.lc-f-card h4{color:var(--c-white);font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--sp-1);}
.lc-f-card p{color:var(--c-text-faint);font-size:15px;line-height:1.7;}
@media (max-width:900px){.lc-f-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-5) var(--sp-3);}.lc-features{padding:var(--sp-section-sm) 0;}}

/* ---------------------------------- contact ---------------------------------- */
.lc-contact{padding:var(--sp-section) 0;text-align:center;background:var(--gradient-soft);}
.lc-contact h2{font-size:clamp(36px,4vw,48px);font-weight:600;letter-spacing:-.02em;margin-bottom:var(--sp-3);}
.lc-contact p{color:var(--c-text);font-size:18px;line-height:1.8;max-width:580px;margin:0 auto var(--sp-5);}
.lc-contact-tel-hint{margin-top:var(--sp-3);font-size:15px;color:var(--c-text);}
.lc-contact-tel-hint a{color:var(--c-deep-blue);font-weight:600;}
.lc-contact-tel-hint a:hover{color:var(--c-violet);}
.lc-contact-info{display:flex;justify-content:center;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-6);border-top:1px solid var(--c-border);padding-top:var(--sp-5);}
.lc-contact-item{flex:1 1 200px;max-width:260px;text-align:center;}
.lc-contact-item strong{display:block;color:var(--c-deep-blue);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-1);}
.lc-contact-item span{color:var(--c-navy);font-size:16px;line-height:1.7;}
.lc-contact-item a:hover{color:var(--c-violet);}
@media (max-width:900px){.lc-contact{padding:var(--sp-section-sm) 0;}.lc-contact-info{gap:var(--sp-4);}.lc-contact-item{flex:1 1 160px;max-width:220px;margin:0 auto;}}
@media (max-width:480px){.lc-contact-info{gap:var(--sp-3);}.lc-contact-item{flex:1 1 100%;max-width:320px;}}

/* ---------------------------------- footer ---------------------------------- */
.lc-footer{background:var(--gradient-dark);color:var(--c-text-faint);text-align:center;padding:var(--sp-6) 0;font-size:14px;}
.lc-footer-logo{height:40px;margin:0 auto var(--sp-3);filter:brightness(0) invert(1);opacity:.9;}
.lc-footer p{margin-bottom:var(--sp-1);}
.lc-footer a:hover{color:var(--c-lavender);}

/* ---------------------------------- reduced motion ---------------------------------- */
@media (prefers-reduced-motion:reduce){
	.lc-fade,.lc-reveal{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;}
}