/* ============================================
   智能办公平台 - 设计系统
   Impeccable-driven | OKLCH | Committed Blue
   ============================================ */

/* ---- CSS Custom Properties ---- */
:root {
  /* Color: OKLCH palette, Committed strategy (brand blue 30-50% surface) */
  --brand:              oklch(0.595 0.212 258);
  --brand-hover:        oklch(0.52 0.20 258);
  --brand-strong:       oklch(0.45 0.19 258);
  --brand-light:        oklch(0.92 0.03 258);
  --brand-surface:      oklch(0.97 0.01 258);

  --bg:                 oklch(1 0 0);
  --bg-alt:             oklch(0.97 0.004 258);

  --text:               oklch(0.15 0.02 260);
  --text-secondary:     oklch(0.40 0.02 260);
  --text-muted:         oklch(0.60 0.02 260);
  --text-inverse:       oklch(1 0 0);

  --border:             oklch(0.88 0.01 260);
  --border-light:       oklch(0.93 0.005 260);

  --success:            oklch(0.63 0.16 160);
  --warning:            oklch(0.73 0.15 85);

  /* Typography: Brand register, fluid clamp headings */
  --font-sans: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","WenQuanYi Micro Hei",system-ui,-apple-system,sans-serif;
  --font-mono: "SF Mono","Cascadia Code","Consolas","Courier New",monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.375rem, 1.8vw + 0.9rem, 1.75rem);
  --text-2xl:  clamp(1.625rem, 2.5vw + 0.9rem, 2.25rem);
  --text-3xl:  clamp(2rem, 4vw + 0.8rem, 3rem);
  --text-4xl:  clamp(2.5rem, 5.5vw + 0.6rem, 4rem);

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* Spacing: 4pt base */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Radius */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Shadows: subtle, never paired with border */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
  --shadow:    0 1px 3px oklch(0 0 0 / 0.08);
  --shadow-md: 0 4px 8px oklch(0 0 0 / 0.07);
  --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.09);

  --nav-height: 64px;
  --max-width: 1200px;
  --transition: 0.2s ease;
}

/* ---- Reset & Base ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-height);-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--brand-hover)}
ul,ol{list-style:none}

::selection{background:var(--brand);color:var(--text-inverse)}

/* Focus visible */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-sm)}

/* ---- Container ---- */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}

/* ---- Section ---- */
.section{padding:var(--space-4xl) 0}
.section--alt{background:var(--bg-alt)}
.section--brand{background:var(--brand);color:var(--text-inverse)}
.section--brand .text-secondary{color:oklch(1 0 0 / 0.75)}
.section--brand .text-muted{color:oklch(1 0 0 / 0.55)}

/* ---- Headings ---- */
h1,h2,h3,h4{font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
h1{font-size:var(--text-4xl)}
h2{font-size:var(--text-3xl)}
h3{font-size:var(--text-2xl)}
h4{font-size:var(--text-xl)}

.text-secondary{color:var(--text-secondary)}
.text-muted{color:var(--text-muted)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  padding:var(--space-sm) var(--space-xl);
  font-size:var(--text-base);font-weight:var(--weight-semibold);
  border-radius:var(--radius);border:none;cursor:pointer;
  transition:all var(--transition);white-space:nowrap;
  font-family:inherit;line-height:1.4;
}
.btn--primary{
  background:var(--brand);color:var(--text-inverse);
}
.btn--primary:hover{background:var(--brand-hover);color:var(--text-inverse)}
.btn--outline{
  background:transparent;color:var(--text-inverse);
  outline:1.5px solid oklch(1 0 0 / 0.3);outline-offset:-1.5px;
}
.btn--outline:hover{background:oklch(1 0 0 / 0.1);color:var(--text-inverse)}
.btn--ghost{
  background:transparent;color:var(--brand);
}
.btn--ghost:hover{background:var(--brand-light)}
.btn--lg{padding:var(--space-md) var(--space-2xl);font-size:var(--text-lg)}
.btn--sm{padding:var(--space-xs) var(--space-md);font-size:var(--text-sm)}

/* ---- Badge / Tag ---- */
.badge{
  display:inline-flex;align-items:center;
  padding:var(--space-2xs) var(--space-sm);
  font-size:var(--text-xs);font-weight:var(--weight-medium);
  border-radius:var(--radius-pill);
  background:var(--brand-light);color:var(--brand);
}

/* ---- Navigation ---- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-height);
  background:oklch(1 0 0 / 0.92);
  border-bottom:1px solid var(--border);
}
.navbar .container{
  display:flex;align-items:center;justify-content:space-between;height:100%;
}
.nav-logo{
  display:flex;align-items:center;gap:var(--space-sm);
  font-size:var(--text-lg);font-weight:var(--weight-bold);
  color:var(--text);letter-spacing:var(--tracking-tight);
}
.nav-logo-mark{
  width:36px;height:36px;border-radius:var(--radius);
  background:var(--brand);color:var(--text-inverse);
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--weight-extrabold);font-size:var(--text-sm);
}
.nav-menu{display:flex;align-items:center;gap:var(--space-2xs)}
.nav-menu a{
  padding:var(--space-xs) var(--space-md);
  font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--text-secondary);border-radius:var(--radius);
  transition:all var(--transition);
}
.nav-menu a:hover,.nav-menu a.active{
  color:var(--brand);background:var(--brand-light);
}
.nav-actions{display:flex;align-items:center;gap:var(--space-sm)}
.nav-search{
  width:36px;height:36px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:var(--text-base);color:var(--text-secondary);
  transition:all var(--transition);
}
.nav-search:hover{border-color:var(--brand);color:var(--brand)}
.nav-toggle{
  display:none;width:36px;height:36px;border:none;
  background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:8px;
}
.nav-toggle span{
  display:block;height:2px;background:var(--text);
  border-radius:2px;transition:all var(--transition);
}

/* ---- Search Overlay ---- */
.search-overlay{
  position:fixed;inset:0;z-index:2000;
  background:oklch(0.12 0.01 260 / 0.5);
  display:none;align-items:flex-start;justify-content:center;
  padding-top:120px;
}
.search-overlay.active{display:flex}
.search-box{
  background:var(--bg);border-radius:var(--radius-lg);
  padding:var(--space-2xl);width:90%;max-width:560px;
}
.search-box form{display:flex;gap:var(--space-sm)}
.search-box input{
  flex:1;padding:var(--space-sm) var(--space-lg);
  border:1.5px solid var(--border);border-radius:var(--radius);
  font-size:var(--text-base);font-family:inherit;
  outline:none;transition:border-color var(--transition);
}
.search-box input:focus{border-color:var(--brand)}
.search-close{
  position:absolute;top:var(--space-xl);right:var(--space-xl);
  width:40px;height:40px;border-radius:50%;
  background:var(--bg);border:none;font-size:1.25rem;
  cursor:pointer;color:var(--text);
}

/* ---- Toast ---- */
.toast{
  position:fixed;bottom:var(--space-2xl);left:50%;transform:translateX(-50%);
  background:var(--text);color:var(--text-inverse);
  padding:var(--space-sm) var(--space-xl);
  border-radius:var(--radius-pill);
  font-size:var(--text-sm);font-weight:var(--weight-medium);
  z-index:3000;opacity:0;pointer-events:none;
  transition:opacity 0.3s ease,transform 0.3s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-8px)}

/* ================================================
   HOMEPAGE: Hero - DingTalk Workbench Style
   ================================================ */
.hero{
  margin-top:var(--nav-height);
  padding:var(--space-4xl) 0 var(--space-3xl);
  background:var(--brand);
  color:var(--text-inverse);
}
.hero-inner{
  display:grid;grid-template-columns:1fr 320px;
  gap:var(--space-3xl);align-items:start;
}
.hero-title{
  font-size:var(--text-4xl);font-weight:var(--weight-extrabold);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);
  margin-bottom:var(--space-md);
}
.hero-desc{
  font-size:var(--text-lg);color:oklch(1 0 0 / 0.8);
  line-height:var(--leading-relaxed);max-width:560px;
  margin-bottom:var(--space-xl);
}
.hero-cta{display:flex;gap:var(--space-sm);flex-wrap:wrap}

/* Workbench panel (right side) */
.workbench{
  background:oklch(1 0 0 / 0.12);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
}
.workbench-item{
  background:oklch(1 0 0 / 0.15);
  border-radius:var(--radius);
  padding:var(--space-md);
  text-align:center;
  cursor:default;
  position:relative;
  transition:background var(--transition);
}
.workbench-item:hover{background:oklch(1 0 0 / 0.22)}
.workbench-item-icon{
  font-size:1.75rem;margin-bottom:var(--space-xs);
  display:block;
}
.workbench-item-label{
  font-size:var(--text-xs);font-weight:var(--weight-medium);
  color:oklch(1 0 0 / 0.85);
}
.workbench-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;border-radius:var(--radius-pill);
  background:oklch(0.63 0.24 25);
  color:var(--text-inverse);
  font-size:10px;font-weight:var(--weight-bold);
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;
}
/* Workbench search bar */
.workbench-search{
  grid-column:1/-1;
  background:oklch(1 0 0 / 0.12);
  border-radius:var(--radius);
  padding:var(--space-xs) var(--space-md);
  font-size:var(--text-sm);
  color:oklch(1 0 0 / 0.5);
  display:flex;align-items:center;gap:var(--space-xs);
}
/* Workbench sidebar info */
.workbench-sidebar{
  grid-column:1/-1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
}
.workbench-todo{
  background:oklch(1 0 0 / 0.1);
  border-radius:var(--radius);
  padding:var(--space-sm) var(--space-md);
}
.workbench-todo-title{
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  margin-bottom:var(--space-2xs);
  color:oklch(1 0 0 / 0.7);
}
.workbench-todo-item{
  font-size:var(--text-xs);color:oklch(1 0 0 / 0.55);
  padding:2px 0;display:flex;align-items:center;gap:4px;
}

/* ================================================
   Section: Company Overview
   ================================================ */
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-3xl);
  align-items:center;
}
.about-visual{
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--brand-light),var(--brand-surface));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative;
}
.about-visual-icon{
  font-size:5rem;opacity:0.25;color:var(--brand);
}
.about-text h2{margin-bottom:var(--space-md)}
.about-text p{
  color:var(--text-secondary);font-size:var(--text-lg);
  line-height:var(--leading-relaxed);max-width:65ch;
}
.about-text p+p{margin-top:var(--space-md)}

.about-figures{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-xl);
  margin-top:var(--space-2xl);
  padding-top:var(--space-2xl);
  border-top:1px solid var(--border);
}
.figure-value{
  font-size:var(--text-3xl);font-weight:var(--weight-extrabold);
  color:var(--brand);line-height:1;
}
.figure-label{
  font-size:var(--text-sm);color:var(--text-muted);
  margin-top:var(--space-2xs);
}

/* ================================================
   Section: Products (asymmetric, not identical cards)
   ================================================ */
.products-layout{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-lg);
}
.product-card{
  border-radius:var(--radius-lg);
  padding:var(--space-2xl);
  transition:background var(--transition);
  position:relative;
}
.product-card:nth-child(1){
  grid-row:span 2;
  background:var(--brand);
  color:var(--text-inverse);
}
.product-card:nth-child(1) h3{color:var(--text-inverse)}
.product-card:nth-child(1) .product-desc{color:oklch(1 0 0 / 0.8)}
.product-card:nth-child(1) .product-tag{
  background:oklch(1 0 0 / 0.15);color:oklch(1 0 0 / 0.9);
}
.product-card:nth-child(2){background:var(--brand-surface)}
.product-card:nth-child(3){background:var(--bg-alt)}
.product-card:nth-child(4){
  grid-column:span 2;
  background:var(--brand-light);
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:var(--space-xl);
}

.product-icon{
  font-size:1.75rem;margin-bottom:var(--space-lg);
  display:block;
}
.product-card h3{
  font-size:var(--text-xl);margin-bottom:var(--space-sm);
}
.product-desc{
  font-size:var(--text-sm);color:var(--text-secondary);
  line-height:var(--leading-relaxed);max-width:50ch;
  margin-bottom:var(--space-lg);
}
.product-tags{
  display:flex;flex-wrap:wrap;gap:var(--space-xs);
}
.product-tag{
  padding:var(--space-2xs) var(--space-sm);
  font-size:var(--text-xs);font-weight:var(--weight-medium);
  border-radius:var(--radius-pill);
  background:var(--bg);color:var(--text-secondary);
}

/* ================================================
   Section: News
   ================================================ */
.news-row{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:var(--space-lg);
}
.news-feature{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-alt);
}
.news-feature-body{
  padding:var(--space-xl);
}
.news-feature-body time{
  font-size:var(--text-xs);color:var(--text-muted);
  font-weight:var(--weight-medium);
}
.news-feature-body h3{
  margin:var(--space-sm) 0;
  font-size:var(--text-xl);
}
.news-feature-body p{
  color:var(--text-secondary);font-size:var(--text-sm);
  line-height:var(--leading-relaxed);
  max-width:55ch;
}
.news-feature-image{
  height:240px;
  background:linear-gradient(135deg,var(--brand-light),var(--brand-surface));
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;
}
.news-side{
  display:flex;flex-direction:column;gap:var(--space-md);
}
.news-side-item{
  padding:var(--space-lg);
  border-radius:var(--radius-lg);
  background:var(--bg-alt);
  transition:background var(--transition);
}
.news-side-item:hover{background:var(--brand-light)}
.news-side-item time{
  font-size:var(--text-xs);color:var(--text-muted);
  font-weight:var(--weight-medium);
}
.news-side-item h4{
  font-size:var(--text-base);margin:var(--space-xs) 0;
}
.news-side-item p{
  font-size:var(--text-sm);color:var(--text-secondary);
  line-height:var(--leading-normal);
}

/* ================================================
   Section: Cases (testimonials)
   ================================================ */
.cases-row{
  display:grid;grid-template-columns:1.2fr 0.8fr 1fr;
  gap:var(--space-lg);
}
.case-card{
  padding:var(--space-2xl);
  border-radius:var(--radius-lg);
}
.case-card:nth-child(1){background:var(--brand-light)}
.case-card:nth-child(2){background:var(--bg-alt)}
.case-card:nth-child(3){background:var(--brand-surface)}
.case-quote{
  font-size:var(--text-lg);font-style:italic;
  line-height:var(--leading-relaxed);color:var(--text);
  margin-bottom:var(--space-xl);
}
.case-quote::before{content:open-quote;font-size:2rem;line-height:0;color:var(--brand)}
.case-author{
  display:flex;align-items:center;gap:var(--space-sm);
}
.case-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--brand);color:var(--text-inverse);
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--weight-bold);font-size:var(--text-sm);
}
.case-name{font-weight:var(--weight-semibold);font-size:var(--text-sm)}
.case-role{font-size:var(--text-xs);color:var(--text-muted)}

/* ================================================
   Section: Contact & Form
   ================================================ */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.5fr;
  gap:var(--space-3xl);
}
.contact-info h2{margin-bottom:var(--space-md)}
.contact-info>p{
  color:var(--text-secondary);max-width:50ch;
  margin-bottom:var(--space-2xl);
}
.contact-detail{
  display:flex;align-items:flex-start;gap:var(--space-md);
  margin-bottom:var(--space-xl);
}
.contact-detail-icon{
  width:40px;height:40px;border-radius:var(--radius);
  background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-lg);flex-shrink:0;
}
.contact-detail-label{font-size:var(--text-xs);color:var(--text-muted)}
.contact-detail-value{font-weight:var(--weight-medium)}

.form-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-2xl);
}
.form-group{margin-bottom:var(--space-lg)}
.form-group label{
  display:block;margin-bottom:var(--space-2xs);
  font-weight:var(--weight-medium);font-size:var(--text-sm);
}
.form-group input,
.form-group textarea{
  width:100%;padding:var(--space-sm) var(--space-md);
  border:1.5px solid var(--border);border-radius:var(--radius);
  font-size:var(--text-base);font-family:inherit;color:var(--text);
  background:var(--bg);outline:none;
  transition:border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus{border-color:var(--brand)}
.form-group textarea{resize:vertical;min-height:120px}
.form-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-2xs)}

/* ================================================
   CTA Banner
   ================================================ */
.cta{
  background:var(--brand);
  padding:var(--space-4xl) var(--space-lg);
  text-align:center;border-radius:var(--radius-lg);
  margin:0 var(--space-lg);
}
.cta h2{
  color:var(--text-inverse);
  font-size:var(--text-3xl);
  margin-bottom:var(--space-sm);
}
.cta p{
  color:oklch(1 0 0 / 0.8);font-size:var(--text-lg);
  margin-bottom:var(--space-2xl);
}
.cta .btn{
  background:var(--text-inverse);color:var(--brand);
}
.cta .btn:hover{background:var(--bg-alt);color:var(--brand-hover)}

/* ================================================
   Footer
   ================================================ */
.footer{
  background:var(--brand-strong);
  color:oklch(1 0 0 / 0.7);
  padding:var(--space-4xl) 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--space-3xl);
  margin-bottom:var(--space-3xl);
}
.footer-brand .nav-logo{color:var(--text-inverse);margin-bottom:var(--space-md)}
.footer-brand p{
  font-size:var(--text-sm);line-height:var(--leading-relaxed);
  max-width:40ch;
}
.footer h4{
  color:var(--text-inverse);font-size:var(--text-sm);
  margin-bottom:var(--space-lg);
  font-weight:var(--weight-semibold);
}
.footer-links li{margin-bottom:var(--space-sm)}
.footer-links a{
  color:oklch(1 0 0 / 0.55);font-size:var(--text-sm);
  transition:color var(--transition);
}
.footer-links a:hover{color:var(--text-inverse)}
.footer-bottom{
  border-top:1px solid oklch(1 0 0 / 0.1);
  padding:var(--space-xl) 0;
  display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:var(--space-md);
  font-size:var(--text-sm);color:oklch(1 0 0 / 0.4);
}
.footer-bottom-links{display:flex;gap:var(--space-xl)}
.footer-bottom-links a{color:oklch(1 0 0 / 0.4);font-size:var(--text-sm)}

/* ================================================
   Page Header
   ================================================ */
.page-header{
  margin-top:var(--nav-height);
  padding:var(--space-3xl) 0;
  background:var(--brand-surface);
  text-align:center;
}
.page-header h1{font-size:var(--text-3xl);margin-bottom:var(--space-xs)}
.breadcrumb{font-size:var(--text-sm);color:var(--text-muted)}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb span{color:var(--text-muted)}

/* ================================================
   Download Page
   ================================================ */
.download-platforms{
  display:flex;gap:var(--space-sm);justify-content:center;
  margin-bottom:var(--space-3xl);flex-wrap:wrap;
}
.download-platforms button{
  padding:var(--space-sm) var(--space-xl);
  border:1.5px solid var(--border);border-radius:var(--radius-pill);
  background:var(--bg);font-size:var(--text-sm);
  font-weight:var(--weight-medium);font-family:inherit;
  color:var(--text-secondary);cursor:pointer;
  transition:all var(--transition);
}
.download-platforms button:hover,
.download-platforms button.active{
  background:var(--brand);color:var(--text-inverse);border-color:var(--brand);
}

.download-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-lg);
}
.download-card{
  text-align:center;padding:var(--space-2xl);
  border-radius:var(--radius-lg);
  background:var(--bg);border:1px solid var(--border);
  transition:box-shadow var(--transition);
}
.download-card:hover{box-shadow:var(--shadow-md)}
.download-card.featured{
  border:2px solid var(--brand);
  position:relative;
}
.download-card.featured::before{
  content:"推荐";position:absolute;top:-1px;right:24px;
  background:var(--brand);color:var(--text-inverse);
  padding:2px 12px;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
}
.dl-icon{font-size:2.5rem;margin-bottom:var(--space-md);display:block}
.download-card h3{margin-bottom:var(--space-2xs)}
.dl-version,.dl-size{font-size:var(--text-sm);color:var(--text-muted)}
.dl-features{
  text-align:left;margin:var(--space-xl) 0;
}
.dl-features li{
  font-size:var(--text-sm);color:var(--text-secondary);
  padding:var(--space-2xs) 0;display:flex;align-items:center;gap:var(--space-xs);
}
.dl-features li::before{
  content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--success);flex-shrink:0;
}
.download-card .btn{width:100%}

/* ================================================
   FAQ Page
   ================================================ */
.faq-categories{
  display:flex;gap:var(--space-xs);justify-content:center;
  margin-bottom:var(--space-3xl);flex-wrap:wrap;
}
.faq-categories button{
  padding:var(--space-xs) var(--space-lg);
  border:1.5px solid var(--border);border-radius:var(--radius-pill);
  background:var(--bg);font-size:var(--text-sm);
  font-weight:var(--weight-medium);font-family:inherit;
  color:var(--text-secondary);cursor:pointer;
  transition:all var(--transition);
}
.faq-categories button:hover,
.faq-categories button.active{
  background:var(--brand);color:var(--text-inverse);border-color:var(--brand);
}

.faq-list{max-width:760px;margin:0 auto}
.faq-item{
  border-bottom:1px solid var(--border);
}
.faq-question{
  width:100%;padding:var(--space-lg) 0;background:none;border:none;
  font-size:var(--text-base);font-weight:var(--weight-semibold);
  text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-md);color:var(--text);font-family:inherit;
  line-height:var(--leading-snug);
}
.faq-question:hover{color:var(--brand)}
.faq-icon{
  font-size:1.25rem;font-weight:var(--weight-normal);
  color:var(--text-muted);flex-shrink:0;
  transition:transform var(--transition);
}
.faq-item.active .faq-icon{transform:rotate(45deg);color:var(--brand)}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height 0.35s ease,padding 0.35s ease;
}
.faq-item.active .faq-answer{max-height:400px}
.faq-answer-inner{
  padding:0 0 var(--space-xl);
  color:var(--text-secondary);font-size:var(--text-sm);
  line-height:var(--leading-relaxed);max-width:65ch;
}

.faq-search{
  max-width:480px;margin:0 auto var(--space-3xl);
  position:relative;
}
.faq-search input{
  width:100%;padding:var(--space-sm) var(--space-lg);
  border:1.5px solid var(--border);border-radius:var(--radius);
  font-size:var(--text-base);font-family:inherit;
  outline:none;transition:border-color var(--transition);
}
.faq-search input:focus{border-color:var(--brand)}
.faq-search-icon{
  position:absolute;right:var(--space-md);top:50%;
  transform:translateY(-50%);color:var(--text-muted);pointer-events:none;
}

/* ================================================
   News Page
   ================================================ */
.news-page{max-width:860px;margin:0 auto}
.news-article{
  display:grid;grid-template-columns:240px 1fr;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg);border:1px solid var(--border);
  margin-bottom:var(--space-lg);
  transition:box-shadow var(--transition);
}
.news-article:hover{box-shadow:var(--shadow-md)}
.news-article-image{
  background:linear-gradient(135deg,var(--brand-light),var(--brand-surface));
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;min-height:180px;
}
.news-article-body{padding:var(--space-xl)}
.news-article-body time,.news-article-body .news-cat{
  font-size:var(--text-xs);color:var(--text-muted);
  font-weight:var(--weight-medium);
}
.news-article-body .news-cat{
  background:var(--brand-light);color:var(--brand);
  padding:1px 8px;border-radius:var(--radius-pill);
  margin-left:var(--space-sm);
}
.news-article-body h3{
  margin:var(--space-sm) 0;font-size:var(--text-lg);
}
.news-article-body p{
  font-size:var(--text-sm);color:var(--text-secondary);
  line-height:var(--leading-relaxed);
}
.news-article-body .btn{margin-top:var(--space-md)}

/* ---- Pagination ---- */
.pagination{
  display:flex;gap:var(--space-sm);justify-content:center;
  margin-top:var(--space-3xl);
}
.pagination a,.pagination span{
  width:40px;height:40px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-sm);font-weight:var(--weight-medium);
  border:1px solid var(--border);color:var(--text-secondary);
  transition:all var(--transition);
}
.pagination a:hover{background:var(--brand-light);color:var(--brand)}
.pagination .active{background:var(--brand);color:var(--text-inverse);border-color:var(--brand)}

/* ================================================
   Responsive
   ================================================ */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr}
  .workbench{max-width:440px}
  .products-layout{grid-template-columns:1fr 1fr}
  .product-card:nth-child(1){grid-row:span 1}
  .product-card:nth-child(4){grid-column:span 2}
  .news-row{grid-template-columns:1fr 1fr}
  .news-feature{grid-column:span 2}
  .cases-row{grid-template-columns:1fr 1fr}
  .case-card:nth-child(3){grid-column:span 2}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  :root{
    --text-4xl:clamp(1.75rem,5vw + 0.4rem,2.5rem);
  }
  .nav-menu{display:none}
  .nav-menu.active{
    display:flex;flex-direction:column;
    position:fixed;top:var(--nav-height);left:0;right:0;
    background:var(--bg);padding:var(--space-md);
    border-bottom:1px solid var(--border);
  }
  .nav-toggle{display:flex}

  .hero{padding:var(--space-2xl) 0}
  .hero-title{font-size:var(--text-3xl)}
  .about-grid{grid-template-columns:1fr;gap:var(--space-2xl)}
  .about-figures{grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}
  .products-layout{grid-template-columns:1fr}
  .product-card:nth-child(4){grid-column:span 1;grid-template-columns:1fr}
  .news-row{grid-template-columns:1fr}
  .news-feature{grid-column:span 1}
  .cases-row{grid-template-columns:1fr}
  .case-card:nth-child(3){grid-column:span 1}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-2xl)}
  .footer-bottom{flex-direction:column;text-align:center}
  .download-grid{grid-template-columns:1fr}
  .news-article{grid-template-columns:1fr}
  .news-article-image{min-height:140px}
  .section{padding:var(--space-3xl) 0}
}

@media(max-width:480px){
  .hero-cta{flex-direction:column}
  .workbench{grid-template-columns:1fr 1fr}
  .about-figures{grid-template-columns:1fr;text-align:center}
  .cases-row{grid-template-columns:1fr}
}