:root {
--bg: #f4f7fb;
--bg-soft: #eef4ff;
--paper: #ffffff;
--ink: #172033;
--muted: #667085;
--line: #d9e2ef;

--primary: #315fc8;
--primary-dark: #23479e;
--primary-soft: #dce8ff;

--zodiac: #6b4aa0;
--zodiac-soft: #eee8f9;
--gold: #b97810;
--gold-soft: #fff3d8;

--error: #a51d2d;
--error-bg: #fff1f2;
--error-line: #fecdd3;

--warning: #8a5608;
--warning-bg: #fff8e7;
--warning-line: #f2d18d;

--shadow: 0 20px 48px rgba(28, 48, 85, .10);
--radius-lg: 28px;
--radius-md: 20px;
--radius-sm: 14px;
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background:
radial-gradient(circle at top left, rgba(49, 95, 200, .14), transparent 34rem),
radial-gradient(circle at top right, rgba(107, 74, 160, .12), transparent 30rem),
var(--bg);
color: var(--ink);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}

a {
color: var(--primary);
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.container {
width: min(1120px, calc(100% - 2rem));
margin: 0 auto;
}

/* Nagłówek */

.site-header {
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid rgba(217, 226, 239, .9);
background: rgba(255, 255, 255, .82);
backdrop-filter: blur(16px);
}

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 74px;
gap: 1rem;
}

.brand {
color: var(--ink);
font-size: 1.08rem;
font-weight: 850;
letter-spacing: -.015em;
text-decoration: none;
}

.brand::before {
display: inline-grid;
width: 2.2rem;
height: 2.2rem;
place-items: center;
margin-right: .6rem;
border-radius: 999px;
background:
radial-gradient(circle at 34% 34%, #fff 0 7%, transparent 8%),
linear-gradient(135deg, var(--zodiac), var(--primary));
color: #fff;
box-shadow: 0 9px 20px rgba(78, 67, 141, .24);
content: "☉";
font-size: 1.2rem;
vertical-align: middle;
}

.brand:hover {
text-decoration: none;
}

.header-link {
border: 1px solid var(--line);
border-radius: 999px;
padding: .48rem .8rem;
background: rgba(255, 255, 255, .72);
color: #374151;
font-size: .92rem;
font-weight: 750;
}

.header-link:hover {
border-color: rgba(49, 95, 200, .4);
background: var(--primary-soft);
color: var(--primary-dark);
text-decoration: none;
}

/* Nagłówki i hero */

.hero {
padding: 4.5rem 0 2.5rem;
text-align: center;
}

.eyebrow {
margin: 0 0 .7rem;
color: var(--primary);
font-size: .78rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}

h1,
h2,
h3 {
margin-top: 0;
color: var(--ink);
line-height: 1.16;
}

h1 {
max-width: 840px;
margin-right: auto;
margin-bottom: 1.15rem;
margin-left: auto;
font-size: clamp(2.2rem, 5.3vw, 4.7rem);
letter-spacing: -.055em;
}

h2 {
font-size: clamp(1.55rem, 3vw, 2.25rem);
letter-spacing: -.035em;
}

h3 {
margin-bottom: .65rem;
font-size: 1.18rem;
letter-spacing: -.018em;
}

.lead {
max-width: 780px;
margin: 0 auto;
color: #435066;
font-size: clamp(1.06rem, 2vw, 1.24rem);
}

/* Główne sekcje */

.section {
padding: 2.25rem 0;
}

.section-result {
padding-top: 1.25rem;
}

.section-education {
padding-top: 2.5rem;
padding-bottom: 4rem;
}

.section-heading {
max-width: 820px;
margin-bottom: 1.6rem;
}

.section-heading > p:last-child {
color: #4b5870;
font-size: 1.04rem;
}

.center {
margin-right: auto;
margin-left: auto;
text-align: center;
}

/* Kalkulator */

.calculator-card,
.result-card,
.education-card,
.education-note {
border: 1px solid rgba(217, 226, 239, .95);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .93);
box-shadow: var(--shadow);
}

.calculator-card {
max-width: 980px;
margin: 0 auto;
padding: clamp(1.25rem, 3vw, 2rem);
}

.calculator-card h2 {
margin-bottom: .55rem;
}

.calculator-intro {
max-width: 760px;
margin: 0 0 1.35rem;
color: var(--muted);
}

.form-grid {
display: grid;
grid-template-columns: 1.15fr 1.25fr .8fr .85fr .85fr;
gap: 1rem;
}

.form-grid label {
display: block;
min-width: 0;
color: #334155;
font-size: .92rem;
font-weight: 800;
}

.form-grid label span {
display: block;
margin-bottom: .4rem;
}

select {
display: block;
width: 100%;
min-height: 3.15rem;
border: 1px solid #cbd7e7;
border-radius: var(--radius-sm);
padding: .8rem .9rem;
outline: none;
background: #fff;
color: var(--ink);
box-shadow: 0 7px 18px rgba(30, 50, 85, .04);
font: inherit;
transition: border-color .16s ease, box-shadow .16s ease;
}

select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(49, 95, 200, .13);
}

button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
margin-top: 1.4rem;
border: 0;
border-radius: 999px;
padding: .85rem 1.3rem;
background: linear-gradient(135deg, var(--primary), #5b8ded);
color: #fff;
box-shadow: 0 14px 28px rgba(49, 95, 200, .25);
cursor: pointer;
font: inherit;
font-weight: 850;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

button:hover {
box-shadow: 0 18px 34px rgba(49, 95, 200, .32);
filter: brightness(1.03);
transform: translateY(-1px);
}

button:active {
transform: translateY(0);
}

/* Komunikaty i wybór wariantu czasu */

.message {
max-width: 900px;
margin: 0 auto 1.2rem;
border-radius: var(--radius-md);
padding: 1rem 1.15rem;
}

.message h2 {
margin-bottom: .45rem;
font-size: 1.25rem;
}

.message p:last-of-type {
margin-bottom: 0;
}

.message-error {
border: 1px solid var(--error-line);
background: var(--error-bg);
color: var(--error);
}

.message-warning {
border: 1px solid var(--warning-line);
background: var(--warning-bg);
color: #5f420f;
}

.time-choice-form {
display: grid;
gap: .65rem;
margin-top: 1rem;
}

.time-choice {
display: flex;
align-items: flex-start;
gap: .7rem;
border: 1px solid rgba(138, 86, 8, .24);
border-radius: var(--radius-sm);
padding: .85rem .95rem;
background: rgba(255, 255, 255, .68);
cursor: pointer;
}

.time-choice input {
width: 1.1rem;
height: 1.1rem;
margin: .22rem 0 0;
accent-color: var(--primary);
}

.time-choice strong {
color: #3e2b06;
}

.time-choice-form button {
margin-top: .45rem;
justify-self: start;
}

/* Wynik */

.result-card {
max-width: 980px;
margin: 0 auto;
overflow: hidden;
padding: clamp(1.3rem, 3vw, 2rem);
background:
radial-gradient(circle at 100% 0%, rgba(107, 74, 160, .14), transparent 31rem),
radial-gradient(circle at 0% 100%, rgba(49, 95, 200, .11), transparent 28rem),
rgba(255, 255, 255, .96);
}

.result-card h2 {
margin-bottom: .8rem;
}

.zodiac-symbol {
display: inline-grid;
width: 2.2rem;
height: 2.2rem;
place-items: center;
margin-right: .1rem;
border-radius: 999px;
background: var(--zodiac-soft);
color: var(--zodiac);
font-size: 1.35rem;
vertical-align: middle;
}

.zodiac-position {
margin: 0 0 1.35rem;
color: #3f4b61;
font-size: 1.07rem;
}

.zodiac-position strong {
color: var(--zodiac);
}

.result-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .85rem;
margin: 0;
}

.result-details > div {
min-width: 0;
border: 1px solid rgba(217, 226, 239, .95);
border-radius: var(--radius-sm);
padding: .95rem 1rem;
background: rgba(255, 255, 255, .75);
}

.result-details dt {
margin-bottom: .3rem;
color: var(--muted);
font-size: .86rem;
font-weight: 800;
}

.result-details dd {
margin: 0;
color: #273248;
font-weight: 700;
}

/* Część edukacyjna */

.education-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.15rem;
}

.education-card {
padding: 1.35rem;
}

.education-card--wide {
grid-column: 1 / -1;
background:
radial-gradient(circle at 98% 0%, rgba(185, 120, 16, .13), transparent 24rem),
rgba(255, 255, 255, .94);
}

.education-card p {
color: #48566d;
}

.education-card p:last-child {
margin-bottom: 0;
}

.season-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .75rem;
margin-top: 1.1rem;
}

.season-point {
border: 1px solid rgba(217, 226, 239, .95);
border-radius: var(--radius-sm);
padding: .9rem;
background: #fff;
}

.season-point strong,
.season-point span {
display: block;
}

.season-point strong {
margin-bottom: .25rem;
color: var(--zodiac);
font-size: 1rem;
}

.season-point span {
color: #56647a;
font-size: .9rem;
line-height: 1.42;
}

.calculation-list {
display: grid;
gap: .55rem;
margin: .9rem 0 0;
padding-left: 1.3rem;
color: #48566d;
}

.calculation-list li::marker {
color: var(--primary);
font-weight: 900;
}

.education-note {
max-width: 980px;
margin: 1.3rem auto 0;
border-color: rgba(185, 120, 16, .30);
padding: 1.1rem 1.2rem;
background:
linear-gradient(135deg, rgba(255, 243, 216, .9), rgba(255, 255, 255, .92));
}

.education-note h2 {
margin-bottom: .55rem;
font-size: 1.2rem;
}

.education-note p {
margin: 0;
color: #5c4a27;
}

/* Pozostałe serwisy Etercal */

.section-related {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}

.related-tools-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}

.related-tool-card {
display: flex;
min-height: 205px;
flex-direction: column;
padding: 1.3rem;
border: 1px solid rgba(217, 226, 239, .96);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, .92);
box-shadow: 0 14px 32px rgba(28, 48, 85, .08);
}

.related-tool-card h3 {
margin: 0 0 .45rem;
font-size: 1.22rem;
}

.related-tool-card p {
margin: 0 0 1rem;
color: #4c5a70;
font-size: .95rem;
line-height: 1.55;
}

.related-tool-card a {
align-self: flex-start;
margin-top: auto;
color: var(--primary-dark);
font-size: .93rem;
font-weight: 850;
text-decoration: none;
}

.related-tool-card a:hover {
text-decoration: underline;
}

.related-tool-icon {
display: inline-grid;
width: 2.55rem;
height: 2.55rem;
place-items: center;
margin-bottom: .85rem;
border-radius: 999px;
background: var(--primary-soft);
color: var(--primary-dark);
font-size: 1.3rem;
font-weight: 900;
}

.related-tool-card--calendar {
border-color: #cddfcb;
background:
radial-gradient(circle at 100% 100%, rgba(92, 153, 92, .11), transparent 48%),
rgba(255, 255, 255, .92);
}

.related-tool-card--calendar .related-tool-icon {
background: #e2f0df;
color: #2f6d3c;
}

.related-tool-card--check {
border-color: #cadcf3;
background:
radial-gradient(circle at 100% 100%, rgba(49, 95, 200, .11), transparent 48%),
rgba(255, 255, 255, .92);
}

.related-tool-card--biorhythm {
border-color: #edd1c1;
background:
radial-gradient(circle at 100% 100%, rgba(197, 107, 72, .11), transparent 48%),
rgba(255, 255, 255, .92);
}

.related-tool-card--biorhythm .related-tool-icon {
background: #f8e2d7;
color: #a85032;
}

.related-tool-card--numerology {
border-color: #ded0ea;
background:
radial-gradient(circle at 100% 100%, rgba(126, 82, 167, .12), transparent 48%),
rgba(255, 255, 255, .92);
}

.related-tool-card--numerology .related-tool-icon {
background: #eee5f7;
color: #704a9b;
}

.related-eet {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
margin-top: 1rem;
padding: 1.15rem 1.3rem;
border: 1px solid #eed9a8;
border-radius: var(--radius-md);
background:
radial-gradient(circle at 100% 50%, rgba(242, 183, 61, .16), transparent 34%),
linear-gradient(135deg, #fffdf8, #fff3d8);
box-shadow: 0 12px 28px rgba(128, 92, 20, .07);
}

.related-eet-icon {
display: grid;
width: 3rem;
height: 3rem;
place-items: center;
border-radius: 999px;
background: #ffedbd;
color: #a66a00;
font-size: 1.6rem;
font-weight: 900;
}

.related-eet-content h3 {
margin: 0 0 .2rem;
font-size: 1.16rem;
}

.related-eet-content p:not(.related-eet-kicker) {
margin: 0;
color: #69542c;
font-size: .94rem;
}

.related-eet-kicker {
margin: 0 0 .15rem;
color: #9a680d;
font-size: .76rem;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}

.related-eet-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border-radius: 999px;
padding: .7rem 1rem;
background: #b97810;
color: #fff;
font-size: .9rem;
font-weight: 850;
text-decoration: none;
white-space: nowrap;
}

.related-eet-link:hover {
background: #98600a;
color: #fff;
text-decoration: none;
}

@media (max-width: 700px) {
.related-tools-grid {
grid-template-columns: 1fr;
}

.related-tool-card {
min-height: 0;
}

.related-eet {
grid-template-columns: auto minmax(0, 1fr);
}

.related-eet-link {
grid-column: 1 / -1;
width: 100%;
}
}


/* Stopka */

.site-footer {
margin-top: 2rem;
border-top: 1px solid rgba(217, 226, 239, .95);
background:
radial-gradient(circle at top left, rgba(49, 95, 200, .24), transparent 29rem),
radial-gradient(circle at 78% 0%, rgba(107, 74, 160, .18), transparent 24rem),
#101a30;
color: #dbe6fa;
}

.footer-grid {
display: grid;
grid-template-columns: 1.45fr 1fr 1fr 1fr;
gap: 2rem;
padding: 2.7rem 0 2.2rem;
}

.footer-brand-name {
display: inline-flex;
align-items: center;
gap: .7rem;
color: #fff;
text-decoration: none;
}

.footer-brand-name:hover {
color: #fff;
text-decoration: none;
}

.footer-brand-symbol {
display: inline-grid;
width: 2.45rem;
height: 2.45rem;
place-items: center;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
background:
radial-gradient(circle at 34% 34%, #fff 0 7%, transparent 8%),
linear-gradient(135deg, #7654aa, #315fc8);
box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
font-size: 1.3rem;
}

.footer-brand strong,
.footer-brand small {
display: block;
line-height: 1.2;
}

.footer-brand strong {
font-size: 1.05rem;
}

.footer-brand small {
max-width: 290px;
margin-top: .18rem;
color: #b8c7e6;
font-size: .83rem;
}

.footer-brand > p {
max-width: 330px;
margin: 1rem 0 0;
color: #c4d0e7;
font-size: .93rem;
line-height: 1.58;
}

.footer-column h2 {
margin: 0 0 .8rem;
color: #fff;
font-size: .98rem;
letter-spacing: 0;
}

.footer-column ul {
margin: 0;
padding: 0;
list-style: none;
}

.footer-column li + li {
margin-top: .5rem;
}

.footer-column a {
color: #dce7fb;
font-size: .93rem;
text-decoration: none;
}

.footer-column a:hover {
color: #fff;
text-decoration: underline;
}

.footer-project-note {
margin: .85rem 0 0;
color: #aec0df;
font-size: .87rem;
line-height: 1.52;
}

.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 68px;
border-top: 1px solid rgba(163, 182, 215, .20);
color: #b9c7df;
font-size: .9rem;
}

.footer-bottom p {
margin: 0;
}

.footer-bottom a {
color: #fff;
font-weight: 700;
text-decoration: none;
}

.footer-bottom a:hover {
text-decoration: underline;
}

@media (max-width: 900px) {
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 700px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 1.65rem;
padding: 2.2rem 0 1.8rem;
}

.footer-bottom {
align-items: flex-start;
flex-direction: column;
justify-content: center;
padding: 1rem 0;
}
}