/* ===== CSS VARIABLES / TOKENS ===== */
:root {
  /* ===== ATELIÊ ONÃ DESIGN SYSTEM (current) ===== */
  --ds-stone-900: #1c1c1c;
  --ds-stone-500: #78716c;
  --ds-stone-400: #a8a29e;
  --ds-stone-300: #d6d3d1;
  --ds-stone-200: #e7e5e4;
  --ds-stone-100: #f2f1ee;
  --ds-bg: #eaeae5;
  --ds-surface: #ffffff;
  --ds-accent: rgb(174, 98, 70);
  --ds-accent-dark: rgb(148, 78, 53);
  --ds-accent-light: rgb(196, 138, 114);
  --ds-accent-soft: rgba(174, 98, 70, 0.08);
  --ds-font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ds-font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Semantic tokens (used throughout this stylesheet) mapped to the palette above */
  --primary: var(--ds-accent);
  --primary-dark: var(--ds-accent-dark);
  --primary-light: var(--ds-accent-light);
  --accent: var(--ds-stone-900);
  --accent-soft: #2D2D2D;
  --bg: var(--ds-stone-100);
  --bg-alt: var(--ds-bg);
  --bg-card: var(--ds-surface);
  --text-primary: var(--ds-stone-900);
  --text-secondary: var(--ds-stone-500);
  --text-muted: var(--ds-stone-400);
  --border: var(--ds-stone-300);
  --border-light: var(--ds-stone-200);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.08);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --shadow-hover: 0 12px 40px rgba(174,98,70,.18);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;
  --transition: .3s cubic-bezier(.4,0,.2,1);
  --transition-slow: .5s cubic-bezier(.4,0,.2,1);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--bg);color:var(--text-primary);line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font-family:inherit;font-size:inherit;border:none;outline:none}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px rgba(196,30,47,.15)}50%{box-shadow:0 0 40px rgba(196,30,47,.3)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes animationIn { 0% { opacity: 0; transform: translateY(30px); filter: blur(10px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0px); } }
@keyframes shimmerBeam { from { transform: translateX(-100%) skewX(-15deg); } to { transform: translateX(200%) skewX(-15deg); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.animate-fade-up{animation:fadeInUp .7s ease both}
.animate-fade-up-d1{animation:fadeInUp .7s ease .15s both}
.animate-fade-up-d2{animation:fadeInUp .7s ease .3s both}
.animate-fade-up-d3{animation:fadeInUp .7s ease .45s both}
.animate-fade-in{animation:fadeIn .6s ease both}
.animate-slide-left{animation:slideInLeft .6s ease both}
.animate-scale-in{animation:scaleIn .5s ease both}
.animate-blur-in { animation: animationIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-marquee { animation: marquee 30s linear infinite; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

.animate-on-scroll { animation-play-state: paused !important; }
.animate-on-scroll.animate { animation-play-state: running !important; }

/* ===== NAVIGATION ===== */
.ds-nav{position:sticky;top:0;z-index:999;background:rgba(26,26,26,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(196,30,47,.15);padding:0 2rem}
.ds-nav-inner{max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.ds-nav-brand{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:.02em}
.ds-nav-brand span{color:var(--primary)}
.ds-nav-links{display:flex;gap:1.5rem;overflow-x:auto}
.ds-nav-links a{color:rgba(255,255,255,.7);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;transition:color var(--transition);white-space:nowrap;padding:.5rem 0}
.ds-nav-links a:hover{color:var(--primary)}

/* ===== HERO ===== */
.hero{position:relative;min-height:85vh;display:flex;align-items:center;overflow:hidden;background:var(--accent)}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1A1A1A 0%,#2D2D2D 40%,#1A1A1A 100%)}
.hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(196,30,47,.08) 0%,transparent 70%)}
.hero-pattern{position:absolute;inset:0;opacity:.03;background-image:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(255,255,255,.1) 35px,rgba(255,255,255,.1) 36px)}
.hero-content{position:relative;z-index:2;max-width:1300px;margin:0 auto;padding:4rem 2rem;width:100%}
.hero-overline{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.25em;color:var(--primary);margin-bottom:1rem;display:inline-block}
.hero h1{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;color:#fff;line-height:1.1;margin-bottom:1.5rem}
.hero h1 span{color:var(--primary)}
.hero-desc{font-size:1.125rem;color:rgba(255,255,255,.55);max-width:560px;line-height:1.8;margin-bottom:2.5rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-line{position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--primary),transparent)}

/* ===== SECTIONS ===== */
.ds-section{max-width:1300px;margin:0 auto;padding:5rem 2rem}
.ds-section-title{font-family:var(--font-display);font-size:2.25rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}
.ds-section-desc{color:var(--text-muted);font-size:.95rem;margin-bottom:3rem}
.ds-section-divider{height:1px;background:var(--border);margin-bottom:5rem}
.ds-subsection-title{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--text-primary);margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-light)}
.ds-label{font-family:'Courier New',monospace;font-size:.8rem;color:var(--text-muted);margin-top:.5rem}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--ds-font-sans);font-weight:500;font-size:.875rem;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transform:translateX(-100%) skewX(-15deg);transition:none;}
.btn:hover::after{animation: shimmerBeam 1.5s infinite;}
.btn-primary{background:var(--primary);color:#fff;padding:.875rem 2rem;border:2px solid var(--primary)}
.btn-primary:hover:not(:disabled){background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn-primary:disabled, .btn-primary.disabled{background:var(--primary-dark);border-color:var(--primary-dark);color:rgba(255,255,255,0.7);opacity:0.7;cursor:not-allowed}
.btn-outline{background:transparent;color:var(--primary);padding:.875rem 2rem;border:2px solid var(--primary);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn-danger{background:var(--danger);color:#fff;padding:.875rem 2rem;border:2px solid var(--danger)}
.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn-outline.btn-danger{background:transparent;color:var(--danger)}
.btn-outline.btn-danger:hover{background:var(--danger);color:#fff}
.btn-dark{background:var(--accent);color:#fff;padding:.875rem 2rem;border:2px solid var(--accent)}
.btn-dark:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-ghost{background:transparent;color:var(--text-secondary);padding:.75rem 1.5rem;border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-disabled{background:#E5E5E5;color:#AAA;padding:.875rem 2rem;border:2px solid #E5E5E5;cursor:not-allowed;pointer-events:none}
.btn-sm{padding:.625rem 1.25rem;font-size:.7rem}
.btn-lg{padding:1.1rem 2.5rem;font-size:.95rem}
.btn-hero-outline{background:transparent;color:#fff;padding:.875rem 2rem;border:2px solid rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.btn-hero-outline:hover{border-color:var(--primary);color:var(--primary)}

/* ===== COLOR SWATCHES ===== */
.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.25rem}
.color-swatch{border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}
.color-swatch:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.color-swatch-block{height:90px;position:relative}
.color-swatch-block span{position:absolute;bottom:8px;right:10px;font-size:.65rem;font-weight:600;padding:2px 8px;border-radius:4px;background:rgba(0,0,0,.3);color:#fff}
.color-swatch-info{padding:.875rem 1rem}
.color-swatch-name{font-weight:600;font-size:.85rem;color:var(--text-primary)}
.color-swatch-hex{font-family:monospace;font-size:.75rem;color:var(--text-muted)}

/* ===== SURFACE BOXES ===== */
.surface-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.surface-box{border-radius:var(--radius-md);padding:2rem;min-height:140px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;transition:transform var(--transition)}
.surface-box:hover{transform:scale(1.02)}
.surface-box h4{font-weight:700;font-size:1rem;margin-bottom:.25rem}
.surface-box p{font-size:.8rem;opacity:.7}

/* ===== TYPOGRAPHY ROWS ===== */
.typo-row{display:flex;align-items:flex-end;justify-content:space-between;padding:1.5rem 0;border-bottom:1px solid var(--border-light);gap:2rem;flex-wrap:wrap}
.typo-spec{font-family:monospace;font-size:.8rem;color:var(--text-muted);white-space:nowrap}

/* ===== CARDS ===== */
.card{background:var(--bg-card);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);transition:all var(--transition-slow)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:rgba(196,30,47,.2)}
.card-img{position:relative;height:220px;overflow:hidden;background:#E5E2DD}
.card-img img,.card-img-placeholder{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.card:hover .card-img img,.card:hover .card-img-placeholder{transform:scale(1.06)}
.card-img-placeholder{background:linear-gradient(135deg,#E5E2DD,#D5D2CD);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.85rem}
.card-badge{position:absolute;top:12px;left:12px;font-size:.65rem;font-weight:700;padding:4px 10px;border-radius:4px;text-transform:uppercase;letter-spacing:.08em}
.card-badge-primary{background:var(--primary);color:#fff}
.card-badge-dark{background:var(--accent);color:#fff}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 50%);opacity:0;transition:opacity var(--transition)}
.card:hover .card-overlay{opacity:1}
.card-body{padding:1.5rem}
.card-brand{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--primary);margin-bottom:.25rem}
.card-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;line-height:1.3}
.card-meta{display:flex;gap:.75rem;font-size:.8rem;color:var(--text-muted);margin-bottom:1rem;align-items:center}
.card-meta span+span::before{content:'•';margin-right:.75rem;color:var(--border)}
.card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid var(--border-light)}
.card-price{font-family:var(--font-body);font-size:1.15rem;font-weight:700;color:var(--text-primary)}
.card-action{color:var(--primary);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;transition:color var(--transition);display:flex;align-items:center;gap:.35rem}
.card-action:hover{color:var(--primary-dark)}
.card-action svg{width:16px;height:16px;transition:transform var(--transition)}
.card-action:hover svg{transform:translateX(3px)}

/* ===== NEW EFFECTS ===== */
.flashlight-card { position: relative; }
.flashlight-card::after {
  content: ""; position: absolute; inset: 0px;
  background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.2), transparent 40% );
  opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: 2; border-radius: inherit; mix-blend-mode: overlay;
}
.flashlight-card:hover::after { opacity: 1; }

.border-gradient-box { position: relative; border: none !important; }
.border-gradient-box::before {
  content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  background: linear-gradient(135deg, var(--primary), transparent 60%); pointer-events: none; z-index: 10;
}

/* ===== INPUTS ===== */
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:.5rem}
.form-input{width:100%;padding:.875rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);transition:all var(--transition)}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(196,30,47,.08)}
.form-input.is-invalid{border-color:var(--danger);background:var(--danger-soft)}
.form-input.is-invalid:focus{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.form-input-dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#fff}
.form-input-dark:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(196,30,47,.15)}
.form-textarea{resize:none;min-height:120px}
.form-search{position:relative}
.form-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);width:16px;height:16px}
.form-search .form-input{padding-left:2.5rem}

/* ===== TAGS / FILTERS ===== */
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}
.tag:hover{border-color:var(--primary);color:var(--primary)}
.tag-active{background:var(--primary);border-color:var(--primary);color:#fff}
.tag-active:hover{background:var(--primary-dark)}

/* ===== DIVIDERS ===== */
.divider{height:1px;background:var(--border);margin:1.5rem 0}
.divider-primary{background:linear-gradient(90deg,var(--primary),transparent)}
.divider-dashed{border-top:1px dashed var(--border);background:none}

/* ===== SPEC ROWS ===== */
.spec-row{display:flex;justify-content:space-between;padding:.875rem 0;border-bottom:1px solid var(--border-light)}
.spec-row:last-child{border-bottom:none}
.spec-key{font-size:.9rem;color:var(--text-secondary)}
.spec-val{font-size:.9rem;font-weight:600;color:var(--text-primary)}

/* ===== FEATURE LIST ===== */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.feature-item{display:flex;align-items:center;gap:.75rem;padding:1rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-sm);transition:all var(--transition)}
.feature-item:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.feature-item svg{width:20px;height:20px;color:var(--primary);flex-shrink:0}
.feature-item span{font-size:.85rem;font-weight:500;color:var(--text-primary)}

/* ===== CONTACT CARD ===== */
.contact-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:2.5rem;box-shadow:var(--shadow-md);border:1px solid var(--border-light);max-width:400px}
.contact-card-price{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--text-primary)}
.contact-card-label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}

/* ===== ICON GRID ===== */
.icon-grid{display:flex;flex-wrap:wrap;gap:1rem}
.icon-box{width:80px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-sm);transition:all var(--transition)}
.icon-box:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.icon-box svg{width:22px;height:22px;color:var(--text-secondary);transition:color var(--transition)}
.icon-box:hover svg{color:var(--primary)}
.icon-box span{font-size:.6rem;color:var(--text-muted);text-align:center}

/* ===== LAYOUT DEMO ===== */
.layout-demo{display:grid;gap:1rem;padding:1.5rem;background:var(--bg);border:1px dashed var(--border);border-radius:var(--radius-md)}
.layout-demo-cell{background:var(--bg-alt);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:1.5rem;text-align:center;font-size:.85rem;color:var(--text-muted)}

/* ===== MOTION DEMO ===== */
.motion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.motion-box{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:2rem;text-align:center;transition:all var(--transition)}
.motion-box h4{font-family:var(--font-display);font-weight:600;margin-bottom:.5rem}
.motion-box code{font-size:.75rem;color:var(--primary);background:rgba(196,30,47,.06);padding:2px 8px;border-radius:4px}
.motion-box p{font-size:.8rem;color:var(--text-muted);margin-top:.75rem}

/* ===== COMPONENT BOX ===== */
.comp-box{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:2rem;margin-bottom:1.5rem}
.comp-box-dark{background:var(--accent);border-color:rgba(255,255,255,.1)}

/* ===== UTILITY ===== */
.flex-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.flex-col{display:flex;flex-direction:column;gap:1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.mt-2{margin-top:2rem}
.mb-2{margin-bottom:2rem}
.gap-sm{gap:.75rem}

/* ===== GLASSMORPHISM (DARK CONTEXT) ===== */
.glass{background:rgba(255,255,255,.04);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md)}

/* ===== SHIMMER EFFECT ===== */
.shimmer{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-alt) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 2s infinite}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator{width:28px;height:44px;border:2px solid rgba(255,255,255,.3);border-radius:14px;display:flex;justify-content:center;padding-top:8px;margin-top:2rem}
.scroll-indicator::before{content:'';width:4px;height:10px;background:var(--primary);border-radius:2px;animation:fadeInUp 1.5s ease infinite}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .ds-nav-links{gap:.75rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
  .ds-section{padding:3rem 1.25rem}
  .ds-section-title{font-size:1.75rem}
  .typo-row{flex-direction:column;align-items:flex-start;gap:.5rem}
}