/* Think xD - Public Homepage CSS */
/* Parent page: /public/index.php */

:root {
    --txd-bg: #071a24;
    --txd-bg-2: #0b2a31;
    --txd-gold: #d7b66a;
    --txd-gold-soft: #f0d997;
    --txd-cream: #f7f0df;
    --txd-muted: #9fb6bd;
    --txd-card: rgba(255,255,255,.055);
    --txd-border: rgba(215,182,106,.24);
}

html { scroll-behavior: smooth; }
body {
    margin: 0; color: var(--txd-cream);
    background: radial-gradient(circle at 20% 10%, rgba(28,118,122,.35), transparent 35%), radial-gradient(circle at 80% 20%, rgba(215,182,106,.16), transparent 30%), linear-gradient(135deg,#06141f 0%,#0a2630 48%,#06161d 100%);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
}
a { color: var(--txd-gold-soft); text-decoration: none; }
a:hover { color: #fff; }
.txd-navbar { background: rgba(5,18,26,.80); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(215,182,106,.18); transition: all .25s ease; }
.txd-navbar.scrolled { background: rgba(5,18,26,.96); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.navbar-brand { font-weight: 900; letter-spacing: .03em; font-size: 1.35rem; color: #fff; }
.navbar-brand span { color: var(--txd-gold); }
.navbar .nav-link { color: rgba(247,240,223,.82); font-weight: 650; font-size: .95rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--txd-gold-soft); }
.btn-gold { border: 1px solid rgba(215,182,106,.9); background: linear-gradient(135deg,#b9913f 0%,#f2d891 55%,#b9913f 100%); color: #10202a; font-weight: 800; box-shadow: 0 12px 30px rgba(215,182,106,.18); }
.btn-gold:hover { color: #06141f; filter: brightness(1.05); transform: translateY(-1px); }
.btn-outline-light { border-color: rgba(247,240,223,.55); color: var(--txd-cream); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.hero { position: relative; min-height: 100vh; overflow: hidden; }
.hero-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:54px 54px; mask-image: radial-gradient(circle at center, black 0%, transparent 74%); pointer-events:none; }
.hero-orbit { position:absolute; border:1px solid rgba(215,182,106,.16); border-radius:50%; pointer-events:none; }
.orbit-1 { width:680px; height:680px; right:-170px; top:140px; }
.orbit-2 { width:420px; height:420px; left:-190px; bottom:-120px; }
.eyebrow,.section-kicker { color:var(--txd-gold-soft); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:850; }
.hero-title { font-weight:900; color:#fff; letter-spacing:-.06em; line-height:.94; font-size:clamp(4.5rem,12vw,8rem); }
.hero-title span { color:var(--txd-gold); text-shadow:0 0 28px rgba(215,182,106,.22); }
.hero-subtitle { color:var(--txd-gold-soft); font-weight:650; font-size:clamp(1.35rem,2.5vw,2.05rem); line-height:1.22; }
.hero-lead { color:rgba(247,240,223,.92); font-size:clamp(1.08rem,2vw,1.35rem); margin-top:20px; }
.hero-text,.section p { color:rgba(247,240,223,.78); line-height:1.75; }
.decagon-visual { position:relative; width:min(92vw,500px); aspect-ratio:1; display:grid; place-items:center; isolation:isolate; }
.ring { position:absolute; border:1px solid rgba(215,182,106,.22); border-radius:50%; }
.ring-a { width:95%; height:95%; animation:rotateSlow 36s linear infinite; }
.ring-b { width:74%; height:74%; transform:rotate(22deg); animation:rotateSlowReverse 28s linear infinite; }
.ring-c { width:56%; height:56%; border-style:dashed; border-color:rgba(120,220,225,.22); animation:rotateSlow 22s linear infinite; }
.deca { position:relative; width:62%; height:62%; clip-path:polygon(50% 0%,79% 10%,98% 35%,98% 65%,79% 90%,50% 100%,21% 90%,2% 65%,2% 35%,21% 10%); border:2px solid var(--txd-gold); background:radial-gradient(circle at center, rgba(215,182,106,.18), transparent 36%), linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:0 0 55px rgba(215,182,106,.14), inset 0 0 35px rgba(215,182,106,.14); }
.deca:after { content:""; position:absolute; inset:12%; border:1px solid rgba(247,240,223,.18); clip-path:inherit; }
.core { position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,#fff 0%,#f4d987 32%,#b9913f 58%,transparent 72%); box-shadow:0 0 50px rgba(215,182,106,.85); }
.dot { position:absolute; width:13px; height:13px; border-radius:50%; background:var(--txd-gold-soft); box-shadow:0 0 16px rgba(215,182,106,.85); }
.d1{left:50%;top:0%;transform:translate(-50%,-50%)} .d2{left:79%;top:10%;transform:translate(-50%,-50%)} .d3{left:98%;top:35%;transform:translate(-50%,-50%)} .d4{left:98%;top:65%;transform:translate(-50%,-50%)} .d5{left:79%;top:90%;transform:translate(-50%,-50%)} .d6{left:50%;top:100%;transform:translate(-50%,-50%)} .d7{left:21%;top:90%;transform:translate(-50%,-50%)} .d8{left:2%;top:65%;transform:translate(-50%,-50%)} .d9{left:2%;top:35%;transform:translate(-50%,-50%)} .d10{left:21%;top:10%;transform:translate(-50%,-50%)}
.visual-caption { position:absolute; bottom:2%; text-align:center; }
.visual-caption strong { display:block; color:#fff; }
.visual-caption small { color:var(--txd-muted); letter-spacing:.06em; }
@keyframes rotateSlow { to{ transform:rotate(360deg);} } @keyframes rotateSlowReverse { to{ transform:rotate(-360deg);} }
.section { padding:100px 0; }
.section-dark { background:rgba(3,13,18,.45); border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.04); }
.section-gradient { background:radial-gradient(circle at 85% 20%, rgba(215,182,106,.12), transparent 28%), radial-gradient(circle at 10% 85%, rgba(18,118,126,.18), transparent 30%), rgba(255,255,255,.025); }
.section-contact { background:linear-gradient(135deg, rgba(215,182,106,.08), rgba(18,118,126,.12)), rgba(3,13,18,.55); }
.section-title { font-size:clamp(2rem,4vw,3.2rem); color:#fff; font-weight:900; letter-spacing:-.035em; margin-bottom:1.25rem; }
.section-lead { font-size:1.12rem; max-width:820px; }
.feature-card,.dimension-card,.eco-card,.contact-card,.book-mock { background:var(--txd-card); border:1px solid var(--txd-border); border-radius:28px; padding:28px; box-shadow:0 18px 60px rgba(0,0,0,.18); backdrop-filter:blur(10px); }
.feature-card,.dimension-card,.eco-card { transition:transform .25s ease,border-color .25s ease; }
.feature-card:hover,.dimension-card:hover,.eco-card:hover { transform:translateY(-4px); border-color:rgba(215,182,106,.52); }
.feature-card i,.eco-card i { width:56px; height:56px; display:grid; place-items:center; border-radius:18px; color:#13242d; background:linear-gradient(135deg,#f2d891,#b9913f); margin-bottom:22px; font-size:1.35rem; }
.feature-card h3,.dimension-card h3,.eco-card h3,.contact-card h3 { color:#fff; font-size:1.25rem; margin-bottom:.7rem; }
.dimension-code { color:var(--txd-gold-soft); font-size:1.9rem; font-weight:900; margin-bottom:.75rem; }
.dimension-verb { display:inline-block; color:var(--txd-gold-soft); background:rgba(215,182,106,.12); border:1px solid rgba(215,182,106,.18); border-radius:999px; padding:.22rem .7rem; font-size:.78rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8rem; }
.book-mock { max-width:360px; min-height:520px; margin:0 auto; display:flex; flex-direction:column; justify-content:space-between; text-align:center; background:radial-gradient(circle at center, rgba(215,182,106,.25), transparent 34%), linear-gradient(155deg,#06141f,#0d3940 54%,#071a24); }
.book-title { font-size:3rem; font-weight:950; color:var(--txd-gold-soft); }
.book-sep { width:46%; height:1px; background:var(--txd-gold); margin:0 auto; }
.book-subtitle { color:#fff; font-size:1.35rem; line-height:1.3; font-weight:700; }
.book-symbol { color:var(--txd-gold); font-size:4rem; text-shadow:0 0 32px rgba(215,182,106,.45); }
.book-author { color:rgba(247,240,223,.92); letter-spacing:.2em; font-size:.9rem; font-weight:900; }
.status-pill { display:inline-flex; align-items:center; border-radius:999px; border:1px solid rgba(215,182,106,.22); background:rgba(215,182,106,.1); color:var(--txd-gold-soft); padding:.55rem .9rem; font-weight:750; }
.contact-card ul { color:rgba(247,240,223,.78); line-height:1.8; }
code { color:var(--txd-gold-soft); }
.muted { color:var(--txd-muted); }
.footer { padding:32px 0; background:rgba(2,8,12,.82); border-top:1px solid rgba(215,182,106,.15); }
.footer-brand { color:#fff; font-weight:900; font-size:1.3rem; }
.footer-brand span { color:var(--txd-gold); }
.footer-tagline,.copyright { color:var(--txd-muted); font-size:.85rem; }
.footer a { margin:0 .65rem; color:rgba(247,240,223,.78); font-weight:650; }
.footer a:hover { color:var(--txd-gold-soft); }
@media (max-width:991.98px){ .hero .min-vh-100{min-height:auto!important;padding-top:140px!important}.section{padding:76px 0}.book-mock{min-height:460px} }
@media (max-width:575.98px){ .hero-title{font-size:4.2rem}.feature-card,.dimension-card,.eco-card,.contact-card,.book-mock{border-radius:22px;padding:22px}.decagon-visual{width:min(92vw,360px)}.footer{text-align:center}.footer a{display:inline-block;margin:.35rem .5rem} }


/* Think xD - Contact Form CSS Additions
 * Parent page: /public/index.php
 *
 * Copy this content to the end of /public/assets/css/home.css
 * if your current home.css does not already include these rules.
 */

.txd-input {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #f7f0df !important;
    border-radius: 14px !important;
    padding: .8rem .95rem !important;
}

.txd-input:focus {
    border-color: rgba(215,182,106,.72) !important;
    box-shadow: 0 0 0 .25rem rgba(215,182,106,.13) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
}

.txd-input::placeholder { color: rgba(247,240,223,.45) !important; }
select.txd-input option { color: #10202a; }

.txd-checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(247,240,223,.84);
    font-weight: 650;
}
.txd-checkbox input { margin-top: 5px; accent-color: #d7b66a; }

.alert { border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; line-height: 1.5; }
.alert-error { border: 1px solid rgba(255,95,95,.45); background: rgba(255,95,95,.12); color: #ffd1d1; }
.alert-success { border: 1px solid rgba(125,230,180,.45); background: rgba(125,230,180,.12); color: #d8ffe9; }

/* Think xD - Contact Form CSS Additions
 * Parent page: /public/index.php
 * Copy this content to the end of /public/assets/css/home.css.
 */
.txd-input{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;color:#f7f0df!important;border-radius:14px!important;padding:.8rem .95rem!important}.txd-input:focus{border-color:rgba(215,182,106,.72)!important;box-shadow:0 0 0 .25rem rgba(215,182,106,.13)!important;background:rgba(255,255,255,.10)!important;color:#fff!important}.txd-input::placeholder{color:rgba(247,240,223,.45)!important}select.txd-input option{color:#10202a}.txd-multiselect{min-height:142px}.field-help{display:block;margin-top:6px;color:rgba(247,240,223,.58)}.txd-checkbox{display:flex;gap:10px;align-items:flex-start;color:rgba(247,240,223,.84);font-weight:650}.txd-checkbox input{margin-top:5px;accent-color:#d7b66a}.alert{border-radius:14px;padding:12px 14px;margin-bottom:18px;line-height:1.5}.alert-error{border:1px solid rgba(255,95,95,.45);background:rgba(255,95,95,.12);color:#ffd1d1}.alert-success{border:1px solid rgba(125,230,180,.45);background:rgba(125,230,180,.12);color:#d8ffe9}


/* Contact form readability fixes */

.txd-input {
    background: rgba(247, 240, 223, 0.08) !important;
    border: 1px solid rgba(247, 240, 223, 0.22) !important;
    color: #f7f0df !important;
    border-radius: 14px !important;
    padding: .8rem .95rem !important;
}

.txd-input:focus {
    background: rgba(247, 240, 223, 0.12) !important;
    border-color: rgba(215, 182, 106, 0.75) !important;
    box-shadow: 0 0 0 .25rem rgba(215, 182, 106, 0.14) !important;
    color: #ffffff !important;
}

.txd-input::placeholder {
    color: rgba(247, 240, 223, 0.50) !important;
}

/* Multiple select fields */
select.txd-input,
select.txd-multiselect {
    background-color: rgba(247, 240, 223, 0.12) !important;
    color: #f7f0df !important;
}

select.txd-input option,
select.txd-multiselect option {
    background-color: #102a32 !important;
    color: #f7f0df !important;
    padding: 8px 10px;
}

select.txd-input option:checked,
select.txd-multiselect option:checked {
    background-color: #d7b66a !important;
    color: #10202a !important;
}

select.txd-input option:hover,
select.txd-multiselect option:hover {
    background-color: #274a52 !important;
    color: #ffffff !important;
}

/* Better visual height for multiple selects */
.txd-multiselect {
    min-height: 170px;
    scrollbar-color: #d7b66a rgba(247, 240, 223, 0.12);
}

/* Labels and helper text */
.form-label {
    color: rgba(247, 240, 223, 0.92);
    font-weight: 700;
}

.field-help {
    color: rgba(247, 240, 223, 0.65);
}