@font-face { font-family: IRANSans; src: url(/taktaz-assets/IRANSansWeb.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: IRANSans; src: url(/taktaz-assets/IRANSansWeb_Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Jost; src: url(jost.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
    --ink: #04162c; --navy: #082a4e; --navy2: #0c3a66; --teal: #21c7d9; --teal2: #0f8fb3; --ice: #dff6fb;
    --text: #f2f8fc; --mute: #a9c2d6; --line: rgba(160, 215, 235, .18); --glass: rgba(10, 42, 76, .58);
    --gut: clamp(16px, 3.4vw, 56px); --topH: clamp(62px, 9vh, 88px); --baseH: clamp(38px, 5.6vh, 52px);
    --fs: clamp(14px, 1.9vh, 18px);
}
* { box-sizing: border-box; }
.sprite { position: absolute; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--ink); color: var(--text); }
body {
    position: fixed; inset: 0; font: 400 var(--fs)/1.75 IRANSans, Tahoma, sans-serif;
    background: radial-gradient(70% 90% at var(--glowX, 28%) 46%, #0e4a7c 0%, #0a2f57 38%, #04162c 78%);
    -webkit-font-smoothing: antialiased;
}
html.ltr body { --glowX: 72%; font-family: Jost, "Segoe UI", sans-serif; }
html:lang(ar) body { font-family: IRANSans, Tahoma, sans-serif; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.rtl .ic-flip, html.rtl .go .ic, html.rtl .ghost .ic { transform: scaleX(-1); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
#scene.on { opacity: 1; }
.veil { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(to var(--toText, left), rgba(4, 22, 44, .78) 0%, rgba(4, 22, 44, .42) 34%, transparent 58%); }
html.ltr .veil { --toText: right; }

/* top bar */
.top { position: fixed; inset: 0 0 auto; height: var(--topH); padding: 0 var(--gut); display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); z-index: 5; }
.logo img { display: block; height: clamp(40px, 6.6vh, 60px); width: auto; }
.nav { display: flex; gap: 4px; margin-inline: auto; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 36, 66, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav button { display: flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; color: var(--ice); font-size: .93em; white-space: nowrap; transition: background .2s, color .2s; }
.nav button:hover { background: rgba(33, 199, 217, .16); color: #fff; }
.nav .short { display: none; }
.tab-portal { display: none; }
.tools { display: flex; align-items: center; gap: 10px; }
.langs { position: relative; }
.langs summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 36, 66, .5); cursor: pointer; font-size: .85em; }
.langs summary::-webkit-details-marker { display: none; }
.langs-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 140px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #0a2a4c; box-shadow: 0 20px 40px -18px #000; z-index: 9; }
.langs-menu a { display: block; padding: 7px 12px; border-radius: 9px; font-size: .92em; }
.langs-menu a:hover, .langs-menu a[aria-current] { background: rgba(33, 199, 217, .18); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; white-space: nowrap; transition: transform .18s, box-shadow .18s, filter .18s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.primary, .btn.portal { color: #03233c; font-weight: 700; background: linear-gradient(180deg, #5fe6f2, var(--teal) 55%, #14a9c6); box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 5px 0 #0b6f8c, 0 16px 26px -12px rgba(33, 199, 217, .7); }
.btn.portal { height: 42px; padding: 0 18px; font-size: .92em; }
.btn.portal .short { display: none; }
.btn.ghost { padding: 9px 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); }

/* hero */
.hero { position: fixed; top: var(--topH); bottom: var(--baseH); inset-inline-start: var(--gut); width: min(46vw, 640px); display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.2vh, 22px); z-index: 3; }
.eyebrow { align-self: flex-start; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(33, 199, 217, .1); color: var(--ice); font-size: .86em; }
h1 { font-size: clamp(30px, min(5.5vw, 8.4vh), 74px); line-height: 1.28; font-weight: 700; letter-spacing: 0; text-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
h1 em { font-style: normal; background: linear-gradient(90deg, #7ff0f7, var(--teal) 60%, #4aa8e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ltr h1 { font-size: clamp(28px, min(4.3vw, 7vh), 62px); line-height: 1.14; font-weight: 600; }
.lead { max-width: 56ch; color: var(--mute); font-size: 1.06em; }
.search { display: flex; align-items: center; gap: 10px; padding: 7px; padding-inline-start: 16px; border: 1px solid rgba(160, 215, 235, .3); border-radius: 18px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 44px -24px #000; }
.search:focus-within { border-color: var(--teal); }
.search > .ic { color: var(--teal); }
.search input { flex: 1; min-width: 0; text-overflow: ellipsis; height: 46px; border: 0; outline: 0; background: none; font-size: 1.05em; text-align: start; }
html.rtl .search input:placeholder-shown { direction: rtl; }
.search input::placeholder { color: #8fb0c6; }
.search .btn { height: 46px; padding: 0 22px; }
.tlds { display: flex; gap: 8px; flex-wrap: wrap; }
html.rtl .tlds { justify-content: flex-end; }
.tlds button { padding: 3px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .05); color: var(--ice); font: 500 .88em Jost, sans-serif; transition: background .2s; }
.tlds button:hover { background: rgba(33, 199, 217, .2); }

/* labels that follow the 3D satellites */
.tags { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.tag { position: absolute; top: 0; left: 0; display: none; align-items: center; gap: 7px; padding: 6px 14px; border: 1px solid rgba(160, 215, 235, .34); border-radius: 12px; background: rgba(9, 40, 72, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: .9em; pointer-events: auto; will-change: transform; box-shadow: 0 12px 24px -12px #000; transition: background .2s, opacity .3s; }
.tag .ic { color: var(--teal); }
.tag:hover { background: rgba(14, 92, 130, .85); }
.tags.on .tag { display: inline-flex; }

/* bottom line */
.base { position: fixed; inset: auto 0 0; height: var(--baseH); padding: 0 var(--gut); display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: .82em; z-index: 3; }
.base i { width: 4px; height: 4px; border-radius: 50%; background: var(--teal2); }
.base .site { margin-inline-start: auto; color: var(--ice); }
.base .site:hover { color: var(--teal); }

/* popups */
dialog.pop { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: clamp(20px, 3.4vh, 34px); overflow: auto; color: var(--text); border: 1px solid rgba(160, 215, 235, .26); border-radius: 24px; background: linear-gradient(160deg, rgba(14, 58, 100, .9), rgba(6, 28, 54, .94)); box-shadow: 0 50px 90px -30px #000, 0 1px 0 rgba(255, 255, 255, .14) inset; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
dialog.pop.wide { width: min(960px, calc(100vw - 32px)); }
dialog.pop[open] { animation: pop .42s cubic-bezier(.2, .9, .25, 1.05); }
dialog.pop::backdrop { background: rgba(2, 12, 26, .55); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
@keyframes pop { from { opacity: 0; transform: perspective(1100px) rotateX(14deg) translateY(26px) scale(.96); } }
.x { position: absolute; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .08); }
.x:hover { background: rgba(255, 255, 255, .16); }
dialog h2 { font-size: 1.55em; line-height: 1.4; padding-inline-end: 44px; }
dialog h3 { font-size: 1.04em; color: var(--ice); margin-bottom: 8px; }
.sub { color: var(--mute); margin-top: 2px; }
.cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; margin: 16px 0 18px; }
.cols p { color: #d2e3ef; text-align: justify; }
.cols p + p { margin-top: 10px; }
.goal { padding: 13px 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(33, 199, 217, .08); }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; padding: 0; list-style: none; font-size: .94em; }
.chips li { display: flex; align-items: center; gap: 6px; }
.chips .ic { color: var(--teal); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 20px; min-height: 250px; text-align: start; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(165deg, rgba(33, 199, 217, .14), rgba(255, 255, 255, .03)); transform-style: preserve-3d; transition: transform .16s ease-out, border-color .2s; box-shadow: 0 26px 40px -28px #000; }
.card:hover { border-color: rgba(33, 199, 217, .6); }
.card b { font-size: 1.28em; transform: translateZ(24px); }
.card small { flex: 1; color: var(--mute); font-size: .93em; line-height: 1.75; transform: translateZ(14px); }
.tile { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; color: #03233c; font-size: 1.3em; background: linear-gradient(145deg, #7ff0f7, var(--teal) 55%, #0f8fb3); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 5px 0 #0b6f8c, 0 16px 22px -10px rgba(33, 199, 217, .7); transform: translateZ(34px); }
.go { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-weight: 700; transform: translateZ(20px); }

.result { margin-top: 14px; }
.result:empty { display: none; }
.verdict { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border-radius: 15px; border: 1px solid var(--line); }
.verdict b { display: block; font-size: 1.1em; word-break: break-all; }
.verdict.free { background: rgba(32, 201, 130, .13); border-color: rgba(32, 201, 130, .5); }
.verdict.taken { background: rgba(255, 170, 60, .1); border-color: rgba(255, 170, 60, .42); }
.verdict.err { background: rgba(240, 80, 80, .12); border-color: rgba(240, 80, 80, .45); }
.verdict .btn { height: 42px; padding: 0 18px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: .93em; }
.facts div { min-width: 0; }
.facts dt { color: var(--mute); font-size: .86em; }
.facts dd { margin: 0; word-break: break-word; }
.result details { margin-top: 10px; font-size: .92em; }
.result summary { cursor: pointer; color: var(--teal); }
.result pre { max-height: 30vh; overflow: auto; margin: 8px 0 0; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-word; }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--teal); border-top-color: transparent; border-radius: 50%; animation: sp .8s linear infinite; vertical-align: -3px; margin-inline-end: 8px; }
@keyframes sp { to { transform: rotate(360deg); } }

.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 16px; }
.office { padding: 15px 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255, 255, 255, .04); }
.office h3 { display: flex; align-items: center; gap: 6px; }
.office h3 .ic { color: var(--teal); }
.office p { color: var(--mute); font-size: .93em; line-height: 1.7; }
.tel { display: block; margin-top: 4px; font: 500 1.05em Jost, sans-serif; color: #fff; text-align: start; }
.tel:hover { color: var(--teal); }
.reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.reach a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(33, 199, 217, .07); transition: background .2s; }
.reach a:hover { background: rgba(33, 199, 217, .16); }
.reach .ic { color: var(--teal); font-size: 1.1em; }
.reach span { min-width: 0; }
.reach small { display: block; color: var(--mute); font-size: .8em; line-height: 1.4; }
.reach b { display: block; font-weight: 400; font-size: .93em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; color: var(--mute); font-size: .92em; }
.social a:hover { color: var(--teal); }

/* tablets and phones: the scene goes on top, the text under it, the menu to the bottom */
@media (max-width: 1080px) { .nav button { padding: 8px 11px; } .btn.portal .full { display: none; } .btn.portal .short { display: inline; } .nav .full { display: none; } .nav .short { display: inline; } }
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
    :root { --topH: 60px; --tabH: calc(78px + env(safe-area-inset-bottom)); --fs: clamp(13px, 1.95vh, 16px); }
    .veil { background: linear-gradient(to top, rgba(4, 22, 44, .94) 0%, rgba(4, 22, 44, .72) 46%, transparent 68%); }
    body { --glowX: 50%; background: radial-gradient(110% 56% at 50% 24%, #0e4a7c 0%, #0a2f57 45%, #04162c 86%); }
    .logo img { height: 42px; }
    .tools { margin-inline-start: auto; }
    /* floating glass bar, the domain search raised in the middle */
    .btn.portal { display: none; }
    .nav { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100vw - 20px), 520px); height: 68px; margin: 0; padding: 0 4px; gap: 0; align-items: center; border: 1px solid rgba(200, 240, 252, .24); border-radius: 26px; background: linear-gradient(180deg, rgba(120, 190, 225, .2), rgba(10, 44, 80, .36)); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 -1px 0 rgba(0, 0, 0, .18) inset, 0 20px 34px -14px rgba(0, 0, 0, .85); z-index: 6; }
    .nav button, .tab-portal { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px; padding: 0 2px; font-size: .76em; line-height: 1.4; color: var(--ice); border-radius: 18px; white-space: nowrap; }
    .nav button span, .tab-portal span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .nav .ic, .tab-portal .ic { width: 22px; height: 22px; }
    .nav [data-open="products"] { order: 1; }
    .nav [data-open="about"] { order: 2; }
    .nav [data-open="whois"] { order: 3; overflow: visible; justify-content: flex-end; padding-bottom: 5px; }
    .nav [data-open="contact"] { order: 4; }
    .tab-portal { order: 5; }
    .nav [data-open="whois"] .ic { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); width: 66px; height: 66px; padding: 17px; border: 4px solid rgba(8, 34, 62, .9); border-radius: 50%; color: #03233c; stroke-width: 2.1; background: linear-gradient(160deg, #8ff3f9, var(--teal) 55%, #0f9ec0); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 22px -6px rgba(33, 199, 217, .75), 0 0 0 1px rgba(200, 240, 252, .3); }
    .nav [data-open="whois"] { position: relative; }
    .hero { inset: auto var(--gut) calc(var(--tabH) + clamp(46px, 7.5vh, 84px)); width: auto; align-items: center; text-align: center; gap: clamp(7px, 1.4vh, 13px); justify-content: flex-end; }
    .eyebrow { align-self: center; }
    .search { width: 100%; }
    .search > .ic { display: none; }
    .search input { text-align: center; }
    .tlds, html.rtl .tlds { justify-content: center; }
    h1, html.ltr h1 { font-size: clamp(24px, min(8vw, 4.6vh), 44px); }
    .eyebrow { font-size: .78em; padding: 2px 11px; }
    .lead { font-size: .95em; line-height: 1.65; }
    .search { padding: 5px; padding-inline-start: 8px; border-radius: 15px; }
    .search input, .search .btn { height: 42px; }
    .search .btn { padding: 0 14px; }
    .base { display: none; }
    .tags { display: none; }
    .cols, .cards, .reach { grid-template-columns: 1fr; gap: 10px; }
    .card { min-height: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 13px; }
    .card .tile { grid-row: span 3; width: 46px; height: 46px; align-self: center; }
    .card b { font-size: 1.1em; }
}
@media (max-height: 560px) and (max-width: 1100px) { .lead, .eyebrow, .tlds { display: none; } }
@media (max-height: 680px) and (max-width: 820px) { .lead { display: none; } }
@media (max-height: 520px) and (min-width: 821px) { .lead { display: none; } .base { display: none; } .hero { bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { dialog.pop[open] { animation: none; } #scene { transition: none; } }

/* Latin details keep Latin digits (IRANSans turns them into Persian ones) */
.reach b[dir="ltr"], html:lang(ar) .office p { font-family: Jost, "Segoe UI", sans-serif; }