/* Design System for ds2technologies.com */
:root {
  --font-sans: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  --font-mono: "JetBrains Mono", Menlo, Consolas, monospace;
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-bg-dark: #0f1115;
  --color-text: #1e2430;
  --color-text-light: #f1f5f9;
  --color-accent: #6366f1;
  --color-accent-rgb: 99,102,241;
  --color-accent-secondary: #10b981;
  --color-border: #e2e8f0;
  --color-danger: #dc2626;
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:0 4px 14px rgba(0,0,0,0.12);
  --transition: .28s cubic-bezier(.4,0,.2,1);
  --gradient-accent: linear-gradient(135deg,#6366f1 0%,#4f46e5 50%,#9333ea 100%);
  --gradient-hero: radial-gradient(circle at 30% 40%, rgba(99,102,241,.38), transparent 55%), radial-gradient(circle at 70% 60%, rgba(16,185,129,.30), transparent 60%);
}
.dark {
  --color-bg: #0f1115; --color-bg-alt:#1a1f27; --color-text:#e2e8f0; --color-border:#1e293b;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-sans); background:var(--color-bg); color:var(--color-text); line-height:1.55; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--color-accent); text-decoration:none; }
a:hover,a:focus { text-decoration:underline; }

/* Layout */
.site-header { position:sticky; top:0; backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.3rem; border-bottom:1px solid var(--color-border); background:rgba(var(--color-accent-rgb),0.07); }
.dark .site-header { background:rgba(31,41,55,.55); }
.logo { font-weight:700; letter-spacing:.5px; background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:1rem; white-space:nowrap; }
.nav__menu { list-style:none; display:flex; gap:.75rem; margin:0; padding:0; }
.nav__menu a { position:relative; padding:.55rem .8rem; font-size:.8rem; font-weight:600; border-radius:var(--radius-sm); }
.nav__menu a::after { content:""; position:absolute; left:.6rem; right:.6rem; bottom:.35rem; height:2px; background:var(--color-accent); transform:scaleX(0); transform-origin:left; transition:transform .4s; opacity:.8; }
.nav__menu a:hover::after, .nav__menu a[aria-current="page"]::after { transform:scaleX(1); }
.nav__toggle { display:none; border:1px solid var(--color-border); background:none; padding:.45rem .65rem; border-radius:var(--radius-sm); }
.theme-toggle { background:none; border:1px solid var(--color-border); padding:.45rem .6rem; border-radius:var(--radius-sm); cursor:pointer; }
.theme-toggle:hover { background:rgba(var(--color-accent-rgb),.1); }

@media (max-width:780px){
  .nav__toggle { display:inline-block; }
  .nav__menu { position:absolute; top:100%; right:.75rem; background:var(--color-bg); flex-direction:column; min-width:200px; border:1px solid var(--color-border); padding:.75rem; border-radius:var(--radius-md); box-shadow:var(--shadow-md); display:none; }
  .nav__menu.open { display:flex; }
}

.hero { padding:5.5rem 1.3rem 4rem; display:grid; gap:2.75rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); max-width:1200px; margin:0 auto; background:var(--gradient-hero); }
.hero h1 { font-size:clamp(2.2rem,5.5vw,3.4rem); margin:0 0 1rem; line-height:1.1; }
.hero .subtitle { font-size:1.15rem; color:#475569; max-width:640px; }
.dark .hero .subtitle { color:#94a3b8; }

.section { padding:4rem 1.3rem; }
.section__inner { max-width:1180px; margin:0 auto; }
.section h2 { font-size:2.1rem; margin:0 0 1rem; }

/* Buttons */
.btn { display:inline-block; font-weight:600; font-size:.85rem; letter-spacing:.35px; padding:.75rem 1.15rem; border-radius:var(--radius-md); background:var(--color-accent); color:#fff; box-shadow:var(--shadow-sm); transition:var(--transition); }
.btn:hover { filter:brightness(1.08); }
.btn.outline { background:none; color:var(--color-accent); border:1px solid var(--color-accent); }
.btn.outline:hover { background:var(--color-accent); color:#fff; }
.btn.secondary { background:var(--color-accent-secondary); }
.btn.small { padding:.5rem .8rem; font-size:.7rem; }

/* Grids & Cards */
.cards-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card { background:var(--color-bg-alt); border:1px solid var(--color-border); padding:1.1rem 1.1rem 1.3rem; border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:.6rem; position:relative; overflow:hidden; transition:var(--transition); }
.card::before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(var(--color-accent-rgb),.18),transparent 70%); opacity:.35; pointer-events:none; }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.dark .card { background:var(--color-bg-alt); }
.card h3 { margin:.2rem 0 .35rem; font-size:1.05rem; }
.card p { font-size:.75rem; line-height:1.4; }
.tag-list { display:flex; gap:.4rem; flex-wrap:wrap; }
.tag { font-size:.6rem; font-weight:600; padding:.3rem .45rem; background:rgba(var(--color-accent-rgb),.14); color:var(--color-accent); border-radius:var(--radius-xs); letter-spacing:.3px; }
.dark .tag { background:rgba(var(--color-accent-rgb),.32); }

/* Pricing Table */
.pricing-toggle { display:flex; align-items:center; gap:.6rem; font-size:.8rem; margin:0 0 1.25rem; }
.switch { position:relative; width:46px; height:24px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background:#cbd5e1; border-radius:34px; transition:.3s; }
.slider:before { content:""; position:absolute; height:18px; width:18px; left:4px; top:3px; background:#fff; border-radius:50%; transition:.3s; box-shadow:0 2px 5px rgba(0,0,0,.25); }
.switch input:checked + .slider { background:var(--color-accent); }
.switch input:checked + .slider:before { transform:translateX(22px); }
.pricing-grid { display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.plan { border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.2rem 1.2rem 1.4rem; background:var(--color-bg-alt); display:flex; flex-direction:column; gap:.6rem; position:relative; }
.plan.highlight { border-color:var(--color-accent); box-shadow:0 0 0 2px rgba(var(--color-accent-rgb),.15); }
.plan h3 { margin:.2rem 0 .2rem; font-size:1.1rem; }
.price { font-size:1.9rem; font-weight:700; margin:.3rem 0 .4rem; background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.features { list-style:none; margin:.4rem 0 0; padding:0; font-size:.7rem; display:grid; gap:.35rem; }
.features li { display:flex; gap:.45rem; align-items:flex-start; }
.features li::before { content:"✓"; color:var(--color-accent-secondary); font-weight:700; }

/* Accordion (FAQ) */
.faq { max-width:900px; margin:2rem auto 0; }
.faq-item { border:1px solid var(--color-border); border-radius:var(--radius-md); margin:0 0 .9rem; overflow:hidden; background:var(--color-bg-alt); }
.faq-item button { width:100%; text-align:left; background:none; border:none; padding:.85rem 1rem; font-size:.85rem; font-weight:600; cursor:pointer; position:relative; }
.faq-item button::after { content:"+"; position:absolute; right:1rem; top:50%; transform:translateY(-50%); transition:.3s; }
.faq-item[open] button::after { transform:translateY(-50%) rotate(45deg); }
.faq-item .answer { padding:0 1rem 1rem; font-size:.75rem; }

/* Forms */
form { display:grid; gap:1rem; max-width:640px; }
.form-group { display:flex; flex-direction:column; gap:.35rem; }
input, textarea { font:inherit; padding:.7rem .75rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg); color:var(--color-text); }
input:focus, textarea:focus { outline:2px solid var(--color-accent); outline-offset:2px; }
.error { font-size:.65rem; color:var(--color-danger); min-height:.65rem; }
#formStatus { font-size:.75rem; }

/* Utility */
.container { max-width:1180px; margin:0 auto; padding:0 1.3rem; }
.mt-sm{margin-top:.35rem!important;} .mt-md{margin-top:1.1rem!important;} .mt-lg{margin-top:2rem!important;} .center{text-align:center!important;} .flex{display:flex!important;} .gap-sm{gap:.5rem!important;} .wrap{flex-wrap:wrap!important;} .hidden{display:none!important;}

/* Footer */
.site-footer { padding:2.5rem 1.3rem; border-top:1px solid var(--color-border); text-align:center; font-size:.75rem; }
.social { list-style:none; display:flex; gap:.9rem; justify-content:center; margin:1rem 0 0; padding:0; }
.social a { font-size:.7rem; font-weight:600; }

/* Dark transitions */
body, body * { transition:background-color var(--transition), color var(--transition), border-color var(--transition); }

/* Responsive adjustments */
@media (max-width:520px){
  .hero { padding:4.2rem 1rem 3.2rem; }
  .section { padding:3.2rem 1rem; }
  .pricing-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
}

/* Accessibility */
a:focus-visible, button:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }

/* Print minimalization */
@media print {
  .site-header, .site-footer, .theme-toggle, .nav__toggle, .nav__menu, .pricing-toggle, .faq-item button::after { display:none !important; }
  body { background:#fff; color:#000; }
  .card, .plan { box-shadow:none !important; border-color:#999; }
}