:root {
  --bg: #08060d;
  --bg-soft: #0e0a16;
  --panel: #120d1d;
  --panel-2: #181022;
  --text: #f7f3fb;
  --muted: #a79caf;
  --purple: #9d4edd;
  --purple-bright: #bd68ff;
  --purple-dark: #6d28d9;
  --line: rgba(255, 255, 255, .09);
  --success: #5ee9a8;
  --danger: #ff6b8a;
  --radius: 22px;
  --shadow: 0 25px 80px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "DM Sans", sans-serif; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--purple); color: white; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section-pad { padding-top: 120px; padding-bottom: 120px; }
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(140px); opacity: .17; pointer-events: none; }
.ambient-one { width: 460px; height: 460px; background: #8025d1; top: -180px; right: -100px; }
.ambient-two { width: 360px; height: 360px; background: #5421a8; left: -200px; top: 45%; }

.site-header, .admin-header { width: min(1280px, calc(100% - 48px)); height: 88px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, var(--purple-bright), var(--purple-dark)); color: #fff; font-size: 13px; box-shadow: 0 8px 30px rgba(157, 78, 221, .3); }
.main-nav { display: flex; align-items: center; gap: 34px; color: #c7becd; font-size: 14px; font-weight: 600; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover { color: white; }
.main-nav .nav-cta { border: 1px solid rgba(189, 104, 255, .36); background: rgba(157, 78, 221, .1); padding: 10px 17px; border-radius: 10px; color: #ead9f7; }
.menu-button { display: none; background: none; border: 0; }

.hero { min-height: calc(100vh - 88px); display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; padding-top: 40px; padding-bottom: 80px; }
.eyebrow { color: var(--purple-bright); font: 700 12px/1.4 Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 22px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 6px rgba(94, 233, 168, .08), 0 0 14px rgba(94, 233, 168, .8); }
h1, h2, h3 { font-family: Manrope, sans-serif; line-height: 1.08; letter-spacing: -.045em; margin-top: 0; }
.hero h1 { font-size: clamp(48px, 6vw, 78px); margin-bottom: 28px; max-width: 760px; }
.hero h1 span, h2 span { color: var(--purple-bright); }
.lead { max-width: 650px; font-size: 18px; line-height: 1.75; color: var(--muted); margin: 0 0 36px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 50px; display: inline-flex; justify-content: center; align-items: center; gap: 18px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; font-weight: 700; font-size: 14px; transition: transform .2s ease, border-color .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: linear-gradient(135deg, #a64ff0, #7027c7); box-shadow: 0 12px 34px rgba(126, 39, 199, .28); }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.025); color: #d8d0dc; }
.button-light { background: white; color: #100a18; }
.button-small { min-height: 38px; padding: 0 14px; }
.button.full { width: 100%; }
.trust-line { display: flex; align-items: center; gap: 16px; margin-top: 45px; color: #776e7e; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.trust-line i { width: 3px; height: 3px; border-radius: 50%; background: #54485d; }

.hero-visual { position: relative; min-height: 530px; display: grid; place-items: center; }
.hero-visual::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(165, 66, 235, .3), transparent 65%); filter: blur(20px); }
.orbit { position: absolute; border: 1px solid rgba(190, 108, 255, .11); border-radius: 50%; }
.orbit-one { width: 490px; height: 490px; animation: spin 28s linear infinite; }
.orbit-one::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--purple-bright); box-shadow: 0 0 20px var(--purple); position: absolute; top: 63px; right: 80px; }
.orbit-two { width: 400px; height: 400px; border-style: dashed; animation: spin 20s linear reverse infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.code-card { position: relative; z-index: 2; width: min(460px, 90%); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(15, 10, 24, .88); box-shadow: 0 36px 100px rgba(0,0,0,.5); backdrop-filter: blur(20px); overflow: hidden; transform: perspective(1000px) rotateY(-7deg) rotateX(3deg); }
.code-top { height: 50px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 18px; gap: 7px; }
.code-top span { width: 8px; height: 8px; border-radius: 50%; background: #463b4d; }
.code-top span:nth-child(1) { background: #f25e75; }.code-top span:nth-child(2) { background: #e8b45b; }.code-top span:nth-child(3) { background: #5fd49c; }
.code-top em { margin-left: auto; color: #746b7c; font-style: normal; font-size: 11px; }
.code-card pre { margin: 0; padding: 40px 34px 32px; color: #dad3df; font: 500 14px/2.05 ui-monospace, SFMono-Regular, Consolas, monospace; }
.code-card code b { color: #cb70ff; }.code-card code span { color: #7db9ff; }.code-card code i { color: #aee07c; font-style: normal; }.code-card code strong { color: #f5bf6f; }
.code-status { padding: 15px 23px; background: rgba(94, 233, 168, .06); border-top: 1px solid rgba(94,233,168,.1); color: #8bdab4; font-size: 12px; }
.code-status span { margin-right: 9px; }
.float-badge { position: absolute; z-index: 3; padding: 10px 15px 10px 10px; display: flex; align-items: center; gap: 9px; background: #171020; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); color: #c6bccb; font-size: 12px; font-weight: 600; }
.float-badge span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(157,78,221,.16); color: var(--purple-bright); font-size: 11px; }
.badge-one { left: -5px; top: 105px; }.badge-two { right: -15px; bottom: 98px; }

.section-heading h2 { font-size: clamp(37px, 4.2vw, 58px); margin-bottom: 0; }
.inline-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 58px; }
.inline-heading > p { max-width: 450px; color: var(--muted); margin: 0 0 7px; }
.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: 120px; border-top: 1px solid var(--line); }
.about-content .big-copy { font-family: Manrope, sans-serif; color: #f2ebf6; font-weight: 600; font-size: 24px; line-height: 1.55; margin-top: 0; }
.about-content > p:not(.big-copy) { color: var(--muted); font-size: 16px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--line); }
.metrics div { display: flex; flex-direction: column; gap: 7px; }.metrics strong { color: var(--purple-bright); font: 800 28px Manrope; }.metrics span { color: #877d8c; font-size: 12px; }

.services, .reviews { background: linear-gradient(180deg, rgba(18, 13, 29, .75), rgba(8,6,13,.4)); border-block: 1px solid var(--line); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.service-card { min-height: 410px; position: relative; padding: 30px 27px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.018); overflow: hidden; transition: transform .25s, border-color .25s, background .25s; }
.service-card:hover { transform: translateY(-6px); border-color: rgba(189,104,255,.28); background: rgba(157,78,221,.055); }
.service-card.featured { background: linear-gradient(155deg, rgba(137,50,203,.18), rgba(255,255,255,.02) 70%); }
.service-card::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(152,62,218,.08); right: -80px; top: -80px; }
.service-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: rgba(157,78,221,.12); border: 1px solid rgba(189,104,255,.15); color: var(--purple-bright); font: 700 17px ui-monospace, monospace; }
.card-number { position: absolute; right: 25px; top: 34px; color: #584c60; font: 700 11px Manrope; }
.service-card h3 { font-size: 21px; margin: 38px 0 16px; }
.service-card p { color: var(--muted); font-size: 14px; }
.service-card ul { list-style: none; padding: 0; margin: 28px 0 0; color: #bdb3c3; font-size: 12px; }.service-card li { margin: 9px 0; }.service-card li::before { content: "↗"; color: var(--purple-bright); margin-right: 8px; }

.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.project { overflow: hidden; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); }
.project-wide { grid-column: span 2; display: grid; grid-template-columns: 1.4fr .6fr; }
.project-art { min-height: 320px; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, rgba(148,56,214,.22), transparent 60%), #0e0916; overflow: hidden; }
.project-wide .project-art { min-height: 410px; }
.project-copy { padding: 31px; }.project-wide .project-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.project-copy > span { color: var(--purple-bright); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.project-copy h3 { margin: 13px 0 12px; font-size: 26px; }.project-copy p { margin: 0; color: var(--muted); font-size: 14px; }
.mock-window { width: 76%; height: 70%; background: #171020; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; display: grid; grid-template-columns: 22% 1fr; padding: 12px; box-shadow: 0 25px 65px rgba(0,0,0,.4); transform: perspective(800px) rotateX(4deg); }
.mock-sidebar { background: #0e0a14; border-radius: 8px; }.mock-main { padding: 16px; }.mock-main i { display: inline-block; height: 45px; width: 29%; margin-right: 2%; background: rgba(171,81,235,.13); border-radius: 7px; }.mock-chart { height: 100px; margin-top: 25px; border-radius: 8px; background: linear-gradient(135deg, transparent 40%, rgba(157,78,221,.25)); border-bottom: 2px solid var(--purple); }
.phone { width: 145px; height: 260px; padding: 12px; border: 5px solid #33243f; border-radius: 27px; background: #0a0710; box-shadow: 0 30px 60px rgba(0,0,0,.5); transform: rotate(8deg); }.phone div { height: 45%; border-radius: 14px; background: linear-gradient(135deg, #7027c7, #b760f1); }.phone span { display: block; height: 10px; margin: 17px 6px; border-radius: 6px; background: #2b2034; }.phone span:nth-child(3) { width: 70%; }
.automation-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }.automation-art path { fill: none; stroke: rgba(184,91,246,.4); stroke-width: 2; stroke-dasharray: 5 7; }.node { position: absolute; z-index: 2; width: 66px; height: 66px; display: grid; place-items: center; background: #1c1228; border: 1px solid rgba(189,104,255,.3); border-radius: 18px; color: #d99cff; font: 700 12px Manrope; box-shadow: 0 15px 35px rgba(0,0,0,.35); }.n1 { left: 10%; top: 22%; }.n2 { left: calc(50% - 33px); top: 58%; }.n3 { right: 10%; top: 22%; }

.rating-summary { display: flex; gap: 15px; align-items: center; }.rating-summary > strong { font: 800 46px Manrope; }.rating-summary div { display: flex; flex-direction: column; }.rating-summary span, .review-stars, .entry-review > span { color: #d393ff; letter-spacing: .08em; }.rating-summary small { color: var(--muted); font-size: 11px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card { padding: 30px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 18px; }.review-stars { font-size: 14px; }.review-card blockquote { min-height: 84px; margin: 20px 0 26px; font-family: Manrope; font-size: 16px; line-height: 1.6; }.review-author { display: flex; align-items: center; gap: 12px; }.review-author > span { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(157,78,221,.15); color: var(--purple-bright); border-radius: 10px; font-size: 11px; font-weight: 800; }.review-author div { display: flex; flex-direction: column; }.review-author small { color: var(--muted); font-size: 11px; }.review-work { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: #887e8e; font-size: 12px; }.empty-reviews { border: 1px dashed rgba(189,104,255,.25); border-radius: var(--radius); padding: 55px; text-align: center; background: rgba(157,78,221,.03); }.empty-reviews > span { color: var(--purple-bright); font-size: 30px; }.empty-reviews h3 { margin: 15px 0 6px; }.empty-reviews p { color: var(--muted); margin: 0; }

.contact-card { min-height: 340px; padding: 65px 70px; border-radius: 30px; background: radial-gradient(circle at 85% 20%, rgba(203,112,255,.25), transparent 35%), linear-gradient(135deg, #5f18a1, #2b0c4c); display: flex; align-items: center; justify-content: space-between; gap: 45px; box-shadow: 0 30px 80px rgba(90,18,145,.25); }.contact-card h2 { font-size: clamp(40px,5vw,64px); margin-bottom: 20px; }.contact-card h2 span { color: #dec2f3; }.contact-card p:not(.eyebrow) { max-width: 580px; color: #d2bde1; }.contact-card .eyebrow { color: #e7cafa; }
.site-footer { width: min(1180px, calc(100% - 48px)); margin-inline: auto; padding: 40px 0 55px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: end; }.site-footer p { color: var(--muted); font-size: 12px; }.footer-meta { display: flex; gap: 25px; color: #766d7a; font-size: 11px; }.footer-meta a:hover { color: var(--purple-bright); }

/* Forms and authentication */
.auth-page, .review-page, .message-page { min-height: 100vh; display: grid; place-items: center; padding: 90px 24px 50px; position: relative; }.auth-brand, .review-brand { position: absolute; top: 27px; left: 36px; }.auth-card, .review-form-card, .message-card { width: min(460px, 100%); padding: 42px; background: rgba(18,13,29,.94); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }.auth-card h1, .message-card h1 { font-size: 31px; margin-bottom: 13px; }.auth-card > p:not(.eyebrow), .message-card > p { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.form-stack { display: flex; flex-direction: column; gap: 21px; }.form-stack label, .form-stack legend { color: #ddd4e2; font-size: 13px; font-weight: 700; }.form-stack input:not([type="radio"]):not([type="checkbox"]), .form-stack textarea, .copy-row input { width: 100%; margin-top: 8px; padding: 13px 14px; color: white; background: #0b0811; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; outline: none; transition: border-color .2s, box-shadow .2s; }.form-stack textarea { resize: vertical; min-height: 110px; }.form-stack input:focus, .form-stack textarea:focus, .copy-row input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(157,78,221,.1); }.form-stack label > small { display: block; margin-top: 5px; color: #746a7a; font-size: 10px; font-weight: 400; }.form-stack label em { color: #776d7e; font-style: normal; font-weight: 400; }.back-link { display: block; margin-top: 25px; text-align: center; color: #887e8e; font-size: 12px; }.alert { margin: 0 0 22px; padding: 13px 16px; border-radius: 10px; font-size: 13px; }.alert-error { color: #ffb0c1; background: rgba(255,74,113,.08); border: 1px solid rgba(255,74,113,.18); }.alert-success { color: #9cedc3; background: rgba(63,211,142,.07); border: 1px solid rgba(63,211,142,.17); }

/* Admin */
.admin-header { border-bottom: 1px solid var(--line); width: 100%; padding-inline: max(32px, calc((100% - 1280px)/2)); }.admin-header > div { display: flex; align-items: center; gap: 20px; }.admin-header form { margin: 0; }.subtle-link { color: var(--muted); font-size: 12px; }.admin-shell { width: min(1280px, calc(100% - 48px)); margin: 65px auto 100px; }.admin-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 42px; }.admin-title h1 { margin: 0 0 8px; font-size: 40px; }.admin-title p:not(.eyebrow) { color: var(--muted); margin: 0; }.admin-chip { padding: 8px 13px; border: 1px solid var(--line); border-radius: 50px; color: #ada2b3; font-size: 11px; }.admin-chip i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 9px var(--success); }.fresh-link { margin: 0 0 24px; padding: 22px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 24px; border: 1px solid rgba(157,78,221,.28); border-radius: 16px; background: rgba(157,78,221,.07); }.fresh-link p { color: var(--muted); font-size: 12px; margin: 3px 0 0; }.copy-row { display: flex; gap: 8px; }.copy-row input { margin: 0; min-width: 0; }.copy-row .button { flex-shrink: 0; }.admin-grid { display: grid; grid-template-columns: 420px 1fr; gap: 22px; align-items: start; }.admin-panel { background: rgba(18,13,29,.8); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }.create-panel { position: sticky; top: 24px; }.panel-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }.panel-heading h2 { margin: 0 0 3px; font-size: 19px; }.panel-heading p { margin: 0; color: var(--muted); font-size: 12px; }.panel-icon { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(157,78,221,.13); border-radius: 10px; color: var(--purple-bright); }.switch-label { display: flex !important; justify-content: space-between; align-items: center; cursor: pointer; }.switch-label span { display: flex; flex-direction: column; }.switch-label small { color: var(--muted); font-weight: 400; }.switch-label input { position: absolute; opacity: 0; }.switch-label i { width: 42px; height: 23px; border-radius: 20px; background: #302638; position: relative; transition: background .2s; }.switch-label i::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: #a69dab; transition: transform .2s; }.switch-label input:checked + i { background: var(--purple-dark); }.switch-label input:checked + i::after { transform: translateX(19px); background: white; }.entry-list { display: flex; flex-direction: column; gap: 12px; max-height: 750px; overflow-y: auto; padding-right: 3px; }.entry-card { padding: 20px; background: rgba(255,255,255,.018); border: 1px solid var(--line); border-radius: 14px; }.entry-top { display: flex; align-items: center; gap: 11px; }.company-avatar { width: 38px; height: 38px; display: grid; place-items: center; background: #24162f; border-radius: 9px; color: var(--purple-bright); font-size: 10px; font-weight: 800; }.entry-name { display: flex; flex-direction: column; flex: 1; }.entry-name small { color: #776e7c; font-size: 10px; }.status { border-radius: 50px; padding: 5px 9px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }.status-done { color: var(--success); background: rgba(94,233,168,.08); }.status-waiting { color: #eabf70; background: rgba(234,191,112,.08); }.status-revoked { color: #9b909f; background: rgba(255,255,255,.05); }.entry-card > p { color: var(--muted); font-size: 12px; margin: 15px 0; }.entry-review { padding: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 8px; background: rgba(157,78,221,.06); font-size: 11px; }.entry-review b { color: #bbb1c0; }.entry-review q { flex-basis: 100%; color: var(--muted); }.entry-actions { display: flex; justify-content: space-between; padding-top: 13px; margin-top: 13px; border-top: 1px solid var(--line); }.entry-actions form { margin: 0; }.text-button { padding: 0; border: 0; background: none; cursor: pointer; color: #a495ad; font-size: 10px; }.text-button:hover { color: white; }.text-button.danger:hover { color: var(--danger); }.admin-empty { text-align: center; padding: 70px 20px; color: var(--muted); }.admin-empty span { font-size: 28px; color: var(--purple-bright); }

/* Review */
.review-page { padding-top: 105px; }.review-form-card { width: min(650px, 100%); padding: 46px 52px; }.review-intro { text-align: center; }.secure-badge { display: inline-block; margin-bottom: 25px; padding: 6px 11px; border-radius: 50px; background: rgba(94,233,168,.07); color: #80deb0; font-size: 10px; font-weight: 700; }.review-intro .eyebrow { margin-bottom: 10px; }.review-intro h1 { font-size: 36px; margin-bottom: 14px; }.review-intro h1 span { color: var(--purple-bright); }.review-intro > p:not(.eyebrow) { max-width: 510px; margin: 0 auto; color: var(--muted); font-size: 14px; }.work-summary { margin: 30px 0; padding: 18px 20px; border-left: 2px solid var(--purple); background: rgba(157,78,221,.055); border-radius: 0 10px 10px 0; }.work-summary small { color: var(--purple-bright); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }.work-summary p { margin: 4px 0 0; color: #c5b9ca; font-size: 13px; }.review-form fieldset { padding: 0 0 22px; margin: 0; border: 0; border-bottom: 1px solid var(--line); }.review-form legend { font-size: 14px; }.field-help { margin: 2px 0 12px; color: #746b79; font-size: 11px; }.star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }.star-rating input { position: absolute; opacity: 0; }.star-rating label { color: #35283f; font-size: 38px; line-height: 1; cursor: pointer; transition: color .15s, transform .15s; }.star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: #c274f5; }.star-rating label:hover { transform: scale(1.12); }.recommend-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 12px; }.recommend-options input { position: absolute; opacity: 0; }.recommend-options span { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: #a79cad; font-weight: 500; }.recommend-options input:checked + span { border-color: var(--purple); background: rgba(157,78,221,.1); color: white; }.recommend-options b { color: var(--purple-bright); }.privacy-note { margin: -5px 0 0; color: #6f6574; font-size: 10px; text-align: center; }.message-card { text-align: center; }.success-check, .error-symbol { width: 62px; height: 62px; margin: 0 auto 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(94,233,168,.09); color: var(--success); font-size: 25px; border: 1px solid rgba(94,233,168,.2); }.error-symbol { background: rgba(255,107,138,.08); color: var(--danger); border-color: rgba(255,107,138,.2); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }.delay-one { transition-delay: .12s; }.delay-two { transition-delay: .22s; }

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; padding-top: 90px; text-align: center; }.hero-copy { display: flex; flex-direction: column; align-items: center; }.hero-visual { min-height: 480px; }.about { grid-template-columns: 1fr; gap: 45px; }.service-grid { grid-template-columns: repeat(2,1fr); }.admin-grid { grid-template-columns: 1fr; }.create-panel { position: static; }.project-wide { grid-template-columns: 1.1fr .9fr; }.review-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 720px) {
  .shell, .site-header, .site-footer, .admin-shell { width: min(100% - 32px, 1180px); }.section-pad { padding-top: 80px; padding-bottom: 80px; }.site-header { height: 76px; }.menu-button { display: flex; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 6px; padding: 9px; cursor: pointer; }.menu-button span:not(.sr-only) { height: 2px; background: white; width: 100%; }.main-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 22px; align-items: stretch; flex-direction: column; gap: 18px; background: #120d1d; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }.main-nav.open { display: flex; }.main-nav .nav-cta { text-align: center; }.hero { min-height: auto; padding-top: 75px; gap: 15px; }.hero h1 { font-size: clamp(42px, 12vw, 58px); }.lead { font-size: 16px; }.trust-line { gap: 9px; flex-wrap: wrap; justify-content: center; }.hero-visual { min-height: 430px; width: calc(100% + 10px); }.orbit-one { width: 400px; height: 400px; }.orbit-two { width: 330px; height: 330px; }.code-card { transform: none; }.code-card pre { padding: 29px 20px; font-size: 12px; }.badge-one { left: -8px; top: 60px; }.badge-two { right: -6px; bottom: 55px; }.inline-heading { flex-direction: column; align-items: start; margin-bottom: 40px; gap: 22px; }.metrics { gap: 10px; }.metrics strong { font-size: 23px; }.service-grid, .project-grid, .review-grid { grid-template-columns: 1fr; }.service-card { min-height: 370px; }.project-wide { grid-column: auto; display: block; }.project-wide .project-art { min-height: 310px; }.project-wide .project-copy { padding: 31px; }.contact-card { padding: 45px 28px; flex-direction: column; align-items: start; }.site-footer { align-items: start; flex-direction: column; gap: 25px; }.admin-header { padding-inline: 16px; }.admin-header .subtle-link { display: none; }.admin-title { align-items: start; flex-direction: column; gap: 20px; }.fresh-link { grid-template-columns: 1fr; }.copy-row { flex-direction: column; }.admin-panel { padding: 20px; }.review-form-card { padding: 34px 22px; }.auth-card { padding: 34px 24px; }.review-brand, .auth-brand { left: 20px; }.recommend-options { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.orbit { animation: none; }.reveal { opacity: 1; transform: none; transition: none; }.button { transition: none; }
}