@layer components{.contact-page-container{container-type:inline-size;max-width:62.5rem;margin-inline:auto;padding-inline:var(--container-padding, var(--space-4));@container (max-width: 640px){padding-inline:var(--space-2)}}.contact-page-container .hero-section{background:linear-gradient(135deg,rgb(from var(--color-brand) r g b / 10%),rgb(from var(--color-accent) r g b / 10%));border:1px solid rgb(from var(--color-brand) r g b / 20%);position:relative;overflow:hidden;&:before{content:"✉️";position:absolute;top:var(--space-6);right:var(--space-6);font-size:3rem;opacity:.1;animation:float-icon 4s ease-in-out infinite;pointer-events:none}}.contact-info-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-bottom:var(--space-12);@container (min-width: 768px){grid-template-columns:repeat(2,1fr);gap:var(--space-8)}}.contact-info-card{background:var(--color-surface-raised);padding:var(--space-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);position:relative;overflow:hidden;transition:transform var(--transition-normal),box-shadow var(--transition-normal),background var(--transition-theme);&:before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--color-brand),var(--color-accent));scale:1 0;transform-origin:left;transition:scale var(--transition-normal)}&:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);&:before{scale:1 1}}@container (max-width: 767px){padding:var(--space-4)}}.contact-info-title{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--space-3);color:var(--color-text);display:flex;align-items:center;gap:var(--space-2);transition:color var(--transition-theme);&:before{content:"📧";font-size:var(--text-lg)}@container (max-width: 767px){font-size:var(--text-lg)}}.contact-info-card:nth-child(2) .contact-info-title:before{content:"🛠️"}.contact-info-detail{color:var(--color-text);margin-bottom:var(--space-2);font-weight:500;transition:color var(--transition-theme);& strong{color:var(--color-text);font-weight:700}}.contact-info-description{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.5;transition:color var(--transition-theme)}.contact-form-section{background:var(--color-surface-raised);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);margin-bottom:var(--space-12);position:relative;overflow:hidden;transition:background var(--transition-theme);&:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgb(from var(--color-brand) r g b / 3%) 0%,transparent 70%);animation:pulse-form 5s ease-in-out infinite;pointer-events:none}@container (max-width: 767px){padding:var(--space-6)}}.contact-form{max-width:37.5rem;margin-inline:auto;position:relative;z-index:1}.form-group{margin-bottom:var(--space-6);@container (max-width: 767px){margin-bottom:var(--space-4)}}.form-label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--color-text);margin-bottom:var(--space-1);transition:color var(--transition-theme)}.form-input{width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-base);background:var(--color-surface-raised);color:var(--color-text);box-sizing:border-box;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-theme);&:hover{border-color:var(--color-text-muted)}&:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px rgb(from var(--color-brand) r g b / 12%)}&:user-invalid{border-color:var(--color-error, oklch(62% .22 25));box-shadow:0 0 0 3px #ee343b1f}}.form-select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right var(--space-3) center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:var(--space-10);cursor:pointer}.form-textarea{resize:vertical;min-height:7.5rem;font-family:inherit;line-height:1.5;field-sizing:content}.form-submit-btn{width:100%;margin-top:var(--space-4);position:relative;overflow:hidden;&:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,oklch(100% 0 0 / 20%),transparent);translate:-100% 0;transition:translate var(--transition-slow)}&:hover:before{translate:100% 0}}.form-error-message{color:var(--color-error, oklch(62% .22 25));font-size:var(--text-sm);margin-top:var(--space-1);display:none}.form-input.error+.form-error-message,.form-input:user-invalid+.form-error-message{display:block}.social-section{background:var(--color-surface-raised);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--space-12);transition:background var(--transition-theme)}.social-links-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);@container (min-width: 640px){grid-template-columns:repeat(4,1fr);gap:var(--space-6)}@container (max-width: 639px){gap:var(--space-3)}}.social-link{display:flex;flex-direction:column;align-items:center;padding:var(--space-4);border-radius:var(--radius-md);text-decoration:none;border:2px solid transparent;position:relative;overflow:hidden;transition:transform var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);&:before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity var(--transition-fast);border-radius:var(--radius-md)}&:hover{transform:translateY(-2px);border-color:currentColor;&:before{opacity:.05}.social-icon{transform:scale(1.1)}}&:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}& span{font-size:var(--text-sm);font-weight:500;position:relative;z-index:1}}.social-facebook{color:#315fcf}.social-twitter{color:oklch(65% .16 222)}.social-instagram{color:#dc1b5c}.social-youtube{color:oklch(50% .22 25)}.social-icon{width:2rem;height:2rem;margin-bottom:var(--space-2);position:relative;z-index:1;transition:transform var(--transition-fast)}.back-to-links{text-align:center;margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-border);.back-link{margin-inline:var(--space-4);display:inline-block;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);transition:background var(--transition-fast);&:hover{background:rgb(from var(--color-brand) r g b / 10%)}}@container (max-width: 640px){margin-top:var(--space-6);.back-link{display:block;margin-inline:0;margin-block:var(--space-2)}}}.theme-power-up{.contact-info-card:hover{transform:translateY(-2px) rotate(-.5deg)}.contact-info-title,.form-submit-btn{font-family:var(--font-display-power);text-transform:uppercase;letter-spacing:.05em}}.theme-sparkle-play{.contact-info-card:hover{transform:translateY(-2px) rotate(.5deg)}.contact-info-title{font-family:var(--font-display-sparkle)}.contact-form-section:after{content:"💌";position:absolute;bottom:var(--space-6);right:var(--space-6);font-size:2rem;opacity:.1;animation:float-icon 3s ease-in-out infinite reverse;pointer-events:none}}@media print{.contact-page-container{max-width:none}.contact-form-section,.social-section{box-shadow:none;border:1px solid var(--color-border)}.social-links-grid,.form-submit-btn{display:none}}}@keyframes float-icon{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}@keyframes pulse-form{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}